Collective #665
Inspirational Website of the Week: Aristide Benoist
The website of Aristide Benoist is an interaction gem that shines with novel details and unique touches. Our pick this week.
Get inspired
The New Super Fast Way to Build a Website
BeTheme’s new Muffin Builder is like upgrading from a Ford to a Ferrari. You’ll be shocked at how quickly you get your website (or one of Be’s 600+ pre-built websites) to the finish line.
Check it out
Cognitive Bias and the Design Process
A look at the systematic errors in thinking that affects decisions and judgment during the design process. By Jon Yablonski.
Read it
Visually Explained: MVP Transformations
An interactive sandbox that shows the 3 basic matrix transformations that are essential for understanding vertex shaders in Three.js.
Check it out
Best practices for fonts
Learn how to optimize web fonts for Core Web Vitals in this article by Katie Hempenius.
Read it
How to Find and Remove Dead CSS
Justin Searls’ screencast on how to go about identifying and removing unused styles.
Watch it
3D Force-Directed Graph
A web component to represent a graph data structure in a 3-dimensional space using a force-directed iterative layout. It uses Three.js for 3D rendering.
Check it out
New CSS functional pseudo-class selectors :is() and :where()
Adam Argyle explains the new pseudo class selectors :is() and :where() are going to have a big impact.
Read it
Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries
Temani Afif shows how to create a fully responsive hexagon grid made without media queries.
Read it
Getting Started With Webpack
Take a deep dive into what webpack is and how to use it in your development workflow. By Nwani Victory.
Read it
The right tag for the job: why you should use semantic HTML
Sophie Koonin explains why it’s paramount to use semantic HTML.
Read it
Fig
Fig adds VSCode-style autocomplete to your existing terminal.
Check it out
Helix
A “post-modern” modal text editor where the whole design is based around multiple selections as an editing primitive.
Check it out
Disabling a link
Learn how to disable a hyperlink in this article by Scott O’Hara.
Check it out
Assistive Technology: Fixing contrast issues, on your own site and elsewhere
Learn how to fix the insufficient text contrast issue for better accessibility using a browser extension.
Read it
Request Quest
The game is pretty simple: look at some code & decide if it would trigger an HTTP request in the latest stable release of particular browsers.
Check it out
NocoDB
A free and open source Airtable alternative that can turn any SQL database into a smart spreadsheet. Supports MySQL, Postgres, SQL server, MariaDB & SQLite.
Check it out
Why We Should Throw Out React and Pick Up Angular
Sam Redmond shares the largest issues he faced when dealing with a variety of React projects and explains how Angular solves most of them.
Read it
All you need is 5 fonts
Matej Latin shows how you only need 5 fonts for good web typography.
Read it
Kalker
Kalker is a calculator that supports user-defined variables, functions, ambiguous syntax, derivation and integration. It runs on Windows, macOS, Linux, Android, and in web browsers (with WebAssembly).
Check it out
Inspirational Websites Roundup #26
Get updated on the latest trends in web design with this new collection of super creative websites.
Check it out
Trigonometry in CSS and JavaScript: Beyond Triangles
In part three of our series we’ll look at how to create more interesting shapes with trigonometry, and how to draw them with the Canvas API.
Check it out
Thumbnail Hover Effect with SVG Filters
A simple thumbnail hover effect with a caption slide out animation and an SVG filter distortion on the image.
Check it out