The New Developer Workflow
2000
- CSS + HTML = Web
- static
- XHTML
- worst problem was choosing the right element
2011
- CSS + Webfonts + SVG + Canvas + HTML + JavaScript + DOM APIs + WebGL + <kitchensink> = Web
- dynamic
- HTML is just one of the results
- the easiest problem is choosing the right element
Workflow 2000
- Cut up photoshop
- Chat on IRC
- Use old project as starting point. ^H*∞
- Read Slashdot
- Write markup. Write CSS.
- Check in current browser.
- Submit to client
Workflow 2011
- Cut up photoshop
- Read reddit
- Use old project as starting point. ^H*∞
- Write markup. Write CSS.
- Google for jQuery plugins
- Check in current browser.
- Submit to client
Buttttttt…
- not just visual
- Requirements of the web exceeds what photoshop mockups provide
- interactions
- impatient users
- complexity
Why does it matter?
- Abstract the obvious
- Cut away the tedious
- Work on what matters
2012 Workflow
You will use
- Developer Tools
- Version Control Systems
- Deliberate design choices based on feature support
- Polyfill policy
- Preprocessors
- ♥ specs
- Active learning
Version Control
- Learn to use one: Hg / Git
- Git is what cool kids use
Deliberate Design Choices
- This is 2011
- CSS + Webfonts + SVG + Canvas + HTML + JavaScript + … + DOM APIs + WebGL = Web
- What features will you use for your webpage?
- How well are they supported?
- What do browsers lacking these features render?
- What do browsers lacking ALL these features render?
Polyfill Policy
- What features are you willing to polyfill?
- Which features when implemented will break on unsupported browsers?
Bad
- Text-shadow
- Gradients
- Box-shadow
- Border-radius
Good
- Animations
- Canvas
- Web Storage
Study: Isotope
- isotope.metafizzy.co by @desandro
- Test for keyframe 3D/2D transforms, perspective, transitions.
- Provides best experience based on features supported.
Vendor Prefixes
- Love to Hate
- Use all, if you must (or use prefixr)
life-cycle of a prefix
-
dont use prefix for
- box-shadow
- border-radius
- background-clip
Preprocessors
- Quick
- Not tied to legacy syntax
- Catch syntax errors
- Abstracts the manual labor
Build Scripts
- Optimize resources for faster performance.
- Maintainability of assets
- Automate creation of manifest files
- optimizing images
- concat/minify script files
- deploy to production
- Example: H5BP Build Script.
In Summary
- Start mastering developer tools, test in devices, use version control.
- Use polyfills, vendor prefixes responsibly, bootstrap with preprocessors.
- Submit bug reports, keep up with the latest features, be an active web developer.
