Hey,
this week I learned a lot about code refactoring and about super advanced Grunt workflows. After trying to fix some existing code for hours I decided to rewrite the whole component. After half an hour I was finished and it was performing much better.
Second, it’s simply amazing what our front-end tools like Grunt (or Gulp) can help us with our workflow. The web is definitely moving forward as you can see every single week in this letter and I am proud to be part of this process. Let’s make the web even better—if you’re in Germany in May, join me on the WebPlatformDocSprint and a Barbecue.
News
- Firefox (29) supports live editing of Sass and Less in the DevTools using source maps (You need Sass v3.3 pre to do that or Less 1.5+). Saving of the edits is also possible.
General useful things
- Remove unnecessary whitespace before you commit files with
git-stripspace
. You can even set a prehook to do this ahead of every commit. - Don’t get git yet but wanna get starting? Here’s Git, the simple guide.
Design
- Type Quest shows you beautiful opentype features.
- Mobile navigation icons A/B tested with interesting results. Be careful what you use!
Tools
- Font Prep is the missing Font Generator for Mac OS X to convert fonts to web-fonts.
- RecordIt! records your screen so you can share short animated gifs of your screen. Useful for blog articles and tutorials.
screenshot-service
– a WebKit based screenshot service tool.- Do you want to know more about Grunt and a solid tooling workflow for your projects? Here is my article “Kick-Start your Project with INIT and Grunt” on Smashing Magazine.
- Supercharge and simplify your Gruntfile by splitting into one partial for each task.
SVG
- Everything is relative, adaptive and should be responsive. The art of the adaptive image shows how to create a multi-layered SVG. Supercool!
- Never understood the tutorials and articles about animating SVGs? Chris Coyier shares how he learned it. And it’s a really simple tutorial!
JavaScript
- This article compares Promises, Generators and other approaches to manage callbacks in node.js.
CSS
- A good overview on combining CSS Selectors.
- Bower all the things. How to use to manage your front-end dependencies.
- 10 good scss utilities that help you build your website project.
- The new CSS
font-synthesis
will let you define if a browser should emulate a bold font weight or italic font style if the font doesn’t provide it itself. This can avoid the ugly faux bold font renderings.
Go beyond…
- The Web is the platform or the perils of esoteric setups. Doug Belshaw about the difference and importance of the web and how it can drive whole operating systems.
- You like sketching? Moleskines are your daily compagnion? Then have a look at Baron Fig—The Book for Ideas which looks pretty nice.
And as usual: If you like my reading list, support me by voting for me, by gratipayping me or by simply sharing this resource to other developers who might be interested.
Cheers,
Anselm