# JavaScript - get text from dom object not include wrap html tag in child ## Intro ### Case 1 <div id="case_1"> Hi, This is a <em>Apple</em> </div> I want to get Hi, This is a ### Case 2 <div id="case_2"> <p>I have a pen.</p>PPAP </div> I want to get PPAP
### Case 3 <div id="case_3"> Apple<span> and pen</span> and pineapple pen </div> I want to get Apple and and pineapple pen
...
# Content Security Policy - 論一般網站放置的可行性 ## 前言 Content Security Policy 出來也有一段時間了
他的目的是為了從 header 下手去抵禦一些攻擊, 基本上遵循它的rule 就可以避掉一些 XSS 攻擊
但有時加入這功能會需要變動程式的架構或者某些性質的服務是根本就是設定到可以動的話安全係數會降低許多
這裏會稍微舉一些例子來說明
關於 Content Security Policy 以下有一些連結可以幫助瞭解這個 header
Refer - An Introduction to Content Security Policy
Refer - Content Security Policy 入门教程
Refer - Content-Security-Policy - HTTP Headers 的資安議題 (2)
Refer - Content Security Policy Reference
目前有只用的知名服務有 github 和 dropbox
## 簡介 簡單說就是會限制頁面上出現的東西
domain inline style inline script iframe, frame object https 可以用 html <meta> 或用 http header 的方式使用, 所以純靜態網頁也是可以用的
...
# JavaScript - touch and click behavior in mobile browser On mobile web
If you click it
And mobile browser can fire touchstart and click
Fire touchstart event and then fire click event has the difference in time.
the step is touchstart -> click
So if you has a popup and you use touchstart event bind close behavior.
You can find it fire click event.
Then some bug happened.
...
# Sublime Text - How to modify font size in sidebar In sublime text 3
If you want modify font size in sidebar
Follow step
Preferences -> Browse Packages Open User directory Create a file File named your theme name How to get it Preferences -> Settings - User -> theme Or default theme Default.sublime-theme Add content [ { "class": "sidebar_label", "font.size": 18 }, ] ## other in Mac the path is
...
# gulp - One problem i found when i use CSS minify with some CSS library When i use pure.
And i use gulp as my front-end build tool.
I used cssmin as my CSS minify tool.
By default it can extreme compress CSS file.
The one problem happen!
display not match
Because use CSS minify can remove inherited CSS property.
So in webkit browser doesn’t has display: -webkit-flex; and layout will be an error.
...
# Linux - install gogole chrome in debian Linux wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' sudo apt-get update sudo apt-get install google-chrome-stable refer - How to install Chrome browser properly via command line?
...
# webdriver.io - 前端測試入門筆記… 前端測試工具很多種
我這裡的需求是要做自動化測試
不知為何就選了這套 webdriver.io
可能就只是單純名字很炫(誤
當然一開始要先要有 Selenium
但為何 Selenium 跟我以前的印象有差別了…
我發現它的 firefox add-on 不能把錄製的動作輸出成 code 了, 是我的錯覺嗎?還是改方式了
但我想說就算了, 直接用寫的也罷
webdriver.io 只是因為是在我看過的關於測試文章中最後有印象的東西所以就去找它了(這是事實…
也還好我的記憶沒錯, 看了介紹和文件覺得 webdriver.io 有符合我的需求且又是用 Node.js 來寫, 所以對我較友善
先記錄一下使用流程
## Base tool Java sudo apt-get update java -version sudo apt-get install default-jre sudo apt-get install default-jdk Node.js Install
## On Local Get Started
突然發現文件寫得很詳細了…
雖然在做設定那有些選項不同但也影響不大
但想玩進階的方式可參考以下文章
設定 Selenium 參數可參考
基本上以下是我建的順序
### 1 先建 package.json { "name": "webdriver", "description": "automation test", "devDependencies": { } } ### 2 下載 Selenium server 之後有新版請再去確認版本
...
# Let’s Encrypt - Has a certificate problem in Android Chrome If you use Let’s Encrypt as SSL certificate
Then setting this in Nginx
ssl_certificate /etc/letsencrypt/live/<domain>/cert.pem; You can find it maybe has problem in Android Chrome
Now you can modify this
ssl_certificate /etc/letsencrypt/live/<domain>/fullchain.pem; ## Test your SSL SSL Server Test
Refer - Let’s encrypt certificate not working for Andriod’s Google Chrome
...
# 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.
...