About The

Juggling between three languages on a daily basis, Iris is known for her love of linguistics, arts, web design and typography, as well as her goldmine of … More about Iris

  • Twitter or LinkedIn
With so much going on, it’s nice to have an overview of what’s new at Smashing — all in one place. Read on to find out what’s been keeping the team busy alongside some inspiring community resources that have made it to the top list of our newsletters!

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](https://codepen.io/smashingmag/pen/pobmqyv) by Cassie Evans on CodePen

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. 15Smart Interface Design Patterns, 2020 EditionVitaly FriedmanDesign & UX
Dec. 3 – Dec. 17Building A Design System With CSSAndy BellFront-end
Dec. 17Prototyping, Vue, CSSAdekunle Oduye, Ben Hong & Michelle BarkerSmashing Meets 🎁
Happy Holidays Edition!
Jan. 5 – Jan. 19Build, Ship and Extend GraphQL APIs from ScratchChristian NwambaFront-end
Jan. 19 – Jan. 27Form Design MasterclassAdam SilverFront-end
Jan. 21 – Feb. 5New Adventures In Front-End, 2021 EditionVitaly FriedmanDesign & UX
Feb. 2 – Feb. 10Building Modern HTML EmailsRémi ParmentierFront-end
Feb. 11 – Feb. 26The SVG Animation MasterclassCassie EvansFront-end
Feb. 16 – Feb. 17The CSS Layout MasterclassRachel AndrewFront-end
March 18 – April 1Behavioral DesignSusan & Guthrie WeinschenkDesign & 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)

Smashing Meets Happy Holiday EditionWe 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? 😉

The cover of the new Smashing Book, TypeScript in 50 Lessons
Meet our new book, “TypeScript in 50 Lessons”, a deep-dive to understand what TypeScript is, how it works, and how you can make it work for you. You can jump to the PDF preview (3MB) or get the book right away.

Print + eBook

$ 39.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

$ 19.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with Smashing Podcast — with folks from different backgrounds and so much to share!

1. The Maturity Of UX Writing

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.

The State of Developer Ecosystem 2020

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.

Inline validation in a form

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.

Measure

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”.

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 versus Bem

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.

Interactive Origami Simulation

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.

Enhancing User Experience With CSS Animations

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.

The Bézier Game

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.

JavaScript Debugging

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!

Rock on!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!

Smashing Editorial (cm, cr, vf, ra)