Editor's Pick
Accessible Palette: Create color systems with consistent lightness and contrast
Accessible Palette is an app for building color systems with consistent lightness and predictable contrast ratios across color levels.
Accessibility
Accessible Palette: stop using HSL for color systems
The main problems with our old palette were inconsistent perceived lightness of colors (blues and reds are much darker than yellows and greens) and unpredictable contrast ratios between color variants. When picking a color pair, we couldn’t easily tell if it would meet the recommendations from Web Content Accessibility Guidelines (WCAG) and had to manually check the contrast ratio. (Or, most likely… not check.)
In fact, both of these problems were caused by the inherent fault in the HSL color model and lack of support for better alternatives in the design tools. While HSL and HSV are fine choices for choosing a single color, they’re not suitable for building a color system, as they simply transform the RGB model and ignore the complexities of human perception. To see what’s wrong with them and find an alternative, we need to look at color theory and consider other color spaces.
Accessible Palette: Create color systems with consistent lightness and contrast
Accessible Palette is an app for building color systems with consistent lightness and predictable contrast ratios across color levels.
CSS
uiverse - Open-Source UI elements made with CSS
Library of free and customizable UI elements made with CSS or Tailwind. It's all open-source, and it's all free. Try it out to save you many hours spent on building & customizing UI components for your next project.
A quick introduction to CSS @scope
Have you heard about CSS @scope? It’s an upcoming way to scope the reach of your CSS selectors, allowing you to move away from methodologies such as BEM because you no longer need to name those in-between elements.
It’s coming to Chrome 118, so let’s take a closer look.
A Few Interesting Ways To Use CSS Shadows For More Than Depth
We often think of shadows in CSS as something to reach for when we want to add depth to a design. But shadows can be used for more than depth. Let’s experiment with different shadows — two CSS properties and a filter — to make interesting hover effects, different text styles, and even casting shadows on other shadows.
CSS Shadow Effects That Make a Statement
Explore a range of CSS shadow effects in our latest article. Learn to enhance your web design aesthetics and user experience effortlessly.
Animate an SVG shape's inner stroke
I thought it would be cool to have the letters fill in from the sides instead of simply changing the fill colour. Easy, right? Animate the stroke-width from 0 to whichever value covers the full shape.
Native CSS nesting support arrives in the Big Three browsers
This day marks a major milestone in the history of web development. As of today, for the first time ever, all of the Big Three browsers support native CSS nesting right out of the box.
JavaScript
Volta - The Hassle-Free JavaScript Tool Manager
Volta is a hassle-free way to manage your JavaScript command-line tools.
Features:
- Speed ⚡
- Seamless, per-project version switching
- Cross-platform support, including Windows and all Unix shells
- Support for multiple package managers
- Stable tool installation—no reinstalling on every Node upgrade!
- Extensibility hooks for site-specific customization
33 JavaScript concepts every developer should know.
This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a requirement, but a guide for future studies. It is based on an article written by Stephen Curtis and you can read it here.
Konva.js - HTML5 2d canvas js library for desktop and mobile applications
Konva is 2d Canvas JavaScript framework for drawings shapes, animations, node nesting, layering, filtering, event handling, drag and drop and much more.
Next-js-Boilerplate
Boilerplate and Starter for Next.js with App Router and Page Router support, Tailwind CSS and TypeScript. Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode, Netlify, PostCSS, Tailwind CSS, Authentication with Clerk, Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and Turso.
jQuery 3.7.1 Released: Reliable Table Row Dimensions
jQuery 3.7.1 has been released! This release fixes a regression from jQuery 3.6.0 that resulted in rounded dimensions for <tr /> elements in Chrome and Safari. Also, a (mostly) internal Sizzle method, jQuery.find.tokenize that was on the jQuery object was accidentally removed when we removed Sizzle in jQuery 3.7.0. That method has been restored.
React Query Builder
React Query Builder is a fully customizable query builder component for React, along with a collection of utility functions for importing from, and exporting to, various query languages like SQL, MongoDB, JSON and more.
Luxon - A powerful, modern, and friendly wrapper for JavaScript dates and times
Luxon is a library for dealing with dates and times in JavaScript.
- A nice API for working with datetimes
- Interval support (from time x to time y)
- Duration support (14 days, 5 minutes, 33 seconds)
- Parsing and Formatting datetimes, intervals, and durations
- Internationalization of strings using the Intl API
- Detailed and unambiguous math operations
- Built-in handling of time zones
- Partial support for multiple calendar systems
UX
UX Design Patterns for Loading
Loading UX takes careful consideration of both the user's and the system's context to use the appropriate loading pattern. This article is meant to help designers, developers, QAs and product people consider both the user’s and the system’s context before building the appropriate loading pattern.
Miscellaneous
Wordpress selling 100-year domain and hosting plan for $38,000
Content management and hosting outfit Wordpress wants to sell you some legacy technology: a domain name and website it will keep alive for 100 years, for $38,000.