September 15, 2020 Smashing Newsletter: Issue #266

Editorial

Last week was Smashing Magazine’s 14th birthday. I talked to some of the team and some Smashing friends about the great memories they have from the last year as well as the past years of Smashing fun. It’s been a difficult year for everyone, however, we have still managed to make some good memories while bringing our community together virtually.

This week, we are taking a look at JavaScript resources that have caught our eye — in a themed edition of the Smashing newsletter. We’ve been publishing a lot of JavaScript content in the magazine recently, and so I’ve collected some of the most popular pieces in our JavaScript and Frameworks Guide.

However, it can be a challenge to know which frameworks and techniques you’re most interested in reading about, so we’d love to hear from you! Please don’t hesitate to reach out to us via our contact form or on Twitter anytime, and let us know what subjects you’d love to know more about.

— Rachel Andrew (@rachelandrew)

1. Accelerating JavaScript In The Browser
2. A React-Powered Node Editor To Extract Business Logic
3. Design Your Own 2D Game
4. A Helpful Debugging Script
5. Scrolling Elements Into View
6. Date Pickers And Other Useful JavaScript Resources
7. Coming Up Next on Smashing

1. Accelerating JavaScript In The Browser

Once made fun of for its slowness, JavaScript became one of the most optimized and performant dynamic languages out there. But how can you get as much performance out of it as possible in an actual project? Jonathan Dinu shares a roadmap for determining how to speed up your JavaScript application.

At the core of the roadmap is a flowchart to help you assess what type of performance bottleneck you’re dealing with and how to solve it. Jonathan explores various options of leveraging browser native APIs and technologies to accelerate JavaScript execution and gives tips when a solution is beneficial and when it might even hurt performance. A deep dive into streaming data, web workers, GPU, and Web Assembly. (cm)

2. A React-Powered Node Editor To Extract Business Logic

Does your app serve users with very different business logics? Do you frequently create “feature flags” to turn parts of your code on and off for different users? Is your business logic complicated and hard to maintain? If you answered one of these questions with “yes”, you might want to take a look at Flume.

The React-powered node editor and runtime engine helps you build apps that are resilient to changing requirements by modeling your business logic as a JSON graph. Flume’s sleek UI makes it easy to create and edit the graphs and its fast engine runs your logic anywhere — in a browser, on your server, in any JavaScript environment, and, if you’re not using a node server, in any environment that supports JSON. Flume is released under an MIT Open-Source license. (cm)

3. Design Your Own 2D Game

Arcades, shooters, adventures, puzzles — do you have a sweet spot for games? Then Ct.js is for you. The free and open-source game framework and editor lets you create 2D games of any genre while putting your JavaScript skills to the test.

Based on WebGL, the modular library is coupled with a visual editor that helps you bring your game to life. Ct.js is designed to be beginner-friendly, so there are tutorials, editable examples, and demos to tinker with; more advanced users can even add their own JavaScript library to it to expand the possibilities. The documentation features a concise introduction to the world of variables, properties, conditional statements, loops, and operations, making Ct.js a great resource for students who are just taking their first steps in coding. (cm)

4. A Helpful Debugging Script

There are various debugging strategies, but all of them require to understand the environment in which a script is currently running. With homebrew, we can run brew doctor to check the system for potential problems. In hommage to it, Kitty Giraudel has written a debugging script (GitHub gist) to emit information about the system and working environment.

Hugo’s script detects an Internet connection, VPN access, Mac version, nvm, last npm install, whether Docker is running and displays the current Git branch, if it’s clean, how far it is from the main branch, and what is the last commit. A useful little tool to help you with debugging issues — your own, or the ones your colleagues might encounter. (vf)

5. Scrolling Elements Into View

Imagine you are closing a modal dialog or reopening a tab panel, and the browser automatically restores focus on an element and scrolls it into view from the outside of the viewport. What is usually a desirable mechanism of the focus method can turn into an unpleasant experience in cases like these. But, as Šime Vidas points out, there’s a way to prevent this behavior.

The HTML Standard defines a preventScroll option for focus. When set to true, it prevents browsers from scrolling an element into view. preventScroll is supported in Chrome, Firefox, and Edge. A polyfill patches the method in browsers that don’t support it yet.

Now, let’s assume you do want to scroll an element into view — if you have a list of names and want a certain person to be highlighted, for example. Hidde de Vries summarized how to achieve just that with the help of the Element.scrollIntoView() browser API, using a boolean argument and, another option, using an object argument. Handy! (cm)

6. Date Pickers And Other Useful JavaScript Resources

Building a performant, easy-to-use date picker can be a challenge. Luckily, you don’t have to reinvent the wheel — there are some useful free libraries out there to help ease the job. react-dates by the Airbnb team, for example, is easily internationalizable, accessible, and mobile-friendly. And if you’re looking for a specific iOS solution, their HorizonCalendar which supports use cases ranging from simple date pickers all the way up to fully-featured calendar apps is worth taking a closer look at.

Another library that might come in handy when designing a calendar is FullCalendar, covering everything from drag-and-drop events to background events and different time zones. It has over 100 customizable settings and is particularly developer-friendly thanks to its React, Vue, and Angular connectors.

If you’re looking for more libraries to help you tackle those daily JavaScript challenges — apart from date pickers — Cong Ding and Goran Hrovat curate the extensive awesome-javascript repo on GitHub, a list jam-packed with JavaScript libraries, frameworks, and software. One for the bookmarks. (cm)

7. Coming Up Next on Smashing

With Smashing Membership, you get access to goodies, eBooks, discounts and live sessions with experts — all around front-end & UX, for just one coffee a month. Coming up next:

• “All About Icons” with Marc Edwards— October 20 at 11:00 London time

We also have online workshops on front-end & UX — designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.

• Vue.js: The Practical Guide (Sep 17–Oct 2)
• Smart Interface Design Patterns (Sep 22–Oct 6)
• The SVG Animation Masterclass (Oct 8–22)
• Web Performance Masterclass (Oct 13–27)
• Designing for Emotion Masterclass (Oct 28–29)
• Build, Ship and Extend GraphQL APIs (Nov 12–27)

Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.