Elvis Hsieh Blog

有許多 Browsers，不同 Browser 內定的樣式表都有其預設值，在設計網頁時，對於不同 Browsers 之間，可能就需要為不同 Browsers 設計不同的 CSS ，這樣讓網頁設計者相當困擾，一般的做法是將不同 Browsers 內定的樣式表預設值 Reset，Reset 之後才設計元件的 CSS，這樣設計出來的 CSS，使用不同 Browsers 觀看，就會有相同的效果。 目前網路上常被使用 Reset 樣式表預設值的套件有： Normalize.css makes browsers render all elements more consistently and in line with modern standards. CSS Reset HTML5 Reset Stylesheet 樣式表有優先順序，其寫法上的優先順序為：[1] Client user defined style Embedded or inline style sheet  Internal style sheet External style sheet Browser default style(Client User browser) 按照 CSS Selector 來區別優先順序，在 CSS 2.1 Section 6.4.3 :[2]中寫道： A selector's specificity is calculated as follows: count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.) count the number of ID attributes in the selector (= b) coun...

Wandbox 是一個線上 Compiler，提供 C++, Javascript, Java 等主流語言線上編輯及編譯的功能，特別的是它也提供 Swift 語言、Boost 最新版本、支援 C++ 最新的標準，除此之外，還支援 Vim, Emacs 等編輯器，整個 Project 的原始程式碼 都存放在 GitHub ，如果有時間，可以嘗試下載來安裝看看。 在 Wandbox 中的 Wandbox-vim 作者 寫了 一些套件 ，其中 Shiba is a rich markdown previewer, Trendy is a GitHub Trending Repositories watcher & manager, 還有 Vim Plugins 是比較有興趣的專案。

Responsive Web Design(RWD) 是現在網頁式設計時必須要考慮的要件，但是在開發的過程中，需要同時對於不同的 Device 檢視效果，gulp + browser-sync 是一種可以同時更新不同 Device 的 workflow，設定的步驟如下： 安裝 nodeJS: npm update: npm update 安裝 global gulp :  npm install -g gulp 切換到 project 目錄 安裝 gulp + browser-sync + gulp-sass: npm install gulp browser-sync gulp-sass --save-dev 新增 gulpfile.js:內容如下 執行 gulp: gulp 依照 Browser-sync 網站的說明 ，gulpfile.js 內容如下：   var gulp = require ( 'gulp' ); var browserSync = require ( 'browser-sync' ); var reload = browserSync . reload ; var sass = require ( 'gulp-sass' );     // start server gulp . task ( 'browser-sync' , function () { browserSync ({ server : { baseDir : "./" } }); }); // process JS files and return the stream. gulp . task ( 'js' , function () { return gulp . src ( 'js/*js' ) . pipe ( browserify ()) . pipe ( uglify ()) ...

SublimeText 是一個類似於 Vim 的編輯器，安裝套件及設定過程可以參考「 利用 Sublime Text 3 + Zen Coding 編輯網頁程式 」，安裝 Sublime 以後，在檔案總管中，按右鍵卻無法使用開啟 Sublime Text 編輯檔案，需要自己設定 reg 檔，設定步驟： 開啟 regedit.ext 檔，找 HKEY_CLASSES_ROOT\*\shell，新增一個機碼： Open with SublimeText3 在 HKEY_CLASSES_ROOT\*\shell\Open with SublimeText3 新增一個機碼：command 修改 command 機碼的預設值，改成 SublimeText3 安裝程式的路徑，以及加入 "%1"：C:\Program Files\Sublime Text 3\sublime_text.exe "%1" 開啟檔案總管，按下右鍵，確認是否會出現 Open with SublimeText3 的字樣，並且是否可以開啟編輯的檔案

emscripten 是一個以 LLVM為基礎的系統，主要目的是將 C, C++ 開發的程式碼利用 LLVM 轉成 javascript 程式碼，讓 C, C++ 程式可以呈現 Website 中。要使用 C, C++ 開發 Web 程式碼，可以使用 emscripten SDK 來開發程式，如此可以省略許多不必要的環境設定過程。 在 emscripten 網站中提供各種不同平台的 emscripten SDK，在 Windows 平台，最直接的是使用 Installer 來安裝，但為了移植性，底下是採用 portable 版本： 下載 emscripten portable 版本，解壓縮到指定的目錄  切換到解壓縮目錄，開啟 Command Line，輸入 emsdk update  此時會下載 emscripten SDK 最新版的安裝檔，完成後，再輸入 emsdk install latest  安裝完成後，設定環境變數： emsdk activate latest --global  // --global option was env for all user Testing : compile hello.c : emcc hello.c  // output a.out.js  node a.out.js   # show "Hello World" in screen compile hello.cpp : em++ hello.cpp -o hello.html  // output .html file compile sdl.cpp from emscripten : em++ sdl.cpp -o sdl.html emscripten SDK 與 Wt C++ Web Toolkit 不同，emscripten 直接將 C, C++ 轉成 jascript or html 輸出， Wt 是一個 C++ Web Toolkit Library，要知道如何使用 Wt Library，但是， emscripten SDK 則不需要，不過，要執行較精確及效率是數學問題或程式，需要考慮是否適和使用 emscripten SDK...

在 NotePad++ 中亦可以加入 Emmet 的套件，讓編寫網頁程式更容易、輕鬆些。使用 NotePad++的套件管理加入 Emmet 時，同時會加入 Python Scripting 套件，不過這個似乎有些問題，當安裝完成後， Emmet 套件卻無法正常產出特有的 html 標籤，需要重新安裝 Python Scripting 以後，功能才會正常。  安裝 NotePad++， Plugins >> Plugin Manger >> Show Plugin Manger 在 Available Tab 中，勾選 Emmet 套件，然後按下 Install 重新啟動 NotePad++，使用 html:5 或者 html>(head+body) 語法，點選 Plugin  >> Expend Abbreviation 測試，結果是：無效 (NotePad++ Plugins 下的 Python Scripting 目錄內沒有檔案) 下載 Python Scripting：http://sourceforge.net/projects/npppythonscript/ 目前的版本是：PythonScript_1.0.8.0.msi 安裝  重新啟動 NotePad++，再使用 html:5 或者 html>(head+body) 語法測試 由於 Emmet 的 Short Cut Key 是 Ctrl + Shift + Enter，但實際使用 Keyboard 測試卻無效，必須將它改成另外的組合鍵，作法是： 在 NotePad++ 中，選 Settings >> Shortcut Mapper 在 Shortcut Mapper 設定視窗中，將 Expand Abbreviation 的 Short Cut Key 改成 Ctrl + E

這一期的 中央研究院計算中心通訊電子報 中介紹了一個類似於 vi, vim 的編輯器 Sublime，在 Sublime Text 3 新手上路：必要的安裝、設定與基本使用教 中介紹基本的設定及安裝必備的套件，其中談到 Emmet (之前叫做 Zen Coding) 這個名詞，好奇的到 Google 大神找了一下文件，在 Zen-Coding - 教你極速撰寫HTML5與CSS3程式碼 中的影片，介紹了 Zen Coding 極速編輯 HTML + CSS 的功能，許多新的軟體或套件一一被開發出來，可見新新一代的創意及巧思，是很好的一件事。 另外，在必備套件中提到了 AngularJS 的套件，在 AngularJS — Superheroic JavaScript MVW Framework 的官網 中間有一個 HELLO 的介紹，與 JQuery 做了比較，乍看起來，要製作一個 MVC 的網頁介面，似乎比 JQuery 簡單多了。 Sublime Text 3 的安裝： 1. Ctrl + ` ： 進入命令輸入列，輸入底下的指令來新增 Package Control 的套件      https://sublime.wbond.net/installation 2. Ctrl + Shift + p ：開啟 package control 的輸入畫面，輸入 inst 後，選擇 Package Control: Install Package 3. 輸入妳想要安裝的 Package Name or keyword：    （1）emmet(Zen Coding)  （2）angularJS  （3）LaTeXing and LaTeX-cwl    （4）ConverToUTF8 (5) SideBarenhancement (6) HTML-CSS-JS-Petty      (7)SideBar  (8)Dayle Rees Color Scheme  (9)PreDawn  (10)BarcketHighlight (11)SublimeCodeI...

PHP長期以來都提供了良好的 Web Application 開發環境，目前流行的開發過程是採用 MVC or MVP or MVVM ，而 MVC 的開發環境是在 PHP Framework 最被使用的一種方式，在之前認為 YII 是一個不錯的 PPH Framework，主要是快速、輕巧，但是今天在 php master 中看到一位開發者是 Using Zend Framework with Symfony ，如果 Symfony 能與 Zend Framework 結合的很好，是乎可以考慮使用這樣的組合來開發 Web Application，而不需要使用到 Wt(a C++ library for developing web applications ) or Qt 5 的平台來開發 Web Application。

昨天(2012.05.17)聽「 那一年，我們談的個人資料保護 」時，與計中林組長談起 Web services ，還以為是 Web 的開發？於是 Google 了一下，在 Wikipedia's Web Services 的解釋是 is a method of communication between two electronic devices over the Web (Internet) 。是乎有些籠統，在 reference 中有一篇文章「 Putting the "web" into the web services 」中提到 Rest 系統，於再次 Google 一下，石頭閒語中有一篇 RESTful 的實做 。 http://www.petefreitag.com/item/431.cfm

在 Alex MacCaw Blog 中提到一個問題，就是：當使用者 click 個動作之後，必須等待 Server 的 response，例如 Gmail 在送出信件後，必須等待一下子，也就是等待 Server 將信寄出，然後才可以繼續使用 Client 端的畫面。     這樣的設計方式是不符合 User 所期待的。 User 不需要去管 Ajax 的問題，只希望 Gmail 送出訊息之後，告訴 User 是否寄信完成；這種需求就好像插入耳機以後，系統會出現一個耳機插入的訊息，提醒 User 可以使用耳機了，而不會影響其他的動作。     在 Alex MacCaw 開發的 Spine Javascript Framework 已經解決這個問題，他把它稱為 Asynchronous User Interface - AUI, 在他的 Blog 中也有例子說明如何實做 AUI 的使用介面。