Collective #551
Publikováno: 23.9.2019
The perfect responsive menu * jsonbox.io * rgbShiftSlider * navi * Optimize Images for Web * Resume Builder
Collective #551 was written by Pedro Botelho and published on Codrops.

The perfect responsive menu
A great responsive menu solution that is accessible and keeps your HTML simple, without duplicating markup.

Analyze, diagnose & fix errors in record time
Never wonder how to repro a bug again. Track & debug bugs in record time. Instantly know when errors occur and how to fix them.

Smoother & sharper shadows with layered box-shadows
Read about this wonderfully simple CSS trick that offers fine-tuned control over how shadows are rendered.

Mind the gap, user centered design in large organizations
Luke Wroblewski’s talk about why most “user-centered” design isn’t and how we can address the issues this creates. The slides can be found here.

jsonbox.io
A HTTP based JSON storage that lets you store, read and modify JSON data over HTTP APIs.

A love letter to my website
A declaration of love for personal websites by Tobias van Schneider.

Practical Ways to Write Better JavaScript
Ryland Goldstein shares some of the top methods he uses to write better JavaScript.

Smarter Patterns
Smarter Patterns is an interaction pattern library that provides solutions for common AI challenges.

Variable fonts & the new Google Fonts API
Jason Pamental shows how to use theh new version of the Google Font API for variable fonts.

Learning Machine Learning
A fantastic online comic from Google AI on the amazing world of Machine Learning.

Every website deserves a service worker
Danny Moerkerke argues that every website should work offline and explains what that really means.

CopyMonkey
CopyMonkey is an online app that uses machine learning to mimic your handwriting style like a monkey.

rgbShiftSlider
Fantastic demo of a unique slideshow effect made by Hadrien Mongouachon.

navi
An interactive cheatsheet tool for the command-line that allows you to browse through cheatsheets and execute commands, prompting for argument values.

Why JavaScript Tooling Sucks
Shawn Wang explains why JavaScript tooling is just too hard to use.

overscroll-behavior: contain
A great CSS tip by Aaron Iker: disable parent scrolling when the child scroll container reaches the edge of the scrollport using overscroll-behavior: contain.

80’s
An impressive WebGL demo by Clément Roche.

HSL Slider w/ React + CSS vars
A demo of a beautiful HSL slider made by Jhey.

Two exceptional use cases for the spread operator you may not know of
Enmanuel Durán shows a couple of highly productive and efficient uses for the spread operator.

Cascadia Code
A fun new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal.

Resume Builder
A free resume builder that lets you create a professional resume in minutes.

Optimize Images for Web
An great collection of different ways to optimize images for the web.

An HTML attribute potentially worth $4.4M to Chipotle
Jason Grigsby shares how he found a crucial problem in Chipotle’s online form.

Oversize Studio
Click and hold to see an awesome effect.

Fira Code Google API Demo
Mandy Michael’s experiment with the Google Fonts API for variable fonts.
Collective #551 was written by Pedro Botelho and published on Codrops.