Hello.

My name is Wouter IJntema. I am a software developer living in Rotterdam, The Netherlands. I love creating apps for iOS, Android and the Web. I have a passion for user interface design, graphic design and photography. This website is a place to display the apps, websites, articles and other things that I created myself or found on the Web and would like to show you.
©
Photo by chuttersnap on Unsplash
Header image for 'BookBucket: your personal bookshelf on which you keep discovering new books'. Photo by chuttersnap on Unsplash.

BookBucket: your personal bookshelf on which you keep discovering new books.

The last couple of months I’ve been working in my spare time on a new app called BookBucket. I love reading books, both fiction and non-fiction. I also like to stay organized, so keeping track of the books I’ve read and the books I want to read is what I used to do in a simple note in my note taking app. As an app developer I always want to make things a little faster by automating it. For instance, if you look at the covers of some thrillers by a single author, they tend to look a lot alike. So I am often asking myself: have I read this one yet? This triggered me into thinking: what if I could scan the cover or barcode of the book and see if I had read it. Well, now there’s an app for that: BookBucket.

Baldacci is making my point with a similar cover for each book Baldacci is making my point with a similar cover for each book

BookBucket allows you to search for books by title, author and barcode using the device’s camera. The app shows you all kinds of information about the book. And, of course, for each book you can indicate if you’ve read it or want to read it. Rating the book and leaving a note allows you to look back at a book and know what your thoughts were while reading it.

The other problem I was facing was that it sometimes takes time to discover a new book. Therefore I am working on ways to discover new books based on the books you’ve been reading. Currently this is done by presenting you suggestions based on the book you are viewing. A warning: this may lead you in never ending rabbit hole, since you can easily navigate from one book to the next while when you keep discovering new additions for your reading list.

BookBucket screenshots

Please give BookBucket a go. It is still in development, so many feature to come. You can get it in the iOS App Store in the Netherlands. It’s free to use and you do not have to create an account to get started.

©
Photo by Vincent van Zalinge on Unsplash
Header image for 'New website built with Jekyll'. Photo by Vincent van Zalinge on Unsplash.

New website built with Jekyll.

I really needed to dust off this website, which is always a good reason to look for the best technology available to create a new one. I started with listing what I wanted the website to do. First and foremost, it had to be simple. Simple to create and simple to maintain. Otherwise, I would always feel like there’s a hurdle to add or change something. I wanted a place to portray the things that I create, like a portfolio, but also a place to write about the things I am learning. Since social media is in a downward spiral lately, I felt that a personal blog was the best way to go. And the last real requirement was that it should be fast. I think that too many websites tend to not pay attention to this last aspect, while it greatly improve the usability.

Static site generator

I found that a static site generator would fit all of my needs. For those who don’t know, a static site generator allows you to develop your website with dynamic elements such as variables, but before publishing, the generator will process it and create a static version of it. The static version consists of pure HTML, CSS and, optionally, Javascript. The advantage is that you don’t need a database and no server side code. Now, that’s only one part of the choice, the second part is: which one?

Making a choice

There are many different options when it comes to a static site generator. Popular ones are GatsbyJS, Hugo, Jekyll, Next.js, Nuxt and much more. After trying several, I went with Jekyll. Jekyll is simple, allows you to write posts in Markdown format, supports Liquid to create dynamic templates and has first class support for a blog. The fact that the output is simple HTML and CSS, makes it fast as well. More on that later.

The building blocks

Jekyll has several content building blocks. These include pages, posts and front matter. Pages are the main building block. These include the home page, about page, contact page, etc. Blog posts go into _posts folder. Both pages and posts can be written in HTML, Markdown or even a combination of the two. In this case, I write the pages in HTML and the posts in Markdown. At the top of a page or post is the front matter. This is a YAML block with meta data for that file. It includes the title, applied layout (more on that later), post tags and permalink. You can also define your own variables. An example of front matter is shown below:

---
layout: post
title: "New website built with Jekyll"
date: 2020-03-01-09:20:00 +0100
categories: website
---

Structure

To structure your website you can define several layouts. Layouts can be seen as HTML templates that define where particular content goes. For instance I’ve defined a default.html which includes the basic HTML for each page. There’s a page.html, post.html and a home.html. Layouts have an inheritance structure. Each layout may contain several components, reusable elements. These are called includes. Examples of includes for this site are the header.html, footer.html and post.html. The latter is included on both the home page and the post page. Styling of your Jekyll website is typically done with SASS. I structured this in such a way that it matches the layouts and includes and generic styles go into a base SASS-file.

Dynamic content

Even though we’re talking about a static site generator, there’s some form of dynamic content. That is, not while browsing the site, but while generating it. Meaning you can define variables and data to be included in the content of the site. For instance, looking at the front matter above, you see a variable called title. To use this inside your layout you can simply use {{ post.title }} and the generator will replace it with the contents of the variable. Liquid, which is the template language being used, has a lot of possibilities, including loops, if-statements and filters.

Generating your website

While developing, Jekyll allows you to run a dev server equipped with live reload, which automatically refreshes the page when you make changes. Run jekyll serve -l to start the dev server. And when you are ready for deployment, run jekyll build and upload the contents of the _site folder to your web server.

Performance

As is to be expected from a static generated site, the performance is great. The Lighthouse audit result speaks for itself. Website performance

A great developer experience

Overall I had a great experience developing my new website with Jekyll. It was easy to understand, fast to build and outputs exactly what I need: a fast and responsive website that is easy to maintain. Now I only have to do so…

©
Photo by Wouter IJntema
Header image for 'Nightlight, a VS Code extension'. Photo by Wouter IJntema.

Nightlight, a VS Code extension.

I’ve created an extension for Visual Studio Code that switches the color theme based on the time of day. By providing your GPS coordinates, you can use it to automatically switch to dark mode when the sun sets and switch to light mode when the sun rises. You can get it at the Visual Studio Marketplace.

Nightlight for Visual Studio Code example

Features

Nightlight has the following features:

  • Set a night and day theme, for instance Night Owl at night and Atom One Light when it’s daytime.
  • Switch themes when the sun rises or sets.
  • Switch themes on predefined times.
  • Switch themes manually by using your own shortcut (CTRL+ALT+N by default).
  • Switch icon themes along with the color theme (since v1.3).

Configuration

Nightlight can be configured by setting the following settings:

  • nightlight.nightTheme: The theme to be displayed when it’s night
  • nightlight.nightIconTheme: The icon theme to be displayed when it’s night (default = your current icon theme)
  • nightlight.dayTheme: The theme to be displayed when it’s day
  • nightlight.dayIconTheme: The icon theme to be displayed when it’s day (default = your current icon theme)
  • nightlight.dayTimeStart: The time (format HH:mm) at which day time starts (if no GPS coordinates are configured)
  • nightlight.dayTimeEnd: The time (format HH:mm) at which day time ends (if no GPS coordinates are configured)
  • nightlight.gpsLong: The GPS longitude coordinate. This is used to determine the sunrise and sunset locally on your device.
  • nightlight.gpsLat: The GPS latitude coordinate. This is used to determine the sunrise and sunset locally on your device.

You can download the extension here and find the source code on GitHub.