19. December 2015

Picturefill – a responsive image polyfill

“The picture element, srcset and sizes attributes, and associated features allow web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today!”

<img srcset="examples/images/large.jpg 1x, examples/images/extralarge.jpg 2x" alt="…">

1	<img srcset="examples/images/large.jpg 1x, examples/images/extralarge.jpg 2x" alt="…">

<img
  sizes="(min-width: 40em) 80vw, 100vw"
  srcset="examples/images/medium.jpg 375w,
          examples/images/large.jpg 480w,
          examples/images/extralarge.jpg 768w"
  alt="…">

<img

sizes="(min-width: 40em) 80vw, 100vw"

srcset="examples/images/medium.jpg 375w,

examples/images/large.jpg 480w,

examples/images/extralarge.jpg 768w"

alt="…">

Picturefill @ Github

16. December 2015

Angular 2.0 Beta goes live

Angular reaches BETA status. Time to start playing with it … Perfect for the holidays :)

With NativeScript und React Native you will be able to build native Android- und iOS-Apps as well.

Tutorial / GitHub

Enjoy coding …

15. December 2015

Structured Data, Microdata, Rich Snippet Links

Just a couple of links that deal with the usage or testing of structured data.

Structured data is not yet relevant for content rankings, but that might change in the future (Hangout).

“Structured data markup” is a standard way to annotate your content so machines can understand and categorize it. Proper usage elevates the way data is displayed on Google Search, Facebook, Twitter, Pinterest and many others, when one of your content links is posted there.

INTEGRATION

Microdata Specification
JSON-LD (A JSON-based format to serialize Linked Data)
Microdata to RDF (RDFa)
Microformats
Schema.org
Google Rich Snippets
Facebook – The Open Graph protocol

MEDIA

The Knowledge Graph and You

TESTING

Really looking forward to the JSON-LD integration :)

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "Executive Anvil",
  "image": "http://www.example.com/anvil_executive.jpg",
  "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
  "mpn": "925872",
  "brand": {
    "@type": "Thing",
    "name": "ACME"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.4",
    "reviewCount": "89"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "119.99",
    "priceValidUntil": "2020-11-05",
    "itemCondition": "http://schema.org/UsedCondition",
    "availability": "http://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "Executive Objects"
    }
  }
}
</script>

{

"@context": "http://schema.org/",

"@type": "Product",

"name": "Executive Anvil",

"image": "http://www.example.com/anvil_executive.jpg",

"description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",

"mpn": "925872",

"brand": {

"@type": "Thing",

"name": "ACME"

"aggregateRating": {

"@type": "AggregateRating",

"ratingValue": "4.4",

"reviewCount": "89"

"offers": {

"@type": "Offer",

"priceCurrency": "USD",

"price": "119.99",

"priceValidUntil": "2020-11-05",

"itemCondition": "http://schema.org/UsedCondition",

"availability": "http://schema.org/InStock",

"seller": {

"@type": "Organization",

"name": "Executive Objects"

}

</script>

Enjoy coding …

20. November 2015

My Javascript Stack

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 ;)

“

1. November 2015

Flarum – elegant next-generation forum software

Flarum is new elegant next-generation forum software. It provides a touch optimized two pane layout with floating composer.

The backend runs on PHP/MySQL.

Flarum

1. November 2015

tracking.js – real-time color tracking, face detection and much more

“The tracking.js library brings different computer vision algorithms and techniques into the browser environment. By using modern HTML5 specifications, we enable you to do real-time color tracking, face detection and much more”

Tracking.js

20. October 2015

Flexbugs – Time to go flexboxing

“This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you’re building a website using flexbox and something isn’t working as you’d expect, you can find the solution here.”

Github (CanIUse)

1. September 2015

Google Analytics Custom Event Tracking – jQuery

With inline content being loaded via ajax, you are loosing a lot of interesting usage data. These can be tracked using Google Analytics Events or by sending a Pageview.

LETS SHOW IT ALL FIRST

(function($) {
track = { 
   config:{
	pageName	 : "Your Page",
	eventSelector	 : ".trackEvent a, .trackEvent",
	pageviewSelector : ".trackPage a, .trackPage",
   },
 
  init			: function(){	
	  
   $("body").delegate(this.config.eventSelector	,"click", function(){	  
    
	// Navigation / Readmore / Apply / FAQ / Contact / Share
    var cat		= $(this).attr("data-track-cat")    || "Navigation";
    var action  = $(this).attr("data-track-action") || "Click";
    var label   = $(this).attr("data-track-label")  || $(this).text() ;
		
    this.sendEvent(cat, action, label);	 
	  
  });

  $("body").delegate(this.config.pageviewSelector, "click", function(){
	  
   var label =  $(this).text() +" - "+ this.config.pageName		
   var page  =  "/"+label.split(' ').join('-').toLowerCase()+"/";
	  
   this.sendPageview(page,label);	
	  
  });
  
  },
  
  sendEvent: function(cat, action, label){
	   
  ga('send', 'event', {
	'eventCategory'	: cat ,
	'eventAction'	: action,
	'eventLabel'	: label,
	'eventValue'	: 1
  }); 
  },
  
 sendPageview : function(page,label){
	  
  ga('send', {
	'hitType': 'pageview',
	'page'	 : page ,
	'title'	 : label
   });
 }
};

/* INIT */
track.init();

})(jQuery);

(function($) {

track = {

config:{

pageName : "Your Page",

eventSelector : ".trackEvent a, .trackEvent",

pageviewSelector : ".trackPage a, .trackPage",

init : function(){

$("body").delegate(this.config.eventSelector ,"click", function(){

// Navigation / Readmore / Apply / FAQ / Contact / Share

var cat = $(this).attr("data-track-cat") || "Navigation";

var action = $(this).attr("data-track-action") || "Click";

var label = $(this).attr("data-track-label") || $(this).text() ;

this.sendEvent(cat, action, label);

});

$("body").delegate(this.config.pageviewSelector, "click", function(){

var label = $(this).text() +" - "+ this.config.pageName

var page = "/"+label.split(' ').join('-').toLowerCase()+"/";

this.sendPageview(page,label);

});

sendEvent: function(cat, action, label){

ga('send', 'event', {

'eventCategory' : cat ,

'eventAction' : action,

'eventLabel' : label,

'eventValue' : 1

});

sendPageview : function(page,label){

ga('send', {

'hitType': 'pageview',

'page' : page ,

'title' : label

});

}

};

/* INIT */

track.init();

})(jQuery);

The above allows to automate tracking by attaching simple classes and use HTML5 data attributes to assign category, action and label. Direct tracking is also possible. Lets split it up :)

EVENT TRACKING INIT

$("body").delegate(".trackEvent a, .trackEvent","click", function(){	  
    // Navigation / Readmore / Apply / FAQ / Contact / Share
    var cat	= $(this).attr("data-track-cat")    || "Navigation";
    var action  = $(this).attr("data-track-action") || "Click";
    var label   = $(this).attr("data-track-label")  || $(this).text() ;
		
    this.sendEvent(cat, action, label);	 
	  
  });

$("body").delegate(".trackEvent a, .trackEvent","click", function(){

// Navigation / Readmore / Apply / FAQ / Contact / Share

var cat = $(this).attr("data-track-cat") || "Navigation";

var action = $(this).attr("data-track-action") || "Click";

var label = $(this).attr("data-track-label") || $(this).text() ;

this.sendEvent(cat, action, label);

});

This monitors links with the class .trackEVENT attached and fills the event data using HTML5 data attributes. All attributes have default values assigned.

A possible link would look like this:

<a href="#" class=".trackEvent" data-track-cat="Subscribe" data-track-action="View" data-track-label="All my news!">Subscribe to my news!</a>

1	<a href="#" class=".trackEvent" data-track-cat="Subscribe" data-track-action="View" data-track-label="All my news!">Subscribe to my news!</a>

The sendEvent function than sends this to Google Analytics.

PAGEVIEW TRACKING

$("body").delegate(".trackPage a, .trackPage", "click", function(){
	  
   var label =  $(this).text() +" - "+ this.pageName		
   var page  =  "/"+label.split(' ').join('-').toLowerCase()+"/";
	  
   this.sendPageview(page,label);	
	  
});

$("body").delegate(".trackPage a, .trackPage", "click", function(){

var label = $(this).text() +" - "+ this.pageName

var page = "/"+label.split(' ').join('-').toLowerCase()+"/";

this.sendPageview(page,label);

});

Much simpler, this just gets the element text and submits the click as a new Pageview. The label gets the pagename attached and the actual page url is constructed from the label. The sendPageview function than sends this to Google Analytics.

DIRECT USE

track.sendEvent(cat, action, label);

track.sendPageview(page, label);

track.sendEvent(cat, action, label);

track.sendPageview(page, label);

Really simple and effective way within a simple OnePager or a bigger web application. BTW I am using delegation to make sure that also links within AJAX content can be tracked.

Enjoy coding …

31. August 2015

Bootstrap 4 alpha & IE8 support

We are getting closer to Boostrap 4 and I really love what we are getting with the first alpha version.

Improved grid system
Opt-in flexbox support is here. Nice.
Dropped wells, thumbnails, and panels for cards.
Consolidated all our HTML resets into a new module, Reboot. Much cleaner.
Dropped IE8 support and moved to rem and em units. Finally REM units and IE8 free. I know there will be still projects with IE8 requirements, but the amount of projects is getting less and less :)
Improved auto-placement of tooltips and popovers. They are using Tether, have been using that for projects for some time now. GREAT!

Bootstrap Alpha 4 / Documentation

17. July 2015

Ridiculously Responsive Social Sharing Buttons

Responsive social sharing buttons.

Github