Smashing Newsletter: Issue #219

Editorial

We all are creatures of habit. How often have we added a drop-down for country selection just because we could reuse it from our previous project? What about plugging in a “confirm your email” input field to make sure that the customer doesn't make a mistake there — just because we’ve all been doing it for so many years? What about hiding navigation options behind a hamburger icon just because it’s a convention we’ve been following for years?

Living in the era of reusable and modular solutions, we often get stuck with the same solutions being used over and over again. It’s not for the lack of creative spirit or freedom that we do so; it’s just infinitely more time-consuming to come up with something new every time. And, frankly, often it’s not really necessary at all.

But sometimes it is. In general, it’s better to avoid drop-downs when there are more than 10 or fewer than 5 options. For navigation, hiding an important item automatically reduces user engagement, while highlighting it prominently increases its use. This should be quite obvious, but instead of prominently highlighting critical call-to-actions, how often do we tuck them away because it’s simply an established pattern?

Email verification right before the purchase, on yours Smashing Magazine.

On Smashing Magazine, we’ve learned that the infamous “confirm your email” input field doesn’t work as most people copy-paste their email anyway. So when is the better time to ask the customer to verify it? We’ve learned that it’s just before they are about to click that final “Purchase” button, and just after they've clicked it.

What solution have you integrated recently just because it's always been done this way? What if we looked at the interface we so thoroughly craft and question the defaults we've been relying on for so long? Pick a battle to make the experience better by testing things you’ve never tested before. With the wonderful winter season slowing down, it might be a good starting point to boost your engagement and performance in 2019, so let’s use the opportunity to break out of all the broken patterns we’ve got so used to over all these years!

— Happy experimenting!
Vitaly (@smashingmag)

Performance Tips And Tricks
The State Of JavaScript 2018
SmashingConf San Francisco 2019 (Apr 16-17)
Brain-Computer Interfaces In JavaScript
Notifications Done Right
Big List Of Naughty Strings
Assets To Enqueues Converter
Mobile Pattern Inspiration
The Dogs Of CodePen
Upcoming In Smashing Membership

1. Performance Tips And Tricks

Performance often gets overlooked. To make it easier for your team to adopt a performance strategy, Harry Roberts distilled the types of performance testing you can do into three distinct categories. He explains how and when they should be carried out and what the outcomes should be.

Speaking of performance: If the performance of your site is flawed, the issue might be your CSS. As Harry points out, CSS is a potential bottleneck on the network — in itself and for other resources. His tips help you shorten the Critical Path and reduce time to Start Render. Last but not least, a performance-related question a lot of developers ask themselves: inlining or caching? Scott Jehl’s answer is “both please!” His summary of how to use the new caches API and service workers to avoid a longstanding drawback of inlining files is definitely worth diving into. (cm)

2. The State Of JavaScript 2018

The annual State of JavaScript report is here. This year, they surveyed over 20,000 JavaScript developers to find out what they are using, what they are happy with, and what they want to learn. In a nutshell: ES6 is used by 86.3% of developers, TypeScript by 46.7%, React by 64.8%, Vue.js by 28.8%, Electron and React Native by 19-20%. Interesting stats and insights to help you make your way through the JavaScript ecosystem. (cm)

3. SmashingConf San Francisco 2019 (Apr 16-17)

We like breaking out of the predictable patterns. We take pride in putting our heart and soul into crafting friendly, inclusive and practical events, and SmashingConf San Francisco 2019 won’t be an exception. Instead of showing Keynote slides, our speakers will show how they work in a text editor, how they build, design, deploy and play right on stage — exploring front-end & UX techniques.

What to expect? Live debugging, live sketching, live designing and live coding, of course. Check the topics.

Meet SmashingConf, a friendly, inclusive event for people who care about their work. With front-end & UX techniques you can bring back to your team and apply right away.

Some wonderful speakers such as Miriam Suzanne, Chris Coyier and Sara Soueidan are already revealed. And if you need to convince your manager, we’ve prepared a neat Convince Your Boss PDF (417 KB) and a letter template for your manager’s approval. Ah, early birds are now available as well. Off to the tickets!

4. Brain-Computer Interfaces In JavaScript

For the past couple of years, Charlie Gerard has developed a growing fascination for neurotechnology. After acquiring a brain sensor, she started tinkering: She learned to control a Sphero ball with JavaScript, then went on to build a brain keyboard, navigate a 3D space only using thoughts, and, finally, control a mini-drone.

Her experiments gave her a lot of insights into the possibilities and limits of brain-computer interfaces. Now she shares what she’s learned. Her next endeavor: experimenting with raw data and machine learning. The future is here! (cm)

5. Notifications Done Right

Notifications are a double-edged sword. When done right, they add value to the user experience, but when they aren’t purposeful or come at the wrong time, a user might turn away from your product. So what is it that makes a notification useful? The folks at CanvasFlip wrote a comprehensive article in which they share tips on when to use notifications and how to design them to improve the experience.

If you want to dive in deeper, Julia Chen summarized what it takes to develop a meaningful in-app messaging strategy. She also explores how notifications which have gone wrong could be turned into moments of value. Another good read comes from Moses Kim: in “Don’t @ me”, he ponders about the UX of notifications in 2019. A thought-provoking article about our attention being a battlefield and how care and respect need to shine through in order for a notification — and user experience — to be successful. (cm)

6. Big List Of Naughty Strings

Some strings have a high probability of causing issues when used as user-input data. Trying to tweet a zero-width space on Twitter, for example, leads to an internal server error. And although it’s uncommon that a user would actually enter weird unicode characters, an internal server error for unexpected input isn’t a positive experience.

Max Woolf’s Big List of Naughty Strings helps you detect the strings which are likely to cause issues when a user inputs them. Please note that the list is intended to be used only for testing purposes for software you own and manage. As some of the Naughty Strings can indicate security vulnerabilities, using them with third-party software may be a crime. (cm)

7. Assets To Enqueues Converter

If you often create WordPress themes out of HTML templates, you know how boring it is to convert HTML assets to proper WordPress enqueues. Giorgos Sarigiannidis’ Assets to Enqueues Converter changes that. Paste in a list of assets, and the converter will output it to enqueues with just one click. A real timesaver. (cm)

8. Mobile Pattern Inspiration

Which design patterns do really work on mobile? Mobile Patterns features some great examples. The site collects UI/UX patterns from successful apps and categorizes them into categories from onboarding and engagement, to components, navigation, actions, and more. Little details that make a difference. (cm)

9. The Dogs Of CodePen

The Smashing universe might be inhabited by cats, but who said we don’t have a sweet spot for their canine friends, too? Now mix a dog’s cuteness with the mighty powers of CSS, and you get The Dogs of CodePen, a showcase of 12 animated dogs. From Charles the CSS Corgie to a barking little fellow made up of cardboard boxes — imagination has no limits. (cm)

10. Upcoming In Smashing Membership

We recently added our newest book Form Design Patterns to the Smashing Membership, an eBook on designing and coding accessible and progressively enhanced web forms. The eBook is included in the Smashing Membership. Each member makes a difference and gets valuable content from it, too!

Coming up:

📺 Smashing TV: “Introduction To Machine Learning And Artificial Intelligence” with Allan Kent. (Nov 27, 11:00 AM Eastern)
“The State of the Web in South-East Asia” with developers from Indonesia, the Philippines and Singapore. (Dec 4, 11:00 AM Eastern)
“Ethics in Design” with Trine Falbe. (Dec 11, 11:00 AM Eastern)

We are very grateful for the kind and generous support of 1,310 members — so grateful, we’ll be sending a gift to our first Members to celebrate our first anniversary at the end of the month! Your support allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Thank you so much for making it happen!

November 27, 2018 Smashing Newsletter: Issue #219

Previous Issues