As promised, in this second part of the website redesign story I’ll go over the technical details of the changes I made to the website.

Stack & frameworks

To get a sense of how the website’s built, here’s an overview of what I use to layout and serve its content.

• Jekyll
• Bulma
• Netlify

It’s a simple setup. The entire site is statically generated by Jekyll and then served by Netlify. Bulma is a CSS framework that allows me to style templates quickly.

Homepage

Let’s take a look at the homepage first. The list of apps is generated by including the app/overview.html template and assigning it a set of apps pages.

{% assign live = site.pages | where: 'layout', 'app/live' %}
{% assign announced = site.pages | where: 'layout', 'app/announced' %}
{% assign apps = announced | concat: live %}
{% include app/overview.html apps=apps %}

I fetch the apps to display by querying site.pages for pages that use the app/live and app/announced layout. Then I concatenate both arrays into a single apps variable and pass that to the includable app/overview.html template.

Overview template

The app/overview.html template checks if it’s on the homepage (if page.layout == "home") and adds the Danger Cove logo accordingly.

...
{% if page.layout == "home" %}
<div class="column is-4-widescreen is-half-desktop is-full-tablet is-full-mobile">
  <div class="box is-shadowless has-text-centered">
    {% include logo/retro.html %}
    <h1 class="title is-size-2-mobile is-1 is-spaced">{{ page.title }}</h1>
    <h2 class="subtitle is-size-5-mobile is-4">{{ page.subtitle }}</h2>
  </div>
</div>
{% endif %}
...

Then it loops over the provided apps and includes app/introduction.html for each. This is the actual visual representation of the app, in the form of a card. Pulling it out into a separate include makes it trivial to display the app card anywhere else. I’ll use it again when showing related apps with blog posts. More on that a little further down.

...
{% for app in apps %}
<div class="column is-4-widescreen is-half-desktop is-full-tablet is-full-mobile">
  {% include app/introduction.html app=app %}
</div>
{% endfor %}
...

Notice the convenient column CSS classes that Bulma provides. It’s trivial to scale the layout from mobile to widescreen devices.

Front matter

The app/introduction.html template pulls the title, subtitle, description and colors from the app’s front matter. This is what the front matter for Timeless looks like:

---
layout: app/announced
site_title: Don't get distracted by time
title: Timeless
subtitle: Reduce time anxiety
description: >-
  Get a more subtle sense of what time it is. Reducing time pressure and distraction.
date: 2018-07-18
icon: timeless-clock_512.png
hero: 
  icon: timeless-clock_512.png
  dominant_color: 
    r: 200
    g: 200
    b: 200
features:
  - Specify several, customizable 'time segments'.
  - Indicates the current segment in the menu bar.
  - Display the actual time and date with a single click.
tags:
  - macOS
  - Productivity
topic: timeless
mailchimp: 
  interests: [2]
permalink: /timeless/
---

Every card shows a specific rainbow of colors in its bottom right corner. Storing this information in the page’s front matter allows me to pull it out in the template and apply per-app design details.

{% assign color = app.hero.dominant_color %}
<div class="box" style="background-image: linear-gradient(135deg,
transparent 80%,
rgba({{ color.r }}, {{ color.g }}, {{ color.b }}, 0.25) 80%,
rgba({{ color.r }}, {{ color.g }}, {{ color.b }}, 0.25) 85%,
rgba({{ color.r }}, {{ color.g }}, {{ color.b }}, 0.5) 85%,
rgba({{ color.r }}, {{ color.g }}, {{ color.b }}, 0.5) 90%,
rgba({{ color.r }}, {{ color.g }}, {{ color.b }}, 0.75) 90%,
rgba({{ color.r }}, {{ color.g }}, {{ color.b }}, 0.75) 95%,
transparent 95%)
;">
...

It’s hard to get around using style="" for this loop. On the app’s landing pages I apply the colors to a generic CSS class that I can use in the template.

...
{% if page.hero.dominant_color %}
{% assign color = page.hero.dominant_color %}
<style>
  .hero-app {
    background: linear-gradient(35deg,
    transparent 60%,
    rgba({{ color.r }}, {{ color.g }}, {{ color.b }}, 0.25) 60%,
    rgba({{ color.r }}, {{ color.g }}, {{ color.b }}, 0.25) 70%,
    rgba({{ color.r }}, {{ color.g }}, {{ color.b }}, 0.5) 70%,
    rgba({{ color.r }}, {{ color.g }}, {{ color.b }}, 0.5) 80%,
    rgba({{ color.r }}, {{ color.g }}, {{ color.b }}, 1) 80%,
    rgba({{ color.r }}, {{ color.g }}, {{ color.b }}, 1) 90%,
    transparent 90%);
  }
...

Setting class="hero-app" atomatically applies the rainbow background for each app.

News overview

Before: After:

Pagination

Loading all posts on the /news page would be madness. The first step I took was to implement the jekyll-paginate-v2 plugin:

1. Add gem "jekyll-paginate-v2" to Gemfile:

    group :jekyll_plugins do
      ...
      gem "jekyll-paginate-v2"
    end
   

2. Activate the plugin in _config.yml:

    plugins:
      ...
       - jekyll-paginate-v2
         
    pagination:
      enabled: true
      sort_reverse: true # Required in my setup to order posts from new to old 
      permalink: "/page/:num/"
   

3. Add pagination settings to the news.markdown front matter:

    ---
    ...
    pagination:
      enabled: true
      per_page: 5
    ---
   

The pagination plugin is ready to be implemented in _layouts/news/home.html at this point. It comes down to two things:

1. Replacing {% for post in site.posts %} with {% for post in paginator.posts %} in the template.
2. Including the paginator controls somewhere on the page.

Full post content

I updated _includes/post/preview.html to show the entire post instead of just a preview. That’s it.

Related apps

This new feature uses some front matter magic to allow me to pull in related content with a blog post. Consider the _includes/post/related.html template:

{% assign tags = include.tags %}

{% for tag in tags %}
{% assign app = site.pages | where: 'topic', tag | first %}
{% if app %}
{% include app/introduction.html app=app %}
{% endif %}
{% endfor %}

Usage: {% include post/related.html tags=post.tags %}

It loops through all tags assigned to a post and then searches site.pages for a page that has a topic that matches the tag.

Imagine I write a post about Timeless and tag it like this:

---
...
tags: [updates, timeless]
...
---

If you look in the front matter for Timeless above, you’ll notice its topic:

---
...
topic: timeless
...
---

The app variable gets assigned and the app/introduction.html card template gets included. If the tags include multiple apps, each is shown.

Open-source

The full source code for this website is available on GitHub. For a comprehensive list of all changes made for this redesign, take a look at this diff: 3493aae..4518428

I hope you enjoyed this in-depth look at how I keep dangercove.com up-to-date. If you have any feedback, questions or comments let me know on Twitter.

I made some changes to the website that are worth sharing. In this post I’ll show you what’s different and in a follow-up I’ll go into detail about customizing my Jekyll theme.

Homepage

Before: After:

In the initial design the logo and tag line took up the entire screen. Scrolling was required to read about the apps. I can see what I had intended, but in practise it didn’t work well.

The new layout focusses on the software. It feels more compact and easier on the eyes. Note how the updated ‘cards’ clearly point out the app’s name and subtitle, conveying its purpose in a glance.

What do you think? Better, worse? Could it be improved? You can let me know on Twitter.

News overview

Before: After:

The news page bothered me for a while. The old template showed an endless list of post titles. I’ve written quite a few articles over the years and this mess didn’t invite anyone to read them.

In the updated situation it shows everything right on the overview. There’s no reason to not scan the first post. The results are paginated. Each page shows up to five entire stories. It’s effortless to keep reading.

Related apps

This is a new feature. Underneath each post it shows the apps that were mentioned. I struggled with directing readers from an article to an app. This might just solve it.

You might notice some new colors, adjusted margins and paddings as well. Nothing too radical. In the next post I’ll tell you how I implemented the major changes.

I’m delighted by the feedback I received from the people who downloaded the Timeless beta over the past two weeks. The two most requested features were:

• Displaying the indicator only on certain days.
• Showing something useful when the indicator isn’t in use.

The latest update addresses both these requests with a new scheduling feature and the option to show a regular old clock when the indicator sits idle.

This means you can display the time before and after your timeless period starts and during the days you’re not working. The main goal is to reduce friction when giving Timeless a go.

Feedback

If you haven’t already, I’m hoping you’ll install the new beta and let me know what you think.

The beta includes a built-in feedback dialog that you can use.

After using Timeless myself for weeks and tweaking the experience, it’s finally time to share the first beta version with you. I’m very excited about this. Try Timeless now.

Hiding the clock from the corner of my eye and switching to the less specific indicator of Timeless has allowed me to be more productive while reducing anxiety. I’m curious to hear if it does the same for you.

Download the beta today

After launching the app for the first time, the setup wizard will help you get started by completing the tasks below.

1. Hide the clock from your menu bar.
2. Define the indicator ranges.
3. Submit bug reports, comments and suggestions.
4. Updates to the beta will be presented to you automatically.

I’m working on a more natural way of getting the most out of my day: it’s an app called Timeless. At its core it gives me a generic sense of what part of the day I’m in: morning, lunch time, noon etc.

Instead of breaking concentration or induce stress it lets me continue working when I’m still in the time bracket I’m expecting to get stuff done. Then, in a glance, it lets me know that I’ve entered a new part of the day. If it’s between 12pm and 2pm I should probably get lunch.

There’s no notification to ‘get lunch now’, just a hint that when I’m ready I should probably go grab something to eat.

Even when combined with more urgent interruptions, like water breaks, it allows me to comfortably get back to work. I don’t feel any pressure or hesitance because of how much time I have left in the day.

Beta sign-up

I’m getting ready to let others give this a go as well. If you’d like to be invited to try the beta, subscribe to the mailing list. Thanks!