TJ Fogarty

My 2020

A recap of the year.

JavaScript

Vue Data Table

Exploring how to tackle a data table in Vue without relying on third-party solutions.

JavaScript

Coping with Bad Dates

Deriving multiple date ranges from a single one when presented with unavailable dates.

CSS

IE11 Placeholder Transition Issue

A combination of autoprefixer and transitions styles broke an input in IE11.

JavaScript

DraftJS: Mentions Plugin with Scrolling and Keyboard Navigation

Solving the problem of a scrolling results list with the DraftJS mentions plugin.

JavaScript

Text Selection Particle Effects

Creating particle effects based on text selection using the Web Animations API.

JavaScript

Building an Appreciation System

Using Google Sheets as a back-end, we can record likes on anything we want on a static site.

Self-Host Google Fonts

Self-hosting Google Fonts gives you more control over performance and loading of your fonts.

JavaScript

Image Parallax and Blur with Tornis

Using the Tornis library to create a parallax and blur effect on a cover image while scrolling.

Task Management

How I handle task management - a combination of software with pen and paper depending on the context.

JavaScript

Multi-Select Checkboxes with React

Listen for hotkeys to select multiple checkboxes in a few clicks.

Web Cloaks

A few observations on techniques that are used to disguise a problem with a website.

JavaScript

Derived Stores With Svelte

Getting up to speed with derived stores in Svelte and how they compare to something like computed properties in Vue.

JavaScript

Scrollable Container Controls with React

Managing a scrollable container with React by adding button controls, and seeing when they should be enabled or disabled.

Design

Website Inspiration

A few things that got me excited to try my hand at redesigning my website. That's not to say I'm a designer, cause I'm not.

HTML Imports & Component-Driven Development

Playing around with HTML Imports before deprecation, pining for a native, relatively hassle-free way of building a component library.

Performance

Improving Client-Side Performance

A few ways in which we can improve client-side performance focusing on images, third-party scripts and more.

JavaScript

Building a Table of Contents with the Intersection Observer API

How to build a live-updating table of contents using Intersection Observer.

Fathom Analytics

Installing Fathom analytics, an open-source alternative to traditional web analytics, on Heroku.

JavaScript

A Signal in the Static

Moving from Craft CMS to Hugo and Netlify

What Do I Know?

The web moves fast, but it doesn't invalidate what you already know.

JavaScript

Create an RSS Feed Reader

Recently, I was contacted by the folks at Skillshare to create a class. I’ve never done videos before, and really dislike hearing my own voice, but I was interested in giving it a go. They were very helpful in getting me set up, and even did some editing work

JavaScript

Upgrading to webpack 4

Moving from Laravel Mix to webpack 4, and the performance benefits.

JavaScript

Do Not Track

How to use window.doNotTrack to decide when to use tracking.

My Local Environment Timeline

The dust has more or less settled now in terms of the tools I use to develop for the web, at least on my own personal machine. I’m rocking a mid-2012 MacBook Pro, and while it’s starting to show its age it still powers through thanks to some