Using GIT for deployment

Git-Logo-1788C

I’m always looking for ways to improve the way that I work, in whatever I do, however I realised recently that I’m still deploying all my code to servers via good old fashioned SFTP, and I know that there’s a better way to do this. So after a little Googling I came across this Using Git for Deployment article which I’m now using for a staring point for my own experimentation, as documented below.

In this we complete the following steps…

  1. Setup a central GIT repository to deploy from
  2. Adding The Deployment Repository as a Remote Repository
  3. Automatically Deploying Changes to a Staging Environment

Setting Up a Central, Bare GIT Deployment Repository

In order to be able to deploy my code to the server, I’ll need a central GIT repository to store your code ready for deployment.  To do this first decide where your repo will live.  For this experiment I decided, as per the reference article, to use /var/git

$ mkdir -p /var/git/my-experiment.git
$ cd /var/git/my-experiment.git
$ git init --bare

Adding The Deployment Repository as a Remote Repository

In order to be able to deploy the code you’ve worked on, you need to be able to push your code to the new, central, bare git deployment repository.  To do this, we add the new repository as a remote for you local repository, used for development. To do this you need to add the following to the end of your .git/config file…

[remote "deploy"]
        url = <user>@<server>:/var/git/my-experiment.git
        fetch = +refs/heads/*:refs/remotes/deploy/*

Once this is done, you can push your code to the central GIT repository using…

$ git push deploy

Automatically Deploying Changes to a Staging Environment

Of course, you will probably want to preview the updates you’ve pushed to the server in a staging environment, so lets setup one at /var/www/staging

$ mkdir -p /var/www
$ cd /var/www
$ git clone /var/git/my-experiment.git staging

To do this you need to add a hook that fires whenever a branch is updated, using the post-update hook (for more information see GIT hooks).

GIT hooks are located within .git/hooks directory (or hooks for bare repositories) and are just shell scripts that are called at particular points in the GIT process.

We need to create the /var/git/my-experiment.git/hooks/post-update on the central repository (this would be .git/hooks/post-update in a non-bare repository) that will deploy the update to the staging environment. Create this file, and enter the following as it’s content…

#!/bin/sh

echo
echo "**** Deploying changes into staging environment [Hub's post-update hook]"
echo

cd /var/www/staging || exit
unset GIT_DIR
git pull deploy master

# Install all your composer vendor files
composer install --no-dev
# Optionally set the file permissions on the files...
chown -R www-data:www-data /var/www/staging

exec git-update-server-info

And to allow the script to run, you need to make it executable…

$ sudo chmod a+x /var/git/my-experiment.git/hooks/post-update

jQuery UK conference 2014

jQuery aliasing
Just over a week ago, I was luck enough to have chance to attend the annual jQuery UK conference down in Oxford, for the 3rd year running. Having been to the last 2, very successful conferences, I had hight expectations for this year’s event… and I wasn’t disappointed.

Opening Talks

The day started with a very entertaining & colourful Adam J. Sontag giving a run down on the state of jQuery, and an interesting view on whether you should not, not use jQuery.

Following Adam, we had a very interesting history of the internet and HTML from Jen Simmons, including a network diagram of ALL the computers on the original internet. It’s amazing to think that this all started only in 1990!

After a break for coffee & a chance to enter one of the many challenges on offer, including retro console gaming & giant Jenga, it was time to pick your sessions for the day, with 2 presentation tracks, as well as a workshop style track for those lucky enough to get there early enough for the limited places.

Build for the Future

For me, it was the main track that really interested me. After the break we learned all about building for the future, from Google’s Paul Lewis, focusing on the importance of optimising your sites for speed, including download speed, as well as speed of rendering your page, how to reduce the strain on the CPU of less powerful devices, and also how to test your sites to see how well they perform. I’m happy to say that mine performed pretty well, with scores of 92/100 (Desktop), 79/100 (Mobile) & 85/100 (Mobile User Experience) on the PageSpeed Insights test, and a start render of 1.053s on the Web Page Test.

The Chroma Zone: Engineering Colour on the Web

The next talk, by Lea Verou, taught me a whole heap of information about colour, how it’s constructed on computer screens and the many different way you can define a colour for rendering on a web page. Oh, and the fact that, within the named CSS colours, ‘dark grey’ is actually lighter than ‘grey’!

Dark grey!

Useful links…

Building multi-screen web apps with Ember.js

After a very nice packed lunch, it was time to learn about “Building multi-screen web apps with Ember.js” from one of their (& jQuery’s) core developers, Yahuda Katz. Starting with an interesting & thought provoking intro on the cognitive reserves of developers and the various things that drain it away during a day. A clever way to segment into him presentation, but explaining that using sensible defaults, and removing the need for developers to make unnecessary decisions can help preserver the valuable cognitive reserves. Something that Ember.js aims to do. Also got a useful introduction to Ember.js.

Components and Modules for Front-End Sanity at Scale

For my next talk of the day I chose to go to The Financial Times’ Andrew Betts‘s talk on “Components and Modules for Front-End Sanity at Scale”. This was a fascinating insight into the issues and challenges faces when attempting to introduce a unified components library across an estate of hundreds of site, without breaking stuff as you do. The front-end component standard that the FT use can be found at http://origami.ft.com/. We also learned about the component builder used to prepare and test components for use.

Useful links…

Graphical Effects You Didn’t Know Browsers Could Do

After the last coffee break of the day it was time to learn about some new CSS browser filters that are now available in the newer browsers, from Divya Manian. We learned all about image masks, using SVG graphics, transparent PNGs and path info definitions. We learned about clipping using polygon information. We learned about Blend Modes, which are very similar to those available in tools like Photoshop. And we learned about Filters (functions that are applied to images).

We also learned how filters & blend modes are GPU functions, and so are hardware accelerated.

Oh, and we learned that Safari’s console has a handy ‘Layers’ panel that helps to identify the different GPU layers.

The Rise of JavaScript Hardware Hacking

The most entertaining talk of the day, however, had to be the final talk in the main track, which saw Andrew Nesbitt and Francis Gulotta talking about what can be achieved when you combine on-screen programming with real world objects.

We were treated to awesome demonstrations including a fruit (musical) keyboard (a musical keyboard where the keys were actual fruits), an internet connected hat, that flashed when it received tweets & raised a flag once 40+ tweets had been received, and, best of all, a quad-copter controlled by a hoodie! Yes, a hoodie with control strips sewn into the sleeves to tell when & how they were bent, in order to control the movement of the quad-copter. After a minor incident with the wall of the stage, they managed to control the copter to fly over the audience (before crashing into the back wall).

The After Party

And in any worthwhile conference these days, there was, of course, a sponsored bar at the on-site after party, with more retro gaming & prize draws by the various exhibitors.

All in all a great day out the office, gaining some interesting new knowledge and skills, as well as meeting some awesome fellow developers. I think it’s highly likely I’ll be back again next near!

Photos

I’m Running the Dublin Marathon

I’m rather excited this afternoon.  I’ve been talking about it for a while, but not got round to anything other than starting training.  Well today I booked my place, will be running the 2013 Dublin Marathon at the end of October.

trainers

Normally, when I book a race, I setup a sponsorship page, so that people can donate to a good cause if they like.  I don’t, however,  push it because, to me, races are done for fun, & are less of a challenge for me, than for others.  This one’s a little different, however.  The furthest I’ve ever run is a 1/2 marathon (13.1094 miles, or 21.0975).  This marathon (26 miles and 385 yards, or 42.195 km) is actually going to be a challenge, so I’m going to push this a little more.

To make this really worth donating to, though… I’ve set myself the challenge of a target time to complete the run in.  Bearing in mind that the furthest I’ve run is 13 & a bit miles, & my personal best (PB) for this distance is just over 1 hour 45 mins, I’ve decided to set my sights on completing the marathon on just under twice my personal best for the half marathon, meaning that I’m going to have to maintain the same pace I did my half marathon at for twice the distance, making this a worth challenge for sponsorship, should I achieve my target time.

So I have 2 questions for you all…

- Who should I support?

- How much more would you be willing to donate if I do manage to achieve my target time of 3:30?

I did have a funky poll here, but it was playing up, so please add comments below with any answers you have.

If you have any more comments about this please feel free to add them in the comments box below.

WordPress – How to modify just the main page query using the ‘parse_query’ filter

WordPress - For Blogging & Website CMSI recently had a problem on a WordPress site I was working on, where I’d added a ‘parse_query‘ filter hook to modify the number of posts displayed on a particular page. All worked fine with this until the site owner added more content to a particular post type that was included in a widget on the modified page.

The problem

The problem was that the WordPress widget code to fetch just 4 posts was also being affected by the action filter, as the function it was calling was checking for only which page it was being called on.

The solution

A quick bit to Googling lead me to the WordPress documentation for the WP_Query::is_main_query() method.  By adding this to the conditional statement in the filter callback I was able to have it only affect the main page query, & not the widget code.

The WordPress code

Here’s the code before & after…

Before…

function modified_query( $query ) {
if ( ! is_admin() && is_post_type_archive( 'analogy_images') ) {
    $query->set( 'posts_per_page', 20 );
  }
  return $query;
}
add_filter( 'parse_query', 'modified_query' );

After…

function modified_query( $query ) {
if ( ! is_admin() && is_post_type_archive( 'analogy_images') && $query->is_main_query() ) {
    $query->set( 'posts_per_page', 20 );
  }
  return $query;
}
add_filter( 'parse_query', 'modified_query' );

This code actually sits within a class, but is shown here without for simplicity of displaying.

Vagrant – An amazingly simple way to setup development environments

Vagrant - For simple development environment setupHaving attended the fantastic PHP NE conference earlier this week, I picked up a lot of great information, hints & tips.  One of which that I’m particularly excited about is Vagrant, so I’ve decided to spend this afternoon playing with it, & thought I’d just document the process.

I’ll be using the instructions found in the Vagrant website documentation, & will include links to any other reference materials as & when I use them.

Installing Vagrant

Installing Vagrant is as simple as downloading the appropriate installer from the Vagrant’s download page, & running the installer.  There seems to be an installer for all the main operating systems, including Mac OSX, Windows & various flavours of Linux.

For reference, I’m runnign through this on Mac OSX 10.8.2.

I downloaded & ran the Vagrant installer without any problems.  So far, so good.

Installing Virtual Box

Vagrant uses Virtual Box to create the  virtual development environments.  Virtual Box is a free virtualization product allowing you to create virtual machines running within your existing operating system.  So the next step is to install this.  To do this is also a simple task.  Just download & run the installer needed for your platform from the Virtual Box downloads page.

Note: Vagrant can use other virtualisation platforms, including VMWare Fusion, however I’m not going to cover this here today, as I’m starting out using Virtual Box.

Starting Your First Vagrant Environment

Having downloaded & install Vagrant & Virtual Box, I tried firing  up my first environment.  It was as simple as opening a terminal, creating a new directory for your project, navigating into the project directory & running the following 2 commands…

$ vagrant init precise32 http://files.vagrantup.com/precise32.box
$ vagrant up

SSHing nto Your New Box

If you need to SSH into your new box, guess what… it’s simple.  Once your terminal has returned to the prompt after you’ve “Uped” your box, simply run the command…

$ vagrant ssh

… and you’re in!

Shutting Down Your Box

Once you’ve finished with your new box, terminating it is as simple as issuing the command…

$ vagrant destroy

Conclusion

And that’s how simple it is to setup a development box to work on, using Vagrant.  In the coming days I’ll be playing with how to configure boxes with software & mapped directories, so watch this space for more info.

How do I make your website more accessible?

Accessibility logo

Image courtesy of Terrill Thompson on Flicr

It surprised me today, when doing a little research on the latest news & information, when I came across a page that wouldn’t scale it’s fonts up.  As a strong advocate for making websites accessible, this bothered me.

When reading lengthy articles, I like to enlarge the font on the page, allowing me to sit back from my screen & read at a distance. All browsers (as far as I know) allow you to “zoom in” on the page, making the text larger. This is a key feature to make your site more accessible, allowing those who struggle with reading small text, to make the content more readable.

All web designers should consider making their websites as accessible as possible, when designing & building websites. This can be a rather extensive tasks, & one that sometimes gets bypassed, usually because of project budget, however there are some things that are simple enough to implement, including ensuring that the text on a page can be scaled up, if needed.

Quick wins to make your website more accessible

So here are a few quick wins on how to make your website a little more accessible…

  • Make sure that your text scales up.  Use the browser’s zoom functionality to test this (usually Ctrl++ & Ctrl+- or Cmd++ & Cmd+-).  This makes things easier for people who struggle reading small text.
  • Make sure your text flows correctly within the page. If you were to turn off CSS in your browser, your plain HTML text should make sense if you read down the text.  Some websites break text up to allow it to be positioned around the page.  The reason you must do this is so that the page makes sense to users who use screen readers to read the content of webpages.
  • Use contrasting colours.  For some people, differentiating between similar colours can be tricky.  By ensuring you use high contrasting colours, you make things on the page easier to see.  Bear in mind, however, that there are different types of colourblindness, which means different people struggle to see the difference between different colours.  In an ideal world you would include the option to display the site with different styles, based on different colourblindness types.
  • Make sure all images on your pages have the ‘alt’ attribute set on them.  The ‘alt’ attribute is read out when screen readers reach an image, so it should be set to a description of the image, for those who cannot see the image.
If you’re new to accessibility, you can also check out newtoaccessibility.com or, for more thorough reference, take a look at a11yproject.com.

Installing ffmpeg on an Amazon Linux flavour EC2 instance

Today I’ve been installing ffmpeg on our new Amazon Web Servicer EC2 instance ready to create an AMI for our new Elastic Beanstalk App.

When I tried this the other day I had a few problems, & am having to run thright the process again today, so I thought I would document the process for anyone else who might have the same problems.

I started off by referencing this guide on Compiling FFmpeg on CentOS 6.0 the ffmpeg wiki.

I followed this guide pretty much to the letter, but did have to change the install steps for yasm as follows…

$ cd ~/ffmpeg-source
$ wget http://www.tortall.net/projects/yasm/releases/yasm-1.2.0.tar.gz
$ tar xzvf yasm-1.2.0.tar.gz
$ cd yasm-1.2.0
$ ./configure --prefix=/usr --libdir=/usr/lib64  # or ./configure --prefix=/usr if on a 32-bit machine
$ make
$ sudo make install

… thanks to this answer found on the Linux Questions forums…
http://www.linuxquestions.org/questions/linux-software-2/x264-cannot-find-yasm-845576/#post4166919

For more information on upgrading or uninstalling these packages, see the original document here…
http://ffmpeg.org/trac/ffmpeg/wiki/CentosCompilationGuide

Running: My first ever training Half Marathon

In my time as a runner I’ve run a total of 4 half marathons, each an organised race event. Yesterday the kind @gemmarathbone helped me complete my first ever, training (non-race) half marathon arounds Leeds.

I didn’t really run at all between the Great North Run in September last year, and the end of December, when I finally decided I needed to get out & hit the pavement again. So set on my 2013 goal of running a complete marathon (in one go), I’ve stared on a RunKeeper training plan, but for now the runs are relatively gentle, & short… but I found, whilst I obviously wasn’t pushing myself, & took it easy, I managed to complete the run relatively comfortably in 2 hours, 27 minutes. I am aching a little now, at the end of the day after though, but feel great for doing the first one of these without the drive & energy of a race day. So here’s to many more this year, on the way to my full marathon (probably in November).

Half Marathon Training Run Stats - 13th Jan 2013

New Year’s Resolutions… Starting Early

Now that all the festive-ness is staring to die down, and a new year is almost upon us, it’s the usual time to take stock, look at who & where we are, & perhaps make some resolutions to do our best to keep in the coming year ahead.

2012 has been a pretty full on year for me, with the first full year of running my own business, new ventures taking me to the US for the first time, completing my 4th half marathon with a personal best time, the making of some amazing new friends, learned a whole heap of new stuff (mostly technical), and sadly, the ending of an 8 year relationship.

I haven’t typically done much about new year’s resolutions in the past, but at the end of the year that I’ve had, I feel that I should at least have a plan for the coming year, & give myself a focus that I feel’s been missing for a while now.

So what’s the plan…?  In 2013 I’m going to run (a marathon), learn, climb, build a successful web app business, be honest (with myself), & to let my friends know how much they mean to me.

Oh, & I’m also going to try to keep blogging a little more regularly.

Here’s hoping yours & my 2013 is a happy and successful one.

That is all!

Running again

Through a rather rough final quater or 2012 I’ve let one thing that’s important to me slide… I’ve not run since completing the Great North Run.

So today I decided to start on my new year’s resolution early & get out for a gentle jog, & feel so much better for it.  I’ve not started planning to do all the other stuff I’ve been putting off, & I think the run helped with that.

Today’s run info…

Runkeeper stats for run on 27th Dec 2012

As a final thought, I did wonder whether my mood & struggles are because I’ve not been running, or whether I’ve not run because of my mood… Or perhaps both!?