Weekly Web Design & Development News: Collective #570
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 37, 2024).
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
Get Screen Size With Pure CSS - Get Real-time Screen Size With Pure CSS: No JavaScript Needed. (Live Demo)
CSS-Only Lightbox Gallery - A minimalist lightbox gallery built using only CSS/CSS3 and Font Awesome icons.. (Live Demo)
Orbit - The first CSS framework designed specifically for radial user interfaces. . (Youtube Video)
TinyJS - A lightweight JavaScript library for dynamically creating HTML elements with deep property assignment. (Live Demo)
Serenity UI - Beautiful UI Components For Next.js Projects. (Youtube Video)
keychain-manager - Keychain/Keystore Access for React Native.
Animated Digits - A React Native component that animates numbers and compact notations (K, M, B, T) with customizable styles and animations. (Youtube Video)
Heximal - An HTML-first interactive document and notebook system.
Shelly - A pure and vanilla shell-like interface for the web.
Picture-in-Picture Video Player - A video player built with React and TypeScript that features Picture-in-Picture (PIP) mode with custom media controls. (Live Demo)
Online-Exam-Platform_DEBI-Project - A modern, responsive online exam platform featuring sign-up/login functionality, timed exams, progress tracking, flagged questions, and result submission. (Live Demo)
Solar System - A visually stunning representation of the solar system, built using React.js. (Live Demo)
Transit - Transit simplifies AJAX request handling using straightforward event attributes in your HTML.
moni.js - A minimal library for DOM manipulation and event handling. Below is a list of available methods with usage examples.
Discover more JavaScript & CSS Libraries →
Web Dev Tools & Resources
fetchfox - A Chrome extension to extract any data from any website.
Tinystatus - Tiny status page generated by a Python script. (Live Demo)
Tailwind Generator - Collection of useful tools and generators for Tailwind to create, design and customize all kind of web components using a graphical editor.
Youform - A form builder that provides UNLIMITED forms and responses for FREE.
jsonify - Effortless CSV & XLSX to JSON Conversion.
Logozanaat - Create Your Simple & Unique logo in seconds.
Trangram - Create Motion Graphics. Fast. Free. Online.
Graphic Design Freebies
Departure Mono - A monospaced pixel font inspired by the constraints of early command-line and graphical user interfaces, the tiny pixel fonts of the late 90s/early 00s, and sci-fi concepts from film and television.
Free iPhone 16 Mockups - Best & Free iPhone 16 / 16 Pro / 16 Pro Max Mockups
Discover more Graphic Design Freebies →
Curated Free AI Tools
AI Face Swap - Swap Faces Online Instantly.
Hailuo AI - High-quality AI Video Generator (Sora Alternative).
Extract Table Data - AI Image to Excel Converter.
AI Youtube Content Analyzer - Get free AI-powered insights for Youtube videos and shorts.
News & Articles
The State of ES5 on the Web (Link)
Two CSS Properties for Trimming Text Box Whitespace (Link)
The Big Difference Between Digital Product And Web Design (Link)
JavaScript & CSS Snippets
Hover to Reveal Password
See the Pen Hover to Reveal Password by Jhey (@jh3y) on CodePen.
Aqua Wave Orb Animation
See the Pen Aqua Wave Orb Animation by Daniel Muñoz (@daniel-mu-oz) on CodePen.
Concentric Circle Loader
See the Pen Concentric Circle Loader by Jon Kantner (@jkantner) on CodePen.
Toggle Angled Lines (Custom)
See the Pen Toggle Angled Lines (Custom) by Alvaro Montoro (@alvaromontoro) on CodePen.
- Prev: Weekly Web Design & Development News: Collective #569
- Next: None
