# CSS4 - 關於 css4 and postcss 的一些想法 ## 前言 在年末才來發這篇文…
在今年大家開始瘋 react(咦? AngularJS 勒…), Babel, postcss
好像沒聽過上述這幾個詞就沒法自稱前端工程師(還好我現在都自稱打字員)
到了最近才有空閒研究 postcss 到底在做啥
一開始聽說可以無痛接軌未來(welcome to feature), 不像 Sass 未來如果要轉換就不好轉換(其實見仁見智啦)
聽起來好潮喔, 但很忙沒時間搭理它
而且這年頭的 tool 都越來越多步驟和許多工具要搞, 除非靜下心來專心研究, 不然哪有時間搞啊(感覺像是逃避的藉口…)
直到了最近自己有些小東西要改, 需要用到變數的功能, 就想到 CSS4 不是有大家夢寐以求的 var() 功能嗎(感覺潮潮的)
就花了點時間研究一下 postcss 這在 github 的專案
一看下去不得了, 包山包海一卡車功能, 還包含了之前聽別人介紹的連 Sass 的部分寫法的功能都有…
看完的瞬間想翻桌, 只是要寫個 CSS, RD 何苦為難 RD 呢, 我不需要那麼多功能啊~
還好有仔細看到主要 CSS4[註] 是用 cssnext 這專案來處理(網站還用回到未來的梗…)
所以我就果斷使用 cssnext 就好了(我真的很討厭用一套工具還要裝許多套件, 然後有的套件還不一定是你需要的不然就是有套件的部分功能是重複的…)
## gulpfile 設定 現在有一大堆 build tool 像是 grunt, gulp, browserify, webpack 等工具
...
# Something about XSS(Cross-site scripting) If not set anything
Use like
<?php echo $_GET['name'];?> and querystring name = <script>alert(document.cookie)</script>
And not defence XSS
In Firefox
In Chrome
In Safari
## Result Chrome & Safari browser has handle XSS default
## Defence Set header X-XSS-Protection: 1
if use PHP, can use
htmlspecialchars() // or htmlentities() ## Important! Finally
We must know it is handle encode to avoid run JavaScript on page
...
# php - Ubuntu 14 PHP 5.6 or to upgrade from PHP 5.5 sudo apt-get -y update sudo add-apt-repository ppa:ondrej/php5-5.6 sudo apt-get -y update sudo apt-get -y install php5 php5-mhash php5-mcrypt php5-curl php5-cli php5-mysql php5-gd php5-intl php5-xsl php5-bcmath if use php -v check version is 5.5.x
I use
sudo apt-get -u install php5-cli Refer - PHP 5.5 or 5.6—Ubuntu
...
# JavaScript - Get some value about form input type and select ## Select <select id="select_data"> <option value="1">test1</option> <option value="2" selected="selected">test2</option> <option value="3">test3</option> </select> var e = document.getElementById('select_data'); var strUser = e.options[e.selectedIndex].value; If want to set selected
var e = document.getElementById('select_data'); e.querySelectorAll('option')[2].selected = true; Get change option
document.querySelector('#select_data').addEventListener('change', function (e) { var _this = this.options[this.selectedIndex]; }); ## radio <div class="row"> <p class="col">device</p> <div class="row col s12 m2"> <input name="group1" type="radio" id="device_water_1" value="1" checked /> <label for="device_water_1">True</label> </div> <div class="row col s12 m2"> <input name="group1" type="radio" id="device_water_2" value="2" /> <label for="device_water_2">False</label> </div> </div> // for IE9 up var val = document.
...
# Linux / Unix - terminal control 終端機指令列的一些操作
Ctrl + a: 回到此行最前面
Ctrl + e: 到此行的最後面
Ctrl + u: 清除一行中游標之前的所有文字
Ctrl + k: 清除一行字游標之後的所有文字
...
# nginx - Study Log 半調子的紀錄…
## Command Line sudo service nginx start sudo service nginx restart sudo service nginx stop # 測試 nginx 設定 sudo nginx -t ## config # document root root /usr/share/nginx/html; # set page show index index.html index.htm index.php; # 把 lib 目錄打開 location /lib { autoindex on; } refer - Can I hide all server / os info?
...
# Google Cloud Platform - Study Log ## Intro 之前有幸參加亞太區 Google Cloud Platform 發表會, 聽完後就有點心動(因為價錢低於 AWS), 但ㄧ直沒時間研究怎麼用就這樣拖了很久…
加上之前用的網路空間不穩又常常換硬體主機, 換完就要重建帳號很麻煩(雖然是免費的, 但去常常在假日跟我一起休息…)
所以打算把 demo code 和一些小東西丟到 GCP 試試, 改用 GCP(開始要花錢了…)
## Service type ### Compute Engine Google Compute Engine
簡單說就是 AWS 的 EC2
就是在上面 run VM 開 web service 的服務
## Usage for me f1-micro (vCPUs: shared, RAM: 0.60 GB) * does not support local SSD - 10GB storage
這樣 USD 5, 不含流量
...
# JavaScript - something about childNodes and nextSibling why they get DOM is not as you imagine childNodes MDN
nextSibling - MDN
## Sometimes we use childNodes ### HTML <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul> ### JavaScript console.log(document.querySelector('ul').childNodes); // output [text, li, text, li, text, li, text, li, text] Why?
Then
### HTML <ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li></ul> ### JavaScript console.log(document.querySelector('ul').childNodes); // output [li, li, li, li] If you log text object, you can find it is wrap.
...
# PHP - Auto update static files cache We can cache static files(CSS, JavaScript) to client
When Server update static code.
We want to update cache then we can modify file or add query string update version.
We have some choice like modify url ?v=1 to ?v=2
But I want to auto modify version.
This is a way i use
<?php function autoversion($url) { $ver = stat($_SERVER['DOCUMENT_ROOT'] . $url)[mtime]; return $url .
...
# JavaScript - Google Closure Compiler V.S. Gulp uglify ## Intro I have two choice
Google Closure Compiler
UglifyJs
### Google Closure Compiler Google Closure Compiler
Google Closure Compiler is a tool for minify and uglify js.
From Google
Java
Command Line
Slow
### UglifyJs mishoo/UglifyJS2
More option setting
Node.js
Command Line
Fast
## Test ### Google Closure Compiler When i run command line, it used lot of cpu source.
...