Collective #715
Inspirational Website of the Week: RRE
This retro-modern design mix is an absolute hit. The scroll interactions and details make it a great web experience.
Get inspired
This content is sponsored via BuySellAds
Northwestern’s Online MS in Information Design and Strategy
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design.
Find out more
A beginner’s guide to CI/CD and automation on GitHub
CI/CD and workflow automation are native capabilities on GitHub platform. Learn how to start using them and speed up your workflows in this article by Rizel Scarlett.
Read it
Hamburger Footer: Reaching the Bottom of Infinite Scroll
Graeme Fulton shares some examples and techniques on how to make footers reachable on infinite scrolling sites.
Check it out
Meet Web Push
WebKit now supports the W3C standards for Push API, Notifications API, and Service Workers to enable Web Push.
Read it
How to pick the least wrong colors
Matthew Ström shares an algorithm for creating color palettes for data visualization.
Check it out
Plasmo Framework
The Plasmo Framework is a battery-packed browser extension framework made by hackers for hackers.
Check it out
Rulex
Rulex is a new, portable, regular expression language.
Check it out
GitNoter
GitNoter is a web application that allows users to store notes in their git repository.
Check it out
Orbit Gallery
Infinite orbit gallery made with THREE.js by Michal Zalobny, based on Luis Bizarro’s Awwwards course. Code can be found .
Check it out
Monorepos in JavaScript & TypeScript
A tutorial on how to use a monorepo architecture in frontend JavaScript and TypeScript with tools like npm/yarn/pnpm workspaces, Turborepo/NX/Lerna, Git Submodules and more.
Read it
Re-evaluating technology
Jeremy Keith writes about the importance of revisiting past decisions. Especially when it comes to the web.
Read it
Interactive Typography Tutorial
An interactive tutorial on typography, including how to pick great fonts, styling text, and typographical design patterns in UI design.
Check it out
Optical Size And Variable Fonts
Robin Rendle gives some insight on optical sizing in variable fonts that helps determine how a font should look at certain sizes.
Read it
System Font Stack
A quick reference for all the basic system font stacks.
Check it out
Google Fonts Pairings
Sarah Daily shares some handpicked Google Fonts pairings that are ready to be used in Figma.
Check it out
A Short History of iOS App Icons
Jim Nielsen shares a chapter he wrote for “The iOS App Icon Book”.
Check it out
Obscure CSS: Implicit List-Item Counter
Learn about the built-in `list-item` counter for ordered lists in this article by Roman Komarov.
Read it
ffmpeg buddy
A great tool to build commands if you use ffmpeg.
Check it out
GraphQL client in the terminal
Build and execute GraphQL queries in the terminal. A project inspired by https://graphiql-online.com.
Check it out
On Creativity: My modest guide to being more creative
Jeff Zych shares some advice on a solid creative process.
Read it
Inspiral Web
The web version of the Inspiral app. Written in TypeScript, using D3.js by Nathan Friend.
Check it out
Redactle
A daily puzzle game where you have to find the title of a random Wikipedia article by guessing words to reveal them on the page.
Check it out
From Our Blog
How to Animate SVG Shapes on Scroll
A short tutorial on how to animate SVG paths while smooth scrolling a web page using Lenis and GSAP’s ScrollTrigger plugin.
Check it out