Community JS reloaded

How to rock as a movement

Today I want to talk about something that is dear to my heart - bringing knowledge and information to the world.

Love the pirate, damn the privateers

Chris Williams speaking

About a year ago Chris Williams gave a rousing speak about the state of JavaScript and the problems with people making money with our efforts without understanding and supporting the community.

Operation cleanup

Google search for gambling addiction offering a 'I feel lucky' button

He also pointed out the sorry state of JS education online and kicked off a guerrilla SEO attempt to kick off inadequate documentation of the google search results page and redirect to the MDN documentation instead.

Screenshot of HTML5 Boilerplate

Another result from that was which pointed out issues on and got them thinking about their content a bit.

Thank you!

Red Panda 'waving'

Red panda on daily squee

And a lot has happened, and I want to use this here and now to thank you for that! The documentation sprints of the MDC docs are getting larger and we have a lot of people helping with keeping them up-to-date.

Well done, us!

Pat on the back machine

Pat on the back machine, United States Patent 4608967 by Piro, Ralph R, published 09/02/1986

Yes, we're doing a good job, but this is no time to sit on our laurels. There are still a lot of things to be done and we as a JavaScript community are the only ones to do them. Yes, this is a real U.S. patent of a back patting machine and a great example of the magic of the patent system and how it protects innovation.

Challenges, old and new

Toilet roll with single sheet

We as a community still have a few challenges to face. Some of them are old, some are new. Some of them might not be our place to fight them, but we have the power and the drive to do so.

Our challenges

Let's talk about these challenges.

Covering the basics

Chocolates, Liquor and Tobacco store in Amsterdam airport

Let's take a look at what made us get where we are now.

View-source wins

web source code

We all learned by looking at other people's code. Don't try to deny it. The inability of hiding your JS code was also its biggest success. Your code is poetry and you will be judged by the tech people visiting your products much like people judge you by the looks of them.

Collaboration wins

web source code

Octocat on octodex

All of the big successes of JavaScript were the result of collaboration. People working together on a problem, people providing feedback and the original coder changing a product accordingly. Awesome stuff.

Trial and error wins

JSFiddle allows for collaborative editing and trying

A lot of the JavaScript successes are trial and error. We tried things and failed, and we failed quickly. This can however be a problem if we keep the errors online or people start selling them as "best practices". So be aware of that. Lately, instead of posting on my blog and having to edit the post all the time and keep it up to date I started using JSFiddle and instead of comments from people I get forks and changes.

1 Fanboism

A lot of the issues we have as a community is that we are prone to being fans of one thing rather than seeing the big picture.

Stop being a fanboi/gurl

Browser wars

Illustration by shoze (Galit Weisberg)

If I learned one thing in my career then it is that I should be open to any platform and any browser and environment out there. If you limit yourself to one of them you lock yourself in. If you discard anything that is not happening in your favourite environment, you are hurting innovation. Everybody has good ideas. The trick is to collect, curate and find the best middle ground.

(x^2+y^2-1)^3 = x^2 y^3 the web!

World Connection Density

World Connection Density map by Chris Harrison

I love the web, and I think we all should understand that this is the single most successful media out there. Anyone can participate and we empower a lot of people to have a voice who wouldn't have any otherwise. When I was a kid I had to go to the library and go through a lot of books to research. Nowadays I have any kind of information one click away.

WWW is…

Excitement about technologies and hardware and clever marketing makes it easy for a lot of people to forget that the world wide web means that you should support everyone - regardless of browser, location or ability. This does not mean you need to give everyone the same experience - it means you should not block people out.

Stop following rockstars, join a band!

The Leningrad Cowboys

Leningrad cowboys on 'on heck of a guy'

There is a big thing going on about people seeing some developers as total rockstars and following every word they say, repeating what they say without context as "best practice" and in general wasting the opportunity to do cool stuff themselves. Every single one of us should get the chance to be listened to and try something cool. It is not a small group of people who will have a lot of impact. It is a community that moves things forward.

2 Meshing

The dangers of inbreeding

Jersey Shore

As much as I enjoy being here today I am also a bit worried about what we are doing here. This is a pure JavaScript conference. There are others, pure design conferences, pure performance conferences, pure backend conferences, pure social conferences, pure bla bla conferences…

Building products is a mixture of skills


In our final products, we need to deal with backend developers, designers, product managers, god forbid, clients and other folk. All of which have their best practices that work for them and are experts in their fields.

Tech is pick'n'mix, not one size fits all

By mixing and matching technologies, we can play them to their strengths instead of fighting each other.

82, 69, 83, 80, 69, 67, 84

We should always be respectful of people whose skill sets work with ours, there is no point in trying to compete when we all want to reach the same goal.

3 Social skills

Which brings me to social skills, something that is a big issue in our environment and already treated as a joke. People expect developers to be socially inept, it seems. Just go to any Christmas party of big corporations and watch the divide between the techies and the non techies.

Well, actually

Okay it’s time to explain some stuff patronizing douchebag trollcat

Miguel de Icaza has written an amazing and funny post on the subject of "Well, actually". This is a social behaviour pattern that is very common amongst techies and is very destructive. It seems that we are very much likely to intercept any joke/explanation or meeting starting with "Well, actually…" followed by a condescending message laden with information the original conversation did not need.

Douchebagisms to avoid

A lot of times we use sentences that are a dismissal, and can hurt the person. We can deal with that kind of rough conversation, but not everybody can.

Douchebagisms to avoid (2)

4 Patch and forget

The last douchebagism brings me to a challenge we have as developers which is that we are very prone to find quick solutions to larger issues that need fixing and wrap them in a library or polyfill.

Libraries, Polyfills and APIs, oh my!

Potholes in the street

I am a big fan of making things easier, but I am a much bigger fan of fixing issues at the source. We have quite a tendency right now to write a wrapper API, library or polyfill for everything and then consider our work done. Sadly this is not the case.

Not just for christmas

It is very tempting to simply write an abstraction layer to hide problems. The problem doesn't go away though, it just needs and extra step to become useful. Once the problem is solved, your abstraction layer turns into a needless burden.

5 Education material

The joy of tech editing

Picard facepalming

I am currently tech editing a book about web development that is in use in highschools and universities all over the US. If you think w3schools is bad, think again.

New target: corporate and academic training

NCC1701-A picture from moddb

It is time we stopped trying to only affect the world around us but be where we are needed. Corporate trainings and university courses are ridiculously outdated. Go back to your university and give a guest lecture now!

"There's gold in them thar hills"

A lot of companies make a living out of teaching code. Some of them do very well and a good job. A lot of them do a terrible job and still get paid. Why not us? The next generation of web developers might not want to become web developers.

6 Native calls

Web technologies need an owner?

There is a big thing going on right now discussing that web development is on the way out and that the future is all about native code on mobile devices. Food for thought.

Taking action

There are a few projects to watch right now that will enable the web to be a real competitor for native code. Let's support those.

7 Tools

Above all, we need cool new tools on the web to get developers going and teach them a good way of development while they are at it.

Oh, that went well…

Adobe Muse

totally stolen from the interwebs

When Adobe released Muse, a visual tool to build websites there was much merriment in the blogosphere and people laughed at the quality of its output which reminded of Frontpage. The question we have to ask ourselves though is: have we failed to make people aware that we don't need WYSIWYG editors?

Debugging tools


It all started with Firebug. Instead of reloading the browser to see what the issues are, we had a tool to check in the browser directly what went wrong. We had a JavaScript console to try things out and we had a style inspector to find out why this or that CSS selector wasn't applied. Firebug then became the blueprint for all other developer tools and we started putting more and more features in. By now, the debugging tools do look a bit bloated and Firebug is slow.

Developing > Debugging

Kittens saying soon

Instead of building tools that allow developers to just debug, we should start thinking about integrating the development and the demonstration process into the browser. Instead of one big monolithic system to offer all debugging features, let's build a framework of tools.

Highlighter with breadcrumbs

This is a preview of the new developer tools in Firefox. This is the Highlighter. Instead of navigating the HTML, you move around the page and you get the element hierarchy as breadcrumbs.

Style inspector

The style inspector gives you information about the styles applied, both the ones you set and the ones the browser applied.

Styling a page from scratch with CSS tools

Using these tools you could do CSS screencasts without jumping in and out of an editor.

Tilt - a 3D display of your document

Tilt is a 3D representation of the DOM tree. In this demo even connected to the accelerometer of the computer (OK, we went overboard).

Web console

The web console is known from Firebug and can be now docked wherever you want it.

In-browser Scratchpad

Firefox now has a scratchpad that allows you to write JS in the browser, execute sections of your code and try it out in the live site - much like GreaseMonkey used to.

Source mapping

Source mapping allows you to debug minified code or coffescript that gets turned into JavaScript. The console does the connection for you.

Command Line

All of the new features can be accessed with commands, in case you don't want to use a mouse.

Always remember

William Arthur Ward