avatar

Michaël Duerinckx

 

Selectbox / dropdown replacements

The <select> 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.

New hosting!

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

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 wavesWest QuayLong exposure with cars, Itchen Bridge

You can view the full set on Flickr.

 

Form input help on focus without JavaScript

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

Simply 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

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.