10. January 2017

Pronunciation Club (2015-2017)

The custom LMS / Learning experience is in development since 2015. We are currently in our early alpha / beta stages for our first learning experiences. I am the tech lead / senior developer for the startup and I have build a custom learning system from the ground up over the past months.

New way to learn languages / pronunciation
Course management
Course tree
Backend Data entry & organization
Student / course tracking
Complete Backend / Course Builder
Complete TWIG / Sass-based theme system
e-Commerce integration
Social Login
more …

Pronunciation Club

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

3. January 2017

GREENTONIC 2016 / 2017

SEO optimization and website updates. Better cross-linking of relevant data between the website & blog.

Consulting & Strategy
SilverStripe CMS
WordPress
Custom adjustments and templates
SEO & Analytics optimizations

GREENTONIC – greentonic.de

1. January 2017

Holland America Line – Cruise Tour 2015 / 2016 / 2017

Promotion and booking website for the Holland America Line Cruise Tour NL / BE / 2015 / 2016 / 2017

Headless WordPress
JSON API
Custom Plugin
Custom Theme
Responsive design
CSS3 / Javascript animations
Location / Time slot selection / Limited seats
Ticket Registration + Confirmation
Ticket Creation (Ticket amount, Location & Date, Registrant, QR- Verification )
PDF embed
Booking notifications & available seat monitoring
Data Export (Excel)
Custom analytics integration
Maintenance

Holland America Line – ontdekcruisen.nl

20. November 2016

Gravity Forms PHP Trait to send notifications and execute hooks on demand

When performing tasks using the Gravity Forms API, handling notifications and hook execution on demand is something that becomes really handy.

<?php

trait GravityForm{
	
	
	function GravityForm_send_notifications($form_id, $entry_id){

	  // Get the array info for our forms and entries
	  // that we need to send notifications for
  
	  $form 	= RGFormsModel::get_form_meta($form_id);
	  $entry 	= RGFormsModel::get_lead($entry_id);
  
	  // Loop through all the notifications for the
	  // form so we know which ones to send
  
	  $notification_ids = array();
  
	  foreach($form['notifications'] as $id => $info){
  
		  array_push($notification_ids, $id);
  
	  }
  
	  // Send the notifications
  
	  GFCommon::send_notifications($notification_ids, $form, $entry);

	}
	
	function GravityForm_execute_hooks($form_id, $entry_id){
	
	
		$form 				= GFAPI::get_form( $form_id );
		$entry 				= GFAPI::get_entry( $entry_id );
		$registered_addons 	= GFAddOn::get_registered_addons( );
		
		foreach( $registered_addons as $reg){
			if(method_exists($reg, "get_instance")){
				
				$execute = $reg::get_instance();				
				
				foreach($registered_addons as $addon){					
					
					$execute->maybe_process_feed( $entry, $form);
				}
			}
		}
		
		return true;
	}
		
	
}

<?php

trait GravityForm{

function GravityForm_send_notifications($form_id, $entry_id){

// Get the array info for our forms and entries

// that we need to send notifications for

$form = RGFormsModel::get_form_meta($form_id);

$entry = RGFormsModel::get_lead($entry_id);

// Loop through all the notifications for the

// form so we know which ones to send

$notification_ids = array();

foreach($form['notifications'] as $id => $info){

array_push($notification_ids, $id);

}

// Send the notifications

GFCommon::send_notifications($notification_ids, $form, $entry);

}

function GravityForm_execute_hooks($form_id, $entry_id){

$form = GFAPI::get_form( $form_id );

$entry = GFAPI::get_entry( $entry_id );

$registered_addons = GFAddOn::get_registered_addons( );

foreach( $registered_addons as $reg){

if(method_exists($reg, "get_instance")){

$execute = $reg::get_instance();

foreach($registered_addons as $addon){

$execute->maybe_process_feed( $entry, $form);

}

return true;

}

Enjoy coding ….

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

17. November 2016

WP REST API rendered output & Visual Composer

Visual Composer shortcodes are normally not converted within the WordPress REST API rendered output.

This can be accomplished by calling WPBMap::addAllMappedShortcodes();

add_action( 'rest_api_init', function ()
{
   register_rest_field(
          'page',
          'content',
          array(
                 'get_callback'    => 'convert_do_shortcodes',
                 'update_callback' => null,
                 'schema'          => null,
          )
       );
});

function convert_do_shortcodes( $object, $field_name, $request )
{
   WPBMap::addAllMappedShortcodes(); // This does all the work

   global $post;
   $post = get_post ($object['id']);
   $output['rendered'] = apply_filters( 'the_content', $post->post_content );

   return $output;
}

add_action( 'rest_api_init', function ()

{

register_rest_field(

'page',

'content',

array(

'get_callback' => 'convert_do_shortcodes',

'update_callback' => null,

'schema' => null,

)

);

});

function convert_do_shortcodes( $object, $field_name, $request )

{

WPBMap::addAllMappedShortcodes(); // This does all the work

global $post;

$post = get_post ($object['id']);

$output['rendered'] = apply_filters( 'the_content', $post->post_content );

return $output;

}

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

Schema for your Logo – help search engines to understand your content

“Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.”

This shared vocabulary from Google, Bing and Yahoo helps to understand your content!

This shows how to associate your logo with your organization.

BEFORE

<a href="http://www.yoursite.com/">
<img src="http://www.yoursite.com/your_logo.jpg" alt="Your logo" />
</a>

</a>

AFTER

<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.yoursite.com/">
<img itemprop="logo" src="http://www.yoursite.com/yourlogo.jpg" alt="Your wonderful logo"/>
</a>
</div>

</a>

</div>