Collective #637
Publikováno: 30.11.2020
Building TakeNote * Boop! * Native Aspect Ratio Boxes in CSS * List.js * A tale of four prototypes
The post Collective #637 appeared first on Codrops.

Building TakeNote, a Notes App for Developers With GitHub Sync
Tania Rascia shares how she built TakeNote, a clutter-free web-based notes app for developers.

11 Massive Cyber Monday 2020 deals (up to 94% off!)
Only available for a limited time!

Sick of the stupid jokes? Write your own arbitrary-precision JavaScript math library
James Sinclair shows how to write your own custom JavaScript math library tailored to your specific needs.

Native Aspect Ratio Boxes in CSS thanks to aspect-ratio
Learn all about the new “aspect-ratio” property and how to use it.

Infinite Bad Guy
Infinite Bad Guy is an AI experiment that uses machine learning to seamlessly align thousands of covers of Billie Eilish’s “Bad Guy” into an infinite music video.

Responsive and Configurable SVG Waves
A great playground experiment by Jhey where you can configure and copy some CSS/SVG page section waves. Read the thread here.

List.js
An easy-to-use library for adding search, sort, filters and flexibility to tables, lists and various HTML elements.

Use console.log() like a pro!
Marko Denic shows how to use console.log() for JavaScript debugging.

Andrea Perato
A website made only with Google Docs Spreadsheets.

Accessible, Smooth Scroll-to-top Buttons with Little Code
Ashlee M Boyer shows how to add a scroll-to-top button with smooth scrolling using just a few lines of code.

A tale of four prototypes
Dave Rupert shares some prototypes of ideas he had in the past couple of years.

Beginner’s Guide to Static Site Generators
A helpful guide to the basics of static site generators.

So you wanna create an eco-friendly website
Eric Bailey helps find the answer to the question on how to make a website or web app not-awful.

A Complete State Machine Made With HTML Checkboxes and CSS
In this article, Ryan Bethel adapts the concept of a state machine to HTML and CSS.

The Queen and The Crown
A supercool virtual 3D exhibition.

Back to Basics: Creating a clickable card interface in plain HTML, CSS and JavaScript
A tutorial by Christian Heilmann on how to create a clickable card interface.

naaro
This website has a really cool dragging interaction.

Squeeshy Toy
A fluffy toy prototype made by Christoph Lorenzi with Three.js.

Why it’s good for users that HTML, CSS and JS are separate languages
Hidde de Vries looka at why it is good for people that HTML, CSS and JS are separate languages.

Dashboard UI
Mert Cukuren made this Tailwind CSS Dashboard that supports dark mode.

Building a Svelte Static Website with Smooth Page Transitions
A video tutorial that will show you how to build a static website with Svelte.js and add smooth page transitions using Three.js and GSAP.
The post Collective #637 appeared first on Codrops.