Collective #658

Inspirational Website of the Week: Jonas Reymondin
An amazing portfolio that captures Jonas Reymondin’s talent in a perfect way.
Get inspired

Marketing smarts for growing businesses
Grow sales by using the smart tools in our all-in-one Marketing Platform.
Try it for free

Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling
A brilliant article by Jhey Tompkins on “perfect” infinite scrollling and maniputaling time with GSAP.
Read it

How I Built my Blog using MDX, Next.js, and React
An in-depth look at the technical stack behind Josh W Comeau’s blog.
Check it out

Spline Tutorial – Learn How to Create 3D Web Experiences
A very good tutorial by Jakub Duks on how to create amazing 3D web experiences with Spline, the 3D design tool. Check out the demo.
Check it out

Awesome-selfhosted
A list of free software network services and web applications which can be hosted on your own servers.
Check it out

Content-aware image resizing in JavaScript
A JavaScript implementation of the Seam Carving algorithm for content-aware image resizing and objects removal. By Oleksii Trekhleb.
Read it

Scrolling Microinteraction #CodePenChallenge
A supercool scroll animation made by Ryan Mulligan.
Check it out

Identify and Extract Pseudo-Element Selectors from built-in HTML Elements using DevTools
Bramus shows how to get to pseudo-elements of complex elements using DevTools.
Read it

Building a Database Driven Eleventy Site
Learn how to use a database (MySQL) to drive content for an Eleventy site in this tutorial by Raymond Camden.
Read it

Hwoa-rang-gl
A Lightweight WebGL library written in Typescript. By Georgi Nikoloff.
Check it out

Working around the viewport-based fluid typography bug in Safari
Sara Soueidan’s writeup of a Safari bug and the current possible work-around(s).
Read it

Am I FLoCed?
This page will check whether Google Chrome’s experimental new ad-targeting technology is enabled in your browser. Read more about it in this article.
Check it out

Kallithea
Kallithea, a free software source code management system supporting two leading version control systems, Mercurial and Git.
Check it out

Una Kravets shares the latest flexbox debugging features in Chrome DevTools.
Check it out

Data Visualization Guide
A CC-licensed design guide for presentations, reports, and dashboards.
Check it out

Trassel
A beautiful scroll demo by Hakim El Hattab.
Check it out

Building React + Vue support for Tailwind UI – Tailwind CSS
Adam Wathan shares some of the behind-the-scenes efforts that have gone into building React and Vue support for Tailwind UI.
Read it

CSS 3D Print Shop
An incredible CSS printer made by Jhey.
Check it out

Tying scroll offset to shaders
An old demo with Codesandbox by Paul Henschel.
Check it out

The complete guide to working with strings in modern JavaScript
Everything you need to know about creating, manipulating and comparing strings in JavaScript.
Read it

CPC Scrolling with Three.js & GSAP
A very interesting scroll demo based on Jhey’s infinite scroll solution mentioned earlier. By Shunya Koide.
Check it out

Text Outline Animation with Three.js
Learn how to code the text outline effect seen on cornrevolution.com using Three.js with some GLSL.
Check it out

Magnetic 3D Grid Interaction with Content Preview
A grid layout with a magnetic 3D interaction effect and a content preview animation.
Check it out