Weekly Web Design & Development News: Collective #560
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 27, 2024).
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
Splidebox - A lightweight JavaScript library that uses Splide.js and TailwindCSS to create responsive, user-friendly gallery lightboxes in your web projects. Live Demo
Clickdown - A lightweight TypeScript library that delivers instant click feedback for a smoother user experience. Enhance your website’s responsiveness now. Live Demo
fast-npm-meta - A lightweight API server to get npm package metadata, resolve the latest versions on server, and batch multiple package resolutions in one request.
tc-passing - A command that uses TypeScript to only type check previously passing files.
TrexUI - Build website in minutes using TailwindCSS UI components, sections and pages with easy to use customization options. Live Demo
ai-utils - Developer toolkit that makes it simple to build with the Workers AI platform.
CopyFromURL - A user-friendly web tool that allows you to easily extract and copy text content from any webpage. Live Demo
Colors - An open-source color generator. Live Demo
inWind - A Landing Page template developed for global SaaS projects based on Next.js. Live Demo
Astro Mintlify - An open-source documentation template built with Astro, Tailwind, and RadixUI inspired by Mintlify.
WaitlistTemplate - A waitlist template built with JavaScript/HTML/CSS. Live Demo
Discover more JavaScript & CSS Libraries →
Developer Tools & Resources
SnippetEase - A free tool that allows bloggers and developers togenerate beautifully formatted code snippets for their websites and articles.
DesignFoundations - Get the colors, icons, and fonts from any website in seconds. Great for sparking new design ideas.
CSSGradientGenerator - Generate beautiful Gradient Color easily.
WaveGenerator - CSS clip path for containers.
GraphRAG - New tool for complex data discovery now on GitHub.
esm-vscode - A VS Code extension automatically loads types(.d.ts) from esm.sh CDN for JavaScript and TypeScript.
Graphic Design Freebies
iOS 18 App Icon Template - Official resources for creating app icons for iOS and iPadOS, iMessage app icons, and images for promoting in-app purchases.
iOS 18 UI Kit - Official iOS 18 & iPadOS 18 UI Kit for Figma app.
Atmaja Free Display Font - A unique display serif font that seamlessly blends the classic elegance of Garalde fonts.
Discover more Graphic Design Freebies →
Curated AI Tools
AI FAQ Generator - Generate free AI-powered FAQs for any website in seconds.
AI Quiz Generator - AN AI tool that automatically generates a quick, ten-question quiz based on the content of any webpage you provide.
News & Articles
How To Improve Your Microcopy: UX Writing Tips For Non-UX Writers. Link
Ecma International approves ECMAScript 2024: What's new?. Link
New JavaScript Set methods. Link
JavaScript & CSS Snippets
SVG Filter Text Marquees
See the Pen SVG Filter Text Marquees by Matthew Morete (@matthewmorete) on CodePen.
Silky smooth SVG link effects with GSAP
See the Pen Silky smooth SVG link effects with GSAP by Josh Dillon (@jdillon) on CodePen.
Gooey SVG Filter Button
See the Pen Gooey SVG Filter Button by Simon Goellner (@simeydotme) on CodePen.
Hand Drawn Buttons
See the Pen Hand Drawn Buttons by Amit (@ghaste) on CodePen.
