What A Time To Be Smashing!
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
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.
We’ve 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!
See the pen Smashing SF demo by Cassie Evans on CodePen
Live 2.5h-sessions with practical examples, video recordings, and a friendly Q&A. As for our upcoming sessions, we still have a good number of spots available for you — including Smashing Meets, a community-based event to celebrate the holiday season of this interesting year with a few hours of Smashing fun (more on that below)!
| 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 |
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!
Smashing Meets: Dec. 17 (2PM–5PM GMT)
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.
All Things TypeScript, And More!
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. So, what are you waiting for? 😉
eBook
DRM-free, of course.
ePUB, Kindle, PDF.
Included with your Smashing Membership.
Download PDF, ePUB, Kindle.
Thanks for being smashing! ❤️
Smashing Podcast: Tune In And Get Inspired
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!
Smashing Newsletter: Best Picks
With our weekly newsletter, we aim to bring you useful content and share all the cool things that folks are working on in the web industry. There are so many talented folks out there working on brilliant projects, and we’d appreciate it if you could help spread the word and give them the credit they deserve!
Also, by subscribing, there are no third-party mailings or hidden advertising involved, and your support really helps us pay the bills. ❤️
Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you as soon as they can.
Take Your Figma Workflow To The Next Level
Figma’s popularity is growing and with its popularity, the number of plugins, templates, and general tips and tricks that make working with the browser-based design tool even smoother is growing, too. If you’re a Figma user yourself (or are planning to become one), we came across some useful resources that are worth checking out.
One of them is “Awesome Figma Tips,” a collection of small but powerful tips to work faster in Figma, compiled by Trong Nguyen. If the design you’re working on is based on a design system, the Design System Manager plugin might come in handy. It lets you define or update design tokens in one single panel, right from Figma, and you’ll immediately see the changes cascading through your Figma design.
Breakpoints, on the other hand, is a plugin that brings resizable frames to the design tool to help you quickly resize to a breakpoint to create dynamic layouts. Last but not least, once your design is ready and you want to present it to your team or stakeholders, Templatery has got your back with free templates that you can use for your Figma presentations. Little timesavers that take your workflow to the next level.
SVG Squircicle Maker
There are squares, there are circles, and apparently, there are also squircicles! George Francis’s Squircley is a generator of organic shapes for any kind of visuals or background images. You choose the rotation, the scale, the “curvature” and the fill color, and the tool takes care of the rest.
The generator exports SVGs which they can be dropped straight into your HTML/CSS code, or used in your design application. Just a fun little application to use. If that’s not good enough, you can also use GetWaves to generate SVG waves, or Blobmaker to generate some fancy blobs. Happy experimenting!
The Ultimate Guide To UX Research
User experience research is a crucial component of the human-centered design process. But how do you tackle the task and integrate a UX research process into your team’s workflow? To get you up and running, the folks at Maze put together the “Ultimate Guide to UX Research”.
The comprehensive guide dives into the fundamentals of UX research and its various methods. It starts off taking a closer look at what UX research is all about and why it’s the backbone of building good products, dissects different research methods and tools, and shares tips for creating a research plan and establishing a UX research process. A great read for UX designers and product managers alike.
A Complete Guide To Dark Mode On The Web
Dark mode is quickly becoming a user preference with Apple, Windows, and Google having it implemented into their operating systems. But what about dark mode on the web? Adhuham wrote a comprehensive guide to dark mode that delves into different options and approaches to implementing a dark mode design on the web.
To start off, the guide looks at the technical considerations that implementing a dark mode entails, covering different approaches to toggling the themes and how to store a user’s preferences so that they will be applied consistently throughout the site and on subsequent visits. Tips for handling user agent styles with the color-scheme meta tag help avoid potential FOIT situations. Design considerations are also tackled, of course, with valuable tips to get images, shadows, typography, icons, and colors ready for dark mode.
Streamlining The Checkout Experience
56. That’s the number of actions a customer needs to complete to buy an American Airlines ticket. Let’s face it, checkout forms are often too long and a hassle to fill out. In the worst case, customers might even abandon the process. To help us do better, UX Planet published a four-part article series on streamlining the checkout experience back in 2017 which is still gold for everyone working on a checkout flow today.
The first part in the series examines examples where the checkout experience has gone wrong and why. The second part pins down the most important things that will help improve any checkout form experience in 16 easy-to-follow tips. Part three is dedicated to form validation and how to minimize the number of errors a customer might make, while also taking a closer look at differences between B2C and B2B markets that lead to differences in design. Last but not least, part four is all about bank card details, teaching you how to detect and validate a card number and how to deal with the other payment form fields. A long but worthwhile read.
The Maturity Of UX Writing
For the past five years, organizations and designers have turned their focus to the importance of writing. They’ve realized that content can indeed help to design clear and meaningful experiences. But what is UX Writing and why is it that important?
According to the UX Writing Worldwide Report, UX Writing focuses on users and helps create experiences that are relevant to their needs. The survey results are quite interesting and useful because they can help to better understand the role of the UX Writer in companies around the world.
The State Of Developer Ecosystem 2020
What’s the most popular programming language among developers? Which languages do developers plan to migrate to? And which is the most studied language? These are only some of the questions that the State of Developer Ecosystem 2020 report answers.
At the beginning of this year, JetBrains surveyed almost 19,700 developers to identify the latest trends around tools, technologies, programming languages, and other facets of the development world. Some of the key takeaways: Java is the most popular primary programming language, JavaScript the most-used overall programming language, and when it comes to adopting a new language, Go, Kotlin, and Python are at the top of developers’ lists. Apart from hard facts like these, the survey also takes a closer look at open-source contribution, team tools, life habits, and information seeking. Precious insights into what moves the development community.
Designing The Inline Form Validation Experience
Sometimes you come across an article that is already a few years old but that still turns out to be gold. Like Mihael Konjević’s post about inline validation. To find out what’s the best default user experience when it comes to displaying inline validation errors, Mihael analyzed different sites. As his findings show, there’s no consensus on validation handling, but asking the right questions can help you design a bug-free and user-friendly experience.
Mihael suggests a hybrid “reward early, punish late” approach: If the user is entering data in the field that was in a valid state, perform the validation after the data entry. If the user is entering the data in the field that was in an invalid state, perform the validation during the data entry. Different forms will have different needs, of course, so be sure to adjust the approach accordingly.
Tools To Improve Your Site’s Performance
Almost every part of web design and development — from your choice of images to the performance of web servers — add up to how quickly your site will load. Metrics help you uncover bottlenecks that might stay unnoticed when you only test the site on your local setup. We collected some handy tools that make gathering and interpreting such data easy.
To help you assess how well your site performs, Measure by web.dev audits for performance, best practices, SEO, and accessibility and gives you tips to improve the user experience. The tests are run using a simulated mobile device, throttled to a fast 3G network and 4x CPU slowdown. Just like Measure, Lighthouse Metrics is also powered by Lighthouse to give you global performance insights and show you how your site performs from six different regions. Last but not least, Google’s PageSpeed Insights reports on the performance of a page on both mobile and desktop devices based on lab data which is collected in a controlled environment and field data to capture the real-world UX. If you need some more assistance to improve performance, our new performance guide with checklists, articles, and talks has got your back.
JavaScript The Right Way
Learning a new language can be quite a challenge, especially when there are so many tools and frameworks out there to get the most out of it as there are in the case of JavaScript. To prevent you from getting lost in all the possibilities and help you learn the best practices from the ground up instead, William Oliveira and Allan Esquina put together the guide “JavaScript The Right Way”.
Aimed at both beginners as well as experienced developers who want to dive deeper into JavaScript best practices, the guide gathers articles, tips, and tricks from top developers, covering everything from the very basics to code style, tools, frameworks, game engines, reading resources, screencasts, and much more to make a developer’s life easier. The guide is available in eight languages. A gold mine full of JavaScript wisdom.
Tailwind Versus BEM
Tailwind and BEM are two approaches to writing and maintaining CSS. But when to use which? Comparing them is a bit like comparing apples and oranges, as Eric Bailey points out. Based on years of practical experience of using Tailwind and BEM on a variety of projects and scales, he summarized the benefits and drawbacks of each one of them.
Tailwind’s utility CSS approach with pre-written classes makes the implementation very similar across multiple projects and teams and promotes easier cross-project familiarity. However, it does not describe all of CSS’ capabilities, especially newer features. BEM, on the other hand, allows you to describe any user interface component you can think of in a flexible, modular, extensible way, making it a great choice for highly art-directed pieces. The strengths of both approaches lie in different areas, but Eric’s list helps you find the one to master the challenges your project brings along. By the way, have you heard of CUBE CSS yet? The methodology capitalizes on the strength of both approaches and is worth taking a closer look, too.
Interactive Origami Simulation
For years, Origami has been known to be one of the most fun craft art activities worldwide, but have you ever wondered how it would look like on screen? Well, Amanda Ghassaei had exactly this thought and took on the challenge of creating an app that simulates how any Origami crease pattern folds.
With the help of a number of external libraries such as Three.js and jQuery, Origami Simulator was brought to life. This app calculates the geometry of folded (or partially folded) Origami using a dynamic, GPU-accelerated solver and illustrates the physical properties of the folded material. It also supports an immersive, interactive VR mode using WebVR. Impressive!
Enhancing User Experience With CSS Animations
Animations have become a popular way to improve the user experience in the last years. But how do we make sure that our CSS animations and transitions will be meaningful to users and not just decorative eye candy? Stéphanie Walter gave a talk about enhancing UX with CSS animations at the virtual Shift Remote conference back in August. In case you missed it, she summarized everything you need to know in a blog post accompanying the talk.
Starting with a reminder of CSS syntax to build transitions and animations, Stéphanie explores why certain animations work better than others. She shares tips for finding the correct timing and duration to make UI animations feel right and explains why and how animations do contribute to improving the user experience. And since great powers bring along great responsibility, she also takes a closer look at how you can make sure your animations don’t trigger motion sickness. A great reference guide.
A Little Game To Improve Your Pen Tool Skills
How well do you master the Pen tool? If it causes you headaches when working with Photoshop, Illustrator, XD, or other tools, the Bézier Game helps you take your skills to the next level, in a quick and fun way.
After completing the quite self-explanatory tutorial stage, the challenge begins: In the first level, an unassuming (but quite tricky) little car shape is waiting for you to redraw it using the least amount of nodes possible. Each node and each curve that snaps into place reveals a little piece of the rainbow-colored path and brings you a step closer towards becoming a Pen tool master. Don’t despair if you can’t make it on the first try. As with everything, practice makes perfect.
Tips And Tricks For Debugging JavaScript
Bugs happen, and when they happen, it’s good to know how to tackle them in a smart way. If you need to debug JavaScript code, Sean Higgings wrote a handy article to help you find the right debugging approach and master the challenge while adhering to best practices.
Sometimes you might want to log events to the console when debugging JavaScript events. For those occasions, Matthias Kupperschmidt shares a nifty trick that prevents sending and tracking browser events multiple times — perfect for when you want to see how many submit events a form sends out, for example.
Stay Smashing, And See You Next Time!
I hope you found today’s monthly update useful. As the new year approaches us with new challenges, we’re sure that there are many more good times ahead of us. Thanks for sticking around and for your ongoing support — we sincerely appreciate it! Let’s rock this together!
Further 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
(cm, cr, vf, ra, mrn)