Hydejack

Introducing Hydejack 8

2018-06-30T00:00:00+00:00

After a long wait, Hydejack 8 finally sees the day of its release. It makes Hydejack look more elegant (no more super bold headings) and introduces features that make your site more impressive to first time visitors, while loading faster for repeat visitors.

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.

Example Content III

2018-06-01T00:00:00+00:00

Hydejack offers a few additional features to markup your markdown. Don’t worry, these are merely CSS classes added with kramdown’s {:...} syntax, so that your content remains compatible with other Jekyll themes.

Large Tables

Default aligned	Left aligned	Center aligned	Right aligned	Default aligned	Left aligned	Center aligned	Right aligned	Default aligned	Left aligned	Center aligned	Right aligned	Default aligned	Left aligned	Center aligned	Right aligned
First body part	Second cell	Third cell	fourth cell	First body part	Second cell	Third cell	fourth cell	First body part	Second cell	Third cell	fourth cell	First body part	Second cell	Third cell	fourth cell
Second line	foo	strong	baz	Second line	foo	strong	baz	Second line	foo	strong	baz	Second line	foo	strong	baz
Third line	quux	baz	bar	Third line	quux	baz	bar	Third line	quux	baz	bar	Third line	quux	baz	bar
Second body				Second body				Second body				Second body
2 line				2 line				2 line				2 line
Footer row				Footer row				Footer row				Footer row

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$ .

$\begin{aligned} \phi(x,y) &= \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right) \\[2em] &= \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) \\[2em] &= (x_1, \ldots, x_n) \left(\begin{array}{ccc} \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\ \vdots & \ddots & \vdots \\ \phi(e_n, e_1) & \cdots & \phi(e_n, e_n) \end{array}\right) \left(\begin{array}{c} y_1 \\ \vdots \\ y_n \end{array}\right) \end{aligned}$

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.

Example Content II

2017-11-23T00:00:00+00:00

There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.

There should be whitespace between paragraphs.

Text can be bold, italic, or ~~strikethrough~~.

Link to another page.

Header 2

This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

Header 3

This is a blockquote following a header.

When something is important enough, you do it even if the odds are not in your favor.

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}

# Ruby code with syntax highlighting
GitHubPages::Dependencies.gems.each do |gem, version|
  s.add_dependency(gem, "= #{version}")
end

Header 4

This is an unordered list following a header.
This is an unordered list following a header.
This is an unordered list following a header.

Header 5

This is an ordered list following a header.
This is an ordered list following a header.
This is an ordered list following a header.

Header 6

head1	head two	three
ok	good swedish fish	nice
out of stock	good and plenty	nice
ok	good `oreos`	hmm
ok	good `zoute` drop	yumm

There’s a horizontal rule below this.

Here is an unordered list:

Item foo
Item bar
Item baz
Item zip

And an ordered list:

Item one
Item two
Item three
Item four

And a nested list:

level 1 item
- level 2 item
- level 2 item
  - level 3 item
  - level 3 item
level 1 item
- level 2 item
- level 2 item
- level 2 item
level 1 item
- level 2 item
- level 2 item
level 1 item

Small image

Large image

Definition lists

Name: Godzilla
Born: 1952
Birthplace: Japan
Color: Green

Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this. Or is it?

The final element.

Hydejack’s New Design

2017-11-17T00:00:00+00:00

While v7 brings an insane amount of new stuff, the most notable change is the new background image. It is no longer anti-selling the theme. The old image was a blurred version of Napoleon Bonaparte, which was just… weird. I could tell the story of how this came to be, but I’d rather show you the new and improved background image.

New background image

Yes, it’s an aerial shot of a beach (so hot right now).

Hydejack’s new background image.

Q: What has this picture to do with Hydejack? Nothing really, I just like how it looks. However: Boat → Pirates → Hijacking → Hydejack (illuminati confirmed)

Even though it is a free image from Unsplash (…), it’s unique in the sense that I’ve modified it so it looks better inside the sidebar. Specifically, I’ve straightened out the beach and rotated the boat so that it sits at a nice 90 degree angle.

For comparison, here is the non-euclidean mess the original photo was. Pretty OCD, I know.

The original photo before it was “straightened out” by applying Photoshop magic.

New color palette

I’ve extracted the major colors from the background image, which now form Hydejack’s color palette:

New logo

Hydejack also has a new logo, which is based on the new color palette. It also features the best font on Google Fonts, and probably the world: Roboto Slab (which is to say, I like it a lot).

Better Gem Support (v6.5)

2017-07-27T00:00:00+00:00

This maintenance release includes various quality-of-life improvements, especially when using the gem-based version of the theme. These changes come in handy when using Hydejack for a quick (project-) page: The home layout, which is used when using jekyll new, is now a proper layout that displays a few posts/pages below the regular content, and it is again possible to define an author in _config.yml without setting up a _data directory (for more, see blow).

Version 6.5 also includes smaller design adjustments. Most notably, the default font is now Noto Sans. With the benefit of hindsight, using a serif font in combination with the slab headings feels more like a bug in the design than anything else. However, should you be happy with Noto Serif (the previous default font), there is no need to worry — this only effects the default setting.

For the full patch notes, read on.

Patch Notes

Added

Hydejack now uses additional Jekyll plugins by default, which make working with GitHub more convenient. They have been added to the Gemfile and _config.yml. Note that existing users need to update their _config.yml:

gems:
  - jekyll-default-layout # new
  - jekyll-feed
  - jekyll-optional-front-matter # new
  - jekyll-paginate
  - jekyll-redirect-from
  - jekyll-relative-links # new
  - jekyll-sitemap

Added licenses folder that includes the full license texts of licenses mentioned in NOTICE.md.

You can, once again, define the author in _config.yml. Using _data/authors.yml is still recommended (and takes precedence), but this option is more convenient when setting up a quick (project-) page using the gem-based theme. Also, a mini-version of _data/social.yml can be provided as part _config.yml, e.g.:

author:
  social:
    github: https://github.com/qwtel/hydejack
    npm: https://www.npmjs.com/package/hydejack
    download: https://github.com/qwtel/hydejack/archive/v8.1.1.zip

data_social:
  github:
    name: GitHub
    icon: icon-github
  npm:
    name: npm
    icon: icon-npm
  download:
    name: Download
    icon: icon-box-add

A download icon has been added to the default icon font and _data/social.yml has been updated.
Added _includes/my-scripts.html, _sass/my-inline.scss and _sass/my-style.scss to make it easier to add custom scripts and styles without modifying the source. This is especially handy when using the gem-based version of the theme.

Changed

Loading web fonts now starts earlier and content download no longer blocks swapping out the fallback font for the new font. Previously, a page containing lots of images could have delayed displaying the web fonts significantly.
The home layout no longer contains a message suggesting that you don’t use it.
The home layout now shows up to 5 blog posts and up to 5 pages blow the regular content.
The version history has been moved from docs/<version>/versions.md to CHANGELOG.md.
The license notices have been moved from docs/<version>/licenses.md to NOTICE.md.
Updated gem and npm dependencies

Design

The default font has been changed from “Noto Serif” to “Noto Sans”. If you have a font entry in _config.yml, this will have no effect.
nap.jpg is no longer used as default background image in the gem-based theme.
The sidebar content width is now limited to the width of the sidebar (this only effects large screens).
Project cards and pagination buttons now have slightly rounded borders for a less “rigid” look.

How to restore the old styles

If you would like to use the old font, add the following to _config.yml:

font_heading: "'Roboto Slab', Helvetica, Arial, sans-serif"
font:         "'Noto Serif', Georgia, serif"
google_fonts: "Roboto+Slab:700|Noto+Serif:400,400i,700,700i"

If you were relying on the default setting for the background image, add the following to _config.yml:

image: /hydejack/assets/img/nap.jpg

Note that you have to replace /hydejack with your baseurl.

To restore the old sidebar, open (or create) _sass/my-inline.scss and add the following:

@media screen { .sidebar-sticky { left: 2rem; max-width: none; } }

To remove the border radius, open (or create) _sass/my-inline.scss and add the following:

.card, .pagination-item { border-radius: 0!important; }

Related Projects and Data Tables (v6.4)

2017-06-21T00:00:00+00:00

In this release I’ve added a “Other Projects” section to the bottom of each project page, making it easier for users to navigate through your collection and discover other projects. Also, it’s now possible to display larger (data-) tables that were previously cut off (especially on mobile devices).

For more on how to add tables, see the new section in docs/writing.

Smaller changes include a reduced usage of horizontal lines and a more “semantic” use of hr elements. Specifically, the semantics of the resume layout have been improved. This is best visualized when viewing the page with a text browser like w3m. For example, before 6.4 the skills section looked like

Skills

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Web Development | Level: Master

Keywords:

  • HTML
  • CSS
  • Javascript

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Compression | Level: Master

Keywords:

  • Mpeg
  • MP4
  • GIF

(lots of hrs, skill level as part of the headline 😕)

Now it looks like

Skills

Web Development
    Level: Master
    Keywords:
      □ HTML
      □ CSS
      □ Javascript
Compression
    Level: Master
    Keywords:
      □ Mpeg
      □ MP4
      □ GIF

(using a dl, so that Level -> "Master", Keywords -> ul, …)

There’s many more minor changes and fixes that you can read below.

Patch Notes

Minor

Added “Other Projects” section to the bottom of the project layout (similar to “Related Posts”)
Added CSS classes that make viewing larger (data-) tables possible
Added section on tables to docs/writing
Reduced use of <hr/> elements, using CSS borders instead.
Improved semantic HTML of resume
Follow favicon best practices and include example icons
Added no_google_fonts option

Design

Reduced number of horizontal lines, making many layouts feel less “cluttered” (esp. blog layout)
Made link hover styles consistent across the board
Visually separated thead and tbody and tfoot within tables.
Changed RSS and email icons
Removed top margin for consecutive headings, e.g. when using h3 immediately after h2.

Fixes

Fixed bug that caused inline math to be moved to the end of a paragraph when dynamically loading a page.
Fixed bug that caused layout to break in IE11.
Fixed bug that caused the project animation to “jump” when using long project titles.
No more empty attributes on img tags.

Third Party Scripts (v6.3)

2017-06-06T00:00:00+00:00

This release makes including third party plugins easier. Until now, the push state approach to loading new pages has been interfering with embedded script tags. This version changes this by simulating the sequential loading of script tags on a fresh page load.

This approach should work in a majority of cases, but can still cause problems with scripts that can’t be added more than once per page. If an issue can’t be resolved, there’s now the option to disable push state by setting disable_push_state: true in config.yml.

What’s happening?

The problem is as follows: When the browser encounters a script tag while parsing a HTML page it will stop (possibly to make a request to fetch an external script) and then execute the code before continuing parsing the page (it’s easy to how this can make your page really slow, but that’s a different topic).

In any case, due of this behavior you can do things like include jQuery, then run code that depends on jQuery in the next script tag:

<script src=".../jquery.js"></script>
<script>
  $('#tabs').someJQueryFunction(); // works
</script>

I’d consider this an anti-pattern for the reason mentioned above, but it remains common and has the advantage of being easy to understand.

However, things break when Hydejack dynamically inserts new content into the page. It works fine for standard markdown content like p tags, but when inserting script tags the browser will execute them immediately and in parallel, because in most cases this is what you’d want. However, this means that $('#tabs').someJQueryFunction(); will run while the HTTP request for jQuery is still in progress — and we get an error that $ isn’t defined, or similar.

From this description the solution should be obvious: Insert the script tags one-by-one, to simulate how they would get executed if it was a fresh page request. In fact this is how Hydejack is now handling things (and thanks to rxjs’ concatMap it was easy to implement), but unfortunately this is not a magic solution that can fix all problems:

Some scripts may throw when running on the same page twice
Some scripts rely on the document’s load event, which has fired long before the script was inserted
unkown-unkowns

But what will “magically” solve all third party script problems, is disabling dynamic page loading altogether, for which there’s now an option. To make this a slightly less bitter pill to swallow, there’s now a CSS-only “intro” animation that looks similar to the dynamic one. Maybe you won’t even notice the difference.

Patch Notes

Minor

Support embedding script tags in markdown content
Add disable_push_state option to _config.yml
Add disable_drawer option to _config.yml
Rename syntax highlighting file to syntax.scss
Added chapter on third party scripts to documentation

Design

Add subtle intro animation
Rename “Check out X for more” to “See X for more” on welcome* page
Replace “»” with “→” in “read more”-type of links

Fixes

Fix default color in gem-based theme

JavaScripten (v6)

2017-05-03T00:00:00+00:00

Hydejack has always featured a JavaScript-heavy sidebar, but other than that, JS has been used sparingly. This changes with this release, which adds a ton of (optional) code that changes the feel of the theme dramatically.

Major

Pages are now loaded and swapped through JavaScript. This has a number of effects. First of all, it looks cool, but the animations aren’t just about aesthetics: They also help to hide the network time of fetching the next page, making the entire site feel faster. At the same time, the FOUC introduced in the last release will no longer occur (except on the initial page load).

Most JS is now unified in the _js directory and written in ES2016.
The blog-by-tag layout has been renamed to list.
public folder has been renamed to assets to make the theme compatible with Jekyll’s gem-based themes.
Tags are now supported via Jekyll Collections instead of _data.
The sidebar can now add links to all kinds of pages.
Categories are now supported.
Author information moved to _data/authors.yml
Added support for multiple authors.
Using jekyll-feed plugin (supported on GitHub Pages) instead of custom solution.
Added about layout.
Added not-found layout.
Added redirect layout

See the the migration guide for instructions on how to upgrade.

Minor

The “accent” font (heading font) is now used for all headings. This gives the theme a “bolder” look and was necessary for the animation: link => heading.
Changed default text font from “PT Serif” to “Noto Serif”.
Added CSS classes for styling markdown content.
Links have a new style. They now always display an underline to make the choice of the link color less critical (darker colors were hard to distinguish from regular text).
Made social media icons larger and easier to tap.
Social media icons are now also part of the “about” sections of a post.
Added support for a copyright notice at the bottom. Can be set via the config variable copyright.
Changed responsive breakpoints and added support for very large displays.
The site is now printable.
The blog layout now only shows the excerpt instead of the full post.
Links to external pages are now marked with a symbol.
Added margin above social media icons to prevent accidental tapping
Added gem files so that bundle install and bundle exec jekyll serve work
Disabled HTML minification when running via jekyll serve
Added dingbat to signal end of post

Fixes

Related posts is no longer blank for posts that do not belong to a category.
Footnotes now use the text version of “leftwards arrow with hook” instead of the emoji on iOS.
Text is no longer invisible while waiting for Google Fonts to load.
Always show scrollbar to prevent layout “jumps”

Get JavaScripten on GitHub

The Fast One (v5)

2016-09-17T00:00:00+00:00

This major release increases page load speed dramatically. The page now scores roughly 90/100 on Google’s PageSpeed Insights (up from ~50) and has a high score on similar tools.

NOTE: This post is outdated and only included for legacy reasons. See the Documentation for up-to-date instructions.

Most importantly, the critical rendering path is no longer blocked by loading styles or scripts, meaning the site becomes visible faster.

Page load speed matters to Google, but is also very apparent to visitors with slow internet connections.

However, as a side effect of these optimizations, the site now has a visible FOUC. Future versions might address this, but it is the currency in which loading speed is being payed for and can not be fully avoided.

Major

HTML, CSS and JS served minified.
JS downloading starts only after the rest of the page is rendered.
Critical CSS (above-the-fold) is inlined into the document, the rest is fetched later.

In order to minify the CSS and make it more modular it has been rewritten in SCSS.

Minor

Colored focus outline in page color
Tabindex for tab navigation
Social media icons easier tappable with finger

Trivia

Not strictly part of the release, but the images have been blurred to increase text readability and help with loading speed as well (burred images get compressed by JPG much better).

Get The Fast One on GitHub

Social Media Impocalypse (v4)

2016-08-30T00:00:00+00:00

Hydejack v4 adds a lot of social media icons and introduces a new default layout. It also breaks things, hence a new major release number.

Breaking

Structure of _config.yml has changed
- Social media usernames are now located under author: social: <platform>: <username>.
- disqus is now a top-level entry (moved from author).
- Now has font, font_accent and google_fonts fields that are mandatory.
Now defaults to the blog layout, old style is available via blog-by-tag layout, see archive.html.

NOTE: This post is outdated and only included for legacy reasons. See the Documentation for up-to-date instructions.

New features

Added a lot of social media icons, configurable via _config.yml.
New blog layout. Classic, paginated.
Fonts are configurable via _config.yml.

Design

Link underlines are now fixed-sized for all font sizes (no thicker lines for headlines, etc)

Fixes

Correctly set the meta description field using either the description field or post.excerpt as a fallback (used to contain the unmodified markdown).
Fixed various URL bugs relating to site.baseurl.

Internal

Refactoring, preventing code duplications, heavier usage of includes.

Get Social Media Impocalypse on GitHub