Resources of the week

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.

http://pablotheflamingo.com/

VOLUMETRIC PARTICLE FLOW

A cool experiment by David Li. WebGL + curl noise + half-angle slice rendering + incremental odd-even merge sort

http://david.li/flow/

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.

http://tutorialzine.com/2014/09/real-time-visitor-globe-nodejs-webgl/

SVG TO CANVAS CONVERTOR

This tool converts SVG into an HTML5 Canvas JavaScript function. Having the source code available allows you to tweak, study and manipulate the Canvas statements as required.

http://www.professorcloud.com/svg-to-canvas/

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.

https://thinkster.io/angulartutorial/mean-stack-tutorial/

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.

http://imasters.expert/3-design-trends-followed-3-avoided/

INTERACTIVE LANDSCAPE

An experiment with three.js that creates a pixelated landscape that the user can control.

http://zadvorsky.com/projects/threejs_03/

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.

http://www.korenlc.com/backbone-js-tutorial-getting-started-with-backbone/

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.

http://webcodetools.com/

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>