Front-end education for the real world. Since 2018.





JavaScript

Topic Archive
  1. What I learned from migrating a Vue project from Vuex to Pinia

    Big refactors and migrations for key infrastructure like global state are not to be taken lightly. Michelle Barker is here to show us how she did exactly that — migrating from Vuex to Pinia for global state in a huge, single page app — using a pragmatic, considered approach.

  2. A guide to destructuring in JavaScript

    Mat “Wilto” Marquis walks us through JavaScript destructuring, the rest syntax and spread syntax in a jam-packed guide.

  3. A handful of reasons JavaScript won’t be available

    It’s always safe to assume JavaScript will not be available, so here’s a quick list of very realistic reasons it won’t be.

  4. Event currentTarget to the rescue

    A really quick tip to hopefully save you from throwing your computer out of the window due to JavaScript events.

  5. A CSS project boilerplate

    For the many folks who ask how I write CSS since removing Sass, this is how I and the Set Studio team do it in 2024.

  6. It feels like React is getting a bit of a kicking recently

    I talk about an apparent attitude shift in attitude towards React in the community and also make some recommendations about decision-making for your projects.

  7. Low-tech Eleventy Categories

    Eleventy has built-in tagging and collections capabilities that I’m riffing on to show you how to build a super simple category system with RSS feeds for each one.

  8. Convert a 2D array into a flat, 1D array of unique items

    Convert a messy multidimensional array into a nice single dimension array of unique items.

  9. Build a fully-responsive, progressively enhanced burger menu

    In this premium tutorial, we’re going to build a burger menu from the ground up, using progressive enhancement, ResizeObserver, Proxy state and of course, super-solid HTML and CSS that pull from the CUBE CSS principles.

  10. Load all focusable elements with JavaScript

    A handy helper function that will load all user-focusable elements inside a parent element for you.

  11. Use a set to remove array duplicates

  12. Build a light and global state system

    Using Proxies and subscriber functions, we can create an observable, reactive state system with a tiny footprint.

  13. Create a user controlled dark or light mode

    Automatic dark and light themes, based on system user-preferences, are handy but in this tutorial, we take that one step further and give our users control.

  14. A progressive disclosure component

  15. Bypass service worker on localhost