jQuery Script Blog

Weekly Web Design & Development News: Collective #571

by jQueryScript,

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 38, 2024).

Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.

JavaScript & CSS

WindowManager - Flexible Web-Based Window System. (Live Demo)

Window Manager

PopupJS - iOS-Style Popups & Notifications. (Live Demo)

PopupJS

toggle-switch.js - Customizable Rounded & Square Toggle Switch Web Component. (Live Demo)

toggle-switch.js

iosStyleCalculator - Create A Responsive iOS-Inspired Calculator In JavaScript/CSS. (Live Demo)

iosStyleCalculator

javascript-confirm - Minimal Stylish Alternative To Browser Confirm Dialogs. (Live Demo)

javascript-confirm

Minecraft-CSS - Minecraft UI themed CSS framework. (Live Demo)

Minecraft UI themed CSS framework

next-saas-starter - A starter template for building a SaaS application using Next.js with support for authentication, Stripe integration for payments, and a dashboard for logged-in users. (Live Demo)

Tinymind - Turn your GitHub into a blog & memo data storage place with one-click Sign in.

NPMChart - Visualize your package npm downloads in a beautiful chart, ready to be shared with your community. (Live Demo)

ts-blank-space - A small, fast, pure JavaScript type-stripper that uses the official TypeScript parser.

pdf-embed - A web component wrapper for Adobe's PDF Embed library.

Kanvas - A lightweight, and fully customizable canvas app. (Live Demo)

DraggableRigidBody - A customizable React component for physics-based drag-and-drop functionality.

bin.js - A JavaScript library that can convert any kind of data into binary that can be restored.

console-strings - String utilities that understand terminal escape sequences.

Discover more JavaScript & CSS Libraries →

Web Dev Tools & Resources

FancyTextGenerator - Easily create unique, cool text effects.

TailwindGridBuilder - Build Tailwind CSS grids effortlessly and master responsive layouts with the Grid Builder tool.

Videotrim: Fast, unlimited and free video trim app that works online and offline.

Screen Ruler - Measure sizes, distances, margins and paddings of any element on any web page.

MDRSS - A markdown to RSS converter written in GO. 

Graphic Design Freebies

Circumicons - The icon library you wish you had found earlier.

Atkinson Hyperlegible - Read Easier With our this free font.

Atkinson Hyperlegible

Pring Display Font - Bamboo-inspired typeface that is suitable for headline and subheadline.

Pring Display Font

Discover more Graphic Design Freebies →

Curated Free AI Tools

Starlens - What do your GitHub stars say about you?

DeckGuru - Get Free AI Insights for Your Pitch Deck.

Discover more Free AI Tools →

News & Articles

SVG Coding Examples: Useful Recipes For Writing Vectors By Hand (Link)

React Native Best Practices (Link)

Astro 5.0 Beta Release (Link)

JavaScript & CSS Snippets

Slice! No JS, no text duplication! (contenteditable)

See the Pen Slice! No JS, no text duplication! (contenteditable) by Ana Tudor (@thebabydino) on CodePen.

SVG Filter Text Marquees

See the Pen Aqua Wave Orb Animation by Daniel Muñoz (@daniel-mu-oz) on CodePen.

Concentric Circle Loader

See the Pen SVG Filter Text Marquees by Matthew Morete (@matthewmorete) on CodePen.

Sparkle Text

See the Pen Sparkle Text by Adam Curzon (@adamcurzon) on CodePen.