we.blog

Stuff & nonsense on web development

Fronteers 2011 – Divya Manian “The New Developer Workflow”

From Opera Divya Manian (@divya) showed us how we can change our web-development workflow to better cope with new browser, html an css features.

  • The web used to be simple: HTML + CSS and the hardest problem was choosing what element to use
  • In 2011 the web consists of so many parts, choosing the right element has become the least of our problems
  • Our workflow still consists of: cutting up a PSD, test in current browsers, deliver to client
  • Webdesign with all it’s facets can’t be captured in just PSD anymore
  • Proper workflow allows us to abstract us from trivial tasks andn allows us to focus on what matters

The 2012 workflow

Webdevelopment-tools

  • Learn about them and use them. Not just debuggers for css/js but also emulators/simulators, remote debuggers and documentation.

Version control

  • Use version control everywhere, even for design.

Feature based design

  • See what (browser)features we can use and deliberately make design-choices based upon their availability
  • Use polyfills for functionality thas is essential for the core experience of your website
  • Always use all vendor-prefixes if they are necessary. Know the css vendor-prefix lifecycle (See Divya’s slide on vendor-prefix lifecycle) and drop them if they aren’t necessary anymore
  • Drop vendor-prefixes for: box-shadow, border-radius, background-clip

Pre-processors

  • They make coding a lot easier with features like auto-spriting and mathematical calculations
  • Incorporated in a build-script they make deployment of your assets to production very simple

Embracing specs

  • Learn to love the specs, learn them by heart and make it part of your work
  • If you’re proficient in the specs, submit bugs to browser vendors and participate in the working-group discussions

Divya’s sheets from her presentation can be found here: http://nimbu.in/fronteers/#intro

Posted on by

Add a comment

Your email address will not be published. Required fields are marked *
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>