Weekly Web Design & Development News: Collective #467

by jQueryScript,

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.

webc

[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.

theatre

[Demo] [Download]


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

memlab

[Demo] [Download]


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.

great.db

[Demo] [Download]


theme-toggle

A simple component that can help you add different themes to your web app.

theme-toggle

[Demo] [Download]


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.

Nice-DAG

[Demo] [Download]


writer.js

A minimal, clean rich text WYSIWYG editor built on top of iframe and vanilla JavaScript.

writer.js

[Demo] [Download]


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

jsonhero-web

[Demo] [Download]


minitz

A lightweight JavaScript utility script that allows you to transform any date into another timezone and vice versa.

minitz

[Demo] [Download]


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...

novu

[Demo] [Download]


Dynamic Island

An Astro playground for building a "Dynamic Island" for your site.

Automa

[Demo] [Download]


Dashboard chart

Dashboard chart build using HTML, CSS, and JavaScript.

Dashboard chart

[Demo] [Download]


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.

10 Best And Open-source Rich Text Editors For React Applications

[Download]


image-transitions

image-transitions

[Demo] [Download]


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.

Free Social Media Icon Pack

[Download]


Cotton Icons

200+ gently designed icons for you to create great design. Free forever.

Cotton Icons

[Download]


PixelCode

A pixel font designed to actually be good for programming.

PixelCode

[Download]


Monocraft

A programming font based on the typeface used in Minecraft.

Monocraft

[Download]