My blogging and project announcements have been pretty silent this year so far, but that’s not because I haven’t been working on anything. I’ve just wrapped up a major, four-month effort to update and add to my online presence as a professional and hobbyist software engineer.

As the copyright on my primary website suggests, I first created a custom website for myself in 2008, over ten years ago. It was a pretty simple affair built entirely in XHTML, maybe with very minimal CSS, and not capable of passing the official XHTML validator. For most of that site’s existence, I did very little with it. But, as a college senior, I began to see the value of having a well-maintained and detailed website to highlight one’s work, so I built myself a brand-new site as one of my very first Angular projects.

This site quickly evolved, settling on a sci-fi inspired design that’s been in use for over a year now. It has served as a training ground and testbed for new web development ideas and skills, resulting in a code base that started as a total mess and is today far more aligned with Angular best practices. With each update, I’ve refined and upgraded the functionality and the architecture.

On the Stage

PhilipFulgham.com

My primary website has received a substantial update to act as the new hub for my online presence. I’ve switched out Typekit in favor of embedded, open-source fonts. These fonts are used across my sites as a consistent visual element. A navigation menu, complete with a slick open/close animation, has been added to the header with links to my other personal sites.

In version 3.3.0, the biggest update by far is the new Projects section. This section serves as an interactive portfolio of my self-owned projects with the biggest and newest projects front-and-center, replacing the static Portfolio section that was limited to old, mostly defunct projects from college and high school. Each project lists the skills I’ve used while working on it, in addition to providing some context for the project, as well as screenshots, if applicable.

The Skills section has also gotten an overhaul. It’s far more colorful than before, with the focus shifted to the relative extent of a skill instead of just how recently I’ve used it. The use of logos ties in with the Projects section, so technologies can be easily identified even by those who don’t have every logo memorized.

This release also sees the introduction of NgRx for state management. Now that the site’s data model is more complicated, it made sense to use a centralized state to slice the data according to my needs. I’ve been getting more familiar with NgRx lately, and I’m looking forward to using it to even greater effect in other projects this year.

Resume.PhilipFulgham.com

Last year, I started a project to create a new resume that could double as part of my portfolio, rather than just a static document. For my first major React project, I created a fully responsive resume web app that also printed perfectly on standard letter-size paper. I tied the resume app into my website’s Firebase data source, so that information on skills and jobs could be shared between the two sites.

With the release of version 1.1.0, I have taken the always-planned step of making the web version of the resume interactive. It’s now possible to click on any listed skill and see a list of self-owned projects on which I have used that skill. Clicking any project will take you to that project’s listing on my main website. With this, I hope to increase visibility into the effectiveness of my skills, making it easy for interested parties to tie my resume skills to actual work.

This release also standardizes colors and fonts with my other sites, for visual consistency. And there have been major upgrades behind-the-scenes, with every component now converted to TypeScript, and styled-components replaced with SCSS Modules.

Blog.PhilipFulgham.com

I started blogging on Medium last year as a way of sharing more detailed and elaborate knowledge and discussion than what is possible on Twitter. Now, in order to eventually add richer and more dynamic content, I’m launching my blog as a self-hosted site for the first time. This is the youngest site in the family, so it’s still pretty basic, but it has the content, and I’m excited for what I’ll be able to do with it in the future.

Version 1.0.0 is built with Gatsby, with the use of some great plugins for code embedding and syntax highlighting. My blog posts will now exist as Markdown in the blog site’s repository, making it part of my dev portfolio. It also provides me with an opportunity to play with one of the more popular tools available right now for static site generation.

Api.PhilipFulgham.com

In version 3.1.0 of my main website, I began using Firebase to serve data for my website and reduce the need to push code to keep the site up to date. But over time, I began to crave more code-based control over the back-end instead of doing everything through a portal. So I built a brand-new, custom API using the Azure Functions platform.

Creating a custom API also gave me the opportunity to move my data out of Cloud Firestore and into a more standardized format. For this, I chose MongoDB, and hosted it on their highly regarded Atlas service. This gives me a consistent testbed for a few technologies I’ve been trying to work into my rotation for a while now, and I’m really excited to expand my web presence to a full-stack project.

Other New Stuff

Typefaces

I recently became aware of a project called Typefaces, which makes hundreds of open-source fonts available as NPM packages, which can be easily embedded and imported into Webpack-built sites.

My portfolio website’s Typekit fonts have been replaced with a selection of Typeface fonts, yielding better performance over third-party font providers like Typekit or Google Fonts. The same set of fonts is now in use across all of my primary websites, providing a consistent visual element tying the different designs and layouts together.

Fetch API

Since React does not have a built-in HTTP provider like Angular does, the resume project gave me an opportunity to play with the Fetch API for the first time. Coming from XHR, Fetch seems much simpler for basic resource requests. It also uses Promises, which is great for me because I’m a huge fan of the async/await pattern. It’s particularly handy with tools like array destructuring and await Promise.all([...]) when data from multiple sources needs to be loaded and combined before proceeding.

Luxon

I typically default to using Moment for dates and times in every project, but I read enough posts about bundle size to make me wonder if I was getting enough use out of Moment. So, I decided to swap it out for Luxon, a similar library from one of Moment’s maintainers. It’s lighter weight, and makes better use of the latest browser APIs for standardization.

Now 2.0 Deployments

Last year, I began using Now by ZEIT to deploy some of my projects. I’ve been impressed by the ease of configuration and deployment, built-in SSL, and aliasing. Once Now 2.0 began providing enough storage on their builders to support cloud builds for Angular CLI and Create React App projects, I started using this service more broadly. All of the websites mentioned in this post are deployed using Now. The only exception is the Azure Functions API, which is deployed directly to Azure using Azure Pipelines.

What’s Next

While finishing up this project, I admittedly cut a few corners to make sure I could get it done in a reasonable timeframe. I’m sure there will be some things for me to clean up in the near future. But after that, I’m eager to get back to other coding and blogging projects. More to come!