In a nutshell a load of CSS modules had been concatenated into one file leading to quite a large number of selectors being used. He found that after a certain point (4096 selectors) IE would ignore everything after it. I had never heard of this before and from reading some comments I got on Twitter a few other folk hadn’t either…

My boss found this online which would hint to it being this being true - http://msdn.microsoft.com/en-us/library/aa358796%28VS.85%29.aspx but this being a DOM method I wanted to make sure the same went for the CSS parser.

After a chat with Stuart Langridge (who provided me with a useful python script to make the file) I have a use case and confirm this bug does indeed exist in IE - even in IE8.

Scroll down to the bottom of this iFrame (make sure you’re using IE) and you’ll see the final 5 ‘OK’s are in the default of black and not red as they should be styled!If you’re not a fan of iFrames it’s also availiable as an external link - IE 4096 selector usecase.

In additional news IE will also bork when presented with more than 32 @import statements (http://www.agum.com/web/2008/03/11/internet-explorer-issue-maximum-of-32-css-import/) so in many ways if you have a shed load of CSS you’re damned if you do and damned if you don’t!

Therefore I have no slides, no idea for an interesting talk and have decided that instead of me talking about stuff that I deem interesting I am going to throw those kind of choices out to you guys instead. In a blatant rip off of talks hosted by Norm! in recent BarCamps I will be taking questions from the audience (assuming I get one) on anything and everything (with hopefully amusing results).

If you didn’t manage to get a ticket but would still like me to answer your questions (I’m hoping that the talks may be recorded or videoed in some way) then please leave questions in the comments below (indeed this could be a good place for anyone at BarCamp or not to leave me their contributions…

Lets see how this one pans out…..

Opposed to hiding all links that you don’t want to be shown (this seems to be done in most example I found using inline styles of display: none) it adds a class to each of the items you want to be initially shown. Then to perform the show/hide a class on the containing list is toggled and CSS performs all the rest of the magic. So showing 100 new list items is all done via 1 single class change and not through adding inline styles to 100 list items; this just seems far more efficient to me.

You need do a little bit of work to get it working once you’ve included the JS on your page and instantiated it but nothing more than adding the following CSS to your stylesheet (you’ll of course have to change class names to suit your site)

/* note that the class 'truncate' gets added to the parent element through code */
.js .truncated li { display: none; }
.js .truncated li.displayed { display: list-item; }

You can then call the plug-in like so:

$('.big_list').truncate();

Written using the jQuery plug-in development pattern it’s fully extendable so it you want to show more than the default number of list items you can dom equally if you want to provide additional text alongside the ’show all’ link you can do by providing over-rides in the form of a option object like so:

$('.big_list').truncate({
   init_shown: 20,
   displayed_class: 'show_me',
   link_suffix: 'winful events'
});

Chaining is also supported so you can call additional jQuery methods following it.

Currently only list elements (ordered and un-ordered lists) are supported (as I didn’t want to over-engineer things as for the use cases I had it didn’t need to do anything else) and if you try and call it on anything else if breaks out and returns itself so any potential chain isn’t broken. The same occurs when you try to use it on something with less list items than the initial value to show.

This is clearly not the best plug-in ever written but I think it’s nice and I like the fact that it goes around things in a different way to most other solutions I have seen. There are probably tons of improvements that could be made (and if you do please let me know so I can update my code here). I also love the way that jQuery allows for these kinda things to be written, and that fact that they are so damn easy to create.

Here is the expando plug-in to download, please use, change, distribute as you wish; just if you do use it let me know and don’t change the attribution to say you did it :>

Since starting my new job (and getting a bit of a pay increase) I found that I could give myself a bit of extra spends each week. A few more pints down the pub, an extra side order with a meal out or an excursion somewhere could now all be mine. But as it happens I didn’t actually do or need any of this so the money started burning a whole in my wallet and was spent on crappy lunch meals that I don’t really need; money spending fail if you would.

The plan - to not take money out of the bank and use my cards for my planned spending. Will my urges mean that I buy crap on card? I really hope not but we will see. Equally has the price of living just increased and I actually needed that extra money??

Who knows, but I’ll be interested to see.

Thanks for reading a fairly pointless and uninteresting post (assuming anyone actually has).

The main point I was trying to get across is that the web contains a lot of great content; but it also contains a lot of shit. To ensure that the good stuff gets the credit and exposure that it deserves and likewise so that the bad stuff gets highlighted as bad I believe that we must all comment on the bad that we see so that less experienced people don’t just blindly copy, paste and use it in their projects. This is even more of a necessity if the article is being promoted as a good one to read either through a good Google ranking or being linked to from a large magazine site or mailing list.

I outlined a number of rules that I think should be followed when making comments:

1. outlined and explain best practices that aren’t outlined in the article; if required link to a blog post supporting your points. If we can send people from a bad article to a good one I see this as a win
2. be nice!
3. no personal attacks
4. be constructive (which is basically a repeat of rule number 1)
5. focus on getting the basics right first - we need to ensure people are learning this correctly
6. don’t target and abuse source code - there may be reasons that it sucks balls (generally WYSISWYG)

Along with this I also included a number of examples of the kind of articles that I was “targeting”. These can be found at delicious under the tag “article-fail” and I’ll soon be including these on the homepage here. If you want to follow my findings you can subscribe to the article-fail RSS feed for instant updates! It currently contains things such as CSS techniques that don’t allow for text resizing and a JS technique that inserts a table into the mark-up because writing tables into your mark-up is stupid!

I hope that people start up with my “movement for web quality” - it should be a fairly painless process but the good that it can lead to should be massive (like in “jungle is massive”). It’d be great to think that people can start using the web as a legitimate learning tool again and not learn bad practice (the stuff we learn is generally the stuff that stays with us for life).

I have other plans for how this can be improved but that’s another post…

So with no further or do here are a couple of CSS properties you may never have thought of using due to IE6 compatibility problems….

:first-letter

Do you think that creating book style initial caps on your paragraphs? Well :first-letter is the thing for you! It’s a doddle to add this style to any paragraph, div, span - anything containing text!

p {
  font-weight: bold;
  font-size: 85%;
}
p:first-letter {
  font-style: italic;
  color: red;
  font-size: 100%;
}

:first-line

Very similar to :first-letter (thought probably not as useful) :first-line will render the first line of a block element different to the rest. Expand and contract the size of the element and the first-line changes to fit the text - can lead to style inconsistencies if you want specific words styled differently mind…

p {
  font-size: 85%;
}
p:first-line {
  font-size: 100%;
  font-weight: bold;
}

So there you go - if you were unaware of these properties here are a couple more strings to add to your CSS bow - and they really do work in IE6 (I promise :>)

After the general (and totally) unrequired hoo-hah from people regarding the ‘keynote’ I hoped that people would come down, enjoy the offices for what it is (a totally awesome space), stay the full weekend, do some good presentations and make it yet another great barcamp and I was pleased on most of these accounts though the fact that there were over 50 no shows really pissed me off - these were people who didn’t even tell eBay they weren’t coming - I think for the next barcamp something should be done to ensure this doesn’t happen (I have ideas) on punishments for the naughty attendees. I was also a bit annoyed with the drop out rate after day two (I always talk on day two so they missed out) but we can’t stop this from happening I guess.

While I know people like hearing about non-tech stuff at barcamps I like hearing interesting work related things so was happy to attend talks like Accessible JavaScript with Frameworks from Dirk and Maintainable CSSCSS Systems from Natalie Downe. I equally couldn’t resist going to ew collegue Tomasz’s talk on “The Ancient Art of Stabbing People” - which was one of the most fantastically bizarre talks ever held at a barcamp I would think.

As I’ve said in my opening slides my talk notes are coming soon but I didn’t want to wait ages to get up my write up of a really well run event - so big congratulations to the eBay team of Dees, Johnny and Cian. Looking forward to barcamplondon6 - wherever that may be….

Thankfully after using them in my day job I’m happy to say that they are actually a piece of cake to do - and I’m going to explain how (at least how I did them).

Django makes it really easy to insert a foreign key relationship between models. All you need do is use the native ForeignKey field type into your models.py. For example:

#you need to import the model you want to ForeignKey into of course
from django.contrib.sites.models import RossLikes

class Ross(models.Model):
    name = models.CharField(max_length-512)
    description = models.TextField()
    image = models.ImageField(upload_to='images')
    likes = models.ForeignKey(RossLikes)

This will provide you with an interface like below.

It’s got all you need in there and can select any individual record in the RossLikes model to include alongside Ross. Thinking that you have a large number of things to pick from this kind of interface will quickly become a PITA. This is where raw ID fields come into play!

All you need to do it include this one line into your models modelAdmin method in admin.py:

class RossAdmin(admin.ModelAdmin):
    raw_id_fields = ('likes')

You’ll now get a nice picker style widget that provides you with all the values you had before in the select box with the extra win of being able to filter, search (whatever options you provide for the linked in model when you access it on it’s own!)

I find this very helpful and I reckon you will to!

While in the past I have written up my conference experiences this year I must tip my hat towards Mike Davies as he has done an excellent write up of both @media ajax day 1 and @media ajax day 2 over at his blog. Go and read that, it’s really well written and sums everything up well.

One thing that did cause suitable excitement (for me at least) was the talk from Yehuda Katz talking about jQuery as it highlighted a previously unknown method of achieving event delegation natively inside the framework. If you’re not sure; event delegation is a way to avoid cluttering up memory (in extreme cases) and code complexity by assigned event handlers to a multiple elements when you can assign one ‘uber’ listener and have that decide that action to take depending on which of it’s child elements was effected. Further information and articles about event delegation are all over the web and well worth a read.

But back to JQuery business (and a quick apology as I have realised in the middle of writing this article that the two methods I am about to explain currently AREN’T actually fully native and require plugin’s. Full native support will be released in 1.3 it seems) and the code examples. Both are implemented in basically the same way but it’s always good to have a couple of options.

Listen (download at - flesler.blogspot.com/2007/10/jquerylisten.html)

Listen allows you to specify a parent element and have it return if it’s triggered against a specific action on a selector provided it to listen to.

$('ul').listen('click', 'li', function() {
alert('you clicked one of my li elements - and I can tell you which!');
});

The downside to the listen plugin is that it only allows for simple selectors (id, tag, tag.class or class - none of the cool jQuery specific stuff) to be listened against. Thankfully option number two allows for extra fun and games like this…

Delegate (download the code)

Delegate works in a similar way to listen but has full jQuery selector support so if you want to target more specific elements inside a parent then it’s for you

$('form').delegate('click', ':checkbox', function() {
alert('would have been kinda hard to find just checkboxes using listen');
});

Delegate will be (according to the roadmap) will likely be ported straight into jQuery proper once 1.3 is released.

So there you go - event delegation (unfortunately via plugin’s at the moment) in jQuery!

And as an added bonus there is also Dan Webb’s implementation that is still worth a read and something to consider using if you feel that his Low Pro behvaiour pattern JS is the best thing since sliced bread (it certainly looks v cool indeed and a very nice idea).

The same I hope could be said for the whole of barcamplondon4. After the ticketing problems (though I would like to add this was more down to the fact that too many people wanted to attend than there was space for) I wanted to ensure that a good show was put on and all feedback that I have heard and read points towards this. The back network is filling up nicely with content so I’d say the best place to look for such stuff is there.

The GCap brand rooms rocked, the food was good (even the slightly cold pizza), the beer was drunk, the comedians funny and all talks seemed to go down well, even mine on running barcamps which I have to admit I did while running on empty and notes from which you can find at Jure Cuhalev’s site. Good news is that the bulk of this could soon make it’s way into an article at digital web magazine!

If there is one thing that I’d like people to take away from barcamplondon4 it’s the name we call it. BarCamps have been described as an ‘un-organised conference’ and having now done one I can say that this term is a load of bollocks; there is a ton of organising to do! Moving forward I’d like them to be called ‘user-generated conferences’ but lets see how this picks up.

Podcasts

From what I could see we managed to get good recordings done on all the sessions. But with work commitments I’ve not done as much work on getting these up as I would have liked. Keep your eyes on this site though as they will be published soon and if anyone would like to help make it faster please get in touch!

Next barcamp

Final conclusions

So yeah, that was barcamplondon4. I’ve said it a thousand times before but thank you to everyone who attended, all GCap people who came down to help and present, all the team in the Capital Building and all our lovely sponsors (Osmosoft, WeLoveLocal, eBay Partner Network, Imagination and Skills Matter) – you really made it awesome; though it maybe didn’t look it I really did enjoy every second.

I have a number of t-shirts left (XL only) so if you’d like one drop me a line or a comment here – I’ll see what I can do to get you one :>