jQuery: nested sortables

As I said in my last post, I was pretty sure that the code in my last chapter was correct and that the problem was with jQuery’s Sortable itself.

I spent the last few hours studying the Sortable code and think I’ve fixed it.

Here’s the example from last post showing the problem, and here’s the corrected version.

If you want to patch your own copy of Sortable, here’s my patch file.

I think there’s actually a moral here – if you want to make sure that something is fixed, then you should knuckle down and do it yourself, as the jQuery developers really do have better things to be doing.

Buy the book! jQuery 1.3 with PHP

jQuery 1.3 With PHP: chp8, drag/drop

For chapter 8 of jQuery 1.3 with PHP, I wrote about drag and drop. jQuery has a few different ways to do drag and drop. The most fundamental way is to use the Draggable and Droppable interfaces, but as it happens, most of the things you might want to do with a CMS can be done just with the Sortable interface.

The examples I wrote for this chapter are:

  • Sorting a list and saving the result. demo, download
  • Sorting a tree-based list (navigation menu, for example) and saving the result. demo, download
  • Dragging items from a list of contacts into a list of people to send emails to. demo, download

The second one worried me for a while, as it kept behaving erratically on me – I would sometimes drag an item and it would simply vanish. It turns out that it’s a bug in jQuery UI’s Sortable that should be fixed by the time the book is out, so it will work better then. I’m not worried about its behaviour right now as I’m certain this will be fixed.

I only used Sortable in this chapter, as I was trying to think of a case where Sortable couldn’t be used, and the only cases I thought of were a bit too advanced for the book – the book’s supposed to be for PHP developers that are not absolutely rock solid in JavaScript and those examples might be a bit daunting. Maybe if there’s a second edition I might expand on it with more advanced examples.

An advanced example might including dragging a shopping item into a basket. You could not use Sortable with that because usually, what you are dragging is a full description of something, and when you drop it into the basket, you want it to change to a compact description. Coding is involved there, and that’s when it gets bogged down. Writing about that sort of complex case would mean diving into JavaScript and away from the core subject of the book, which is the interaction of PHP and jQuery.

update: I fixed Sortable. Here’s an example of nested sortables using the corrected code: demo.

a few piano pieces

I started learning piano a few months ago. I’ll be going for the Grade 1 exam in September.

There are a few reasons I wanted to learn. Partly, it’s because there was an upright piano in my sitting-room, just looking at me as if waiting. But mostly, it was because I want to understand music.

I mean really, what the hell is music? Why does some music sound good and other music sound awful? Why is it that some people have different opinions about what is good music?

In order to figure it out, I’ve been trying my hand at writing little pieces and learning to play them.

These can in no way be considered professional attempts. They are amateur at best, and just my way of feeling along and figuring out what I’m doing.

I’ve no way of recording myself (an iphone’s camera is just not good enough), so I’ve supplied midi, and mp3 renderings of the midi, as well as the sheet in PDF form.

tune 6 – baroqueish

This one’s from this morning. I was lying in bed trying to sleep while the kids and Bronwyn did there best to not disturb me while jumping on the bed beside me, and this came to me. I rolled out of bed and turned on the computer to write it down.

It feels to me like a light-hearted baroque piece. I hesitate to even use that word because I’m not certain what it means, but I think it’s right.

midi rosegarden pdf mp3

tune 2 – the sad one

I can’t remember when this one came to me. It’s been floating in my head for a few years. It’s a bit more “modern” than my usual stuff.

midi rosegarden pdf mp3

tune 3 – icecream!

I originally wrote this one years ago and didn’t like it at the time. I like it now. It reminds me of ice-cream vans and the excitement we’d all feel as a kid when the ice-cream van would come around.

midi rosegarden pdf mp3

tune 5 – fall and rise

This one’s more of an exercise than a tune, although I suppose maybe something could be made of it. It’s a few arpeggio triplets over a slow descending then rising scale.

midi rosegarden pdf mp3

jQuery 1.3 With PHP: chp7, image manipulation

I’ve submitted chapter 7 of jQuery 1.3 with PHP to Packt, which involves image manipulation. The editor I build in that chapter allows you to non-destructively manipulate an image in the most commonly needed ways – resize, rotate and crop.

The idea is that when you upload an image, it’s usually not yet right to include in a website. People tend to upload massive photos (3000×2000 or so) and resize it down using the <img> attributes, which is the wrong way to do it (see here for a solution to that particular problem).

However, once you’ve resized an image down, you can’t change it back.

The solution is to make copies of the image with your manipulations applied to them. That lets you make multiple versions of the same image.

But again, there’s the problem that if you change your mind about the original image, you can replace that, but the others all need to be redone.

Yet another problem is that unless you’ve kept records, there’s no link from the new images back to the original, so if you need to make space on the server by removing files that might not be in use anymore, you can’t be certain what thumbnails are still relevant and what are not.

The solution is to not actually create copies, but to record the changes applied to the original image in the URL of your manipulated image. When the server is asked for those URLs, it runs the manipulations on the original image and gives you back the new image. Of course, we will cache the new manipulations so this doesn’t need to be done every time, but this now allows you to replace the original image, then clear the cache, forcing all the variants of it to refresh, without you needing to do it again.

What this means, is that when the manipulation is recorded in the URL, no new copy is actually created until some browser actually requests it. This means that you can periodically clear your old thumbnails, safe in the knowledge that if they were still relevant, they will be recreated from the archived originals automatically the next time they’re needed.

Enough talk.

demo

This is, as usual, just a demo. It’s not designed to be impressive, but just to show how to do manipulations.

A permanent URL is provided, in the same manner as google maps – it updates itself as you manipulate it. To see the actual cropped, resized and rotated image, try opening that permanent URL in a different tab.

The GUI here is a means to an end (the permanent URL). In your own CMS, you might force a certain width/height for uploaded images automatically using the URL for example.

The example image I manipulated in the chapter is the IMG_0134.JPG in chp7. Try rotating, resizing, and cropping (drag your mouse on the image).

example:

Little thing to note about that URL – there’s no query indicator. Standards-compliant browsers treat the ‘?’ mark in a URL as an indication that the result should never be cached, but that would be pretty expensive for the server, so we remove that. The get.php file rebuilds the query from the $_SERVER['REQUEST_URI'] and sends out the manipulated image with caching headers.

The graphics manipulation was done using Imagick, which is a PECL extension that allows PHP to run ImageMagick functions internally.

In Fedora, you can install Imagick with yum install php-pecl-imagick. In CentOS, follow these instructions.

CentOS users might have a problem with the latest Imagick (2.2.2), so change the pecl install imagick line to pecl install imagick-2.2.1.

download the demo

Make sure to edit the images_libs.php file to point to your own image repositories. The images don’t need to be in a web-accessible directory.

I’ve a bit of work to do now, and then I’ll be applying the tricks in this chapter to our own CMS, WebME.

Mastering phpMyAdmin 3.1

Last year, I reviewed Mastering phpMyAdmin 2.11 for Packt, and said it was overall a comprehensive book, but with a few points that I would change.

I was sent a copy of Mastering phpMyAdmin 3.1 a few weeks ago and after reading it, I can see that most of the points I mentioned have been addressed, and I know from other sources that the points that were not changed have good reasons for them (screenshots and we/our speech are very good for people that are not familiar with the subject).

There are many reviews of this book already, so I will mostly describe how this edition is different from the previous one. In short, though, I would say that this version is much more readable, and is still the best book to buy if you want a book on phpMyAdmin. The reviews I’ve read here all agree with my own assessment that phpMyAdmin is a surprise – right when you think you know what it does, a book points out a load of stuff you didn’t know it did.

Things that are improved

I suggested last year that the 5 page date-by-date history of phpMyAdmin’s delivery be moved from the front of the book to an appendix. At the time, the book didn’t have an appendix. The new edition has two appendices – the first one is for the history, as suggested, and the second contains the old book’s chapter 20 on Troubleshooting. The short history of MySQL at the beginning of the MySQL 5.0 chapter has also been removed – it had no purpose.

A few of the unnecessary screenshots have been removed. I understand the need for screenshots, as they sometimes describe better than mere text what the author means when he says something, but my complaint from last year was that screenshots that were simply not necessary had been put in apparently just to take up space. This has been improved this year, with many of the redundant images removed.

SQL code screenshots have been replaced with just the text of the SQL. This makes the examples much easier to read.

Language issues, such as switching collations, had originally been a full chapter, but is now spread out in the book, where appropriate. This is good, as when exporting a backup (for example), you don’t want to have an important part of the explanation, collation, hidden away at the back of the book.

A lot of the “since 2.6.1”, “since 2.6.0” wording has been removed. This is good, as the reader of the book is obviously using version 3.1 or higher. The author does sometimes mention the version number when adding new text, and I think that’s unnecessary – the reader really should not need to know what version of phpMyAdmin a new feature was introduced in. If you really want, add another appendix listing dates of improvements, but it’s really not needed; that’s what changelogs are for.

phpMyAdmin itself has a number of new minor features that are detailed in the new book. For example, exports (SQL dumps) can be done to Texy! text format, the search wizard has been improved to allow searches for empty/non-empty fields. Support for the PBXT storage engine is added, public query bookmarks, the default browse view’s query can be customised

There are a number of major features which also make their debut here. New features include database partitioning, scheduled events, streamable blobs (for videos, etc). I’m looking forward to making use of streaming blobs!

Things that are not improved

The table of contents is even longer. At 13 pages (versus 12 last year), I still feel it’s too large. My comment last year was that maybe just the higher level headers should be shown, with more detailed contents at the beginning of each chapter. As an example, under the user management section, there is a header for adding a user. That should be enough. Instead, we then have headers describing the username, the password, the hostname, etc. That sort of thing makes the front of the book very heavy. I feel that most readers when opening the book for the first time wonder to themselves when will the contents end and the content begin.

Most of the screenshots have been redone, but in some cases, shots which were perfectly sized in the old book have been exploded up to larger images in the new one, making them huge relative to the content they portray. For example, on page 78, the top screenshot has a total of about four lines of text in it, but takes up almost two inches of page space (and is pixelated), compared to the original on page 75 of the old book at only one inch. I can see this in a lot of cases in the new book (another is the 3 inch bottom image on 132 vs the perfectly legible 2 inch one in the old book’s page 128) and wonder if that helped to add to the number of pages. The new book has 326 pages versus the old book’s 318. On the good side, in some cases, the new screenshots reduced the size of the old ones.

I didn’t mention it last year, but remember puzzling over it at the time. The last part of the Troubleshooting appendix (chapter 20 back then) discusses future enhancements to phpMyAdmin, but the goals are very vague. “improved support of mysql”, “internal code improvements”; these should not be considered goals – they should be considered givens! Besides which, it’s not productive to discuss future events that may or may not happen. They’re not available yet, so shouldn’t be written about in a manual which is about /existing/ work.

Conclusion

I noted a number of improvements, and a number of failures. The improvements outnumber the failures. Each edition of this book gets better and better.

If you are new to phpMyAdmin and are looking for a book, I really do recommend buying this.

bootnote: I have my own Packt book coming out in a few months. I hope that reviewers of that book (PHP And jQuery) will be as critical as I try to be in my own reviews – I feel that criticism is good, and can only help to improve future editions. This year’s edition of Mastering phpMyAdmin is better than last year’s, and I feel that it is because the author was receptive to criticism and improved his book based on it. I hope I can be just as receptive when my own time comes!