| Posted under Articles

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.

pablo

http://pablotheflamingo.com/

Volumetric Particle Flow

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

canvas

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.

real-time-globe-nodejs-webgl

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.

svg_canvas

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.

mean

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.

design-trends

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.

threejs

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.

backbonejs

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.

webtools

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>

csstricks

http://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Masking SVG Animations

Using Clip-Path to make your animations more beautiful

maskingsvg

https://medium.com/@gordonnl/stylised-line-animations-ded23320ffe5

A pattern generator with Paper.js

http://andrewcollins.github.io/arctiles/

Codepen: Psychedelic SVG

A nice pen by Graham Pyne featuring a clever example of SVG use.

omg_svg

http://codepen.io/gpyne/pen/Lqvxo

Codepen: Vectors pointing towards the mouse

A canvas pen by Clément Pigeon with a clever mouse move animation.

pen

http://codepen.io/clementpigeon/pen/Kcxse

CSS & SVG Carousel

A cool pen by LegoMushroom

pen2

http://codepen.io/sol0mka/full/uizKI

Thanks for your likes, this will motivate me to write posts more often!