Develop With Style

Trigger Javascript Events After Binding With jQuery

I use jQuery - a lot! In fact, I wonder how I ever lived my developer life without it. And even though I’ve used for a good few years now, I am still learning. Not just it’s API, but simple things like best practises. Here is a simple tip, that I seem to have overlooked in the past.

Tail Your Logs With a Touch of Color

Eric Lubow (@elubow), a colleague of mine just released his first Ruby Gem and published it on Codaset, and I gotta say, it’s a pretty damn useful one too.

ColorTail - or ColourTail if you want the correct english spelling - is a very easy way to give your log files a touch of color when you tail them. Tailing logs can be very useful, but can also be very confusing, and sometimes a touch mind blowing with all the data that some logs can spew out at you. So adding a bit of color, or underlining certain lines, or even flashing them would really help you identify the important bits of your log.

Just install ColorTail:

  # sudo gem install colortail

Then create a file in your home directory called .colortailrc, and define your colortail config:

1
2
3
4
5
6
7
8
9
10
11
12
13
Groupings = {
  # This default matching scheme
  'default' => [
      { :match => /Completed in/,    :color => :red,     :attribute => :reverse },
      { :match => /EMERGENCY/,    :color => :red,     :attribute => :reverse },
      { :match => /FATAL/,        :color => :red,     :attribute => :bright },
      { :match => /CRITICAL/,     :color => :red },
      { :match => /DEBUG/,        :color => :green },
      { :match => /ERROR/,        :color => :green },
      { :match => /INFO/,         :color => :none },
      { :match => /WARN/,         :color => :yellow }
  ]
}

The above is the default, so will apply to all logs whenever you tail them with the colortail command, like so:

  # colortail -g log/development.log

Which will give you this:

Check out the project, and enjoy!

Introducing [Baby] Mario: Content Management Made Easy

So I started a new client project a week or so ago. They needed a content management system. So I had a look around at what was already available, and to be honest there are some good and there are some bad. But as usual, none really made me happy, and provided me with a CMS that did one thing well: manage content!

So I built my own of course! I would like to introduce you to [Baby] Mario; a Rails based content management system that lets you manage content, and then gets out of your way.

Mario stores all its content and data in the database, so no need for creating and editing hundreds of files. And that means your entire site can be managed anytime, anywhere.

It support layouts, pages and nested pages. Just create a page with or without a layout, then make it a child of any one of your other pages. It lets you write full HTML, but also provides a simple templating system provided by Mustache.

Your stylesheets and javascript are also stored in the database, so no more file editing. And you can upload your images and other downloadable assets quickly and easily. Mario uses CarrierWave, so has support for storing your images on your server, on S3, MongoDB and others.

Caching is provided [and enabled by default in production] for all pages, stylesheets and javascript assets.

Mario is very young right now, hence the [Baby] prefix, so please be gentle. But that also means that his future lays in your hands, as well as mine. I have plenty more requirements for the current client, that I will be adding to Mario, so Mario will be growing up quite a bit over the next few weeks. I welcome any contributions and thoughts about what direction his future should take. So please fork the project and hack away.

Enjoy, and let me know what you think.

Taking This Blog to a Better Place.

So…

Hold on a second. Why is it I always start a post with a “So”? I also seem to start my emails and tweets with the word. I think it may have something to do with the way I think. I tend to think of my blog posts, emails and tweets, as an extension or continuation of my thoughts. Which I suppose is no bad thing. But anyway, I digress.

So… (he, he!) Since I started the Codaset video podcast - which I managed to produce two full episodes of before it stalled a little (Episode 3 is still not done, and I released episode 2 a good 2-3 weeks ago) - I’ve been thinking about other ways to talk about all the great things that I am constantly discovering on the net. I then started to wonder if there was a blog all about web development, that contained articles about coding, design and tools for web developers. There are plenty of language specific blogs out there, but I have not managed to find a good quality blog that specialises in this one subject, with regular quality articles. Perhaps something akin to TechCrunch (but better) for web developers only. A “DevCrunch” of sorts.

Unless I am mistaken, this sounds like a small gap in the market. So over the next few weeks, I am going to attempt to use this blog as somewhat of a test for this idea. I want to try and write at least one blog post every other day on anything related to web development.

This is quite a big task for me, as I am not the worlds best blogger (as you can tell from the frequency of posts right here), but I think I can do it. I have a large list of links to some great little nuggets of information that I have been saving to talk about in the Codaset video podcast, and the list is growing. So I will be starting with those, and adding to them when I come across anything of interest.

If I can manage this and churn out these regular posts, and you guys like them, then I have other ideas to enhance the thoughts behind this post. I already tweeted about an idea to create some sort of crowd sourced web development blog, and I really like the idea. Got a bit more to think about how it would work, and how it would be different to sites such as Reddit or Digg, but I like it already, and I think it would be a great way to encourage outside contributions.

So… Onwards and upwards!

Easily Manage Your Local Hosts With Ghost

I don’t know about you, but I’m forever editing my local hosts file, when developing apps and sites. Hopefully, you already know that you can create your own custom, virtual domains, that can point to any IP address.

So for example, I’ve started building a new site and want to be able to access my local copy of the site via a domain, rather than local IP or via localhost. So all I gotta do is open up the one true text editor and edit my /etc/hosts file. The location of this file will vary depending on your OS, but on a Mac, /etc/hosts is where you will find it.

The contents of the file should look something like this:

    ##
    # Host Database
    #
    # localhost is used to configure the loopback interface
    # when the system is booting.  Do not change this entry.
    ##
    127.0.0.1	localhost
    255.255.255.255	broadcasthost
    ::1             localhost 
    fe80::1%lo0	localhost
Usually I would add a new line at the bottom of this file, with my domain and the IP I want to point it to:
    127.0.0.1 myfunkydomain.dev

The domain can be absolutely anything you want, as long as it is a valid domain format. I usually end mine with .dev, so I know I use for development.

Enter the Ghost!

I found an even easier and funkier way to add and edit my local hosts. Ghost is a Ruby gem (of course) that makes it really quick and easy to add, edit, list and remove local host names. To add a new domain, just run this from your command line:

    $ ghost add mynewfunkydevsite.dev
    =>  [Adding] mynewfunkydevsite.dev -> 127.0.0.1

And the domain mynewfunkydevsite.dev is instantly ready and waiting to serve your needs. By default it will point to your local IP: 127.0.0.1, but if you want to point it to a different IP, just add it on the end:

    $ ghost add mynewfunkydevsite.dev 123.123.123.123
    =>  [Adding] mynewfunkydevsite.dev -> 123.123.123.123

Here are the other commands:

    $ ghost list
    Listing 2 host(s):
      mydevsite.local      -> 127.0.0.1
      staging-server.local -> 67.207.136.164

    $ ghost delete mydevsite.local
      [Deleting] mydevsite.local

    $ ghost delete_matching test
      [Deleting] test2.local
      [Deleting] test.local

    $ ghost list
    Listing 1 host(s):
      staging-server.local -> 67.207.136.164

    $ ghost modify staging-server.local 64.233.167.99
      [Modifying] staging-server.local -> 64.233.167.99

    $ ghost list
    Listing 1 host(s):
      staging-server.local -> 64.233.167.99

    $ ghost export > some_file

    $ ghost empty
      [Emptying] Done.

    $ ghost list
    Listing 0 host(s):

    $ ghost import some_file
      [Adding] staging-server.local -> 64.233.167.99

    $ ghost list
    Listing 1 host(s):
      staging-server.local -> 64.233.167.99

Give it a go. Your [developer] life depends on it!

I Finally Did It! My Own Web Development Podcast

I’ve been threatening to start producing some sort of podcast for ages now. Well I’ve only gone and bloody done it!

The Codaset Video Podcast has already reached episode 2, and I’me getting great feedback from it. Each week, I will be talking about anything that takes my fancy really, but mostly the topics will be web development and design related.

The first two episodes talk about a few cool jQuery plugins; show of a very cool Ambilight effect video with HTML5; talk about CoffeeScript, and loads of other stuff. The style of the videos are meant to be a little rough at the edges, and I never do more than one take for each one, and perform no editing or cuts. Of course that may change if I see the need, but I want to keep it raw and untamed.

The best place to find the Video Podcasts are on the Codaset blog, but I also publish them on Blip.TV which offers a few subscription options. And of course you can subscribe to the podcast on iTunes.

To get you started, here is episode 2. Enjoy, and I welcome your thoughts, comments and feedback.