I’ve meet with a very cool startup over the weekend. It was interesting to listen and learn from them what is ‘cool’ in their technology world. However, I got the feeling that they are missing some of the new capabilities that the web platform has to offer. I’ve pointed them to some known resources like: html5rock.com , MDN site etc’. But it seems better to try and get a list of tools or pointers that any developer could browse and pick from. So here is an alpha version of the list. It’s split to subjects like: design phase, testing phase etc’ just to keep it a bit more useful.
Design
- Start with the UX
- Balsamiq – a very cool online tool to sketch something quickly.
- www.google.com/webdesigner/ – A free tool that could help you in your next project.
- Use a napkin. It’s the best way to have a cool story how you started your wonderful company out of a napkin.
- Get ideas/inspiration
Develop
CSS3 Frameworks
I like the first two… They are very powerful and after you get some experience with them, it will save you a lot of time.
Boilerplates
Why reinvent the wheel again and again? Let’s the boilerplates do the hard work for you.
Btw, check out http://yeoman.io/ as it can save you a lot of time with its brothers:
- Grunt – used to build, preview and test your project by using tasks curated by the Yeoman team & grunt-contrib.
- Bower – used for dependency management, so that you no longer have to manually download and manage your scripts. Think of it as the npm for the client side.
Rapid Prototyping
It’s a good way to hack something quickly and with one of these tools, to be able to share it with your team.
Best practices
- https://developers.google.com/web/fundamentals/
- mobilewebbestpractices.com/resources/
- Use yeoman.io or
Boilerplates
that will save you from re-inventing the wheel again and again.
- Listen to click events AND touch event here is how to do it: http://www.html5rocks.com/en/mobile/touch.html
- Good set of examples to most HTML5 APIs: www.simpl.info
Debugging
- Learn it for real: developer.chrome.com/devtools/index
- Chrome for Android – Now you can drive your web app with Chrome devtools and see the results on your mobile.
- Remote debugging with jsconsole.com – for all the cases you wish to check other devices that don’t have Android on them.
- Opera dragonfly supports it as well.
- Firefox mobile got an option – so all the friends of the fox could enjoy it.
Testing
- browserstack.com – A good way to check how your work is looking on older browsers (e.g. IE9-)
- Selenium and its mobile option Remote Web Driver.
- MVC provides separation of concerns. So you can use frameworks like Qunit – test your models.
Optimization
Compatibility
Validators
Misc / Last tips
- Get feedback on your design
- Few Presentations from the past
- Device APIs – Yep, we are getting closer to the metal with HMTL5
- Geolocation API
- Device Orientation API – accelerometer
- WebGL
- How to work with HTML5 Filesystem API
- Battery API
- Gamepad API
- WebRTC – voice & video
- Web Audio API
Psst… If you think I’ve missed an important tool/resource/site – please feel free to use the comments or just fork this gist.
Thank you!
Discover more from Ido Green
Subscribe to get the latest posts sent to your email.
Ido Green 
Reblogged this on Important Links.
You forgot the most important thing – the IDE …
I’m using brackets (http://brackets.io) , it’s the most powerful and convenient free IDE .
Thank you Yarden.
I hope to have time in the next 2-3 weeks to write a full post on IDEs / text editors and workflow in general.