Sorting dates with PHP

This should have been much faster, so I’m sharing this. PHP (<5.2) creates and compares dates out of the box with the dateTime class.

This is my use case. I had saved some dates as strings in the database, using the jQuery datepicker. I had to convert them back to dateTime-objects to compare two dates. The proper way to do this is to turn them into objects either by using date_create() or new dateTime(). Note that if you use a string that can’t be recognized, the constructer returns false, and your subsequent comparison functions screams at the boolean.

Here’s that comparison function, and the usort-statement that uses it to sort an array of objects by date:

function cmp($a, $b)
{
$datetime1 = date_create($a->meta_value);
$datetime2 = date_create($b->meta_value);
if ($datetime1 && $datetime2) {
$i = date_diff($datetime1, $datetime2);
}
return ($i->invert);  /* boolean: negative when the date diff is negative */
}
usort($comments, "cmp");

Of course in some perfect universe we’d like all this object creation and type casting done automatically with a special operator ensuring MCC in programming (minimal character count), so that we can write something like:

date1 d= 'now';
date2 d= '20 April 2030';
days2go = date1 - date2;

(Actually, this should be possible already. Anyone has implemented this?)

Read more »

WP_less

I’m a heavy user of LESS and I rejoiced when I learned that some geeks plugged in the LESS PHP-compiler into WordPress – and it works out of the box! I didn’t experience any issues with syntax (although you sound be careful as there are little difference between the LESS compilers) and the LESS files in my child theme were automatically compiled.

Just go to https://wordpress.org/plugins/wp-less/ and get the integrated LESS compiler.

Enqueue your LESS stylesheet like you would normally enqueue your .CSS. (you can change back to minified .CSS on a production environment, but with fast cashing, there’s not even a need for that. Here’s how I enqueue mine:

if (class_exists('WPLessPlugin'))
wp_register_style( 'custom', get_stylesheet_directory_uri()."/css/custom.less" );
else {
wp_register_style( 'custom', get_stylesheet_directory_uri()."/css/custom{$min}.css" );
}

Note that I check if the plugin exists, and if it doesn’t I just include my precompiled css. Then I list it with the recommended plugins. This is best practice.

More LESS

LESS is a breeze. It allows me to write such clean, reusable and responsive CSS that it is the nr. 1 tool hands down that speeds up my (child) theme development. Actually, when you look at all the commercial themes offering “super sliders, portfolio pages, full responsive blahblah” the only thing that really distinguishes them is their styling – and that is something we can do very, very efficiently.

I borrow mixins from all over the web and will share my (aptly?) named file <pre>more.less</pre> here soon, so check back in a few days!.

Read more »

Wordpress 4.2

I just updated a multilingual multisite to WordPress 4.2 – without opening my FTP-client, editing settings files, are even clicking away from the WP dashboard. It works just out of the box. Awesome!

This is the first major WordPress release of 2015. There are some noticeable improvements. What do I think about them?

1. Changing themes directly in the customizer – will save some time especially if you set up many sites like I do
2. Better support for embeds – Tumblr is good and all, but I normally go the other way around, posting from my WP to tumblr (and I don’t want to embed other people’s blogs). Sharing youtube video’s is useful though
3. Faster plugin update – Comes in handy, especially in an experimental environment where you try out many plugin’s latest versions
4. Under the hood improvements – WP_Query & co have improved sorting functionality. I’d like to see some performance stats there.

The introduction video is flashy – and appeals to a large audience. When they said “You can now tell the world about your love for cats, cookies, and even jazz – without using a single world” I frowned. Where is the “code is poetry” gone? And doesn’t it only work when all that code is actually used to support poetry? I see WordPress as a powerful tool to the typography  and lead people to the meaning behind the written word. It sounds like a paradox, but good design and user interface is all we have to fight the shortening of the attention span everybody seems to suffer from;-

Read more »

Using masonry with Ajax reload

I  was struggling with masonry tonight. I know, it’s an old script and we should probably look out for something new, but still. I have this good ol’ website that uses ajax loading for search. It is triggered on the search (don’t forget e.preventDefault()) and will put what it finds in the inner element into the outer element. So far so good.

But what happens is dat the jQuery-object on which the Masonry-instance is working is now obsolete (on my site it is called $container, which captures #container. So this is important: Always make sure that you are excuting masonry on the right DOM-objects. When I added the statement $container = $("#container") after the AJAX-call was done loading (.done), things worked.

Also notice that I use imagesLoaded() to make sure masonry doesn’t start juggling DIV’s without knowing their proper sizes. Finally, consider blurring your search form’s input-field and don’t forget to bind the functionality you want to use after AJAX (there is life after AJAX). Note: this is the point where we scratch our head and sigh “perhaps we need some structured framework, after all, like node, angular, etc. Something that takes care of things.. But hey, if we follow proper practice, wrap and document our code properly, we can get a long way. At least vanilla javascript (or vanilla jquery) seems to be future-proof.

Code for reloading masonry after ajax call

$.get( url, { s: term }, function( data ){
$('#primary').html( $(data).find('#main') );
$container = $("#container");
})
.done(function() {
$container.imagesLoaded(function(){
if (typeof($container.masonry) !== 'undefined') $container.masonry();
if (typeof($container.ccb_ajaxbind) !== 'undefined') $container.ccb_ajaxbind();
});
// Blur input field
$("#searchform #s").blur();

Read more »

Good Tutorial on background video

While browsing airbnb.com I noticed the amazing background video they have there. It’s concise, relevant to what their page is about, and distracts minimally from the Big Search Field. I looked into it for another project and it turns out, Airbnb does it by the book.

1. Provide fallback .jpg image for mobile devices
2. Provide .webm and .mp4 for different resolutions, and put the .mp4 after the webm.
3. Control the layout of your <pre>HTML5 <video></pre> with css (or better: use LESS or SASS)
4. Use video’s that are easy to loop and are not longer than 10-15 seconds
5. Try crushing the file size as much as you can! Keeping it under 1MB is cool for the folks behind slower connections.

Here is a very useful tutorial over at Demosthenes.info.

Read more »

Flush Permalink Cache

I was working on some custom pagination functionality for WordPress, and after much too long I found out you <em>have to flush the permalink cache</em>. Just go to Settings > Permalinks and click on “save” without making any changes. That’s it.

Check out WordPress’ great <pre>wp_rewrite</pre> class and endpoint functionality.

Read more »