Javascript Archives | Page 4 of 38 | portalZINE NMN

15. March 2017

Joyride 2 – create website tour in style

Joyride is an easy to configure site tour wizard.

9. February 2017

Chrome 56 .. whats new?

With Chrome 56, web apps can now communicate with nearby Bluetooth Low Energy devices using the Web Bluetooth API, position sticky is back – making it easy to create elements that scroll normally until sticking to the top of the viewport. And HTML5 by Default is enabled for all users.

Chrome 56 on iOS also adds the ability to scan QR codes directly within Chrome. So many thought QR-Codes were dead, well not so much !

Google

6. February 2017

Rocket.Chat – Open Source Web Chat Platform

Rocket.Chat is am impressive Open Source Web Chat Platform, with a huge amount of features:

BYOS (bring your own server)
Multiple Rooms
Direct Messages
Private Groups
Public Channels
Desktop Notifications
Mentions
Avatars
Markdown
Emojis
Custom Emojis
Reactions
One touch Geolocation
TeX Math Rendering – inline math typesetting
Media Embeds
Link Previews
Sent Message Edit and Deletion
Transcripts / History
File Upload / Sharing
Scalable file sharing – S3 uploads with CDN downloads
Full text search
Live chat / Messaging call center
LDAP Authentication
CAS 1.0, 2.0 support for education institutions and hosting providers worldwide
Support for Okta SSO through SAML v2
I18n – Supports 22 Languages
Hubot Friendly
(Beta) Face to Face Video Conferencing (aka WebRTC )
(Beta) Multi-users Video Group Chat
(Beta) Jitsi integration
Audio calls
Multi-users Audio Conference
Screensharing
….. more

Rocket.Chat

10. January 2017

jQuery Knob … a dial to rule them all

Canvas based dial that adds mouse click, wheel mouse, keyboard and finger / touch events.

Really nice :)

jQuery Knob

10. January 2017

Paw – essential HTTP client to test your APIs

Paw is a full-featured HTTP client that lets you test the APIs you build or consume. It has a beautiful native OS X interface to compose requests, inspect server responses and generate client code out-of-the-box.

This is one of my go-to tools, when test-driving my API endpoints.

Paw for Mac

10. January 2017

Flatdoc – Markdown to documentation

Flatdoc is a small JavaScript file that fetches Markdown files and renders them as full pages. Essentially, it’s the easiest way to make open source documentation from Readme files.

No server-side components
No build process needed
Deployable via GitHub Pages
Can fetch GitHub Readme files
Gorgeous default theme (and it’s responsive)
Just create an HTML file and deploy!

GitHub

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