~frontendfocus | Bookmarks (19)

clear filters

github.com ×

GitHub - firecmsco/neat: Neat allows you to build awesome gradients for your website, using 3d shaders

github.com

Neat: Create 3D Animated Gradients Powered by Three.js — After you install the package, you can...
Neat: Create 3D Animated Gradients Powered by Three.js — After you install the package, you can use the interactive editor to create and edit the gradients before grabbing the code in JSON format.
1
GitHub - wintermute-cell/magick.css: magically playful, yet simple styling. all in one file.

github.com

magick.css: A Minimalistic, Mostly Classless CSS Framework — See it in action on the author’s website...
magick.css: A Minimalistic, Mostly Classless CSS Framework — See it in action on the author’s website here. It has a ‘brutalist’ look (helped by the font choice) and is inspired by similar ‘classless’ frameworks you may have seen in recent years.
1
GitHub - github/relative-time-element: Web component extensions to the standard <time> element.

github.com

<relative-time> 4.4: Format Timestamps as a Localized Relative Time — Supply this web component with a...
<relative-time> 4.4: Format Timestamps as a Localized Relative Time — Supply this web component with a standard formatted date and time and it’ll render the right text to suit.
2
3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.

github.com

3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.
2
GitHub - williamtroup/Journey.js: 🚶 A lightweight, easy-to-use JavaScript library to create interactive, customizable, accessible guided tours across your websites or web apps!

github.com

Journey.js: A Zero-dependency Library to Create Interactive & Accessible Guided Tours — The live examples are...
Journey.js: A Zero-dependency Library to Create Interactive & Accessible Guided Tours — The live examples are fairly rudimentary, but the focus on accessibility and built-in support for 51 languages are pluses.
1
GitHub - antonmedv/finder: CSS Selector Generator 🗺

github.com

Finder 3.2: CSS Selector Generator — Given an element, it produces the shortest possible selector that...
Finder 3.2: CSS Selector Generator — Given an element, it produces the shortest possible selector that reaches (solely) that element.
2
GitHub - clhenrick/color-legend-element: A custom element (web component) suitable for use as a legend in data visualizations

github.com

Color Legend Element: A Web Component Providing a Legend in Data Visualizations — Built with Lit/Lit-Element...
Color Legend Element: A Web Component Providing a Legend in Data Visualizations — Built with Lit/Lit-Element and D3.js. You can see various examples here. It’s legen.. wait for it.. dary.
1
GitHub - epicweb-dev/restore-scroll: 🌀 Restore scroll position of elements on page navigation

github.com

restore-scroll: Restore Scroll Position of Elements on Page Navigation — This means not only the <body>...
restore-scroll: Restore Scroll Position of Elements on Page Navigation — This means not only the <body> element’s scroll position can be restored, but any scrollable element.
1
GitHub - devnomic/marquee: A beautiful marquee component for React.

github.com

Marquee: A Beautiful 'Marquee' Component for React — Not just for text, which is what we...
Marquee: A Beautiful 'Marquee' Component for React — Not just for text, which is what we normally associate with the so-called ‘marquee’ effect. You can see some examples here, one of which is a vertical marquee.
1
GitHub - noamr/velvette: Common patterns for CSS view-transitions

github.com

Velvette: Making It Easier to Author CSS View Transitions — A small library that adds some...
Velvette: Making It Easier to Author CSS View Transitions — A small library that adds some features ostensibly missing from the View Transitions API (i.e. temporary classes during transition, unique name generation, and others).
1
GitHub - efstajas/svelte-stepper: 🚶 A simple library for building delightfully animated stepped flows with Svelte.

github.com

Svelte Stepper: Build Animated Stepped Flows with Svelte — You can add and customize props on...
Svelte Stepper: Build Animated Stepped Flows with Svelte — You can add and customize props on the component to easily adjust the number of steps and transition duration, among other features. Simple demo here.
2
GitHub - Trendyol/baklava: Baklava is a design system provided by Trendyol to create a consistent UI/UX for app users.

github.com

Baklava: A Component Design System Based on Native Web Components — This is more of a front-end...
Baklava: A Component Design System Based on Native Web Components — This is more of a front-end framework than a design system and all the components are using native web components, so they can easily be integrated with your existing framework.
1
GitHub - williamtroup/Calendar.js: 📅 A javascript drag & drop event calendar, that is fully responsive and compatible with all modern browsers.

github.com

📅 Calendar.js: A Calendar Control with Drag and Drop — A no-dependencies responsive calendar with full drag...
📅 Calendar.js: A Calendar Control with Drag and Drop — A no-dependencies responsive calendar with full drag and drop support, plus lots of ways to manage events with recurring entries, exporting, holidays, and more.
1
GitHub - andrico1234/autosize-textarea

github.com

Autosize Textarea: A Web Component for Auto-Resizing textarea Elements — This is one way to do...
Autosize Textarea: A Web Component for Auto-Resizing textarea Elements — This is one way to do this, but you could also opt for this pure CSS solution from a few years back.
1
GitHub - stefanjudis/sparkly-text: A small web component for making your text spark.

github.com

✨ sparkly-text: A Small Web Component for Making Text Sparkle — A cute effect that uses animated...
✨ sparkly-text: A Small Web Component for Making Text Sparkle — A cute effect that uses animated SVG under the hood. You can see a few examples in this post.
1
GitHub - chrisguttandin/worker-timers: A replacement for setInterval() and setTimeout() which works in unfocused windows.

github.com

worker-timers: setInterval/setTimeout But for Unfocused Windows — When a tab loses focus, any timers used within...
worker-timers: setInterval/setTimeout But for Unfocused Windows — When a tab loses focus, any timers used within can be throttled. One solution is to use a Web Worker instead.
2
GitHub - pa11y/pa11y: Pa11y is your automated accessibility testing pal

github.com

Pa11y: An Automated Accessibility Testing Tool — Something you can add into your build process.
2
GitHub - alexanderson1993/svg-icons-cli

github.com

SVG Icons CLI: A Command Line Tool for Creating SVG Sprite Sheets — This uses a React...
SVG Icons CLI: A Command Line Tool for Creating SVG Sprite Sheets — This uses a React Component to offer a middle-ground between dropping your SVGs into HTML image elements (less flexible) vs. importing them in your JS bundle (less performant).
1
GitHub - FrigadeHQ/remote-storage: remoteStorage is a simple library that combines the localStorage API with a remote server to persist data across browsers and devices.

github.com

remoteStorage: A Cross Browser/Device Persistence Approach — Combines the localStorage API with a remote server to...
remoteStorage: A Cross Browser/Device Persistence Approach — Combines the localStorage API with a remote server to persist data across browsers and devices – so basically, imagine localStorage but remote. Here’s how the server part runs.
3

~frontendfocus | Bookmarks (19)

Domains