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!
Table of Contents
- Headache-Free CSS Layouts
- A Customizable Linting Tool
- Freebie: National Park Typeface
- The State Of CSS 2019
- Variable Fonts For Developers
- Search Fonts By Optical Characteristics
- Stay Focused With Boxodoro
- Upcoming In Smashing Membership
- Our Next Smashing Workshops
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)
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)
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)
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)
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)
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)
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)
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. )
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.
Coming up next:
- Email, Design Teams, Regex and Compression
- CSS Linter, Regex, Performance, Accessible Components
- Free Fonts, CSS, Design Systems and SVG
- npm, Async CSS, Free SVG/EPS Icons
- Serverless, Gradients and Degreeless Design For Everyone
- State of CSS, Variable Fonts and Staying Focused
- Performance, Sketch and Animation Handbook
- Animation In React, CSS Sticky and Inclusive Design
- Business For Designers, CSS Experiments and Open-Source Illustrations
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.