nick's blog

JS code-splitting with ES modules in the browser

Recently the New York Times shipped an interactive built with native JavaScript ES modules, using Rollup.js instead of Webpack to provide a 25% reduction in JS shipped. This was

javascript

JS things I never knew existed

I was reading through the MDN docs the other day and found these JS features and APIs I never knew existed. So here is a short list of those things,

uglify

Transforming Async, Await JS and minifying using Uglify

Async and Await makes asynchronous code so much cleaner and nicer to work with. It is widely supported by all the latest versions of modern browsers, including Node v7.6+. See can i use for browser support and node.green for node support. So

webpack

Using Workbox + Webpack to precache with Service Worker

Workbox is a new project from Google that makes service worker use-cases such as caching, background sync and queueing of analytics whilst offline easier to code. "Workbox is a

javascript

Debugging WebSockets using JS Proxy Object

Debugging WebSocket connections with JS Proxy object is easy and requires surprisingly little code. Proxies allow you to set "traps" which can listen for new operator calls ("construct"), function calls ("apply") and more. Examples Here is a basic

javascript

Using Rollup.JS to create JS modules

Using Rollup.JS to create JS modules and libraries is easy, it can easily output AMD, CJS, ES, IIFE and UMD JS formats with minimal configuration. Its plugin structure really nice too, you should find nearly anything you need here. This post will focus

docker

Create your own custom RetroPie image

Building your own custom RetroPie image can be really slow, so I created a simpler way to do it using Docker and bash scripts - introducing docker-build-retropie-image! Why Creating custom

HTML5

Record to an Audio File using HTML5 and JS

Pure Native HTML5 Audio Recording is here and has been for a while, no more flash needed! Don't get too excited though, it still requires a bit of work to

babel

Reduce your JS payload when using polyfills in Babel

Are you importing the babel polyfill like... import 'babel-polyfill'; But only need the odd function like Object.values from ES2017? Then maybe you can reduce the size of your JS bundle by installing those specific polyfills. Importing the whole of babel-polyfill could be adding

logstash

Elasticsearch - Extract logstash logs

So you have sent all your logs from logstash to your elasticsearch instance, now they are stored safely and with Kibana on-top to query, filter and visualise them beautifully. This post is about how to get your logs back from elasticsearch! Export Examples Export

kibana

Kibana 4 - Import and Export Visualizations and Dashboards with Elasticdump

Kibana 4.0.0 does not allow you to save and load JSON visualizations and dashboards through its interface, Kibana 3 had an option to do this. This missing feature is planned to be part of the Kibana 4.1.0 release. Luckily there

My First Ever Program

Sometime in the '90s I started to learn to program with BASIC on a VTech laptop. I quickly got bored of all the other games on it and started an obsession with trying to program with it instead. Luckily it came with a manual

Initial Commit

And hopefully the first of many. I'm no writer but I really love to read about new technologies, hardware and programming. So my future posts will no doubt be about exactly the same topics! Starting from when I first learned how to program to