Blog
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
Output JavaScript Objects to HTML with DomLog
A library to stringify model objects and display them in the DOM 👌
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
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
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...
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
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
Route Resolvers: Rxjs BehaviorSubject With CombineLatest
Using Rxjs CombineLatest in Angular route resolvers with multiple BehaviorSubject subscriptions
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...
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
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
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
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...
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...
