Focused Frontends

by Miles Rausch
http://milesrausch.com

ERMAHGERD HERPERRINKS

Slides
https://slid.es/awayken/2013sdcodecamp

Demo
https://github.com/awayken/2013sdcodecamp

South Dakota Code Camp Feedback
http://tinyurl.com/rsdcc13

http://knowyourmeme.com/memes/ermahgerd

Who Am I?

Miles Rausch

  • Web Developer at Security Labs, LLC
  • Server side - CFML
  • Client side - HTML 5, CSS 3, LESS, RequireJS, &c.
  • Some mobile web (which sucks oysters)
  • @awayken
  • Of Miles Rausch

The Old Way


 /index.html
 /sessions/index.html /submit/index.html
 /styles/normalize.css /styles/styles.css
 /scripts/jquery.min.js /scripts/jquery.someplugin.min.js /scripts/scripts.js

Problems

  • File size
  • Organization
  • Uniqueness
  • Bloat

The New Way

CSS Preprocessors, JavaScript Module Loaders

 /index.html /sessions/index.html /submit/index.html
 /_assets/less/variables.less /_assets/less/homepage.less /_assets/less/sessions.less /_assets/less/submit.less
 /scripts/require.js /scripts/homepage.js /scripts/submit.js

Benefits

The biggest benefit is modularity.
  • Smaller files
  • Better organization
  • Uniqueness
  • Bloat

Demo

https://github.com/awayken/2013sdcodecamp

Resources

CSS Preprocessors

How to Choose the Right CSS Preprocessor

LESS CSS: http://lesscss.org/
Sass: http://sass-lang.com/
Stylus: http://learnboost.github.io/stylus/

Resources

JavaScript Module Loaders

Comparing popular script loaders

RequireJS: http://requirejs.org/
YepNopeJS: http://yepnopejs.com/
LABjs: http://labjs.com/
Head.JS: http://headjs.com/

The End

Slides
https://slid.es/awayken/2013sdcodecamp

Demo
https://github.com/awayken/2013sdcodecamp

South Dakota Code Camp Feedback
http://tinyurl.com/rsdcc13
Made with Slides.com