3. Command-line
•
Script common tasks
•
Setting for terminal env
•
•
Init for dotfiles( .aliases, .bash_profile, .bash_prompty, .bashrc, .gitconfig etc...)
Shared for common env setting
•
•
When you use a different computer, you can restore your settings
Command wrapping ( .functions )
•
Make custom shell command for easy to use
// Start up a new local server
$server
// $python -m SimpleHTTPServer ...
• Github: https://github.com/mathiasbynens/dotfiles
• Article: http://net.tutsplus.com/tutorials/tools-and-tips/setting-up-amac-dev-machine-from-zero-to-hero-with-dotfiles/
4. Terminal
•
iTerm 2
•
iTerm 2 is a terminal emulator for Mac OS X
•
•
http://www.iterm2.com
Autocomplete
• Replay
Past History
5. Quick Start
•
Alfred
•
Search for files online or on Mac
•
•
http://www.alfredapp.com/
Github: https://github.com/zenorocha/alfred-workflows
• Launchy
• On Windows
• http://launchy.net/index.php
14. Chrome DevTools(2)
•
Soucre Maps
•
•
Source map is mapping between converted source and original source.
Link to sass and less source
•
https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
25. Integration tools(2)
•
Emmet LiveStyle
•
Edit CSS. See changes live in Chrome *without* a browser refresh
•
•
Runtime css editing
It look like livereload for css
•
http://livestyle.emmet.io/
26. Integration tools(3)
•
Adobe Brackets
•
Bi-directional HTML live editing with Chrome
•
•
http://brackets.io/
Brackets Review
•
Image Preview and Pixel Guides
•
•
Support Image Preview
Support Image Pixel Guide Line
•
It useful for css sprite
41. Synchronized(3)
•
Adobe Edge Inspect
•
Chrome browser will get mirrored to the devices
•
http://html.adobe.com/edge/inspect/
•
•
•
Setting up Edge Inspect with network
•
•
•
•
•
•
•
http://www.adobe.com/inspire/2012/12/web-designs-edge-inspect.html
http://tv.adobe.com/watch/adobe-evangelists-paul-trani/introducing-adobe-edgeinspect/
Host: Edge Inspect and Chrome extension
Client: Edget Inspect mobile device client
To use Edge Inspect, your devices and computer must be connected to the same
wireless network
Previewing live web content on connected devices
Remote inspection
Take a Screenshot
Refreshing devices remotely
43. Synchronized(5)
•
Ghostlab
•
Synchronized testing for web and mobile on Mac OS X
•
•
•
•
•
•
http://vanamco.com/ghostlab/
Creates server to folder contents
Syncs scrolls, clicks and reloads
Debug button to open a browser window that will allow you to directly connect to the client
using the built-in WEINRE server
Host: Ghostlab server is running (e.g. http://192.168.1.4:8080)
Remote Device: Connect to host Ghostlab server
44. Synchronized(6)
•
Live Reload with Grunt
•
When you run grunt server from the root directory of your project it watches
for changes to your site files and refreshes the browser window
automatically
•
https://github.com/gruntjs/grunt-contrib-watch
45. Visual regression testing(1)
•
Wraith
•
•
•
A responsive screenshot comparison tool
PhantomJS or SlimerJS to create screen-shots of different environments
Creates a diff of the two images, the affected areas are highlighted in blue
•
http://github.com/bbc-news/wraith
46. Visual regression testing(2)
•
PhantomCSS
•
Visual/CSS regression testing with PhantomJS
•
•
•
•
https://github.com/Huddle/PhantomCSS
Generates a screenshot of a portion of the page, defined using
the CSS selector
Generate a new screenshot and compare it to the original
Differences are depicted in pink
47. Simulate real-network conditions(1)
•
Network Link Conditioner
•
Simulate the network environment on Mac OS X
•
•
http://nshipster.com/network-link-conditioner/
Network Link Conditioner is available on the devices themselves
•
Connect iPhone or iPad to Mac
49. Live testing and Screenshots(1)
•
Open Device Lab(ODL)
•
http://opendevicelab.com/
•
•
•
•
http://mobile.smashingmagazine.com/2012/09/24/establishing-an-open-device-lab/
http://devicelab.fi/
Web and app developers to go to use a shared community pool of devices
Non-profit and free for the community to use
54. Live testing and Screenshots(6)
•
BrowserStack
•
Cross-Browser Testing
•
•
•
•
http://www.browserstack.com/
Tests on virtual machines and devices.
Support screenshot and responsive test(Free)
Support live debugging
60. Mobile Web
•
Mobile Web Guide
•
http://www.mobilexweb.com/
•
Mobile Emulators & Simulators: The Ultimate Guide
•
•
http://www.mobilexweb.com/emulators
HTML5 compatibility on mobile and tablet browsers with testing on real devices
•
http://mobilehtml5.org/