• has produced numerous projects that have since become core components to the Mozilla Foundations work efforts,
• helped us run international events in Barcalona and London,
• lead numerous community events worldwide.

We wanted a platform where people could let people could tell the world about their web projects, have the community help them out and have them made better. We received loads, with some of my favourites being:

• popcorn.js
• the Mozilla Journalism project
• Hackasaurus
• Universal Subtitles
• The New Social Web Project
• Social Book Publishing
• Peer to Peer University
• the Open Badges Initiative

These are all amazing projects but you might have noticed one thing – they’ve all now outgrown what we provide at drumbeat.org. They have their own websites and twitter streams with some having their code posted on github for community involvement.

Now we have these tools and sites we’re looking at moving our focus from being a community of web builders to a community of web makers who will use the tools that we have previously made. We think it’s time that we let it relax in a warm chair by the fire with its’ coat and slippers and remember the good old days and gaze lovingly at what the things that it has created go on to become. Last year when we carried out a survey on how we could evolve drumbeat.org and discovered the two main reasons we found on why people were signing up was to hear about what Mozilla are up to and to contribute to an existing drumbeat project. Thankfully our plans for drumbeat.org will allow people to continue doing that.

So what does this mean for you?

On March 1st we will be turning off new site registrations, new projects and existing project content updates; recently the number of new projects coming in has dwindled and project updates have contained large amounts of spam anyways.

drumbeat.org will remain live but will be used to direct people to our site for web makers (URL to be decided) and provide access to the now external websites of our major drumbeat projects. It will be used to tell the story of what it created and what Mozilla are doing with those creations.

What about my project page?

On March 1st your project page will be turned off and redirect users to the homepage (drumbeat.org). If you let us know we can set up redirects from your project page to your new web presence so to not loose any SEO-juice you’ve built up. Please contact us or leave a comment below and provide the drumbeat URL and where you would like us to point that to. Using Hackasaurus as an example that would be https://drumbeat.org/en-US/projects/hackasaurus/ and http://hackasaurus.org

What can I do to keep my project alive?

As mentioned above if you’ve already set up an external project website it will be fine. Up to March 1st you may also use our site messaging system to message your followers of your plans. If not then there are numerous online tools that are free and can be used to keep people informed.

Project updates

Set up a project blog! There are many free options out there, some we would recommend are tumblr, blogger or wordpress.

If you’re looking for more short-hand options then creating a twitter feed, status.net stream or a hash tag for people to message at should be able to be integrated into your chosen blog easily.

Code updates

If you want people to be able to download, use, alter and potentially improve your code and you haven’t already then we recommend getting into an online code repository. This also comes with the benefit of your code being stored in the cloud and therefore safe from laptop failures.

The most popular is probably github.com but if you’re familiar with version control systems other than git there are google code (with gives you Subversion, Mercurial AND git) and bitbucket (which gives you git and Mercurial).

So what does this mean for drumbeat?

We feel that drumbeat has been a huge success, the projects that it has made, the community that it has created and the people that it has put as into contact with. In 2012 we’re so excited to see how this community can help us more forward and make the next generation of web makers. You can read more about our our future plans over at http://openmatt.wordpress.com/2012/02/16/byebyedrumbeat/

We will also be blogging more about where we will be taking the Mozilla Foundation online presence. We’ll be doing it in iterations and in the open so feedback is always welcome. Keep your eyes posted on our RSS feeds for further information.

We’re looking to recruit this week (14th March 2012) – watch this space!

At the moment I’m the only developer on my team at Mozilla, in fact I’m the only person in my team. I am “Team Ross”. Thankfully in March this will change, we’ve already hired a designer and we’re looking to add at least another developer to work on supporting the Mozilla Foundations work, events and communities.

If that’s already got you wanting to apply then please have a read of the job spec and get your application in – http://careers.mozilla.org/en-US/position/oIkXVfwE. If you’re looking for more information please read on…

What will I be working on?

Short answer – lots!

Detailed answer – just this week we’ve launched a the new Knight-Mozilla Open News partnership. The site right now is pretty basic and there are tons of improvements that need to be made. We want to do something around our events platform, including getting an events platform; you can read more about that through the thoughts of Ben Simon on the infrastructure of self-organising and Michelle Thorne on potential feature requests for web makers (trying to crowd source what things we might initially need). Mozilla are running a partnership with the National Science Foundation, Geni, Ignite and the White House called Mozilla Ignite so there is work to be done on that site as we build out the feature set there. Then there is the Mozilla Festival… So yeah, we’ll make sure you don’t get bored.

“Team Ross” as it currently stands (or sits) – come make it a proper team!

Of course all of your work will happen in the open – your code will be on github, our dev servers will have public access as will our bug tracking systems and wikis. I’ve found this a really exciting part of the job so far and it’s certainly not as scarey as you think it might be – people when commenting on your code are helping you make it better and there is a global knowledge base to tap into.

What technology will I be using?

Mozilla are a web company so everything will be based around HTML5. Server side we’ve got projects running on Django (using Mozilla Playdoh), nodejs and wordpress. We’re not tied to one technology and decide on a project by project basis what is the best fit in terms of what’s most useful for the client and can produce the best experience for our end users.

Where can I work from?

Mozilla have, or soon will have offices in 9 locations worldwide but also are very open to remote working. So where ever you are reading this from if you think you’re a good fit then please apply!. London will have it’s office opening in the next month or so, I’ve been in, it’s looking great and has a good location in Covent Garden; it will also come with it’s own bar!

So where do I apply?

As mentioned above you can apply (don’t forget to include a github/bitbucket/googlecode URL) at http://careers.mozilla.org/en-US/position/oIkXVfwE

Any further questions then please ask in the comments.

The slides

The links

Organisation

• JS Lint – the official site
• Crockford Facts
• Essential JavaScript and jQuery design patterns – FREE BOOK
• requireJS
• A thread on amsuing thread on ‘best code comments’
• JSDocToolkit – project page on Google code
• Documentation-Driven Design for APIs by Frances Berriman on 24ways.org

I like running jsLint as part of my build process, and it’s actually pretty easy. If you’re using the HTML5 boiler plate it’s built into that and if you’re a git user you can install which runs it against your JS on each include and warns you of any problems – git pre-commit.

Performance

• The Mysteries of JavaScript Fu by Dan Webb
• Event delegation with jQuery by Brandon Aron
• Writing Efficient JavaScript by Mark ‘Tarquin’ Wilton-Jones on dev.Opera

Don’t forget your accessibility

• Making AJAX work with screen-readers
• WAI ARIA live regions on Mozilla Developer Center

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….