Smashing Newsletter #266: JavaScript Edition

With free JavaScript libraries, debugging and scrolling elements into view Issue #266 • Tue, Sept. 15, 2020 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, 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) --------------------------------------------------------------- Table of Contents 1. [Accelerating JavaScript In The Browser](#a1) 2. [A React-Powered Node Editor To Extract Business Logic](#a2) 3. [Design Your Own 2D Game](#a3) 4. [A Helpful Debugging Script](#a4) 5. [Scrolling Elements Into View](#a5) 6. [Date Pickers And Other Useful JavaScript Resources](#a6) 7. [Coming Up Next on Smashing](#a7) 8. [New On Smashing Job Board](#a8) 9. [Our Current Most Popular Articles](#a9) --------------------------------------------------------------- #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](. [Accelerating JavaScript In The Browser]( 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](. [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) --------------------------------------------------------------- From our sponsor The Age Of Nanodesign: How Mobile Commerce Is Transforming UX And CX Forever [The Age Of Nanodesign: How Mobile Commerce Is Transforming UX And CX Forever]( Mobile commerce is not only shaping new customer expectations, but it’s also transforming customer experience altogether. As the rules get reinvented, [so does our UX-UI design playbook.]( --------------------------------------------------------------- #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. [Ct.js — a free game editor]( 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, Hugo Giraudel has written a [debugging script]( ([GitHub gist]( to emit information about the system and working environment. [A Helpful Debugging Script]( 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) --------------------------------------------------------------- From our sponsor Complimentary Guidebook: Testing At Every Stage Of Your Design Process [Complimentary Guidebook: Testing at every stage of your design process]( Download this Guidebook to learn how fast user feedback can help you make better design decisions at every stage of your design process. [Get the Guidebook now!]( --------------------------------------------------------------- #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](. [Preventing scroll into view when calling focus()]( 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. [HorizonCalendar]( 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) --------------------------------------------------------------- From our sponsor Find A Job Through Vettery [Complimentary Guidebook: Testing at every stage of your design process]( Ditch the applications and get discovered by one of the thousands of hiring managers looking to grow their companies’ tech teams with great talent (like you). Fill out what you’re looking for in your next role and Vettery will connect you with like-minded companies. Sign up today — [it’s free]( --------------------------------------------------------------- #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 [SmashingConf Workshops]( Meet [Smashing Online Workshops]( on front-end & UX, with Natalia Tepluhina, Christian Nwamba, Aarron Walter, and many others. 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) --------------------------------------------------------------- #8. New On Smashing Job Board - [Front-End Developer]( at tradingtwins GmbH (Cologne) - [Senior Product Designer (UX)]( at GoodHabitz Netherlands BV (Eindhoven) - [Freelance Web Designer (Remote)]( at Adnet Media (Remote) --------------------------------------------------------------- #9. Our Current Most Popular Articles - [Designing With Reduced Motion For Motion Sensitivities]( - [An Introduction To Running Lighthouse Programmatically]( - [How To Build A Blog With Next And MDX]( --------------------------------------------------------------- This newsletter issue was researched and written by Cosima Mielke, Iris Lješnjanin, Rachel Andrew and Vitaly Friedman Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( --------------------------------------------------------------- Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](