web dev tools review
DESCRIPTION
TRANSCRIPT
Outline • Command-line • Terminal • Quick Start • Recorder • Editor • Chrome DevTools • Integration tools • Synchronized • Visual regression testing • Simulate real-network conditions • Live testing and Screenshots • Mobile Web
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
• Github: https://github.com/mathiasbynens/dotfiles
• Article: http://net.tutsplus.com/tutorials/tools-and-tips/setting-up-a-
mac-dev-machine-from-zero-to-hero-with-dotfiles/
// Start up a new local server $server // $python -m SimpleHTTPServer ...
Terminal • iTerm 2
• iTerm 2 is a terminal emulator for Mac OS X
• http://www.iterm2.com
• Autocomplete Past History
• Replay
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
Recorder(1) • Automator
• Point-and-click automation of repetitive tasks on Mac OS
• For some services, automated service creation(Mail, File and Image etc.)
• http://www.macosxautomation.com/automator/
Recorder(2) • Macro Recorder
• Keyboard and mouse recorder on Windows
• http://www.jitbit.com/macro-recorder/
Editor(1) • Sublime Autoprefixer
• Sublime plugin to prefix your CSS
• Create for browser vender prefix
• http://www.macosxautomation.com/automator/
Editor(2) • Emmet (Zen Coding)
• Sublime plugin to Emmet (Zen Coding)
• HTML, CSS
• http://emmet.io/
• Github: https://github.com/sergeche/emmet-sublime
Editor(3) • Sublime TernJS
• Sublime plugin to TernJS
• Tern is a stand-alone code-analysis engine for JavaScript
• http://ternjs.net/
• http://ternjs.net/doc/demo.html
Editor(4) • Sublime Build System
• Sublime plugin to grunt
• Sublime build
• http://bit.ly/sublime-grunt
Editor(5) • SublimeLinter
• Inline lint highlighting for the Sublime Text editor
• HTML, CSS, Javascript
• https://github.com/SublimeLinter/SublimeLinter
Chrome DevTools(1) • Chrome DevTools
• https://developers.google.com/chrome-developer-tools/
• Workspace
• Add and edit local projects. Breakpoints persist. Debug in-place.
• Look like web based ide
• https://developers.google.com/chrome-developer-tools/
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
Chrome DevTools(3) • CSS Pretty-printing
• Support CSS
• https://developers.google.com/chrome-developer-tools/docs/css-preprocessors
Chrome DevTools(4) • Ignoring library code
• Ignoring library code while debugging in Chrome
• http://www.divshot.com/blog/tips-and-tricks/ignoring-library-code-while-debugging-in-chrome/
Chrome DevTools(5) • Terminal
• Terminal in Chrome Devtools
• Server: installed devtools-terminal
• Client: installed chrome extension then use terminal tab
• Github: https://github.com/petethepig/devtools-terminal
• Chrome extension: https://chrome.google.com/webstore/detail/devtools-terminal/leakmhneaibbdapdoienlkifomjceknl
Chrome DevTools(6) • Debugging
• https://developers.google.com/chrome-developer-tools/docs/remote-debugging
• Remote Debugging
• USB Debugging
• Etc
• iOS WebKit Debug Proxy: https://github.com/google/ios-webkit-debug-proxy
Chrome DevTools(7) • Emulation
• https://developers.google.com/chrome-developer-tools/docs/mobile-emulation
• Emulating Touch Events • Mouse actions will now also trigger the relevant touch events: touchstart, touchmove and touchend.
• Debugging touch events
Chrome DevTools(8) • Emulation
• Emulating Device Viewports • Emulate and debug mobile viewport issues like CSS media query breakpoints for various devices and setting
Chrome DevTools(9) • Emulation
• Emulating Geolocation • Useful to debug the output received when using different values for longitude and latitude
• http://html5demos.com/geo
• Lat = 41.4949819 and Lat = -0.1461206
Chrome DevTools(10) • Emulation
• Emulating Orientation • Accelerometers, gyroscopes, compasses and other hardware designed to determine capture motion and
orientation
• http://www.html5rocks.com/en/tutorials/device/orientation/deviceorientationsample.html
Chrome DevTools(11) • Emulation
• Emulating Media Type • CSS media types allow us to apply different styles to a page
• http://www.html5rocks.com/en/mobile/high-dpi/
Integration tools(1) • Sublime Web Inspector
• Debugger. Breakpoints. Console. Evaluate call frames
• Sublime plugin to debug
• http://sokolovstas.github.io/SublimeWebInspector/
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/
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
Integration tools(4) • Tailor
• Brackets + Git for ChromeOS
Integration tools(5) • WebStorm
• The JavaScript IDE
• http://www.jetbrains.com/webstorm/
• Live Edit with Chrome(Chrome extension)
Integration tools(6) • WebStorm
• Debug with Chrome(Chrome extension)
Integration tools(7) • WebStorm
• Terminal
Integration tools(8) • WebStorm
• Support node.js
• Integrated node.js package manager
• Debug and validate
Integration tools(9) • WebStorm
• REST Client
• Import/export of XML files with REST Client Requests, and compressed responses.
• http://blog.jetbrains.com/webide/2013/02/using-the-rest-client-within-phpstorm/
Integration tools(10) • WebStorm
• JavaScript Unit Testing
• http://blog.jetbrains.com/webide/2011/10/javascript-unit-testing-support/
Integration tools(11) • WebStorm
• Zen Coding with Emmet
• Javascript
• Support for CoffeeScript and TypeScript
• Editor
• DOM-Based, Browser-Specific Completion
Integration tools(12) • WebStorm
• CSS
• Support for Sass, Less and Stylus
Integration tools(13) • WebStorm
• HTML
• Editor
• Show Content
• Quick Definition Lookup on a CSS ID immediately shows a popup displaying
• When invoked on an image file reference then image preview
Integration tools(14) • WebStorm
• Spellchecker
• Spellchecker verifies texts in tags, code strings, comments to avoid misspellings and typos on web pages
• Smart Duplicated Code Detector
• Find duplicated code
Integration tools(15) • LightTable
• Python development IDE
• http://www.lighttable.com/
• http://www.kickstarter.com/projects/ibdknox/light-table
Synchronized(1) • Remote Preview
• https://github.com/viljamis/Remote-Preview
• http://viljamis.com/blog/2012/remote-preview/
Synchronized(2) • Remote Preview
• Remote Device: Connected for Service URL(Remote Preview Project) • Polling URLs (url: url.txt)
• Change to iframe src attribute
Synchronized(3) • Adobe Edge Inspect
• Chrome browser will get mirrored to the devices
• http://html.adobe.com/edge/inspect/
• http://www.adobe.com/inspire/2012/12/web-designs-edge-inspect.html
• http://tv.adobe.com/watch/adobe-evangelists-paul-trani/introducing-adobe-edge-inspect/
• Setting up Edge Inspect with network
• 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
Synchronized(4) • Adobe Edge Inspect
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
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
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
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
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
Simulate real-network conditions(2) • Slowy app
• Real-world connection simulator and bandwidth limiter on Mac OS X
• http://slowyapp.com/
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
Live testing and Screenshots(2) • Open Device Lab(ODL)
Live testing and Screenshots(3) • Sauce Labs
• https://saucelabs.com/
• Cross-Browser Testing
• Upload app to Sauce Labs storage and tested in Sauce Labs' cloud
Live testing and Screenshots(4) • Sauce Labs
Live testing and Screenshots(5) • Sauce Labs
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
Live testing and Screenshots(7) • BrowserStack
Live testing and Screenshots(8) • BrowserStack
• Rapidly test website for cross browser compatibility
Live testing and Screenshots(9) • BrowserStack
• Responsive Design Testing across Devices
Live testing and Screenshots(10) • Browserling
• Cross Browser Testing
• https://browserling.com/
• Tests on virtual machines
Live testing and Screenshots(11) • Browserling
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/
Reference • Automating Front-end Workflow
• https://speakerdeck.com/addyosmani/automating-front-end-workflow
Thank you.