Welcome to This Week on the Front End, our weekly roundup of news from the world of the front-end web.
You can check out the other editions under the frontendnews tag, and don’t forget to check out our weekly JavaScript and .Net roundups too!
News and Views
Want to build the next Facebook? Forget it—you won’t.
Do you have a personal brand? (Like in marketing, not like a cow.) Well, you should.
Here’s a controversial article about Streaming Music is Ripping You Off. It includes a rather cheeky suggestion that we all game the system for the month of September to bring about change.
CSS
Here’s an argument for why PostCSS is a game changer. And here’s a really handy article that “deconfuses” pre- and post-processing—highlighting that we should really drop the “pre” and “pst” and just talk about “CSS processing”.
Here’s a handy guid on how to identify critical CSS—that is, the styles relating to your “above the fold” content, which you can then “inline” (embed in the head) to maximize page load performance.
Feeling out of touch with where we’re up to responsive images? See if this article helps.
Here’s an article on laying out a flexible future for web design with flexbox.
Safari actually supports some CSS selectors inside selectors, such as :matches(), :not() and :nth-child(). Who said Safari was the new IE?
It’s more commonly done with JS, but it’s still quite viable to create charts with CSS.
And here’s article number 563,456 on understanding CSS selector specificity—just in case you missed the others. 
And here’s the millionth article on how CSS floats work. Congratulations to the lucky author! You win a … flexbox. 
Here are some pretty cool CSS progress bars:
JavaScript
If you’re really into nice typography, Typeset.js is worth a butcher’s. It’s a typographic pre-processor for your html which uses zero client-side JavaScript and gives you:
- real hanging punctuation
- soft hyphen insertion
- optical margin outdents
- small-caps conversion
- punctuation substitution
- space substitution.
Tools
Here’s a useful roundup of code/text editors—because the grass might always greener, right?
HTML
Have you avoiding Gzip because—well—you’re just a front-end person? That’s not an excuse. Here’s a handy Gzip primer for front-end development.
Design
Here’s an interesting argument for motion in design.
Here’s an explanation of the meaning several recent and upcoming Olympic Logos:
Learning by Heart … or … PITA to read. Take your pick. Either way, this little page has been doing the rounds lately, mainly because of the way it forces readers to slow down and read carefully. What do you think? Good idea, or just annoying?
SVG
Another great article from Sara Soueidan on better SVG fallback and art direction with the picture element.
Speaking of SVG, here’s a nice animated SVG hero slider.
CMS
Need a CMS? There are so many around, but now and then one stands out. Sitecake is an interesting offering. It’s a bit like Perch, integrating with your static site, but it’s free and doesn’t use a database. Pretty cool.
Fonts
Here are some handy preload hints for web fonts.
Want to create your own font? It can be pretty hard work, and the high-end apps for font creation are pretty complex and expensive. But it you just want to tinker and create some nice fonts for yourself, Glyphr Studio is worth a look. It’s simpler to use, and also free!
The Coolness
Here’s a pretty cool menu effect, where the page tilts out of the way to reveal the menu (definitely something every site needs):
And here’s a very pretty countdown timer:
And here’s … something or other …
http://codepen.io/thebabydino/full/vOMjPy/
And an amazing representation of yoga (drag the guy around):
http://codepen.io/ge1doot/pen/PqgWOY
Don’t be led by the nose …
http://codepen.io/ge1doot/full/wabwEQ/
If you have any links you’d like me to put in the next edition, please just message me [Don’t feed the dog chocolate, please.].
If you enjoyed any of these articles, or if they got you thinking, tell us about it below. Otherwise it gets lonely in here!