tim545

// Method 1: simply use Highcharts built-in functionality (SVG -> Highcharts server -> PNG)
// Downside: won't work in webview native apps that don't handle the form response
highcharts.exportChart({
    filename: filename
});

tim545

Structuring a large jQuery application

This document assumes you are building a traditional backend-heavy application as opposed to a frontend-heavy appliction which would typically use a framework like Angular or React. The use of these frameworks make this document irrelevant, however also require a change to your application architecture and a much larger overhead in order to get content onto a page, so as a simple way to build interactive web content a simple jquery based js stack will do fine.

Directory structure

It's important you use a directory structure which is impartial to your development environment, chosen server language (Python v. Java v. C# ...), and styling framwork (Twitter Bootstrap etc). This layer of separation means you can swap out the styles or the backend with minimal changes to the Js, simple and maintainable.

Here's an example from the project root:

tim545

Working with Docker

Although Docker has a huge learning curve, it also has a rewarding goal. Once you understand the docker way, things which were previously a blocker to your development can be done surprisingly easily.

Your production environment becomes the same as your development environment, making deployments simple.

Keeping your dev machine clean of muliple language dependencies also becomes a reality.

Difficult concepts

tim545

// Adds a method to the Array prototype to return a random array item
Array.prototype.random = function() {
  return this[Math.floor(Math.random() * this.length)];
};

tim545

Set up NodeJS devemlopment environment

These instrcutions assume you have already set up your machine for development

Install NodeJs from nodejs.org

Follow the steps to fix NPM permission issues - https://docs.npmjs.com/getting-started/fixing-npm-permissions

To install all generic modules you will aldmost definitely need run this from the command line npm install -g grunt-cli gulp karma-cli node-inspector bower nodemon whathappened

tim545

'Zero Width Space' character

I had some trouble with this character in a client project, it was hidden inside a configuration string which is validated in the clients API. It's basically invisible, literally a space character with zero width, it could not be seen but it was breaking at the API because it would not validate, causing problems with hundreds of user accounts.

The Unicode value of this character is U+200B, and it's evil, very evil. Lying in wait to break your applications while leaving no sign of it's presence...

It also has some friends, check the answer of this Stack Overflow question

In my project, it was one of my colleuges who managed to find the character, he re-copied the string into the code and Git showed that the line had been changed, even though all the Git GUI's didn't actually show any difference. He ran git diff in the command line and this did show the Unicode character being deleted, that's somet

tim545

Detect a mobile device in Javascript

This function will return true for any mobile device and false if not mobile.

//initiate as false
var isMobile = false;

// device detection

tim545

"object" != typeof JSON && (JSON = {}),
function() {
    "use strict";

    function f(t) {
        return 10 > t ? "0" + t : t
    }

    function quote(t) {
        return escapable.lastIndex = 0, escapable.test(t) ? '"' + t.replace(escapable, function(t) {

tim545

Good Technical Articles

This is a running list (in no particular order) of good articles/posts/tutorials I find on the web. I have tried to keep it narrowed down to articles which are in a sense 'timeless' in that they don't just teach something about a particular framework but also have something to be learnt about programming in general.

Conventions

• Popular coding conventions in GitHub
• JSON API specification
• Accessibility cheatsheet

tim545

New development machine setup (Mac)

An attempt to store the steps for setting up a mac from scratch for web development. (Excluding any language-spcefic dependencies, for example Node.js or Ruby would not be listed here). Also note that this list only uses open source software, so replace anything with a paid alternative if appropriate.

These should be done in order:

Show hidden files by default

• open Terminal and run defaults write com.apple.finder AppleShowAllFiles TRUE && killall Finder