Smashing Newsletter: Issue #193

Editorial

This is my first Smashing newsletter as the new Editor In Chief of Smashing Magazine. We’ve had so many lovely congratulation messages since the announcement — thank you! It’s a really exciting time for all of us here at Smashing.

Speaking of exciting things, last week we announced the upcoming Smashing conferences in London, San Francisco and Toronto. Tickets are now on sale, and at each event we also have some great workshops — where you can spend a full day with a real expert in their topic. Workshops are a fantastic way to give yourself the time to think in a focused way on a subject. You’ll come away with lots of real-world advice on these subjects that you can apply in your work right away, and also have a lot of fun!

You can also have a lot of fun while learning by taking part in our latest Smashing Challenge! The theme is front-end performance and you can win a trip to our London conference. I can’t wait to see the entries, and how much faster those sites become.

On with the newsletter, where we have a round-up of some interesting links from the wider web as well as full details of those conferences.

Keep learning, but don’t forget to enjoy yourself!
Rachel (@rachelandrew)

Make FOUC Less Jarring
Gain Full Control Over Font Loading
Inter UI: A Highly Legible Typeface For Screen Design
Take Your Infographics To The Next Level
Tips To Avoid The Mouse Trap
CSS Magic With Houdini
A Free Guide To <head>
Dada Data: Avant-Garde Brought To The Web

1. Make FOUC Less Jarring

FOUC (flash of unstyled content) is a natural side effect of using web fonts. The flash of unstyled text between the initial rendering of your websafe font and the web font that you’ve chosen might be an issue of only a fraction of a second. However, the layout shift resulting from it can be jarring. To make it less intrusive, you can try to match the x-heights and widths of the fallback font and the web font as closely as possible. And since that involves a lot of tinkering, Monica Dinculescu built Font Style Matcher, a tool that’ll ease the task and help you cater for smoother layout shifts.

The way it works is simple yet genius. Just choose a fallback font and a web font, and enter the style values for each of them. Now you only need to use the sliders to adjust the values until line height and letter spacing visually match in the best way possible. A built-in live preview visualizes the effects your tweaks have on the layout shift. Once you’re happy with the result, you can copy the font styling CSS to your clipboard and use it right away. A tool that belongs in every developer’s toolkit. (cm)

2. Gain Full Control Over Font Loading

What’s your strategy for loading web fonts? A solution that gives you full control over web font loading is Bram Stein’s Font Face Observer. Using a simple promise based interface, it lets you load fonts and customize your browser’s font loading behavior, no matter if you host them yourself or use Google Fonts or another web font service.

To load the font, you create a new FontFaceObserver instance and call its load method. This will return a promise that is either resolved when the font has loaded or rejected if the font fails to load. Easy! The little helper supports all major browsers, IE8 and above, as well as the Android browser. (cm)

3. Inter UI: A Highly Legible Typeface For Screen Design

Sharpness and readability are key factors for choosing a typeface — especially when it’s supposed to work well on screens, in longer texts or tables, for example. If you’re looking for a real typographic workhorse, be sure to take a look at Inter UI. The typeface is not only free and open-source but also comes with a row of lovely details that cater for an extra-smooth reading experience.

Contextual alternates, tabular numbers, fractions, open digits, and case alternates are just some of the nifty little features that make Inter UI so powerful. The font comes in four weights ranging from regular and medium to bold and black and works well in all Latin and Cyrillic languages. If you want to take a closer look at its possibilities, there’s a playground to try out its features. (cm)

4. Take Your Infographics To The Next Level

What comes to your mind when you hear the term “data visualization”? Flowcharts, pie and waterfall charts? Well, nothing wrong about these, but the possibilities to visualize data go much further than just that. To help us think outside the box and inspire us to try something new when it comes to visualizing correlations, compare proportions or explain processes, the folks at infographic and data visualization agency Ferdio brought the Data Viz Project to life.

The Data Viz Project is a showcase of more than 150 different types of data visualizations. Each one of them is presented along with tips on what it can be used for and real-world examples of what it could look like in action. And to make the decision which visualization type might be the best fit for your project a bit easier, you can browse the showcase by input, function, shape, and family to find the perfect match. Now who said charts and diagrams need to be boring? (cm)

5. Tips To Avoid The Mouse Trap

Reaching for your mouse is a real productivity killer. The small movement interrupts your flow and costs you precious seconds. It might not seem a lot, but when you consider how often you reach for it during a regular day things add up. Time to finally avoid the mouse trap, don’t you think?

Alex Wolkov loves to find ways to get mouse jobs done only with the keyboard, and now he collected his best tips in an article. In it, he shares everything from rather basic shortcuts like holding Option + left/right to jump by word, to plugins that know coding syntax, shortcuts that make using DevTools a lot smoother, and even browser add-ons that let you mark clickable links with shortcodes. Once you’ve got a hang of these tips, you won’t go back to the mouse. Poor thing, but oh well. (cm)

6. CSS Magic With Houdini

With its ability to let you use CSS feature even if they aren’t fully supported yet, Houdini is probably one of the most exciting developments in CSS. To tinker with its possibilities and inspire you to try some Houdini magic yourself, Vincent De Oliveira brought CSS Houdini to life, a showcase of Houdini-powered coding experiments.

Building your own background properties, drawing a tooltip without any extra or pseudo elements, and creating non-rectangular separators are just a few of the experiments on Vincent’s Houdini playground. Each one of them comes with the accompanying code snippet which you can live edit. Watch out, though: You’ll need the latest Chrome version with Web Platform flag enabled to make full use of the showcase. (cm)

7. A Free Guide To <head>

What do you usually put into the element of a page? Just the bare necessities like meta, external CSS, and the page title? The possibilities of what can be done with are much more diverse. To dive deeper into the usually rather under-addressed element, Josh Buchea wrote a free guide to and its possibilities.

The guide dives deep into everything from meta information and resources you can link to, to favicons, social media finesses like Twitter cards, and even platform-relevant information (think smart app banners or add to homescreen shortcuts). Short, precise and super useful. (cm)

8. Dada Data: Avant-Garde Brought To The Web

100 years ago, the European avant-garde started to express their protest against the prevailing logic and aesthetic of its time by creating nonsense art — the birth of the Dada movement. Maybe you’ve seen some of its irrational collages or read one of the cut-up writings it became famous for before. But what happens if you take its ideas to our digital times and give Dada a new sphere on the web? Well, the web project Dada Data did exactly that.

On the one hand, Dada Data is an interactive collection of Dada works and videos; on the other hand, it’s also a showcase for the so-called Dada-Hacktions, little web projects that play with the Dada idea and transport them to our digital times. In the form of a browser add-on which replaces all website ads with Dada slogans, for example, or Dada-Gram, an experiment that combines famous Dada photomontages and your Instagram photos into real Dada art. As Richard Huelsenbeck, artist and supporter of the movement, once said: “You cannot comprehend Dada, you have to experience it.” The same is true for this web experience. A weird but lovable place. (cm)

November 7, 2017 Smashing Newsletter: Issue #193

Previous Issues