Smashing Newsletter: Issue #196

Editorial

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!

Stay smashing!
Vitaly (@smashingmag)

Keep Your Team’s Code Consistent
HTML5 Accessibility In Major Browsers
Debugging PWAs With Dev Tools
Performant Image Placeholders With SVG
Open Source Etiquette
The State Of JavaScript 2017
Type With Pride
Dada Data: Avant-Garde Brought To The Web

1. Keep Your Team’s Code Consistent

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.

How does it work? Well, Prettier disregards the original styling by parsing it away, and re-prints the parsed AST with its own rules, taking the maximum line length into account and wrapping the code where necessary. It works with JavaScript (including ES2017), CSS, Less, and SCSS, JSON, Markdown, GraphQL, and a few other languages, and seamlessly integrates with some code editors. A great way to finally put an end to internal debates over formatting and focus on the things that really matter instead. (cm)

2. HTML5 Accessibility In Major Browsers

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)

3. Debugging PWAs With Dev Tools

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)

4. Performant Image Placeholders With SVG

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.

What makes SVG such a great fit is the fact that you can easily control the level of detail (and, thus, the size of the placeholder), and it’s highly compressible and easy to manipulate with CSS and JavaScript, too. In fact, an SVG placeholder can be as small as 640 bytes, and even if you want more detail, you can get it at a small payload. Worth giving it a try. (cm)

5. Open Source Etiquette

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)

6. The State Of JavaScript 2017

“JavaScript is great!” “JavaScript is a mess!” No matter your opinion, one thing is for sure: The JavaScript world is ever-changing and richer than ever. To get a better understanding of the JavaScript ecosystem, Raphaël Benitte, Sacha Greif, and Michael Rambeau asked more than 28,000 developers all over the world questions on topics ranging from front-end frameworks and state management, to build tools and testing libraries.

Some of their findings: When it comes to front-end frameworks, React is the dominant player, but Vue is making big gains while Angular loses popularity. In the competitive testing landscape, the fight between the frameworks is far from settled, but Jest and Enzyme stand out from the crowd with very high satisfaction ratings. And NPM and Webpack are still the kings of build tools. For more insights into the JavaScript universe, be sure to check out the study. (cm)

7. Type With Pride

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)

December 19, 2017 Smashing Newsletter: Issue #196

Previous Issues