Editor's Pick
Collection of Dark Patterns and Unethical Design
Discover a variety of dark pattern examples, sorted by category, to better understand deceptive design practices.
CSS
Responsive bar charts in HTML and CSS
The websites we build feature responsive layouts and fluid typography. We employ CSS Flexbox and Grid together with media and container queries to fit in the content. There is not one single fixed presentation, but many possible presentations depending on the content and the reading environment.
In contrast, SVG does not have layout techniques like Flexbox, Grid or even Normal Flow. In SVG, all shapes are absolutely positioned. Text does not wrap automatically. The shapes and text need to be laid out manually by the code that generates the SVG.
@property: Next-gen CSS variables now with universal browser support
The @property rule, part of the CSS Houdini umbrella of APIs, is now fully supported across all modern browsers. This game-changing feature unlocks new levels of control and flexibility for CSS custom properties (also known as CSS variables), making your stylesheets smarter and more dynamic.
Using CSS nesting
CSS nesting is different from CSS preprocessors such as Sass in that it is parsed by the browser rather than being pre-compiled by a CSS preprocessor. Also, in CSS nesting, the specificity of the & nesting selector is similar to the :is() function; it is calculated using the highest specificity in the associated selector list.
This guide shows different ways to arrange nesting in CSS.
JavaScript
Animate.js - Not another JS Animation library
There are probably 1,000 Javascript libraries called "animate.js" but this isn't a Javascript library. What if I told you you don't need a big ass library to do complex animations in the browser. This tiny 1.3 KB function is all you need.
Github repo here.
Image Mage - an open source web tool for remixing and reimagining your photos
Javascript library for image effects / image manipulation. Turn photos into comic book art, abstract paintings, pixel art, and more.
How to compose JavaScript functions that take multiple parameters (the epic guide)
Function composition is beautiful. It lets us create elegant function pipelines. And when everything lines up, the data flows like maple syrup over pancakes. But what happens when the functions don’t line up? What if some of those functions expect more than one argument? What do we do?
A blazing-fast algorithm to transform one DOM tree into another
For me, this topic is a bit like the holy grail of Frontend-Development. Widgets (Components) can have a quite complex markup. State-changes can trigger multiple operations to completely change the current tree.
Depending on their skill-level, developers can manually transform DOM in smart or less smarter ways.
The good news: We can completely automate how DOM-trees get changed with a minimal set of predictable operations. And we can calculate these needed “delta-updates” in a very fast way.
HTML Tricks to Speed up Loading React Apps
Besides many tricks that improve the performance from within a React app, there are also tricks to improve the loading speed from the HTML document in which the React app is embedded. In this post, we will walk through some of these tricks.
UX
Collection of Dark Patterns and Unethical Design
Discover a variety of dark pattern examples, sorted by category, to better understand deceptive design practices.
Miscellaneous
BoilerplateHub - Boilerplates to ship faster
Discover a curated list of boilerplates for your next project on BoilerplateHub. Choose from technologies like Astro, React, Vue, and enhance your project with features like AI, Auth, Database, SEO, and more.