Weekly Web Design & Development News: Collective #345
Here's the 345th 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 #345
Pose Animator
It takes a 2D vector illustration and animates its containing curves in real-time based on the recognition result from PoseNet and FaceMesh. It borrows the idea of skeleton-based animation from computer graphics and applies it to vector characters.
glitch.js
glitch.js is a javascript library that applies interactive glitch & nose effects to images, backgrounds, and text.
NenmorphismCSS
Just another CSS only Bootstrap 4 theme to create flat, elegant, Neumorphic style web pages inspired by the new Neumorphism UI design concept.
Deep waters
An easy-to-compose functional validation system for javascript developers. It allows to easily create custom and reusable validators from the pre-existing ones by using a functional approach and the composition principle.
virtual-webcam
A proof of concept of adding a virtual MediaDevice in a browser extension. Also provides a regular library.
Account
A tool for making short accounts, which are accounts that account for themselves using accounting.
voronoi-diagram
Interactive voronoi diagram in JavaScript.
extract-email-address
Extracts email address from an arbitrary text input.
[Download]
mystical
A small CSS-in-JS library for atomised constraint based design.
- Purpose built and written almost entirely from scratch (except for vendor prefixing).
- Style with a just a css prop, begone styled!
- Atomic classes: Rather than serialising entire CSS objects (like emotion and styled-components), instead, property: value pairs become reusable classes. This means that your application styles scale well with SSR or static site generation, a lot less data will be sent across the wire. Sticking with common theme values especially helps.
- Color scheme support with a prefers-color-scheme media query listener which by default will automatically switch based on users system preferences. The useColorMode hook can be used if you wish the ability to switch it manually.
- Array values for media query breakpoints, e.g. margin: [0, 3].
- A useModifiers hook: A declarative API for handling prop based variations to component styles. It makes it simple to style individual elements within a single component from the outside.
[Download]
swr
SWR is a React Hooks library for remote data fetching:
- Transport and protocol agnostic data fetching
- Fast page navigation
- Revalidation on focus
- Interval polling
- Request deduplication
- Local mutation
- Pagination
- TypeScript ready
- SSR support
- Suspense mode
- React Native support
- Minimal API
- And more
10 Best Date & Timer Picker Components For React & React Native
10 most download date picker components for your next React and/or React Native powered web or mobile application.
10 Best Mobile-friendly Off-canvas Navigation Systems
A constantly updated list of the 10 best JavaScript and CSS based mobile app-style off-canvas navigation menus.
Notion Icons
Create a more vibrant and modern workspace.
Pricing Table With Toggle Button
See the Pen Pricing table with toggle button by black ellis (@blackellis) on CodePen.
Distortion Effect Landing Page
An awesome landing page design in JavaScript & CSS.
Monk Free Font
