Lots of things have changed in the world of social media since the last release. To bring Hydejack up to date, the default logo for Twitter has changed:

→

• New Social Media Icons
• Dark Mode is Now Free
• Updated Docs
• Google Fonts Off by Default

If you prefer the old Twitter logo, you can use it through twitter-old.

There are also many new social media networks, some of which are now included by default:

If your perferred network is missing, note that you can always follow the steps to add custom icons from the docs, which is what I did for this release.

Dark Mode is Now Free

When I first added dark mode to Hydejack it was still considered a novelty. Unity, a popular game engine, was limiting dark mode to its paid version at the time — a model that I’ve adopted for Hydejack. Today, dark mode is considered a minimal requirement for any new theme and to reflect that reality, starting with Hydejack 9.2, dark mode is included in all versions of Hydejack.

Updated Docs

The documentation has been updated with a focus on deployment via GitHub Actions and CI pipelines. I’ve added a chapter on how to Deploy and updated many of the existing chapters.

The deployment experience for PRO customers has also been improved. You are now automatically added to a “PRO Customers” team on GitHub if you provide a GitHub username during checkout (existing customers can request an invite through mail@hydejack.com). Members of this team have read access to the pro repository, which allows the theme to be fetched during a CI run. For detail, check out the new Deploy chapter.

Google Fonts Off by Default

Google Fonts are now turned off by default in the starter kits, but remain in use on hydejack.com for visual continuity. All associated options continue to work as they did before. Only new users have to enable them in the config file if they want to match the look of hydejack.com.

The reason for this change is that sensibilities around privacy have changed in recent years. No Google product feels appropriate as a default option for an ownership and self-hosting oriented product like Hydejack.

To restore the old look that matches hydejack.com, add the following to your _config.yml file:

google_fonts:          Roboto+Slab:700|Noto+Sans:400,400i,700,700i
font:                  Noto Sans, Helvetica, Arial, sans-serif
font_heading:          Roboto Slab, Helvetica, Arial, sans-serif

On a related note, I’ve also decided against updating the included Google Analytics script, in part because the upgrade path is incomprehensible, but also due the the same privacy concerns that make Google Fonts a bad default option. I recommend independent analytics services like Plausible, Matomo or maybe even Counterscale (if you are a Cloudflare customer). You can include the tracking scripts by adding them as custom HTML.

Recently I’ve used Hydejack myself to blog on my personal site, and while it may sound silly, I came away impressed with my own product.

When I was actively working on Hydejack, all I could see were its flaws, but looking at it with fresh eyes, it struck me as a pretty good product and in many ways ahead of its time: Just recently the View Transitions API has landed in major browsers, enabling the kinds of animations that have been the bread and butter of Hydejack for years (back then painstakingly hand-coded using JavaScript).

While I can’t go back to working full-time on this project — the economics of a niche one-time purchase like this hard to justify — I’m going to dedicate 1-2 weeks to brushing it up, starting with a service release that removes the annoying deprecation warnings that you’ve likely encountered:

With that out of the way, another thing I want to improve is the documentation for deployments. Things have changed since I wrote the original docs. There are now much better ways of deploying to GitHub Pages and from GitHub Actions in general.

The deployment experience for PRO customers could also be improved. Upgrading from Free to PRO hasn’t been as smooth as it could be due to the need to manually manage source files. Instead, it would be possible to create a GitHub Organization for all customers which would allow pulling PRO code directly from a private repository in most CI pipelines.

Privacy has become a big focus in recent years, which means enabling Google Analytics and Google Fonts by default can no longer be considered good taste for a ownership focused web presence. The default newsletter provider Tinyletter has folded since the last release and needs a replacement. These things could be remedied in a future release.

If there’s time left, I will also look into deleting 100s of lines of custom JS code in favor of the View Transitions API. Let’s see how things go.

• Stripe-ified Design
• Inverted Sidebars
• Code Block Headers
• Resume Download Buttons
• SERP Breadcrumbs
• Last Modified At
• Clap Button Preview
• Credits

Stripe-ified Design

Most elements now have rounded borders, making the design look more modern (dare I say “Stripe-ified”) than ever before.

The goal of Hydejack was always to provide a theme that looks “designed” combined the amenities of a typical Jekyll theme for coders. This is an important step in maintaining this goal.

At the same time, I’m introducing nerdy elements like breadcrumbs, that are almost ornamental in nature. You wouldn’t find these on other Stripe-like designs, but I think they are appealing to developer types like myself. Like most additions to Hydejack, they can be disabled via configuration.

Inverted Sidebars

The colors on the sidebar can now be inverted to allow brighter sidebar images. This can be enabled per-page in the fort matter:

invert_sidebar: true

Code Block Headers

Code blocks can now have headers:

// file: 'hello-world.js'
console.log('Hello World!');

Headers are added by making the first line a comment of the form (file|title): ['"].*['"], e.g.:

~~~js
// file: 'hello-world.js'
console.log('Hello World!');
~~~

Code blocks with and without headers now also come with a copy button. In the case of header-less code blocks, the button only shows on hover to prevent potential overlap.

Resume Download Buttons

Resumes can now have download buttons:

Resumes can now have download buttons.

The documentation has been updated with a chapter on how to configure the buttons.

SERP Breadcrumbs

Added breadcrumbs above page title:

Bread crumbs are now shown above each page title.

Note that this requires a directory-like URL structure on your entire site, otherwise the intermediate links will point to nonexisting sites.

On a side note, Hydejack now has built-in tooltips for abbreviations like SERP (activated via tap/click). See Example Content on how to add them to your content.

Last Modified At

Blog posts can now have a “last modified at” date in the sub title row.

Note that this depends on the last_modified_at property of the page, which must be either set manually in the frontmatter (not recommended), or via a plugin like jekyll-last-modified-at. Note that the later is not available when building on GitHub Pages and can increase build times.

Clap Button Preview

I’ve been trying something new with getclaps.app, a feedback and analytics tool for personal sites like those powered by Hydejack.

It is a separate product from Hydejack and not enabled by default. Because it depends on a backend component, it requires a monthly fee. If enabled, it is placed below posts and pages where the dingbat character (❖) used to be.

I can’t claim that this product is fully baked (feedback welcome), but I’ve been using it on my personal site and here for the last couple of months with no issues. For more, see the dedicated website.

There are many more changes and bugfixes in 9.1. See the CHANGELOG for details.

Credits

Photo by JJ Ying on Unsplash

Modernized design, big headlines, big new features: Built-In Search, Sticky Table of Contents, and Auto-Hiding Navbar. That and more is Hydejack 9.

• Linking in Style
• Ready for the Big Screen
• What’s in the Cards?
• Built-In Search
• Auto-Hiding Navbar
• Sticky Table of Contents
• …and much more
• Even More to Come
• Get It Now

Linking in Style

Ever since the introduction of Dark Mode, link styles have been a bit of an issue. Specifically, finding an accent color that worked on both light and dark backgrounds was the problem. With Hydejack 9, the link style has been revamped so that legibility is no longer tied to the choice of accent_color, giving you much more freedom in creating a unique design flavor for your site.

Ready for the Big Screen

The theme on which Hydejack is based was designed for a different era of the web. Hydejack has inherited many of its limitations, but over time I’ve made adjustments, such as centering the content column for better reading ergonomics.

With version 9, Hydejack takes full advantage of large displays. Whether it’s design indulgences such as oversized headlines, or quality of life improvements such as a floating table of contents, Hydejack now finds use for all that extra screen real estate¹.

What’s in the Cards?

Hydejack 9 now lets you use content cards for both projects and posts. The cards have been redesigned with a new hover style and drop shadows and they retain their unique transition-to-next-page animations, which now also work on the blog layout. The new grid layout lets you do that.

Good images are key to making the most out of content cards. For that reason, a chapter on images has been added to the documentation.

Built-In Search

Hydejack now has Built-In Search. It even works offline. I’ve been prototyping many approaches and eventually settled on a fully client-side, off-the-main thread solution that perfectly fits the use case of personal sites and shows surprisingly good results².

The new search UI is custom made for Hydejack and shows beautiful previews of your posts and pages, right on top of your regular content.

Together with the Auto-Hiding Navbar, your entire content library is now only a couple of keystrokes away.

Auto-Hiding Navbar

A navbar that’s there when you need it, and disappears when you don’t. Simple as that.

Sticky Table of Contents

Already a staple on so many sites on the web, this pattern is now also available in Hydejack. What’s unique about it is that it simply picks up the table of contents already created by kramdown’s {:toc} tag and transparently upgrades it to a fully dynamic version.

…and much more

Other noteworthy changes include:

• Support for Jekyll 4
• Choice between MathJax and KaTeX for math rendering
• Use of jekyll-include-cache for drastically improved page building speeds
• New variables configuration file — adjust content width, sidebar width, font size, etc…
• …and the option to disable grouping projects by year.

Read the the CHANGELOG for the full scope of features and improvements made in Hydejack 9. Maybe just glance at it to confirm that it is indeed a pretty long list.

Even More to Come

New features for 9.1 are already lined up. Code block headers and code line highlights for even better technical blogging, as well as download buttons on the resume page for PDF, vCard, and Resume JSON are just around the corner.

Get It Now

The Free Version of Hydejack is now availabe on RubyGems and for the first time also on GitHub Packages. The source code is available on GitHub as always.

The PRO Version is scheduled to release on July 7th on Gumroad. Pre-Orders are open now:

• Version 9
• Grid Layout
• Auto-Hiding Navbar
• Pricing
• PRO+
• Communication

Version 9

Version 9 is the next “major” version of Hydejack, that will once again alter its design. The reason for this is that with the current style for hyperlinks, the choice of accent colors is quite limited, as some might look good on white background, but be barely legible on dark background and vice-versa. Instead of solving this in the most complicated way possible through some advanced color arithmetic (assuming that’s what it’s called), I’ve opted to reduce the use of the accent color instead. You can see a work-in-progress on my personal site. I have to say I’m quite please with the results.

Grid Layout

Purchasers of the PRO version will have access to a new grid layout (see screenshot) that’s basically a version of the project cards adapted for posts.

Auto-Hiding Navbar

One of the annoyances of the current version of Hydejack is the inability to reach the navbar from the middle of the page. I won’t be implemented a “Jump to Top” button, since I’ve never used one myself and wondering if anyone ever did.

In the past I’ve set the header to fixed, but this either caused overlapping artifacts, or took away too much screen real estate when adding a background color. In V9 this is resolved by a auto-hiding navbar, that will disappear when scrolling down, and reappear when scrolling up. Obviously, this pattern is not new, but getting it work smoothly took a bit of figuring out and there are still improvements to be made, though I thik the current version is “good enough”. Again, my personal site has the work-in-progress.

Pricing

To state the obvious, v9 will be a paid upgrade. As before, I won’t give away work for free only to have people complain that I’ve changed their design. Instead, v9 is a paid opt-in for those who like the new design and features. Against any economic sense, I will also release many of the behind the scenes updates as part of the 8.6 release. The details are yet to be worked out, but it will solve several of the open issues.

Since v9 will be a pretty small update otherwise, the cost will be something along $20 via a discount code included on the 8.6 release zip.

PRO+

For the first time I will be offering a PRO+ Version that will include an hour of my time to be used for anything from asking questions to debugging a particular issue. In the past I’ve shut down many if not most support requests because I have this habit of not wanting to do professional work free of charge.

At the same time there was no path for someone who — quite correctly — calculated that I could fix their particular issue in a fraction of the time they themselves or any Jekyll developer on the marketplace could. For them, as well as anyone who isn’t quite as price sensitive to begin with, there will be the PRO+ option that will include a priority email to contact me. Support requests to the regular email will be discarded with no exceptions once this option is available.

Communication

As with this post, going forward I’ll be communicating in a more personal, less business-y tone. I’ve made the mistake of dabbling in marketing speak, even imitating Apple at times, though it is a poor fit for the product at hand. Hydejack is a very niche, very opinionated product that wouldn’t even exist if I didn’t want it for myself. Given that, the “broadest possible reach”-style of communication is… ineffective. If nothing else, writing bland, gentrified copy is boring and takes too long, while “thinking out loud” type of writing is both fun to write and quicker to produce.

1. Better Dark Mode
2. Better Cover Pages
3. Better Font Loading
4. What’s Next?

Better Dark Mode

This service release includes a major improvement to dark mode, which is now matching the operating system’s default. This is already possible in Safari, and just this week a new version of Chrome shipped with this feature as well.

Better Cover Pages

Scrolling on a cover page will now close the drawer. This makes the cover page much more useable since it will no longer confuse to new visitors. This is especially true for desktops, where swiping horizontally isn’t a typical interaction pattern. A future version of Hydejack could link the extension of the drawer the the scroll position, similar to how many marketing sites work these days.

Better Font Loading

The awkward JS-based font loading mechanism is gone and now replaced by font-display: swap. Support for this in Google Fonts landed earlier this year and is now used by Hydejack. As a side effect, fonts are now properly displayed in IE11 again, greatly improving backwards compatibility of the theme.

There are many more smaller changes and bugfixes. As always, yo can read the full patch notes in the CHANGELOG.

What’s Next?

8.6 will include a rewrite of the drawer, dynamic page loading, and image lazy-loading components. These are new written with TypeScript and LitElement for better code quality, browser integration, and future-proofness. The rewrites also include many bug fixes and performance improvements.

While I would also like to do a v9 (and accompanying price hike), most of the work I’ve done on it is now on the 8.5 and 8.6 tracks.

Starting with version 9, Hydejack is using caching techniques that should make most of the tips here obsolete!

• Disable Inline CSS
• Disable Per-Page Styles
• Use Simpler Related Posts
• Define Sidebar Entries in the Config File
• Conclusion

Before we get started, if you are primarily concerned with build times during writing/previewing new articles, try using the --incremental flag, e.g.

bundle exec jekyll serve --incremental

For more, see the Jekyll docs .

With that out of the way, here are three ways to improve Hydejack’s production build speed:

Disable Inline CSS

Inlining critial CSS into each page increases page load speed in the browser, but it also introduces a significant build time increase. This is due to scssify being called for every single page with a large chunk of Hydejack’s SCSS as input.

To disable this optimization, set no_inline_css to true in the config file.

hydejack:
  no_inline_css: true

Disable Per-Page Styles

Hydejack allows you to change the accent color on a per-page basis. While this is a neat feature, it’s certainly not necessary and many sites don’t use it. Similar to inline CSS, it involves a call to scssify per page, which increases build time (though to a lesser extent).

To disable this feature, set no_page_style to true in the config file.

hydejack:
  no_page_style: true

Use Simpler Related Posts

Hydejack does some clever things to show more related “Related Posts” on the bottom of blog posts. However, clever things (implemented within the liquid templating engine) take time, and this becomes apparent when trying to build a site with 10,000 posts.

To speed up building further, set the (admittedly poorly named) use_lsi option to true:

hydejack:
  use_lsi: true

Define Sidebar Entries in the Config File

In previous versions of Hydejack adding entries to the sidebar was done by setting menu to true in the front matter of a page. This meant that finding the sidebar entries required checking every page for the menu flag, once per page. This was slow and the time increased quadratically with the number of pages. Staring with version 8.3, you can define sidebar entries in the config file under the menu key like so:

menu:
  - title: Blog
    url:   /blog/
  - title: Projects
    url:   /projects/
  - title: Resume
    url:   /resume/
  - title: About
    url:   /about/

The old way of doing things still works if you upgrade to 8.3. Only when you set the menu key will Hydejack switch to the new behavior.

Conclusion

Hydejack’s default settings are fine for small personal blogs of around 100 pages. However, when building large sites with 1,000 pages or more, build time becomes an issue. The following settings will help, but can’t overcome the inherent limitations of Jekyll.

# file: `_config.yml`
hydejack:
  no_inline_css: true
  no_page_style: true
  use_lsi:       true

menu:
  - title: Blog
    url:   /blog/
  - title: Projects
    url:   /projects/
  - title: Resume
    url:   /resume/
  - title: About
    url:   /about/

When I was playing around with Unity, I even considered a subscription just so I could use the dark theme, which is exclusive to subscribers. Following this line of thought, I’ve added a Dark Mode to the PRO version of Hydejack.

This is what it looks like!

A unique challenge with regards to Hydejack was its color customization feature. As it turns out, a generic gray does not look good when combined with many accent colors, while a slightly tinted gray only looks good with a small range of accent colors.

To solve the problem, Hydejack’s Dark Mode adjusts the background based on the theme_color. This property can be set for the entire site, or individual pages just like accent_color. It also adjusts the UI of many browsers that support the Web App Manifest API, making the whole experience even more seamless.

Dark Mode adjusts to a different accent colors.

While it’s not feasible to enable Dark Mode based on a visitor’s exact sunrise and sunset times¹, site authors can opt-in to enable Dark Mode based on a visitor’s local time.

Site authors can also enable Dark Mode by default and/or hide the light switch:

hydejack:
  dark_mode:
    # Set to `true` to always use the dark theme.
    always:            false

    # Set to `true` to use the dark theme based on visitors' local time.
    dynamic:           true
    sunrise:           6
    sunset:            18

    # Set to `true` to allow visitors to switch between light and dark mode.
    icon:              true

Dark Mode is now available for buyers of the PRO version.

• Cover Pages
• Lazy-Loading Images
• Better Blog Layout
• Dark Mode 🌗 (coming soon)
• Offline Support ⚡️

Cover Pages

The new design doubles down on Hydejack as your personal site. The new Cover Pages let visitors know what you’re about at a glance, showing your logo or profile picture, tagline or description, and selection of social media icons.

Sliding over a cover page will reveal the content below.

Lazy-Loading Images

Using lots of images can severely impact the performance of a site. It can also cause layout quirks when images pop into existence. In Hydejack 8 you have the option to provide width and height information for your images and let Hydejack lazy-load them as readers scroll the page.

Images are loaded as they are scrolled into view.

Better Blog Layout

The blog layout finally catches up to modern design standards and renders a posts’s image as part of the preview, giving it a tastier look that makes visitors more likely to engage.

Hydejack’s improved blog layout renders each post’s image.

Dark Mode 🌗 (coming soon)

In 8.1, buyers of the PRO version will have access to Dark Mode. At your choosing, it will be enabled by default, enabled based on visitors’ local time, or flipped on by a switch.

Hydejack switches between light and dark mode fluidly.

Offline Support ⚡️

Version 8 introduces experimental offline support. This allows visitors to navigate your site while offline and continue reading articles when connectivity is lost. It also improves loading times for repeat visitors dramatically.

• Large Tables
• Code blocks
• Math
• Message boxes
• Large text
• Large images
• Captions to images
• Large quotes
• Faded text

Large Tables

Code blocks

// Example can be run directly in your JavaScript console

// Create a function that takes two arguments and returns the sum of those
// arguments
var adder = new Function("a", "b", "return a + b");

// Call the function
adder(2, 6);
// > 8

Math

Lorem ipsum $f(x) = x^2$.

Message boxes

NOTE: You can add a message box.

Large text

You can add large text.

Large images

Captions to images

A caption to an image.

Large quotes

You can make a quote “pop out”.

Faded text

I’m faded, faded, faded.