Year: 2013

Simpler Masonry + Sortable Working Together

 

Since jQuery Masonry repositions elements purely by positioning, it does not play well with UI Sortable. People have posted complex solutions to this problem, but this simpler solution worked for me:

  1. Refresh masonry layout on Sortable’s start, change, and stop events
  2. While dragging, remove from the dragged item the class used to indicate it’s a masonry item
var $c = $('#my_container');
$c.masonry({
    itemSelector: '.masonry-item'
});
$c.sortable({
    start: function (e, ui) {
        ui.item.removeClass('masonry-item');
        $c.masonry('reload');
    },
    change: function (e, ui) {
        $c.masonry('reload');
    },
    stop: function (e, ui) {
        ui.item.addClass('masonry-item');
        $c.masonry('reload');
    }
});

Installing xhprof on XAMPP for OSX Lion

 

Directions adapted from Ben Buckman.

Download xhprof.

cd path/to/xhprof/.../extension

# If you don't have autoconf... I didn't.
sudo chmod o+w /usr/local/bin  #(brew needs to write a symlink there)
brew install autoconf

sudo /Applications/XAMPP/xamppfiles/bin/phpize

Make sure you have a CLI C compiler. I installed one via XCode.

sudo MACOSX_DEPLOYMENT_TARGET=10.6 CFLAGS='-O3 -fno-common -arch i386 -arch x86_64' LDFLAGS='-O3 -arch i386 -arch x86_64' CXXFLAGS='-O3 -fno-common -arch i386 -arch x86_64' ./configure --with-php-config=/Applications/XAMPP/xamppfiles/bin/php-config-5.3.1

sudo make

sudo make install

sudo nano /Applications/XAMPP/xamppfiles/etc/php.ini

Add these lines to php.ini:

[xhprof]
extension = xhprof.so
xhprof.output_dir = "/Applications/XAMPP/xhprof-logs"

Restart Apache.

jQuery.Deferred() is pretty easy

 

I was using an asynchronous file uploader and, for usability, wanted to make sure the upload progress bar was displayed for at least a couple seconds before changing the view. The jQuery.Deferred object made this a breeze, eliminating a bunch of callback/isDone checking mess:

var uploadFinished = $.Deferred(),
    timerFinished = $.Deferred();
$.when(uploadFinished, timerFinished).done(function () {
    changeView();
});

// immediately after starting upload
setTimeout(timerFinished.resolve, 2000);

// in upload completed event handler
uploadFinished.resolve();

The docs make the Deferred object a little more complicated than it really is. You don’t have to have to alter processes to return Deferred/Promise objects, you can just make them and pass them around as needed in a pinch.

Shared Server Development with PhpStorm

 

Working on a remote server—with or without multiple developers—is just asking for problems, but sometimes there’s no way around this. I’ve used several IDEs for this task and found that PhpStorm has several unique features that ease the pain considerably:

  • It fingerprints remote content on download and re-verifies the remote content before auto-uploading. If someone else has edited that file, you get an option to merge/download/cancel. If the merge has conflicts you get a nice diff view to make manual decisions.
  • It can check the server whenever you open a file. That way you can known right away remote changes have occurred before working.
  • It keeps a history of all file changes and lets you revert to any or merge content from any of them into the current version. Even if you git commit frequently, this is a huge help sometimes. A coworker had accidentally overwritten one of the files I had recently changed and added his own code. When I realized this I just popped open Local History and merged my changes into the current file with a single click.
  • It can generate a diff with remote over a file/directory tree. You then can decide per file whether to upload/download/delete/leave as is.
  • It can auto-deploy changes made outside the IDE. I can set it so while PhpStorm is open, anything done to my local cache files (e.g. git checkout/some other operation) is deployed to remote.

PhpStorm basically nails remote development like it does most other areas.

Why not work on via remote file system (e.g. samba/sshfs)? With basic text editors you can kinda get away with this, but a true IDE needs to watch a lot of files, and if they’re remote…

Why not use an IDE on the remote server? I don’t know of any text-based IDE. Extremely good code editors, sure, but that difference matters.