What 3.0 改版上線

~尋找生活新鮮事~

  • Mac OS X VPN 設定

    Mac OS X VPN 設定

    工作的關係常要跑到客戶那邊處理一些有的沒的，從外面要連回公司要用 VPN 連線。 前些時候把 Macbook Pro 洗白白重灌 Mavericks 後，覺得 VPN 就怪怪的，顯示的 IP 都不是公司的 IP。 找了一下設定，原來是少勾了一個選項。 先打開網路設定，進入 VPN 的畫面，點選右下方的 [Advanced…]。

    繼續閱讀全文…

  • Get the markup of an element, including itself using jQuery

    接手同事的 code，需要接續 AJAX 的資料對前端頁面進行更動。 假設一段 html code 如下： <div id=”container” class=”wrapper”> <div id=”one”>test 1 </div> <div id=”two”>test 2 </div> <div id=”three”>test 3 </div> <div id=”four”>test 4 </div> </div> 以下 jQuery 語法可以其得其中的 html 元素： $(‘#container’).html(); 不過卻不包含 <div id=”container”> 本身，如果要取得包含自身的 html，應改為如下： $(‘#container’).get(0).outerHTML; 注意不論是取 $(‘.wrapper’) 還是 $(‘#container’) 都要用 get(0) 指定 DOM 元素。

    繼續閱讀全文…

  • Regex Golf：挑戰自己對 Regex 的自信

    在網路上逛到一個有趣的挑戰網頁，內容是各式各樣的 Regex (正規表達式) 考題，看看你能得到多高的分數。 如下圖，左邊的字串是要符合的，右邊的字是要排除的。用越短的表達式答題可以得到更高的分數。按 Enter 就進入下一題。 照順序玩下來，第四題 Backrefs 就覺得困難了啊… Orz http://regex.alf.nu/

    繼續閱讀全文…

  • Disable Cache for PHP 5.5.3 in MAMP

    前些時間接手一個已經上線的案子，進行改版作業。從 Git 上把 code 拉下來，執行一下就… 爆了。發現同事用了相當新的 PHP 語法。我本機的開發環境是 PHP 5.2.x，無法執行。 馬上想到 MAMP 可以切換成新的版本，切換成 5.5.3 問題就解決了。

    繼續閱讀全文…

  • Installing node.js on OSX 10.9 Mavericks

    除了 LAMP 外，一直想學點新把戲。2014 年的第二天，終於把工作告一段落，偷閒來看一下 AngularJS 的教學。沒想到教學文件是基於 node.js 執行的。 不過以前在 Mac OS X 上安裝 node.js 還挺麻煩的。沒想到跑去 node.js 網站上一看，居然已經有 node 和 npm 包在一起的 pkg 安裝包了，真是佛心。所以安裝完全無痛啊！

    繼續閱讀全文…

  • MySQL: GROUP_CONCAT function

    在 MySQL 上經常遇到如下的資料： id    value 1    A 1    B 1    C 2    A 2    C 這種情況在要輸出報表的時候就覺得很麻煩，一旦 Group By 起來，就失去了 value 的內容。不想丟失 value 的內容也不想出現多筆重複的 id 就得多下幾次 sql 才能取得完整的資料。 今天又是一個偶然在 StackOverflow 上看到 GROUP_CONCAT() 這個沒見過的指令，馬上試試有什麼效果。 SELECT id, GROUP_CONCAT(value) as values FROM table GROUP BY id ORDER BY id 就能得到以下的結果： id=1, values=A,B,C id=2,…

    繼續閱讀全文…

  • Bookmark: CSS Text Filling With Water

    用 CSS 與 Javascript 模擬出液體填充的效果，附上實際的效果。 See the Pen CSS Text filling with water by Lucas Bebber (@lbebber) on CodePen CSS Text filling with water – CodePen

    繼續閱讀全文…

  • Bookmark: CSS Number Scroll

    用 CSS 和 Javascript 製作數字轉動的效果，還沒用過，先留個書籤。 CSS Number Scroll

    繼續閱讀全文…

  • Bookmark: Hashids, Generate short hashes from numbers

    以前寫過自己的短網址服務，不過那時候很多計算，尤其是網址的編碼都是亂寫一通。跟朋友討論的時候才曉得用 base36 之類的方法編碼。 最近又碰到一個需求，需要將幾組參數編成較短的字串，在 StackOverflow 上亂逛找到了 Hashids 這個好東西。支援多種語言、可自訂 salt，可編多組參數，最重要是這是雙向的，可以解回來。完全符合需求。 ps. 其中 PHP 版的範例有用到 namespace，把源碼的 namespace 註解掉就可以在 PHP 5.3 以下使用。

    繼續閱讀全文…

  • MySQL: How To Count Rows But Still Show All The Rows?

    之前寫過 MySQL: Displaying Rows With COUNT 0 With Group By，用於強制顯示 Count() 為 0 的資料。最近又看到另一種寫法，因為我自己很少這麼寫，所以留個筆記。 SELECT col1, (SELECT COUNT(*) FROM table1 t1 WHERE t1.id = t2.t1_id) as Total FROM table2 t2 GROUP BY t2.id; 把子查詢放在 SELECT 敘述。試了一下，這種寫法的查詢速度會比單純的 left join 慢上許多，實際應用要視資料筆數來決定。

    繼續閱讀全文…

  • Bookmark: Photoshop Plugin Logn Shadow Generator

    近來因為 Flat Design 的流行，flat 風格常出現的元素也開始被重視，其中長長的斜 45 度陰影便是其中之一。這個 Photoshop plugin 可以方便地製作出長陰影的效果。 http://lab.rayps.com/lsg/

    繼續閱讀全文…

  • Git: How to count member's commits

    在 Git 裡計算 commits 數量個人是覺得沒什麼意義，頂多就是看著數字，滿足一下虛榮心吧。跟看磁碟重組的小方塊差不多。 $ git shortlog -s -n 65 CQ 34 Robin 12 Diro 8 micky 類似這樣，參考參考。 [Updated: 12-11-2013] 如果想查詢全部共有多少 commits，可以用以下指令： $ git rev-list HEAD –count 119

    繼續閱讀全文…

  • Codeigniter: Check if libraries/helper/core files is loaded

    使用 CodeIgniter 框架開發時，會透過 $this->load->library() 之類的方法來載入特定的檔案。在 CI 的 routing 規則中，同一個檔案只會被載入一次，因此多寫幾次 $this->load->library() 是不會發生什麼慘劇的。 不過有時候還是想確認到底某 class 有沒有載入過，而不想到處丟 $this->load->xxx() 的話，可以用以下方法來確認。 if (class_exists(‘Library’)) { $this->library->myMethod(); } 要注意的是 CI 有別名的規則，比如說有個 model 叫 ‘file_model’。使用別名載入時，會寫成以下 $this->load->model(‘file_model’, ‘file’); $this->file->do_something(); 這種情況下，若要檢查是否已載入，要用原名。如下： if (class_exists(‘File_model’)) { // do something }

    繼續閱讀全文…

  • Javascript: Repeat Character N Times

    開發過中常碰到一種情況是希望某字串能重複出現數次。 以前端開發來說，希望用 JavaScript 來重複產生 HTML elements 的時候，覺得用 for 迴圈寫這個也太囉嗦。 有個比較簡單的 “語法” 來處理這個情況。 Array(11).join(“a”); 這樣就可以得到 11 – 1 個 a，aaaaaaaaaa。 產生重複 elements 就如法炮製， $(‘ul’).html(Array(5).join(‘<li class=”whatever”>list</li>’));

    繼續閱讀全文…

  • Bookmark: Jcrop

    最近一個專案需求，要讓使用者可以在網站上選取照片、裁切，然後做為相簿封面。最重要的是前台讓使用者操作的畫面必須簡單好用，一樣是來自同事推薦的 jQuery 套件 Jcrop。可以簡單地呼叫出裁切畫面，設定與事件都很容易使用。 完成裁切後，呼叫 Jcrop 回傳座標，Ajax 傳回主機，接著我用 PHP image-moo 套件完成實際的影像處理，再把圖片回傳前端，使用者就能看到一張即時的封面圖片了，相當簡便。

    繼續閱讀全文…

  • Bookmark: Font Awesome

    Font Awesome，同事推薦的字型套件，可以搭配 Bootstrap 使用，作為無級縮放的圖示。

    繼續閱讀全文…

  • Bookmark: FitText.js

    FitText.js 可以根據 parent element 自動調整文字大小的 jQuery 套件。在開發網站時，常碰到標題文字過長的問題，但是標題不像內文可以被裁剪，比較合適的 solution 是折行或縮小字體，但是前者常會造成破版，而後者沒辦法用 CSS 直接處理。 懶得自己寫文字調整，就靠套件解決吧。

    繼續閱讀全文…

  • Mac OS X v10.4 and later: How to prevent .DS_Store file creation over network connections

    Mac OS 會在資料夾寫入一個名為 .DS_Store 的隱藏檔，這個檔案是用來紀錄該資料夾的一些自定義屬性，像是檔案排列之類的。有點像 Windows 的 Thumbs.db，都是挺令人煩燥的檔案，儘管正常情況下是看不到的。 Mac OS 預設很奇妙地會在許多地方留下這個足跡，例如隨身碟或連線磁碟，留在本機就算了，留在非本機硬碟真的很惱人。 還好，這個設定是可以修改的，打開 Terminal 輸入以下指令： defaults write com.apple.desktopservices DSDontWriteNetworkStores true 如果要改回來，在 Terminal 輸入以下指令即可。 defaults delete com.apple.desktopservices DSDontWriteNetworkStores 適用的 Mac OS 版本：10.4 ~ 10.8。

    繼續閱讀全文…

  • Fix Sublime Text’s quirky PHP variable selection

    Sublime Text 是近來相當受歡迎的文字編輯器，快速、方便的操作介面對程式開發有很大的助益。這也是我目前在 Mac 上主要的文字編輯器。 不過在開發 PHP 的時候，Sublime Text double click 選字卻不會選到 PHP 變數前的那個 $ 錢字號。一開始還蠻困擾的，但實際用起來好像不太影響我寫程式的流程，所以就放著不管了。 But! 我同事問了… 他說這個讓他很困擾，有沒有辦法在 double click 的時候連 $ 一起選起來。 Sublime Text 幾乎所有的參數都能改，這也是這個編輯器很妙的地方，可以高制客製化。 先開啟 Packages 路徑… Sublime Text > Preferences > Browse Packages… 打開後進入名為 User 的資料夾，新增一個純文字檔，命名 PHP.sublime-settings。 裡面貼上這段文字後存檔離開，Sublime Text 會馬上生效。 { “word_separators”: “./\\()\”‘-:,.;<>~!@#%^&*|+=[]{}`~?” } 這樣點兩下選取變數就會連 $ 一起選起來了。

    繼續閱讀全文…

  • Bookmark: CSS ARROW PLEASE!

    CSS ARROW PLEASE! 是一個相當簡潔有力的服務，用 CSS 產生帶有箭頭的框框，可以省下自己刻的時間，方便啊。

    繼續閱讀全文…

Exit mobile version