HTML5 Archives | Page 8 of 10 | portalZINE NMN | Development meets Creativity

10. May 2015

Shield.io – Quality metadata badges for your open source project

Pixel-perfect
Retina-ready
Fast
Consistent
Hackable
No tracking

27. April 2015

Hosting MP3 files on Google Drive + HTML5 Audio Player

I am doing a Podcast on portalZINE.TV since last year and always host a backup of the MP3 episodes on Google Drive.

The link that you create, when enabling file sharing on Google Drive, can not be used to actually embed it on your website.

The link looks something like that:

https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing

1	https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing

To actually use it directly, we need to get the ID. Sure, you could just extract the ID, but often we just want to copy and paste. The sharing link is also your actual reference to the original file, which I store together with the podcast.

We use a simple Regex to extract the ID:

https://drive.google.com/file/d/([a-zA-Z0-9_]+)\/

1	https://drive.google.com/file/d/([a-zA-Z0-9_]+)\/

PHP

$input = "https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing";

preg_match("/https:\/\/drive.google.com\/file\/d\/([a-zA-Z0-9_]+)\//", $input, $match);

$GoogleDriveFileID = $match[1];

$input = "https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing";

preg_match("/https:\/\/drive.google.com\/file\/d\/([a-zA-Z0-9_]+)\//", $input, $match);

$GoogleDriveFileID = $match[1];

JAVASCRIPT

var input = "https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing";

var res = input.match(/https:\/\/drive.google.com\/file\/d\/([a-zA-Z0-9_]+)\//)

var googleDriveFileID = res[1];

var input = "https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing";

var res = input.match(/https:\/\/drive.google.com\/file\/d\/([a-zA-Z0-9_]+)\//)

var googleDriveFileID = res[1];

That ID can than be used to embed the file directly using HTML5 audio controls. Its important to use the “http://docs.google.com/uc?export=open&id=” url to open the file, as it provides the direct access to the shared file

 <audio controls>
 <source src="http://docs.google.com/uc?export=open&id=<?php echo $GoogleDriveFileID; ?>" type="audio/mp3">
<p>This browser does not support HTML5 audio</p>
 </audio>

<source src="http://docs.google.com/uc?export=open&id=<?php echo $GoogleDriveFileID; ?>" type="audio/mp3">

<p>This browser does not support HTML5 audio</p>

</audio>

15. April 2015

Defer Parsing of JavaScript in WordPress – new filter & old hack

When the defer attribute is present in the script tag, it specifies that the script is executed when the page has finished parsing. A requirement that is enforced by Google for example (Page-Speed ranking).

Currently the WordPress wp_enqueue_script provides no easy way to add new attributes, but there is a way around that :)
The below hack / filter needs to be added to your theme function.php. The filter should be your preferred solution, as the clean_url filter has been deprecated.

Make sure that your website / theme is still loading after adding these changes. If needed you can add more exceptions, as I did for jQuery.

Hack for WordPress before 4.1

if(is_admin() === FALSE){
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' )  ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

if(is_admin() === FALSE){

function defer_parsing_of_js ( $url ) {

if ( FALSE === strpos( $url, '.js' ) ) return $url;

if ( strpos( $url, 'jquery.js' ) ) return $url;

return "$url' defer ";

}

add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

}

Filter for WordPress 4.1+
Updated: 26.04.2015 – using clean Regexp

if(is_admin() === FALSE){
function add_js_defer($tag, $handle, $src){
 if(  strpos( $tag, 'jquery.js' ) ) return $tag;
  preg_match_all('/([\w\-.:]+)\s*=\s*("[^"]*"|\'[^\']*\'|[\w\-.:]+)/i', $tag, $match);
		
	$newtag = "<script ";
	
	foreach($match[1] as $key=> $val){
		$newtag .= $val."=".$match[2][$key]." ";	
	}
	
	$newtag .= "defer></script>";
	
    return $newtag.PHP_EOL;
 }
 add_filter( 'script_loader_tag', 'add_js_defer', 11, 1 );
}

if(is_admin() === FALSE){

function add_js_defer($tag, $handle, $src){

if( strpos( $tag, 'jquery.js' ) ) return $tag;

preg_match_all('/([\w\-.:]+)\s*=\s*("[^"]*"|\'[^\']*\'|[\w\-.:]+)/i', $tag, $match);

$newtag = "<script ";

foreach($match[1] as $key=> $val){

$newtag .= $val."=".$match[2][$key]." ";

}

$newtag .= "defer></script>";

return $newtag.PHP_EOL;

}

add_filter( 'script_loader_tag', 'add_js_defer', 11, 1 );

}

Browser Support

All modern browsers
Support in IE9 is flaky, as the execution order isn’t guaranteed.
Can I use

4. April 2015

portalZINE.TV gets full upgrade

As part of our complete network upgrade, portalZINE.TV gets a complete facelift as well. The whole website has been streamlined in preparation for the new season.

portalZINE TV

26. March 2015

Include WebP images in WordPress

“WebP is an image format employing both lossy and lossless compression. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies.” – Wikipedia

As the WebP is not widely supported, you need to use polyfills or workarounds to actually use it. But it makes a lot of sense when you are building image heavy applications for the web. It decreases file-sizes immensely and supports transparency as PNG does.

To allow WebP upload in WordPress, add this to your functions.php:

add_filter('upload_mimes','webp_mime_type');

    function webp_mime_type($mimes){

        return array_merge($mimes,array (

            'webp' => 'image/webp'

        ));

    }

add_filter('upload_mimes','webp_mime_type');

function webp_mime_type($mimes){

return array_merge($mimes,array (

'webp' => 'image/webp'

));

}

Browsers with native support will show WebP images natively, for browsers without support deploy WebPJS developed by Google. Download and add it to your theme functions.php

function webp_script() {

    // Loads JavaScript file for webp image support in all browsers 

    wp_enqueue_script( 'webpjs-script', get_template_directory_uri() . '/js/webpjs-0.0.2.min.js');    

}

add_action( 'wp_enqueue_scripts', 'webp_script' );

function webp_script() {

// Loads JavaScript file for webp image support in all browsers

wp_enqueue_script( 'webpjs-script', get_template_directory_uri() . '/js/webpjs-0.0.2.min.js');

}

add_action( 'wp_enqueue_scripts', 'webp_script' );

This should do the trick and enable WebP for all modern browsers, see browser support on the WebPJS development page.

Here another little nice trick to check for WebP using Javascript and replace webp with png images.

window.testWebP = function(callback) {
    var webP = new Image();
    webP.onload = webP.onerror = function () {
        callback(webP.height == 2);
    };
    webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
};

window.testWebP(function(support) {
  
   if(!support){
		 $('img[src$=".webp"]').each(function(index,element) {
          element.src = element.src.replace('.webp','.png');
        });   
	}
});

window.testWebP = function(callback) {

var webP = new Image();

webP.onload = webP.onerror = function () {

callback(webP.height == 2);

};

webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';

};

window.testWebP(function(support) {

if(!support){

$('img[src$=".webp"]').each(function(index,element) {

element.src = element.src.replace('.webp','.png');

});

}

});

Enjoy
Alex

20. March 2015

Go 100% SVG, with a PNG fallback

Pure CSS

.svg{
background-image:  url('image.png');
background-image:  none,url('image.svg'), url('image.png');
background-size: 100% 100%;
}

.svg{

background-image: url('image.png');

background-image: none,url('image.svg'), url('image.png');

background-size: 100% 100%;

}

Using Modernizer + jQuery

if(!Modernizr.svg) {
    $('img[src*="svg"]').attr('src', function() {
        return $(this).attr('src').replace('.svg', '.png');
    });
}

if(!Modernizr.svg) {

$('img[src*="svg"]').attr('src', function() {

return $(this).attr('src').replace('.svg', '.png');

});

}

Modernizer

Custom detection of SVG

var supportsSVG = function() {
  		return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1");
	}

if (!supportsSVG()) {
 // work your magic
}

var supportsSVG = function() {

return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1");

}

if (!supportsSVG()) {

// work your magic

}

15. January 2015

Holland America Line Reisprofiel Test goes online

“Holland America Line Reisprofile Test” provides an interface for customers to find out which cruise type they are.
By sliding the images you are choosing your preferences and define your cruise type, which allows you to get an individual set of cruises sent to you.

15. January 2015

Audiosprite – node.js ffmpeg wrapper to concat small audio files into one

Audiosprite is a node.js ffmpeg wrapper to concat small audio files into one single file. It even allows you to define the gap between each file.
Continue reading Audiosprite – node.js ffmpeg wrapper to concat small audio files into one

15. January 2015

howler.js – adding audio to your web project

Adding audio to a web project can be really a pain in the …. . Howler.js makes it almost painless to add audio for desktop or mobile solutions.

Just used the audio sprite feature in one of my projects to allow switching between sounds. Works perfectly on iOS after the first touch event.

howler.js / Github

Check out version 2.0 on Github, which provides even more solid features.
Version 2.0

7. November 2014

Extending the Visual Composer Row element with a new property

Visual Composer for WordPress provides many ways to extend its functionality. There are already many add-ons available for this dynamic page builder, but its easy to do the extending yourself, by following the hints in the documentation ;)

In this small tutorial we are adding a “type” field to allow a special css class to be added to each of our row containers.

New Visual Composer element properties can be easily added by using the vc_add_param function. See documentation for more information. In our case we are adding a property to the vc_row element.
Continue reading Extending the Visual Composer Row element with a new property