Javascript Archives | Page 4 of 37 | portalZINE NMN

16. November 2016

Run something when a DOM element appears and when it exits – onmount

onmount allows you to detect when a DOM element appears and when it exits. No dependencies!

onmount = require('onmount')

onmount('.push-button', function () {
  $(this).on('click', function () {
    alert('working...')
  })
})

onmount = require('onmount')

onmount('.push-button', function () {

$(this).on('click', function () {

alert('working...')

})

onmount

16. November 2016

Programmatically control video and audio within IFrames using Player.js

Player.js is a library that allows you to programmatically control video and audio within iFrames across a number of services.

var player = new playerjs.Player('iframe');

player.on('ready', function(){
  player.on('play', function(){
    console.log('play');
  });

  player.getDuration(function(duration){
    console.log(duration);
  });

  if (player.supports('method', 'mute')){
    player.mute();
  }

  player.play();
});

var player = new playerjs.Player('iframe');

player.on('ready', function(){

player.on('play', function(){

console.log('play');

});

player.getDuration(function(duration){

console.log(duration);

});

if (player.supports('method', 'mute')){

player.mute();

}

player.play();

});

Player.js@GitHub

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. October 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. October 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