DEV Community: TJ Fogarty

Text Selection Particle Effects

TJ Fogarty — Fri, 17 Apr 2020 07:31:41 +0000

After reading Playing With Particles Using the Web Animations API I wondered if it would be possible to create particle effects based on the user selecting text.

You could whip up something quick by listening for a mousedown event and adding the particles based on the mouse position. It looks cool, but I wasn't too happy because it doesn't look as neat, and it doesn't work if you're doing selection with the keyboard.

There are two events we need to make this work:

selectstart
selectionchange

selectstart is needed to reset our initial top position. We use this to check if we're moving up or down in our selection. Once a selection is finished, and we start again, and the value can be reset.

selectionchange is fired any time our selection changes, and we'll use this to generate our coordinates for our particles. This is where most of the work is done.

Here's how it goes:

We start selecting some text, and selectstart is fired, where we reset our initial top value to null
selectionchange is then fired where get the current selection using window.getSelection()
With this, we get the range of text using selection.getRangeAt(0), followed by the bounds using range.getClientRects()
The bounds now contain a DOMRectList with our selections, and we're only interested in the first and last item in this list
If our initial top value isn't set (as it's been reset by selectstart) then we assign it to the top value of the first DOMRect item in the list
We check if the left value has changed in the most recent DOMRect item in the list
We check if we're moving up or down the page with our selection
If we're moving down, we use the most recent DOMRect in the list, otherwise, we use the first
If we're moving left, our x position will be the left value, otherwise, we'll use right
Our y value will be the y value of our chosen bounds, plus the height of the selection so the particles appear below the text

Thanks to Louis Hoebregts for a great article. I had a bunch of fun and confusion getting this to work, but it was a welcome distraction.

Image Parallax and Blur with Tornis

TJ Fogarty — Tue, 04 Jun 2019 15:35:22 +0000

This was originally posted on my site.

Heads up - it's probably best to leave out the blur for larger things, as it destroys performance on Firefox. The transform still works well.

...

I updated my site recently and wanted to put a bit more focus on images. To do that, I included a space for cover images in articles. They take up a chunk of the top of the page, and I'll probably re-think this approach at some stage. Maybe I'll overlay the title and description over the image...

I wanted to include a bit of pizazz, and the image was the prime candidate. That's when I remembered Tornis, a library that lets you respond to changes in the viewport. I wanted it for the scroll position monitoring, and while I can add an event listener to window and do the same thing, I'm thinking of a few other use-cases for this library, so I figured why not give it a go.

Here's a stripped down version of the code I used on my site. In reality, I'm checking for the existence of the cover image before kicking anything off. I followed the examples on the Tornis site to get here.

const { watchViewport } = tornis
const coverImage = document.querySelector('.js-cover-image')

const updateValues = ({ scroll }) => {
  if (scroll.changed) {
      let scrollOffset = scroll.top / coverImage.clientHeight

      scrollOffset = scrollOffset < 0 ? 0 : scrollOffset
      scrollOffset = scrollOffset > 1 ? 1 : scrollOffset
      document.body.style.setProperty('--scrollY', scrollOffset)
    }
}

watchViewport(updateValues)

I'm checking to see if we've scrolled past the cover image and setting a value between 0 and 1 in the scrollY custom property. With this custom property, I'm setting the filter and transform property of the custom image.

I'm also using position: sticky so the image travels down the page with us.

.cover-image {
  position: sticky;
  top: 0;
  height: 240px;
  overflow: hidden;
  filter: blur(calc(var(--scrollY) * 10px));
  transform: translate(0, calc(var(--scrollY) * -30px));
}

For the blur, I'm multiplying scrollY by 10 pixels. So when scrollY is 0.3 that'll evaluate to a 3px blur. The transform behaves in the same fashion so that it slowly crawls in the opposite direction of the scroll.

You can probably think of more creative uses, for example, the amazing forest scrolling on the Tornis homepage.

Task Management

TJ Fogarty — Thu, 23 May 2019 13:04:10 +0000

This was originally posted on my blog.

Ask 10 people how they approach task management, and you might get 10 different answers. Not so much philosophically, but rather physically: how do you store or keep track of them?

Over the years I thought that software would solve my problems with the sheer convenience of it all:

I can sync tasks between my phone and laptop
Less context-switching when I’m working
Quick to tap/type out new tasks
Categorisation of tasks
Reminders
Not trying to be dramatic or anything, but many of these advantages became problems when I applied it to my work.

When I was starting out as a developer, I was hungry to learn and prove myself as a capable worker. Not bad things at all. But, when the day is done, it’s hard to switch off when anytime you pick up your phone you can see tasks waiting for you. I was thinking about the tasks waiting for me tomorrow, and going over what I worked on that day.

This went on for a few years, and it got exhausting. It’s my own doing; no-one asked me to bring my work home with me (usually), and sometimes it’s necessary. As time went on I started working smarter and setting realistic expectations. This gave me some breathing room to think about task management, and I decided to switch up my approach.

For my personal life, I still use software. I moved between Wunderlist and Todoist before settling on TickTick. They all do much the same thing. This works great for the features listed above, mostly for portability and access on the go. I keep track of shopping lists, article ideas, housework etc…

For work, I use a physical journal. I use it to break the “conveniences” - everything stays in the journal, nothing leaks out. It’s like a quarantine of sorts. I appreciate that it makes me stop and think about what I’m doing, and I enjoy writing as well. Keeping up legible cursive writing is something I enjoy, especially when I write out a nice “f” - that can make my day.

It also gives me a routine. I start every day away from the computer going over what waits for me. Once I check my emails and talk to people I’ll append new tasks to the list. At the end of the day, I’ll do up my tasks for tomorrow and carry over anything that didn’t get done. Closing the journal signals to my brain that work is done.

I have a few journals filled up now, and it’s fun every now and then to look over them and see what I was up to this day 3 years ago. I can laugh at some notes I’ve written, or wince in pain at the tasks of a nightmare project. It reminds me how far I’ve come.

Derived Stores with Svelte

TJ Fogarty — Wed, 15 May 2019 12:49:52 +0000

This was originally posted on my site.

Svelte has been getting a lot of attention recently, and rightly so. If you've used the likes of Vue or React in the past then Svelte won't be a million miles away. I recommend following their interactive tutorial if you're interested.

Coming from a Vue background, one feature I love is computed properties. If you want to store some sort of value that depends on the reactive state, but you don't want to manually update it when state changes, this is where they come in. For example, a greeting property could return something like "Hello, ${this.name}!". Vue knows to update greeting whenever name changes.

Svelte offers a similar solution in what it calls derived stores. To show how this works, I created a small app that takes a JSON feed and lets us filter it. The feed contains a list of jobs, and I want to be able to search by job title, and only show remote jobs via a checkbox.

The initial stores would be as follows:

import { writable } from 'svelte/store'

export const jobs = writable([])
export const searchTerm = writable('')
export const remoteOnly = writable(false)

At some stage, when the app is ready, the jobs store is populated with an array of jobs from the feed. When I type in the search input the searchTerm store is updated, and when I toggle the remote-only checkbox, the remoteOnly store is toggled.

Ideally what I'd like to do is avoid editing the jobs store. I'd like to keep the original list untouched so I can return to the original state.

This is where I can use derived stores. First I need to import it by updating the top-level import statement:

import { writable, derived } from 'svelte/store'

Now I can declare my derived store.

export const filteredJobs = derived(
  [jobs, remoteOnly, searchTerm],
  ([$jobs, $remoteOnly, $searchTerm]) => {
    return $jobs
  }
)

The first argument is the store or stores, I wish to derive from. You only need to pass an array if you wish to use more than one. The second argument here is the callback, which gets passed the stores we asked for. At the moment we're returning the original jobs store untouched. Let's create a function to show only the remote jobs:

function filterByRemote(jobs, remoteOnly) {
  if (!remoteOnly) return jobs

  return jobs.filter(job => !job.location)
}

export const filteredJobs = derived(
  [jobs, remoteOnly, searchTerm],
  ([$jobs, $remoteOnly, $searchTerm]) => {
    return filterByRemote($jobs, $remoteOnly)
  }
)

A remote job here is any job that doesn't have a location set. If remoteOnly is set to false we'll return the jobs array early.

A similar approach is taken for the search term. It's not the most robust of searches, but it does the job:

function filterByRemote(jobs, remoteOnly) {
  if (!remoteOnly) return jobs

  return jobs.filter(job => !job.location)
}

function filterBySearchTerm(jobs, searchTerm) {
  if (!searchTerm) return jobs

  return jobs.filter(job => {
    const title = job.title.toLowerCase().replace('-', ' ')
    const formattedTerm = searchTerm.toLowerCase().trim()

    return title.includes(formattedTerm)
  })
}

export const filteredJobs = derived(
  [jobs, remoteOnly, searchTerm],
  ([$jobs, $remoteOnly, $searchTerm]) => {
    return filterBySearchTerm(filterByRemote($jobs, $remoteOnly), $searchTerm)
  }
)

If we work from the inside-out, we'll see filterByRemote returns an array of jobs, which then becomes the first argument in the call to filterBySearchTerm.

That's my first experience with Svelte. Hopefully not the last as it's a refreshing take on what I've been doing previously.

See the demo
View the source

HTML Imports & Component-Driven Development

TJ Fogarty — Sun, 16 Sep 2018 11:59:12 +0000

This was originally posted on my blog.

I was thinking about the process of building a site today vs maybe 8 years ago. When WordPress was called for, I'd usually build the site from start to finish within WordPress. You wouldn't see any CSS for a little while as custom post types needed creating, content needed to be sourced, and plugins needed to be installed. The whole front-end was mashed up with this configuration, and nothing was really finished until the site was live.

Now, I didn't know a whole lot 8 years ago, so looking back there are ways it could have been done better. If I could go back, I'd probably build a static site first with all the parts, then port that over to WordPress when it was ready. It might be me, but I find not having to think about a CMS while doing initial front-end work very liberating. I don't want to troubleshoot why a template is breaking when I want to focus on styling. It's too easy for me to go off on a tangent and fiddle with PHP because I just thought of a better way to do something.

Years later, this idea of focusing on the right things at the right time became, for me at least, encapsulated with Atomic Design, so I want to take this moment to thank Brad Frost for preserving the few remaining brain cells I have left. I used tools like Pattern Lab, and Fractal which really opened my eyes to the benefits of focusing on one thing at a time.

Working on a team and incorporating these tools caused trouble at times. When I wanted to introduce this notion of building a project from components, everyone had to be on the same page, and have a solid understanding of the tools we were using. Technical bugs arose from misconfigured environments or an unmet expectation, and when you're moving fast with multiple projects, it can be a momentum-killer.

In many cases, I see nothing wrong with setting up a local PHP server in a directory with php -S localhost:8080, and setting up individual files for components and using include to pull them into a template. Not all projects demand a batteries-included pattern library that can be exhibited to a client. Sometimes they don't care as long as the project gets done on time and within budget. It'd be nice sometimes to surprise a client with such a powerful resource packaged up in Pattern Lab, but when it's not called for we still get that nice component-y feeling from a smattering of PHP calls to other files. The developer still gets to focus on one thing at a time.

HTML Imports

I was wondering if there's any way we can replicate this in the browser without relying on external libraries. Maybe it's something that could be done with the tools we have today without depending too much on JavaScript to make a bunch of AJAX calls. That's when I was reminded of HTML Imports. I wonder how far along that is now...

Well, at the moment it's not great. Mozilla have published their thoughts on supporting it.

At Mozilla we want to explore how importing custom element definitions can align with upcoming ES6 module APIs. We’d be prepared to implement if/when they appear to enable developers to do stuff they can’t already do.

Chrome will be removing the current implementation as well.

Still, though, I wanted to try to replicate that process of having components and including them where I needed them, without requiring a developer to know the ins-and-outs so they can focus on coding.

Importing HTML

Given I have an index.html, a folder for partials (think a header and a footer which may be made up of components), and a folder for components, I want to load them, and inject them into the page. The first thing to do is register them in the <head> of my document with <link rel="import">.

<link rel="import" id="site-header" href="partials/site-header.html">
<link rel="import" id="primary-nav" href="components/navigation/primary-nav.html">

The ID is important for referencing the imports in order to inject them into the page. So how do we reference those imports? I'm going to use a data attribute to define this.

<div data-import="site-header"></div>

Inside my site header, I'm also referencing the primary nav.

<header>
  <div>
    <span>Logo</span>
    <div data-import="primary-nav"></div>
  </div>
</header>

JavaScript

We need some JavaScript to get the ball rolling. We need to find the imports, grab their content, and replace instances of [data-import] with their respective content. To be fair, it's not an awful lot of code, which was a nice surprise.

Get the import id to identify where to import into our document later on
Grab the contents of the import. Since it'll include the body tag, we want to get everything inside that instead.
Find the spots to put it in.
Loop through each data-import and replace it with the contents.

For step 4, I'm using content.clondNode(true) rather than passing content. I'm doing this because if there's more than one instance on the page, it'll only show the import in the last place it was referenced, essentially moving it around. By using cloneDeep, and passing true to include the children, we're copying it into every place it's being referenced.

let imports = document.querySelectorAll('link[rel="import"]')

imports.forEach(htmlImport => {
  let id = htmlImport.getAttribute('id'), // [1]
      content = htmlImport.import.querySelector('body *'), // [2]
      domTemplate = document.querySelectorAll(`[data-import="${id}"]`) // [3]

  domTemplate.forEach(el => {
    el.parentNode.replaceChild(content.cloneNode(true), el) // [4]
  })
});

I thought this was a fun little experiment, and it would be really cool to see this factor into the tooling of creating websites in the future. That's if the support is there. Otherwise, there are custom elements to look into, or I'm happy sticking with a static-like setup with PHP.

See the demo
View the source

Improving Client-Side Performance

TJ Fogarty — Mon, 10 Sep 2018 20:53:59 +0000

This was originally posted on my blog.

Below are some ways I've found to optimise the performance of a site when getting it ready for a production environment, or patching an existing site. Where possible I'll list some common implementations, though understandably we don't always have the kind of access we want to make changes.

These opportunities for client-side improvements are typically more common among websites rather than web apps. I think this is because of the tooling that comes with modern web app development e.g., vue-cli handles code-splitting, and generates a service worker. With build tools like webpack, or Gulp, it also means you can install a plugin to slot somewhere in the process that takes care of some of these. Others need some TLC, and a sympathetic ear.

Images

A picture paints a thousand words, but that's no good when many of those words are synonyms for "slow". People aren't always aware of the specifics of an image, nor should they have to be in some cases. If it's possible to upload a 5mb image, then chances are it'll happen at some point. That's just how it goes.

There are some methods we can use to automate the reduction of overall bloat, and still preserve image quality. Where automation isn't always available (for things like static sites, or non-CMS based projects) there's still plenty of tools we can employ.

Resize

The first port of call is to resize the image. Generally speaking, we don't need a higher-than-usual-res image for something that only takes up a portion of the page, or isn't the reason for the page existing. If photography is your gig, then you can serve a smaller image with an option to view the high-res version if they so wish.

If you do a search for "resize image" you'll find a whole host of online solutions that will do the job for you. This is great if you're only concerned with one or two images at any given time, but what if you have a folder full of them?

Batch Resize on MacOS

MacOS comes with a program called Preview which lets you batch resize images. To do this, select all your images, right click and open with Preview.

From here you'll see the preview window:

Pressing CMD + A, you can select all the images, then go to Tools > Adjust Size. The dialogue that appears will let you set a value for the width and height, though you might only set the width and let it scale the image for you so no part of the picture is clipped.

Batch Resize on Windows

It's been a while since I've worked on a Windows machine, so pardon my ignorance here.

One solution I've seen is to send your images as a mail attachment, at which point you'll be presented with an option to resize them and preserve their aspect ratio.

Another, possibly more ideal, option is some software called ImageResizer. When you select a group of images, and right click, it adds an option to resize from the context menu that appears.

CMS

WordPress comes with baked-in support for resizing images. If you're using Timber for WordPress (give it go, it's class) then you can also resize images on the fly.

If you're using Craft CMS, you can resize, set the quality, and change the format of an image within your control panel and templates.

For ExpressionEngine, a ridiculously powerful plugin is CE Image. If you're working on a big project, then the asking price is worth it. Otherwise, there are some resize capabilities in the control panel.

Cloud

This approach, depending on your needs, could be a great way to manage images. If you're ok with storing your images with another service (provided you have your own copies backed up somewhere), then the free tier of Cloudinary will be quite appealing. Once you upload an image, you can manipulate the URL to make modifications such as resizing or converting to another format.

Optimise

If you haven't already gone the cloud or CMS route, then we still need to optimise things further.

Once the images have been resized to your liking, the next step involves analysing them to identify any cruft that can be removed to reduce the file size. Some approaches include:

Removing metadata that might have been attached from the camera that took the original picture
Optimising JPEGs to reduce the number of colours required to render the picture
Converting from PNG to a lossy format if transparency isn't required

Long before software existed, we would have had to parlay with an image, and barter for pixels. We would have lengthy discussions trying to convince it that it looked just as good with 80 shades of red rather than 200. Or that JPEG suited it better than PNG. It was sparse times for all involved.

Luckily, there are tools available to make this quick and simple. We're happy, and the images are happy.

Reduce File Size

ImageOptim is my favourite for optimising images. You drag your images onto the program and it does the rest, replacing the existing ones by default. It lets you know how much it's saved as well. If you're not happy, you can update the preferences for more aggressive optimisation.

The ImageOptim website has a page that suggests alternatives for other platforms. Again, apologies for my MacOS-centric state of mind.

Convert PNG to JPEG

If your images don't need transparency, you can convert them to JPEG and reap the benefits of a smaller file size.

On MacOS you can open your images in Preview, as before, then after selecting everything you can go to File > Export Selected Items. In the dialogue that appears, in the bottom left is a button labelled Options. From here you can select a different format.

There's also plenty of online tools that do this. On Windows, an option might be some software like IrfanView which I believe lets you batch convert images. I don't know if I've said this yet Windows users, but I'm sorry. I haven't even apologised to Linux users yet.

Responsive

Making your images responsive involves more than:

img {
  max-width: 100%;
  height: auto;
}

Sure, it resizes, but you could be wasting a lot of bandwidth here. If I need a sticky note I don't fold an A4 sheet into a small square; that would be a waste of paper.

If we follow the approaches above, we can combine different sized images and serve the appropriate one to the user.

To do this, we can either use the <picture> element, or the srcset attribute. With <picture> you're giving instructions to the browser to render a specific image at a given breakpoint. With srcset you're giving information to the browser, and trust it to deliver the most appropriate image in any given case. The two can be used together as well for greater control.

Using <picture> is great for cases like art direction, when on a smaller screen the image might be too small to make sense of, so you want to serve a different image, or a cropped version of the original, to preserve the original meaning.

An example from the Responsive Image Community Group website:

<picture>
  <source media="(min-width: 40em)"
    srcset="big.jpg 1x, big-hd.jpg 2x">
  <source 
    srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

The srcset attribute means you have less control over what the user ends up seeing, so it's a good idea to keep this reserved for resized images. It could be dependent on the size of their screen, or even their network capabilities.

And another example from the Responsive Image Community Group website:

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf">

For more information I'd recommend checking out the... Responsive Images Community Group website, as they cover usage and use cases in greater detail. Smashing Magazine also has a good overview of it.

Lazy Loading

So you have your images resized and optimised with your responsive image tags in place. What else could we possibly do? Well, it's not guaranteed a user will see every image on the page, so why make them download everything? Take for example a carousel. Now, I know people have opinions, and I'm gonna stay clear of that. You do you. But how often does someone see every slide of a carousel? We could instead load the image when the new slide arrives.

The same goes for scrolling, not everyone makes it to the bottom of a page for one reason or another.

By far my favourite solution is LazyLoad.

<img class="lazy" alt="..."  data-src="../img/44721746JJ_15_a.jpg">
<noscript>
  <!-- If JavaScript isn't available -->
  <img alt="..." src="../img/44721746JJ_15_a.jpg">
</noscript>

var myLazyLoad = new LazyLoad({
    elements_selector: ".lazy"
});

This works for the srcset attribute in <picture> and <img> as well.

Third-Party Plugins/Scripts

You'd be surprised how many external scripts are loaded on some websites for various tasks. Some are unavoidable, such as analytics, but others aren't strictly necessary for the functionality that they provide.

Sharing Widgets

This is a common one, where someone wants there to be buttons available to share a page on any social media platform they want, then and there. You don't need an external service firing JavaScript into your site to do that, though.

You can make it works with HTML, and either use the supplied CSS, or use your own to blend it in with the rest of the site. For this, you can use Sharingbuttons.io, or Simple Sharing Buttons. Both offer a clean approach, while the latter also has a JavaScript version which will automatically gather the relevant page information to share. If you're using a content management system, you should get by without it by populating the sharing URLs with information on the current page.

Social Media Feeds

OK, this one is a bit more involved... you can include social media feeds without JavaScript, but you need to have some sort of server-side access to render them. You can roll your own using a given social media's SDK, or use a plugin. The added bonus of this is being able to style it to match your site.

I don't have any recommendations on this part, as I ended up rolling my own for Craft CMS, ExpressionEngine, and WordPress for work projects. I used the PHP SDKs for Twitter and Instagram. So that can be a fun learning experience.

It's more straight-forward with WordPress, as you can create a PHP file and include it in your functions.php file. For Twitter, I used the twitter-api-php package for gathering the latest tweets of an account.

I'm sure there are solutions out there for your CMS of choice, however, and I'll leave it to you to find one that does the job. This isn't an easy-out, I just don't have experience with those plugins. Hopefully, it's sparked some investigation on ways you can speed up your projects.

Bundling Assets

If you're not using webpack, Gulp, Parcel etc... for packaging all of your dependencies, then you may see extra requests happening in your browser. In my experience, this happens mostly with WordPress sites where plugins drop their own styles and scripts into your templates.

WordPress users rejoice, you can choose from many solutions such as Autoptimize, and W3 Total Cache which brings more than just combining assets to the table.

I'm not aware of up to date plugin solutions for other platforms, but I'll add them here if I come across any.

If you're using npm, a quick solution might be to use the UglifyJS package. So after running npm install uglify-js, you can add a new script to your package.json:

"scripts": {
  "build": "uglifyjs src/vendor/jquery.js src/main.js -o dist/bundle.min.js -c -m"
}

The command npm run build then would combine and minify your JavaScript. The -c, and -m flags will compress and mangle your code.

Service Workers

Using service workers, we can intercept network requests and serve up cached assets. What we can do is, once the user has visited the site, cache things like styles, scripts, fonts etc... then any subsequent requests from that user will be served from the cache. Once we make updates, we can invalidate the service worker, and fresh assets will be downloaded again.

For this site at the moment, I'm using the SW Precache webpack plugin. This lets me generate a service worker with webpack when I move things into production. I'm finding it's especially useful for fonts to avoid a flash of unstyled text.

Here's the configuration from my site:

new SWPrecacheWebpackPlugin({
  cacheId: 'tj-ie-v3',
  filename: 'service-worker.js',
  minify: true,
  stripPrefix: 'static',
  staticFileGlobs: [
    'static/fonts/*.woff2',
    'static/fonts/*.woff',
    'static/js/main.js',
    'static/css/main.css',
    'static/js/chunks/*.js',
  ]
})

This greatly improves performance, though if you make some drastic changes a user might see a broken site until they reload. Maybe there's a solution for that, but I haven't gotten that far yet in my service worker career.

Google has an introduction that's worth looking at, if you want to dig deeper and understand how it fully works (like I didn't).

Bonus Research

While writing this I became aware of Progressive Tooling which looks to be a pretty fine resource for tooling around this subject.

If you want to eek out more performance improvements, have a look at these:

link rel="preload" lets you identify priority assets to improve loading performance
Cloudflare makes use of a global CDN to improve performance. It has a generous free offering as well, which makes it worth trying out.

That's all I have! I'll update this with any new insights I receive, but hopefully there are a few bits here that prove useful.

Building a Table of Contents with the Intersection Observer API

TJ Fogarty — Sat, 08 Sep 2018 16:48:04 +0000

This was originally posted on my blog.

While planning out an upcoming post, I noticed there was quite a lot of content to cover with no easy way to navigate it. So, rather than actually write the post, I went off on a tangent and built a table of contents component. Great, back to writing... ah it'd be nice if it followed the user scrolling down the page. OK, done. Wait, it would be cool if I could highlight the currently active section...

What I ended up with is by no means perfect; it doesn't highlight correctly when scrolling up until you reach a new heading. However, I think it does a decent job for now without using JavaScript to wrap each section in an identifiable container, and I can always improve it, or remove it entirely if it's not fit for purpose.

Setup

I'm using Hugo to generate my site which comes with a useful tag to automatically create a table of contents. This works by finding all the headings, assigning them an id, and generating a list of links.

{{ .TableOfContents }}

To begin with, we need a document with some headings. These headings should have an id so we can use anchor tags to jump to that section of the document. We also need a list of links with the href pointing to each heading. The idea is that the basic functionality works without JavaScript enabled.


<div>
  <aside>
    <p>Table of Contents</p>

    <ul>
      <li>
        <a href="#first-heading">First Heading</a> 
      </li>
      <li>
        <a href="#second-heading">Second Heading</a> 

        <ul>
          <li>
            <a href="#third-heading">Third Heading</a> 
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <article>
    <h1>Article Title</h1>

    ... 

    <h2 id="first-heading">First Heading</h2>
    ...
    <h2 id="second-heading">Second Heading</h2>
    ...
    <h3 id="second-heading">Third Heading</h3>
    ... and so on
  </article>
</aside>

The lists in the navigation are nested to reflect the hierarchy of the content. A h3 lives within the section defined by a h2, a h4 by a h3 etc...

Writing the JavaScript Object

I'm sure you clever folks can make a cleaner job of this. I opted to avoid any plugins in an effort to learn more about what's going on, as well as keep the bundle size of my scripts down. That means there's no fallback support for browsers that don't support the Intersection Observer API. As of this writing, that means Internet Explorer.

The first step I figured was to collect the list of links and headings in an article. I did this wrapped in an object to try and organise the code.

const TableOfContents = {
  container: document.querySelector('.js-toc'), // this is the container for our links
  links: null,
  headings: null,

  init() {
    this.findLinksAndHeadings()
  },

  findLinksAndHeadings() {
    this.links = [...this.container.querySelectorAll('a')]
    this.headings = this.links.map(link => {
      let id = link.getAttribute('href')
      return document.querySelector(id)
    })
  }
}

The reason I'm destructuring into an array here: this.links = [...this.container.querySelectorAll('a')] is because querySelectorAll will return a Node List as opposed to an array which we can call filter, forEach, map etc... on.

Then I map over the links, find the href and use that to collect the heading it links to.

Intersection Observer

Before we got the Intersection Observer API, we would have attached an event listener to the window object on scroll. Then we'd check the current scroll position of the page, and measure it against the offsetTop of the element we wanted to check was in view. We could still do this, but scrolling can be expensive unless we debounce the listener. In any case, we'd be reaching into the DOM to pull out values, manually check them, and carry on.

With this API, we can minimize the effort required by learning a slightly different way of approaching the detection of elements in the viewport.

Let's take a look at a stripped back example that I've copied from the MDN link above:

let options = {
  root: document.querySelector('#article'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options)

From MDN:

root

The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null.

rootMargin

Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to all zeros.

threshold

Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5. If you want the callback run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.75, 1]. The default is 0 (meaning as soon as even one pixel is visible, the callback will be run). A value of 1.0 means that the threshold isn't considered passed until every pixel is visible.

With that information, I used the following options:

{
  rootMargin: '0px',
  threshold: 1
}

I left out root as I wanted it to default to the browser viewport. I didn't need anything extra from rootMargin, and threshold made sense to activate for when 100% of the element is visible.

For the observer itself, I needed to write a function for the callback, and watch the headings for when they become visible.

this.observer = new IntersectionObserver(
  this.handleObserver,
  this.intersectionOptions
)

this.headings.forEach(heading => {
  this.observer.observe(heading)
})

handleObserver(entries, observer) {
  entries.forEach(entry => {
    let href = `#${entry.target.getAttribute('id')}`,
        link = this.links.find(l => l.getAttribute('href') === href)

    // I needed to use > 1 on Codepen, not sure why?
    if (entry.isIntersecting && entry.intersectionRatio === 1) {
      link.classList.add('is-visible')
      this.previousSection = entry.target.getAttribute('id') // I'll tell you in a minute
    } else {
      link.classList.remove('is-visible')
    }

    this.highlightFirstActive() // in a minute I said
  })
}

So I create the observer, observe each heading, and check if any heading is in view. If it's in view, I give it a class, of is-visible, otherwise, I remove it. Scrolling up and down the page now I can see, via classes on the links, which headings are currently in view. Now to style the most appropriate one.

Finding the Active Section

This was a really fun one. It's my fault for skipping breakfast that it took so long to figure this out. While multiple headings might be visible at once, I only wanted the first available one to show an active state. That's straightforward enough with document.querySelector which will return the first match it finds. The problem I was having was that as soon as the heading went out of view, the active style would be removed even though I was in that relevant section of the document.

The breakthrough moment was keeping track of the previously active section. With this, I could say "OK, if there's nothing active at the moment, default to the most recently active section." That's what this.previousSection is doing for us.

highlightFirstActive() {
  let firstVisibleLink = this.container.querySelector('.is-visible')

  this.links.forEach(link => {
    link.classList.remove('is-active')
  })

  if (firstVisibleLink) {
    firstVisibleLink.classList.add('is-active')
  }

  if (!firstVisibleLink && this.previousSection) {
    this.container.querySelector(
      `a[href="#${this.previousSection}"]`
    ).classList.add('is-active')
  }
}

I'm grabbing the first visible link, then removing all other is-active classes. After this, I check if we actually have a visible section (we might be in between sections with no headings visible). If we find one, great; add the class and bail. If we don't find one, and we have a previous section, then that's what we highlight instead.

Demo

See the Pen Scroll spy table of contents by T.J. Fogarty (@tjFogarty) on CodePen.

That's It So Far

I would be lying if I said this was well-thought out. It was a tangent within a tangent. I spent more time on this post than I did writing the code, and I'm sure there are things I've missed that could greatly simplify it. Give me a shout if you spot anything and I'll make amendments.

In the final version, I also introduced smooth scrolling to items provided the user doesn't mind by checking for the prefers-reduced-motion media query.

Feedback on my website

TJ Fogarty — Tue, 28 Aug 2018 16:36:49 +0000

Heya, I'm currently trying to build up my website. I've been trying to post more regularly this year, and I've started fleshing out the content more in terms of projects.

I'd greatly appreciate any feedback as I'm not a designer.

https://tj.ie/

Please feel free to share your own websites, or work you're proud of. It'd be great to get some inspiration, and celebrate the magic work you do!

Fathom Analytics on Heroku

TJ Fogarty — Sun, 26 Aug 2018 21:01:37 +0000

This was originally posted on my blog.

I've been going without any sort of analytics for my website for a number of months as I just wasn't happy with giving all that information to third parties. Plus, this is a fairly small operation here, so it's not exactly a requirement of mine.

That being said, I've been keeping an eye on Fathom Analytics as it looks like an ideal solution:

It tracks users on a website (without collecting personal data) and give you a non-nerdy breakdown of your top content and top referrers. It does so with user-centric rights and privacy, and without selling, sharing or giving away the data you collect. It's a simple and easy to use for website owners at any technical level.

Looking at the source, it also respects the "do not track" preference of the user.

I've been holding off on giving it a go because I had no idea how to install it, until a nice person on Github gave a quick run-through of how to get it running on Heroku. I'm trialing it using a Hobby dyno which costs $7 a month, so if it all works out I'll happily front that cost.

You'll need a Heroku account, and the Heroku CLI to follow along. You'll need to have your billing details filled in as well as it makes use of addons for getting a database. You don't have to use a Hobby dyno either if you just want to see what's involved.

So without further ado, the commands are as follows:

# Get the code
$ git clone https://github.com/usefathom/fathom.git
$ cd fathom

# Create a new heroku app
$ heroku create

# Push the fathom container to heroku's registry
$ heroku container:push web

# Release the container
$ heroku container:release web

# Configure fathon to use msql and a secret
$ heroku config:set FATHOM_DATABASE_DRIVER=mysql FATHOM_SECRET=whateverGeneratedSecretYouWantToUse

# Create a new mysql database
$ heroku addons:create jawsdb:kitefin

# Get the mysql connection url
$ heroku config:get JAWSDB_URL //mysql://user:password@host:3306/database_name

# Set database variables from the above url
$ heroku config:set FATHOM_DATABASE_NAME=database_name FATHOM_DATABASE_USER="user" FATHOM_DATABASE_PASSWORD="password" FATHOM_DATABASE_HOST="host:3306"

# Register a new user
$ heroku run ./fathom register --email=something@email.com --password='yourpassword'

To clarify a comment when running heroku config:get JAWSDB_URL ..., what it gives back is what you plug into the next command when setting the Fathom environment variables in the same format //mysql://user:password@host:3306/database_name. I know it kinda explains it already, but I missed it because I was too eager.

After that, it's almost ready. The last step is to link to the tracking script as follows:

<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
<script>
(function(f, a, t, h, o, m){
    a[h]=a[h]||function(){
        (a[h].q=a[h].q||[]).push(arguments)
    };
    o=f.createElement('script'),
    m=f.getElementsByTagName('script')[0];
    o.async=1; o.src=t; o.id='fathom-script';
    m.parentNode.insertBefore(o,m)
})(document, window, '//your-app-name.herokuapp.com/tracker.js', 'fathom');
fathom('trackPageview');
</script>
<!-- / Fathom -->

I'd say it took about 15 minutes to get up and running, which is pretty good going for me. I'm looking forward to what the future holds for Fathom.

A Signal in the Static (moving to a static site)

TJ Fogarty — Sun, 19 Aug 2018 19:25:10 +0000

About a year ago I set out to rebuild my site, and being reared on PHP I opted to go for Craft CMS while it was in beta. I figured it'd be interesting to learn it while it was still in development, and maybe create my own plugins.

Haha. Jokes. I did not. I tried, though, but never really needed anything extra.

I was also using Laravel Forge to automatically deploy whenever I pushed any changes to the master branch. To this day it's still a nice approach, but there's a lot of moving parts. I have a repo, a server that needs to be looked after (like when I updated PHP and broke everything), a database that needs to be backed up, and a CMS with some plugins that need to be kept up to date. Granted, I could not have touched it after day 1 and it would still work just the same, but that's not me. If it ain't broke, go fix it.

That's where the allure of a static site generator comes in. As far as the site goes, everything is in one place. Content lives in Markdown files which makes things pretty portable. I landed on using Hugo after seeing some recommendations for it, and in about a day I had my entire site copied over, including CSS and JS. To copy the content I took advantage of the Element API plugin for Craft to get a JSON object of all my posts. The config file for the plugin looked like this:

<?php

use craft\elements\Entry;
use craft\helpers\UrlHelper;

return [
  'endpoints' => [
    'posts.json' => [
      'elementType' => Entry::class,
      'criteria' => ['section' => 'posts'],
      'transformer' => function(Entry $entry) {
        return [
          'title' => $entry->title,
          'url' => $entry->url,
          'date_published' => $entry->postDate->format(\DateTime::ATOM),
          'slug' => $entry->slug,
          'body' => $entry->postContent,
          'categories' => $entry->categories->all()
        ];
      },
    ]
  ]
];

So when it hit https://my-site.com/posts.json it returned everything I needed. I saved this to a file to quickly generate markdown versions like so:

const posts = require('./data.json')
const fs = require('fs')

function buildCategory({ title }) {
  return `- ${title}`
}

function buildFrontMatter(post) {
  return `---
title: "${post.title.replace(/"/g, '\'')}"
date: ${post.date_published}
draft: false
categories: \n${post.categories.map(buildCategory).join(`\n`)}
---`
}

posts.data.forEach(post => {
  let content = `${buildFrontMatter(post)}\n${post.body}`

  fs.writeFile(`../path/to/final/content/posts/${post.slug}.md`, content, err => {
    if(err) {
      return console.log(err);
    }

    console.log("The file was saved!");
  }); 
})

I needed to run sudo node index.js on that as it needed to create files, but I didn't have to touch the generated markdown files once they were in the right folder.

Once that was done, I skipped on over to Netlify and hooked it up. I needed to do some configuration before everything would work. Mainly this was down to my assets living in a theme which was in a subfolder. To let Netlify know about it, I had to create a new package.json in the root with a build command that did the following:

[build]
publish = "public"
command = "hugo --minify && npm run build"

Then the build command in my root package.json dug into the folder it needed and ran some more commands:

"scripts": {
  "build": "cd ./themes/nua && npm install && npm run production"
}

After that, it was smooth sailing. Limerick just won the All-Ireland senior hurling final so I'm gonna grab a beer. That makes two victories today. Cheers, agus Luimneach Abú!!!

What Do I Know?

TJ Fogarty — Tue, 24 Jul 2018 21:42:03 +0000

A couple of years back, I began to let the waves of new tech wash over me, knowing the tide would go back out again. I started to relax a bit more, and accept that the stuff I knew was enough for what I needed. "What's the rush?" For that, I count myself lucky.

That's not to say I stopped learning new things -- far from it -- but I came to accept that I'll never know everything. I started with HTML, CSS, and JavaScript over 10 years ago, and I'm still using them today. I'll probably be using them for the next 10, too. All the while I'm tacking on new bits of experience and knowledge. Slowly but surely.

I found my work journal from a previous job, and it kinda shocked me the number of things I was doing on a given day. I never really stopped to assess what it would all lead towards, or how I could eventually spend that experience to sell my skills. For example, on one day I was working on 3 different projects, troubleshooting with clients, reviewing code, attending meetings, and writing a spec for an upcoming job. That's a lot of stuff I would cast off as "just work", before spending my nights tangled in envy at all the cool stuff people were building in the open-source world. I was envious because I filled all my social feeds with such amazing people, and I compared myself to them.

I'm not an internet-famous developer. I'm not a Vue or React expert. I haven't created a library that's used by thousands of developers.

But I know stuff.

If I hadn't kept a log of my days, I don't think I would have realised how much I've been exposed to and developed from. I can't underestimate the value of writing stuff down with pen and paper. I don't need to charge it, I don't need to be connected to the internet. All I need is a few quiet minutes to reflect on my journey thus far. I can build a piece of software, and not understand every software engineering principle, but I'll learn some more of them eventually with practice. Just because I can't put an exact name to all the stuff I know, doesn't mean I don't know it, if that makes sense. Know what I mean?

How do you organise personal projects?

TJ Fogarty — Wed, 04 Jul 2018 18:40:41 +0000

I usually start coding straight away, but I'm starting to get a bit more organised because I'm finding I lose interest shortly thereafter.

How do you organise your personal projects? Do you treat them like a client project with deadlines, and write documents on requirements? What helps you through a personal project beyond the desire/motivation to create something?