avatar

Michaël Duerinckx

 

Posts Tagged ‘Web development’

A fresh new look

It has been far too long since I last updated, and that’s not just because I forgot about it; I’ve been putting it off. Lately, I’ve had quite a couple of ideas to blog about, but I just didn’t want to because I had grown so tired of the dark design I made. I guess it was sort of stylish, in its own way, but I’ve started liking bright colour schemes better.

Therefore, before I wanted to blog again, I wanted to make it look pretty to look at; as you can see, I went for it and finished it; I’ll leave it up to you whether or not I succeeded.

I decided to finally jump on the bandwagon and do it all in HTML5, rather than the good ol’ XHTML. I think browser support for HTML5 is getting big enough to really start using it as the main technology in webpages; besides, it’s easy to set it all up so older browsers display everything all right as well.

My starting point for this custom theme was HTML5Reset‘s ‘empty’ WordPress theme. It’s basically a very basic theme, with minimal styling, so you don’t really need to actually get rid of anything to get it the way you want. It was very easy to work with, and I’m happy with the result.

What’s left

Now as you may have noticed, at the moment of writing, I’ve only redesigned the blog; the rest of my site still bears the dark brown design. I’ll be redo-ing my portfolio as well as the front page in this style, so it all matches. There are a couple of menu options up there in the navigation that don’t work properly yet too (most importantly, the ‘Music’ one), so I’ll be working on that as well.

Either after or before that, I’ll write a bit more about all the things I’ve been up to. It’s quite a bit.

JavaScript: getChildNodesByTagName()

If you’ve ever used JavaScript’s getElementsByTagName(), you may have noticed something annoying about its behaviour. (Well, it’s only annoying depending on your application.)

getElementsByTagName returns every element matching the tag name given, regardless of its position in the document tree. This is annoying if you only want to use the elements that are direct descendants of the element you’re calling it from.

So anyway, to cut this short, I wrote  a quick but effective function that works just the same as getElementsByTagName, with the difference that it only returns direct descendants. Just add in this snippet of code and you can start using the function just as you would use getElementsByTagName.

Object.prototype.getChildNodesByTagName = function (tagName) {
    var byTagName = this.getElementsByTagName(tagName);
    var outArr = [];
    for(a=0;a<byTagName.length;a++) {
        if(byTagName[a].parentNode == this) {
            outArr[outArr.length] = byTagName[a];
        }
    }
    return outArr;
}

Here’s how it works:
The function uses the typical getElementsByTagName, and then iterates over all the elements found. For each element it checks whether the element’s parentNode equals this, which is the node that should be the parent of any elements we want to return.
When the comparison is positive, the element is added to the array, which is later returned.

I hope you can put it to good use!

Leave me a comment if this was helpful to you, or if there’s anything wrong, please.

A collection of web development links

Over the time I got into web development, I’ve headed to google a lot. This has resulted in running in to countless handy resources I didn’t know of before.

In this post I’ll try to make a summary of a good set of links regarding webdev. If it’s not obvious, the paragraph headers link to the pages I’m talking about.

1. HTML Dog

Note: my first one used to be W3Schools, but I found out that W3Schools has multiple cases of misinformation in their tutorials, as is more thoroughly explained here.

On Html Dog, you can learn the basics of HTML and CSS, and go from there. This is a lesser known tutorial site, but is very clear in it’s explanations, and more technically accurate.

Whenever I run in to a good site that gives an introduction to PHP or JavaScript, I’ll add it on here as well, since the removal of W3Schools takes those away.

2. PHP.net

If you’re developing pages in PHP, and need to know what the order of the parameters of the explode function was, you can find it here. PHP.net has a really nice manual for every function that’s built in the language, and trust me, that’s a lot. The manual goes in detail about what the functions do, with added examples to help clarify. What helps is that when you just type ‘php’ [function name] in the url bar and hit enter, it takes you right to the function page 95% of the time. That is, if you’re using a decent web browser.

3. jQuery

jQuery is with good reason the most popular JavaScript library. It does exactly as it promises: write less, do more. Using jQuery makes JavaScript fun again. jQuery is not only easy to learn, it also has a whole lot of support. At api.jquery.com, you have the whole manual at your fingertips. I can comment the same thing on the jquery manual as I can on PHP’s. The same thing goes here as well, type ‘jquery’ [function name] in the url bar, and you’re there in seconds.

4. AjaxLoad

Once you’re starting to have a decent grasp of your (x)HTML and JavaScript (and perhaps jQuery), you will probably get into ajax.¬† Ajax basically is a technique that allows you to send/receive date to/from the server, without having to load a whole page. Since using this technique will often cause the user to have to wait for a little while, it’s always handy to show a little spinning animation, so the user doesn’t get the idea it’s not responding. You’ve probably seen them all before, but where do they come from? On this website, you can easily generate one of these nice gifs, in custom colours. It’s straight, to the point, and very handy.

5. Favicon.cc

Every decent website has its own custom icon that show up in the url bar and in the tab its loaded into. Such an icon is called a ‘favicon’. On this site you can import an image to convert it to an icon, and you can alter it after that. That or you can just start from scratch and start clicking pixels on the neat JavasScript-driven web app.

6. JsFiddle

I found out about this little gem not so long ago, and I’ve fallen in love with it. JsFiddle allows you to- you guessed it- fiddle with JavaScript. The interface is as simple as it can get, yet it must have quite a complex background engine. You get a HTML editing area, a CSS area, and a javascript area. The fourth area is the resulting webpage. This website saves you the hassle from saving/refreshing the whole time with a text editor/browser combo. Just a click on the “run” button suffices here. The app also has a really nice tidy up function, which fixes all your indentation failures. On top of that, you can choose to use one of the javascript libraries that are available, which makes jQuery testing handy. And then you can save your fiddles as well, so you can share it with others. The update button makes sure you don’t mess up what you made completely, as it saves it as a new version of the fiddle automatically. I love this site.

7. Pastebin

Pastebin is a handy tool for collaboration. Basically, you can paste your code snippet, and select which language it’s in. It’ll automatically highlight the syntax accordingly. You can select how long you want to have the entry up on the site, and then you can share it. It has some handy embed and download functions as well. I think this is mainly handy for sharing code, showing examples, and letting other people check your code.

8. Color scheme designer

This beautiful website helps you out a lot when you’re failing at selecting good colours for your design. It has a variety of options to build fresh looking colour schemes. It has many features for things you wouldn’t even think about.

That about wraps it up for this post, I think. If I’ve missed any significant web apps/resources, please let me know. I’ve only included those I personally have experience with, so it’d be great if you could introduce me to some others as well.

PHP class: Page control

Time for my first coding-related post!

Whenever I was coding something in php, and I had to make something with a page control, I started procrastinating, because I was always looking up against figuring that stuff out again.

I decided to get that over with for one and all, and wrote this page control class that allows me to create a new, fairly customizable page control, which can even be used to interact with the code that loads whatever needs to be displayed on the page.

It is only the first version, which only allows for one type of page control (the typical first, previous, next, last controls), but I’m planning to make it do different types in next versions. Anyway, that’s enough rambling, it’s time for some code. (more…)