Blog

Moving to Jekyll 28th June 2015

I’ve used WordPress as my blog/portfolio CMS for quite a few years now and decided to mix it up a little bit. I researched several blogging platforms such as Ghost, Hugo and Middleman but came to the conclusion Jekyll is the one I would get into.

Jekyll transforms your plain text into static websites and blogs without the need for databases. This really appeals to me as WordPress has become rather bloated and I wanted to minimise the amount of unnecessary files and a database. I understand needing these for bigger sites, not for my portfolio though.

Setup was massively simple, on the Mac at least. I’ve not looked into Windows as yet.

$ gem install jekyll
$ jekyll new website-name
$ cd website-name
$ jekyll serve

Then browse to http://localhost:4000. That really is it. It even installs a starter template for you so you can get stuck right in. For someone familiar with HTML, SASS and templating, Jekyll really is a stroll in the park once you’ve spent about half an hour playing around with it. I wouldn’t recommend it for non-developers though as even writing a post requires some kind of coding. But if you’re looking to learn, then it’s definitely a hell yeah.

I’m currently transferring my WordPress site over to Jekyll and the process is really quick and enjoyable, although I won’t be using the default install method. I’ll post how I did it, when I’m done.

Rest in peace WordPress, for my personal website anyway.

A Simple Responsive Menu 24th June 2015

For a long time I have been tinkering around with the best way to create a responsive menu and came up with the following method.

Firstly, jump into your JavaScript file and we want to define a couple of variables, the toggle button and the menu itself.

var toggle  = $('.nav__btn');
var menu    = $('.nav');

Next, we create a function that runs when our toggle button is clicked. This can be also be fadeToggle. We don’t want the hash showing in the browser’s address bar so we preventDefault (Only if you use an a tag). This function basically toggles the menu open and closed and the toggle button’s class.

$(function() {
  toggle.on('click', function(e) {
    e.preventDefault();
    menu.slideToggle( 100 );
    toggle.toggleClass('active');
  });
});

Finally, for the jQuery, we want to remove any styling and go back to the normal menu if the browser width is over 768px (or whatever you want).

$(window).resize(function(){
  var w = $(window).width();
  if(w > 768 && menu.is(':hidden')) {
    menu.removeAttr('style');
  }
});

The HTML and CSS are very simple and you can check it all out over on CodePen.