Collective #595

Inspirational Website of the Week: PANAMÆRA
An outstanding design with a unique layout that delivers a great experience. Our pick this week.
Get inspired
A Variable Fonts Primer
Learn how to use variable fonts in your projects for improved UI design, long-form reading, and accessibility.
Check it out
Start your own freelance business by becoming a Divi expert
Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.
Start learning now
Cannon-es and use-cannon
Read about Paul Henschel's new library release in this tweet.
Read it
Faux Code Generator
Turn any GitHub Gist into an SVG image.
Check it out
Improving perceived performance with the CSS `font-display` property
Learn how using the font-display
property is a great way to tweak the way your fonts load.

Why Are We Talking About CSS4?
Around the web and within the CSS Working Group, there has been some discussion about whether we should specify a version of CSS — perhaps naming it CSS4. In this article, Rachel Andrew rounds up some of the pros and cons of doing so, and asks for your feedback on the suggestion.
Read it
Transform
A very useful polyglot web converter made by Ritesh Kumar.
Check it out
Broider
A fantastic little tool for designing and exporting lo-fi border decorations. By Max Bittker.
Check it out
Flowfield ART | Generative
A beautiful generative demo by Sikriti Dakua.
Check it out
Why 543 KB keep me up at night
Manuel Matuzovi? argues that we have to be much more considerate of what we're putting online.
Check it out
Learn Box Alignment
A beautifully illustrated and interactive guide to learn all around CSS box alignment including flexbox and grid.
Check it out
Dynamic and async functionality in JAMstack
A tutorial by Deepak Gupta where you'll learn how JAMstack sites handle dynamic content and interactions.
Read it
Rouser
What a cool bubble effect. Can you make it burst?
Check it out
Building our own Chatbot and Cloud AI Service
Learn how to build an AI-powered chatbot with NLP.js and Netlify functions.
Read
MoreToggles.css
A pure CSS library that provides you with a variety of ready-to-use toggles.
Check it out
Free Android Phone Mockups
A set of eight android mockup templates in Photoshop PSD format to showcase your graphic design projects in natural homely environment.
Check it out
Utility Props for Web Components
Read how Ryosuke created a library and design system that adds utility CSS props to web components.
Read it
Caching GraphQL Responses
Abdelrahman Awad's shows how to go about GraphQL caching in this great tutorial.
Read it
TensorFlow 2.0 Complete Course
Learn how to use TensorFlow 2.0 in this full tutorial course for beginners.
Watch it
discount-for-student-dev
This is a great list of discounts on software (SaaS, PaaS, IaaS, etc.) and other offerings for developers who are students.
Check it out
Distorted Link Effects with SVG Filters
A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
Check it out
Awesome Demos Roundup #14
Over the past weeks we've collected super interesting and creative web experiments for your inspiration. These demos will warm your coding soul.
Check it out
UI Interactions & Animations Roundup #4
A fresh dose of inspiration to get you updated on the latest UI animation and interaction trends.
Check it out