Collective #554
![C554_WOTW](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_WOTW.jpg?x86293)
Inspirational Website of the Week: Rand
A beautifully fluid web experience with a unique design. Our pick this week.
Check it out![C554_guidereact](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_guidereact.jpg?x86293)
Framer Guide to React
An e-book for learning React and ES6 by Koen Bok.
Read it![C554_sara](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_sara.jpg?x86293)
Sara Soueidan on Applied Accessibility
In this SmashingConf session — a series of macro case studies from real client projects — Sara shares some frustrations, many lessons learned, and a lot of practical tips and tricks for building accessible front-end foundations that you can take and apply in your own projects right away.
Watch it![C537_divi](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/08/C537_divi.jpg?x86293)
The Ultimate WordPress Page Builder
You've never built a WordPress website like this before. Divi is more than just a WordPress theme, it's a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor.
Try it![C554_preactx](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_preactx.jpg?x86293)
Preact X - Virtuous DOM and the Fragments of Suspense
Read about the release of this fast 3kB React alternative with the same modern API, components and Virtual DOM.
Read it![C554_reactthreefiber](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_reactthreefiber.jpg?x86293)
react-three-fiber
Version 3 of the React renderer for Three.js is out.
Check it out![C554_ctrl-z](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_ctrl-z.jpg?x86293)
CTRL-Z Flyer
An amazing interactive party flyer for CTRL-Z made with Three.js. Click and drag to glitch.
Check it out![C554_cssgrid](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_cssgrid.jpg?x86293)
Building a Scrapbook Layout with CSS Grid
A tutorial by Michelle Barker on how to create a scrapbook layout using CSS Grid.
Read it![C554_19](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_19.jpg?x86293)
Inertia.js
Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
Check it out![C554_mozilla](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_mozilla.jpg?x86293)
Video Shorts from Mozilla Developer
Read about the new resource from Mozilla Developer for people who build the web.
Read it![C554_cookie](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_cookie.jpg?x86293)
Same-Site Cookies By Default
Read about Chrome's team clever and bold plan to change the recipe for cookies. By Eric Lawrence.
Read it![C554_chris](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_chris.jpg?x86293)
Terseness tension
Read why Christian Heilmann started not believing in short code as a goal any longer.
Check it out![C554_knockout](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_knockout.jpg?x86293)
Reverse Knockout Text Mask Effect with SVG
A simple approach for knocking-out portions of an image with text.
Read it![C554_cssreset](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_cssreset.jpg?x86293)
A Modern CSS Reset
Andy Bell shares a minimal CSS reset of sensible defaults.
Read it![C554_Evil](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_Evil.jpg?x86293)
The league of evil designers
Linnéa Strid tells the uncomfortable truth about "evil" designers.
Read it![C554_downloadbutton](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_downloadbutton.jpg?x86293)
Download Button Animation
Some amazing animations for download buttons made by Aaron Iker.
Check it out![C554_genie](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_genie.jpg?x86293)
react-genie
A set of React components for animating elements as they scroll into the viewport.
Check it out![C554_Themes](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_Themes.jpg?x86293)
JAMstack Themes
A growing list of themes and starters for JAMstack sites.
Check it out![C554_light](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_light.jpg?x86293)
Interior Visualization
Showcase of illumination possibilities using WebGL and made with PlayCanvas.
Check it out![C554_fbm](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_fbm.jpg?x86293)
fBM
Inigo Quilez tackles a very complex, beautiful topic: Fractional Brownian Motion. It's one of the most popular constructs for procedural modeling of nature.
Read it![C554_Icons](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_Icons.jpg?x86293)
Animated Icons
Add user delight to your site with this free pack of 166 animated icons in JSON (Lottie), GIF, and After Effects formats.
Get it![C554_jake](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_jake.jpg?x86293)
Jake Quits
Jake Albaugh made this site to keep track of how long he has been free of nicotine.
Check it out![C554_Blurry](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2019/10/C554_Blurry.jpg?x86293)
Simulating Depth of Field with Particles using the Blurry Library
Learn how to create a geometrical scene with a depth effect using the Blurry library.
Read it