Weekly Web Design & Development News: Collective #528
A collection of the latest and hottest design and development resources (Javascript libraries, CSS snippets, Free Graphic Design Resources, etc.) on the web from the last week (Week 47, 2023).
Web Design & Development News: Collective #528
mezr
A lightweight JavaScript library for measuring and comparing the dimensions and distances of DOM elements.
Skeleton Mammoth
A powerful CSS library designed to enhance user experience by displaying UI skeleton loaders, also known as placeholders. It allows you to simulate the layout or elements of a website while data is being loaded in the background.
dom-mutations
Observe changes to the DOM using an async iterable — A nicer API for MutationObserver.
[Download]
request-animation-frames
Use requestAnimationFrame as an async iterable, in any JavaScript environment.
[Download]
Design2Code
An open-source project that converts various web design formats, including sketches, wireframes, Figma, XD, etc., into clean and responsive HTML/CSS/JS code. Just upload your design image, and Design2Code will automatically generate the code for you. It's that simple!
i17n
A lightweight (1.4kB) internationalization library tailored for startups and small-to-medium sized projects, offering a simple and efficient solution for managing translations in a single language without the overhead of a bloated library.
[Download]
to-json-callback
A safe callback to string serializer.
[Download]
Fetch Helper
An easy-to-use interface that allows you to make HTTP requests with ease and simplify the use of fetch.
[Download]
SVG Icons CLI
A command line tool for creating SVG spirte sheets and rendering them with a React Icon component.
[Download]
Malle
A robust edit in place JavaScript library that transforms any text element into an editable field for your edits.
smile2emoji
A simple-to-use JavaScript library that converts text emoticons like :), ^^, :blush: and even Unicode strings into their corresponding emoji images.
Responsive Portfolio Website Liz
Responsive Personal Portfolio Website Using HTML CSS & JavaScript.
React ScrollTrigger Section Navigator
See the Pen React ScrollTrigger Section Navigator by Phillip Gimmi (@phillip-gimmi) on CodePen.
Bouncy Pagination
See the Pen Bouncy Pagination by Adam Kuhn (@cobra_winfrey) on CodePen.
Shimmering animated border gradient effect in CSS
See the Pen Shimmering animated border gradient effect in CSS by Josh Collinsworth (@collinsworth) on CodePen.
Focus
See the Pen Focus by Wakana Y.K. (@wakana-k) on CodePen.
Future Sticky Navigation with Glas Effect
See the Pen Future Sticky Navigation with Glas Effect by Benjamin Koehler (@codesuey) on CodePen.
AI Weekly Digest Issue #32
Get your AI update with AI Weekly Digest Issue #31 for Week 47 of 2023. A curated selection of the most impactful AI news and events worldwide.
[Download]
Generate Perfect Carousels For Major Social Platforms – Postnitro AI
Create optimized social media carousels in seconds with Postnitro's AI-powered editor. No design expertise needed.
Free AI App Icon Generator – Iconlab
App Icon Design Made Simple: Generate 100+ web & mobile app icons in seconds with Iconlab AI.
Sports-Buddy
This project integrates GPT-4 Vision, OpenAI Whisper, and OpenAI Text-to-Speech (TTS) to create an interactive AI system for conversations. It combines visual and audio inputs for a seamless user experience.
Free AI-Generated Avatars for Your Next Design Project – Uifaces
A free online library of AI-generated avatar images that graphic designers can use to create mockups and prototypes. The library contains hundreds of avatars across five style categories: Human, Alien, Cartoon, Abstract, and Roboto.
[Download]
On-Scroll Shape Morph
A demo of a on-scroll shape morph animations with an interactive tilt effect.
