利用 Posterous 記錄閱讀網站時的筆記與心得

這次要來介紹一個 blog 系統—Posterous。

它主打的特點是：不用註冊，只要發 E-mail 就可以張貼網誌。詳細步驟與功能介紹請參考重灌狂人的＜Posterous 用Email寫部落格，自動貼圖、嵌入音樂、影片＞。

我只補充一個比較少被提到的功能：書籤列小工具（bookmarklet）。它可以將你選取（或是它自己偵測到）的圖片、影片、文字加到你要張貼的文章中。所以我現在都利用它在瀏覽網頁時作筆記或整理心得。

不過 Posterous 的 bookmarklet 連結與說明有一點難找，懶得找的人可以直接點這裡。

如果你不知道怎麼把 bookmarklet 加到你的瀏覽器，請參考該頁右邊綠色區塊的說明；
實際使用方式，請點該頁左邊三個「Show me how」。
（請原諒我懶得製作圖文並茂的教學 :P）

因為 Posterous 實在太方便了，我又懶得把我放在 Posterous 的內容再整理到這邊來，所以看來這邊又要乾一陣子了。 :P

網頁瀏覽紀錄 7/8 ~ 7/10

嗯...我懶得分類。我盡量把類似的主題放在比較靠近的地方。

• Google Testing Blog: Why are we embarrassed to admit that we don't know how to write tests?
  重點：The secret in tests is in writing testable code.
  為什麼測試程式不好寫，是因為你寫出很難測的東西。
  
  所以我們應該要鼓勵所有開發者都養成 TDD 的思維。
  
  
• The importance of unit testing and functional testing
  單元測試測量應用程式所使用的原料品質；
  功能測試測量應用程式的結構強度。
  
  
• 5 Ways to Speed Up Your Rails App
  • Eager Load Associations - 減少對資料庫進行查詢的次數
  • Do Database Work In the Database
  • Do as Little as Possible During the HTTP Request Cycle
  • Know Your Gems and Plugins
  • Avoid Creating Unnecessary Objects
  
  
• ZetCode, tutorials for programmers
  許多的程式教學，目前以 GUI 為主。
  語言包括：Java 、Ruby、Python、C# 等...。
  
  
• Java Mock Frameworks Comparison
  我還沒有寫過用到 Mock 的測試碼，先留著以後參考用。
  
  
• jTraining - Java knowledge community
  
  
• Database Abstraction Layers Must Die!
  作者覺得 Database Abstraction Layer 根本是癡人說夢。
  因為當你選擇一套資料庫系統時，必然會使用一些該套系統獨有的功能；
  若是為了不必要的移植性，只使用大部份資料庫系統共有的特性，那就本末倒置了。
  
  但是，沒有 DAL 不表示你就必須將「存取資料庫的操作」散布在整個系統中。
  我想這就是 Data Mapper pattern 的精髓所在。
  
  
• 一些 PHP 程式碼工具
  • phpcs - PHP Code Sniffer: 找出程式碼中不符合規範（coding standard）之處
  • phpcd - Copy/Paste Detector (CPD) for PHP code
  • pdepend - PHP Depend: 程式碼度量工具
  • PHPMD - PHP Mess Detector: PHP 版本的 PMD
  
  
• 10 Must Have Cheat Sheets for Developers
  10 份給開發者看的小抄。包括：
  jQuery、CSS、JavaScript、Regex、HTML 字元表、
  design patterns、PHP、MySQL、SVN、mod_rewrite。
  
  對了，我覺得 design pattern 的 T-shirt 不錯，有沒有人也想買？ :p
  
  
• jQuery cheat sheet
  
  
• Understanding JavaScript closures
  用簡單的例子說明 closures 在 JavaScript 的用法（與用途）。
  
  
• BBC - Glow JavaScript library - BBC 網站所使用的 JavaScrtip library
  
  
• QUnit - jQuery 的測試工具
  
  
• 9 Interesting jQuery Projects with Demos
  
  
• Quick Tip: don't use links with JavaScript unless the link goes some where
  只有真的需要連結的時候才使用連結標籤；
  單純的畫面效果請利用 CSS 達成。
  
  
• Why are we typing password twice?
  重新檢視註冊表單中「確認密碼」的必要性，
  順便附上 show password 這個 jQuery plugin。
  
  
• 5 Second Usability Test
  介紹線上 usability 檢測工具 fivesecondtest
  
  
• Open Web Tools Directory（純 HTML 版）
  Mozilla Labs 整理的網頁開發工具目錄
  
  
• 4 Simple Tools to Find Broken Links in Your Site
  • W3C Link Checker
    
  • Xenu's Link Sleuth
  • Link Checker Firefox AddOn
  • Dead-Link-Checker
    
  
  
• 10 Web Apps To Build The Next Big Thing Without Writing Any Code
  用來 "開發" 網站的網站
  
  
• Sass - Syntactically Awesome Stylesheets（線上版）
  Sass = CSS + 巢狀規則 + 變數 + ...。
  
  
• SlickMap CSS
  一套將 HTML 無序列表（ul）顯示為網站地圖（site map）的 CSS 規則。
  
  
• How To Create CSS Text/Font Gradients With CSS
  
  
• 幾種時間表（timeline）的做法
  • Pure CSS Timeline - 用純 CSS 的方法做出時間表
  • A CSS-based Timeline - 垂直的時間軸
  • Structured Timeline - 用 HTML 表格成線時間表
  
  
• 60+ Free Fonts for Big, Bold and Beautiful Headlines
  
  
• 10 Great Tips for GoogleChrome !
  • 控制 process 數量: -single-process / -process-per-site / process-per-tab
  • 調整位址列的建議數量: -omnibox-popup-count=10
  • Firefox 的 tab 可以直接拖拉到 Chrome
  
  
• Del.icio.us Spy - 美味書籤的及時觀測站（這真是太誇張了...）
  
  
• Executor - 免費的 "執行" 替代品。
  我目前是用 Launchy，有空來再試試這個。

[書摘] Don't make me think - 如何設計好網站

我還沒真正看過《Don't make me think - 如何設計好網站》這本書，
以下內容是節錄自 10 Usability Lessons from Steve Krug’s Don’t Make Me Think。

• 易用性（usability）代表的是...
  確保某樣事物可以正常地運作，讓經驗與能力在平均水準的人可以沒有困難地使用它並且達到被預期的功效。
  
  
• 網站（web application）要能自我詮釋
  網站的作用與使用方法應該要能夠不言自明、顯而易見。
  
  
• 不要讓我思考
  不要讓使用者去猜你的網站上有哪些功能、或是該怎麼用。
  
  
• 不要浪費我的時間
  多數人是為了節省時間而使用網路。
  
  
• 使用者依戀著「上一頁」按鈕
  使用者在網站做了錯誤的操作，他們不會覺得有什麼大不了的，而會試著按幾次「上一頁」來修正錯誤。
  
  
• 我們是習慣的動物
  找到一個有效的方法，就算還有更好的方法也不要去改變。
  
  
• 沒有閒聊的時間
  使用者不是來閒聊的，使用者只想要立刻找到他們要的東西。
  
  
• 不要忘了搜尋功能
  有些使用者進到新網站的第一件事情就是找搜尋框在哪。
  
  
• 提供概念上的網站地圖（site-map）
  使用者不在乎網站上的功能與內容實際上放在哪裡；
  他們只想知道他們自己在概念上／流程上的哪個位置。
  
  
• 讓回到首頁變得容易
  這樣使用者迷路時才知道可以從哪邊從頭來過。

延伸閱讀

• 247 web usability guidelines

網頁瀏覽紀錄 7/4 ~ 7/7

軟體設計與開發

• Forgotten Refactoring
• 重構是好事，但是請先確定你要修改的程式碼有對應的測試。
• 否則你不是在 "重構"，只是在 "change some shit" （這有沒有比較好的中文翻譯？）
• A Basic Lesson in Password Hashing
• 不要只對明碼做編碼動作，請記得加鹽（salt）。
• 不要整個系統都用一樣的 salt，請每次都以亂數方式產生。
• 把 salt 跟編碼後的密碼合在一起，不要存在分開的位置。
• 結合方式最好可以有變化（例如：由明碼程度決定 salt 的插入位置）。

網站開發

• How To Increase Site Performance Through A/B Split Testing
• 簡單的 A/B testing 入門
• How To Create a Useful 404 Page
• 較早版本的 IE 遇到小於 512 bytes 的 404 頁面會發生問題
• 可以透過 "robots" meta 標籤讓搜尋引擎可以正確處理你的 404 頁面
• Create User Friendly 404 Pages
• 不要寫 "404"，那是技術面的東西，使用者看不懂。
• 讓系統可以自動提醒你：你的網站發生 404 的狀況。不要等使用者來通報。
• 試著推測使用者真正要找的東西（"html" 打成 "htm"？ 大小寫打錯？）
• 把 "熱門連結" 或是 "最新資訊" 放在 404 頁面上。
• 保持頁面簡單。使用者已經找不到他要的東西了，不要讓他更困惑。
• Funny 404 Pages
• 收集各式有趣的 404 頁面
• 304 Your images from database
• 如果你的圖片不是靜態檔案，請處理 HTTP reuqest 中的 "If-Modified-Since"，
• 並且適時地送出 304。
• 10 reasons why web log analyzers are better than JavaScript based analytics
• 很多東西還是不能只靠 Google Analytics...
• SQL Injection Cheat Sheet
• 整理出比較常見的 SQL injection 手法。
• 主要是針對 MySQL 與 Microsoft SQL Server 。

網頁設計

• 30 Essential Tools for Web Designers
• Best Tips, Resources and Tutorials for making of Creative Forms using CSS
• Some simple but effective CSS rules for IE 6
• 22 Beautiful Icon Packs for Web Design and Development

Ruby

• How to create small unique tokens in Ruby
• Code Blocks: Ruby's Swiss Army Knife
• 告訴你 Ruby 中 code block 有多好用，以及一些注意事項。
• Anemone
• Ruby Web Spider Framework
• Ruby daemons using RobustThread
• RobustThread 可以協助你寫 daemon 時必須處理 logger、exception 等問題
• Integrity
• Continuous Integration server (Ruby)
• 9 Resources for New Ruby on Rails Developers

Java

• Top Question asked by interviewers for Junior Java Developer Role. - 嗯...我不會寫 Java
• FindBug - 靜態分析 Java 程式，並找出 bug 的工具
• Apache Pivot - 用 Java 開發 RIA 的平台
• Use JVM Shutdown Hooks to Optimize Resources
• 重點：Runtime.addShutdownHook (Thread hook)
• Java 开源大全 - 各類 Java open source 專案的目錄

JavaScript

• Finding real body height using jQuery
• IE: 建立一個暫時的 DIV，把 BODY 的東西塞進去之後再用 $().height() 取得高度。
• 其他瀏覽器: 直接用 $("body").height() 就可以了。
• Identifying & locating mouse position in jQuery
• 用 event 的 pageX 跟 pageY 屬性取得滑鼠游標的位置。
• 搭配 element 的 offsetX 跟 offsetY 可以取得滑鼠游標在該 element 的位置。
• 非同步上傳檔案三部曲
1. 非同步上傳 - 開一個 iframe 做為 form 的 target
2. 確認上傳結果 - 檢查 iframe 是否包含特定訊息
3. 取得上傳成功的影像大小 - 利用 Image 物件取得正確大小

Scala

• Scala - 官方網站
• Starting out with Scala - 學習 Scala 的資源
• S-99 - 99 道 Scala 問題，學習 Scala 的好途徑

其他程式語言

• Lazarus - Free Pascal 的 IDE，簡單說就是 "偽-Delphi"
• SharpDevelop - 免費的 .NET IDE，支援 C#、VB.NET、IronPython、F#、Boo
• Fan - 有人說比 Scala 好的語言（出處找不到了...）
• P-99 - 專為練習 logic programming (Prolog) 而設計的題目

軟體介紹

• 重新排列工具列上視窗按鈕的位置－Taskbar Shuffle
• Web 上的萬能瑞士刀: Chickenfoot
• Synesketch - 辨識文字中的情緒並轉成圖像的軟體
• 小地方 - 免費軟體分享、交流園地

工具網站

• Online Syntax Highlighting - 替程式碼上色（輸出 HTML）的工具網站
• Text Escaping and Unescaping in JavaScript
• 透過 JavaScript 立刻顯示各種編碼結果的工具
• en-code
• 幫你將程式碼中的 HTML 特殊字元轉成編碼的工具。
• 作者的文章中還有 bookmarklet 版本。

其他

• An SDK for your brain - 看起來就很有趣，好想弄一個來玩...
• Send SMS using AT command - AT 指令耶，好久沒聽到了...
• What do Programmers Fell About their Software?
• 利用 Synesketch 對一些專案中的註解進行情緒分析的結果。

--

終於，我把我的未讀文章清完了！！

乾淨程式碼的 4 個小秘訣

原文－Tiago Fernandez: 4 Tips For Clean Code

1. 寫短而簡潔的函式
   

   程式碼太長的後果是沒人知道這一大段東西到底在幹嘛，因而不敢（或不願意）去修正它。要怎麼判斷一個函式是否太長了呢？有個我很喜歡的簡單準則，大家可以參考一下：
   

   一個函式的長度不應該超過螢幕能顯示的範圍。

2. 可以自我詮釋的變數與函式名稱
   

   變數或是函式的名稱應該要清楚地說出變數與函式的用途。現在的編輯器都支援名稱提示與自動完成的功能。不要為了想少打幾個字，而取那種過了一個星期之後連你自己都不知道是什麼意思的式名稱。

3. 只寫恰當的註解
   

   註解裡面只要指出程式碼裡面沒有的東西（參數格式、呼叫此函式前應該被滿足的條件等...）就好了。最好可以搭配一些文件產生工具（如 javadoc）自動地產生說明文件。

4. 保持程式碼易讀好懂
   

   不要用一些奇技淫巧來賣弄你的程度，因為日後可能連你自己都看不懂你在寫什麼。遵守 "KISS" (Keep It Simple and Stupid) 與 "DRY" (Don't Repeat Yourself) 這兩個原則，自然就可以寫出易讀好懂的程式碼。

--
繼續用轉錄翻譯文章來充版面...