Version Two

Version Two

This site was created to share open and closed source software projects, the tools used to create them, and the concepts that make them work.

Version two introduces a new set of features and enhancements designed to better utilize the Gatsby framework, the Netlify hosting platform, and the data graph powered by GraphQL.

Looking Back

Version one was designed to mimic a mobile device, complete with a fake wifi indicator, a charging system that would plug/unplug the device when battery levels were low/full, a power button that would put the device to sleep, and a lock screen for when you wake the device back up.

All of these features were really fun to build and added a lot of character to the site, but they were functionally pointless and complicated the layout on small devices. Fun features can really set software apart, but they have to come after the foundation has been laid and must be functionally significant.

Fixing the Foundation

I love software and the web, modern frameworks like React allow us to build websites as powerful as native software applications, the main difference being that these applications run in web browsers.

Running in a web browser means you have to support a wide range of environments from several different flavors of browser to an endless variety of screen sizes. If you're building for the web, it's your duty to provide a world class experience for each device class and screen size.

Usability & Aesthetics

Last year I spent some time in the Swift / SwiftUI Apple development ecosystem and came away from it with a deep respect for Apple's collective knowledge of mobile design, which you can read about in their human interface guidelines.

Keeping with the theme of a mobile device, I opted out of the standard web/blog layout and went for a design that would be suitable of a scalable app that can grow or shrink to fit the size of the device that it runs in. These choices lead to implementing Apple-like navigation bars and split views.

If you've ever used a device at night and switched from a screen with a black background to a screen with a white background, you know why I consider dark mode to be a standard requirement for any modern app. Since this site is built with React, I went for use-dark-mode which will toggle dark mode based on system settings or manually through the settings page.

The Content Graph

Gatsby is an excellent gateway to GraphQL, it's built in and allows you to start writing GraphQL queries for your data with no configuration.

The data graph of this site contains all of the information about the pages, projects, posts, and tools, which are mapped to information sourced from the GitHub GraphQL API and the NPM API. This data graph can be queried by any React component on the site, which is woven into the site at build time.

The search component will return post, project, and tool results with a simple string search against all object titles in the graph. The graph also contains image information which is used for site content and to supply SEO metadata from each page for rich social sharing links.

Feedback Loops & Hooks

Feedback loops are critical to the quality and success of products. Each post and project on this site contains a feedback form powered by Netlify Forms to allow users to submit feedback to help improve the quality of the provided content.

Feedback forms allow users to push information to the site, email subscriptions allow the site to push information to the user. When a user subscribes to email updates, a Netlify Form is submitted which triggers a Netlify Function hook that submits the email to a Buttondown mailing list.

Looking Forward

Version two provides a solid foundation to support the design & development of new fun features and projects.

Coming up I'll be building a React Component Library built on TSDX, documented with Storybook, tested with Jest & Enzyme, published to and distributed by NPM.

That's the plan... fingers crossed 🤞

CreatedMar 2020
UpdatedMar 2020