jQuery ajax loading widget

by leon on October 14, 2009

Jquery

Jquery

Even though i’ve been using jQuery to make web apps for quite a while, this simple function passed me by until quite recently.

When loading data asynchronously, the end user doesn’t get any feedback that anything is actually happening (unless you display a loading gif or something similar). This can often lead to the user clicking repeatedly and risking things fucking up. I usually would include an animated loading gif next to the call to action, initially hidden by CSS, and then using jQuery would display it when the call to action was clicked. After the response was received I would set the gif back to hidden. This worked perfectly fine, but would result in numerous gifs over the page (while still small, still take time to load).

jQuery actually has a built in function for detecting when an Ajax call is started and when it ends. With this in mind it’s really easy to invoke some action when this happens. In around six lines of jQuery, a few lines of HTML and CSS we can make a pretty nifty slide down loading message (a bit similar to Google).

I suppose it would help if you knew what the hell I was on about, so here is a little video of the script in action (the web app is ReviewSpace – a really clever file sharing and collaboration tool that i’m working on) (it’s a bit quick but you should be able to make out the yellow loading box slide down from the top of the screen)

ReviewSpace ajax loader demo from Gas Street Works on Vimeo.


So now you know what is happening, you probably want to know how to do it.

The ajaxStart() function is called when jQuery detects an ajax call. By binding this to the whole document, it gets triggered after any ajax call in the page. When this is called we slideDown a div containing our loading text.

When the ajaxEnd() function is triggered, we slideUp the same div, in effect showing and then hiding our loading text. Simples!

jQuery

$(document).ajaxStart(function() {

$('#loading_display_holder').slideDown("fast");

});


$(document).ajaxStop(function() {

$('#loading_display_holder').slideUp("fast");

});

$(document).ajaxStart(function() {
$('#loading_display_holder').slideDown("fast");
});
$(document).ajaxStop(function() {
$('#loading_display_holder').slideUp("fast");
});

HTML

<div id="loading_display_holder">

<div id="loading_display">

loading...

</div>

</div>

CSS

#loading_display_holder{

position: fixed;

display: none;

z-index: 400;

width: 100%;

top: 0px;

right: 0px;

}


#loading_display{

position: relative;

margin: 0 auto 0 auto;

padding: 20px;

font-size: 16px;

width: 200px;

color: #000000;

text-align: center;

background-color: #FFFACD;

border: 1px solid #FFEC8B;

-moz-border-radius-bottomright: 5px;

-moz-border-radius-bottomleft: 5px;

-webkit-border-bottom-left-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

}

Curry Goat Recipe

by leon on October 3, 2009

Ok, so this post isn’t anything to do with iPhones or web development but it still belongs on this blog.

I decided to share my simple Curry Goat recipe with you all. In my family Curry Goat is a traditional dish served at gatherings and parties. A party is not a party unless Curry Goat is involved!

Curry Goat can be served with plain white rice or the more traditional rice and peas

First of all the pronunciation: Curry Goat, not curried goat or goat curry but curry goat. Also try and extenuate the a in goat, almost like goaawt. It may not sound as if it makes much sense, but that’s just the way it is said! Second – you don’t need to use goat (it can be quite hard to get hold of, but Halal butchers are normally a good starting point). Mutton, or older lamb works just fine. Cheap cuts of meat are also fine as are bones (this adds to the flavour and texture). The trick to this dish is too cook is slowly to avoid making the meat too tough.

As with any cooking, there is no right or wrong answer – this is merely a guide and other people may use other ingredients or methods. Basically if it works and tastes good, then its the right way for you!

The end result should resemble a stew, with the meat being tender and soft.

Ingredients

As with most cooking the measurements are not an exact science, but instead a recomendation – add more or less to suit your tastes! The following will be sufficient for four large servings (any left overs can be frozen and taste even better when re-heated as the flavours have had time to develop).

  • 1.5 kg goat or mutton diced (roughly inch sized)
  • 1 lemon (or lemon juice)
  • 1 large onion, sliced
  • 4 cloves of garlic, finely chopped or crushed (garlic puree works great, use about 1 teaspoon)
  • Salt
  • Black pepper
  • Sugar
  • Tomato puree
  • Ginger (whole)
  • Sprig of  thyme (leave whole)
  • Sprig of rosemary (leave whole)
  • 1 and a half finely chopped Scotch bonnet peppers (if you can’t use these, try Hot Pepper Sauce)
  • 2 tablespoon vegetable oil (Olive oil will taint the flavour of the meat)
  • 2 tablespoons mild/hot curry powder (this is a good one from TescoTropical Sun Hot Curry powder)
  • Rice to serve

Preparation

It’s vital to properly clean and prepare the meat before cooking it.

  1. In a large mixing bowl add the meat and rinse with tepid water (too hot and the meat will start to cook).
  2. Let the excess water drain off the meat and squeeze the lemon over it. Mix together with your hands and leave for around five minutes (the acid in the lemon will help to soften the meat).
  3. Rinse the meat again and then add the onion, garlic, Scotch Bonnet pepper, black pepper, salt, 1 tablespoon curry powder, thyme, rosemary and a good drizzle of oil. Roughly chop 3 or 4 pieces of ginger and add this. (Leave the pieces quite big so that it is easier to fish out once cooked). Mix together (using gloves unless you have hands that can withstand Scotch Bonnet peppers). Cover the meat and leave to marinate in a fridge for at least two hours.

Cooking

I always find that cooking the meat slowly over a medium heat gives the best results. Cook it on a high heat and the meat will shrink too quickly and become tough. In terms of cooking method a pressure cooker, slow cooker or simply a big pot all work well. The trick with all three methods is to keep turning the meat to avoid it drying out.

  1. Remove the meat from the fridge and let it rest at room temperature for at least 30 minutes (this is the case for all red meats. Cook it chilled and the rapid change in temperature will cause the meat to shrink quickly and therefore become tough).
  2. In the pot over  a medium heat add about a table spoon of oil and about a tea spoon of sugar along with a clove of garlic.
  3. When the sugar has fully melted add the meat to the pot and give it a good stir.
  4. Turn the heat down to low heat and cook for about another 20 minutes occasionally stiring as not to let the meat stick to the pot or dry out.
  5. Add about half a cup of water to the meat and slightly turn the heat up and simmer the meat for a further hour or until tender.
  6. Add the remaining curry powder to flavour to your tastes.
  7. Periodically add more water to the meat in 1/4 cup amounts if needed (don’t add the water directly on top of the meat and it will make the meat tough). The consistency we are looking for is that of a stew.
  8. When the meat is tender add about 1 table spoon of tomato puree to thicken the sauce.
  9. Fish out the sprigs of rosemary and thyme and serve with boiled white rice or rice and peas (not green peas but black eyed beans or gungo beans).

CodeIgniter iPhone Push Notifications

by leon on July 31, 2009

200x200

I have written a wrapper in CodeIgniter for the Prowl PHP API. It allows you to easily send Push Notifications to an iPhone by calling a simple function.

Prowl is a Growl client for the iPhone. Notifications from your Mac or Windows computer (see the FAQ) can be sent to your iPhone over push, with a full range of customization and grace you expect. Prowl also features an extensive API, which allows your scripts to integrate beautifully. The API has a PHP version that allows you to integrate this with your web apps.

There are two functions and they behave slightly differently;

sendPushNotificationSingle($pushEvent, $pushDescription,$pushPriority);

sendPushNotificationMultiple($pushEvent, $pushDescription,$pushPriority,$deviceKey)

The Single function is designed to use a single device(api) key so therefore will only send to one device. The function picks up the device api from the config file. I use this when I want to be instantly alerted that something has happened on one of my sites.

The Multiple function takes the device key via a parameter in the function call. This can be useful when used in a loop (the keys can be pulled from a database).

The various parameters sent to the functions are outlined below. The values within the square brackets indicate the length of the value:

add (POST)

Add a notification for a particular user.

Parameters:

  • apikey [40]

    The user’s API key. A 40-byte hexadecimal string.

  • providerkey [40] (Optional)

    Your provider API key. Only necessary if you have been whitelisted (see API limits).

  • priority

    An integer value ranging [-2, 2]: Very Low, Moderate, Normal, High, Emergency.

  • application [256]

    The name of your application or the application generating the event.

  • event [1024]

    The name of the event or subject of the event.

  • description [10000]

    A description of the event, generally terse.

One of event or description must be provided. Priority defaults to 0 if not specified.

verify (GET)

Verify an API key is valid.

Parameters:

  • apikey [40]

    The user’s API key. A 40-byte hexadecimal string.

  • providerkey [40] (Optional)

    Your provider API key. Only necessary if you have been whitelisted (see API limits).

    Download

    The download contains a library which is the existing PHP version of the API, a helper which contains the two functions that I have created and a config file that contains various settings. Have a play around with the scripts and let me know how you find them.

    I’m not going to go into any detail about how to set up CodeIgniter – but if you are stuck, add a comment or view this brilliant tutorial.

    Download

I’m sorry flcodr

by leon on July 15, 2009

A bit more than a year ago I launched flcodr. It was designed to be a way for me to learn PHP and also organise my actionscript snippets. I decided to open this up to the world so that people could share.

The site is by no means perfect and it was my plan to rewrite the vast majority of it (which I have started).

I have been tied up with other projects and moving house since then and flcodr has taken a bit of a back seat, but now that I have more time I will be able to make flcodr better and into the kind of site that you all will want to keep using, hold tight as it will be worth it!!

Essential tools for Web Dev/Design on a Mac

by leon on June 7, 2009

It’s no suprise – i’m a BIG Apple fan. I own an iPhone, iMac, MacBook and Apple TV. It’s not just the design and aesthetics that I love but the whole UI and user experience aswell as the great software that gets attracted to the platform.

Sure, there are other products that work or have the same features as Apple do – but they don’t seem to be able to pull it off in the same way.

So enough of the usual Apple fanboy babble, onto this post which is about three essential tools for anyone doing any Web Development on a Mac. I have included a local server, code editor and database management tool. I’m not going to go too in depth with each one – i’ll leave that for you to go and discover, but trust me they are all worth having on your system.

Mamp – local server

Coda – code editor

Sequel Pro – MySQL database manager

Slammer – grid system overlay tool

Balsamiq Mockups – rapid wireframing

Fireworks/Photoshop – design

Little Snapper – screenshot/annotation tool

Tweetie – to subscribe to brilliant resources

Spotify – you need to listen to tunes while you work right?

Really simple jQuery alerts

by leon on June 6, 2009

picture-3

Over the last few month’s I have been using jQuery more and more in my web projects to do everything from style forms to adding interactivty to lists via drag and drop. In this post I will share with you my simple jQuery alert plugin – altertr.

About

Alertr is a simple jQuery alert plugin.

Use it to give feedback to your users when they have updated a page for example.

Features

There are three types of alert:

  • Success
  • Error
  • Information

The alert can fade away after a specified amount of time

The alert can be clicked to fade away

Find out more, view a demo and download from here.

I’ll see you there!

by leon on May 30, 2009

At Flash Camp Birmingham that is:

Flash Camp Birmingham

I don’t really need to say more than that I don’t think. It promises to be a great day out and hopefully i’ll have a new version of flCodr up for then!!

Use your iPhone as a wireless speaker

by leon on April 20, 2009

picture-2

This post will show you how to use your iPhone as a wireless speaker so that you can stream your iTunes library (or any application) to your iPhone.

(This will only work within Wi-Fi range of your computer running iTunes)

This set is up uses the following:

To get this to work you will need to Jailbreak your device, if you are scared of doing so – don’t be. There are plenty of posts around to help you. The reason that you need to Jailbreak is so that you can install Backgrounder – a nifty little app that allows you to run applications in the background (i.e after you have pressed the home button). We will use this to run Airfoil (an app that allows you to stream audio from a Mac/PC to your iPhone) in the background is so that we can control iTunes on the host machine by using the Remote app.

In order to get it all working simply follow these steps:

  1. On your Mac install iTunes and make sure it is the latest version.
  2. Ensure that your Mac is connected via Wi-Fi or your router has Wi-Fi or there is a Wi-Fi device on your network. Also make sure that your Wi-Fi is activated on your iPhone and is on the same network.
  3. Install the Remote app on your iPhone and get it connected to iTunes on your Mac.
  4. Install Airfoil on your Mac and set the audio source as iTunes
  5. picture-3

  6. Install Airfoil Speaker on your iPhone
  7. img_0021

  8. Download the Backgrounder app via Cydia and in the Backgrounder preferences set Airfoil to automatically run.img_0024
  9. Open up Airfoil Speaker on your iPhone and connect to Airfoil on your Mac (this should be automatic if both devices are on the same Wi-Fi network).img_0023
  10. Press the home button (if Backgrounder is enabled then it will still be running)
  11. Open the Remote app on your iPhone and start playing some musicimg_0025
  12. With any luck, you will be able to control your Mac from your iPhone and have the music streamed back to you via Airfoil.
  13. Walk around your house with a smug look on your face as you marvel at how brilliant the iPhone is – again!!

WordPress as the next Social Networking platform?

by leon on April 9, 2009

Question : Can WordPress be used as the next social networking platform?

Answer: Yes.

OK, maybe you want a bit more detail and at least some proof of my exorbitant claims. That proof will be in the form of a brand new flCodr.com – a site designed to share and submit snippets of actionscript code.

Using nothing more than WordPress, off the shelf plugins and a bit of theme hacking I will show you how to create your own social site using WordPress.

About a year ago I released flCodr to the world. The idea was pretty simple; as a Flash developer I was always writing and re-using snippets of code. Quite often these snippets would be scribbled onto scraps of paper or into text files. Either way, I had no method of organising or easily retrieving the said snippets. As a solution I set up flCodr as a way to store, tag and access my library of snippets. This was a web based option and meant that at home or work I had access to my code. I even went a step further and made an extension that allowed the user to get the snippets directly from with Flash.

The idea and concept were great, however the platform that I built it on wasn’t. I had created the site in a few weekends and this started to show as more and more users began using the site. One main area of concern was with user registration – rather than creating my own, I hacked an off the shelf script to work (or not in this case).

I had a desire to improve flCodr and was about to re-write it using Code Igniter. As I began to plan the new structure out something hit me, and it hit me hard – why not use WordPress as the core of my new flCodr site. Everything from the structure of the old site translated perfectly – each snippet could be a post which would have tags, be assigned to a category and contain other meta data.

User registration and log-in could also be handled by WordPress and the huge array of plugins out there could easily provide the rest of the functionality.

I will be writing more posts in the coming weeks documenting the plugins and tools that I will use to create the site.

How I find new music using my iPhone

by leon on March 4, 2009

Over the weekend I updated my iTunes library and I now have over 23,482 songs. Due to my iPhone having only 8GB of storage space there was no way that I could have all that music with me all of the time, but with a few apps I don’t need to physically carry my music with me. The iPhone has opened up a host of ways to find, share and play music while on the move. This post is about some of the tools that I use to achieve musical bliss.

Shoutcast

This is a free radio app that features thousands of internet streams. Its works great over wi-fi and 3G and features a good selection of niche stations. It allows you to add favourite stations and also search. At present I am listening to Dubstep.fm and Digitally Imported.fm. The quality of the streams is pretty good and the only drops in connection I have had are due to having a weak 3G signal.

Last.fm

This app needs little introduction. A great way to listen to over five million songs, share music via your phone contacts; purchase tracks and albums from the iTunes Music Store, and much, much more. By using the recommendation feature its a brilliant way to discover new artists. you can even save tracks you like to new playlists on your phone and then access this from the Last.fm app on your Mac or PC.

Noteworthy

NoteWorthy allows you to search through Last.fm’s powerfully awesome database of artists with ease and then mark albums and tracks that you want to remember. Select information like biographies and similar artists to download as well. This is great when listening to the Shoutcast as a way to remember tracks as the DJ announces them.

Simplify

Enjoy songs from home while at work or from any WiFi location. Explore friends’ music while they are online. This app is great as I can stream any of my 20,000+ tracks to my iPhone.

You may be thinking one thing – the above apps are great but what if I want to do something else with my iPhone while using these apps. At present Apple doesn’t allow 3rd party apps to run in the background. This means for example that you can’t listen to Shoutcast and read email or browse Safari at the same time. The answer to this is a tool called Backgrounder. You will need to Jailbreak you’re iPhone to get it, but this is a simple process now. Read here for how to do it. Don’t blame me if you mess things up though!

With Backgrounder you can allow certain apps to run all of the time. This is great as I don’t get interupted from Last.fm each time an SMS comes through. Be careful not to allow too many apps to run as your iPhone will become unstable due to low memory. I have tested all of the above apps with Backgrounder for the last week now without any problems.

Shazam is also another great tool to find music. Create and share music moments and stories. With Shazam you can identify music tracks simply by holding your phone near to the music source, buy them, and share the tags with friends. You can also learn more about artists; keep and grow your music collection and personalise your tags.