Collective #559

Gridsome
Gridsome is a free and open source Vue.js-powered framework for building websites and apps that are fast by default.
Check it out
Be Theme Challenge: Pick ONE of their 450+ pre-built websites
Be Theme just added a NEW lot of pre-built websites and dares you to pick just 1. If you like your themes like your coffee: strong, fast, and helps you finish your work in half the time… then you’re going to love Be Theme’s 450+ gallery.
See Be Theme’s NEW pre-built websites
25 Days of CSS Animations: Teaching Myself CSS through Motion Design
Béthy Diakabana shares her fantastic journey of 25 Days of CSS coding.
Read it
Webwide
A free and inclusive discussion community for web designers, developers and makers.
Check it out
Stop Giving Control Hints to Screen Readers
Adrian Roselli explains why you do not need to add instructions for screen readers on how to use standard HTML controls and standard ARIA patterns (widgets).
Read it
TinaCMS
In case you didn't stumble upon it yet: Tina is an open-source site editing toolkit for React-based frameworks - Gatsby and Next.js
Check it out
Build Command-Line Spinners in Node.js
Chidume Nnamdi shows how you can practice your Node.js-terminal skills by building your own CLI spinners.
Read it
Box alignment and overflow
Chen Hui Jing shares a fix for an alignment bug she encountered in one of her recent projects.
Read it
Accessible icon buttons with masks and SVG
Mattia Astorino shows a techique for making accessible icon buttons with SVGs and CSS masks.
Read it
Introduction to NuxtJS
Jeffrey Biless' tutorial on NuxtJS that covers most of the major features.
Watch it
The problem with dropdown fields (and what you should use instead)
The dropdown is often used in a way that makes user input more difficult. Learn about the advantages and disadvantages of using them.
Read it
Svelte Crash Course
A visual introduction to Svelte by Xiaoru Li.
Read it
Image orientation on the web
In this article you will learn about the current status of image orientation on the web, how to correct orientation of images using Node.js, and how browsers will handle this in the future.
Read it
Faster Layouts with CSS Grid (and Subgrid!)
Miriam Suzanne's excellent video tutorials on CSS Grid and Subgrid.
Check it out
Zero
Zero is a small graphics app that uses JavaScript to replicate the functionality of a GPU and uses the terminal to display its rendered output via nodejs' stdout.
Check it out
CoBeats
CoBeats helps you keep and organize all web things like bookmarks, screenshots, videos, files, images and more.
Check it out
Jeroen van Eerden's formula for designing perfectly balanced logos
In this interview Jeroen van Eerden shares very valuable insight into his logo design process.
Read it
Bringing text to life v4
An amazing demo by Kyle Shook.
Check it out
typical
Animated typing in ~400 bytes of JavaScript and zero dependencies.
Check it out
Introducing ECSY: an Entity Component System framework for the Web
Learn all about the new and highly experimental Entity Component System framework for Javascript.
Check it out
TIL - The power of JSON.stringify replacer parameter
Pawel Grzybek shares how he encountered a challenging problem with JSON stringify and how he solved it.
Check it out
Improving form controls in Microsoft Edge and Chromium
Greg Whitworth gives a sneak peak into the refreshed controls that the Microsoft Edge and Google Chrome team worked together on.
Read it
Awesome Demos Roundup #9
A collection of creative coding experiments and innovative demos for your inspiration.
Check it out
How to Create Motion Hover Effects with Image Distortions using Three.js
In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js.
Read it