Collective #234

Using A Static Site Generator At Scale: Lessons Learned
Stefan Baumgartner explores the latest hype of static site generators and provides some useful insights and tips.
Read it
No Joke... Download Anything You Want
GraphicStock is giving Codrops users 7 days of free access to 300,000 fully-licensed images, infographics, backgrounds, and more.
Check it out
PNG optimisation
A very helpful analysis of how various design tools generate PNGs with different file sizes.
Check it out
Monograph
A great demo by Oleg Solomka that shows the power of mo.js. Also, the tutorial section on mo.js got updated!
Check it out
Beating Heart
An amazing heart animation made with CSS and SVG in a low-poly style. Made by morkett.
Check it out
3 Weird SVG Browser Inconsistencies
Una Kravets points out some strange browser bugs related to SVG.
Read it
Dummi.io
Need some dummy data for your project? With Dummi you can generate fake user data in many supported files formats.
Check it out
High Performance SVGs
A great article by Sara Drasner on how to manage and optimize SVGs for better performance.
Read it
Free Font: Honeycomb
Katrina Sutton designed this exquisite looking honeycomb font.
Check it out
Web Components and progressive enhancement
An article by Adam Onishi on Web Components with some insightful thoughts.
Check it out
Fancy 3D Letter PSD Text Effect
A great PSD resource by Pixeden: a strong 3D text effect with an easy way to customize colors.
Check it out
CSS background-clip: text has landed in Firefox Nightly
Great news: background-clip: text
has landed in Firefox! Take a look at this demo by Šime Vidas.

JavaScript Systems Music
Learn Web Audio by recreating the works of Steve Reich and Brian Eno. By Tero Parviainen.
Check it out
lightgallery.js
A full featured JavaScript lightbox gallery without dependencies. Made by Sachin N.
Check it out
"Put On The Sunglasses, Frank": An Interactive with SVG Masks
A cool SVG demo and tutorial by Dudley Storey as a tribute to the classic John Carpenter film "They Live".
Check it out
Postleaf
A new open source blogging platform with inline editing with a responsive admin interface.
Check it out
Neat uses for CSS's awesome viewport units
A great article by Martin Falkus that shows some awesome and clever viewport unit use cases.
Read it
Waves
A lovely animated waves demo by Hakim El Hattab.
Check it out
Detailed overview of well-known symbols
Learn about the new ECMAScript 2015 primitive type "Symbol" which allows to create unique identifiers. An in-depth article by Dmitri Pavlutin.
Read it
Take a Selfie With JavaScript
A tutorial by Danny Markov on how to code a JavaScript photobooth app that takes images using the camera on your phone, laptop or desktop.
Check it out
Guacamole 3-in-1 UI Kit (PS, Sketch, XD)
Some gorgeous UI elements to get you started with your next app design.
Check it out