Editor's Pick
Interactive CSS Grid Guide
CSS grid is one of the newer additions to CSS. It is unique among CSS layout techniques as it places elements using 2d grid coordinates rather than the default document flow.
CSS
svg-spinners: A collection of 24 x 24 dp SVG spinners (CSS & SMIL)
All spinners are displayed inside a 24 x 24 dp view box. The main content rests inside the live area of 22 dp with a padding of 1dp.
Loadership
LoaderShip is the ultimate CSS-only loader configuration tool that allows you to effortlessly customize and generate stunning loaders for your website. Simply Copy & Paste without any installation or dependency hassle.
CSS 3D Clouds
An experiment on creating 3d-like clouds with CSS3 3D Transforms and a bit of Javascript.
Github repo here.
12 Modern CSS One-Line Upgrades
Sometimes, improving your application CSS just takes a one-line upgrade or enhancement. Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.
Interactive CSS Grid Guide
CSS grid is one of the newer additions to CSS. It is unique among CSS layout techniques as it places elements using 2d grid coordinates rather than the default document flow.
JavaScript
Data Fetching in Vue 3
Data fetching optimization is key for a performant web application. Vue helps by offering many different lifecycle hooks, but finding the best one for each specific type of call is not straightforward.
Datalog in Javascript
Query engines make me feel like a wizard. I cast my incantation: “Give me all the directors and the movies where Arnold Schwarzenegger was a cast member”. Then charges zip through wires, algorithms churn on CPUs, and voila, an answer bubbles up.
How do they work? In this essay, we will build a query engine from scratch and find out. In 100 lines of Javascript, we’ll supports joins, indexes, and find our answer for Arnold! Let’s get into it.
Making Sense of Offline Web Development
This post will walk you through making a web app work offline. It assumes a working knowledge of service workers and IndexedDB, so if those things are new to you, be sure to check out my prior post on offline development here; this post builds heavily on it.
A Conceptual Model of State in Vue 3.4
Getting state and componentization right in the frontend remains one of the biggest challenges as modern web applications increase in complexity. The defineModel macro released with Vue 3.4 provides a streamlined way to think about how to model complex, inter-component state management that still retains strong locality and compartmentalization of data.
Miscellaneous
Dropcap Generation With AI
Initials or ‘dropcaps’ are fun typographic features used on Gwern.net, but there are few fonts suitable for Web use; creating new ones is difficult & expensive. However, AI image generators have revolutionized image generation, and shown promise in typography.
How practical is it for a hobbyist to use generative models to create dropcap initial letters, and use them in a web page? Can we achieve (1) high-quality dropcaps, (2) little total human labor, and (3) acceptable bandwidth use (~100kb)? After working through image & SVG-based workflows, we find that: yes, we mostly can.
Web Browser Engineering
Web browsers are ubiquitous, but how do they work? This book explains, building a basic but complete web browser, from networking to JavaScript, in a couple thousand lines of Python.
Rive - Build interactive animations that run anywhere
Use our familiar design and animation tools with our ground-breaking State Machine to create interactive motion graphics for your products, apps, sites, and games.