Looking back at the past years of your life, what was some of the most useful and wise advice you’ve received? When I look back into my own experiences, there are a few things that have stayed with me longer than others.
Impression matters. Never overpromise, but always overdeliver a little bit. For every project, pick an extra little thing (perhaps a nice print stylesheet or a matching font fallback?) and deliver it along with the entire package. Never respond to critique right away. Take it as is, write it down, and process it later. Also, never kill an idea in a meeting; it’s better to find out exactly why somebody came up with it, and why they believe it’s so important. Ideas need to solve a problem, and while its initial form might go against your hunches, you could implement the solution in a variety of ways.
In the spirit of the upcoming New Year, we’ve asked for the best advice you’ve ever received, and it was fantastic to see a stream of remarkable replies come in. Take a look, too, and share your advice with us so that we can collect them all into a standalone article here on Smashing Magazine. Also, if you think there are other questions everybody could benefit from — let us know! We’d love to make it happen! :-)
Happy holidays everyone, and here’s one to a truly wonderful, smashing and peaceful new year. Let it be the best year of your life!
Table of Contents
- Keep Your Team’s Code Consistent
- HTML5 Accessibility In Major Browsers
- Debugging PWAs With Dev Tools
- Performant Image Placeholders With SVG
- Open Source Etiquette
- Type With Pride
- Dada Data: Avant-Garde Brought To The Web
Keeping code formatting consistent in a team can be tricky. Everyone has their habits and reconciling them is a rather painful undertaking. That’s where Prettier comes in. Described as “opinionated code formatter,” the tool removes all original styling from the code you write (only styling that won’t affect the AST, of course) and ensures that all outputted code conforms to a consistent style.
Accessibility is key. But which HTML5 features are accessibly supported by major browsers, and which ones should you better supplement with ARIA or other additional workarounds? The Paciello Group ran tests to find out and collected the results on HTML5 Accessibility.
The features were tested in Chrome, Firefox, Safari, Edge and Internet Explorer. To get the green tick, the browser has to correctly map the feature to the platform accessibility layer. Full keyboard accessibility is required, too. To make it easier to find what you’re looking for, the features are divided into categories ranging from sections and groupings to properties. Useful! (cm)
Progressive Web Apps cater for better mobile experiences even outside of native apps. And, luckily for you as developers, browsers provide a good set of tools around them. Especially Chrome. A comprehensive article by Write Software shares tips for how you can use Dev Tools to debug your PWAs.
The article mainly focuses on Chrome’s Dev Tools and takes a detailed look at the Application panel which groups many elements that come in handy when inspecting Progressive Web Apps — the manifest which unlocks the ‘Add to home screen’ option, for example, Service Workers, or the ‘Clear storage’ tab to manage storage size. Firefox is covered, too. To make your learning as practical as possible and put your newly acquired knowledge to the test, there’s a real-world example that you can follow along. (cm)
When it comes to performance optimization, fast-loading images are key. But what do you show when the image hasn’t loaded yet? There are a variety of solutions for image placeholders out there — maybe you’ve already tried to keep the space empty to prevent content from jumping around, or rendering a tiny, blurry version of the image which then transitions to the full one. What renders as a placeholder has a significant impact on how the user perceives performance. José M. Pérez now describes a very elegant solution: SVG-based placeholders with geometric shapes.
Open source software is bringing people with all kinds of skills and backgrounds together to work on one common project. To make this undertaking as smooth and enjoyable as possible for everyone involved, we all should take some time to reflect on how we work together, as Kent C. Dodds and Sarah Drasner argue. Their Open Source Etiquette Guidebook provides a bullet point list of tips for both maintainers and users that help make the open source community a friendlier place.
The guideline for everyone who participates in open source (and every other sort of collaboration, too, of course) should interiorize: Be polite, respectful and kind. Maintainers could, for example, use labels like “help wanted” or “beginner friendly” to guide people to issues they can work on if they are new to a project. Users could suggest a solution to the problem when they open an issue. It’s little things like these that make a change. (cm)
One of the world’s most powerful designs certainly is the Rainbow Flag. Designed by artist and LGBTQ activist Gilbert Baker, it has gained fame in LGBTQ activities and protests all around the globe. To honor Baker who passed away in March this year, New Fest and NYC Pride partnered up with Fontself to create a free font inspired by the design language of the flag. Its name: Gilbert.
Bold, unique and a bit playful, that’s probably how to best describe the font. Originally, it was designed for striking headlines and statements that could live on banners for protests; now it is being built into a whole family of weights and styles. Gilbert is available as a standard vector font and a color font in OpenType-SVG formats. And as a little bonus, there’s also a motion-ready resource which you can use for animation, video or social posts, for example. Be colorful! (cm)
- Front-End Cheatsheets
- Front-End Accessibility
- Open-Source Icons, Fonts and Goodies
- Next.js Boilerplates and Guides
- CSS Global Resets, Gradients and Transitions
- Interface Design Patterns
- Web Performance Optimization
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.