Stencil Web Components Intro

Sharing components between applications built with different frameworks is a challenge. It's often the case that a design system's component library will have separate implementations for each target framework e.g. React and Angular

Posted on May 2, 2020
HTMLJavaScript

Output JavaScript Objects to HTML with DomLog

A library to stringify model objects and display them in the DOM 👌

Posted on Feb 1, 2020
JavaScriptHTMLnpm
Demo

Theming: CSS Variables in SCSS

CSS variables (aka CSS custom properties) are particularly useful when it comes to theming a web application. When using SCSS, it can be difficult to see how SCSS and CSS variables can be used in conjunction with one another

Posted on Sep 6, 2019
CSSSCSSAngular

Functional Programming Utilities with ES6+

Utility libraries like Ramda and lodash/fp make functional programming (FP) very accessible. To use these libraries effectively, an understanding of what's going on under the hood is still required, and a good grasp of FP concepts goes a long way

Posted on Jul 16, 2019
FP
Demo

Angular Universal - Relative to Absolute Http Interceptor

The @nguniversal/express-engine makes adding server side rendering to an app quite straightforward; although there are some caveats. Relative URL requests will fail during server side rendering without a HttpInterceptor to convert them to absolute...

Posted on May 1, 2019
Angular

Angular Dublin July 2018 - RxJS Throttling Presentation

Slides and StackBlitz⚡ demo from my presentation at the Angular Dublin Meetup, held in the Jet.com Dublin offices, July 2018

Posted on Jul 14, 2018
AngularJavaScriptrxjs
Demo

Markdown to HTML to Angular Components at Runtime

Generating HTML from Markdown at runtime is a great way to load content, but the generated HTML sits outside of the the Angular ecosystem. Here I detail a method for replacing the generated HTML elements in the DOM with dynamically created Angular components

Posted on May 1, 2018
AngularContentfulMarkdown
Demo

Route Resolvers: Rxjs BehaviorSubject With CombineLatest

Using Rxjs CombineLatest in Angular route resolvers with multiple BehaviorSubject subscriptions

Posted on Apr 21, 2018
Angularrxjs
Demo

Angular routerLink with navigation delay

Navigation using routerLink on an anchor element occurs immediately, but there are situations where delaying navigation after clicking a link would be benificial...

Posted on Mar 11, 2018
Angularnpm

Debugging Viewport Height in Chrome & Firefox for Android

A brief look at setting up remote device debugging for Chrome and Firefox on Android. I look at some of the differences in viewport and relative height sizing for these mobile browsers when the URL Bar is shown/hidden

Posted on May 13, 2018
GoogleFirefoxHTML

Cover Image Transitions With Reused Routes in Angular

Cover image transitions: transitioning background images on load, handling Angular route-reuse, forcing style recalculation for re-applying initial styles

Posted on May 12, 2018
AngularHTMLCSS
Demo

Installing gtag.js Analytics for Single Page Applications

Google's gtag.js is the most recent implementation of their analytics and tracking API. The default installation 'snippet' works well for traditional web pages, but requires some modification for single page applications

Posted on Apr 26, 2018
AngularGoogle

Git - Commit Config Files But Ignore Future Changes

There are times when you want to commit a file to a public/shared GitHub repository but don't want any further changes to that file being committed...

Posted on Apr 5, 2018
Git

Angular CLI - Remove CSS Vendor Prefixes in Development

When debugging CSS in Chrome DevTools, the vendor prefixes added during the build phase can make the CSS difficult to read. It would be nice to have a way of preventing vendor prefixes being added to the CSS while in the development phase...

Posted on Feb 19, 2018
Angular CLIAngular
v7.2.15+sha.e7897e1