December 1, 2020 Smashing Newsletter: Issue #277
This newsletter issue was sent out to 182,434 subscribers on Tuesday, December 1, 2020.
Editorial
Look at how smashing you are. You must be getting dozens of emails every day, from endless newsletters to never-stopping notifications, yet you took the time to open this email and actually read it. That makes you very smashing, and that deserves a round of friendly and appreciative claps. You deserve it. Thank you.
Because you matter. Because you could do so many other things, and trust so many other people and companies and organizations that bombard you with messages over and over. Because you’ve given this newsletter your attention and your time.
We often talk about about numbers and analytics, engagement and retention, split testing and multivariate testing. These things matter, but they aren’t everything. Because each of the dots in each of those graphs is a human being, and all of them came to our sites and apps and products and services with hope and expectations. We better not waste them.
In fact, every click is a promise. A good business needs to make good on that promise by meeting and exceeding customers’ expectations. That’s why it’s worth spending time looking into frustrations, pain points and customer complaints — times and places in which our customers have been let down. We absolutely need to look at conversion, but we also need to measure times it takes for customers to build trust, loyalty and a relationship with the brand over time.
While doing so, let’s take the time to sincerely appreciate people who sincerely appreciate us. It’s the people who make a decision to support us and follow us throughout our journey. They are incredible. They are our true heroes. They deserve our attention, our time, our credit, and they deserve a token of kindness because they are still around. And, you know, sometimes just a sincere thank you can go a long way. We need to stay true to our authenticity, and remember the human side of the numbers we keep looking at day after day.
Yours truly,
Vitaly (@smashingmag)
- Become A Jamstack Explorer
- Open-Source Screen Recorder And Annotation Tool
- New Front-End & UX Workshops
- A Human-Friendly Date Picker
- DevTools For VSCode Extension
- Monospaced Fonts For Coding
1. Become A Jamstack Explorer
The Jamstack is still unexplored territory for you? Jamstack Explorers helps change that. Its mission: teaching you about building for the web with modern tools and techniques.
You can choose from three courses, track your progress, and earn rewards as you proceed through the Jamstack universe. Tara Z. Manicsic leads you through the wilds of Angular, Phil Hawksworth teaches you how to serve and track multiple versions of your site with Netlify, and Cassidy Williams guides you through all the essentials of Next.js. Once you’ve completed the three missions, there’s not only a certificate waiting, but you can call yourself a Jamstack Explorer, ready to use the newest tools to build experiences that are robust, performant, and secure. (cm)
2. Open-Source Screen Recorder And Annotation Tool
If you’ve been looking for a free and easy-to-use tool to record your screen, it might be hard to find something more powerful than Alyssa X’s open-source screen recorder Screenity.
No matter if you want to give contextual feedback on a project, provide detailed explanations, or showcase your product to potential customers, Screenity offers a number of practical features to capture, annotate, and edit your recordings — without any time limit. You can draw on the screen and add text and arrows, for example, highlight clicks and focus on the mouse, push to talk, and much more. Screenity is available for Chrome. (cm)
3. New Front-End & UX Workshops
Each and every workshop has been an incredible experience with wonderful folks from all over the world coming together to get better at what they do. Join in the fun and learning — without needing to leave your desk. Our Smashing Workshops are filled with practical examples, video recordings and friendly Q&A sessions.
We’ve just announced our new front-end & UX workshops on form design, SVG animation, design systems, HTML email and even one that’s focused on frontend and what to expect in 2021. There are still some early-birds left, with a lil’ friendly discount, so take a look and perhaps join us as well.
4. A Human-Friendly Date Picker
Date pickers can be hard to get right. A beautiful example of a human-friendly and fully accessible date picker comes from Tommy Feldt.
Thanks to Chrono.js, it supports natural language inputs, so that a user can type something like “tomorrow”, “December 2”, or “in 5 days” to select a date. Shortcut buttons also help to select the most common dates. The date picker is fully accessible with the keyboard and screen readers (there’s even an on-demand help feature for screen reader and keyboard users) and degrades gracefully when JavaScript or CSS aren’t available. A very inspiring proof of concept. (cm)
5. DevTools For VSCode Extension
Wouldn’t it be cool to have DevTools integrated into your code editor so that you don’t need to switch back and forth between the two? If you’re using VSCode and Edge, a small extension makes it possible.
The extension shows the browser’s Elements and Network tool inside VSCode, giving you the ability to see the runtime HTML structure, alter styling and layout, perform diagnostics, and debug your project — without leaving the editor. By the way, Rachel Weil shared some handy DevTools tips for working with Chromium-based browsers like Edge and Chrome at Smashing Conf San Francisco a few weeks ago. Be sure to tune into the recording to take your DevTools skills to the next level. (cm)
6. Monospaced Fonts For Coding
Programming fonts are certainly the workhorses in typography. They need to offer great readability, enable quick text scanning, and prevent eye strain even when a developer looks at the code for hours. To help you find a programming font that meets your needs, Chris Coyier curates Coding Fonts, a selection of more than 30 (mostly free) monospaced fonts that all match this criteria.
To make the decision easier, each font comes with a short description, an overview of all characters, and HTML, CSS, and JavaScript code examples in both day and night mode. Mostafa Gaafar maintains a similar list of fonts for developers with the option to also view the code examples in different color schemes. Handy! (cm)
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.