Every now and again we have to deal with legacy code, wading through dark and eerie sides of the code base, often with a vague, ambiguous and unsettling documentation — if any is provided at all. In such cases, refactoring the component seems inevitable.
30 Seconds Of Code
There are also many other useful resources worth taking a look at:
- Learn Vanilla JS features books, courses, evergreen resources, communities, podcasts all around vanilla JS. A fantastic repository that’s worth keeping close.
Micro-Libraries Under 5K
Single Line Of Code
Vanilla JS Code Challenge
Elijah summarized three different methods for dealing with time and dates. The
Finally, the generic method
toLocaleString lets you pass one or all of the options from the former ones into one method. Elijah built a CodeSandbox playground where you can experiment with the different approaches.
The deep knowledge of a subject really lies in understanding subtle differences between alternate ways of solving the same problem. How is
nodeName different from
tagName? How are the two increment operators different, e.g.
that is a friendly reference site for sorting out just this kind of questions.
Writing Clean, Reusable Code
Perf-Track tracks framework performance at scale. It basically tracks the performance in terms of Core Web Vitals for Angular, React, Vue, Polymer, Preact, Ember, Svelte and AMP — on mobile and on desktop. The data set is currently still from 2020, but it gives us some insights into how well sites with these frameworks perform in the wild. For example, React with Gatsby perform better than the ones created with Create React app.
Tim Kadlec also conducted some research around that, comparing jQuery, Vue.js, Angular and React. The end result: the current crop of frameworks isn’t doing enough to prioritize less powerful devices and help to close the gap between desktop and mobile. These figures might give you at least some context to make a more informed decision.
Standalone Vanilla JS Libraries
- 360-degree view
ThreeSixty.js is a tool for turning an image sprite into 360 degree image.
- Data Visualization
MixItUp 3 provides animated filtering, sorting, insertion and removal.
Choices.js is a configurable
- Image full screen preview
Intense Image Viewer, a library for viewing images in full screen.
- Image gallery
PhotoSwipe, supports touch gestures and Browser History API.
- Masonry Layout
- Media Player
accessible_modal_window by Scott O’Hara.
- Reactive states
Reef, a lightweight library for creating reactive, state-based UI.
InstantSearch.js is an an open-source UI library that lets you build a search interface in your front-end application.
- Sliders and carousels
Siema, Glide, Splide.js and Swipe.js.
- Slideout navigation
Slideout.js is a touch slideout navigation menu for mobile views.
Spin.js dynamically creates spinning activity indicators, no images or dependencies needed, distributed as a native ES module.
- Sticky elements
HC-Sticky makes any element on the page visible while a custom is scrolling. (Also consider using
position="sticky"in CSS instead).
- Sticky navigation
- Table filters and lists
List.js adds search, sort and filters to plain HTML lists and tables.
- Table sorting
Tablesort is a simple sorting component for tables.
Barba.js is a great alternative to parallax, with fluid and smooth transitions between pages.
- Typewriter Text Effect
Typewriter JS generates a typewriter effect.
- Visual sparkles
- WYSIWIG Text Editors