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

My product prioritization framework

Sunday, April 28, 2024

Issue 192: How I triage strategy ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Cascade, HTMX, Sponge Furniture, Meaning of Color, Flipbook

Friday, April 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 26 2024 A primer on the cascade and specificity piccalil.

9 Trends From Milan We Can’t Stop Thinking About

Thursday, April 25, 2024

View in your browser | Update your preferences ADPro Even More From Milan Design Week Each year, the design world convenes in Milan—and that applies to us at AD, too. For the third year running, our

Subframe, Attributes vs Properties, Front End Handbook, aspect-ratio, GenAI

Thursday, April 25, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 25 2024 Subframe subframe.com Subframe is a design-to-

Ritmo, Climate Change, Icons & Typefaces, Click Wheel JS, CarPlay

Wednesday, April 24, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 24 2024 Meet Ritmo, Musixmatch's cross-platform

Why Jake Arnold Doesn’t Text Clients

Tuesday, April 23, 2024

View in your browser | Update your preferences We've had a remodel! From now on, you'll be hearing from AD PRO in your inbox twice a week—once with a deep dive into trends to watch and subjects

The secret ingredient to media success

Tuesday, April 23, 2024

PR tips from our founder Nora Wolf In this month's edition is all about *the most important* element of successful media outreach—photography. You may have some photos, but if the backgrounds are

#453: Design Systems

Tuesday, April 23, 2024

Design system generator, types of design systems and how to consolidate design systems. Issue #453 • Apr 23, 2024 • View in the browser Smashing Newsletter Buổi tối vui vẻ Smashing Friends, Ah, design

👨‍🏫 Striking Educational Website Designs + 🏆 Challenge Updates

Tuesday, April 23, 2024

Your UpLabs Design Updates Await! Let's Get Going! 🎨 Firstly, let's congratulate Mariana Gameiro, the winner of our latest 👩‍💻 SheCodes Website Redesign Challenge! Congratulations!! Secondly,

Code Connect, JS Naked Day, Shape of AI, Product Design, CSS Grid Level 3

Tuesday, April 23, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 23 2024 The Right Code for Your Design System figma.com