Sometimes you encounter websites which seem to have time traveled from 1999. No responsive UI, no widgets, just plain html input fields and selects.

Time to improve these sites 🙂

Greasemonkey overview

Greasemonkey is a browser plugin which lets you inject client-side JavaScript into the webpage just as the developer could have intended to do.

GM for firefox

If you use Google Chrome you can use the Tampermonkey extension.

Now you can manipulate the DOM to make the page look more appealing and function better.

Hello World Greasemonkey

Let’s start with a simple script:

// ==UserScript==
// @name hello_greasemonkey
// @namespace https://creatronix.de
// @description prints "Hello Greasemonkey" to the console
// @include https://creatronix.de*
// @version 1
// ==/UserScript== 
console.log("Hello Greasemonkey");

This script does nothing more than printing a string to the console

Ctrl + Shift + J opens the Browser console in Firefox.

Hint: If you don’t see the console output you have to activate “Show Content messages” in the gear menu of the browser console.

The @include statement ties the script to a specific URL. The wildcard * can be used to indicate all sub-URLs shall be included as well.

But wait – there is more:

Add jQuery UI Datepicker

I’ve had a page where the date input where just plain input fields.

With the following script I’ve added a nice date picker widget.

For that purpose you can use jQuery and jQuery UI.

With the @require you can use a CDN to import the needed libraries.

// ==UserScript==
// @name add_calendar_widget
// @namespace creatronix
// @description adds an jQuery-UI calendar to date fields
// @include <the_site_to_insert_the_script>
// @require https://code.jquery.com/jquery-3.6.0.min.js
// @require https://code.jquery.com/ui/1.13.1/jquery-ui.min.js
// @version 1

// ==/UserScript==

$(document).ready(function(){
  console.log("script works");
  $( 'input[name="from"]' ).datepicker({ firstDay: 1, dateFormat: 'dd.mm.yy' });
  $( 'input[name="until"]' ).datepicker({ firstDay: 1, dateFormat: 'dd.mm.yy' });
  $("#ui-datepicker-div").css({'background-color':'white'});
}

The post How to use Greasemonkey to make your life easier appeared first on Creatronix.

constants.js

export const projects = [
  "Project-A",
  "Project-B",
  "Project-C",
];

script.js

import {projects} from "./constants.js";

The post JavaScript modules appeared first on Creatronix.

Calculator for 5 rings

The post Calculator for Resistor Values appeared first on Creatronix.

I got an “Invalid Host Header” error when running a VueJs app on a linux machine with

npm run serve

To work around this you can put the following code into you vue.config.js file:

module.exports = {
    // options...
    devServer: {
        disableHostCheck: true,
    }
}

The post Invalid Host Header with npm run server appeared first on Creatronix.

TL;DR: don’t use var anymore when You declare variables.

Some examples:

As You can see a variable declared with the var keyword is visible outside its enclosing scope. Most of the time it’s not what You want.

When You enable ES6 support in PyCharm it already warns You if You use var:

To declared a variable which is on visible in its scope You can either use let or const.

Let lets your variable be mutable so you can use it in a loop as counter. If You want to guarantee even more that one variable is used for one concept only You can use const which makes the variable immutable.

The post ES6: var vs let vs const appeared first on Creatronix.

Grunt is a task runner which comes in handy for a lot of setup and configuring work e.g. concatenating and minimizing JavaScript or CSS files

To get started You can add grunt via yarn to your project

yarn add grunt

Configuration

Grunt looks for a Gruntfile.js file in your root directory. Yes it is Gruntfile.js with a capital ‘G’.

Linting with JShint

yarn add grunt-contrib-jshint

module.exports = function(grunt) {
  grunt.initConfig({
    jshint: {
      all: ['Gruntfile.js', '/js/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.registerTask('lint', ['jshint']);
};

This configuration will print all findings directly onto the console which is nice for testing the script but when you burn down your lint issues a file comes in handy.

Configuring JSHint’s Output Format

To visualize the findings in Jenkins you can configure the checkstyle format. It produces an XML file which you can use inside Jenkins’ checkstyle plugin.

When You want to have a more human readable format you can generate an html report. Therefore You have to install the jshint-html-reporter:

yarn add jshint-html-reporter

and configure the JSHint task accordingly.

options: {
   reporter: require('jshint-html-reporter'),
   reporterOutput: 'jshint.html'
 },

You can have both configurations in one file

module.exports = function(grunt) {

  grunt.initConfig({
    jshint: {
      options: {
        globals: {
          jQuery: true
        }
      },
      src_files: ['Gruntfile.js', 'app/static/js/*.js'],
      local: {
        options: {
          reporter: require('jshint-html-reporter'),
          reporterOutput: 'jshint.html'
        },
        src: [ "<%= jshint.src_files %>" ]
      },
      jenkins: {
        options: {
            reporter: 'checkstyle',
            reporterOutput: 'jshint.xml'
        },
        src: [ "<%= jshint.src_files %>" ]
    }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.registerTask('lint', ['jshint:jenkins']);
  grunt.registerTask('lint-local', ['jshint:local']);
};

The post Lint your JavaScript with grunt and jshint appeared first on Creatronix.

Fiddling around with the wire webapp which is available on GitHub I came across yarn.

Yarn is a package manager like npm which accesses the same repositories.

The design goals are reproducibility of builds, speed and security.

Installation

npm install -g yarn

or on macOS

brew install yarn

yarn --version

A new yarn project can be started with “yarn init”.  After a couple of questions yarn creates a package.json file for you.

$ yarn init
yarn init v0.27.5
question name (yarn_test): yarn_test
question version (1.0.0): 1.0.0
question description: see how it works
question entry point (index.js): index.js
question repository url:
question author: jboegeholz
question license (MIT): MIT
success Saved package.json
Done in 35.38s.

Adding dependencies is easy as well:

 $ yarn add grunt
 yarn add v0.27.5
 info No lockfile found.
 [1/4] Resolving packages...
 [2/4] Fetching packages...
 [3/4] Linking dependencies...
 [4/4] Building fresh packages...
 success Saved lockfile.
 success Saved 89 new dependencies.

After adding the first dependency yarn downloads all sub-dependencies as well. On interesting fact is the creation of a lock file for dependency versions. That means If you check in the yarn.lock that you can reproduce your builds deterministically.

When you already a project setup you can easily install all dependencies with:

$ yarn install

The post Yarn – An alternative package manager for node.js appeared first on Creatronix.

I wanted to code some node.js stuff and Jetbrains already got a plugin for PyCharm. Before installation:

https://www.jetbrains.com/help/pycharm/2017.1/node-js-and-npm.html

The installation is painless and after a restart you have full node.js support!

The post Node.js with PyCharm appeared first on Creatronix.

is the short form for:

$( document ).ready(function() {
    console.log( "ready!" );
});

Very unintuitive, this does not work:

$("input#myInput").bind("change", function(){
});

Instead of “change” You have to use “input”

$("input#myInput").bind("input", function(){
});

The post Are You ready? / jQuery struggle appeared first on Creatronix.

As I am a bit nosy I wanted to know “how” inefficient these selectors are. So I compared the inefficient

$("#items tbody");

with the optimized

$("#items").find("tbody");

Here is the test code:

window.onload = function () {
    test("unoptimized", function () {
        for(var i = 0; i < 100000; i++){
            $("#items tbody");
        }
        assert(true, "Test finished");
    });
    test("optimized", function () {
        for(var i = 0; i < 100000; i++){
            $("#items").find("tbody");
        }
        assert(true, "Test finished");
    });
};

I used the little test framework from the book Adventures of the JavaScript Ninja

The results vary from run to run but the optimized version just takes around 55% of the time which makes it almost twice as fast.

Though the single execution is in the nanosecond range, if you heavily rely on using jQuery, it might be worthwhile to optimize your selector statements.

Code on GitHub

The post Inefficient jQuery Selectors appeared first on Creatronix.