I heart Jekyll and Jekyll hearts me. It’s a lean and mean static site generator blogging machine that enables you to ‘blog like a hacker’. One of the coolest features is the jekyll serve command, which serves up a local instance of your site, which can be accessed at http://localhost:4000.

Today when building my site locally I received two Build Warnings caused by the layout options in the feed.xml and sitemap.xml configuration files:

$ jekyll serve --watch
Configuration file: /Path/To/Jekyll/_config.yml
            Source: /Path/To/Jekyll
       Destination: /Path/To/Jekyll/_site
      Generating... 
     Build Warning: Layout 'none' requested in feed.xml does not exist.
     Build Warning: Layout 'nil' requested in sitemap.xml does not exist.
                    done.
 Auto-regeneration: enabled for '/Path/To/Jekyll'
Configuration file: /Path/To/Jekyll/_config.yml
    Server address: http://0.0.0.0:4000/
  Server running... press ctrl-c to stop.
Jekyll Layout Build Warnings

Fortunately, the fix is very simple:

  • Open file: /Path/To/Jekyll/Site/feed.xml
  • Change layout: none to layout: null
  • Open file: /Path/To/Jekyll/Site/sitemap.xml
  • Change layout: nil to layout: null
  • Marvel at your technical prowess.

Props to Michael Lee for sharing his solution.

Keep blogging like a boss.

Inspired by Jakob Lægdsmand’s fantasic how to get an awesome looking terminal on mac os x blog post, I switched my OS X Terminal from the humble Bash (Bourne Again SHell) to the Zsh (Z shell). I also installed Oh-My-Zsh, an open source, community-driven framework for managing Zsh’s configuration.

Before

A Bash OS X Terminal with Homebrew theme
A Bash OS X Terminal with Homebrew theme.

After

A Zsh OS X Terminal with Solarized (Dark) theme and Oh-My-Zsh eastwood theme
A Zsh OS X Terminal with Solarized (Dark) theme and Oh-My-Zsh eastwood theme.

Oh-My-Zsh is a thing of beauty. My shell and I are in a very happy place indeed!

__                                     __
  ____  / /_     ____ ___  __  __   ____  _____/ /_
 / __ \/ __ \   / __ `__ \/ / / /  /_  / / ___/ __ \
/ /_/ / / / /  / / / / / / /_/ /    / /_(__  ) / / /
\____/_/ /_/  /_/ /_/ /_/\__, /    /___/____/_/ /_/
                        /____/

Welcome to the future of CSS layout: The CSS Flexible Box Layout Module (or Flexbox for short). It is a powerful new CSS box model optimised for user interface design. Look how easy it is to implement a Holy Grail page layout.

The HTML

<!doctype html>
<html lang="en">
<head>
<title>A Holy Grail Flexbox layout</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="holy-grail.css">
</head>
<body class="holy-grail">
    <header>
        <h1>Header</h1>
    </header>
    <div class="holy-grail-body">
        <main class="holy-grail-content">
            <h2>Content</h2>
        </main>
        <nav class="holy-grail-nav">
            <h2>Navigation</h2>
        </nav>
        <aside class="holy-grail-sidebar">
            <h2>Sidebar</h2>
        </aside>
    </div>
    <footer>
        <h2>Footer</h2>
    </footer>
</body>
</html>

The CSS

body {
        background: #c4d1d1;
}
.holy-grail {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
}
.holy-grail-body {
    display: flex;
    flex: 1;
}
.holy-grail-content {
    flex: 1;
    background: #ffc94e;
}
.holy-grail-nav, .holy-grail-sidebar {
    /* 12em is the width of the columns */
    flex: 0 0 12em;
    background: #c9ea5d;
}
.holy-grail-nav {
    /* put the nav on the left */
    order: -1;
    background: #85d6e4;
}
header
{
    background: #92e4c9;
}
footer
{
    background: #f7846a;
}
* {
    color: #333;
}

Which yields the following:

A Holy Grail Flexbox layout
A Holy Grail Flexbox layout.

For more information about Flexbox, check out the comprehensive A Complete Guide to Flexbox article on CSS-Tricks.

I’ve grown to love Google’s note taking service, Google Keep. It provides a simple, fast and convenient method for taking notes and boasts excellent cross platform support. The killer feature for me is the ability to access my notes on a multitude of devices, quickly and easily.

In my opinion, there are two reasons this works so well: simplicity and design. The app is simple. It does one thing, very, very well indeed. A key part of the design is the beautiful colour palette that Google have chosen for Keep. It is vibrant and fun, but not too bright to distract you from taking notes. You can assign each note one of eight different colours: white, red, orange, yellow, lime, green, blue or grey.

Taste the rainbow

Hex

background-color: #ffffff  // white
background-color: #f7846a  // red
background-color: #ffc94e  // orange
background-color: #f1f14e  // yellow
background-color: #c9ea5d  // lime
background-color: #92e4c9  // green
background-color: #85d6e4  // blue
background-color: #c4d1d1  // grey

RGB

background-color: rgb(255,255,255)  // white
background-color: rgb(247,132,106)  // red
background-color: rgb(255,201,78)   // orange
background-color: rgb(241,241,78)   // yellow
background-color: rgb(201,234,93)   // lime
background-color: rgb(146,228,201)  // green
background-color: rgb(133,214,228)  // blue
background-color: rgb(196,209,209)  // grey
Google Keep White Google Keep Red Google Keep Orange Google Keep Yellow Google Keep Lime Google Keep Green Google Keep Blue Google Keep Grey
An array of eight beautiful colours.

GIMP palette

When it comes to image manipulation, my weapon of choice is the formidable GNU Image Manipulation Program (GIMP). It’s a fast, free, cross-platform equivalent to Adobe’s Photoshop. Like any decent image editor, GIMP allows you to create a custom palette containing various combinations of colours. A palette is essentially a plain text file with a Name at the top, followed by a list of colours. On Mac OS X (10.9.2), the default palette files for GIMP (2.8.10) are saved in: /Applications/GIMP.app/Contents/Resources/share/gimp/2.0/palettes/ folder. I created a new palette file called Google_Keep.gpl and saved it in the respective palettes folder:

GIMP Palette
Name: Google Keep
#
255 255 255  White
247 132 106  Red
255 201  78  Orange
241 241  78  Yellow
201 234  93  Lime
146 228 201  Green
133 214 228  Blue
196 209 209  Grey

My students have access to Microsoft Visual Studio 2010 to execute C applications. Creating a new project for each exercise is time consuming. Here is a simple method to allow the user to select which exercise they want to run. The caveat is that all the exercises have to reside in the same file. But it’s easier to do this once per week than once per exercise.

/*
 =======================================
 Name        : main.c
 Author      : Michael Park
 Version     : 1.0
 Copyright   : noseyparka.me.uk (2013)
 Description : Simple menu system in C
 =======================================
 */

#include <stdio.h>

void exercise1()
{
	// Exercise 1
}
void exercise2()
{
	// Exercise 2
}
void exercise3()
{
	// Exercise 3
}
int main()
{
    int choice;

    puts("Choose an exercise between 1 and 3:");
    scanf("%d", &choice);
    switch (choice) {
        case 1:
            exercise1();
            break;
        case 2:
            exercise2();
            break;
        case 3:
            exercise3();
            break;
        case 4:
            exercisen();
            break;
        default:
            puts("Please enter a number between 1 and 3!");
            break;
    }
    getchar();
}