March 17, 2020 Smashing Newsletter: Issue #250

Editorial

There is something magical in those little moments of serendipity when you get to meet random strangers. Everybody has a story to tell, and everybody is exciting and interesting in some way — if you’re just patient enough to explore, and display interest in them.

Everybody is working remotely at Smashing for years now. Some of us are working from home, some from co-working spaces, and some are always on the road. Personally, I’ve been collecting cozy places for working in my Foursquare list (yes, still Foursquare). These are the places where I feel at home; places where I’ve written articles, edited books, fixed bugs, pushed deploys and caught up with colleagues. But these are also magical places where I met people from all over the world.

Whenever I'm in a new city, I seek friendly cafés in small residential areas, find a perfect spot to work from, and occasionally strike a conversation with locals sitting next to me — baristas, personnel or random guests.

Not only do I get recommendations for wonderful little spots in the neighborhood, but I actually learn stories from locals, how they live and work and think, and most memorable experiences that truly matter to them. So every last sip of coffee has a unique aftertaste of that unique story, shared with a gentle smile by somebody I’ve just met by chance.

Yet in times when we need to keep physical distance between each other, it doesn’t work any longer. In places where I used to observe smiles, I see suspicious and unsettling looks, abandoned and empty desks, and rare, muted conversations. These are, of course, very important measures for very good reasons, yet at least to me, this situation feels very unsettling and isolating. Perhaps it’s not just me feeling this way.

So how do we stay optimistic and positive in these times? Perhaps by looking at the benefits of digital. It’s difficult to meet random strangers on the web, but it’s remarkable what we can achieve by staying connected digitally. Rachel just wrote a wonderful piece highlighting how to work better remotely.

Personally, I use the time to digitally connect with old and new friends from all over the world. Talking and learning how they’ve been so far, how their wonderful families are and what they’ve learned since the last time we spoke. It's wonderful to see their smiles on video, get insights into their daily life via screen sharing, and hear the voices of their children playing in the background. We support and encourage each other to stay optimistic and get through this, together. It wouldn't be possible a few decades ago!

And as a Smashing team, we dive into work. Last week, we shipped and released our new book on Ethical Design. At the moment, we’re also working on a few other books, and Paul Boag’s Click! Encourage Clicks Without Shady Tricks is coming up later in May. Stefan Baumgartner’s TypeScript book and Addy Osmani's book on image optimization is coming up in Fall.

We’re also working on interface design checklists and exploring what a truly smashing experience for online workshops and virtual conferences would be like.

We’ll get through this together, and we need to be respectful and patient — and we need to think of each other and support each other. Think of friends who you haven’t seen for a while and call them. Think of projects you’ve always wanted to kick off, and work on them. Stay connected, not isolated.

And do something good to people who are worried and concerned — even a small token of appreciation like a short email that would help and maybe prompt that gentle smile. These days, we could all use more smiles like that. Look out for each other, and wash your hands, of course!

With optimistic greetings from Budapest,
— Vitaly Friedman (@smashingmag)

Table of Contents

1. Free JAMstack Course With Phil Hawksworth
2. Getting To Grips With CSS Viewport Units
3. Tips For Leading A Remote Team
4. Loading Polyfills Only When Needed
5. Open-Source Flip Counter Plugin
6. A Better File Uploader For The Web
7. The Website Carbon Calculator
8. Not Your Average Playlist
9. Upcoming In Smashing Membership
10. Our Next Smashing Workshops

1. Free JAMstack Course With Phil Hawksworth

The JAMstack allows people to create sites that are simpler, faster, and more secure than other web development methods. To kick-start your JAMstack endeavors, freeCodeCamp now released a full course on JAMstack with Phil Hawksworth from the Developer Experience team at Netlify.

In the 3.5-hours-long course, you will learn what the JAMstack is and how it compares to other tech stacks. You’ll also explore six different examples of how it can be used — to create a static site, change the DOM with JavaScript, or generate pages from a content API, for example — and see how to use the JAMstack in your own infrastructure. A great introduction to the topic. (cm)

2. Getting To Grips With CSS Viewport Units

CSS Viewport units provide us with a way to size things in a fluid and dynamic way, without the need for JavaScript. If you haven’t gotten around to dive deeper into the topic yet, Ahmad Shadeed wrote a useful guide to CSS Viewport units.

Starting with a general overview of the viewport units vw, vh, vmin, and vmax, the guide covers how viewport units differ from percentages and explores practical use cases for viewport units and how to implement them in your projects. Just the push you might have needed to make the switch. (cm)

3. Tips For Leading A Remote Team

Leading a remote design team can feel a bit daunting, especially if it’s your first time. Luckily, other people out there have found themselves in the same situation before and developed strategies to keep the team productive and effective, no matter where everyone might be located. Mark Boulton is one of them.

In light of recent events when many teams need to switch to remote work, Mark summarized some simple but useful approaches that have helped him leading remote teams for years. From continuing your team’s rituals to dealing with expectations on availability and coaching people through the ups and downs that working remotely brings along, Mark’s tips aren’t hard to adopt but they can make a real difference. (cm)

4. Loading Polyfills Only When Needed

How do you typically serve polyfills only to browsers that need them? Ivan Akulov was asked this question by a colleague and took it as an occasion to explore three ready-to-use approaches, how they work, their benefits and drawbacks.

The summary takes a closer look at polyfill.io, the module/nomodule pattern, and Babel’s useBuiltIns. The best solution, as Ivan argues, would be a custom one: you could build multiple bundles using Babel’s useBuiltIns and different target browsers, and serve the right bundle based on the user agent. Philip Walton’s approach with client-side conditional loading is also worth considering. (cm)

5. Open-Source Flip Counter Plugin

Do you want to count down to an event, visualize a fundraising campaign, or show a clock or sales counter? Then Rik Schennink’s Flip Counter might be for you. The plugin is open-source, mobile-friendly, easy to set up, and it gets by without any dependencies.

Apart from its ease of use and flexibility, Flip shines with the beautifully smooth animation that is used to flip the numbers on the cards. Depending on your use case, there are several presets that you can use as a starting point to build your flip counter. The visual style can be customized with CSS. A lovely little detail. (cm)

6. A Better File Uploader For The Web

Building a better file uploader for the web. That was the idea behind the JavaScript image uploader Uppload. Created by Anand Chowdhary, the image uploader is open-source and can be used with any file uploading backend. And with more than 30 plugins, it’s highly customizable, too.

Users can drag and drop their files to upload them or import from a camera, URL, or social media and a several other services (there’s even an option to take and upload a screenshot just by entering a URL). During the uploading process, users can apply effects to the images and adjust filters like brightness, contrast, and saturation. If that’s overkill for your project, you can select only what you need and treeshake the rest, of course. Uppload supports browsers down to IE10. Handy! (cm)

7. The Website Carbon Calculator

From data centers to transmission networks to the devices we hold in our hands, all of these consume energy, adding up to the 416.2TWh which the internet consumes per year. That’s more than the entire United Kingdom. If you break this immense number down, the average website produces 1.76 grams CO2 per page view. But how is your site impacting the planet?

The Website Carbon Calculator helps you find out. Just enter your site’s URL, and the calculator shows you how much CO2 is produced every time someone visits your site, how this relates to the average site, and how much CO2 is produced in a year based on your monthly page views. The calculations are only an estimate, of course, and take five key pieces of data into account: data transfer over the wire, energy intensity of web data, the energy source used by the data center, carbon intensity of electricity, and website traffic. Interesting insights. (cm)

8. Not Your Average Playlist

Are you bored of your music playlist and up for something completely different? Then Radiooooo is for you. The site takes you on a journey through 100 years of music — from Greenland to Antarctica, from Mexico to Japan.

To embark on your music adventure across the globe, pick a country from the world map as well as a decade (the range spans from 1900 until the 2010s), and select if you’re up for something slow, fast, or, well, weird. What follows is a surprise bag of music that is anything but boring. (cm)

9. Upcoming In Smashing Membership

Last week, we released The Ethical Design Handbook, and, of course, the eBook version is and always will be free for Smashing Members. Please check your dashboard (“eBooks”) to download it.

We are also looking into a slightly more interactive format for our Smashing TV sessions. We kindly invite you to submit your questions or actual mock-ups of your work in the Membership channel (#tv channel), so our speakers can review and provide feedback to your current projects — live!

• “Building A Modern Electron App With React Hooks” with Cassidy Williams— March 19 at 17:00 London time

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉

10. Our Next Smashing Workshops

In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.

• 🇺🇸 SmashingConf Austin (June 9–10) in Austin, Texas, USA.
• 🇩🇪 SmashingConf Freiburg (Sept. 7–8) in Freiburg, DE.
• 🇺🇸 SmashingConf New York (Oct. 20–21) in New York, USA.

Or, if you’d like to run a remote or in-house workshop at your office, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.