Different areas you need to think about for a website frontend - [Work in progress]

25 September 2013 – 18:48

Hi guys!

This is just a list I’ve created basically for myself, so I don’t forget any scenario or issue when thinking about a frontend project, but I thought it’d be useful for any other frontend out there :-)

Please feel free to add anything I’ve forgot in the comments, so I can update it.

Documenting the code

One of the easiest ways to improve the communication between frontend and backend developers is using a styleguide (starbucks, Github or Hackerhires examples) — that’s one of the main reasons why twitter bootstrap has been so widely used.

The following tools and links will help you to create styleguides:

  • Kneath is a methodology for documenting CSS and generating styleguides.
  • Nadarei KSS is a Kneath KSS port to Rails.
  • Kalei styleguide is a clever client-side solution using backbone, so no need to maintain a server.
  • Pears uses wordpress and a specific theme to create styleguides.
  • Styledocco uses NodeJS and Markdown to generate HTML styleguides and documentation.
  • Patter primer generates styled markup from a folder of markup snippets.
  • TopDoc is a well documented tool for generating usage guides for css that uses very stric structures to document our CSS code.
  • And some interesting reference posts from Warpspire, rjmetrics and UXMag.

Regression tests

CSS is a set of rules that, applied to some specific HTML, produce a pleasant result. That’s why is not easy to add tests to a CSS framework, but there are some different stages we can add to our pipeline, mostly based on before and after image diffs:

  • Wraith, a responsive screenshot comparison tool from the BBC guys.
  • PhantomCSS provides visual regression testing with PhantomJS.
  • Hardy is, as they say, a “Selenium-driven, cucumber-powered CSS testing”.
  • CSS critic, a lightweight framework for regression testing of Cascading Style Sheets.
  • Sikuli is a general purpose visual technology to automate and test graphical user interfaces using screenshot images.
  • SuitCSS provides a test structure for visually testing other components.

Static code analysis

Interesting as a before-commit, checking any syntax errors and code redundancy:

  • CSSCSS is a CSS redundancy analyzer that analyzes redundancy (I love this guys :-)
  • CSSLint online tool and command line tool for syntax and basic performance checking.
  • MINCSS will check unused CSS selectors in your code.

Specific HTML+CSS implementation

Once we have set up our whole project, is time to start thinking about the specific CSS code we are going to write, then you should think about:

This is the personal website of Ignacio Palomo Duarte, Product Manager . If you're looking for my portfolio and more information just have a look at the homepage, and if you like this article maybe you can consider sharing it on twitter.