Build better websites with Eleventy

17 Sep 2020

We have lost the art of building websites. Don't get me wrong, we build for the World Wide Web all of the time. We build Apps and Components and Services and Content Management Systems, but we seldom just build websites. A surprisingly large amount of what we build can (and probably should) just be HTML, CSS and a (small) sprinkling of JavaScript. We have this stigma against building static pages, which is largely unfounded. Well, enter Eleventy, the static site generator that we deserve. Join me as I show you how to build simple, easy, engaging websites using Eleventy. We'll look at the basic premise of the tool, as well how to customise it to suit your needs. By the end of this talk you will have a newfound respect for static websites, and be armed with everything you need to build better websites.

Diagnosing performance problems with Lighthouse

02 Apr 2020

Performance is a feature. It is arguably the most important feature of modern web experiences, but at times it can be a dark art. Complex build tools, confusing profilers and an abundance of metrics make it seem like one has to be a true web wizard to understand it all. It shouldn’t be hard and luckily isn’t - provided you use the right tools. Built directly into Chrome, the Lighthouse audit reports drive away from the darkness and shine a spotlight on the opportunities available to you, making it easy to improve. This talk will provide a detailed walkthrough of optimising performance using the Lighthouse audit report. By way of a challenging application, we will identify and implement performance optimisations. We will make small, measurable changes to improving our web application, taking one easy step at a time.

Light up the web with lit-html

16 Oct 2019

What if I told you that building on the web could be easier? What if I told you that you didn't need complicated frameworks, confusing tools and convoluted builds? Let me introduce you to my little friend; lit-html 🔥. At only 3.5kb gzipped (⁉️) this minuscule framework leverages off of the modern web platform to make it efficient, expressive, and extensible. In this code oriented talk, I hope to show how low friction it is to work with lit-html. Together we'll build a TodoMVC application, starting from first principles and ending with WebComponents - all with (almost) zero tooling. Come and see for yourself: the web can be easy, fun and lit 🔥.

A (Re)Introduction to JavaScript

26 May 2019

JavaScript is weird. It is a product of its failures as much as its successes. As a language, it is both modern and outdated. Cross-platform, yet not. Interpreted, but can be compiled. Loved, yet reviled. 'Good' JavaScript written a year ago looks very different to what one might write today, never mind code written 10 years ago. Every year a new set of features is ratified into the ECMAScript standard and is rolled out by browser manufacturers. This continual evolution can be frustrating and confusing but provides us with a unique opportunity. To embrace change, unlearn what we take for granted, and fall in love with JavaScript (again). This talk will attempt to (re)introduce this contrarian language, addressing novices and veterans alike. It will make fun of JavaScript's foibles, mitigate its faults, and emphasize its strengths. It won't attempt to divorce it from context but will show which parts of the language you can use and when you should use them.

Now, Now-Now, and Just-Now; Building Network Tolerant PWAs

11 Dec 2018

Web experiences are brittle. There are lots of things that break them; poor network coverage, over-subscribed access points, power interruptions and even cable theft. Historically, we have simply shrugged and given up, but now we can do better. The widespread availability of service worker, complemented with good tooling such as workbox, allow us to effectively address intermittent connectivity. This code-oriented talk will show how to practically use workbox to create robust, network tolerant web experiences. It will cover the creation of service workers for preloading, caching, and even full offline support using the background sync API.

Building PWAs with React and Workbox

02 Dec 2018

The holy grail of web applications is having them be near-native performance, and to a large degree this has driven the JavaScript revolution. To truly realise that goal we need to embrace native design thinking for our applications, applying it not only to our code but also to our content. Using ideas from Progressive Web Applications, a modern framework such as React, and good tooling in the form of Workbox we can create engaging, fast and available application experiences - the best of both native and web. This code-oriented talk will show how to practically use select principles of Progressive Web Applications in conjunction with React and Workbox to create fast and compelling web experiences. It will cover the creation of an application shell and go into using service workers for preloading, caching and offline support.

Workbox wizardry

21 Oct 2018

Service workers are powerful features of modern web experiences that seem like a whole bunch of black magic to the uninitiated. A proliferation of frameworks, an array of browser APIs, and a slew of tools all combine to cast a pall of confusion over the topic. Never fear; we will use the incredible Workbox library (and tools) to dispel all shadows of doubt, and confidently build service workers. This code-oriented talk takes an extensive look at the different ways workbox can be used. It shows different pre- and runtime-caching strategies, explains the challenges behind service worker life cycle events, and explores offline strategies using background sync. It will even show you how workbox can be used on traditional server-side websites - giving them a real performance boost. So come along, level up, and add a few more incantations to your spellbook.

The Polymer PWA Starter Kit

26 Jun 2018

Today we will build a PWA! We will take one part polymer, one part lit-html, and one part redux. We will then mix thoroughly and place on top of a sw-precache configured service worker. Covering the result with a combination of chrome puppeteer and WCT suites, we will bake it for approximately 45 minutes using the polymer-cli. This code-heavy talk will look at lit-html, LitElement, and the PWA Starter Kit. We will explore how the starter kit is set up, and build a simple PWA using it.

Building Progressive Web Apps with Angular

15 May 2018

The holy grail of web applications is having them be near-native performance, and to a large degree this has driven the JavaScript revolution. To truly realise that goal we need to embrace native design thinking for our applications, applying it not only to our code but also to our content. Using ideas from Progressive Web Applications and a modern framework such as Angular we can create engaging, fast and available application experiences - the best of both native and web. This code-oriented talk will show how to practically use select principles of Progressive Web Applications in conjunction with Angular to create fast and compelling web experiences. It will cover the creation of an application shell and go into using service workers for preloading, caching and even offline support.

PWAs: What are they, and why should you care?

15 Feb 2018

The hype is real. When the excitement about a technology reaches fever-pitch, it becomes difficult to separate the signal from the noise. In the case of Progressive Web Apps (PWAs), it's become very difficult to pin down exactly what they are. Are they indeed the 'next big thing'™ or are they just another fashion trend. Will life carry on if you let the PWA train pass you by, or should you be paying attention? This talk will explain what PWAs are, and what they are not. It will detail the design patterns, technologies and philosophies that they are composed of. Finally, it will look at real world usage trends, for both web and mobile, and attempt to answer the burning question: should you care about PWAs?

Getting Started with Polymer 3.0

05 Oct 2017

Polymer is not just a framework, it is an ambitious attempt to scry into the future and inform the present - to steward and direct the evolution of the Web Platform. It has inextricably linked itself to Web Components, with the sole ambition of making them globally native. To be clear, this is a 'framework' that is actively courting its own obsolescence, growing smaller with every subsequent release. It is in pursuit of this that the latest version of Polymer was announced, informed by recent W3C standardisation victories as well as mainstream adoption of Web Platform features. The project is removing features, changing the ecosystem, improving cross-framework interop, all to empower the platform. This talk will give a brief overview of Polymer 3.0, the direction of WebComponents and make a case for why you should care about Polymer and the direction of the Web Platform.

Building a Twitter wall in 15 minutes

27 Sep 2017

We have been building client-server web applications using the same paradigms since bellbottoms, disco and IBM were popular. Everything since then has been a rehash of RPC and Request-Response, with JSON + REST being just the latest incarnation. We can do better. We now have the tools available to challenge those paradigms and build a new breed of application. Using reactive programming techniques and data streaming we can easily build rich, reactive web applications. This code-oriented talk will show how to use Socket.IO to stream data to an Angular application. It will cover websocket basics, RxJS and working observables, as well as how it all seamlessly fits into Angular’s data-binding.

Riding the Angular 2 wave

12 Aug 2016

The imminent release of Angular 2 is poised like a tsunami, ready to take the World Wide Web by storm, and will inevitably drag the entire JavaScript ecosystem along for the ride. Angular 2 sees itself less as a framework, and more as a platform on which to craft your single page applications. This session will uncover the cornerstone of an angular application by illustrating the new web-component based design, improved dependency injection, and unidirectional data flow. It will also demonstrate the routing model, templating and practical debugging. Everything needed to kick start a project, and start riding the Angular 2 wave.