DEV Community: Jim Reevior

How I Created a Web Presence as a Web Developer

Jim Reevior — Mon, 09 Aug 2021 01:06:21 +0000

How I Created a Web Presence as a Web Developer

It was time for a refresh. My current site was several years old. In fact, I lost the Hugo config to be able to add new content. So, with some help from Ashley - a fantastic front-end designer and developer - we created a site that has whimsy and shows who I am and my skills.

Announcing hirozed.com!

Why hirozed.com? I’ve been using the hirozed handle for as long as I remember. “Hiro” originated from Hiro Protagonist, the (ahem) protagonist of Neil Stephenson’s Snow Crash. My memory of Hiro Protagonist was of a genius hacker, who in the metaverse was a sword-wielding protector of the domain.

“Zed” is in honor of Zeddicus Zu'l Zorander, aka “Zedd”, from Terry Goodkind’s Sword of Truth series. Zedd is a wizard of the first order, and mentor to the main character.

I loved these two books, so when I was thinking of a handle that wasn’t just my first initial/last name, these two characters stood out. They spoke to what I aspired to be in my life. Maybe not a genius hacker, but quite good in my profession, as well as a mentor to those around me. I was in my 20’s when I invented my username, but I think I might have gotten close to the spirit of my online handle 20-plus years later.

So, the answer to the above question I posed to myself is: hirozed is me online.

Now, as for what runs the site. It is a static site, using Jigsaw as the framework. Jigsaw uses Laravel’s blade templating. Since one of my goals this year is to learn Laravel, it was the perfect fit for my site. GitHub is where I've decided to store my repos, and Netlify watches for changes to my main branch and rebuilds my site.

I have a bigger ambition than a single page site -- I want to start blogging. However, all attempts at headless CMSs seemed to complicate what I wanted for a straightforward low-maintenance environment. Since I was going to publish on both Hashnode and Dev.to, I decided to make Hashnode my primary blog site. They allow for a custom domain (hello blog.hirozed.com) and I can take the same markdown content and create a post on Dev.to, referencing the original post there.

I decided that I still could use a CMS for maintaining content. Using Netlify CMS, I can keep my content on my own repo and will give me a bare-bones environment view a preview of my post. There are several templates using different static site generators. I chose the Nuxt.js template, which turned out to be easy to configure and stayed out of my way.

What I genuinely enjoy about Netlify CMS is there is a built-in editorial workflow. The workflow will create a branch for a new post and assign it to Draft status. When a post is ready for a once-over, set the status to "In review". Finally, when the post is complete, assign it to "Ready" and the CMS will merge the post into the main branch. During this entire process, a preview of the posts' branch will be available to view and share using Netlify's deploy preview feature. It will create a staging site for the specific branch.

The final piece of my blogging infrastructure is an NPM utility called cross-post. This will take the content from the main blog (in this case, the url for my CMS environment) and post to Hashnode and Dev.to. This post is my first attempt at this, so I’m crossing fingers.

I’ve also added links to Polywork and read.cv. These are two services that show what I’ve done and where I’ve been in different formats.

How I VSCode is a service which allows you to share the extensions and themes I use on my editor of choice. VSCode will be a blog post for a future time, but basically, the large ecosystem and wide adoption are definite benefits.

The widgets at the bottom of the site are based on a library called GitHub readme stats. It is a set of scripts hosted on Vercel that generates stats based on your GitHub info. It is meant for custom Readme files that you show on your GitHub page, but it works just as well on my site. The second widget is also from the same repo but pulls the information from Wakatime. Wakatime silently watches your code editors, in a non-creepy way, and gathers statistics on what language you are working in, how long you have spent on a project, and other metrics. I've been using it for years, and I find it a great metric on what other languages I've interacted with beyond PHP.

The final piece I want to talk about is the hirozed “brand”. I pestered my sweet, patient partner Ashley to come up with an avatar that I could use. I have an affinity for red pandas, so I wanted something based off of that. Once she finally relented, she invented the perfect embodiment of hirozed. My avatar is that of a nerdy red panda in the shape of a keycap, The banners she created, take that one step further and spell out my online persona also in keycaps. I now have brand colors, which I have attempted to incorporate wherever I can. Overall, I now have a sense of identity online.

I hope that my ramblings about my new online center of the web was interesting. If you have any questions, please let me know and I’ll try to answer as best as I can.

TIL: IntersectionObserver Class in JavaScript

Jim Reevior — Sun, 18 Apr 2021 17:24:42 +0000

Okay, this was a few days ago, but 🤷🏻‍♂️.

Over the last week, I've been devouring The Complete JavaScript Course as a way to 1. Get over my fear of JavaScript (that's a post for a later time) and 2. Ensure my current carrer as a WordPress developer doesn't stay stuck in the pre-Gutenberg world (that's also another tale for another time). The course itself was fantastic, and has put me in a better place mentally and emotionally to take on JS/Gutenberg projects.

There was one section that I wanted to write about today. It's a feature that I’d never heard of before and would solve some past issues I've seen at work regarding components of a websites sliding into view and triggering an action.

It’s the ✨ IntersectionObserver ✨ class.

The JavaScript IntersectionObserver class (which is part of the Intersection Observer API) can be used to indicate when a portion of a website scrolls a specified distance down the page or within reach of an element:

From there, you can do wonderful things:

Set the navigation bar to stick to the top of the page when scrolling past a certain point.
Lazy load images when or before the come into view.
Ease sections into view on scroll.

Below is an example of a sticky navigation from the class’s Github repository:

The Complete JavaScript Course - section 13: Advanced DOM and Events credit Jonas Schmedtmann.

// Sticky navigation: Intersection Observer API

// Get the first section of content based on the .header class
const header = document.querySelector('.header');

// Get the height of the navigation bar
const navHeight = nav.getBoundingClientRect().height;

// Add or remove the sticky class to the nav bar,
// based on the entries retrieved from the IntersectionObserver class.
const stickyNav = function (entries) {
  // There is only one header, so we don't need to loop,
  // and can deconstruct the array.
  const [entry] = entries;

  // This is where the magic happens.
  // When the header is past the viewport, add the sticky class.
  // Else, when it comes back into view, remove the class.
  if (!entry.isIntersecting) nav.classList.add('sticky');
  else nav.classList.remove('sticky');
};

// Calling the IntersectionObserver class.
const headerObserver = new IntersectionObserver(stickyNav, {
  root: null, // Declaring null uses the entire viewport.
  threshold: 0, //  The percentage of the header to come into view.
  rootMargin: `-${navHeight}px`, // The offset based on the nav bar's height.
});

// Get some popcorn, the fun is about to start.
headerObserver.observe(header);

I also want to point out getBoundingClientRect. This function provides the size of an element and where it's located in relation to the viewport. In the example above, Jonas only uses the height value, but you can grab the size and the distance from the viewport as well.

Learning about the Intersection Observer API was an unexpected and exciting piece of the huge amount of information I downloaded into my brain. I can see using the API as a much more reliable method for detecting when sections of the site come into and out of view, and replacing a placeholder with a higher quality image. Causing text to zoom in when the container div scrolls into view. The possibilities are endless!

Hi, I'm Jim Reevior

Jim Reevior — Wed, 22 Feb 2017 18:38:31 +0000

I have been coding for a number of years.

You can find me on Twitter as @hirozed

I live in the Boston area.

I work for STAT News

I mostly program in PHP as as WordPress backend dev.

I am currently learning more about JavaScript & front end..

Nice to meet you.