Weekly Web Design & Development News: Collective #164

by jQuery Script,

Here's the 164th 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 #164

Amazon Autocomplete JS Plugin

AmazonAutocomplete is a vanilla JavaScript plugin to unlock the full power of the Amazon autocompletion engine right into your search input.

Amazon Autocomplete JS Plugin

[Demo] [Download]

postcss-grid-kiss

This is a PostCSS plugin aiming to replace the 24 new properties brought by CSS Grids with a single one that you immediately understand when you see it.

postcss-grid-kiss

[Demo] [Download]

font-style-matcher

Matches the x-heights and widths of two fonts.

If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths [1]. This tool helps you do exactly that.

font-style-matcher

[Demo] [Download]

ascii-morph

AsciiMorph is a small stand alone javascript library for rendering ascii art and creations into elements, allowing for them to be changed out with a morphing transition.

ascii-morph

[Demo] [Download]

BigTube

BigTube! is a very simple app, it simply takes a YouTube video address and embed it according the window viewport of the browser so instead of maximizing the video in full screen we can watch programming tutorials in a proper manner.

BigTube

[Demo] [Download]

Foxholder

Pack of 15 unique placeholder animations. Just pick the demo you like most and install on your website in 1 minute!

Foxholder

[Demo] [Download]

Playfair

Playfair is a web app for graphing data. It supports MANY different kinds of graphs, can be themed, and is intended to create ready-to-publish graphs with annotations. It was created to allow researchers at the Washington Center for Equitable Growth to assemble publication-ready graphs without having to rely on our (two person) design team. There are a lot of web graphing apps out there, but Equitable Growth has a fairly specific set of needs that required a unique solution.

Playfair

[Demo] [Download]

cyclejs

A functional and reactive JavaScript framework for cleaner code.

cyclejs

[Demo] [Download]

bodymovin

After Effects plugin for exporting animations to svg/canvas/html + js.

bodymovin

[Demo] [Download]

stop-the-bullshit

Blocks websites that publish fake news.

stop-the-bullshit

[Download]

HTML Character Codes

This is the most comprehensive HTML Entity Codes and ASCII charts on the web, featuring ASCII codes, HTML symbol entities, unicode/ISO numbers, dingbats and extended ASCII character codes. This ASCII chart is especially helpful in obtaining W3C XHTML validation due to errors caused by invalid characters.

HTML Character Codes

[Download]

Tilt Hover Effects

Some ideas for hover animations with a fancy tilt effect. Inspired by the hover effect seen on the Kikk 2015 website.

Tilt Hover Effects

[Demo] [Download]

QUBO - Free Font

A simple template of a weekly surf report with an animated SVG graph and a sliding content panel. The layout is powered by flexbox and viewport units. Highly experimental.

QUBO - Free Font

[Download]

Avenue X - Free Font

Avenue X is an experimental display font (OTF). The font takes inspiration from urban design and planning, such as lanes, avenues and highways. Each character is represented with a main "avenue" and a bike /and/ pedestrian lane, which is often seen in urban environments. This is my first try at creating a font, so it is not perfect, but I'd like to get some feedback to improve it. Any form of feedback is welcomed. You can download the OTF-version of the font at the end of this project description.

Avenue X - Free Font

[Download]