Mockup
- Simply use sheets of paper with a pencil, draw the mockups & pin on a board for the whole team to see, this makes it easier to change stuff. I find digital mockup tools slow.
- If you need High fidelity design, get a designer to spin this up, if you attempt to use your poor photoshop skills, you are likely going to slow things down.
Development/Implementation/tooling
- Uses SASS + PostCSS + SMACSS, this cannot be overemphasised why? At first, it may take some time to set up but will save you tonnes of hours later. SASS enables you write modular CSS, nesting will save your life and PostCSS will help you with messy cross-browser stuff like vendor-prefixes. Modular css will help you iterate faster because it's clear where to find what. _header.scss, _sidebar.scss you get the point.
- Use a CSS grid framework, don't waste time writing yours, even so, extract bootstrap's plug it in and use.
- For form elements and typography use a CSS framework and if you need anything custom modify as you go along, note you should have a file e.g _modified_btn.scss where these customizations will live so you don't go crazy in the future trying to find it.
- Set up hot-reload somehow, with React this is easy. It will save you stress hitting `ctrl + R` 1000 times.
- Use IDE/Editor plugins that automatically prettify your code personally, I code with Sublime Text 3 so I use HTMLPrettifier and set `format_on_save: true` you don't want to waste time hitting tabs.
Links:
https://smacss.com/
http://sass-lang.com/
https://github.com/postcss/postcss
https://github.com/victorporof/Sublime-HTMLPrettify
Lazy dev's guide :)