Collective #692

Inspirational Website of the Week: Highvibe Network
A beautiful design with great typographic combinations and wonderful details. Our pick this week.
Get inspired

Instant websites for your clients with Divi Layout Packs
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Check it out

12 Days of Web
A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript.
Check it out

Pixel Patterns
Yuan Chuan explores mathematical functions for generating amazing pixel-based patterns.
Read it

The State of CSS 2021
The results of the annual survey about the latest trends in CSS. It’s also a really cool website!
Check it out

DoodleCSS
A hand doodled CSS/HTML theme made by Chris McCormick.
Check it out

Breaking Out of the Box
Patrick Brosset shows how to use Window Controls Overlay, a new PWA functionality that allows to take advantage of the full surface area of an app.
Read it

Embrace the Platform
Bramus’ answer to what the one thing is that people can do is to make their website better?
Check it out

Turborepo
Turborepo is a high-performance build system for JavaScript and TypeScript codebases.
Check it out


Cognitive Bias and the Design Process
Part 2 of a series that looks at the systematic errors in thinking that affects decisions and judgment during the design process. By Jon Yablonski.
Read it

Wide Gamut 2D Graphics using HTML Canvas
Earlier this year, a proposal for creating canvas contexts using other color spaces was added to the HTML standard. Cameron McCormack writes on the recent support of WebKit for this.
Check it out

Beginner’s guide to Svelte
In this article you’ll learn Svelte’s basic development methods, as well as advanced topics such as state management and animation.
Read it

State of APIs
The RapidAPI developer survey results for 2021.
Check it out

Serve folder for web development
Serve a local folder of files in your browser for easy testing without having to run a server. Check out the repo.
Check it out

Vortex
A sound experience in WebGL where you can listen or compose music, done with Three.js and GSAP.
Check it out

Straw.Page
Straw.Page is the world’s simplest website builder. Create unique websites from your mobile device.
Check it out

HTTP compression
HTTP compression is an important part of the big web performance picture. Leon Brocard covers the history, the current state and the future of web compression.
Read it

Modern for Wikipedia
A beautiful, clean, modern web UI for Wikipedia. Enhance your Wikipedia experience with a redesigned look, new features and customization.
Check it out

Building a JS library from scratch on Frontend Horse
Chris Ferdinandi shows how to build a JavaScript library from scratch.
Check it out

WebGL Water
Evan Wallace made this cool interactive water demo in WebGL.
Check it out

Pixelated Distortion Effect with Three.js
In this coding tutorial, you’ll learn how to recreate an interesting pixel distortion effect using Three.js.
Check it out

Case Study: A Unique Website for Basement Grotesque – Codrops
A look behind the scenes of Basement Grotesque’s website, the open-source typeface of basement studio.
Check it out

Inspirational Websites Roundup #32
Get updated on the latests web design trends with this carefully selected collection of creative websites.
Check it out