16. September 2016

Create fluid and interactive gradients animations – Granim.js

Granim.js – Create fluid and interactive gradients animations with this small (< 10 kB) js library.

<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>

<!-- Call the script -->
<script src="granim.min.js"></script>

<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
   element: '#granim-canvas',
   name: 'granim',
   opacity: [1, 1],
   states : {
       "default-state": {
           gradients: [
               ['#834D9B', '#D04ED6'],
               ['#1CD8D2', '#93EDC7']
           ]
       }
   }
});
</script>

var granimInstance = new Granim({

element: '#granim-canvas',

name: 'granim',

opacity: [1, 1],

states : {

"default-state": {

gradients: [

['#834D9B', '#D04ED6'],

['#1CD8D2', '#93EDC7']

]

}

});

</script>

Granim.js

12. September 2016

Manet . website screenshot service powered by Node.js, SlimerJS and PhantomJS

Manet is a REST API server which allows capturing screenshots of websites using various parameters. It is a good way to make sure that your websites are responsive or to make thumbnails.

GitHub

11. September 2016

Chat.IO -> Real Time Chat Application built using Node.js

A Real Time Chat Application built using Node.js, Express, Mongoose, Socket.io, Passport, & Redis.

Uses Express as the application Framework.
Manages Sessions using express-session package.
Authenticates via username and password using Passport.
Passwords are hashed using bcrypt-nodejs package.
Social Authentication via Facebook and Twitter using Passport.
Real-time communication between a client and a server using Socket.io.
Uses MongoDB, Mongoose and MongoLab(mLab) for storing and querying data.
Stores session in a MongoDB using connect-mongo; a MongoDB-based session store.
Uses Redis as an Adapter for Socket.io.
Logging Errors and Exceptions using Winston.

Chat.IO

9. September 2016

jQuery Stuck it to them :)

A responsive sticky element plugin, designed to be used with Foundation, Bootstrap or your own css solution.

jQuery Stuck

8. September 2016

D3 Calendar Heatmap – Still summer here

A d3.js heatmap representing time series data. Inspired by Github’s contribution chart.

// chart data example
var chartData = [{
  date: valid Javascript date object,
  count: Number
}];
var chart1 = calendarHeatmap()
              .data(chartData)
              .selector('#chart-one')
              .colorRange(['#D8E6E7', '#218380'])
              .tooltipEnabled(true)
              .onClick(function (data) {
                console.log('onClick callback. Data:', data);
              });
chart1();  // render the chart

// chart data example

var chartData = [{

date: valid Javascript date object,

count: Number

}];

var chart1 = calendarHeatmap()

.data(chartData)

.selector('#chart-one')

.colorRange(['#D8E6E7', '#218380'])

.tooltipEnabled(true)

.onClick(function (data) {

console.log('onClick callback. Data:', data);

});

chart1(); // render the chart

GitHub

6. September 2016

List of Data Visualization Tools

Nice list of tools that will make your life easier, creating meaningful and beautiful data visualizations.

Maps
Charts
Data
Anything else :)

datavisualization.ch

5. September 2016

Particle Network Animations in Javascript

There are multiple solutions out there to create a nice particle network animation in Javascript.

Depending on the amount of particles interacting, they will all spin up your fan at some point ;) You can also use Three.js to create it, but that might be an overkill.

Here some of the solutions:

Particles.JS – Vincent Garreau / GitHub
ParticlePayground – Jonathan Nicol / GitHub
Particler – Adam Bereziuk / GitHub
Particle Network – Ken Ankomah / GitHub
CANVAS PARTICLES WEB MATRIX
Particle Network Animations in JS – Alex Wendland
Javascript Particles Animation – Roshin Jose
Connected Particles – Mike Bostock
Connected Particles – Jonathan
Canvas Particle Animation – Julian Laval
3D Network Graph – Joe die Stefano

4. September 2016

Crazy cool stuff – WebGL globe based on the boardroom scene from Tron: Legacy

The Encom Globe is a WebGL-based clone of the globe from the boardroom scene in Tron: Legacy. Its written using Three.js, with parts implemented in GLSL.

Really amazing!

Encom Globe

4. September 2016

Simple overlay instructions for your apps – Chardin.js

Chardin.js is a jQuery plugin that creates a simple overlay to display instructions for certain elements on a page.

GitHub

4. September 2016

Scripting Vector Graphics with Paper.js

“Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.”

Paper.JS