Sometimes it can be very useful to have magical constants like __FILENAME__ or __LINE__ available within your sourcecode – especially for debugging or in merged files. Unfortunately, such feature is missing in javascript but it is possible to implement it by yourself using a file-postprocessing filter in your gulp build script. Thanks to gulp-concat-util, it’s […]

Prevent Errors from breaking Gulp watch

gulp-plumber, custom error handler, gulp-prettyerror

As an intermediate javascript developer, you may using gulp these days – a great and straightforward streaming build system with a lot of advantages compared to grunt. For example, i’ve switched from a bunch of custom, ANT based scripts to gulp for the next EnlighterJS major version and it saves a lot of time! Especially […]

Node.js Simple Command Line Confirm Messages

user confirmation, terminal actions, yes, no

Sometime, special terminal commands can be dangerous for your users. To ensure that they are really want to run the command the proven “best practise” is to wait for an explicit user confirmation by typing yes/no into the terminal.

Install “prompt” using NPM#

First of all, you have to install prompt – a powerfull package for command line prompts & user interactions. The “–save” option will add this package to your package.json file.

npm install prompt --save

Confirm Dialog#

After installing the prompt package you can use the following code to show a confirm dialog to your users.

var _prompt = require('prompt');

// user confirmation required!
_prompt.start();

// disable prefix message & colors
_prompt.message = '';
_prompt.delimiter = '';
_prompt.colors = false;

// wait for user confirmation
_prompt.get({
    properties: {
        
        // setup the dialog
        confirm: {
            // allow yes, no, y, n, YES, NO, Y, N as answer
            pattern: /^(yes|no|y|n)$/gi,
            description: 'Do you really want to format the filesystem and delete all file ?',
            message: 'Type yes/no',
            required: true,
            default: 'no'
        }
    }
}, function (err, result){
    // transform to lower case
    var c = result.confirm.toLowerCase();

    // yes or y typed ? otherwise abort
    if (c!='y' && c!='yes'){
        console.log('ABORT');
        return;
    }
    
    // your code
    console.log('Action confirmed');
    
});

 

Create Static Social-Media “Share” Buttons without Javascript

no external resources required, corporate privacy compliance

Social-Media Share Buttons are everywhere, but most of them are working with external hosted javascript resources which are loaded on each page request. Depending on the servers cache settings this can cause multiple additional http request for your visitors. Additionally it can raise some privacy issues becaue of the possibility that your users can be […]

MooTools: A modern Element.highlight() implementation

using CSS3 Transisitons instead of Fx.Tween

Use the following code as Element.highlight() replacement:

Element.implement({
    /**
     * Custom Element Highlighting Function
     * @param color
     */
    highlight: function(color){
        // get current background color
        var originalColor = this.getStyle('background-color');

        // set new background color
        this.setStyle('background-color', color);

        // restore background color after 300ms
        (function(){
            this.setStyle('background-color', originalColor);
        }).delay(300, this);
    }
});

It will only change the background color to the given value and reverse this after a time of 300ms. To get a fading-effect you need to add the following css, matching the elements you wish to apply the highlight() method:

.autocomplete-input{
    transition: background-color 200ms;
}

That’s it ;)

Are you using a Yubikey and want to create your custom Keyserver written in Node.js ? In this case this piece of code might be useful :)

/**
 * Convert the Yubico MODHEX encoded Strings to hex
 * @param modhex String
 * @returns hex String
 */
var modhex2hex = function(modhex){
    // strip whitespaces and string cleanup - all non matching characters are 0x00 (c in modhex)
    modhex = modhex.replace(/\s*/g, '').replace(/[^cbdefghijklnrtuv]/g, 'c');

    // even length ?
    if (modhex.length%2 !== 0){
        return null;
    }

    // modhex mapping base; c.....v => 0x0 ... 0xF
    var modhexBase = 'cbdefghijklnrtuv'.split('');

    // tmp
    var output = '';

    // convert
    for (var i=0;i<modhex.length;i++){
        // convert index to hex
        output += modhexBase.indexOf(modhex.charAt(i)).toString(16);
    }

    return output;
};

console.log(modhex2hex('te vt hh fg ue dk gv rt lv hb lu gf nk ge ng cv'));

Google Universal Analytics provides a great possibility to track custom events on your website. These feature can be used to analyze special user-interactions with e.g. advertised/highlighted content or social media links. The recorded data can be directly used to optimize your website!

The event tracking is very simple:

To simplify the integration you can implment a simple data-binding which will automatically add event listeners (click) to you DOM elements. Just add an additional attribute to your elements which includes (in this example) a prefix, the event-category and the event-label (scheme: "prefix:category:label").

Example: Social Links with data-binding#

<a href="https://www.facebook.com/groups/" title="Facebook" data-event="ga:social:facebook" class="FacebookButton"></a>
<a href="https://twitter.com/" title="Twitter Stream" data-event="ga:social:twitter" class="TwitterButton"></a>

Finally, we need some javascript to process the additional attributes. You should always check if Google Analytics is enabled (maybe an adblocker is used or an opt-out option is set!) to avoid javascript errors. The following code will send an event to analytics each time a user clicks on the bound elements.

MooTools based Data-Binding#

window.addEvent('domready', function(){
  // GA loaded ? Used to avoid js errors on blocked analytics
  if (typeof ga !== 'function'){
    return;
  }
  
  // event binding
  document.getElements('[data-event]').each(function(el){
    // get event string
    var d = el.get('data-event').split(':');
    
    // format:  "type:category:name"
    if (d.length != 3){
      return;
    }
    
    // extract vars
    var evtType = d[0];
    var evtCategory = d[1];
    var evtName = d[2];
    
    // outgoing link on click event
    el.addEvent('click', function(){
      // universal analytics event ?
      if (evtType == 'ga'){
        ga('send', 'event', evtCategory, 'click', evtName);
      }
    });		
  });
});

 

Simple “Zen” Reading Mode with MooTools

simplifying website headers on-demand

Gigantic, image-based headers are an up-to-date web-feature. It looks amazing but they are squandering space, especially on sites with large tutorials containing long text.

This site is using a simply method which transforms the header-size depending on the current page-scroll: the users scrolls down and the header is automatically transformed to a smart toolbar – i’m calling this mode (following WordPress’ fullscreen editor) “Zen” reader mode. Need a demo ? Just open an article on this site and scroll down.

To integrate this feature into you website, you need the followindd things:

  • “Standard” Header Design
  • “Smart/Compact” Header Design
  • Javascript Page-Scroll Observer
  • Optional: Amazing css3 transition

Different Header-Styles (using LESS):#

/* Basic (default) Styling */
.navbar-beyond{
  height: 70px;
  .transition(500ms);
}

/* Smart Styling */
.navbar-beyond-light{		
  height: 45px;
  border-bottom: solid 1px #e7e7e7;	
  background-color: @color_bluegrey1 !important;
}

/* Large Navbar */
.navbar-beyond-dark{
  background-color: rgba(0,0,0,0.85);
  border-bottom: none;
}

Scroll-Observer Script (MooTools) :#

Description: user scrolls 200px down and the header is transformed by changing the css classes

var head = document.getElement('header .navbar-beyond');
... 
window.addEvent('scroll', function(){
  // get current scroll
  var s = this.getScroll().y;
        
  // dark/light topnav
  if (s > 200){
    head.addClass('navbar-beyond-light');
    head.removeClass('navbar-beyond-dark');
  }else{
    head.addClass('navbar-beyond-dark');
    head.removeClass('navbar-beyond-light');
  }
});

Header Structure (Bootstrap based example from this website)#

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top navbar-beyond navbar-beyond-dark" role="navigation">
  <div class="container container-lg">
    <!-- Website Title + Mobile Nav Button !-->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="https://andidittrich.de">Beyond Technology<br /><span>beyond the visible world</span></a>
    </div>
    
    <!-- Navi !-->
    <div class="navbar-collapse hidden-xs">
      <ul id="menu-topnavi" class="nav navbar-nav navbar-right">
      ....
      </ul>
    </div>
  </div>
</div>

<!-- Image -->
<div id="HeaderImage">
</div>

Fixed Scroll Navigation with MooTools

sticky navigation bar that remains fixed on scrolling

The Goal# Currently a very popular and often used technique wich provides a great usability. There are a several jQuery plugins and code-snippets available which are providing this feature but they are sometimes very complex and didn’t work with MooTools based websites. This tutorial shows you how to create a sticky navigation bar that remains […]

MooTools Multitouch Event Class for Android and iOS

improoved touch support for mobile devices within the mootools framework

Multitouch and Mobile Devices..# There are several tutorials and demos about multitouch usage on mobile devices on the web, but they cause some platform dependend problems: e.g. on Android 3.1 multitouch events are limited on a single dom element and touchmove/touchend cannot correctly added to DOM-Elements. So here is the platform independent way with desktop […]