Collective #256

How To Develop A Chat Bot With Node.js
A great tutorial by Slobodan Stojanović on how to create a chat bot with Node.js
Check it out
Materialette
A little program for easily getting Google's material design colors. Made by Mike Schultz.
Check it out
CSS Icon
A nice project and web app by Wenting Zhang: CSS only icons that you can customize easily.
Check it out
Creating the Periodic Table with Grid CSS
Justin Avery shows how to put CSS Grids to use and build the periodic table.
Check it out
@supports will change your life
A great article by Charlotte Jackson where she shows the power of @supports and how to use it.
Read it
Free Font(s): Scamper & Scamper Snowy
A gorgeous font duo of handwritten holiday fonts designed by Missy Meyer.
Get it
JavaScript for Web Designers: DOM Scripting
Chapter 5 of Mat Marquis' new book, JavaScript for Web Designers, on DOM scripting.
Read it
Building a Website Performance Monitor
Eduardo Bouças shows how he built a practical website performance monitor.
Read it
CSS Only iPhone 6
An incredibly detailed iPhone 6 made with CSS only by Fabrizio Bianchi.
Check it out
Graphic Design Icon Set (EPS, AI, SVG, PNG)
Some great graphic design icons made by Ecomm Design for Pixel Buddha.
Check it out
Best Of Halloween: All Things Spooky
Get some first class Halloween inspiration from this great collection on Smashing Magazine.
Check it out
Stupid ES6 tricks
Emil Ong shares a couple of handy ES6 tricks
Read it
Reactive Animations with CSS Variables
The awesome slides of David Khourshid's CSSDevConf talk on reactive animations.
Check it out
"Instant Loading" with IndexedDB (Building a PWA, Part 2)
The second part of Ire Aderinokun's series on building a Progressive Web App; this part is on how to work with IndexedDB.
Read it
Pure CSS Content Filter
An interesting CSS-only content filter experiment utilizing the :target pseudo-selector by Harry Roberts.
Check it out
Progressive Misconceptions
An insightful contribution to the progressive enhancement discussion by Aaron Gustafson.
Read it
SVG Filter Effects—3 Simple Filter Primitives
Steven Bradley dives into SVG filter primitives, continuing a great series of posts on the topic.
Read it
BLACK
An impressive series of high-resolution wallpapers rendered using Cinema 4D. By Jean-Marc Denis
Check it out
Understanding the SVG viewBox
Learn the essential workings of the SVG viewBox in this article by Dudley Storey.
Read it
Quantity Queries and Flexbox (Part 2)
Charlotte Jackson shows how to get the most out of quantity queries and flexbox in this second post she writes on the topic.
Read it
iOS 10 GUI (iPhone)
A new iOS 10 GUI Kit by Facebook for Sketch, Photoshop, and Figma.
Get it