Weekly Web Design & Development News: Collective #561
A roundup of the latest and most popular development & design resources (Javascript & CSS libraries, Code snippets, Web Dev News & Resources, Curated AI Tools, Graphic Design Freebies, etc.) from the past week (Week 28, 2024).
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
ZoomAny.js - Zoom anything, using Vanilla JavaScript. Also supports TypeScript. Live Demo
Bootstrap Forced Colors CSS - Enhances the accessibility of Bootstrap 5 when using with Hight Contrast themes in Windows. Live Demo
LlamaIndex.TS - A data framework for your LLM application.
pigment-css - A zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
stocks - Stock Picker using Next.js, React Server Components, Tailwind CSS, and shadcn/ui components and charts. Live Demo
Shadcn Address Autocomplete - An address autocomplete component built with Google Places API (new) and shadcn/ui components. Live Demo
Parallel DOM - Make your apps faster, parallelize away heavy DOM operations. Live Demo
errx - Zero dependency library to capture and parse stack traces in Node, Bun, Deno and more.
D. - A chill set of React components, built on top of React Aria Components, all about keeping the web accessible. Easy to customize and just copy & paste into your React projects. Live Demo
Scraperr - Self-hosted webscraper.
Shapeshift - A TypeScript library that maps arbitrarily structured JSON objects using vector embeddings.
large-json-node-stream-process - Process large JSON inputs with Streams in Node.js.
Tailwindcss Class Parser - Parsing tailwind classes to JS Objects and vice versa.
custom-file-tree - An HTML custom element for adding file tree visualisation and interaction to your page.
Discover more JavaScript & CSS Libraries →
Developer Tools & Resources
VS Code Mesh Viewer - A 3D mesh viewer for vscode.
Binary Translator - Convert binary to text or text to binary. It also supports decimal, hexadecimal, and octal simply select desired option to convert.
Spectrum - Explore perfect color shades for website design updated in line with trends.
Javascript to Typescript - Convert any Javascript code to Typescript. With AI.
Graphic Design Freebies
Hand-Drawn Arrows - A customizable gallery of hand-drawn arrow SVGs that can be easily copied as SVG code or React components for use in your projects.
6 Glass Icons - 6 Glass Icons For Glassmorphism Design.
PlayStation Controller Icons - This collection features all the iconic buttons and controls from the PlayStation controller controller, including the classic triangle, circle, X, and square face buttons, as well as directional pad icons, trigger buttons (L1, L2, R1, R2), analog sticks, and the PlayStation logo.
Discover more Graphic Design Freebies →
Curated AI Tools
AIEditor - A next-gen rich text editor for AI.
Compare AI Costs - Free LLM API Price Calculator.
Fontic AI - A free AI-powered search engine for Google Fonts.
News & Articles
Sneaky React Memory Leaks: How the React compiler won't save you Link
How to Create a Chrome Extension With Vanilla JavaScript Link
Speeding up the JavaScript ecosystem - Isolated Declarations Link
What's coming next for ESLint Link
JavaScript & CSS Snippets
Text Glitch animation (Clip-path, text-shadow and pseudo-elements)
See the Pen Text Glitch animation (Clip-path, text-shadow and pseudo-elements) by Oscar-Jite (@oscar-jite) on CodePen.
Sticky/Stretching Cursor
See the Pen Sticky/Stretching Cursor by Sikriti Dakua (@dev_loop) on CodePen.
CSS only navigation with rotating text hover effect
See the Pen CSS only navigation with rotating text hover effect by Chris Bolson (@cbolson) on CodePen.
Fluid Grid gallery
See the Pen Fluid Grid gallery by Chris Bolson (@cbolson) on CodePen.
