Smashing Newsletter: Issue #201

Editorial

It can feel as if we are subject to a neverending onslaught of things we need to learn. At Smashing, we hope to try and make that a little easier by publishing articles and tutorials that get to the heart of the subject. A great example of this is our top article of the last couple of weeks, “How GDPR Will Change The Way You Develop.” If there is any subject that matters to web designers and developers that you think we should be covering, please do let us know anytime.

Of course, we are not the only place publishing great learning material. In this Smashing newsletter, we highlight a list of over 620 programming and computer science courses that are free to join, as well as a number of other great articles and techniques from the community.

Keep learning!
— Rachel (@rachelandrew)

Free Online Learning Resources
Loading Third-Party Scripts
Motion Sickness And The Web
Automating Padding And Spacing For Your Sketch Layers
See What’s Inside Your Font File
How To Create A Dynamic Date Icon
The Funny Side Of CSS
Freebie: Icon Set With Extinct Animals

1. Free Online Learning Resources

CSS Custom Properties (aka CSS Variables) bring the power of variables like we know them from CSS preprocessors to CSS. This means less repetition, better readability, and more flexibility. And, unlike their preprocessor fellows, CSS Variables are a part of the DOM which has a lot of benefits.

To get you started with CSS Variables, Scrimba brought a free series of eight interactive screencasts to live. Each of them is between three to five minutes long and come with a coding challenge at the end to test your newly-aquired knowledge.

If that’s not enough, also be sure to check out the list of online programming and computer science courses that Dhawal Shah put together. You’ll find more than 620 courses from universities across the globe. The perfect occasion to learn something new! (cm)

2. Loading Third-Party Scripts

So you’ve optimized your site but performance still isn’t as you expected it to be? The reasons could be third-party scripts, social sharing buttons, video player embeds, advertising iframes, or even analytics and metrics scripts. Things that happen in the background that you can’t control… or can you?

To help you find and fix issues related to third-party JavaScript, Addy Osmani and Arthur Evans wrote a helpful guide. You’ll learn to identify third-party scripts, how to measure their impact in your page and how to load them efficiently. By the way, Addy will be speaking at our next month’s SmashingConf San Francisco, as well.(cm)

3. Motion Sickness And The Web

A cool scrollytelling experience, an animated graph that starts to move, or other kinds of animation might be pleasant surprises for users who don’t have any problems with processing motion. However, motion-sensitive people might experience the same interaction as hostile and dangerous. In effect, they leave your site before you can even say “Come back!”

In order to help designers and developers detect and circumvent problematic behaviors, Eileen recently shared some valuable tips and examples on how you can incorporate interactive elements into your page that don’t cause any processing issues. (cm)

4. Automating Padding And Spacing For Your Sketch Layers

Buttons. When designing in Sketch, there is no easy way to handle them. Luckily, a little Sketch plugin now makes everything a lot smoother: Paddy automates padding and spacing for your Sketch layers so you don’t have to adjust them manually each time anew.

If you want to give it a try, be sure to check out Grady Kelly’s introduction into how to integrate the mighty little helper into your workflow. (cm)

5. See What’s Inside Your Font File

How many characters does a font include? Which OpenType features and languages does it support? FontDrop shows you everything you want to know about a font at a glance.

Just drop your OpenType or TrueType file (OTF, TTF, and WOFF are supported) onto the site, and it will show you all the details around that font. You can play around with the OpenType features to see how they influence the font’s look, see different sizes of the font in a waterfall chart, and even what it will look like when used in a table with data. Handy! (cm)

6. How To Create A Dynamic Date Icon

When Terence Eden wanted a generic calendar icon for his contact page, he wondered if he could create something that was a bit more useful as those paper calendar skeuomorphs you see frequently. A dynamic icon, maybe?

What came out of this idea is a clever SVG calendar icon which always displays the current date. If you want to tinker with the concept, be sure to check out Terence’s short how-to guide for more details. (cm)

7. The Funny Side Of CSS

CSS brings our designs to life, but the coding language also makes for a good laugh. Don’t believe it? Well, then take this: #titanic {float: none;}. Or how about #tower-of-pisa { font-style: italic; }?

Saijo George has a sweet spot for CSS jokes and puns like these. That’s why he dedicated an entire site to them with a beautiful, animated illustration accompanying each pun. Geeky humor at its best. (cm)

8. Freebie: Icon Set With Extinct Animals

The Pinta Island Tortoise, the Tasmanian Tiger, the Great Auk. All of them share the same sad story: They have become extinct in recent years. To tribute them and all the conservation efforts of many people and organizations, the Shock Family and ByPeople created a free icon set.

45 animals are included in the set — from small insects to a rhinoceros that could reach lengths of 10 feet. The icons come in three versions: color, black and white, and outline. AI, SVG, and PNG formats are available. A good reminder to reconsider how we deal with our planet and its inhabitants. (cm)

March 13, 2018 Smashing Newsletter: Issue #201

Previous Issues