Like any creative work, this site is built upon lessons learned from incredibly talented individuals and teams who have done the work to establish and share ideas, standards, best practices, open source libraries, and so much more.

In many cases, this site uses open standards that make the web a better place and can be applied by any site to make the web more useful for everyone. This colophon exists in large part to increase awareness of those standards and encourage wider adoption for a more open and dynamic web for all of us.

Ultimately, this page exists to share the tools, techniques, services, and other bits of knowledge that help me and that I enjoy using. Hopefully they can help you as well.

View Source

There’s something powerful about stumbling across something on the web and being curious about how it was made. The ability to view the source code of a website, read it, and learn from it is a superpower. As such, every aspect of this site supports and encourages viewing source.

In cases where there’s nuance behind how something was made or why a specific choice felt like the right one, you’ll find comments that can help explain the decisions and often even references to other places where the author explains the context better than I ever could.

So please don’t hesitate to view source. If something’s unclear, reach out, and let me know. Or if there’s a spot where I overlooked something or wasn’t aware of a better way to handle something, I’m all ears.

Accessibility

Accessibility is important enough that I’ve created a dedicated accessibility page sharing what I’ve done to ensure the site as accessible and make it clear that I’m always open to any feedback to improve the site’s accessibility if I’ve made mistakes or failed to keep up with modern practices. But as far as the colophon goes, I’ve done my best to extensively lean on semantic markup while leaning on ARIA where the semantics of the markup can fall short.

Front-end

Front-end web development has become increasingly complex, but it doesn’t have to be that way. The standard features available for “free” in modern browsers have advanced rapidly. With very simple approaches, a site can be fast, accessible, search-engine-friendly, and provide a reader-friendly experience.

Responsive

People visit web sites from an increasingly diverse set of devices with different screen sizes, resolutions, performance constraints, network connections, locations, and contexts. Fortunately, there are some great tools to facilitate accommodating such a broad audience. Fluid and consistent spacing and typographic scales made approachable by Utopia. Inherently responsive modules and layouts have been built based on the ideas articulated in Every Layout.

Fast Fonts

The site uses Georgia, Helvetica, and Andalé Mono as the default typefaces because those are already available on most devices and don’t add additional performance costs for visitors. While I’d like to explore web fonts at some point, they will be an opt-in feature from the site’s settings so that the default experience strikes the right balance of performance and design.

Semantic Markup

All of the markup is written to be human-readable first and use the most semantic elements possible—only falling back to using ARIA attributes if there’s not a pre-existing element. In addition to being human-readable, you’ll also find Microformats and Microdata sprinkled in to help machines read and interpret the content as well.

And don’t hesitate to run pages throughout the W3C validator. For example, try validating this page.

Progressive Enhancement

This site is built from the ground up with an eye towards progressive enhancement. It aims to ensure that the core content is available and usable regardless of device or internet connection speeds. Modern devices get “bonus” features in some cases, but if a device does not support the technology those features rely on, the site will still work, and the content will still be accessible to them.

Preferences & Customization

The site also offers some settings for visitors to customize the experience based on their personal preferences or context. Thanks to progressive enhancement, it was very straightforward to offer options, and it will continue to be easy to expand and improve the available options. You can even disable CSS, JavaScript, and media, and the site will still work and be completely usable.

Services

  • GitHub handles all of the source code, content, and continuous integration.
  • dnsimple is the registrar and DNS provider. I’ve been using them since 2013, and I’d highly recommend them and have a DNSimple referral link if you’d like to check them out.
  • Render currently handles the hosting, but I’m still on the fence about whether to continue with them or look elsewhere. It gets the job done for now, though.
  • Postmark is unquestionably the best email service I’ve ever used. It’s fast, reliable, and has a great API.
  • Skylight provides performance monitoring and insights. It’s not as robust as other tools for monitoring application performance, but it provides all the key insights this site needs. I’d definitely recommend it, and if you’re inclined to sign up, here’s a Skylight referral link that provides you a $50 credit as well as one for me if you become a paying customer.
  • Better Uptime provides uptime monitoring and alerts.
  • Logtail provides log monitoring and alerts to make it easier to investigate issues
  • Honeybadger provides exception handling and alerts when unexpected errors occur.
  • Cloudinary provides image optimization and delivery via CDN in a way that supports progressive enhancement and responsive images.

Tools

  • Lighthouse provides insights on front-end performance and accessibility.
  • Polypane is an amazing tool for testing responsive layouts, accessibility, social media cards, search engine integrations, and so much more.
  • Sublime Text has been my editor of choice for prose and much of the development since 2012.
  • RubyMine is growing on me for editing Ruby and Rails, but it hasn’t fully replaced Sublime Text for me yet.
  • Sublime Merge has been a perfect balance of power and ease-of-use with Git for me.
  • iTerm2 serves as my terminal emulator for all things command-line.

Backend

While this section shares the technology behind the site, none of this is meant to represent an approach I’d advise for anyone else, and it’s mostly over-the-top for a personal blog. The back-end is driven primarily by Ruby, Rails, Markdown, YAML, and ERb.

Automated Testing

The automated testing uses Minitest in conjunction with SimpleCov and Minitest Heat—a custom formatter I created to display test results in a more actionable manner. It also uses Reviewer to help streamline code review and linting with a variety of Ruby tools.

Data

It uses Postgres for the database uses Redis for caching and background job storage with Sidekiq processing the jobs. Much of the content is also stored directly in the repository in Markdown and YAML.

Gems

  • Redcarpet
  • Rouge
  • Lograge
  • Pagy
  • Brakeman
  • Bundler Audit
  • Rubocop
  • Bullet
  • Lookbook
  • View Component

Questions?

Is there something I missed or something you’re curious to learn more about? Feel free to email me, and I’ll reply as soon as I can.