edwardhorsford

/*
=====================================================================
arrayToGovukTable

Convert an array to form needed for govukTable macro
=====================================================================

Expects array or nested array.

Usage:

joelanman

const express = require('express')
const router = express.Router()
const marked = require('marked')

// Route index page
router.get('/', function (req, res) {
  res.render('index')
})

// Add your routes here - above the module.exports line

david-mark

#How to Detect the Device Type?

The question of how to detect the device type running the given browser comes up a lot these days. It's virtually the same question as how to detect the browser (or browser version). It's often incorrectly "solved" in the same way, using indirect inferences based on browser sniffing.

##What is the Problem?

As with most such problems in browser scripting, it's best to look at what is to be inferred from such information. We know from experience that such information will often be based on coincidence and will expire at some point in the future, so it is best not to rely on it. An issue at the turn of the century was how to determine whether the browser was IE or not. But why was that information thought to be necessary? For example, at the time IE used attachEvent instead of the standard addEventListener to add event listeners.

##Indirect Inferences

david-mark

#Understanding Cross-browser Scripting

Cross-browser was invented around the turn of the century and is needed more today than ever. Unfortunately, it is also massively misunderstood, both by library developers and their users.

##What Cross-Browser Scripting is Not

Before getting into what cross-browser scripting is, let's look at what it is not. Cross-browser scripting does not imply that scripts will work in every browser and configuration known to man. Certainly a script that does work in every conceivable environment would be considered cross-browser, but such expectations are neither realistic, nor a requirement for a script to be considered cross-browser.

Depsite marketing claims, popular libraries such as jQuery and Lodash are neither cross-browser nor cross-platform. It's critical to understand that they are multi-browser and multi-platform, working in a handful of environments deemed worthy by their authors at the time of each version release. Th

david-mark

#Why Does jQuery Still Contain "Sizzle"?

The download of jQuery 3.1 contains the huge and complicated attempt to simulate the standard Selectors API called "Sizzle", allegedly to fix browser bugs.

It also attempts to make all CSS selectors work in supported browsers, but that's fairly pointless. If you need to support queries IE 8, then don't use CSS selectors that are unsupported in IE 8 (you'll know when you hit one as a friendly exception will be thrown). Same goes for IE 9 and 10, which are the only other browsers alleged to be supported by jQuery that contain significant gaps in CSS3 support. And even for those, it's a pretty short list of selectors that are missing in the browsers and supported (or attempted) by Sizzle.

As we'll see, jQuery doesn't support IE 8 at all, other than through old (1.x) and largely unmaintained versions that may well have problems in newer browsers (jQuery's designs have always required pe

david-mark

'use strict' Considered Pointless and Harmful

What is strict mode?

According to the MDN reference, it is:

ECMAScript 5's strict mode is a way to opt in to a restricted variant of JavaScript [sic].

It goes on to say:

david-mark

Having had some of the first words on "modern" host object detection and testing, feel like it's time to try to issue a final word. At least I hope it is the last word as I've seen a lot misinformation spread over the last several years. The Web is great for that. :)

The original observations and concepts came about from discussions on comp.lang.javascript (CLJ) and were written up by Peter Michaux almost a decade ago.

The first rule to remember is that - with regard to detection - we don't know anything about host objects. How are they implemented? Why do they behave like they do? We can never really know as - unlike objects native and built into javascript (JS) implementations - there are no ECMA specifications for host objects. They are described in t

cstrelioff

<!DOCTYPE html>
<html>
  <head>
    <title>responsive svg bar chart</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <!-- styles: should have reset.css first -->
    <link rel="stylesheet" href= "reset.css">
    <link rel="stylesheet" href= "main.css">

cobyism

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

david-mark

Progressive Destruction

Last time we looked at the decade-long (and failed) effort to reinvent event listener attachment. We saw that the inherent graceful degradation of HTML still beats the equivalent "unobtrusive" patterns and is certainly a better bet for prototyping an application than the usual suspect DOM libraries.

There's a myth that progressive enhancement is somehow a "better" technique for browser scripting, but the fact is that they are not mutually exclusive and each has its place. This may remind you of a similar argument regarding feature detection vs. browser sniffing, but it certainly doesn't apply in that context.

We left off with the start of a draggable toolbar that works with any manner or combination of pointing devices (including your fingers).