Author Archives: Andy Davies

Web Services Go Greener

You may have noticed fuel prices going up. You may also know that Web Services are now located in the Durning Centre and that the building has received an award for its power saving features.

Ever mindful of the environment, Web Services have gone one step further and installed the next generation, leading edge clockwork servers. These servers will provide a constant service as long as I remember to wind them up every morning.

Wind them up! – get it?

Check the date!

Mega Menus for GO

For anybody reading this blog from outside Edge Hill, we have a staff and student portal called GO. GO is intended to eventually replace the current intranet.

Due the the vast nature of the internal information, we decided that the current top navigation bar just didn’t provide enough direct access to the services that staff and students need on a daily basis:

Old GO navigation bar

For a while we’ve been working on a mega menu solution. Mega menus are springing up everywhere and even Jacob Neilsen feels that they are a much better solution than previous drop down implementations.

There are three features in our mega menus worth mentioning.

1. The mega menu content.

There are two flavours of the mega menu, one for staff and one for students. External parties with access to go will not see a mega menu.

The main mega menu drops down when the GO logo or the A-Z link is rolled over. The left hand colomn has some current news stories, and these will eventually appear automatically (they’re currently added manually so if they go out of date, bear with us). The other links have been deemed to have the most value and the A-Z link is repeated in the bottom right hand corner. Go on click a few and see where you end up.

2. A-Z

We have also added an A-Z page and this should cover all wiki pages sites for whom the user has access together with a few other areas of Edge Hill’s online services. The A-Z is quite extensive so to enable easier access the A-Z has it’s own navigation. When one of the letters is clicked the items beginning with that letter are displayed and all others are greyed out making it easy to hone in the links you need.

3. Top Navigator choices (+/-)

You may have noticed a +/- button on the top navigator.  Initially all users are offered Mail, Library, Blackboard and Files on the top navigator.  As long as the user is in GO, thay can use the +/- button to open a choice box and select the 5 items they prefer.

There is scope to add further items in the future, but choices will be limited to 5 in order to keep the top navigator consistent.

The mega menus should also function in the docs. library and wiki domains.

Slightly more Regular Expressions

IMG_8221For me regular expressions are like magic. I can appreciate the wonderful things they can do but I’ve never really understood how the trick works. As I develop primarily in PHP there are plenty of PHP string functions which when combined, can get me the desired result. However, yesterday I had to extract two values from a single string, so I thought I’d give Regular Expressions another go. Over the years of sniffing at them I realised that I’d picked up a few things.

  • Word Boundaries – These look different depending what flavour of regex you’re using. I’m using PHP’s PCRE functions so my word boudaries are forward slashes
  • Characters – I knew about Character Classes and I know what some do, not all of them. For example I know that [A-Za-z] will find an alpahbetical character and \d will find a single digit.
  • Repetition – I knew about greediness ( the + character). This character will try to continue matching your token after its found the first occurence.

So when I was confronted with the following string: item_newsArticle1138, I decided that it would just extend my knowledge enough to investigate using regex to extract “newsArticle” and “1138”

Getting the number off the end of the string was easy enough. I’m using the preg_match() function in php to pass the found string into a variable:
preg_match('/\d+/', 'item_newsArticle1138', $modelid);

The forward slashes act as regex delimters, so all we need is \d+ which finds the first digit in the string and the plus sign (+) continues finding subsequent digits: 1138.

Then came the tough one. If I use /[A-Za-z]+ as my regex;
preg_match('/[A-Za-z]+/', 'item_newsArticle1138, $model);

The regex engine reports finding “item” in the string and stops at the underscore, ignoring the part I needed. What I needed the regex to do was find the underscore and then get all the alphabetic charaters after it. To do this I needed to learn how to use positive and negative lookahead and lookbehind.

So what I needed to add to my string was a positive lookbehind: (?<=_). The brackets and the question mark provide the code for the lookahead/lookbehind. The inclusion of a less than makes it a lookbehind (N.B. omit the less than symbol for lookahead - not a greater than symbol). The equals sign tells the regex "to look for" and then I pass in the underscore character, as that's what I'm looking for in the string. That gives us the following regex:
preg_match(‘/(?<=_)[A-Za-z]+/', 'item_newsArticle1138, $model);

Be careful the php function preg_match returns the results in the variable declared as the last arguement ($model) as an array, so to use the value you need $model[0] to return “newsArticle”.

Hey presto, the magic is revealed. I’m no expert, so somebody’s bound to tell me a better way in the comments, hello?

Arrays in dBs and YAML Config

I’m working on some new mega-menus for GO. I’ll post about that when we go live.

Following a pre-Christmas code review of the user-defined munu choices, we identified that we needed a way to provide a default set of menu items for everybody prior to them making and saving their personal choices. Mike remembered that we had an Option table capable of storing an array of values per person.

As this table existed in the GO symfony framework it already had methods for getting and setting values. Reading those methods introduced me to the php serialize function. This function takes an array and generates a storable representation of its value. For example this
Array
(
   [0] => 1
   [1] => 2
   [2] => 3
   [3] => 4
   [4] => 9
)

is turned into this:a:5:{i:0;i:1;i:1;i:2;i:2;i:3;i:3;i:4;i:4;i:9;}

When the value is queried we can simply unserialize it to return it to its php readable form.

Default Values in YAML Config Files

In the Option table, if a record isn’t returned for a user (no option has been set) a default value (or array) can be returned when passed into the querying method. As I needed to query the data in more than one place in the application, I needed to set the default value in one place. Symfony uses YAML files for configuration so I set it in the application config file app.yml.
all:
  sf_guard_plugin:
    default_dashbar:      [1, 2, 3, 4, 9]

Spaces are all important in YAML. Ensure you don’t indent each line and include spaces between array elements.

To pull YAML config variables into your code enter:sfConfig::get('param_name', $default_value);. The ‘param_name’ takes the file name and the parent child structure of the YAML file, separated by underscores and can be found in the Configuring Symfony chapter of the manual.

Heavy duty stuff for the first post of 2011.

How do I know if it’s Christmas?

Photo-A-Day #822b 07/09/07Its Christmas eve. Are you excited? In less than 24 hours Santa will have been, scoffed his mince pie and glass of port 😉 and gone on his merry way.

So just how long do we have to wait for Christmas?

If you Google “Christmas countdown” there’s a whole slew of sites with count down clocks (including some really old ones that I suspect were written as “my first javaScript program”). No, No, No, No, NoOne of the best, and very popular within Web Services, dedicated to the Christmas countdown has to be isitchristmas.com. Quite simply, every visit is met with an emphatic “No” until Christmas day. For rss die-hards there’s even a feed. You just know you’ll have to get the laptop out tomorrow just to see that is, in fact, Christmas. I’m sure, yule you’ll fit it in despite the present opening, bucks fizz, snowballs, Christmas breakfast, table laying, bird roasting, gut-busting pudding, family rows, tears, Queen’s speech, 3 o’clock film, mince pies, flat batteries, karaoke, Quality Street, After Eights, home-made sloe gin and droopy paper hats.

That’s for tomorrow. If you’re a believer (and you’ll only get a stocking full of sprouts if you don’t believe) or you have kids, you may also be interested in tracking Santa’s progress. HumbugYou’ll also find games for the kids to play.

Happy Christmas from Web Services, Edge Hill University. Now where did I put those humbugs?

Not delicious at all

Canoe 18So, I write a blog post for the first time for ages and one of the key components is about to go West. The news that delicious, Yahoo’s social bookmarking site is to go to the wall has ruined my Christmas, and I’m not the only one. I’m going home to eat humbugs and kick the cat (I haven’t got a cat – but I like cats – I do – really – if I had one I’d buy a cat tent!).

Still no official announcement from Yahoo, but any regular delicious user is already looking around for alternatives. I remember a couple of years ago that I was enjoying synchronising my delicious bookmarks with Ma.gnolia, but that project appears dead in the water. Maybe this would be a good time to resurrect it.

Mike has already given Pinboard a try. Maurice is giving Google Bookmarks a go. The beauty of delicious was that as a team if we all used the same product, we could use feeds to tie everything in together and share what we found interesting (if we felt like it).

It would be a sad day if delicious went to the wall. So in a journey of sentimentality, I’m going to review my first 10 bookmarks on delicious:

  1. Codestore Possibly the best site for Lotus Domino developers. These days very focused on Flex development, but still an excellent resource for all web development techniques
  2. Simplebits Dan Cederholm, a frontend developer from Canada and author of one of the best html books ever: Web Standards Solutions. The site has also had a very nice makeover recently.
  3. Zedzdead Its mine!…and posts are a little thin on the ground these days.
  4. Acerbia Currently inactive, but some posts available from Wayback machine. Fiction and humour from Dave Frew.
  5. A List Apart A web developer’s magazine, full of design and development best practices
  6. Adactio Jeremy Keith, a frontend developer specialising in HTML and javaScript.
  7. Antipixel An excellent blog/photo blog from Jeremy Hedley, a developer working in Japan, now rarely updated, but still some beautiful images.
  8. Bucket Fountain - Brunswick St., LiverpoolBucket Fountain A developer blog from New Zealand, who I followed because Liverpool too, has bucket fountains.
  9. B3TA Funny, irreverent and rude (some NSF)!
  10. 1976 Design Dunstan Orchard’s blog, closed to new entries in 2005, but with the most inspiring banner for many years, and documented in the Colophon.

Dear Santa, forget the Android phone, please can I have my delicious bookmarks forever.

Developing using jQuery, Firefox and Firebug

10Its becoming more important to know jQuery. If you haven’t heard of jQuery, its one of the most commonly used javascript libraries used on the web. We use it for the corporate site, Hi, and GO. If your not a frequent developer in javaScript it can be an ordeal either re-learning what you’ve forgotten (I’m at that age) or having to learn something new for the first time.

As Douglas Adams would have said..

There are some really nice tools to get you started. If you don’t already, using Firefox as your development browser means that you can take advantage of a whole bunch of development tools, so if you haven’t already fire up this post in Firefox. One of the most famous developer tools for Firefox is Firebug. If you develop, you should use Firebug, get it and install it.

You don’t even need a site with jQuery already installed. BBC famously uses its own javaScript library (Glow), not jQuery, so go to the BBC homepage and fire up FireBug (F12) if you haven’t already done so.

If you’re new to FireBug, you may want a few minutes to explore and play (you’ll feel a little bit like the Scorcerer’s Apprentice). When you’ve finished playing; On the menu bar of Firebug you should see “Console”. Click “Console” to open it. In the bottom left hand corner enter :jQuery at the >>> prompt. As the BBC doesn’t use jQuery you should get an error telling you that jQuery isn’t defined.

John Reisig, the man behind jQuery, has created a bookmarklet called jQuerify. The bookmarklet loads jQuery to sites that don’t have jQuery (but only for your browser session). To use it just drag the jQuerify link into your browser toolbar and whilst on the BBC homepage, click it.

Now when you type jQuery at the Console, you should have access to the jQuery library. Now you can start to play with the jQuery library. For example, at the console type: jQuery(‘h2’) which gets all h2 elements on the page. Clicking the returned Object item takes you into the Document Object Model, giving access to all sorts of information about those page elements.

OK, lets do something freaky. Lets get rid of all the BBC’s h2 elements. Make sure you’re on the BBC home page, jQuerify has been clicked and go back to the console in Firebug and enter: jQuery(‘h2’).hide(2000)

This will hide all of the h2 elements on the page, but will be animated over 2 seconds so you can see them slide away. Don’t panic (you only did it in your browser)! You can re-display the elements by submitting: jQuery(‘h2’).show() You could also just refresh the browser, but you would have to re-click your jQuerify bookmarklet to continue experimenting with jQuery.

Now you can experiment with the entire jQuery library to learn many of the methods, documented on the site, just by entering code in the firebug console.

Team Twitter

Twitter

Clock number 5Nearly everyone in Web Services has a Twitter account.
MikeNolanJanetHowarthstedanielstraffordtigerpiddyzedzdead

Many of the team have a Delicious account for storing all our bookmarks there’s even a team one.

We needed  a way to comunicate useful information from the team without it getting lost in the clutter of our personal posts.  We needed a team identity on Twitter.

Delicious

Most people have heard of twitter (its so mainstream, even the BBC now offer a #hashtag at the beginning of some of their programmes if you want to get in on the discussion) but if you haven’t heard of Delicious, it’s a social bookmarking site. It saves your bookmarks to a website, so as long as you have a connection to the web, you’ll have access to your bookmarks no matter what browser or device you’re working from. It’s social, because you can network with other users and push links to those who you might think would be interested them.

We push links to the ehu.webteam account that we think the team might find interesting or useful. Pushing a link is easy (in this case I’m using the Firefox plugin):

FireFox plugin

RSS

The link will be stored in the inbox of the ehu.webteam delicious account. Everything in delicious has an rss feed, including inboxes, so we can pull that feed into anything we like, even a twitter account. Pulling an rss feed into a twitter account is easy too. Just create an account at TwitterFeed.com and add your feeds:

TwitterFeed

Twitter Feed

As we also blog, so it made a lot of sense to add the feed from that too.

Finally we created our twitter account under the rocking title of @EHUWebServices. We’re using a HAL9000 image for our avatar, but we’ll change that if you have a better idea.

Christmas question: Why was the computer in 2001 a Space Odyssey called HAL?  Google Caesar cipher for a clue if you don’t want to go straight to the answer!

So now we have a twitter account for Web Services which automatically displays any worthy links spotted by team members and all of our blog posts. Follow us its good stuff!

IIS 301s

We don’t use IIS very much, but a third party application that we are integrating into the corporate website runs on IIS, and today I had a very pressing need to add a redirect to one of the default application pages to one of our corporate site pages.

I discovered 2 very good solutions:

  • Add the following code to the top of the file you wish to redirect:
    Response.Status="301 Moved Permanently"
    Response.AddHeader "Location", "http://edgehill.ac.uk/rosetheatre/whatson/"

    This is quick and nasty way to redirect a page if you don’t have admin rights to your IIS server.

  • By far the best way is, if you have access to IIS admin, is to follow the following steps:
    1. Browse the website you want to do the redirect for.
    2. In the right pane, right click on the file you want to redirect, and click “Properties”
    3. Under the “File” tab, hit the radio selection “A redirection to a URL”
    4. Put the target in the “Redirect to” textarea.
    5. Make sure “The exact URL entered above” and “A permanent redirection for this resource” are both checked

Both of these solutions worked for me.

Learning Something New Every Day

Today, I learnt about cononical linking.  Canonical linking is a way of letting search engines know that your content is accessible through multiple URLs, by publicly specifying the preferred URL of page content. This prevents Google penalising your site for having duplicate content.

I first came across the possibility of  search engines penalising sites for duplicate content when following WPDesigner’s excellent tutorial on creating WordPress Themes. Here, he recommends ways to change the content of pages which might be viewed as duplication by Google – Prevention not cure.

It wasn’t until today that Mike recommended that I “canonically link” Rose Theatre event pages because they are almost identical to the same page in the events section of the site. To do so, within the <head> tags of each Rose Theatre event page, add a link like the one below:

<link rel="canonical" href="http://www.edgehill.ac.uk/events/2010/03/09/stand-up-comedy" />

The link tag is an empty tag, and the use of the “rel” attribute defines the canonical nature of the tag. In our case we generate the link URL using symfony routing rules, URL parameters and the page slug so we don’t need to add the link for every page.

So now, when you visit Stand Up Comedy check out the source code and you’ll see the link, just like Google does.