Collective #628

The State of CSS Survey
The annual survey about the latest trends in CSS is now open. It’s available in many different languages.
Check it out

Cut Your IT Bills in Half
Deploy more with Linux virtual machines, global infrastructure, and simple pricing. No surprise invoices, no lock-in, and the same price across 11 global data centers. Industry-leading price-performance. Shared, Dedicated, High Memory, and GPU instances plus S3-Compatible Object Storage, Managed Kubernetes, and more. $100 in cloud infrastructure credit.
Try Linode Free

Faster Web App Delivery with PRPL
Learn all about PRPL, a pattern for structuring and serving web applications and Progressive Web Apps (PWAs) with an emphasis on improved app delivery and launch performance.
Read it

CSS Background Patterns
Beautiful pure CSS background patterns that you can actually use in your projects. By MagicPattern.
Check it out

Filmstrip
Filmstrip is an online editor that helps you create CSS powered animations.
Check it out

Vertex shader demo and code
A wonderful distortion vertex shader made by the great folks of Poimandres.
Check it out

Build an Authenticated JAMstack App with Next.js, Airtable, Tailwind CSS, and Auth0
A compact version of a tutorial by James Q Quick based on a great video playlist where you’ll learn how to implement a JAMstack powered project.
Read it

3,000 Hands 3D Shape Pack
A gigantic addition to the Shapefest 3D shapes with many different hand gestures.
Check it out

Converting a jQuery plugin to vanilla JS: Lettering.js
Chris Fernandi demonstrates how to go about turning a jQuery plugin like Lettering.js into vanilla JavaScript.
Watch it

neonpad.io
A glowy plain text editor made by Adam Fuhrer.
Check it out

Webpack 5 Headache
Sindre Sorhus on how Webpack no longer automatically polyfilling Node.js APIs is a huge breaking change and will inconvenience both users and package maintainers.
Read it

Announcing Ionic Vue
Read about the release of Ionic Vue, a native Vue version of Ionic Framework that makes it easy to build apps for iOS, Android, and the web as a Progressive Web App.
Read it

Wouter: A Minimalist Alternative to React Router
Read all about Wouter in this article by Nathan Sebhastian. Wouter is a minimalist routing library that implements only the most used functionality from React Router.
Read it

prodmgmt.world
Browse techniques, frameworks and artifacts to help young product teams move forward.
Check it out

CSSometric
A super fun demo by Ryan Mulligan.
Check it out

Tailwind CSS tutorial
A Tailwind CSS tutorial that covers the installation via a package manager, generating the configuration file, building a website and reducing the final CSS file.
Read it

Bear gets an X-Ray w/ CSS Variables
A super cool Halloween demo powered by CSS and SVG. Made by Jhey.
Check it out

Implementing WebGL Powered Scroll Animations
Learn some fun WebGL by reconstructing the beautiful scroll animations from Robin Noguier’s portfolio in this ALL YOUR HTML episode.
Watch it