Bye WordPress, hello Jekyll.

WordPress is nice as a blogging platform, hell, even as a CMS. It’s super user-friendly compared to literally all other CMS’s or blogging platforms I’ve seen. But, it’s also just a tad too much for a small blog like this.

Realistically, I don’t need the media page, links, themes, plugins or users that the system provides. One could strip these away, or, one can take much less effort and embrace another blogging platform. Because of the technical nature of myself and of my writings, I chose to learn static blogging with Jekyll.

I am everything but savvy with command line tools, Git and deployment, but hey, let’s just start and see where it will end. I’ve looked into the possibilities of Jekyll and it’s actually very powerful, though one thing that I would need to find out is how to provide the feature of posting comments. More news on that, later.

The Jekyll blog will be hosted on GitHub at the custom URL codeandcolours.com. I have also disabled comments on this WordPress blog, because of the huge amounts of spam (another reason to look for another commenting system) and this move to Jekyll in the near future. If possible, I will write a piece about the move (“From WordPress to Jekyll”) to teach everybody as nooby as myself how to do this kind of stuff.

Cheers, and see you at the other side!

About “Flash must die” and other populist web statements

Recently, I once again encountered a comment on a news item stating that “Flash should die as soon as possible”. It was a comment out of nowhere, with no explanation or reasonable context. Let me explain a bit about why I think these kinds of statements are bad for our web development community.

As the web evolves, new techniques come and go. It’s an unwritten law that the cool stuff becomes the dull stuff after several years. Animated GIF’s were cool once (and some are still cool now), just like table layouts and WYSIWYG editors once were.

Flash is a good example of a technology that has had it’s best time just about now. HTML5 can do without Flash video and audio, and CSS3 has animations and new advanced styling options. In the near future, Flash will no longer be a necessity but an annoyance to implementers and users. Especially users who are fairly web-savvy associate Flash with large and disruptive ads, slow applications and vulnerability issues.

Continue reading

How to view the In-Page Analytics overlay on your website

If you have a website, chances are you’re using Google Analytics to analyze your site’s traffic. One of the more interesting and fun features is the In-Page Analytics view, where you can track exactly on which elements users click the most, and what your users’ most used browser sizes are. You can even use a slider to scroll through the different browser sizes and see the percentage of users browsing your site or even any specific page with that resolution.

What’s a bummer is that the interface of Google Analytics is not always as nice and usable as you would want. The following is a smart trick to see more of your website and less of Analytics.

Log in to your Google Analytics panel, choose your website, and go to Content > In-Page Analytics. Then, open a new tab and just go to the url of your current website. You should see an overlay of In-Page Analytics at the top of your site. Yay! More website space, less Google Analytics panels. In my experience you can even close the previous Google Analytics tab.
 

In-Page Analytics example


Note: to close the panel, you have to close the Google Analytics tab as well as the site overlay, using the “Exit” button.

Perfectly justified CSS grid technique using inline-block

(TL;DR – see this test page with the final result of what I’m gonna talk about.)

You know these simple horizontal menu’s? Just take some ul > li > a, set the li to either float: left or display: inline-block and it’s done. I’m probably not telling you anything new there.

Earlier this year I was tinkering around with such a menu. When you work with a specifically designed navigation, which is almost always the case, you have a graphical style you want to go for. And, if you’re somewhat like me, you want it to be as perfect as can be. Let me pose the problem here. Sometimes, you need a menu that is perfectly aligned to both the left and the right. To illustrate this I present this highly scientific visual example of what I mean:

Justified CSS grid example

Now, I’m sure there will be a fancy way the new kids do this with CSS3 flexbox layouts, but I’m solving this old style here. Partly to support older browsers, and partly because I know too little about flexbox. The technique I use to solve this can also be called a “hack”, as it involves an unintended use of text-align: justify.

Continue reading

Hello? Is this thing on?

Hi there!

This is the first of (hopefully) many posts that are going to be published on this piece of internet. I have finally taken some time to create a blog-thing of my own, and even though it is small, it will serve its purpose for the coming months or so.

What you can expect here is mostly my experiments with and general thoughts on front-end development, meaning, CSS, HTML and JavaScript. The posts will be about techniques, browsers, developments of web technologies and other nerd stuff. I hope I can contribute to the discussions out there.

I have gathered some fun ideas for posts and experiments in the past months, so expect to have some good reading time here!

See you here in the near future!

Jelmer