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
Single File Web Components:
- Framework-independent standalone HTML serializer for generating markup for Web Components.
- 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.
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.
- 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
A simple component that can help you add different themes to your web app.
- 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.
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
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...
An Astro playground for building a "Dynamic Island" for your site.
A framework for generating pdf & epub books from markdown files.
GSAP ScrollTrigger Marquee Page Border
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.
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.
200+ gently designed icons for you to create great design. Free forever.
A pixel font designed to actually be good for programming.
A programming font based on the typeface used in Minecraft.