Welcome to Look Alive! Blog of Alli Price, a Developer living in the UK who works with Drupal and lots of other fun stuff (including Harmony Forum)!

Posted: Saturday, August 6th 2011

If for whatever reason you need to search an entire database (and you don't have PhpMyAdmin available to you) then a really quick and easy way is to use mysqldump and grep.

First do a mysqldump of the database you want to search:

mysqldump -uUSERNAME -p DATABASE_NAME > database-dump.sql

Replacing USERNAME and DATABASE_NAME with your respective details, for more on mysqldump go here: LINK

Once you've got your database in a file just grep!

grep -i database-dump.sql "Search string"

Easy huh :)

Posted: Saturday, August 6th 2011

First up is a pretty cool showcase of what you can acheieve from a typography point of view with web fonts, called Lost Worlds Fairs, which take place on the Moon and at Atlantis (latter being my favourite!).

http://lostworldsfairs.com
http://lostworldsfairs.com/atlantis

Next up is the very cool iScroll project. I've just used this on some client work, and whilst it does seem to be a little quirky in some cases, it tends to behave more often than not on mobile devices though.

So what does it solve? On certain mobile devices like an iPhone or iPad, if you've got an area which has CSS overflow: scroll or auto applied, on a desktop browser you would get scrollbars, but on these devices you get …nothing.

What end users might not know is that you can still scroll these areas using two fingers, but this isn't very clear, and can result in a frustrating experience. Enter iScroll which simply adds scrollbars to these areas (and more)! You will need to target these areas and add iScroll, it doesn't magically detect them, but offers up a solution for something Apple didn't particularly want to tackle.

Posted: Sunday, July 3rd 2011

Out of curiosity I had a search around for which usages would be quicker:

$('#wrapper').hasClass('sidebars');

Or

$('#wrapper.sidebars').length > 0;

As it happens the guys over at JsPerf have already worked it out, which is a good chance to introduce this excellent resource of js based performance tests:

http://jsperf.com/jquery-selector-vs-hasclass
http://jsperf.com/browse

So the bottom line? Go with .hasClass();!

Posted: Wednesday, June 29th 2011

I'm thinking there should be a Drupal on the edge series, featuring all the weird and wonderful problems you're never likely to encounter :)

Here's one of them, recently I've had to work with negative timestamps and Drupal, which as it happens doesn't support negative timestamps.

The issue is one more of PHP compatibility than Drupal, providing you're running PHP >= 5.1 all you need to do is apply the patch from the following d.org issue:

http://drupal.org/node/271398#comment-888391
http://drupal.org/files/issues/node.module_80.patch

 

That's it! But to help you with whatever troubles you may have, I came across this very helpful post on how to convert dates to timestamps whilst keeping in mind negative timestamps, and vice versa:

http://www.epochconverter.com/programming/mysql-from-unixtime.php (See the heading "Negative epochs" on this page).

Posted: Wednesday, June 22nd 2011

The jQuery Lazy loader plugin, as been around for a long old while and I've been aware of it, though never really given it a good poke, mostly due to the big fat warning at the top of the page saying "this doesn't work".

Having seen a few sites which use it, this plugin still doesn't work. Browsers still "front load" all of the content, then once you scroll and the image you're lazy loading comes into view, it downloads the image again.

So this isn't too awesome, but not useless. If you've got a site which you can require that Javascript be on, any images which you want to lazy load should start out with a placeholder image, e.g.

<div class="listing">
  <div class="row">
    <div class="image"><img src="placeholder-image.gif" original="path-to-giant-image.jpg" class="lazy-load" alt="" /></div>
    <div class="text">
      <h3>Hello world article</h3>
      <p>Lorem ipsum etcerum...</p>
    </div>
  </div>
</div>

With the JS being something like:

$(function() {
  $("img.lazy-load").lazyload({effect: 'fadeIn'});
});

To this end, I've come across a modified version of the aforementioned plugin which does exactly that. It works, but the obvious limitation is that if you don't have javascript turned on you won't see any images.

Here's the code for the plugin

// Adapted Lazy load plugin from http://www.appelsiini.net/projects/lazyload

(function ($) {
    var $window = $(window);
    $.fn.lazyload = function (options) {
        var didScroll = false;
        var options = $.extend({
            threshold: 100,
            effect: "show",
            effectspeed: 0
        }, options || {});
        var elements = this;
        var load = function () {
                elements.each(function () {
                    var self = $(this);
                    if (!isBelowFold(self, options)) {
                        self.trigger("appear")
                    }
                })
            };
        $window.bind("scroll", function () {
            didScroll = true
        });
        setInterval(function () {
            if (didScroll) {
                didScroll = false;
                load()
            }
        }, 400);
        return elements.each(function () {
            var self = $(this),
                src = self.attr("data-src");
            self.one("appear", function () {
                $("").bind("load", function () {
                    self.hide().attr("src", src)[options.effect](options.effectspeed);
                    self.data("loaded", true);
                    var temp = $.grep(elements, function (item) {
                        return !$(item).data("loaded")
                    });
                    if (temp.length == 0) {
                        $window.unbind("scroll", load)
                    }
                }).attr("src", src)
            });
            if (!isBelowFold(self, options)) {
                self.trigger("appear")
            } else {
                self.data("loaded", false)
            }
        })
    };
    var isBelowFold = function (element, options) {
            var fold = $window.scrollTop() + $window.height(),
                imgPos = element.offset().top;
            return imgPos >= (fold + options.threshold) || false
        }
})(jQuery);

Posted: Thursday, June 16th 2011

A quick gotcha explanation if you find that Drupal's block cache isn't working.

Chances are this could be described somewhere, but after a bit of Googling and it not turning up, I figure put it up!

Pretty simple really, Drupal won't cache blocks for User 1 (block.module, line 28):

/*
* Note that user 1 is excluded from block caching.
*/

 

There you have it!

Posted: Tuesday, May 24th 2011

Chances are this might have completely passed you by, but there's been a shift for whatever reason for sites to start using hash tag URLs, the big cases being Twitter, Facebook and Gawker group (blogs such as io9, kotaku, gizmodo).

The Gawker switch pissed me off because it broke any URLs that come through RSS readers etc, and didn't work for mobile (redirect to a mobile site that couldn't work with the URL, perhaps http://xkcd.com/869/), a key mistake was only having #! URLs without any no javascript normal URLs.

Anywho the following post gives you an excellent overview as to the in's and out's of the whole thing, in short, hash tags for applications where SEO isn't a concern.

http://www.quirkey.com/blog/2011/02/10/ish/

Posted: Monday, May 16th 2011

Through my years of internet use, somewhere along the way I became a horder of tabs it would seem. A normal thing I would do is start on a subject or problem I'm working on, like a particular CSS technique and end up with many tabs, usually full of good stuff. For whatever reason chances are I'd not get round to reading them all, but keep the tabs open anyway with the intention of coming back to them.

Whilst bearable in Firefox < 4, 4 really doesn't like it, taking up huge amounts of RAM. As a solution I've gone through tagging like crazy, I never really jived with bookmarks, they always seem to get unweildy, but with 4 everything bookmark-ish seems greatly improved with tags (which quite possibly were in 3.6, the RAM gluttony has prompted this!).

So now I've got some nicely categorised things saved for later should I ever come back to them, with tags such as "designs I like" and "read later".

There are however other solutions out there such as the Too many tabs plugin, the idea of tagging however seems more appealing :)

https://addons.mozilla.org/en-US/firefox/addon/toomanytabs-saves-your-me...

 

A proper dev post is coming soon!! Promise innit.

Posted: Monday, May 2nd 2011
Tags:

One quick weekend and the site is (barely) styled, developed and live! I hope to add a bit more colour to the site in the following weeks but this should do for now.

I intend to post anything here in part for myself as a way of remembering cool or useful things I come across or up with, and also as a way of answering questions with how to do something web-ish, primarily Drupal related I'd imagine.

With that in mind, my first useful snippet is a link!

Web Designer Depot has written up some excellent tips on creating Print stylesheets, normally if a print stylesheet is needed we'd install the contributed Email/Print Drupal module (http://drupal.org/project/print), but there are still great lessons to be learnt.

http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-s...