3. June 2015

Fullpage.js Addon for Visual Composer – Video Preview (Update 07.03.2016)

This video should give you a good idea what the addon can actually do.

In my last article I gave you a rough overview of the features & requirements. Here some more details and additions:

Added the fixed header & footer container to the admin interface. You can add special padding, to the top and bottom, through the fullpage settings and make room for them. These are standard content containers, that can hold any Visual Composer content or row setup.
Added automatic menu, which adds links to each section as they are created. Link title matches the section title.
Define section and slide anchors, which are reflected in the browser history.
Sections and Slides can have different backgrounds, providing nice effect options. I added an image background to Section 1 and semi-transparent background colors to the Slides.
Fullpage.js configuration is fully integrated and working. The system sets defaults for a quick start.
Fullpage.js CSS override has been added, but is not complete yet. Added code editor.
Fullpage.js Events have been added and are fully functional. These events are triggered after load, after slide load, after leaving a slide and other events.
iScroll can be seen in Section 2. Added resize handling and configuration options. Still need to do some minor tweaks.
iScroll custom scrollbars are on my list, but not sure I will add these yet.
Prebuild Templates will be added, so that you can quickstart your design. Visual Composer 4.5+ provides some nice new options.
Visual Composer requirement will be 4.5+.
The admin provides a nice color separation for all components and count for slides & sections.

The addon is mostly done. I am finalizing the main admin area this week and will do a final cleanup next week, for the first beta release.

Many people have asked me for a release date. I currently plan to have a fully working Beta in the next 2-3 weeks. Will offer the Addon to a small closed group of customers first, before I think about other release options. I think I will offer between 20-30 slots for the beta run. If you are interested let me know.

Regards
Alexander

Updates

Quickly choose which section / slide to load, when the page is opened.
The addon is injecting its own page template, to make sure that the main container is clear of any theme related margins or padding. As soon as the Fullpage container is added to the layout, the template gets selected dynamically.
21.06.2015 – updating to latest fullPage.js version (2.6.6) and adding new options and changes
13.08.2015
– beta has been delayed due to my vacation & an accident I am recovering from. This is still just a side project ;)
– updating to latest fullPage.js version and adding new options to admin
– updating to latest Visual Composer version
03.09.2015
– moving to Visual Composer 4.7
– finalizing the admin area
14.01.2016
– moving to Visual Composer 4.9x
– fullpage.js version update
– iScroll update
– admin /front-end cleanup … getting close :)
17.02.2016
– works pretty flawless by now
– plugins are updated
– admin complete, working on some minor cosmetics
– not sure yet about distribution :) … my current projects come first!
07.03.2016
– adding version / requirement checks for all linked libs
– moved to VisualComposer 4.10
– fullPage.js version bumped to 2.7.8
– final cleanup of all areas on the way

20. May 2015

WordPress as a development platform & the JSON evolution

Many developers hesitate to call WordPress a PHP development platform. I know what I am talking about, as I developed a platform of my own. PHP platforms normally only provide a skeleton and we need to

Decide on a database schema
Create the database
Setup backends and dashboards
Design the presentation layer
Implement user-level authentication and similar

THE FRONTEND EXPERIENCE

With WordPress you get most of this out-of-the-box, with some predefined structures.

Having a flexible administration backend in place makes it easy to concentrate on the things that matter for a project, which is designing a frontend experience.

JSON MATTERS

And especially with the JSON REST API finding its way into the core slowly, you are completely free when it comes to using the stored data in your frontend designs.

Sure that was possible before, just with some more work on our side ;)

But WordPress embracing the “freeing of data” through JSON, shows us where the ride is going.

THE NEW SINGLE APP UNIVERSE

There has not been a single project of mine in the past year, that has not used the REST API in some way. And all of this fits perfectly into the new single page app universe.

WordPress interfaces with your javascript framework setup (client side templating, DOM manipulation, data binding, routing …) and frees you from any design handcuffs.

It has become much easier and faster over the past 2 years to say “YES” to many of my clients wishes.

Its nice to finally see data flow from the server to the client and back that easily.

If you are not exited about this … I am :)

…enjoy coding

10. May 2015

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

Pixel-perfect
Retina-ready
Fast
Consistent
Hackable
No tracking

Shield.IO

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