Weekly Web Design & Development News: Collective #574
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 41, 2024).
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
Oops.js - A JavaScript library that adds advanced undo and redo functionalities to your applications.. (Live Demo)
color-bits - A lightweight, high-performance JavaScript library for parsing and manipulating colors. (Live Demo)
ctree.js - Brighten your console with a festive Christmas tree generated by ctree.js. Add some holiday cheer to your JavaScript projects. (Live Demo)
absolute-masonry - A lightweight JavaScript library for creating responsive, draggable, Masonry-style grid layouts. (Live Demo)
Party Confetti - Create a interactive and customizable confetti animation with JavaScript. Enhance your website with this festive & party touch! (Live Demo)
Notico.js - A simple and lightweight JavaScript notification library to create clear, non-intrusive, sliding alerts on your webpage. (Live Demo)
Auto-Scroll - A tiny JavaScript library that enables automatic scrolling on any scrollable element on your webpage. Perfect for long content, news feeds, and more. (Live Demo)
qrs - Stream data through multiple series of QR codes. (Live Demo)
fetch-in-chunks - A utility for fetching large files in chunks with support for parallel downloads, progress tracking, and request abortion. (Live Demo)
mizu.js - A lightweight html templating customizable engine for all side rendering. No build steps, no config, no headaches. (Live Demo)
littlezipper - Small, fast .zip library using native CompressionStream, suits server and client.
babel-plugin-transform-regex - Babel plugin for the regex package. (Live Demo)
Rosemary.js - A flexible and powerful knowledge management library that serves as a canvas for your ideas and data.
AudioVectorscope - A web-based application that provides real-time visualization of audio signals using a vectorscope display. (Live Demo)
Discover more JavaScript & CSS Libraries →
Web Dev Tools & Resources
KnowledgeTable - An open-source package designed to simplify extracting and exploring structured data from unstructured documents.
QuickPic - Turn SVGs into high resolution PNGs in 2 clicks.
NPM Chart - Search for a package to see its download stats over time.
Tailwind Grid Generator - A tool that helps developers create custom Tailwind grid layouts more easily.
Tenno - A live editable Markdown editor that lets you add cells like Excel.
Graphic Design Freebies
7 Slack Emojis - A set of 7 Slack emojis which can be used for sharing progress updates and reacting to posts.
Piconss - A collection of customizable SVG icons for dark, light and default.
Discover more Graphic Design Freebies →
Curated Free AI Tools
Lumona - Free AI Search Engine with Social Insights.
Blinkshot - Free Real-Time AI Image Generator.
Text Behind Image - Add Text Behind Main Object Of A Photo.
FacePoke - Open-source Real-Time Portrait Transformation.
News & Articles
The Case for Web Components: A Simpler, Framework-Free Future for the Web (Link)
Announcing Deno 2 (Link)
Five Design Patterns to know in Node.js (Link)
CSS nesting improves with CSSNestedDeclarations (Link)
JavaScript & CSS Snippets
Toggle Circular Glitch (I)
See the Pen Toggle Circular Glitch (I) by Alvaro Montoro (@alvaromontoro) on CodePen.
Gooey Cursor
See the Pen Gooey Cursor by Thea (@HighFlyer) on CodePen.
Pixel Per Character Scroll Words with CSS/GSAP
See the Pen Pixel Per Character Scroll Words with CSS/GSAP by Jhey (@jh3y) on CodePen.
Circular reading progress
See the Pen Scroll Animation #04 Circular reading progress by Alberto García Ariza (@turuto) on CodePen.
- Prev: Weekly Web Design & Development News: Collective #573
- Next: None
