Essentials - portalZINE NMN - development meets creativity

Paw – essential HTTP client to test your APIs

10. January 2017

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

Importing CSV files with HTML5 and Papa Parse!

9. January 2017

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

Use a Koala to compile Less, Sass, Compass and CoffeeScript

28. August 2016

“Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.”

Koala / GitHub

My Javascript Stack

20. November 2015

Some time ago I said: “My perfect framework, is a set of solid singular solutions that have proven themselves over the years. Working solo or together in harmony”.

Here is a list of some of my core components, that I use in combination or standalone.

CORE

jQuery – jquery.com
Underscore – underscorejs.org
Directives – github.com/mennovanslooten/jquery.directive.js

LAYOUT

Bootstrap – getbootstrap.com

TEMPLATING

jQuery loadTemplate – github.com/codepb/jquery-template
OR
jsViews / jsRender – jsviews.com/#jsrender

OBSERVABLES

jsViews Observable – jsviews.com/#jsoapi

ROUTER

Director – github.com/flatiron/director

STORAGE

simpleStorage – github.com/andris9/simpleStorage

DEPENDENCY MANAGER

RequireJS – requirejs.org
jQuery Tweak: If you have already loaded jQuery before RequireJS, you can not use define([“jquery”], …) in your module defines. Add this to your main RequireJS config before doing anything else …

define('jquery', [], function() { return jQuery; });

1
2
3

define('jquery', [], function() {
return jQuery;
});

NOW you can live happily ever after 🙂
OR
Loadrunner – github.com/danwrong/loadrunner

This is basically the core stack that I use to build out ideas 🙂 While Angular is always an option, the above satisfies most of all needs and is often far slimmer. The rest depends on how you organize your code yourself, but at least you are not forced into fixed structures 😉

“

Conditional Tags for Menus & Widgets

11. May 2015

Conditional Tags are a powerful thing in WordPress and especially handy to show or hide things.

“The Conditional Tags can be used in your Template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches. ”

Two plugins are part of my essentials, that utilize the Conditional Tags:

Widget Logic
“This plugin gives every widget an extra control field called “Widget logic” that lets you control the pages that the widget will appear on. The text field lets you use WP’s Conditional Tags, or any general PHP code.”
Menu Item Visibility Control
“Using this plugin you can use WordPress Conditional Tags to enable or disable menu items on the front-end. It works like ‘Widget Logic’ but for menu items.”

You can easily define your own Conditional Tags in your functions.php or plugin.

ClockPicker – elegant way to choose time

9. May 2015

This time picker provides a unique way to enhance your input fields. Use a clock interface to enter the time. The plugin works with Bootstrap or standalone.

Part of my essentials 🙂

ClockPicker

Datedropper – elegant way to enter dates

9. May 2015

Datedropper is a jQuery Plugin that provides a quick and appealing interface to enter dates. Nice little plugin to spice up your interface.

Definitely part of my list of essentials 🙂

datedropper