# Why i from RequireJS to webpack RequireJS is a Asynchronous Module Definition(AMD) lib
Its powerful to handle modulize on your page and you can handle all loader on JavaScript, you can focus on JavaScript function and web page.
But if your module is become complex and more module, you can find JavaScript request become more and more.
You can find it is a serious performance problem.
Your network has lot of request of js.
...
# JavaScript - 動作行為抽象化實例 其實標題真的不知道要怎麼定
因為只是要說明一個實例, 但又不想扯到其他太制式的東西(設計模式), 但這範例又可用於其他地方, 所以到最後就用了個似是而非的標題了…
先說一下可能的使用情境
當你在做一個動作時要做一件事 ex: 呼叫 API、紀錄 GA、狀態改變之類的事情
sample code
document.querySelector('a').addEventListener('click', function () { // GA or call API or do somethong }); 以紀錄 GA 為例
但是如果是紀錄 GA 點擊事件就會有許多區域要記錄點擊來瞭解使用者點哪個區域較多, 就要在不同區域綁定不同的 GA 但日子一久或程式變大的情況要找哪有綁 GA 就很不好找, 所以這時就需要有個 interface 來統整這事情
document.querySelector('#item').addEventListener('click', function () { // GA or call API or do somethong interfaceGa(this); }); document.querySelector('#banner').addEventListener('click', function () { // GA or call API or do somethong interfaceGa(this); }); function interfaceGa(argument) { var name = argument.
...
# Slack - bot 研究雜記 最近 bot 很夯
再加上公司需要一些自動部署與指令化的一些流程要改善, 所以就來研究一下
剛好我們是用 Slack 所以就先來試試 Slack bot 了
## Intro 先說明下最簡單的指令化處理事件的流程
大致上就是如此
再來說明一下 Slack bot 流程
所以我們需要做兩件事
在 Slack 建立一支 bot
建立 bot client 的程式
在此先說明一下 bot client
Slack bot client 是用 nodejs 寫的, 但基本上會寫 JavaScript 就可以了, 而 bot client 是放在任何可以連上網路的機器, 只要能跑 nodejs 的環境即可, 所以基本上可以先在 local 測完再上到線上的機器
## 建立 Slack bot Bot Users
### 建立 bot Go to url https://<your team name>.
...
# Node.js - 直接執行指令 因為最近要用 nodejs 做一些事, 所以就趕鴨子上架的先把功能做出來再說
然後就立馬遇到問題了…
在 PHP 中要直接執行 command line 是使用 exec
因為之前都用 PHP 寫 Shell Scripts 所以找了一下用 nodejs 要如何寫
先是找到了以下的 code
function run_cmd(cmd, args, callBack ) { var spawn = require('child_process').spawn; var child = spawn(cmd, args); var resp = ""; child.stdout.on('data', function (buffer) { resp += buffer.toString(); }); child.stdout.on('end', function() { callBack (resp); }); } // example run_cmd( "ls", ["-l"], function(text) { console.log (text) ; }); 但是發現如果是要用像是 mkdir 或者要 run shell 就會出 ENOENT 的 error
...
# JavaScript - facebook save to facebook button 2016 F8
Facebook release new function - save to facebook
Then we can use it now
## Step 1 Go to facebook developer Save Button - Social Plugins - Documentation - Facebook for Developers
## Step 2 Build or use facebook application
If you had facebook application can skip this step
If you build facebook application and you can get this code
...
# Google Adsense domain 設置 一點設定 Google adsense 的心得
因為有時會寫一寫筆記或部落格記錄人生
然後因為工作進到跟廣告有點關係的公司, 遇到裡面的一些專家
有人提議說, 既然我有寫文章的習慣, 那也可以放個廣告賺一點錢
但我個人是不太喜歡放廣告, 畢竟大家都知道廣告是拖累網站速度的元凶
但最近想說試試可不可以在自己的網站放個一個版位的廣告, 看能不能抵掉 GCP 維持的費用(應該是不太可能…
所以就在自己寫的 blog 和自己做的一些 service 放上去試試
這紀錄一下一些在用 Google adsense 比較特別的行為與情況
## US 100 才能領出來 我這要等到幾時啊…
## Google adsense 是動態 CPC + CPM 計算價錢 所以沒一定的價格, 似乎有受流量影響
## 眾所皆知, 廣告通常是 by domain 申請, 現在用 subdomain 是不行的 很久以前依據在 subdomain service 的話似乎可以, 但現在不行了
因為我用 logdown 申請說不能用 subdomain 申請…(明明約半年前還可以, 只是當時不知為何一直說我違反他們的協議, 所以一直申請不過
但 Google 自己的 blogger 卻可以, 我試過了因為我有個 blogger, 但 Pixnet 我沒試過(不過 Pixnet 可以跟他們自己申請廣告分潤
...
# JavaScript - DOM object check array & isArray polyfill One day my colleague find a question.
ECMA script isArray is not work when object is DOM element
Array.isArray(document.querySelectorAll('div')); // false And polyfill for old browser
Object.prototype.toString.call(arg) === '[object Array]'; Still fail
Object.prototype.toString.call(document.getElementsByClassName('product-img')); // [object HTMLCollection] Object.prototype.toString.call(document.querySelectorAll('div')); // [object NodeList] So i try to make a polyfill
Array.isArray = function(arg) { var type = Object.prototype.toString.call(arg); if (type === '[object Array]' || type === '[object HTMLCollection]' || type === '[object NodeList]') { return true; } return false; };
...
# Vim - JavaScript auto complete 因為同事幾乎都在用 Vim 但我每次都在看他們一直打字我看了就很痛苦 所以就建議他們用 auto complete 的功能, 但我個人因為很少用 Vim 所以就讓他們自己去找套件(我個人不喜歡在 Vim 上裝套件)
但他們似乎都遇到困難 所以我就找了一下找到個不用裝套件又可用在 Linux 和 Mac 上最簡單的 JavaScript auto complete 的方式, 應該是因為 Vim 已經內建了
只要在 .vimrc 設定
autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS 使用就是輸入部分關鍵字後先按 Ctrl + x 再按 Ctrl + o 就可以了
但只支援舊的 JavaScript API
Refer - How to auto-complete JavaScript syntax in Vim
如果要新的得再試別的方法 似乎可以補字庫進去 More
VIM的JavaScript补全
...
# HTML - redirect page from http-equiv ## Intro We can use JavaScript or PHP redirect page, we also can only use HTML redirect page
But not suggest use this way
Note: The value “refresh” should be used carefully, as it takes the control of a page away from the user. Using “refresh” will cause a failure in W3C’s Web Content Accessibility Guidelines.
使用 標籤進行重新導向可能會降低搜尋引擎排名。
## Usage <meta http-equiv="refresh" content="0;url=http://example.
...
# JavaScript - get CSS style Sometimes i want to use JavaScript get dom CSS style.
Use DOM.currentStyle and window.getComputedStyle(DOM)
For IE use DOM.currentStyle
Other use window.getComputedStyle(DOM)
var dom = document.getElementById("target"), style = dom.currentStyle || window.getComputedStyle(dom); console.log(style.marginTop); refer - Window.getComputedStyle() - Web APIs | MDN
refer - currentStyle object (Internet Explorer)
...