Javascript Archives | Page 4 of 37 | portalZINE NMN

9. January 2017

Importing CSV files with HTML5 and Papa Parse!

Papa Parse is the powerful, in-browser CSV parser for big boys and girls :)
If you do need easy CSV parsing and conversion back to CSV, take a look at it!

// Parse CSV string
var data = Papa.parse(csv);

// Convert back to CSV
var csv = Papa.unparse(data);

// Parse local CSV file
Papa.parse(file, {
	complete: function(results) {
		console.log("Finished:", results.data);
	}
});

// Stream big file in worker thread
Papa.parse(bigFile, {
	worker: true,
	step: function(results) {
		console.log("Row:", results.data);
	}
});

// Parse CSV string

var data = Papa.parse(csv);

// Convert back to CSV

var csv = Papa.unparse(data);

// Parse local CSV file

Papa.parse(file, {

complete: function(results) {

console.log("Finished:", results.data);

}

});

// Stream big file in worker thread

Papa.parse(bigFile, {

worker: true,

step: function(results) {

console.log("Row:", results.data);

}

});

SIMPLE TESTDRIVE

 <input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />

1	<input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />

document.getElementById('txtFileUpload').addEventListener('change', upload, false);

 function upload(evt) {
  
	var data = null;
	var file = evt.target.files[0];
	var reader = new FileReader();
	reader.readAsText(file);
	reader.onload = function(event) {
		var csvData = event.target.result;
		
		 var data = Papa.parse(csvData, {header : true});
		
		console.log(data);
		
	};
	reader.onerror = function() {
		alert('Unable to read ' + file.fileName);
	};

}

document.getElementById('txtFileUpload').addEventListener('change', upload, false);

function upload(evt) {

var data = null;

var file = evt.target.files[0];

var reader = new FileReader();

reader.readAsText(file);

reader.onload = function(event) {

var csvData = event.target.result;

var data = Papa.parse(csvData, {header : true});

console.log(data);

};

reader.onerror = function() {

alert('Unable to read ' + file.fileName);

};

}

Papa Parse @ GitHUB

19. November 2016

Smart sticky elements with Sticky-Kit

Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.

$("#sticky_item").stick_in_parent()
  .on("sticky_kit:stick", function(e) {
    console.log("has stuck!", e.target);
  })
  .on("sticky_kit:unstick", function(e) {
    console.log("has unstuck!", e.target);
  });

$("#sticky_item").stick_in_parent()

.on("sticky_kit:stick", function(e) {

console.log("has stuck!", e.target);

})

.on("sticky_kit:unstick", function(e) {

console.log("has unstuck!", e.target);

});

Sticky Kit

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