Photo
Michael Duerinckx
is a (mostly front-end) web developer for Carswell Gould. Other than web development he is into electronics design as well as music production.
All content by Michael Duerinckx unless mentioned otherwise.

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.

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.
(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.

Change

Posted on: 3 Comments

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

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. Back then, in the good old times, we did have things to worry about, and not everything was so perfect and nice as we recollect it now. That aside, it’s not what I wanted to talk about.

What I want to talk about is how nostalgia is pretty much pointless. By doing things that induce that nostalgia feeling, you’re trying to recreate a good memory from the past, and relive it in the present time. The sad part is that it simply doesn’t work that way. You will never be able to recreate those exact conditions of that good old past moment you’re trying to relive. The most important part is that you, as a person are no longer the same person; since that moment, you’ve gained experience, seen a lot of things, developed beliefs and probably been through some emotionally moving situations that changed you.

An example: maybe you loved a certain TV show a whole lot as a kid, then you grew up, learned about the birds and the bees, and now you can no longer view the same show without finding sexual references in it, which don’t even need to be there for you to notice them. It doesn’t even have to be sexual references you see in it, you could just as well dislike the show because some concepts in it don’t make sense judging by the new things you’ve learned since.

Another example is thinking back about children’s games you played and enjoyed thoroughly. The memory of these games brings a smile to your face, but actually trying to play them again feels absolutely ridiculous. Note: in this case I’m talking about physical games, not video games, as those magically last forever regardless of the player’s age.

Even though I’m only twenty years old at the time of writing, I find this whole realization pretty saddening. When you are surrounded by responsibilities, it’d be easy if you could just slip back to childhood and do those fun old things. The thing is: You can not do this, as explained above.

We’ll have to live now, and make the best of it. Make now something you can happily reminisce about in the future. I’m going to try it.

My first music album: Limitless

Available on Bandcamp: Limitless, by Cimylium

Total running time: 41:07

Just under a year ago, I had my first shot at producing an ambient track. It turned out that I did an okay job at this (or so I think), so after another track in the genre, which was a collaboration with SineRider and MrSaint, I decided to make my first album in this genre.

I titled my first track in the genre “Moon”, which made me decide to just make the whole album space-themed. There’s even a bit of concept behind the titling of the tracks, with respect to their order. See if you can figure it out.

As for the moniker name, “Cimylium”: I decided I needed some sort of artist name, seeing as “Mich” or “MICHhimself” doesn’t really cut it. After a long time of playing with words and parts of words, I decided on “Cimylium”, which doesn’t really have any meaning, but sounds pretty neat anyway. I like how the only results for it when looking it up are me.

Available on Bandcamp: Limitless, by Cimylium

FPGA MIDI Synth update: MIDI improvements, Polyphony, PWM etc

Since school has ended, I’ve played with our yearproject some more to make it more awesome and usable. Here’s an update of what fun stuff I’ve been doing to it. I’ve purchased my own Digilent Nexys2 board, so I can keep working on this and future FPGA projects now I’ve returned my ex-classmate’s board.

MIDI improvements

The most important problem we had was that MIDI interpretation was terrible. Sure, it worked, but once you’d start playing faster than 115BPM, notes would randomly be missed. At school, we had actually spent weeks trying to figure out where in the code of the UART or MIDI interpretation we did something wrong.

During my later fiddling, I found out that the reason for this was that there were a couple of elements in the FPGA design that weren’t triggered on the rising edge on the clock, but rather on the rising edge of some combinatorial signal. This caused all kinda of synchronisation errors, and thus the quite timing-sensitive MIDI interpretation. The issue was resolved easily by adding a clock input to the elements that were without, and altering the code to something like this:


if(rising_edge(clk) and combinatorial_signal = '1') then
-- statements to be executed
end if;

Testing that change made it all work pretty much perfectly. From what I could hear, it played 16th arpeggios at 999BPM without any problem.

After that, I tweaked the design a little more in order to make it play different waveforms when different MIDI channels were being used. With that properly implemented, I could fake polyphony by rapidly switching channels. Here’s a video that demonstrates it. The LEDs lighting up indicate which channel (and thus waveform) is currently being used.

Polyphony and PWM

Still excited about the fixed MIDI, I realized I could probably make the synth a lot better, since I now had the most problematic part worked out. A synthesizer isn’t worth much if it can’t handle polyphony, so I decided to have a shot at that. I rewrote the MIDI interpretation VHDL module to keep 8 voices in memory. Then, I changed up the sound generation part so I would simply have an “Oscillator” block to go from an “OutSpeed” input to the Digital Audio output. This made it quite a bit more modular. Since my new MIDI interpretation block had 8 OutSpeed outputs, I made 8 Oscillator blocks, and routed them all to a new block I named “Mixer”.

I spent a couple of hours trying to get the digital signals mixed together, but I had a hard time doing so. I have to admit I failed utterly. The output sounded either horribly clipped, completely out of tune, or just noisy. Eventually I gave up this approach and decided to do the actual mixing externally, and thus in an analogue fashion. I had heard about Digital to Analog conversion using Pulse Width Modulation (and it was quite clear to me how to do this), so I decided to give that a go, with success.

In Xilinx ISE, I made another new module, called “Audio_PWM”, which would convert a typical 8 bit number to a high-frequency PWM signal. This way I only needed a single output pin to get the audio out, rather than the 8 pins going to the DAC PCB. I’m still using 8 pins, but this time they are to output 8 different voices. I breadboarded (if that’s even a word (if it isn’t, it is now (also, nesting parentheses is fun (ANYWAY)))) 8 simple low pass filters and a typical summing amplifier circuit, which is pictured below. This circuit took over the job of the digital mixer I failed to make, so I tossed the latter away.

New synth setup

The summing amplifier feeds the resulted voltage to my active speaker, which also takes the need for the little amplifier + speaker away, which in turn reduces the number of elements of the synth quite a bit.

The connection cable pictured here is one I crafted from some pin header connector (which fits into the FPGA board’s connectors nicely), and a bunch of wires I had lying around. On the other end I soldered pins from the same type of connector, but individually, so it makes for easy but solid connection with a breadboard. I used some heat-shrink to make it all a little more sturdy.

Anyway, for this breadboarded circuit, I’ve also designed a PCB, which I’ve yet to have made. I’ll make a new post with pictures once that’s done. (Or earlier if I make any new awesome progress).

Now for a video of the synth’s capabilities at this point. I had it play Hot Butter’s classic “Popcorn” for a demonstration. Here and there it still missed a “note released”, which I haven’t been able to fix yet; I think it occurs when a whole lot of MIDI actions are sent at once, which is plausible in a song like it. I can tell you that it plays flawlessly on my MIDI keyboard though.

7 Segment display usage

I decided that if I wanted to make the synth more feature-rich, I’d have it display some information as well. Since Digilent’s Nexys2 has four 7-Segment displays on board, this seemed like the best option to start out with. I started a new project and wrote up a single VHDL module, “SevenSegDriver”. This module has 5 inputs: clock, DispA, DispB, DispC and DispD. All the Disp inputs take a binary number representing a character, ranging from ‘ ‘ (empty screen) to ‘z’. Seeing as there are only 7 segments to play with , not all characters can be displayed properly, but I did my best with the help of good old Wikipedia.

The outputs for this driver are “DispSelect” and “Segments”. DispSelect simply only makes one of the displays active at a time, and cycles them so quickly you can’t see it with the naked eye. Segments outputs the current display’s number to turn on the right segments. This makes the driver basically a decoder and multiplexer/demultiplexer in one.

Once this was tested properly, I ported it to the polysynth project. The information I’m displaying is about the currently set waveform resolution, but is likely to be expanded to other options in the future.

Waveform resolution setting

As I mentioned, I made a waveform resolution setting. I tweaked the oscillators module (and in there the waveform sample selector) to have a resolution input. This allows me to choose between 8 bit, 4 bit, 2 bit and 1 bit. This basically describes in how many possible values a waveform is divided. (Not on the time axis, but on the volume axis). If you have a lower resolution, it all sounds more square-y than it does with a high resolution, which isn’t all that surprising, since the waveform looks blockier when displayed.

What I intended with this resolution thing was to create a sort of bit-crushing effect. However, since I’m applying the resolution change on each voice oscillator individually, it doesn’t sound very amazing on the summed waveform. It probably sounds a lot more interesting if I could do it on the sum, but seeing how mixing it digitally didn’t work out, I’ll have to be happy with what it is.

I made a little controller block which remember the current resolution, and allows to cycle through the 4 possible settings with the press of a button. The controller also sends the information out to the seven segment driver mentioned earlier. This all explains why it says “4 bit” on the screen in the photo somewhere up there.

Future plans

As I mentioned, I’m going to have a nice PCB made of the PWM mixer circuit so it’s all a bit more sturdy and nice looking. On the software part, I’m looking to take into account the third byte of the MIDI messages, namely the velocity, to regulate a note’s volume. This will lead to the MIDI interpretation block having 24 output buses, but I guess that’s not much of a problem. In the possibly more distant future, I want to build a sampler component as well. For that, I’ll first have to build an analogue to digital converter; that is, if I actually want to record them with the synth itself. The other option would be to hard-code them in the design as the waveforms currently are. I might want to get a PROM to attach to it, which can load the samples in on start-up, but those are just some faint ideas.

Current FPGA design schematic

It got quite big. (Click to enlarge)

Yearproject: FPGA MIDI synth

Over the past two years, I’ve completed a bachelor course in electronics. In the second and thus final year, we were assigned to come up with a project to complete over the year. My classmate Raf and I are both interested in music production, so we decided it would be a fun idea to create our very own synthesizer.

We actually made the decision to make a synthesizer in our first year, so we certainly would have enough time to work it all out properly.  In this first year, we were introduced to the FPGA, which can briefly be described as a digital playground that allows you to build just about any digital circuit on it. (To give an idea: You could actually design a micro-controller on the thing if you’d want to).

Our interest for the FPGA sparked, we decided to use that to build the synthesizer around. Thus the decision was made to go digital. Anyway, I could go on for a while on the why and when, but let’s take a look at how this stuff works first.

(more…)

MySQL: find number of matches in another table

The problem of finding the amount of matches in another table is one that had me stumped for a while, but after googling a while, looking through concepts that were new to me, I figured it out. Since it may be a fairly common problem, I thought I’d share my solution here.

Use cases

I used this technique to find the amount of posts a user has on a forum, in a situation where I have a users table, and a forum table. Other possibilities could be amount of sales for a certain item in a webshop, where the items are in a table, and the sales in another. I’ll use the users / posts example to show the query.

Users table

user_id username
1 Mich
2 John
3 CornCob

Forum table

post_id user_id topic_id message
142 1 54 Pellentesque posuere…
143 3 42 Cras sodales molestie…
144 3 54 Phasellus condimentum euismod…
145 1 65 Aliquam placerat nibh ut…
146 3 54 Donec nec convallis…
147 1 54 Sed tincidunt fermentum…
148 1 60 Aenean id turpis…

The query

SELECT
  users.user_id,
  users.username,
  COALESCE(pc.postcount, 0) AS postcount
FROM
  users
  LEFT JOIN
  (
    SELECT
      forum.user_id,
      COUNT(forum.post_id) AS postcount
    FROM forum
    WHERE 1
    GROUP BY forum.user_id
  ) pc ON pc.user_id=users.user_id
WHERE 1

How it works

First, we select the information of the users, simply, by referring to them using table.field. Then, we also include a postcount field, but not quite like we’re used to seeing it. Since the value ‘NULL’ would be retrieved for users who don’t have any posts, we have a workaround. The COALESCE function returns the first non-NULL argument it is given. So if there is no match for a certain user_id in the table ‘forum’, the resulting NULL will not be used, we get a regular numeric 0 instead.

The simple user information is retrieved, as expected, from the users table. After that it gets a little more tricky. We perform a LEFT JOIN with what is called a subquery. Within the parentheses after ‘LEFT JOIN’, there is a whole new query; the resultset of this query will behave itself as another table we’re joining.

In our subquery we select the user_id and postcount. Normally, using COUNT() this way would simply return a single result, with the amount of rows in the whole forum table. However, because we’re using ‘GROUP BY forum.user_id’ here, it will count the postcount for each unique value of user_id encountered in forum. This gives us a simple user_id, post count table as a result.

Now we’re outside the parentheses again. The ‘pc’ you see after the parentheses is the name we assign to the resultset of our subquery. We can refer to it as if it were any regular table, as we see in the SELECT part of our main query, as well as the ON part we’re at now. We want to join the two table where the user_id’s match, again, like any regular join. In case there is no match for a user_id from the table ‘users’, there would be no corresponding postcount value to join in the final resultset, thus, a value of NULL is given, which is then ‘changed’ to 0 by the COALESCE function.

The resultset

Here you see what the outcome of above query would be on our given tables:

user_id username postcount
1 Mich 4
2 John 0
3 CornCob 3

Please note

This was all tested and figured out on MySQL 5+. Thus, I don’t know if it would work on other SQL servers. As far as I know, the IFNULL function is the one thing that’s usually different throughout database servers. The subquery system will mostly be the same-ish.

If you know more about this, or I’m misinforming on anything, please, by all means, let me know in the comments and I’ll change it up to be as accurate as possible.
Also, if you know a more efficient way to go for this specific task, let me know as well. Obviously, feel free to ask any questions if something is unclear.

Updates

April 23rd, 2011: Changed the IFNULL to the standards-compliant COALESCE function – thanks Omar.

April 30rd, 2011: Fixed the query: COUNT(forum.postIDpost_id) AS postcount – Thanks Ringish.