顯示具有 javascript 標籤的文章。 顯示所有文章
顯示具有 javascript 標籤的文章。 顯示所有文章
2024年8月2日 星期五

Node.js 開發筆記 - 分別透過 Pyodide, Brython, WebAssembly 在 node.js 呼叫 Python Code @ node.js v20, python3.11

›
一時興起研究一下 node.js 呼叫 python code 的方式，當然，都在 linux server 可以直接用 child_process 直接呼叫 python 去運行，例如 nodejs.org/api/child_process.html 的範例 ``` con...
2024年3月13日 星期三

Node.js 開發筆記 - 將 C structure 轉成 Javascript code 流程

›
在 C code 處理記憶體時，有些偷閒招數是強制型態轉換，這時要移植到 node.js 運行的 js code 有點繞，整個開發過程就不斷在 c code 輸出 structure 的資訊，跟 js code 那端交叉比對，理解後也沒什麼難，就是要計算記憶體位置 C code:...
2022年9月13日 星期二

Javascript 開發筆記 - 使用 Vue.js 和 Vite

›
規劃網頁開發時，引入一個框架是不錯的選項，讓團隊有共同溝通的語言，目前打算把以前接觸 Vue.js 部分複習一下，直接來用 Vue 3 以及 Vite ，其中 Vite 是一個很像 Webpack 的工具，號稱是下一代前端開發工具且運作效率高，看了一下是可以達成打包的程式碼任務，...

Javascript 開發筆記 - 使用 npm/npx degit 管理開發模板

›
當你把你習慣的部分都設置在 github 後，可以靠以下資料快速複製出來使用： % npx degit changyy/study-node-electron-simple my-project  > cloned changyy/study-node-electron-s...
2021年6月27日 星期日

Node.js 筆記 - 以 HTTP API 提供 ffmpeg 轉檔，以 jpg 轉成 png 為例 @ node.js v10.24.1, macOS 11.4

›
最近接獲一個任務研究了一下 Javascript 與 H264 的解決方案，首先會立馬想到 ffmpeg 方案，就研究了以下 JS 專案： ffmpegwasm/ffmpeg.wasm Kagami/ffmpeg.js udevbe/tinyh264 oneam/h264bsd ...
2021年6月12日 星期六

Node.js 筆記 - 使用 Puppeteer 監控瀏覽網頁的 Requests 跟 HTML Code @ macOS 11.4, node v14.14.0, npm 6.14.5

›
緣起於在追蹤網站架構時，每次都靠 chrome browser 開發人員工具去追蹤特定的 request 還好，若需要大量瀏覽找尋一些蛛絲馬跡時，就會很煩！以前很閒時，就會跳下去寫 chrome extension 或是熱衷於 C++ 時，就會寫一點點  Chromium Emb...
2021年1月14日 星期四

[Javascript] 複寫 XMLHttpRequest 來紀錄 Network Request URL @ Chrome Browser DevTools

›
最近 podcast 很夯，來研究 <audio> 。之前研究過 <video> 就有發現現在都用很夯 blob 的播放方式，透過 JS 片段下載資料交給 <video> 播放，以至於從 JS 調閱出 <video> 元件時，看不到...
2019年11月24日 星期日

[JS] Google Adsense 自動廣告 - 關閉 錨定廣告/重疊廣告 方式

›
前陣子跟 Google Adsense 的新加坡客戶經理聊過幾句，被她引導開啟了一些自動化廣告最佳化的項目。最近發現公司的網站出現 錨釘 廣告，想說是不是不小心誤上程式碼，最後想起應當是自動化廣告的機制。 對於一些頁面不想開啟置頂或置底的錨定廣告，可用以下方式關閉： ...
2019年5月19日 星期日

Javascript 開發筆記 - 強制 HTTPS 瀏覽機制

›
用 Blogger 搭配自訂網域時，可以靠 cloudflare 提供免費的 SSL 憑證，以此提供免費的 HTTPS 加密瀏覽體驗，然而，在 Blogger.com 使用 HTTPS 時，有個選項詢問是否開啟 HTTPS 重新導向，若採用 blogspot.com 網域...
2017年12月30日 星期六

[Javascript] Google Sheets 與 Google app script - 處理 JSON API data

›
之前看到別人用 Google docs - sheets 與表單製作點飲料的功能（有點年紀的大概都會想到訂便當系統？），才發現 Google Sheets 其實有提供像 Excel - VBA 這種制定功能的架構，真是相見恨晚！最近幾年都改用Google docs做了很多事，面對...
2016年7月4日 星期一

Bootstrap 筆記 - 讓 table 以 <tr> 為單位支援 click event

›
這功能其實不難，但順手筆記一下自己選的解法： <table class="table table-striped table-hover"> <thead> <tr> <td cols=...
2015年8月21日 星期五

Javascript 開發筆記 - 透過 Google Maps Routing API 畫路徑 (Directions Service)

›
使用 GPS Location 畫圖時，點太多太精細，容易畫很慢，點太少太粗糙時，發現畫出的線會很糟，例如截彎取直的現象。雖然正解應該是先把精細路徑畫出圖來用，例如每個 zoom level 都畫好路線圖，而非動態畫線、畫點。但就是想偷懶透過 Google Maps API...
2015年5月7日 星期四

Javascript 開發筆記 - 使用 Yuotube Player API for iframe Embeds 將 videos 串成 playlist

›
透過 Youtube Player API 可以動態把一堆 Youtube video 串成一個 playlist 來播放。網路上不少範例，但很少看到處理多則 video 的方式，有也是一則 video 搭配一個 player 架構，摸了一下終於搞懂其設計架構，片段程式碼： ...
2015年4月2日 星期四

Android 開發筆記 - 嘗試取出 WebView Javascript console.log @ 小米2S Android 4.1.1

›
原先 Android 4.4 已經有漂亮的解法：Debugging Web Apps，但是，對於其他版本的就 糟糕了。 所幸小米2S的系統還算 ok，只需啟動開發者模式，並播打電話 *#*#717717#*#* 後，即可開啟完整的開發者模式，透過 adb 連線。 $ a...
2015年1月2日 星期五

MongoDB 開發筆記 - 替 Mongoose (Node.js MongoDB Driver) 送 patch 的經驗

›
大概 2014 年 11 月附近，下了班仍會抽空把玩 MongoDB ，當時就決定搭配 node.js 來把玩 :P 當時在挑選 Node.js MongoDB Driver 時，看到官方文件提到了 Mongoose ，就順勢把玩了幾下。 對於 nodejs - mong...
2014年7月11日 星期五

[Javascript] 使用 AJAX/jQuery 與 JSONP/Callback 處理跨 domain 問題

›
很久沒寫 ajax 了 :P 由於機器整合不易？所以 API 就是要跨網域多台機器要互動。至於原理可以看看 wiki JSONP 簡介，在此筆記一下 Server Site 跟 Client Site 的用法 Server Site API 支援 JSONP 使用模式: ...
2014年6月1日 星期日

[NodeJS] 透過 Wget + HTTP Proxy Server 架構進行 Content 分析

›
前陣子研究抓取資料時，發現 web crawler 搭配 proxy 時，可以在 proxy 這層進行資料的處理、分析，就一直思考到底要用 python 還是 node.js 測試，最後，實在是 node.js 方便許多，就...衝啦。 在進行之前，小提一下 Proxy Se...
2014年3月12日 星期三

[Javascript] Bootstrap - 使用大量 Collapse 與 錨點(anchor/hashchange) 處理

›
最近在使用 Bootstrap 來包裝 Web UI ，有一卡車多的東西就先用 Collapse 包起來，而官網的範例： Bootstrap:Panels Bootstrap:Collapse <div class="panel-group...
2014年3月11日 星期二

[Javascript] AngularJS 與 img src ＆ img ng-src

›
用 AngularJS 在處理 img 時，沒看手冊的用法： <img src="{{item.url}}" /> 雖然網頁顯示一切正常，但仔細看 Google Chrome 開發人員工具時，發現有奇怪的 requests 發出去，是...
2014年3月4日 星期二

[Javascript] 偵測 AngularJS rendered a template - 以 Google Visualization API 應用為例

›
用 AngularJS MVC 架構時，想撈出資料後，再動態用 Google Visualization API 繪出資料。然而，在 AngularJS 架構下，不該怎樣偵測它已經完成呈現部分(rendered a template)，依照原理，只好看看何時能取得到某物件(doc...