Smashing Newsletter #277: DevTools For VSCode, Screen Recorder, Date Picker

With JAMStack, Devtools for VSCode, date picker and screen recorder and annotation tool. Issue #277 Tue, Dec. 1, 2020 View in the browser 💨

Smashing Newsletter

Dear Friend,

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.

Metrics Mix Overview
A healthy business metrics mix includes everything from time to first ashare to customer support inquiries. Check as plain text.

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)


Table of Contents

1. Become A Jamstack Explorer
2. Open-Source Screen Recorder And Annotation Tool
3. New Front-End & UX Workshops
4. A Human-Friendly Date Picker
5. DevTools For VSCode Extension
6. Monospaced Fonts For Coding
7. New On Smashing Job Board
8. Our Current Most Popular Articles

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.

Jamstack Explorers

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.

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.

Smashing Online Events
Live and interactive 2.5h-sessions with your favorite space cat!

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.

Microsoft Edge Developer Tools for Visual Studio Code

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)


From our sponsor

Help Visitors Navigate Your Website With Preflect

Preflect
Every website needs to survey visitors. Blogs and ecommerce sites alike use the resulting first-party data to make informed decisions that grow their businesses. Create free surveys today — in 5 minutes or less.


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.

Coding Fonts

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)


7. New On Smashing Job Board


8. Our Current Most Popular Articles


This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf), Rachel Andrew (ra) and Iris Lješnjanin (il).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook


unsubscribe update preferences view in your browser


Older messages

Smashing Newsletter #276: CSS Edition

Tuesday, November 24, 2020

Preventing layout shifts with CSS Grid, clamp(), custom list markers and fixed haders and jump links with scroll-margin. Issue #276 • Tue, Nov. 24, 2020 • View in the browser 💨 Smashing Newsletter Dear

Making Sense Of TypeScript, in 50 Lessons.

Tuesday, November 17, 2020

Our new book on TypeScript, how it works, and how you can make it work for you. With code walkthroughs, hands-on examples and common gotchas. TypeScript in 50 Lessons: TypeScript, from start to finish.

Smashing Newsletter #275: React Rendering, JavaScript Debugging, CSS and SVG

Tuesday, November 17, 2020

With server-side rendering, JavaScript debugging, free CSS/SVG background patterns and how to avoid user frustrations. Issue #275 • Tue, Nov. 17, 2020 • View in the browser 💨 Smashing Newsletter Dear

New Smashing Workshops on Front-End & UX (Jan–Feb 2021)

Friday, November 13, 2020

Just in: new online workshops for 2021 on front-end, SVG animation, HTML email and CSS. With Cassie Evans, Vitaly Friedman, Rachel Andrew and Adam Silver. New online workshops on front-end, HTML emails

Smashing Newsletter #273: Waterfalls, Flame Charts and Inline Validation

Tuesday, November 3, 2020

With performance articles and tools, data visualization, patterns and designing a better inline form validation. Issue #273 • Tue, Nov. 3, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend,

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏