10. January 2017

jQuery Knob … a dial to rule them all

Canvas based dial that adds mouse click, wheel mouse, keyboard and finger / touch events.

Really nice :)

jQuery Knob

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>

11. October 2016

Mobile-friendly interactive maps with Leaflet

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API.

Leaflet

16. September 2016

Create fluid and interactive gradients animations – Granim.js

Granim.js – Create fluid and interactive gradients animations with this small (< 10 kB) js library.

<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>

<!-- Call the script -->
<script src="granim.min.js"></script>

<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
   element: '#granim-canvas',
   name: 'granim',
   opacity: [1, 1],
   states : {
       "default-state": {
           gradients: [
               ['#834D9B', '#D04ED6'],
               ['#1CD8D2', '#93EDC7']
           ]
       }
   }
});
</script>

var granimInstance = new Granim({

element: '#granim-canvas',

name: 'granim',

opacity: [1, 1],

states : {

"default-state": {

gradients: [

['#834D9B', '#D04ED6'],

['#1CD8D2', '#93EDC7']

]

}

});

</script>

Granim.js

6. September 2016

List of Data Visualization Tools

Nice list of tools that will make your life easier, creating meaningful and beautiful data visualizations.

Maps
Charts
Data
Anything else :)

datavisualization.ch

4. September 2016

Crazy cool stuff – WebGL globe based on the boardroom scene from Tron: Legacy

The Encom Globe is a WebGL-based clone of the globe from the boardroom scene in Tron: Legacy. Its written using Three.js, with parts implemented in GLSL.

Really amazing!

Encom Globe

4. September 2016

Lets do it without a database – Kirby

Kirby is a PHP file‑based CMS. It has a jQuery-Inspired API and Content can be created with any Markdown Editor.

Its all about simplifying things :)

Kirby

12. August 2016

Build faster websites with a flat-file CMS like Grav

“Grav is a Fast, Simple, and Flexible, file-based Web-platform. There is Zero installation required. Just extract the ZIP archive, and you are already up and running. It follows similar principles to other flat-file CMS platforms, but has a different design philosophy than most.

Grav comes with a powerful Package Management System to allow for simple installation and upgrading of plugins and themes, as well as simple updating of Grav itself.”

Grav@GitHub

10. August 2016

Transformicons … Animated icons, symbols and buttons using SVG and CSS

Transformicons are animated symbols/buttons/icons that morph using a combination of SVG, CSS and HTML.
They also offer a builder to tweak the set.

transformicons.add('.tcon') // add default behavior for all elements with the class .tcon
              .remove('.tcon-menu--xcross') // remove default behavior for the first icon
              .add('.tcon-menu--xcross', {
                  transform: "mouseover",
                  revert: "mouseout"
              }); // add new behavior for the first icon

transformicons.add('.tcon') // add default behavior for all elements with the class .tcon

.remove('.tcon-menu--xcross') // remove default behavior for the first icon

.add('.tcon-menu--xcross', {

transform: "mouseover",

revert: "mouseout"

}); // add new behavior for the first icon

Transformicons