At the office we’re starting out on a new project, which will require (thanks to our designer) a lot off divs and images and whatnot to slide up and down. All these elements will of course have it’s own ID’s and classes, so writing one function to slide/toggle them all is impossible, plus the design of these elements is so weird that the built-in animation effects are of no use. So I hacked together my first! jQuery plugin which will hopefully help us with this task.

As I was more inspired to write code, than to come up with names, I called this little fella toggler, a jQuery plugin for togglering elements around…

What it does is actually calling .animate() on the height the top of the element that is to be togglered.

Setting it up is easy: include the jquery-toggler.js script, call the toggler() function on any clickable element and set the rel attribute of that element to match the ID of the element which is to be togglered (clearly, if you look in the source of the example, you’ll understand that better than my jibberish).

The default height when the element is closed (togglered up) is 0px, when the element is open (togglered down) is 200px and the default speed of this magical animation is set to 1000 (1 second). You can of course change these by passing them to the toggler({speed:500}) function.

toggler is available at GitHub: http://github.com/robertbasic/toggler

Example is here: http://robertbasic.com/toggler/

toggler yourself out.

Edit Februray 6th: Apparently I completely misunderstood the designer what kind of effect he wants, thus now I changed the code. The new code is pushed to github and the example is updated.

Although I never wrote about jQuery here, I use it quite often and can pull of nice tricks with it. Also, bending any jQuery plugin to my will, was never a problem. But enough about me, you’re here cause of the book.

jQuery 1.3 with PHP is written by Kae Verens, a JavaScript and PHP developer. This book is aimed at PHP developers who have met only a few times with JavaScript and jQuery, but I believe even a novice programmer can gain knowledge from it – just be warned, the PHP examples are here for the sake of the examples only; about which the author warns throughout the book. As the author said: “This book is designed to help a PHP developer write some immediately-useful client-side applications without needing weeks of study”. And it will.

On the other hand, you need to know your HTML and CSS selectors, as the book only says that jQuery uses CSS selectors to select elements.

The examples in the book are well explained and commented!

The book starts off with an introductory chapter about jQuery, what it is, why the author chose it over other JS libraries, what projects use jQuery and so on…

The “Quick tricks” chapter shows some really quick but useful tricks, such as dynamic select boxes, contextual help or inline editing. OK, you may have all done this before, but it’s a good starting point for getting to know jQuery.

From chapter 3 to chapter 9, the author shows how to do things like validating forms, creating an event calendar, managing files and folders from the browser, rotating, cropping, resizing images (with ImageMagick!) also from the browser or making lists sortable by dragging and dropping items. Of course, no one wants to reinvent the wheel, so all the examples are using plugins – either from the jQuery UI collection or “standalone” plugins that are “too specific” to be in the said collection.

My personal favorite chapter is the “Data tables” chapter, which shows how to present and use table data on your website by adding sort, filter and pagination functionality to your table. The example shown uses a table with over 2 million rows, which is worth mentioning, cause this way we know that it’ll work on a large dataset also.

The final chapter is reserved for optimizing the front-end code and reveals some stuff behind jQuery and JavaScript in general (I personally never knew that there’s a speed difference between different type of selectors).

In conclusion, if you’re a PHP dev wanting to “spice up” your apps, this book will most likely worth the money spent.

You can take a look at the Table of Contents, read the sample chapter, or just buy the book!

In 2009 some good stuff happened and some bad stuff happened. All in all, a crappy year. Hopefully, this year will be a lot better…

I graduated on June 26th, the topic was a Python desktop application that communicates with a web service; both sending and receiving data is possible. Started working on July 1st at Online Solutions as a PHP dev and started to “officially” give back to the Open Source community by joining the ZF Bug Hunt Days - so far few minor patches submitted and applied. Wrote a review on a ZF book and another one on jQuery and PHP is in the drafts.

I ain’t making plans for this year, cause I have failed miserably to realize my most important plan for 2009; I’ll just improvise throughout the year.

Dear 2009 - up yours. 2010 - bring it on.

Happy new year!

We all know about Firebug, probably the best developer add-on out there, and how awesome it is and how many times it helped us debug some nasty Javascript code, mess around with CSS and HTML on-the-fly, to track the time load of every external page element our app loads… It’s so cool that it even has it’s own add-ons! (FirePHP, YSlow and FireCookie). Really, it helps our developer lives to suck a bit less.

Note: the following text is not about bashing other developers and their works, but to highlight the importance of proper input filtering. I myself have failed on this, several times.

Let’s go back to the part where we mess with the HTML by the means of this, may I say, application. You can add, hide, remove HTML elements, add, alter, remove, attributes from HTML elements… Adding, hiding, deleting - boring; altering - fun! I have this urge to try to break every form on every website I find. Not to do any harm, just to take a look how my fellow developer did his job and if I see anything that’s not right, I try to contact him to fix that, cause, y’know, I’m a nice person… Anyhow, I recently found some sites where all the textfields and textareas were filtered properly and no harm could be done - all my “hack” attempts were caught by their application. Nice. Oh, look, a select box! Right-click, inspect element, value=”xyz”, change that to value=”abc”, submit the form… and poof! A sexy SQL error. All that with the help of our li’l friend, Firebug. The elements where the user is required to provide some information “by hand” were processed correctly, but the select box was not.

OK, let’s take this one step further. On a site where the user can register an account and afterwards can edit his or hers profile. I register, go to the user panel, the usual stuff - change email, password, location, DoB (Date of Birth)… A quick inspection of the source - a hidden field “id” with a number in it. Hmm… Quickly, I register another account, note the “id” on that second account, go back to the first account, change the “id” of the first account to the “id” of the second account, change the DoB (just to see any actual information changing), click submit… “Your profile has been updated successfully.” Mine? Not really, the DoB is like it was in the first place… Go to the second account… Oh boy. I successfully changed the DoB of the second account, with my first account. Now, I haven’t seen their source code, but I can imagine what was going on. Something like this:

$id = (int)$_POST['id'];
$dob = $_POST['dob'];

$sql = "UPDATE users SET dob = '" . $dob . "' WHERE id = " . $id;

On the positive side, when I entered letters in that hidden field, I was told by the app that I haven’t filled all the fields correctly, which means they filtered even the hidden field, but skipped to check if that “id” is actually me.

OK, I know, the title is “Bad Firebug!” and the problems are actually about filtering user input, but I needed a catchy title to have your attention on Twitter :P

Even tho a field seems “unchangeable”, with a help of an awesome little app, it becomes changeable. And dangerous.

Filter input, escape output :)

P.S.: On the image above you can see my profile on a bulletin board, where I changed my year of birth from 1986 to 986 with Firebug. The years are in a select box; the lowest value is 1910. You can see my actual profile here.

Yes, I have another web social networking thingy. I opened a posterous account. All those links, images, videos… which do not have their place here, will be posted there. That way, this blog will be always for development stuff and on rare occasions some longer personal writings.

You can find my posterous account at http://robertbasic.posterous.com/.

That is all.