Weekly Web Design & Development News: Collective #193

Here's the 193rd 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 #193

flubber

Some best-guess methods for smoothly interpolating between 2-D shapes.

Let's say you want to animate between two SVG paths or canvas shapes in a visualization. If you plug in their coordinates or their path strings to something like d3.transition(), it might work if the shapes correspond to each other really well - for example, turning a triangle into a different triangle. But once your shapes don't really correspond, you'll get unpredictable results with weird inversions and sudden jumps.

The goal of this library is to provide a best-guess interpolation for any two arbitrary shapes (or collections of shapes) that results in a reasonably smooth animation, without overthinking it.

[Download]

billboard.js

billboard.js is a re-usable easy interface JavaScript chart library, based on D3 v4+.

[Demo] [Download]

country-flags

SVG and PNG renders of all countries' flags.

[Demo] [Download]

CaoMei

Just another Font Awesome like icon set.

[Demo] [Download]

staticrypt

Based on the crypto-js library, StatiCrypt uses AES-256 to encrypt your string with your passphrase in your browser (client side).

StatiCrypt generates a static, password protected page that can be decrypted in-browser: just send or upload the generated page to a place serving static content (github pages, for example) and you're done: the javascript will prompt users for password, decrypt the page and load your HTML.

[Demo] [Download]

cell

A self-constructing web app framework powered by a self-driving DOM.

1. Easy to learn: There is NO API to learn. You just need to remember 3 rules.
2. Easy to use: You just need a single HTML file with a single <script src> line.
3. Easy to read: Write an entire app as a piece of JSON-like, human-readable data structure.
4. Easy to integrate: Integrating into an existing website is as simple as copy and pasting a Youtube embed code.
5. Easy to reuse: Everything is powered by stateless functions instead of classes and objects, making it extremely modular.
6. Easy to maintain: "Development workflow" doesn't exist. No NPM, No Webpack, No Babel, just vanilla Javascript and 100% based on web standards.

[Demo] [Download]

realprogress.js

It's a very light (902 bytes) JavaScript library providing website loading progress.

[Demo] [Download]

datalist-polyfill

This is a minimal and library dependency-free vanilla JavaScript polyfill for the awesome datalist-functionality, that will bring joy and happiness into our lives :-)

[Demo] [Download]

ShapeShifter

Shape Shifter is a web-app that simplifies the creation of icon animations for Android, iOS, and the web.

[Demo] [Download]

windows-framer-toolkit

The official Microsoft FramerJS Toolkit.

[Demo] [Download]

scrollbot

Custom scrollbar using pure javascript. scrollbot doesn't use mousewheel to create the scrolling effect, instead it hides the natural scrollbar. So properties like scrollTop can be used on the scrollElement. Other plugins that uses the scroll function can also be used with scrollbot.

[Demo] [Download]

jss

A simple JavaScript library for retrieving and setting CSS stylesheet rules.

[Demo] [Download]

Microsoft Fluent Material

The new microsoft fluent design, with his layer.

[Demo] [Download]