Bristol Web Folk: Front end stuff

Bristol Web Folk: Front end stuff

Front end stuff presented by Liam Richardson (@discoliam) at Bristol Web Folk August 2013. Liam discussed his experiences with front end stuff and covered Grunt, frameworks and CSS architectures. Here's what I learned from his talk.

Grunt

  • JavaScript task runner
  • Installed through node.js NPM
  • Can watch SASS files for changes and compiles them.
  • Can concatenate JavaScript files.
  • Compresses images
  • Minifies JavaScript and CSS
  • Syncs files to servers for instant deployment
  • Lint JS and CSS
  • Minify HTML - But this is hard to trust
  • Live reloading of your browser

Frameworks

  • There are a lot of frameworks such as Bootstrap, Foundation, Less, Skeleton, InuitCSS, Susy and Neat.
  • Often frameworks aren't suitable for client facing websites but can be great for:
    • CMS
    • CRM
    • Admin areas
    • Prototyping
    • Click-able wireframes
    • Side projects
    • Non customer facing web applications
  • Some visual frameworks do become boring when seen on project after project.
  • Frameworks can make it easier to create bad HTML.
  • Build scripts are great when they provide you with just the bits you need.
  • There are often lots of community extensions reducing your need to write code.

CSS Architectures

  • Keeping CSS organised can be hard, especially when working with a team.
  • CSS Architectures are great for:
    • Organising and ordering file structures
    • Having documentation to follow and guide you
    • Helping new developers have something to learn from to get into your teams way of doing things faster.
  • There are 3 primary options for CSS Architectures:
    • OOCSS
    • SMACSS
    • BEM
  • All 3 of them have pros and cons and it comes down to personal preference.
  • The code produced is often very messy, but then so is hand written CSS.
  • They are less useful in small projects.
Liam Richardson presents Front end stuff
Liam Richardson presents Front end stuff.