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 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.
Version two provides a solid foundation to support the design & development of new fun features and projects.
That's the plan... fingers crossed 🤞