Collective #332
![C332_WOTW](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_WOTW.jpg?x86293)
Inspirational Website of the Week: Andre Ribeiro
An elegant page design with smooth transitions. Our pick this week.
Get inspired![C332_AffinityDesigner](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_AffinityDesigner.jpg?x86293)
Affinity Photo for iPad
Affinity Photo is the first fully featured photo editing app for iPad – as seen at WWDC2017.
Buy for iPad![C332_JSImages](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_JSImages.jpg?x86293)
Generating Images in JavaScript Without Using the Canvas API
Alastair Coote explains how he generates images in JavaScript and put them into a web notification.
Read it![C332_reverse](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_reverse.png?x86293)
Reverse Engineering One Line of JavaScript
Alex Kras accepts the challenge to break down a minified script and explains what it does.
Read it![C332_Markvis](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_Markvis.jpg?x86293)
Markvis
With Markvis you can create visualizations easily in markdown.
Check it out![C332_Sukhoi](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_Sukhoi.png?x86293)
Sukhoi
A powerful web crawler with solid features and JSON-like data extraction capabilities.
Check it out![C332_PackageManager](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_PackageManager.png?x86293)
Let's Dev: A Package Manager
Maël Nison shows how to build a package manager.
Read it![C332_DevtoolsChrome60](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_DevtoolsChrome60.png?x86293)
Chrome 60 - What's New in DevTools
Kayce Basques walks us through the new features and major changes coming to Chrome DevTools in Chrome 60.
Watch it![C332_libraryapp](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_libraryapp.png?x86293)
The one about an app
Chen Hui Jing shows how she created a simple library book tracker in JavaScript.
Read it![C332_Tetrahedron](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_Tetrahedron.png?x86293)
Folding a tetrahedron
Ana Tudor shows how to do some serious CSS 3D magic.
Watch it![C332_Speedtest](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_Speedtest.png?x86293)
Introducing The Website Speed Test Image Analysis Tool
Eric Portis introduces a new tool that lets you measure, diagnose and communicate about the image performance of any website.
Read it![C332_CSSNames](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_CSSNames.png?x86293)
Reducing CSS bundle size 70% by cutting the class names and using scope isolation
Gajus Kuizinas shows how to do Google-like class name shortening.
Read it![C332_Kactus](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_Kactus.png?x86293)
Kactus
If you haven't heard about it yet: Kactus is a tool to bring proper version control (as in git) to designers (Sketch for now).
Check it out![C332_GridLayout](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_GridLayout.png?x86293)
This website now uses Grid Layout
Hidde de Vries shows how he implemented CSS Grid on his website.
Read it![C332_Sketchshortcuts](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_Sketchshortcuts.png?x86293)
86 Sketch shortcuts that every product designer should be using
A very useful list of Sketch shortcuts plus desktop wallpaper.
Check it out![C332_Now](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_Now.png?x86293)
Now
Now enables instant immutable deployments to any cloud provider with a simple API that's scalable, intuitive and optimized for collaboration. By Zeit.
Check it out![C332_PrNodejs](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_PrNodejs.jpg?x86293)
Practical Node.js
The manuscript (draft) and code for the "Practical Node.js" book (work in progress).
Check it out![C332_Emoji](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_Emoji.png?x86293)
Making our own Emoji
Marek Minor is making a real Apple-esque Emoji for every one of his colleagues. Learn how he does it.
Read it![C332_SCSS](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_SCSS.png?x86293)
Advanced SCSS
Jarno Rantanen compiled this interesting list of SCSS superpowers.
Check it out![C332_ScalingNode](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_ScalingNode.png?x86293)
Scaling Node.js Applications
Samer Buna explains everything you need to know about Node.js built-in tools for scalability.
Read it![C332_VueWorkshop](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_VueWorkshop.png?x86293)
Introduction to Vue Workshop Materials
Sarah Drasner's materials for her "Introduction to Vue.js" workshop.
Check it out![C332_CSSDB](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_CSSDB.png?x86293)
CSS Database
If you don't know it yet: CSS Database is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.
Check it out![C332_Wikivideo](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2017/07/C332_Wikivideo.jpg?x86293)
VideoWiki
A new project that envisions a video version of Wikipedia. Read more about it in this article.
Check it out