We gathered this week’s useful articles & resources in a single post as a quick reference.
Pablo the flamingo!
Pablo became very famous this week!
A really cool project and an even cooler flamingo that will not let you turn the music off.
Volumetric Particle Flow
A cool experiment by David Li. WebGL + curl noise + half-angle slice rendering + incremental odd-even merge sort
Real-time Visitor Globe with Node.js and WebGL
A project created by using Node.js and WebGL. It’s a mapped globe of the Earth that you can use to keep track of the people who use your web apps in real-time. After a quick setup, you’ll be able to see the location of everyone who is at your website, pinpointed on the globe and grouped by country. The demo is also fully responsive and works on mobile devices.
SVG to Canvas Convertor
AngularJS Tutorial: Learn to Build Modern Web Apps with MEAN
The goal of this tutorial is to guide you through the creation of a Reddit/Hacker News clone using the MEAN stack. By completing this tutorial, you will gain a basic understanding of the MEAN stack including building a REST interface with Express.js on top of Node.js and using that interface to perform CRUD operations on a database via an AngularJS frontend.
3 Design Trends to be Followed and 3 to be Avoided
The user experience (UX) is essential on e-commerce. And a good UX is also made of good practices in design. In this article, you will be presented with three design trends to be followed and three to be avoided.
An experiment with three.js that creates a pixelated landscape that the user can control.
Getting Started with Backbone
A nice tutorial on Backbone.js. Technically, Backbone is a library and, because of this, it is highly customizable. Its main goal is to generate modular code, meaning it breaks down your code into modules which are independent but work together.
Web code tools & Generators to make coding easier.
Learn HTML5 and CSS3 through editors and code generators and find examples on how to use various elements.
Responsive Images: If you’re just changing resolutions, use srcset
If you’re implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image (the vast majority of usage), all you need is the srcset attribute on the <img>
Masking SVG Animations
Using Clip-Path to make your animations more beautiful
A pattern generator with Paper.js
Codepen: Psychedelic SVG
A nice pen by Graham Pyne featuring a clever example of SVG use.
Codepen: Vectors pointing towards the mouse
A canvas pen by Clément Pigeon with a clever mouse move animation.
CSS & SVG Carousel
A cool pen by LegoMushroom