Ryan Wu

Sunday, August 26, 2012

Mac 新手上路記錄 (App, Widget, Configure)

剛入手的MacBook Air 13"

第一天拿到就更新了 OS X 10.8.1，速度很快，非常舒服。

以下記錄一下安裝的東西

首先是Mac Application (免費為主, 付費的... 過陣子再說...)

生產力軟體(Productivity)

SizeUp：多視窗管理，很方便(但是會跳Demo視窗)
Mou：Markdown 即時預覽編輯器
Dash：快速Snippets與文件查詢工具
Calendar for Mac：MenuBar上的Calendar - 看的到event! (2012/09/01新增)

瀏覽器(Browser)

Firefox
Chrome
Opera

儲存(Storage)

Dropbox
SkyDrive：因為有之前活動獲得的25G，所以還是用一下。

開發與編輯器(Development & Editor)

Sublime Text：我最愛的純文字編輯器，設定可以參考這篇
SmartGit：目前覺得最好用的Git Client (SourceTree把我repo搞爛過...)
XCode：iOS Development

多媒體(Mutimedia)

好照片：方便的照片特效處理軟體
Skitch：螢幕截圖軟體，附上基本畫筆可以標記
KKBox
VLC Player (2012/09/01新增)

終端機相關(Terminal)

Go2Shell：可以直接在Finder上開啟該目錄的Terminal
iTerm：加強版Terminal

社交軟體(Social)

Adium：MSN/Gtalk/... 整合即時通訊
MenuTab for Facebook：非常棒的Facebook整合
TweetDeck：Twitter Client, 管理多帳號的時候很方便(我還有jsdc.tw的帳號...)
Skype
Line

系統軟體

Alfred：好用的快速啟動工具（比Spotlight強大一些）
AppCleaner：自動掃描並乾淨刪除軟體的工具
Bodega：類似AppShopper的app分類整理軟體，可以設定Wishlist很方便
CCleaner：非常棒的系統清理軟體，會針對安裝的一些軟體清除暫存檔案，PC/MAC都有支援。
CheatSheet：按下 ⌘ 幾秒就可以show出該軟體支援的快捷鍵
coconutBattery：電池狀態顯示軟體
Flux：螢幕亮度自動調整軟體
OmniDiskSweeper：磁碟剩餘空間掃描軟體，可找出佔用最大空間的資料夾或檔案
Synergy：跨系統多螢幕作業軟體，多台電腦適用
Yahoo! KeyKey：中文輸入法
ntfsMounter：多系統者必備, 掛載NTFS專用(2012/09/01新增)

另外還有Dashboard Widgets (尚在摸索中)

iStat Pro
Currency Converter
Day Counter
HSLider
Page Capture
PEMDAS
Translator

由於從來沒有擁有過MacBook 所以

認真研究了一下快捷鍵(Keyboard Shortcut) 的部份。

還有因為一直改系統配置，不斷的開開關關讓我覺得很煩，所以後來也把

System Preferences 設定了一個快捷鍵：(參考這篇的教學)

另外記錄一下幾個指令與小秘訣

顯示隱藏檔案指令指令

defaults write com.apple.finder AppleShowAllFiles TRUE

killall Finder

列出安裝的package(.pkg)-- (~~包裹還是套件阿～～～～～～？~~

pkgutil --pkgs

螢幕取色

使用內建的DigitalColor Meter

最後透過MacPorts安裝了常用的一些工具(ex:htop)，其他有想到再補。

尚未解決：
想找一套好的Blog編輯軟體，但是還在MarsEdit 3 / Ecto 等等的尋找中...

其他參考
40 Useful Mac OS X Shell Scripts and Terminal Commands

Sunday, May 13, 2012

Dropbox 舉辦的 Dropquest 2012 快速破關

為了容量 …

活動首頁
https://www.dropbox.com/dropquest2012

各關解答…

lv1. 先到Dropbox 的競賽資料夾(Dropquest 2012) 放入46637.txt
lv2. 連接到 https://www.dropbox.com/dropquest2012/CRANE
lv3. SMUDGES
lv4. SOMA
lv5. MAD LIB
lv6. 嘗試以下連結
https://www.dropbox.com/events?ns=false&n=0&d=1-7-2003
https://www.dropbox.com/events?ns=false&n=0&d=3-21-2005
https://www.dropbox.com/events?ns=false&n=0&d=11-28-2001
lv7. 嘗試以下連結
https://www.dropbox.com/dropquest2012/LEADING
https://www.dropbox.com/dropquest2012/DEALING
https://www.dropbox.com/dropquest2012/aligned
lv8. triumphant
lv9. https://www.dropbox.com/tour/6 邀請 http://goo.gl/VBzx 出現的mail
lv10. 試 MEXICO or Argentina or KOREA
lv11. Southpole
lv12. 到Dropbox去把Chapter 12.txt 還原到上一版https://www.dropbox.com/help 點 "Security and Privacy"
lv14. 拼出答案 - 解答 http://goo.gl/FD9AG
lv15. https://www.dropbox.com/share ，點彩虹
lv17. shanghai
lv18. http://goo.gl/piAHw (用瀏覽器) 把13689號檔案放到Category 1 剩下放2
lv20. https://www.dropbox.com/dropquest2012/apollo13
lv21. ABUSIVELY
lv22. FACED or MACAU or BADGE or BASED or ADAGE
lv23. Machu Picchu
lv24. colosseum

Wednesday, April 25, 2012

iOS Web 畫面閃爍問題 (CSS 3)

在iOS (iPhone 4s/ iPad 2/iPod Touch) 上測試 Mobile Web的時候出現了閃爍問題
和Team member 花了一段時間發現一個很詭異的問題
狀況
1. 父節點(DIV)因為要做Transition使用了


transform: translate3d(…)

2. 畫面處理完成後，觸動事件將子節點(DIV)的CSS改變 
left : *px

就在這個更改子節點的瞬間 iOS 的畫面一定會閃爍一下 測試過了 iPad / iP4s / iPod Touch 都有這問題 但是Android 2.x 4.x 都沒有…

處理方式

原本以為是iOS 的 webkit 在處理特定 position 的 left 造成子節點重畫的問題，
後來想想覺得這 ~~也太基本了吧~~ 不太可能，經過嘗試以及搜尋，發現很多人都有類似問題。

像是StackOverflow 這篇還有這篇他是改 CSS top 導致發生神秘的閃爍事件…

最後使用動態增加translatde3d 並且 reset 的爛招解法

後來將以下的 css 指定給子節點問題就解決了

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

補充
回家後看到jsconsole/jsbin的作者 Remy Sharp 大大的影片

造成我畫面閃動的原因應該是跟iOS的硬體加速有關

故需要Reset translate3d …..

~~真。他x的上一次遇到這種神秘的問題是面對高級瀏覽器 IE 6 ……………~~

References
http://stackoverflow.com/questions/tagged/translate3d

Thursday, March 22, 2012

Responsive Media Query Quick Reference

Just a reminder which helps me doing responsive design's Media Query.

@media (max-width: 767px)

@media (max-width: 480px)

@media (min-width: 768px) and (max-width: 979px)

@media (min-width: 980px)

@media (min-width: 1200px)

注意：上面的順序是有意義的更改順序會導致CSS被蓋掉

Thursday, March 8, 2012

My Sublime Text 2 on Windows 7 64bit

Sublime, the awesome, amazing editor.

1. Get 64bit portable version

Official Website : http://www.sublimetext.com/2

2. Install Package Control
This is the most complex step.
Type Ctrl + ` and enter following python code

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

3. Install Packages (All from package control)

Alignment

Format shortcut – Ctrl + Alt + a

BracketHighlighter
CoffeeScript
Display Functions (Java)
Edit History

Jump to next/previous edit location
Add Key Binding

{ "keys": ["ctrl+alt+e"], "command": "previous_edit" },
{ "keys": ["ctrl+e"], "command": "next_edit" }

FileDiffs

Usage

Right click on tab (Or use command popup then search “Diff”)

Diff with clipboard – Text Diff
Diff with another file – Text Diff + Visual Diff Tool
(KDiff3, WinMerge, DiffMerge…)

Install KDiff3

Modify Code (file_diffs.py)

Under WINMERGE 
if not WINMERGE:
    if os.path.exists("%s\KDiff3\KDiff3.exe" % os.environ['ProgramFiles(x86)']):
        WINMERGE = '"%s\KDiff3\KDiff3.exe"' % os.environ['ProgramFiles(x86)']
    else:
        WINMERGE = '"%s\KDiff3\KDiff3.exe"' % os.environ['ProgramFiles']
……
End of run_diff function
if from_file == 'from_file' or to_file == 'to_file':
            cmd_line = '%s "%s" "%s"' % (WINMERGE, from_file, to_file)
            print "KDiff3 command: " + cmd_line
            Popen(cmd_line)

Call git command quickly – Need Git (mysysgit on Win7)
Usage : Command search “git”

HTML5

Snippets

IndentGuides

Indent line for editors

jQuery

Snippets

jQuery Snippets pack

Hint : Need enable jQuery support by command
Snippets

JS Minifier

Minify shortcut – Ctrl + Alt + m

JsFormat

Format shortcut – Ctrl + Alt + f

Pretty JSON

Format shortcut – Ctrl + Alt + j

Prefixr

Format shortcut – Ctrl + Alt + x (For CSS)

SideBarGit
SideBarEnhancement
SublimeCodeIntel (Must Have)

Autocomplete (Popup)

“/”to end tag
Format shortcut – Ctrl + Alt + f
Features : Edit –> Tag …

Terminal

Open file shortcut – Ctrl + Shift + t
Open folder shortcut – Ctrl + Shift + Alt + t

Tortoise

Need TortoiseGit or TortoiseSVN
Update : 20120314 - error: [Error 2] The system cannot find the file specified

Because TortoiseGit use mysysgit as default Git under Windows 7 64bit version,
we need to modify Tortoise.py

class Git():
    def __init__(self, tortoise_proc_path, root_dir):
        self.git_path = os.path.abspath('C:\\PATH\\git.exe')

WinMerge

Compare shortcut – Ctrl + Alt + d (Current file with previous edit file)

Modify Code (WinMerge.py)

WINMERGE = "F:\WinMerge-2.12.4\WinMergeU.exe"

ZenCoding (AWESOME!!)

Trigger – Tab

Editor Shortcut

Toggle sidebar (file explorer) – Ctrl + K then B
Command List - Ctrl + Shift + P
File Search – Ctrl + P

Search Text in File – Ctrl + P then enter #searchText
Jump to specific paragraph(Function/Class/Tag) – Ctrl + P then enter @searchMethod
Go to specific line – Ctrl + P then enter :lineNumber

Right Click Menu Support

Modify the Path of following regestries
Save following text into a .reg file then double click on it to apply

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\*\shell\SublimeText]
@="Edit With Sublime Text2"
"Icon"="D:\\WindowsApp\\Sublime\\sublime_text.exe"
"Position"="Bottom"

[HKEY_CLASSES_ROOT\*\shell\SublimeText\command]
@="D:\\WindowsApp\\Sublime\\sublime_text.exe %1"

Pages