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.
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)
- A React-Powered Node Editor To Extract Business Logic
- Design Your Own 2D Game
- A Helpful Debugging Script
- Scrolling Elements Into View
- Coming Up Next on Smashing
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.
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.
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)
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)
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.
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 firstname.lastname@example.org and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)
- DevTools For VSCode, Screen Recorder, Date Picker
- CSS Edition
- Waterfalls, Flame Charts and Inline Validation
- Dark Mode, Onboarding and Checkout UX
- SVG Generators, Figma and Accessibility
- Little Helpful Tools and Browser Extensions
- Git, Design Systems, TypeScript, CSS clamp()
- UX Edition
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.