Please visit my new campsite listing site ukcampingmap.co.uk


Archive for the ‘Computers and all that’ Category

Quick CSS3 browser prefixing in netbeans

Friday, March 16th, 2012

I just wrote this macro for netbeans, which inserts -moz- and -webkit- prefixed equivalents of a css3 style rule:

caret-end-line selection-begin-line copy-to-clipboard caret-backward insert-break caret-up "-webkit-" paste-from-clipboard insert-break "-moz-" paste-from-clipboard

:after shock

Thursday, March 15th, 2012

I’ve just been disabused of a misconception I had regarding CSS’s :after (and, by extension, :before) pseudo-element (I’m also, it would seem, somewhat in the mood for using long words).

Quirksmode – my go-to site for checking browser support for CSS features – states:

[…] :before and :after, with which you can place text or an image before and after each HTML element.

… which isn’t actually true. While applying box-shadow to an element today, and also using :after to add a bottom border which could be given a slightly offset position I noticed that the shadow seemed to be getting applied to the :after element too. I couldn’t decide if this behaviour is what I would expect (having been given scant opportunity in the past to use much CSS3) so decided to set up a jsfiddle to try out a few things.

A bit of playing around led me to discover that the :after pseudo-element is inserted after an element’s content rather than after the element itself. Which is fine, if it wasn’t for the fact that there’s a decent amount of disinformation out there stating the exact opposite.

It’s also pertinent to note that the javascript/DOM equivalent of :after would be node.appendChild(afterContent) rather than node.parentNode.insertAfter(afterContent, node). And I wonder if there are any plans to have :after be put into two modes “after-content” (default), and “after-element” – could be a useful extension.

Now I’m going to get on with what I do best – appearing in the background of music videos for godawful songs which do their utmost to ruin my lunch hour.

Updating plugins to use the new jQuery.on event binding method in a backwards compatible way

Friday, January 6th, 2012

I’m going through all my written/half-written/never really gonna get written properly probably jQuery plugins to ready them for the new jQuery plugins site. While I’m at it I’m updating as many event handlers as I can to use the new $.on method (as other event binding methods are likely to be deprecated in future).

This presents a problem as I would like to achieve backwards compatibility too. A simple solution for the bind method is:

var binder = $.fn.on ? "on": "bind";
$(this)[binder]("click", handler);

But I’ve also put together this more generic solution (this is completely untested, but something like this should work)

if(!$.fn.on) {
   $.fn.on = function(events, selector, data, handler) {
       if(typeof selector == "function") {
           return $.fn.bind.call(this, selector);
       } else if(typeof selector == "object"){
           return $.fn.bind.call(this, selector, data)
       } else {
           return $.fn.delegate.call(this, selector, data, handler)
       }
   }

   $.fn.off = function(events, selector, handler) {
       if(typeof selector == "function") {
           return $.fn.unbind.call(this, selector);
       } else {
           return $.fn.undelegate.call(this, selector, handler)
       }
   }
}

Find that campsite!

Sunday, May 8th, 2011

I’ve been very busy lately. Busy making it easier for YOU – yes YOU! – to find the perfect campsite in the UK.

As of a few days ago, my campsite listing website has some new features. And not just any new features – these are (to the best of my knowledge) unique new features. The already pretty handy map of campsites now lets you…

  • Filter campsites based on what facilities they have – you can either specify that your ideal campsite must have a certain feature, or definitely must not have it. Ideal for finding a campsite that allows campfires but no pesky caravans.
  • View only those campsites that are open during the month you’re planning on holidaying.

There are one or two additional features hopefully to go live later this month, but for now please take a look and let me knnow if you have any feedback.

Two small but useful javascript facts

Monday, February 28th, 2011

Bees kneesPassing parameters into setTimeout callbacks

setTimeout (and setInterval too perhaps?) accepts a third parameter, an array of parameters to pass in to your callback function, so

setTimeout(function() {
myFunction(need, to, pass, these, in);
}, 200);

Can far more efficiently be written

setTimeout(myFunction, 200, [need,to,pass,these,in]);

Firebug’s console still works when you’re at a breakpoint (and can be very useful for debugging jQuery)

When debugging using firebug  and you set a breakpoint, when your code stops at that breakpoint

  • you can still use firebug’s console to run any code you like
  • “this” in firebug’s console is always set to what “this” is set to in your code

This means that you can play around with your variables at will at any given point in your code. It may be that I was a dunce for not knowing this, but I’ve never seen anybody I work with take advantage of these facts, so maybe it’s news to more people than just me…. and it’s bloody useful so I feel no shame in shouting about it.

For instance jQuery, for all its benefits, can be a pain to debug due to the fact that so much work is done by a single string (your selector) and on a single line of code (using chaining), and that jQuery often doesn’t give very helpful error messages. This means if you wnat to debug a certain line you have to either a) keep stepping in and out of the murky world of jQuery’s inner methods in order to find out where and why the unexpected bug is happening; or b) add temporary lines to your code which carry out only part of the single jQuery line, then reload the page to observe if they succeed or fail.

Not so if you set a breakpoint and then use the console. For instance, say a fairly complex line of jQuery misfires.

$(">p input:focus", myContainer).css("height", adjustHeight).children(".shrinker").remove().end().wrapAll("<div class=\"done\">");

By setting a breakpoint in my code on this line, and then copying the line into the console and running it, I can progressively remove/tweak bits until the error no longer appears; I never have to step through jQuery’s code and I never have to reload the page. Easy peasy.

How do, DOS

Thursday, February 17th, 2011

Much like recent activity on this blog, my involvement with the windows command has been characterised by being entered into begrudgingly, generally taking a lot longer than I intend, and leaving me thinking that there’s something better I could be doing with my time.

You see, I’m not really that much of a geek – I own very few gadgets (quite possibly none, unless a mandolin counts) and find playing around with computers tedious (one reason I’m drawn to front-end development is it’s far removed from the confusing and arcane inner-workings of the computer). My family didn’t own a computer back in the 80s, when typing in commands at the prompt was the norm, so the whole experience is alien to me.

But, as of today, I’ve lost my fear… thanks to the humble batch file.

For anyone who doesn’t know what a batch file is, it’s a file which runs a series of command line statements. It has a .BAT file extension, and basic ones are very easy to write – the syntax is exactly the same as typing into the DOS command line itself… except you’re typing in a nice text editor so trivial things such as using ctrl+v to paste, using the cursor keys to move anywhere, and clicking and dragging to select text work. And, best of all, you only need type your commands once, into the batch file, and then just click on it (or a shortcut) next time you want to run it.

So, for example, every time I wanted to minify CSS and JS on one of my localhost sites before an upload to the live server I used to spend 5-10 minutes typing, making mistakes, swearing and crying. Now I just click an icon, and don’t feel the need to swear or cry half as much.

Fonts are not quite the enemy

Wednesday, February 16th, 2011

Today I learned that there’s a lot more to using fonts  in a website than just including them with the @font-face declaration, and that maybe typekit has its uses after all.

I also learned that if I use a “Today I learned…”,  terse but link intensive format to write blog posts I’m more likely to bother to share something useful (at least this once). So more brief but bountiful posts to follow… maybe.

Eventful times

Friday, October 22nd, 2010

I’ve just started delving into using jQuery’s custom events. They’ve been around for a while, but I never really saw the point of using them before; I’d read one or two nice examples of how they can be used, but I kept hitting a mental block when trying to think of ways to use them in my own work. I think, like the great leap forward you have to take when realising an object can be as abstract as you want (eg a process that exists only fleetingly, such as an ajax call, can be an object), programming using events as a central aspect of your style requires a big change in the way you think about problems.

As an example, previously I was always saving references to objects that a given object might need to interact with, e.g.

function Obj1() {
   this.container = $("#container");
   this.child = new Obj2(this);

   this.method = function() {
         //do something
   }
}();

function Obj2(parent) {
   var that = this;
   this.parent = parent;
   this.container = $("#childContainer");
   $(this.container).click(function(){
       that.alter();
   });

   this.alter = function() {
      this.altered = true;
      this.parent.method();
   }
}

var obj1 = new Obj1();

So what’s wrong with this? It’s difficult to say, but it always jarred with me that you had to pass in “this” as a parameter in order to make it easy to track back to the parent. And there will be circumstances where you’re creating an object that has to interact with lots of other objects and you have to either pass in lots of parameters when creating the object or do some on the fly processing to find the objects that need to be affected.

Now, here’s the same thing achieved using custom events

function Obj1() {
   var that = this;
   this.container = $("#container");
   this.child = new Obj2();
   $("#childContainer").altered(function(){
       that.method();
   });
   this.method = function() {
         //do something
   }
};

function Obj2() {
   var that = this;
   this.container = $("#childContainer");
   $(this.container).click(function(){
      that.alter();
   });

   this.alter = function() {
      this.altered = true;
      this.container.trigger("altered");
   }
}

var obj1 = new Obj1();

Ok, so what’s so good about this? It may even use more lines of code. But crucially it gets rid of having to store references to objects, freeing you up to create ever more complicated applications without having to create a web of dependencies that is difficult to maintain*. A good analogy I think is to think of an object triggering an event as a child shouting. If the child shouts when it needs something then it doesn’t have to constantly hold its parent’s hand; it’s parent comes to it on hearing the shout. And this gives the child freedom to explore the world on its own terms, and develop into a more rounded, unstifled human being… but I think I’m straying off the point.

So to sum up, javascript/jQuery custom events are a very useful feature.

And don’t smother your progeny.

*I’ve just re-read the API and found out that you can attach all manner of data to the event as extra parameters, which will also be very useful for this.

Batch including headscripts and links in Zend Framework

Thursday, September 16th, 2010

A bit of a dull post to break my silence with, but after a summer away, it’s back to the grindstone of earning a living through programming. Fingers crossed I’ll be given the opportunity to work again on a website I finished ages ago, fixing all the things I did badly and adding some enhancements.

I used Zend framework for the back-end of the site and first time around I had a very rudimentary grasp of how to use it, but no real in depth understanding of its finer points. I’m now finding that I did a lot of things the long way round (eg typing out JSONs by hand  rather than using the Zend_JSON class to build them automatically). One major bugbear I had was that I was adding all my javascript and css files individually to the document head, and that the syntax for doing so in Zend wasn’t really any more concise than just hard coding <link rel=”stylesheet” ….

So now I’m revisiting Zend the first thing I’ve done is write a couple of view helpers to batch add javascript and css files, which I thought I’d share here.

<?php

class Zend_View_Helper_IncludeStyles extends Zend_View_Helper_Abstract {

   public function includeStyles($folder)
   {
     $results = array();
     $handler = opendir(getenv("DOCUMENT_ROOT") . "/css/" . $folder);
     while ($file = readdir($handler)) {
       if ($file != "." && $file != "..") {
         $this->view->headLink()->appendStylesheet('/css/' . $folder . '/' . $file);
       }
     }
     closedir($handler);
   }
}
<?php

class Zend_View_Helper_IncludeScripts extends Zend_View_Helper_Abstract {

  public function includeScripts($folder)
  {
    $results = array();
    $handler = opendir(getenv("DOCUMENT_ROOT") . "/js/" . $folder);
    while ($file = readdir($handler)) {
      if ($file != "." && $file != "..") {
        $this->view->headScript()->appendFile('/js/' . $folder . '/' . $file);
      }
    }
    closedir($handler);
  }
}

Cam****

Friday, May 7th, 2010

What a great day for the United Kingdom of Great Britain and Ireland. I think every man woman and child of this nation will wake this morning with new hope. Hope that the mistakes and missed opportunities of recent years will finally be undone. Hope that, from now on, we will all be armed with a new freedom, a new ease of living our lives without constraint by the petty failings of tired and out-of-date thinking.

I am of course talking about my new website, of which version 1 is now released

ukcampingmap.co.uk

It’s seems like an obvious idea, and I for one can’t believe no-one else has done it yet (particularly as I’ve been ruminating over it for the past two years): All the UK’s campsites plotted on a google map. So much easier than trawling through directories of campsites available elsewhere on the internet, that have only rudimentary or difficult to use tools for finding a campsite in the location you want one.

It has a search (for postcodes, towns, villages, tourist attractions) and also has easy navigation for viewing a single region, county or tourist area (eg Snowdonia).

There’s plenty more work to do on it, but for the first time, after a few weeks of intense work*, I have something fairly stable which is, while still very basic, still a lot easier to use than other campsite directories.

Enjoy.

Oh, and God help us now the  Tories are in!

*well, maybe an hour a day