Different areas you need to think about for a website frontend - [Work in progress]
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.
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 :-)