A Year of Online Events, Books, and Podcasts
For many of us, it didn’t take long to get used to the idea of online conferences and workshops. They may not be as rewarding as in-person experiences are (and always will be), but they have their advantages, too. Online makes it possible for everyone to attend without leaving the comfort of their desks, as well as learn and network at their own individual pace. It’s also more affordable and makes traveling optional, which makes events accessible for young families and people who prefer not to travel.
Smashing has been running online workshops since April this year, and each and every one has been an incredible experience. With wonderful attendees from all over the world coming together to learn together, so many ideas have been brought to life, especially in the live design and coding sessions. Check out this awesome pen created by Cassie Evans at SmashingConf SF just last week. Rock on!
| Dec. 1 – Dec. 15 | Smart Interface Design Patterns, 2020 Edition | Vitaly Friedman | Design & UX |
| Dec. 3 – Dec. 17 | Building A Design System With CSS | Andy Bell | Front-end |
| Dec. 17 | Prototyping, Vue, CSS | Adekunle Oduye, Ben Hong & Michelle Barker | Smashing Meets 🎁 Happy Holidays Edition! |
| Jan. 5 – Jan. 19 | Build, Ship and Extend GraphQL APIs from Scratch | Christian Nwamba | Front-end |
| Jan. 19 – Jan. 27 | Form Design Masterclass | Adam Silver | Front-end |
| Jan. 21 – Feb. 5 | New Adventures In Front-End, 2021 Edition | Vitaly Friedman | Design & UX |
| Feb. 2 – Feb. 10 | Building Modern HTML Emails | Rémi Parmentier | Front-end |
| Feb. 11 – Feb. 26 | The SVG Animation Masterclass | Cassie Evans | Front-end |
| Feb. 16 – Feb. 17 | The CSS Layout Masterclass | Rachel Andrew | Front-end |
| March 18 – April 1 | Behavioral Design | Susan & Guthrie Weinschenk | Design & UX |
Live 2.5h-sessions with practical examples, video recordings, and a friendly Q&A. We hope you’ll find at least one workshop in the list below that fits your projects and career path, and also allows us to help make life at least a lil’ bit easier for you. Also, if there’s anything you feel is missing or would like to see more of, please do get in touch with us on Twitter and we’ll do our best to make it happen!
Holiday Special: Smashing Meets
We are doing a Happy Holiday edition for everyone to join in and listen to talks on topics dedicated to Prototyping, Vue.js and CSS. Join us alongside Adekunle Oduye, Ben Hong and Michelle Barker for some happy networking and interactive design sessions. The event is free for our Members and only 10 USD for anyone else who’d like to join in. Save your spot today!
Pssst. You can become a member and get a ticket to Smashing Meets for free. Plus, you can get access to all digital Smashing Books, webinars and friendly discounts. A membership starts at only 3 USD a month.
TypeScript, Explained Step by Step
As with all of the Smashing books, we’re big fans of shining the spotlight on topics that most folks struggle with. Also, programming books have a tendency to become outdated very quickly, so we aim to publish books that are timeless. “TypeScript in 50 Lessons” is yet another one of them. It provides JavaScript developers with a simple, structured and pragmatic guidance towards TypeScript, and explains how to make sense of it all, step-by-step.
Designed by Rob Draper and written by Stefan Baumgartner, the book is split into 7 chapters across 464 pages. There are plenty of code examples, and in order to follow along, Stefan has set up projects on Code Sandbox and the TypeScript playground, where you can fiddle around on your own and see how the TypeScript’s type system behaves.
Print + eBook
$44.00 — Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.
eBook
$19.00 — Free! DRM-free, of course. ePUB, Kindle, PDF. Included with your Smashing Membership. Get the eBook
The Smashing Podcast Keeps Going
We all have busy schedules, but there’s always time to pop in those earplugs and listen to some music or podcasts that make you happy! We’re soon moving on to our 30th episode of the Smashing Podcast — with folks from different backgrounds and so much to share!
Is there a topic that you’d love to hear and learn more about? Or perhaps you or someone you know would like to talk about a web- and design-related topic that is dear to your hearts? Feel free to reach out to us on Twitter anytime — we’d love to hear from you!
Figma Workflow: Tools Worth Trying
As Figma’s user base grows, so does the ecosystem of plugins and resources built around it. A few recent finds stand out for designers wanting to speed up daily work. Awesome Figma Tips, compiled by Trong Nguyen, collects small but powerful shortcuts for working faster in the tool. For teams building on design systems, the Design System Manager plugin lets you define or update design tokens from a single panel inside Figma, with changes cascading through the design immediately. The Breakpoints plugin adds resizable frames so you can quickly test layouts at different breakpoints. And when a design is ready to present, Templatery offers free templates for Figma presentation decks.
SVG Shape Generators
Not every visual needs to be hand-crafted. George Francis’s Squircley generates organic “squircle” shapes for backgrounds and other visuals. You control rotation, scale, curvature, and fill color, and the tool exports SVGs ready to drop into HTML/CSS or a design application. For similar experiments, GetWaves produces SVG waves while Blobmaker creates freeform blobs.
UX Research, Dark Mode, and Checkout Guides
Maze’s Ultimate Guide to UX Research covers the fundamentals of user research and why it underpins good product design. It walks through different research methods and tools, then offers advice on building a research plan and integrating research into a team’s workflow — a useful read for UX designers and product managers.
For dark mode on the web, Adhuham’s comprehensive guide covers technical and design considerations alike. It examines approaches to theme toggling, storing user preferences for consistent application across visits, and handling user agent styles with the color-scheme meta tag to avoid flash-of-incorrect-theme situations. It also covers preparing images, shadows, typography, icons, and colors for dark themes.
Checkout flows remain a persistent pain point — buying an American Airlines ticket reportedly takes 56 customer actions. UX Planet’s four-part series on streamlining checkout is older but still relevant. The first part looks at checkout failures and their causes; the second offers 16 form-design tips; part three focuses on validation and B2C versus B2B differences; and the final part handles bank card detection and payment field validation.
The State of UX Writing and Developer Ecosystems
UX writing has earned more attention over the past five years as organizations recognize content’s role in designing clear experiences. According to the UX Writing Worldwide Report, the discipline centers on users and creating experiences that meet their needs. Survey results shed light on how the UX writer role is defined across companies globally.
JetBrains’ State of Developer Ecosystem 2020 report surveyed nearly 19,700 developers earlier this year. Findings show Java as the most popular primary language, JavaScript as the most-used overall, and Go, Kotlin, and Python topping lists of languages developers plan to adopt. The survey also covers open-source contribution, team tools, and information-seeking habits.
Form Validation and Performance
Inline validation has no single agreed-upon default, as Mihael Konjević found when analyzing how different sites handle it. His post suggests a hybrid approach: validate after data entry for fields that were in a valid state, and validate during data entry for fields already in an invalid state. Different forms require different adjustments, but the principle offers a starting point.
Site performance depends on everything from image choices to server speed, and metrics help surface bottlenecks hidden during local testing. Measure by web.dev audits performance, best practices, SEO, and accessibility using a simulated mobile device throttled to fast 3G with a 4x CPU slowdown. Lighthouse Metrics also relies on Lighthouse, providing global insights from six regions. Google’s PageSpeed Insights combines lab data from controlled tests with field data for real-world UX on mobile and desktop.
JavaScript, CSS Methodology, and Animation
For developers wading through JavaScript’s many tools and frameworks, JavaScript The Right Way gathers best-practice guidance from top developers. Aimed at beginners and experienced devs alike, it covers basics, code style, tools, frameworks, and resources in eight languages.
Choosing between Tailwind and BEM for CSS maintenance depends on the project, as Eric Bailey explains. Tailwind’s utility classes promote consistency across teams and projects but don’t cover all newer CSS capabilities. BEM offers flexible, modular naming for highly art-directed interfaces. CUBE CSS is another methodology worth exploring that leans on both approaches’ strengths.
CSS animations can enhance UX, but they must be purposeful. Stéphanie Walter’s blog post, accompanying her Shift Remote talk, covers syntax fundamentals, timing and duration tips for natural-feeling motion, and how to avoid triggering motion sickness.
Practical Tools: Origami, Pen Tool, and Debugging
Amanda Ghassaei’s Origami Simulator brings origami crease patterns to the screen. Built with Three.js and jQuery, it calculates folded or partially folded geometry using a GPU-accelerated solver and shows the material’s physical properties, with an immersive VR mode via WebVR.
For designers struggling with the Pen tool, The Bézier Game offers a tutorial followed by challenges that ask you to redraw shapes using minimal nodes — a practical way to build precision skills.
Debugging JavaScript becomes easier with the right approach. Sean Higgings’ article outlines best practices for finding and fixing bugs. When you need to track browser events, Matthias Kupperschmidt shares a trick for logging events to the console without sending or tracking them multiple times — handy for checking how many submit events a form fires.
Closing Out the Year With Smashing
That wraps up the latest monthly update. With a new year bringing fresh challenges, there’s plenty to look forward to in the months ahead. A sincere thank you for your continued support—we appreciate you sticking with us. Here’s to what’s next.
Recommended Reading
- SVG Coding Examples: Useful Recipes For Writing Vectors By Hand
- Useful Email Newsletters For Designers
- How To Design Effective Conversational AI Experiences: A Comprehensive Guide
- Best Of Pro Scheduler Libraries
