Weekly Web Design & Development News: Collective #467
Here's the 467th Weekly Web Design & Development Collective that aims to introduce fresh new, trendy and easy-to-use web design & development resources (freebies, codes, graphics, tools, inspiration, etc) from the past week. Have fun with it and remember to share with your friends.
Web Design & Development News: Collective #467
webc
Single File Web Components:
- Framework-independent standalone HTML serializer for generating markup for Web Components.
- Compilation tools to aggregate component-level assets (CSS or JS) for critical CSS or client JavaScript.
- Opt-in to scope your component CSS using WebC’s built-in CSS prefixer.
- Streaming friendly.
- Shadow DOM friendly.
- Async friendly.
- The .webc file extension is recommended (not a requirement)—you can use .html.
[Download]
theatre
An animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.
memlab
An E2E testing and analysis framework for finding JavaScript memory leaks and optimization opportunities.
- Browser memory leak detection - Write test scenario with puppeteer API, memlab auto diffs JS heap snapshots, filters out memory leaks, and aggregates results.
- Object-oriented heap traversing API - Supports self-defined memory leak detector and programmatically analyzing JS heap snapshots taken from Chromium-based browsers, Node.js, Electron.js, and Hermes
- Memory CLI toolbox - Built-in toolbox and APIs for finding memory optimization opportunities (not necessarily memory leaks)
- Memory assertions in Node.js - Enables unit test or running node.js program to take a heap snapshot of its own state, do self memory checking, or write advanced memory assertions
great.db
A powerful, human-friendly database library for JavaScript using SQLite. A completely different approach is taken to create this library which strives to change the way we use SQLite in JavaScript forever.
theme-toggle
A simple component that can help you add different themes to your web app.
Nice-DAG
A lightweight javascript library, which is used to present a DAG diagram. Essentially, it uses dagre to layout nodes and edges on a DAG diagram. However, the functions that Nice-DAG gives are far beyond that of dagre.
- Auto-Layout. You don't need to give fix position for each node and edge.
- Sub DAG support. A hierarchical node set (without position) can be mapped to a view with Sub-DAGs.
- Easy customization. You can control rendering completely by the interfaces nice-dag exposes.
- Framework agnostic. You can easily apply it to any UI library.
- Support scaling. The DAG diagram can be zoomed in/out.
- Support Mini-Map. For large diagram, you can navigate the position via the mini-map.
- Powerful Dragging & Dropping. Both nodes and edges can support DnD. Moreover, the page can auto-scroll and the size can be auto scaled.
- Rich API. You can easily use the API to control the node and edge.
writer.js
A minimal, clean rich text WYSIWYG editor built on top of iframe and vanilla JavaScript.
jsonhero-web
JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features.
- View JSON any way you'd like: Column View, Tree View, Editor View, and more.
- Automatically infers the contents of strings and provides useful previews
- Creates an inferred JSON Schema that could be used to validate your JSON
- Quickly scan related values to check for edge cases
- Search your JSON files (both keys and values)
- Keyboard accessible
- Easily sharable URLs with path support
minitz
A lightweight JavaScript utility script that allows you to transform any date into another timezone and vice versa.
novu
The open-source notifications infrastructure. A fully-featured microservice to send SMS, E-mail, Slack and Push notifications. Embeddable notification center for React with real-time updates, content management, and much more...
Dynamic Island
An Astro playground for building a "Dynamic Island" for your site.
Dashboard chart
Dashboard chart build using HTML, CSS, and JavaScript.
booker
A framework for generating pdf & epub books from markdown files.
[Download]
Progress Button
See the Pen Progress Button by Taylon, Chan (@tin-fung-hk) on CodePen.
GSAP ScrollTrigger Marquee Page Border
See the Pen GSAP ScrollTrigger - Marquee Page Border by Ryan Mulligan (@hexagoncircle) on CodePen.
Rotating border
See the Pen Rotating border 3 by Chokcoco (@Chokcoco) on CodePen.
Multi Direction Slider Gallery (Pure CSS)
See the Pen Multi Direction Slider Gallery (Pure CSS) by Chris Neale (@onion2k) on CodePen.
10 Best And Open-source Rich Text Editors For React Applications
10 best libraries for rich-text editing in React.js application. All of them are open source. Enjoy.
[Download]
image-transitions
Free Social Media Icon Pack
7 best and open-source JSON viewer components for Vue.js that would help you to display JSON data intuitively.
[Download]
Cotton Icons
200+ gently designed icons for you to create great design. Free forever.
[Download]
PixelCode
A pixel font designed to actually be good for programming.
[Download]
Monocraft
A programming font based on the typeface used in Minecraft.
[Download]