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

31. May 2016

Plyr.io – A simple, accessible and customizable HTML5, YouTube and Vimeo media player

A simple, accessible and customizable HTML5, YouTube and Vimeo media player.

Accessible – full support for VTT captions and screen readers
Lightweight – under 10KB minified and gzipped
Customisable – make the player look how you want with the markup you want
Semantic – uses the right elements. <input type="range"> for volume and <progress> for progress and well,<button>s for buttons. There’s no <span> or <a href="#"> button hacks
Responsive – as you’d expect these days
HTML Video & Audio – support for both formats
Embedded Video – support for YouTube and Vimeo video playback
API – toggle playback, volume, seeking, and more
Universal events – no messing around with Vimeo and YouTube APIs, all events are universal across formats
Fullscreen – supports native fullscreen with fallback to “full window” modes
i18n support – support for internationalization of controls
No dependencies – written in “vanilla” JavaScript, no jQuery required
SASS and LESS provided – If you like these over plain CSS

GitHub

25. May 2016

Responsive Emails with MJML

MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices.

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>

          <mj-image width="100" src="/assets/img/logo-small.png"></mj-image>

          <mj-divider border-color="#F45E43"></mj-divider>

          <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>

        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

<mjml>

<mj-body>

<mj-container>

<mj-section>

<mj-column>

<mj-image width="100" src="/assets/img/logo-small.png"></mj-image>

<mj-divider border-color="#F45E43"></mj-divider>

<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>

</mj-column>

</mj-section>

</mj-container>

</mj-body>

</mjml>

mjml