Delicious

Discover a breath-taking collection of 200 Futuristic UI design elements to give your project an extra Sci-Fi look! Create realistic dashboards, data displays, and FUI screens arranged with lots of intricate details. This product comprises more than 200 detailed HUD interface elements and abstra...

One thing we can do to help teams code consistently is provide type-checking so that all of the configurable options for a specific component are available while coding. Bryan demonstrates how he does this with TypeScript when working with Astro components.

I did something I should have done a long time ago and added draft functionality to this website.

An open source, dependency free image lightbox with the goal of being accessible. - deoostfrees/Parvus

The IntersectionObserver API is a performance-friendly browser API that allows you to lazy load background images asynchronously, outside of the main thread. This tutorial looks into how to implement it using HTML, CSS, and JavaScript.

View and Interact with PDFs in React, SolidJS, Svelte and JavaScript apps.

Build and interact with node-based user interfaces using Svelte

Creative Technologist Portfolio

🚀 Click the dom to open your IDE and position the cursor at dom's source code location! 点击页面 dom 来打开 IDE 并将光标自动定位到源代码位置! - zh-lx/code-inspector

Generate color palettes from a hex with up to 24 colors! Shift hue, saturation, lightness, and more. 100% free without ads.

Paste JSON and blog posts directly to get accurate localized language translations

A powerful web-based image editor for quick edits and filters

It's not just a shorthand for anchor()

Discover how to enhance accessibility and improve find-in-page search functionality using hidden="until-found" for icon-only buttons and hidden text labels.

StringTune is a cutting-edge JavaScript library designed to deliver high-performance, modular web effects. Whether you're looking to add smooth parallax scrolling, dynamic cursor interactions, progress tracking, or autoplay videos, StringTune empowers developers with a powerful, attribute-driven approach. It simplifies the creation of visually captivating websites while remaining intuitive for both beginner and advanced developers.

With Astro, we can generate most of our site during our build, but have a small bit of server-side code that can handle search functionality using something like Fuse.js. In this demo, we’ll use Fuse to search through a set of personal “bookmarks” that are generated at build time, but return back proper results from a server call.

With Astro, we can generate most of our site during our build, but have a small bit of server-side code that can handle search functionality using something like Fuse.js. In this demo, we’ll use Fuse to search through a set of personal “bookmarks” that are generated at build time, but return back proper results from a server call.

Scott Jehl released a course called Web Components Demystified. This is my full set of notes from Scott's course. You'll still want to take the course on your own, and I encourage you to because Scott is an excellent teacher who makes all of this stuff extremely accessible, even to noobs like me.

Create stunning background patterns for your web projects. Choose from geometric, futuristic, matrix, and code-inspired designs with live customization.

I cannot count the number of times in my career I wished I could run JS in response to CSS property changes, regardless of what triggered them: media queries, user actions, or even other JS. Use cases abound. Here are some of mine: Implement higher level custom properties in components, where one custom property changes multiple others in nontrivial ways (e.g. a --variant: danger that sets 10 color tokens). Polyfill missing CSS features Change certain HTML attributes via CSS (hello --aria-expanded!) Set CSS properties based on other CSS properties without having to mirror them as custom properties The most recent time I needed this was to prototype an idea I had for Web Awesome, and I decided this was it: I’d either find a good, bulletproof solution, or I would build it myself. Spoiler alert: Oops, I did it again

Discover how to create a fully functional tabs component using Alpine.js. Learn key features, accessibility tips, and enhance your web development skills.

Leverage our handcrafted library of free Alpine components, designed with Tailwind CSS, to enhance your web projects.

An online SVG generator for various kinds of grid patterns that can then be used as visual decoration in web designs.

Use modern CSS to create fancy wavy boxes with a few lines of code

Do you write CSS? Do you use custom properties with calculations? Do you want to preview their values while you’re debugging them? What if you could do so by setting just one additional custom property? Without any JS? In this article, I present a native CSS mixin that will output various values as pseudo-elements.

The ::view-transition root overlay captures all clicks … but you can undo that.

Leaflet.js is a free open-source mapping library. We'll look at how to use it to create a basic map with location points of cats up for adoption.

The median web page has grown 8% in one year. How does this affect your Core Web Vitals, your search rank, your business and your users?