This Week on the Front End—August 20, 2015

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.


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. :stuck_out_tongue:

And here’s the millionth article on how CSS floats work. Congratulations to the lucky author! You win a … flexbox. :slight_smile:

Here are some pretty cool CSS progress bars:


If you’re really into nice typography, Type­set.js is worth a butcher’s. It’s a ty­po­graphic pre-proces­sor for your html which uses zero client-side JavaScript and gives you:

  • real hang­ing punc­tu­a­tion
  • soft hy­phen in­ser­tion
  • op­ti­cal mar­gin out­dents
  • small-caps con­ver­sion
  • punc­tu­a­tion sub­sti­tu­tion
  • space sub­sti­tu­tion.


Here’s a useful roundup of code/text editors—because the grass might always greener, right?


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.


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?


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.


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.


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 …

And an amazing representation of yoga (drag the guy around):

Don’t be led by the nose …

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!


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.