Collective #556
Inspirational Website of the Week: Lafaurie Paris
A super-slick and smooth scroll experience with sharp typography and excellent color choices. Our pick this week.
Get inspiredAccentuate Custom Fields for Shopify
The professional solution to extend Shopify with checkboxes, selection lists, images and 15 other field types. Cross-reference objects to create anything you need.
Check it outCascading Cache Invalidation
Philip Walton discusses how some caching best practices can actually backfire, and presents some techniques for solving the problem.
Read itA Guide To New And Experimental CSS DevTools In Firefox
In this article by Victoria Wang you'll learn about all the CSS DevTools in Firefox.
Read itClipping, Clipping, and More Clipping!
Some great new techniques for using CSS clip-path to create interesting effects. By Mikael Ainalem.
Read itTop-level await
Read about top-level await
that makes it possible to use the await
keyword outside of async functions in JavaScript modules.
The Khan Academy 2018 Annual Report Case Study
Sara Soueidan's case study on a recent micro-site project for Khan Academy.
Read itIntroducing Sass Modules
Read all about the new module system feature of Sass in this article by Miriam Suzanne.
Read itThe Obvious UI is Often the Best UI
Some useful insights on which mobile navigation pattern works best.
Read itDesigning a focus style
Zell Liew shares his thoughts on default focus styles and collects some focus styling ideas from around the web.
Read itWhy the Box Model is Integral to Web Design
In this article David Leger explains how the box model works.
Read itdashdash
Dashdash is a new spreadsheet tool with access to business data and APIs through integrations with Crunchbase, LinkedIn, Mailchimp, Google Maps data, easily usable with the fresh templates feature.
Check it outImage to Orange and Blue Stencil
With this little tool by Jon Kantner you can turn images into stencil art of orange and blue.
Check it outMoveable
In case you didn't know about it: Moveable is draggable, resizable, scalable, rotatable, warpable, pinchable, groupable and snappable. A super useful script.
Check it outJavaScript Broughlike Tutorial
A tutorial about writing a broughlike (a small roguelike game similar to 868-HACK or Cinco Paus) from scratch in JavaScript.
Read itTakeNote
Tania Rascia's plain text notes app in progress. Built with React, Redux and TypeScript.
Check it outAnnouncing WebAssembly.sh
After the release of Wasmer-JS, Aaron Turner now introduces WebAssembly.sh, an online WebAssembly Terminal to run WASI modules directly in your browser.
Read itLayout-Fun with CSS Grid
Some fun demos made with CSS Grid by Tobi Reif.
Read itImages done right: Web graphics, good to the last byte
Learn the essentials of image formats in this article by the folks of Evil Martians.
Read itThe box model is not layout
Kilian Valkhof argues that if we keep referring to our imaginary perfect layout system in design tools as "box model", we risk getting the wrong thing.
Read itcursorOS
A Figma-ready collection of original macOS cursors to be used in design projects.
Check it outCreating a Water-like Distortion Effect with Three.js
Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.
Read itInspirational Websites Roundup #9
A hand-picked selection of outstanding website designs from September 2019 for your inspiration.
Check it out