Smashing Newsletter: Issue #232

Editorial

Much of the Smashing team has assembled in Toronto for SmashingConf. Vitaly and I were running full-day workshops yesterday, and as this newsletter goes out, we begin two full days of presentations. If the tweets of the next couple of days make you jealous, we have very few tickets still available for SmashingConf New York, plus super early birds are on sale for SmashingConf San Francisco next year!

Something that always strikes me at our events — and when talking to our members — is how friendly and welcoming the Smashing community is. Whether you have been working on the web for 20 years or 20 weeks, I hope that we can be a place where you always feel welcomed, and where questions can be answered. I've started to see that happen in our Membership Slack Group, and I hope we can continue to build a safe place where folks can ask questions about web design and development — without feeling their question is "too basic". In terms of the magazine, quite often our most popular articles are introductory guides to a subject; the web moves so fast that even experienced people will find themselves a beginner from time to time!

My aim here is to keep sharing questions and answers — be that via articles, conferences, webinars, or in person in our Slack channels, so that we can all learn new things together.

Keep asking questions!
Rachel (@rachelandrew)

Headache-Free CSS Layouts
A Customizable Linting Tool
Freebie: National Park Typeface
The State Of CSS 2019
Variable Fonts For Developers
Put Your JavaScript Skills To The Test
Search Fonts By Optical Characteristics
Stay Focused With Boxodoro
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Headache-Free CSS Layouts

CSS Layout can cause quite some headaches and you’ve probably found yourself wrestling with @media breakpoints before to achieve the result you had imagined in your head. Every Layout shows how you can change that. Created by Heydon Pickering and Andy Bell, the site teaches you to better harness the built-in algorithms that power browsers and CSS to finally make layout hacks a thing of the past and your design system more consistent thanks to context-independent layout components. (cm)

2. A Customizable Linting Tool

A community-driven hinting engine for the web — that’s Webhint. The linting tool checks your code for best practices and common errors to ensure your site is accessible, performant, and secure. Available as an online scanner or running in your CLI, you can customize what you want to get feedback on and even create new hints that suit your needs. So no matter if you want to prioritize the browsers your users are actually using or ignore third-party code when checking your site, Webhint has got you covered. (cm)

3. Freebie: National Park Typeface

When Jeremy Shellhorn was hiking through a national park, he wondered if the text on the ubiquitous wooden signs that show the way was actually a typeface. It turned out that no, and so Jeremy gathered a team of fellow designers, including the Media Program Manager of Rocky Mountain National Park, to turn the system of paths, points, and curves that are usually carved with a router bit into a real typeface. The result — the National Park Typeface — is available in four weights and can be downloaded for free. Outdoor vibes guaranteed. (cm)

4. The State Of CSS 2019

You might already know the annual State of JavaScript report, now there’s a State Of CSS 2019 report, too. After all, CSS has undergone some major changes recently: Flexbox, Grid, CSS-in-JS. For the report, Sacha Greif and Raphaël Benitte surveyed over 10,000 developers to find out which CSS features are used the most, which tools are gaining adoption, and much more. (cm)

5. Variable Fonts For Developers

Variable fonts offer entirely new opportunities and give web designers and developers more control over typography than ever before. To showcase the many possibilities and provide you with the resources and tools you need in order to use variable fonts in your own projects, Mandy Michael created variablefonts.dev. The demos on the site are great examples of how variable fonts allow us to think outside the box to create more meaningful content. (cm)

6. Put Your JavaScript Skills To The Test

How well do you know JavaScript? To help you find out, Lydia Hall posts weekly multiple choice JavaScript questions — from basic to advanced — in a GitHub repo. What’s the output of console.log(typeof typeof 1); and do all objects have prototypes? These are only two of the currently more than 40 questions in the collection. A great way to freshen up your skills or prepare for a job interview. (cm)

7. Search Fonts By Optical Characteristics

Finding the right font for a project can be a challenge. SuperSearch wants to change that by providing a consistent classification and search methods for all your fonts — one that uses real optical font characteristics as a basis and not the pre-written font parameters that font designers usually use. That makes it possible to search your fonts by x-height, weight, contrast, and proportion once you added them to the app. Handy! (cm)

8. Stay Focused With Boxodoro

Maybe you’ve already tried the Pomodoro technique where you concentrate on a task for 25 minutes and then take a 5-minute break? Mike Wheaton’s Boxodoro timer is a useful little helper to stick to the schedule. Living inside your browser window, Boxodoro starts automatically and snaps to the hour with the alarm sounding at 5 minutes, 30 minutes, 55 minutes, and at the end of every hour. A small but mighty productivity booster. (cm)

9. Upcoming In Smashing Membership

Thank you for being smashing! Over the last months, we’ve been increasing the number of webinars (without increasing the price of membership — it still starts at just $5 a month!) and have also improved video quality since we’ve moved to Zoom. Also, the eBook version of Andy Clarke’s brand new book “Art Direction for the Web” is now available as a part of the Membership, too. Obviously.

Coming up next:

Smashing TV on June 27 at 15:00 GMT
“Designing Landing Pages That Convert (And Look Great!)” with Laura Elizabeth
Smashing TV on July 3 at 16:00 GMT
“UX Optimizations For Keyboard-Only And Assistive Technology Users” with Aaron Pearlman
Smashing TV on July 9 at 16:00 GMT
“The Power Of Digital People” with Kristina Podnar
Smashing TV on July 16 at 16:00 GMT
“The Web of Things — The Story Of A Browser Escaping Into The Physical World” with Sebastian Golasch

We are very grateful for your support which allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. (You could become a Member, too! Join us in Smashingland where everyone is beautiful and you never get merge conflicts. )

10. Our Next Smashing Workshops

In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems.