Editor's Pick
Patterns for Reactivity with Modern Vanilla JavaScript
“Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things.
CSS
The best light/dark mode theme toggle in JavaScript
Learn how to build The Ultimate Theme Toggle for your website using JavaScript, CSS custom properties, local storage and system settings. No framework required!
Using CSS animations instead of JavaScript timers
What if I told you that we can make a timer without using setTimeout, setInterval or requestAnimationFrame? JavaScript is still necessary, but we can create the timer just by toggling some CSS classes.
An Overview of CSS Sizing Units
CSS offers several ways to specify the size or length of elements — some more intuitive than others. CSS units fall into four broad categories:
- absolute units, such as cm and px
- font-relative units, such as em and ch
- viewport-relative units, such as vw and vmin
- container-relative units, such as cqw and cqh
We’ll look at each type of CSS unit in this piece.
HTML
PSA: Add dir="auto" to your inputs and textareas
As someone living in the bubble that is the United States, it can be hard to think externally. But every so often I am reminded there is a world outside of my own. This sounds like a hugely unnecessary pep talk before I lay down something extremely simple. But one small change can be the difference between your app being used by people around the world, or just strictly by people like you. The distinction between these two worlds is something I endlessly struggle to comprehend; luckily, the folks building the fine web browsers we depend on are doing the hard work for us.
JavaScript
TS-Pattern - The exhaustive Pattern Matching library for TypeScript with smart type inference
Write better and safer conditions. Pattern matching lets you express complex conditions in a single, compact expression. Your code becomes shorter and more readable. Exhaustiveness checking ensures you haven’t forgotten any possible case.
Inertia.js - The Modern Monolith
Create modern single-page React, Vue, and Svelte apps using classic server-side routing. Works with any backend.
Inertia is a new approach to building classic server-driven web apps. We call it the modern monolith.
Inertia allows you to create fully client-side rendered, single-page apps, without the complexity that comes with modern SPAs. It does this by leveraging existing server-side patterns that you already love.
Inertia has no client-side routing, nor does it require an API. Simply build controllers and page views like you've always done! Inertia works great with any backend framework, but it's fine-tuned for Laravel.
hls.js - a JavaScript library that plays HLS in browsers with support for MSE.
HLS.js is a JavaScript library that implements an HTTP Live Streaming client. It relies on HTML5 video and MediaSource Extensions for playback.
It works by transmuxing MPEG-2 Transport Stream and AAC/MP3 streams into ISO BMFF (MP4) fragments. Transmuxing is performed asynchronously using a Web Worker when available in the browser. HLS.js also supports HLS + fmp4, as announced during WWDC2016.
HLS.js works directly on top of a standard HTML<video> element.
Editor.js - Free block-style editor with a universal JSON output
Editor.js is a block-style editor for rich media stories. It outputs clean data in JSON instead of heavy HTML markup. And more important thing is that Editor.js is designed to be API extendable and pluggable.
govuk-vue
GOV.UK Vue is a Vue 3 component library for GOV.UK Frontend. It enables you to build Vue apps based on the GOV.UK Design System.
GOV.UK Vue aims to provide all of the GOV.UK Frontend components as Vue components.
Svelte vs React vs Vue vs Angular
This is repo contains some tools to benchmark how Svelte, React and Vue can compete together on some technical requirements:
- Install time
- Build time
- Build size
Patterns for Reactivity with Modern Vanilla JavaScript
“Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things.
UX
vue-rewards
Vue-rewards lets you add micro-interactions to your app, and rewards users with the rain of confetti, emoji or balloons in seconds.
Here is a simple demo and here's the code for the demo.