i speak web stuff   web speak from a geek

I work a lot with jQuery, and I’m guilty of making all of these mistakes at some time. Hopefully this helps you out. Some have more performance benefits than others, but my view is if we can speed it up by even a quarter of a second, over time that saves us more time. So it’s worth it. In this post I’ll look at some best practises to speed up your selectors.

Selecting an element via an ID or Tag is ALWAYS quicker than using a class

$("#elem") //uses javascript's document.getElementByID("elem")

$("div") //uses javascript's document.getElementByTagName("div")

$(".elem") //no javascript function, so loops through the entire DOM. Obviously slower

Make use of jQuery’s Context

A less well known fact is that you can give jQuery a context to search through. This is covered very well by Brandon Aaron in his blog post. Essentially, the use of context is like this:

$("'#cont a") //is actually pretty slow. jQuery reads from right to left, so here it will find all a elements and then see if they are in the #cont element

$("a", "#cont") //when you use this, jQuery does $("#cont").find("a"). Quicker, but we can still do better.

var $context = $("#cont")[0];
$("a", $context) //read Brandon's blog post to clearly understand this. When you set the context variable and pass that, jQuery now finds the context and only looks in there. Again, Brandon's blog post covers this well so I wont go into much detail.

Save your selectors

Imagine this code:

$("elem").css("color", "red");
$("elem").find("a").addClass("link");

In this example we can save $(”elem”) to a variable and reference that, meaning jQuery only has to search for $(”elem”) once instead of twice:

var $elem = $("elem");
$elem.css("color", "red");
$elem.find("a").addClass("link");

By the way, I like to preface any variables storing the jQuery object with a dollar sign so I know they use jQuery. Coming from a PHP background, it makes more sense to me.

Nearly all Traversing Functions can take parameters

How many times have you (and I) done this, especially when you are new to jQuery?

$("elem").parent().find("p"); //in-efficient, this finds the element, then goes back up to the parent, before coming back down to the paragraph.

In essence, that code finds all paragraph siblings on the $(”elem”) element. But why go back up to the parent? The siblings() function can take an expression as well:

$("elem").siblings("p"); //no need to go up to parent level, uses 1 less method than previous code and is neater

So, whenever you need to find an element with a relationship to the current one, just think about the best ways to do it.

Save this!

I spoke about saving your selectors earlier, but many people don’t realise that $(this) is still a selector and still makes jQuery work, as it has to figure out the current element. So store $(this) as well. But remember, you can’t use the keyword this, so usually I store it as self or something along those lines - but it’s up to you.

var $self = $(this);

Add Self

Another lesser known function, introduced in 1.3 is the addSelf() function. It will take your previous selection and add it to the current one:

$("elem").addClass("red").find("strong").addClass("red"); //not good, have to add the class twice. How else can we do it?

$("elem").find("strong").addSelf().addClass("red"); //better, only addClass once. the addSelf takes the previous selection $("elem") and adds it to the most recent one find("strong").

CSS Shortcuts is a bundle expansion for free text expander program Texter. Upon entering the below codes, hit the tab button and the code will be replaced with the actual css code. This saves time, keystrokes, and effort and is an easy way to quicken your css coding. Once downloaded, open up texter and go Bundles>>Import and find the downloaded file.

DOWNLOAD

You need to right click the link, click save as, and save it as css_shortcuts.texter

This list and the file will be updated regularly - keep up to date and follow me on twitter (@Jack_Franklin).

jQuote is a plugin written by myself which allows for semantic blockquotes created on the fly with just one line of jQuery code for you to write - the hard work is all done for you!

Some of the features are:

• No duplicate content. If javascript is enabled, jQuote goes ahead and creates the blockquote.
• If javascript is not enabled, then obviously jQuote does not run. if jQuote does not run, nothing gets created. Meaning those with javascript disabled don’t see duplicated text - which is what would happen if you did the usual method of copying + pasting text to create quotes.
• You can add extras as well - currently jQuote provides an easy option to add a person’s name to the quote - for example if quoting a famous person it is always good to credit them - jQuote lets you do this easy peasy!
• Customise ALL of the look. Some plugins limit what you can change in the look. All jQuote does is create the <blockquote> and give it a class - you then can change whatever you want via CSS
• You can even change the actual class itself if you want to!
• If you do add a source that is also wrapped in it’s own class - which you can change - so you can style that differently

Download
Here it is - jQuote V1 Download
So how do I use it?
Make sure you have included jQuery 1.2.6 or higher AND jquery.jquote.js. NOTE: You must include jQuery BEFORE jQuote.

Firstly, the quote itself is wrapped in a span tag like so:

<p>some text here...<span class="quote" title="Mr I P Sum">quote here</span>some more text here...</p>

Then you run the jQuery code like so, switching “p” for your chosen element.

 $("p").jquote(); 

And finally I’ve used some CSS and a small quotation mark image for the final effect:

body {
font-family: Trebuchet Ms;
}
.source {
display: block;
font-weight: bold;

}
.jquote {
float: left;
font-style: italic;
font-size: 30px;
font-family: Georgia;
background-image: url(speechmark_big.gif);
background-repeat: no-repeat;
padding: 0 0 0 55px;

}

.jquote is the entire blockquote, and .source is the text “Mr I P Sum”.

What jQuote produces:

<blockquote class="jquote">Your Quote Here<span class="source">Source Here<span><blockquote>

What options do I have?

$("p").jquote({
bquoteclass: "jquote", //The class of the blockquote element.
srcclass: "source" //The class of the span element containing the source.
});

Usage
Please link people to this page (www.jackfranklin.co.uk/jquote/index.html) and not to the download itself - that way people have to read this so should avoid running into problems trying to use it. If you use it a link back to me is nice but not required at all. Any problems please email me - jack [at] jackfranklin.co.uk.

Here are some tips for you:

1. When there is a big queue, and you drop your money on the floor, and giggle like a little girl (this applies to men, teenagers, and little girls) it’s really not very funny.
2. It’s hilarious when I give you what you ask for and then you suddenly realise “oh shit, I actually need my wallet/purse” and spend 10 minutes finding it.
3. When you change what you want 5 times in about 30 seconds it’s a bloody pain in the arse.
4. Would it really hurt to say please and thanks? Just once? Pretty please? (See what I did there?)
5. Don’t say “I want one of (insert item here) and then when I get back from getting it say “I want another”. Because then I have to walk over there again. It’s 5 seconds, I give you that, but if 20 people do it, that’s 100 seconds wasted. Then another 20 people do it, it’s 200 seconds. It adds up. Not that most of my customers can add up I think.
6. Asking for a discount is the most original hilarious most funniest joke ever. NOOOOOOOOOOOT.
7. Asking me the price of everything, when it’s on the board besides you, which you just spent 5 minutes looking at whilst in the queue is fucking irritating.
8. When something is crossed out in big black bold pen, or has a “Sold Out” sticker on it. It’s sold out. So don’t ask for it.
9. Don’t argue the price of an item. Might sound arrogant, but I’ve worked here for 3 years. I know my shizzle biatch.
10. When I’m standing right next to a fridge full of various drinks, don’t ask me what drinks we sell.

Thanks!

Note - this is a joke post, but all the things I mention the customers doing is 100% true. Every one of these things has happened.

If you know me, you’ll know that I would love to have a Macbook, but unfortunately financial costs mean it’s not possible yet. It will be though. I’m making bloody well sure of that. Anyway, these Mac people go on and on about an App called Quicksilver which is a quick launcher app thingy. I’m not sure of the specifics, but the way I see it, you hit a key combination, type the name of the app you want to run, and Quicksilver does the rest. It’s highly recommended and I can’t remember a review of programs for Mac not containing it or a similar program.

So, I hunted high, wide and far (using Google, not bing) for an equivalent application for Windows. And I think I found it. It’s called Colibri.

Don’t let the rather bland home page put you off, it’s a great app and very small. Once downloaded, follow the installer and from there the fun begins. You will notice a small icon in your taskbar that looks like the bird icon above. Now, you need to press Control + Space to access Colibri. You’ll see something like this pop up in the middle of your screen, on top of everything else (in my case, on top of this very post I was writing):

Once that pops up, you just need to type in the application name. Usually the first 3 or 4 letters are enough. For example, I typed “phot” and immediately Photoshop comes up. If the application Colibri picks is not the right one, hit the down arrow and you will see a list of other applications that match your search. Highlight the correct one and press enter. Your app is launched!

One gripe I had is that all my old programs had left shortcuts to themselves, even after uninstalling them, and they kept coming up in Colibri. I decided to manually delete them, by going to C:\Program Data and doing a search for *.lnk. This will find all the shortcuts to programs, and from there you can go through and delete any shortcuts to uninstalled programs.

Colibri may seem a waste of time at first, but once you get used to it, it saves a lot of time. If I’m typing and need an app, I don’t need to move my hands to the mouse, I can launch an app very quickly, and it’s proven that keyboard shortcuts are more efficient than moving the mouse. So give it a go!

Yay! New feature! Every Sunday I’ll pick my top 10 links from my Delicious bookmarks (I bookmark at least 10 articles/tutorials each day so that’s 70 to choose from) from the past week on a certain subject. This week, it’s Illustrator tutorials. Please be aware these might not be real recent tutorials, but just ones I’ve bookmarked in the past 7 days.

Please notice the quite brilliant name - “Feeder Reader” as in read stuff from my feed, but also “feed the reader”. Rather hilarious I hope you agree.

How to Create a Cute Hippo Character in Illustrator

Ilustrator’s Blend Tool - A Comprehensive Guide

Creating a Coat of Arms in Illustrator

Creating a Clean Website Design with Illustrator

Beginner Tutorial: Create a Vector RSS Icon in Illustrator

50 Illustrator Tutorials you MUST see

Create a Vector Art Twitter Bird Icon

10 Tips for Effective Icon Design

How to Create an Alarm Clock Icon

Learn Illustrator in 30 Days

I magaed to grab a super interview with Paddy Donnelly, who has recently been conducting a series of interviews “How do you Twitter?” and getting some pretty impressive people to interview. Today I give him a touch of his own medicine and ask Paddy loads of things about Twitter.

Firstly thanks Paddy for agreeing to do the interview, would you mind briefly introducing yourself?

I’m an Irish web designer, blogger, interviewer and illustrator living in Belgium who loves peanuts and hates predictability. I’m working for Nascom [http://nascom.be] and I blog at I am Paddy [http://blog.iampaddy.com].  You can follow me on Twitter [http://twitter.com/paddydonnelly] to keep up to date on my latest interviews, projects, interesting links or my frustration with the Internet [http://twitter.com/paddydonnelly/status/1933841831].

Twitter has really taken off more than anyone could have ever imagined - but will it still be the craze in 5 years time?

I really love Twitter but 5 years is a lifetime on the Internet.  At the rate internet companies are coming and going, it’s really hard to guarantee any site out there will still be here in 5 years.  I really hope it will be but I have my doubts.

Twitter can be both a help and a hindrance - it’s something so easy to waste hours away on, How do you make sure you avoid this and how do yoiu manage your “twitter time”?

By using Twitter clients you can easily work away while keeping updated with the Twitter world.  I’d recommend using Tweetie [http://www.atebits.com/tweetie-mac/], it’s the best designed Twitter client out there and isn’t over invasive like TweetDeck [http://tweetdeck.com]. I must admit there is a real danger of ‘time suck’ and I’ve fallen prey to it many times.  Sometimes you just get caught up in the conversation and the next thing you know it’s 4am! I don’t think dedicating an hour a day to ‘Twitter-time’ is useful though.  The Internet moves so fast and you’ll be left behind if you don’t keep constantly updated. It’s like watching the news only 1 hour a month and hoping to keep up to date.

Speaking of the news, I never watch it any more. Twitter’s so much faster and you can exclusively follow topics which you are actively interested in.

I published an article on this blog (http://www.ispeakwebstuff.co.uk/2009/05/why-twitter-guides-annoy-the-hell-out-of-me/) entitled “Why Twitter Guides annoy the hell out of me”. What are your thoughts on the whole “how to twitter” guides?

I posted all my thoughts on this follower obsessed culture that has erupted with people trying to ‘game’ Twitter: http://blog.iampaddy.com/2009/03/25/not-another-10-tips-to-get-more-twitter-followers-post/

On a similar note, do you think Twitter has changed since it first hit the big time? With more and more people just posting resources and most guides telling people that no one cares about their breakfast?

I think Twitter still has the freedom aspect.  That’s what makes it work.  Some people are using it to share links while others are using it to network.  Then there are the people who are sharing their bowel movements 24/7. We can choose who we want to follow and who we don’t so anyone can do whatever they want! If it stays like this then it shouldn’t change although I must admit I’m really tired of the Twitter celebrities. Maybe that’s just my ‘we were here when Twitter was cool’ reflex.

Do you think the world wide exposure twitter is now getting thanks to celebrities such as Aston Kucher, Steven Fry is benefiting twitter or do you think it could ultimately ruin it?

I do think it’s not as cool anymore.  I preferred it when it was mainly computer geeks and innovators.  The global conversation was much richer, but now it’s been diluted by Ashton Kutcher and the likes.  I think it’s popularity will be it’s downfall, if anything, as all the innovators will find the next cool thing in a couple of years time and the general users will get bored.Stephen Fry is good though, I’ve been following him from the start.

And finally, if you had to pick 5 people to follow on twitter, who would it be and why?

Hmm, tough one. I’d pick 5 people who aren’t on Twitter (yet) for their unique sense of humour and/or outlook on life.

Eddie Izzard, Ricky Gervais, Karl Pilkington, Alan Partridge and John Locke from Lost.

From Jack: This is a guest post from my very good friend Christopher Smith, who, in my opinion is a very good designer and also seems to know his stuff when it comes to Fireworks. I’m much more of a Photoshop kid and often this leads to heated debates (not too heated though!) so Chris set out to show me how useful Fireworks is and create some fancy boxes really quickly. Hopefully Chris will be doing more and more Fw stuff as a guest poster here, so if you want to know something else, leave a comment!

Fireworks was designed as a web graphics program, and that is the area it really shows how good it is.

People argue over Photoshop and Fireworks, but I’m a Fireworks man, and I’m going to show you how to design some quite nice little buttons like so:

Read the rest of this entry »

So I was writing some CSS for a future tutorial and I realised that actually I don’t think the structure of CSS is as good as it can be. Here’s what I think:

Note - the title is taken from Johnathan Swift’s “A Modest Proposal”, in which he suggests a solution to the poverty is to eat the children.

This is the kind of thing I was writing today:

#myid p {...}
#myid h2 {...}
#myid:hover p {...}
#myid a.myclass {...}

The one thing you notice is the repitition. Taking a slightly object orientated approach, surely this would save typing and be, in my opinion, super neat:

#myid {declarations for the #myid} {
p {...}
h2 {...}
:hover {...} {
p {...}
}
}

You’re going to struggled to see what’s going on, but basically you wrap all the #myid styles, in a #myid container. So you have:

#myid {declarations for #myid} { //note this extra curly brace
p {declarations for all p inside #myid}
}

This way you only have to type #myid once whereas currently it’s a few more times. I believe I’m not the first by any means to touch on this matter, but it would be nice to know what people think. It would mean a huge overhall, my suggestion would be to create CSS4 [Transitional], in which both the current way and this way would work, and a CSS4 [Strict] in which only the new approach would work. But then again, some people might read this and think “what a load of shit”, why would anyone want to do that?

And, just a bit of self promotion, I had an article posted on TheWebSqueeze.com debating if you should learn Javascript or just stick with the libraries such as jQuery.

So it’s too late to do New Year’s resolutions and all that stuff, but as I wanted to write down some goals I thought I could do it now, 1 week since I turned 17. This is what I want to achieve before my 18th birthday:

1. Get a Post on NETTUTS
   I’m a huge fan of nettuts.com as I’m sure many people are, and I really want to get a tutorial posted on there in the next year, not just for the money but for the experience and the exposure.
2. Keep this blog running
   I really want to keep posting without huge 2 month gaps in between. If I can do that hopefully more people might start reading and that’s my major aim. But it’s nice to blog here and I will keep going.
3. Keep learnitscreencasts.net running
   I used to do a tutorial every day but realised that by doing so the quality was not as good. These days, although updates are more sporadic, I think they are better tutorials. I need to keep doing them and hopefully get a few more viewers.
4. Hit 1000+ followers
   My follower count is going up by a couple each day at the moment usually, so if you are following me, thanks! If not, my account is @Jack_Franklin.
5. Pass my driving test
   I’ve only had lessons with dad but I can’t see why I can’t pass my test within a year, infact by the end of this calendar year I would like to be road legal! The challenge then being to afford a car and the insurance!
6. Freelance
   I would like to do a couple of small projects for local businesses needing a website just to see if it’s something I enjoy and to top up the piggy bank.
7. University
   I would like to have secured my place at university doing a Maths and Computing degree (or something similar), with my prefence being Bristol Uni or possibly Bath.

So, what are your goals? Let me know what you think!