Collective #340

Inspirational Website of the Week: Rafael Derolez
A modern website experience with delightful details and smooth interactions. Our pick this week.
Get inspired
Take your WordPress site to the next level
Get the ultimate toolkit for WordPress. Jetpack Professional gives you everything you need to design, secure, and grow your site.
Check it out
react-beautiful-dnd
Accessible drag and drop for lists with React.js with a solid API and natural movement of items.
Check it out
Font-size: An Unexpectedly Complex CSS Property
An interesting article on the trickiness of the font-size property by Manish Goregaokar.
Read it
The Difference Between Explicit and Implicit Grids
Manuel Matuzovic explains the difference between explicit and implicit CSS grids.
Read it
Free Font: Delirium
A charismatic calligraphy typeface by Bruno Fontenelle.
Get it
Shadow DOM: fast and encapsulated styles
Learn why CSS encapsulation is so hard and what's the fastest way to get it in this article by Monica Dinculescu.
Check it out
Roger Water
An endless flying exploration of a generative, infinite open world. A mind-blowing Chrome Experiment by Stefano Maccarelli.
Check it out
Timescale
An open-source time-series database fully compatible with Postgres for fast ingest and complex queries.
Check it out
Performant Web Animations and Interactions: Achieving 60 FPS
Emily Hayman explains all important details involved in making web animations performant.
Read it
gtop
Gtop is a system monitoring dashboard for terminal.
Check it out
Kozmoz
A next-generation bookmarking tool that will organize your favorites automatically. Currently in private beta.
Check it out
Tracking Internal Marketing Campaigns With Google Analytics
Christian Ebernickel gives an advanced masterclass on campaign tracking in Google Analytics.
Read it
deeplearn.js
Deeplearn.js is an open source hardware-accelerated JavaScript library for machine intelligence allowing you to train neural networks in a browser or run pre-trained models in inference mode.
Check it out
Real World Examples of Map, Filter and Reduce in JavaScript
A practical use case for map(), filter(), and reduce() By Tania Rascia.
Read it
How to build your personal brand as a new developer
Some useful tips on building a personal brand as a developer. By Rick West.
Read it
ES Modules in Node Today!
John-David Dalton announces the release of standard/esm, an opt-in, spec-compliant, ECMAScript (ES) module loader that enables a smooth transition between Node and ES module formats with near built-in performance.
Read it
Page speed optimization
One of the many SEO tools by Varvy that gives you very useful insights on page speed.
Check it out
Effective Tensorflow
A repo that collects Tensorflow tutorials and best practices.
Check it out
CSS Utility Classes and "Separation of Concerns"
Adam Wathan shows how to follow a functional CSS approach.
Read it
The Siren: One-page blog/magazine design concept (Sketch)
A clean and elegant Sketch website template designed by Kulikov Ilya.
Check it out
Learn regex the easy way
In case you missed it: Zeeshan Ahmed wrote this great guide to regular expressions.
Read it
Free Font: Tormentor
A lovely handwritten font made by Besttypeco for Pixel Buddha subscribers.
Get it
Morphing Page Transition
A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.
Check it out