MichD

 

Music to listen to loudly with eyes closed

in Blog

While I listen to music more or less all day while work and whatnot, I infrequently like to pick out some of my favourite songs, turn up the volume and just sit back and close my eyes, focussing only on the music.

There are some tracks which have the amazing quality to completely take over your awareness as you really get into them. Here are some that do that for me. They range from old hits to obscure stuff, from chill-out to hard rock, and are in no particular order.

1. The Extreme – Daydream

This wonderful chill-out tune has a deep bass-line that instantly drew me in the first time I heard it on Digitally Imported’s Chillout channel. The lush instrumentation accompanied by a perfectly fitting break beat later on takes you through a dreamland of relaxation. It is all over the place in a big mess of harmony.

Read more »

JavaScript forEach Object, Array, and String

in Blog

In many programming languages, you have a simple for each construct available to quickly go over the contents of just about anything iterable. In JavaScript it isn’t so straightforward. To rectify this, I’ve written up a function that provides a single interface to iterate over the elements of an array, the values in an object, and “even” the characters in a string.

It works with a callback function that takes index/key and value as parameters. This callback function is executed for every item in the collection passed.

The benefit of using this is that you have very readable code; most programmers will intuitively know how it works because of the familiar collection, index and value interface.

To the code!

(function () {
    "use strict";

    /**
     * Iterate over an Object, Array of String with a given callBack function
     *
     * @param {Object|Array|String} collection
     * @param {Function} callBack
     * @return {Null}
     */
    function forEach(collection, callBack) {
        var i = 0, // Array and string iteration
            iMax = 0, // Collection length storage for loop initialisation
            key = '', // Object iteration
            collectionType = '';

        // Verify that callBack is a function
        if (typeof callBack !== "function") {
            throw new TypeError("forEach: callBack should be function, " +
              typeof callBack + " given.");
        }

        // Find out whether collection is array, string or object
        switch (Object.prototype.toString.call(collection)) {
          case "[object Array]":
              collectionType = "array";
              break;

          case "[object Object]":
              collectionType = "object";
              break;

          case "[object String]":
              collectionType = "string";
              break;

          default:
              collectionType = Object.prototype.toString.call(collection);
              throw new TypeError(
                "forEach: collection should be array, object or string, " +
                collectionType + " given.");
        }

        switch (collectionType) {
          case "array":
              for (i = 0, iMax = collection.length; i < iMax; i += 1) {
                  callBack(collection[i], i);
              }

              break;

          case "string":
              for (i = 0, iMax = collection.length; i < iMax; i += 1) {
                  callBack(collection.charAt(i), i);
              }

              break;

          case "object":
              for (key in collection) {
                  // Omit prototype chain properties and methods
                  if (collection.hasOwnProperty(key)) {
                      callBack(collection[key], key);
                  }
              }

              break;

          default:
              throw new Error(
              "Continuity error in forEach, this should not be possible.");
              break;
        }

        return null;
    }

    //Example uses

    // Array example
    forEach(["a", "b", "c"], function (value, index) {
        console.log(index + ": " + value);
    });

    // Object example
    forEach({"foo": "bar", "barfoo": "foobar"}, function (value, key) {
        console.log(key + ": " + value);
    });

    // String example
    forEach("Hello, world!", function (character, index) {
        console.log(index + ": " + character);
    });
}());

Read more »

Selectbox / dropdown replacements

in Blog

The &lt;select&gt; element is hard to style properly and is something that easily ruins sleek designs. Many people have already realised this, which is why there are a couple of JavaScript replacements out there.

Here’s a quick list of those that I’m aware of—in no particular order.

This post is mostly as a reference, so I don’t need to look up all the options (no pun intended) every time this situation arises. I hope it can help you quickly select (pun definitely intended this time) which one’s best for you.

Update 05 April 2014: Removed “jQuery SelectBox plugin” as both links had died.

New hosting!

in Blog

Although you may not see any difference, this site is now hosted elsewhere. It’s taken over a week to get all the administration dealt with, but now it seems to work all okay.

Michhimself.com used to be hosted by one.com, the first web host I ever paid for, which I registered with in 2009. Back then, the simple PHP/MySQL hosting with FTP access was great, but I’ve since moved on. Since it was so-called ‘shared hosting’, it meant that multiple websites would run on the same server; meaning that the performance of my site would depend on the load caused by others.

Now I’ve moved on to a VPS (Virtual Private Server) at linode.com, where I get full root access over the machine. You know what that means: a LOT more freedom to play with. I got to install the web server software myself, as well as PHP, MySQL and a bunch of other things. I’m even running an IRC bot on the thing. Needless to say, I no longer need to use FTP to access the files on this server; I just use SSH, which is more secure, and seemingly faster as well. Have I mentioned that Linode is fabulous?

Moving forward with my photography

in Blog

Something that I may not have mentioned here is that one of my hobbies is photography. I got a little more seriously into it after buying a friend’s Nikon Coolpix 8700 back in 2010. That camera was a pretty good one, even though it wasn’t a DSLR or anything fancy, it gave me quite a bit of freedom to play, compared to your regular little compact camera.

Last week however, I purchased my first DSLR after trying and getting outbid on ebay for about a week. I now have a Nikon D40 with the kit 18-55mm lens, and I’m loving it. Compared to the Coolpix 8700, it is orders of magnitude better at guessing settings for correct exposures. Since it doesn’t have to move out a lens on start-up, it’s instantly ready to shoot, and doesn’t waste energy on motors (other than the auto-focus motor in the lens). I love how it takes your photo the moment you press the shutter button down, rather than half a second after. It makes me feel much more confident to go for certain shots than I normally would be.

The camera automatically goes in stand-by mode if you’re idle for a while, but is instantly ready to go for it again. This makes it fun to walk through the city with the camera just on all the time, ready to shoot anything you see.

In conclusion, it seems like I’m going to have a lot of fun experimenting with what this camera will let me do. Eventually I’ll most likely try some other lenses as well, which is something I’ve been looking forward to with this kind of cameras.

Here’s a little set of photos I’ve taken around Southampton, by day and by night.

Escape the waves West Quay Long exposure with cars, Itchen Bridge

You can view the full set on Flickr.

Form input help on focus without JavaScript

in Blog

Just a simple front-end technique I thought to be worth sharing:

Form fields can usually do with some more information on what you are supposed to fill in. Examples include valid user name rules, desired date/time format.

The problem

On one hand, you want your users to know what they’re supposed to do, as confusing your visitors easily leads to a dramatically decreased conversion rate. On the other hand, you want your forms to look clean and minimal, so your visitors are not bombarded with information. If you show information by every field on your form, it quickly gets cluttered, and that’s exactly what we want to avoid.

The solution

Hide the elements containing the help text until they are needed. When a user focuses on a field, the relevant information shows up. This may sound like something you would solve with the onfocus and onblur events, but you can actually accomplish it with CSS.

Assuming you have an element with an info class right after the input element, you just use the :focus pseudo-selector in an adjacent sibling selector.

Read more »

MVC - FuelPHP

in Blog

Since I started working at Carswell Gould, I’ve learnt a lot more about web development—It’s amazing how much you learn once you start collaborating with other people—and among those things I learned is how to work with the MVC (Model-View-Controller) design pattern. The way I used to work was just by having the database operations inside classes as much as possible, and use those classes and their methods in the files for the actual pages. For example, A forum thread page (view.php or similar) would have all the code to load the posts and relevant info above the HTML part of the file, using classes like ForumThread and the like.

The MVC way to go for this would be having a controller that gets called when the URL for viewing a thread is requested. The controller would get an instance of a ForumThread Model. The Model describes the properties of a ForumThread and deals with related data (Forum posts, which would be another Model), and database operations, plus any additional behaviours. The data retrieved from the Model instance then gets passed on to a View, which takes care of sticking all the data in HTML. This way interpreting the request, dealing with data and displaying data is nicely separated.

Frameworks (FuelPHP)

This whole design pattern is all a very beautiful way to structure your web applications, however, if you have to set that all up from scratch, it would get very tiresome to get right. That’s where frameworks come in. The first PHP framework I got in touch with is FuelPHP, a quite young framework running on PHP 5.3+. According to their front page, it is based on the best ideas of other frameworks, with a fresh start. As this is the first framework I’ve used, I can’t really judge that former part, but by googling certain concepts used, I’ve found out that many of them are quite commonly accepted ones.

In my experience, it’s very simple to set up some new models and relate them, to quickly get going without all the design hassle you’d normally have. For the most part, you don’t get to write the database queries yourself, which is a good thing.

Validation

An unrelated part of FuelPHP (as in, it doesn’t really have anything to do with MVC) is its validation functionality. FuelPHP makes it really smooth to validate input. There are multiple ways to go for it, but my preferred way is to actually specify the validation rules in a Model’s properties array, then setting up a Validation Observer before save.

If that sounded confusing: An observer is a class that has a number of event-named methods. In a Model you can refer to an observer class and tell it which events to observe. FuelPHP takes care of the rest: When you let your model save its data to the database, any observers with ‘before_save’ enabled will be executed first. In the case of a Validation observer this will first run all the validation rules specified in the properties set-up, and throw an error (preventing the actual database save) in the case that some data does not validate.

Having gone through setting up a whole bunch of nested ifs for data validation in the past (Believe me, it’s tiresome and not elegant at all), I find this way of setting up validation simply beautiful. It’s all down to adding a few strings to an array, and it’ll validate. The way the framework is built allows for easy adding of your own validation functions too, so other than elegant, it’s very flexible.

Adopt FuelPHP!

Currently, the community surrounding FuelPHP is still fairly small, which means it’s often quite hard to google FuelPHP-related things. I would very much like the community for this framework to grow, as I feel it has a lot of potential. Their website (mostly docs section) is still quite incomplete in places, but that should improve as the community grows.

More information

I’ve only briefly touched upon many subjects in this post, so if I sparked your interest, these couple of links should get your started.

Obviously, if you are really interested in trying it out, I suggest downloading it and playing with it! You can get support on their forum and in their IRC channel.

Change

in Blog

Since I last posted anything, much has changed in my life; so much that it may be more effective to say that little has not changed.

I used to live in Belgium, with my mother and sister. I had finished a bachelor degree in Electronics. Not so long before that point, my prospects for the next year or so were along the lines of finding a job in electronics, and that was it. I’ve been in a long distance relationship for some three years, and with me having a job, we’d get around to see each other more often. (She lived in England; Eurostar tickets are expensive.) However, she then managed to get into a university, quite far away from where her parents live. That’s when the idea of finally moving in together emerged.

Fast forward a number of months, I’m writing this post from our apartment in Hampshire where we have now lived for two months. She’s been doing well in university, and I’ve had my job as a Front-end web developer for a month now. I have gone from spending most of my time in my room living with my mother and sister, to moving out to another country where people don’t speak my native language, where they drive on the other side of the road, where they use a whole range of different units than those I’m used to, to live in an apartment with the person I love and to manage our own household. I’ve converted my web development into a career, so I’m effectively being paid to do what I love, and my employer encourages me to become the best developer I can possibly be.

It’s a change for the better, that’s for sure.

Getting there

Now that may have all sounded like a whole bunch of fortune, moving out and everything just works. When it comes down to it, it all turned out very good, but the road there was not easy. To move all my things to England, I actually used the post. Luckily that worked out fine, after failing to properly find out how to do it through other parcel companies. Once moved in, we had to get used to the little space we had to store our thing; which isn’t that much of a problem, it just makes for a bit of an untidy living room.

We spent the first two weeks in the apartment without an internet connection. Seeing as I had to find work as soon as possible, this was quite a productivity bottleneck. I went out to an internet café a few times, using Internet Explorer 7 on Windows XP to look for work. Once we had internet, I spent a good two weeks full-time job-seeking online. I applied to many electronics-related vacancies, signed up to a lot of websites, and just kept searching the area for any appropriate jobs. After a while I got some calls from job agencies, asking some more info about my electronics knowledge, but most often turning out to be for positions that were located too far away to be reasonable for me. Then, I ran into some web developer vacancies and decided I might as well give it a shot, even though I had no formal education in the field. The third web developer vacancy I found was thanks to someone in an IRC channel I frequent; he recommended a creative job site.

This vacancy was for a job only about 3 miles away from where we live. It was not through a job agency, so I could actually look into the company I was applying to. Boy, the company looked exciting, the first impression I got was that it was a small team of talented individual working smoothly together to create top-notch products. You can imagine how excited I was when I got a phone call from them the day after I sent my application letter. About forty minutes after that first call, I was seated in their office for a quick interview, and an inspection of some code I wrote. They seemed interested enough, for I got a task to complete over the weekend (which I managed to turn in the same evening). The next Tuesday was one of the happiest days I’d had in a long while. I got offered the position.

I like to think I’ve settled in fairly well in my new life. Life is manageable, I like my job, we’re happy.

Website update

And last but not least… actually it is kind of the least change. As you can see I’ve redesigned my website once again. It’s even more minimal than it was before, and I’m happy with that. I like having the focus on the content rather than the packaging, especially since I’m not really a designer, more-so a developer. The website you can see is now all WordPress, rather than just the blog part. It’s far easier to manage the assets/design globally this way.

Some new things I’ve been playing with in this iteration: CSS3 transitions (for the moving menu items on mouse-over), some more advanced CSS3 box-shadow things, better closure on the little JavaScript I wrote.

Also, you may want to try resizing your browser window to be quite narrow, I tried some responsive web design.

Being very much into web development all the time now (it is still my hobby even though I do it all the time at work), I intend to write some more on it here, as well as do some little open source projects. In this work environment, I’m learning a whole lot quicker than I was when developing on my own, as collaborating ‘in real-time’ teaches you so much more than working on your own does.

Nostalgia and how it’s pretty much pointless

in Blog

I’m definitely not the only one who enjoys getting nostalgic over things; be it old TV shows or places that bring up old memories. They bring up memories of “good old times”, and I start wishing I could relive those moments, back when everything was okay, I didn’t have a thing in the world to worry about, and so forth. I’ve learnt a while ago that this last part is because our brain tends to only hang on to the good memories, however.

Read more »

My first music album: Limitless

in Blog

Available on Bandcamp: Limitless, by Cimylium

Read more »