16. November 2016

Bottr – The World’s Simplest Bot Framework

Simple – Create expresive interactive bots without dealing with the low level details.
Event Based – Our event based system allows to easily chain and combine actions together.
Flexible – Use Components from the Ecosystem to add additional capabilities to your bot.
Familiar – Built ontop of proven technolgies Node.js, Javascript and Express.js

Clients: Facebook Messenger, Twillio, Twitter, WebSocket :)

import Bottr from 'bottr';

let Bot = new Bottr.Bot()

bot.on('message_received', (message, session) => {
    session.send('Hello World!')
})

bot.listen()

import Bottr from 'bottr';

let Bot = new Bottr.Bot()

bot.on('message_received', (message, session) => {

session.send('Hello World!')

})

bot.listen()

Bottr@Github

31. Oktober 2016

Easily copy text to clipboard via Javascript

„Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework. That’s why clipboard.js exists.“

clipboard.js

11. Oktober 2016

Mobile-friendly interactive maps with Leaflet

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API.

Leaflet

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

What are particle animations?

Particle network animations in JavaScript typically involve creating visual representations of particles (often small dots or shapes) that move around in a defined space, interacting with each other based on predefined rules or behaviors. These animations are commonly used for visual effects on websites, data visualization, or interactive demos.

Solutions

Particle network animations in JavaScript offer a visually appealing way to represent various phenomena or data in a dynamic and interactive manner on the web. 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 depending on your hardware ;) You can also use Three.js / D3.js / PixiJS or Anime.js to create it, but that might be an overkill.

These libraries offer different features and capabilities, so you can choose the one that best fits your project requirements and familiarity with the tools.

Here some of the popular solutions:

tsParticles / Github
Particles.JS – Vincent Garreau / GitHub
Particles.js is a lightweight JavaScript library for creating particle effects. It provides a simple way to generate customizable particle animations on HTML pages. You can control various parameters such as number of particles, size, color, speed, and more.
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