Let’s Write a Web Extension

You might have heard about Mozilla’s WebExtensions, our implementation of a new browser extension API for writing multiprocess-compatible add-ons. Maybe you’ve been wondering what it was about, and how you could use it. Well, I’m here to help! I think the MDN’s WebExtensions docs are a pretty great place to start:

WebExtensions are a new way to write Firefox extensions.

The technology is developed for cross-browser compatibility: to a large extent the API is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox with just a few changes. The API is also fully compatible with multiprocess Firefox.

The only thing I would add is that while Mozilla is implementing most of the API that Chrome and Opera support, we’re not restricting ourselves to only that API. Where it makes sense, we will be adding new functionality and talking with other browser makers about implementing it as well. Finally, since the WebExtension API is still under development, it’s probably best if you use Firefox Nightly for this tutorial, so that you get the most up-to-date, standards-compliant behaviour. But keep in mind, this is still experimental technology — things might break!

Starting off

Okay, let’s start with a reasonably simple add-on. We’ll add a button, and when you click it, it will open up one of my favourite sites in a new tab.

The first file we’ll need is a manifest.json, to tell Firefox about our add-on.

  "manifest_version": 2,
  "name": "Cat Gifs!",
  "version": "1.0",
  "applications": {
    "gecko": {
      "id": "catgifs@mozilla.org"

  "browser_action": {
    "default_title": "Cat Gifs!"

Great! We’re done! Hopefully your code looks a little like this. Of course, we have no idea if it works yet, so let’s install it in Firefox (we’re using Firefox Nightly for the latest implementation). You could try to drag the manifest.json, or the whole directory, onto Firefox, but that really won’t give you what you want.

The directory listing


To make Firefox recognize your extension as an add-on, you need to give it a zip file which ends in .xpi, so let’s make one of those by first installing 7-Zip, and then typing 7z a catgifs.xpi manifest.json. (If you’re on Mac or Linux, the zip command should be built-in, so just type zip catgifs.xpi manifest.json.) Then you can drag the catgifs.xpi onto Firefox, and it will show you an error because our extension is unsigned.

The first error

We can work around this by going to about:config, typing xpinstall.signatures.required in the search box, double-clicking the entry to set it to false, and then closing that tab. After that, when we drop catgifs.xpi onto Firefox, we get the option to install our new add-on!

It’s important to note that beginning with Firefox 44 (later this year), add-ons will require a signature to be installed on Firefox Beta or Release versions of the browser, so even if you set the preference shown below, you will soon still need to run Firefox Nightly or Developer Edition to follow this tutorial.


Of course, our add-on doesn’t do a whole lot yet.

I click and click, but nothing happens.

So let’s fix that!

Adding features

First, we’ll add the following lines to manifest.json, above the line containing browser_action:

  "background": {
    "scripts": ["background.js"],
    "persistent": false

now, of course, that’s pointing at a background.js file that doesn’t exist yet, so we should create that, too. Let’s paste the following javascript in it:

'use strict';

/*global chrome:false */

chrome.browserAction.setBadgeText({text: '(?)'});
chrome.browserAction.setBadgeBackgroundColor({color: '#eae'});

chrome.browserAction.onClicked.addListener(function(aTab) {
  chrome.tabs.create({'url': 'http://chilloutandwatchsomecatgifs.com/', 'active': true});

And you should get something that looks like this. Re-create the add-on by typing 7z a catgifs.xpi manifest.json background.js (or zip catgifs.xpi manifest.json background.js), and drop catgifs.xpi onto Firefox again, and now, when we click the button, we should get a new tab! 😄

Cat Gifs!

Automating the build

I don’t know about you, but I ended up typing 7z a catgifs.xpi manifest.json a disappointing number of times, and wondering why my background.js file wasn’t running. Since I know where this blog post is ending up, I know we’re going to be adding a bunch more files, so I think it’s time to add a build script. I hear that the go-to build tool these days is gulp, so I’ll wait here while you go install that, and c’mon back when you’re done. (I needed to install Node, and then gulp twice. I’m not sure why.)

So now that we have gulp installed, we should make a file named gulpfile.js to tell it how to build our add-on.

'use strict';

var gulp = require('gulp');

var files = ['manifest.json', 'background.js'];
var xpiName = 'catgifs.xpi';

gulp.task('default', function () {
  console.log(files, xpiName)

Once you have that file looking something like this, you can type gulp, and see output that looks something like this:

Just some command line stuff, nbd.

Now, you may notice that we didn’t actually build the add-on. To do that, we will need to install another package to zip things up. So, type npm install gulp-zip, and then change the gulpfile.js to contain the following:

'use strict';

var gulp = require('gulp');
var zip = require('gulp-zip');

var files = ['manifest.json', 'background.js'];
var xpiName = 'catgifs.xpi';

gulp.task('default', function () {

Once your gulpfile.js looks like this, when we run it, it will create the catgifs.xpi (as we can tell by looking at the timestamp, or by deleting it and seeing it get re-created).

Fixing a bug

Now, if you’re like me, you clicked the button a whole bunch of times, to test it out and make sure it’s working, and you might have ended up with a lot of tabs. While this will ensure you remain extra-chill, it would probably be nicer to only have one tab, either creating it, or switching to it if it exists, when we click the button. So let’s go ahead and add that.

Lots and lots of cats.

The first thing we want to do is see if the tab exists, so let’s edit the browserAction.onClicked listener in background.js to contain the following:

chrome.browserAction.onClicked.addListener(function(aTab) {
  chrome.tabs.query({'url': 'http://chilloutandwatchsomecatgifs.com/'}, (tabs) => {
    if (tabs.length === 0) {
      // There is no catgif tab!
      chrome.tabs.create({'url': 'http://chilloutandwatchsomecatgifs.com/', 'active': true});
    } else {
      // Do something here…

Huh, that’s weird, it’s always creating a new tab, no matter how many catgifs tabs there are already… It turns out that our add-on doesn’t have permission to see the urls for existing tabs yet which is why it can’t find them, so let’s go ahead and add that by inserting the following code above the browser_action:

  "permissions": [

Once your code looks similar to this, re-run gulp to rebuild the add-on, and drag-and-drop to install it, and then when we test it out, ta-da! Only one catgif tab! Of course, if we’re on another tab it doesn’t do anything, so let’s fix that. We can change the else block to contain the following:

      // Do something here…
      chrome.tabs.query({'url': 'http://chilloutandwatchsomecatgifs.com/', 'active': true}, (active) => {
        if (active.length === 0) {
          chrome.tabs.update(tabs[0].id, {'active': true});

Make sure it looks like this, rebuild, re-install, and shazam, it works!

Making it look nice

Well, it works, but it’s not really pretty. Let’s do a couple of things to fix that a bit.

First of all, we can add a custom icon so that our add-on doesn’t look like all the other add-ons that haven’t bothered to set their icons… To do that, we add the following to manifest.json after the manifest_version line:

  "icons": {
    "48": "icon.png",
    "128": "icon128.png"

And, of course, we’ll need to download a pretty picture for our icon, so let’s save a copy of this picture as icon.png, and this one as icon128.png.

We should also have a prettier icon for the button, so going back to the manifest.json, let’s add the following lines in the browser_action block before the default_title:

    "default_icon": {
      "19": "button.png",
      "38": "button38.png"

and save this image as button.png, and this image as button38.png.

Finally, we need to tell our build script about the new files, so change the files line of our gulpfile.js to:

var files = ['manifest.json', 'background.js', '*.png'];

Re-run the build, and re-install the add-on, and we’re done! 😀

New, prettier, icons.

One more thing…

Well, there is another thing we could try to do. I mean, we have an add-on that works beautifully in Firefox, but one of the advantages of the new WebExtension API is that you can run the same add-on (or an add-on with minimal changes) on both Firefox and Chrome. So let’s see what it will take to get this running in both browsers!

We’ll start by launching Chrome, and trying to load the add-on, and see what errors it gives us. To load our extension, we’ll need to go to chrome://extensions/, and check the Developer mode checkbox, as shown below:

Now we’re hackers!

Then we can click the “Load unpacked extension…” button, and choose our directory to load our add-on! Uh-oh, it looks like we’ve got an error.

Close, but not quite.

Since the applications key is required for Firefox, I think we can safely ignore this error. And anyways, the button shows up! And when we click it…


So, I guess we’re done! (I used to have a section in here about how to load babel.js, because the version of Chrome I was using didn’t support ES6’s arrow functions, but apparently they’ve upgraded their JavaScript engine, and now everything is good. 😉)

Finally, if you have any questions, or run into any problems following this tutorial, please feel free to leave a comment here, or get in touch with me through email, or on twitter! If you have issues or constructive feedback developing WebExtensions, the team will be listening on the Discourse forum.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Have we lost our connection with the web? Let’s #webexcite

I love the web. I love building stuff in it using web standards. I learned the value of standards the hard way: building things when browser choices were IE4 or Netscape 3. The days when connections were slow enough that omitting quotes around attributes made a real difference to end users instead of being just an opportunity to have another controversial discussion thread. The days when you did everything possible – no matter how dirty – to make things look and work right. The days when the basic functionality of a product was the most important part of it – not if it looks shiny on retina or not.

Let's get excited

I am not alone. Many out there are card-carrying web developers who love doing what I do. And many have done it for a long, long time. Many of us don a blue beanie hat once a year to show our undying love for the standard work that made our lives much, much easier and predictable and testable in the past and now.

Enough with the backpatting

However, it seems we live in a terrible bubble of self-affirmation about just how awesome and ever-winning the web is. We’re lacking proof. We build things to impress one another and seem to forget that what we do sooner than later should improve the experience of people surfing the web out there.

In places of perceived affluence (let’s not analyse how much of that is really covered-up recession and living on borrowed money) the web is very much losing mind-share.

Apps excite people

People don’t talk about “having been to a web site”; instead they talk about apps and are totally OK if the app is only available on one platform. Even worse, people consider themselves a better class than others when they have iOS over Android which dares to also offer cheaper hardware.

The web has become mainstream and boring; it is the thing you use, and not where you get your Oooohhhs and Aaaahhhhs.

Why is that? We live in amazing times:

  • New input types allow for much richer forms
  • Video and Audio in HTML5 has matured to a stage where you can embed a video without worrying about showing a broken grey box
  • Canvas allows us to create and manipulate graphics on the fly
  • WebRTC allows for Skype-like functionality straight in the browser.
  • With Web Audio we can create and manipulate music in the browser
  • SVG is now an embed in HTML and doesn’t need to be an own document which allows us scalable vector graphics (something Flash was damn good in)
  • IndexedDB allows us to store data on the device
  • AppCache, despite all its flaws allows for basic offline functionality
  • WebGL brings 3D environments to the web (again, let’s not forget VRML)
  • WebComponents hint at finally having a full-fledged Widget interface on the web.

Shown, but never told

The worry I have is that most of these technologies never really get applied in commercial, customer-facing products. Instead we build a lot of “technology demos” and “showcases” to inspire ourselves and prove that there is a “soon to come” future where all of this is mainstream.

This becomes even more frustrating when the showcases vanish or never get upgraded. Many of the stuff I showed people just two years ago only worked in WebKit and could be easily upgraded to work across all browsers, but we’re already bored with it and move on to the next demo that shows the amazing soon to be real future.

I’m done with impressing other developers; I want the tech we put in browsers to be used for people out there. If we can’t do that, I think we failed as passionate web developers. I think we lost the connection to those we should serve. We don’t even experience the same web they do. We have fast macs with lots of RAM and Adblock enabled. We get excited about parallax web sites that suck the battery of a phone empty in 5 seconds. We happily look at a loading bar for a minute to get an amazing WebGL demo. Real people don’t do any of that. Let’s not kid ourselves.

Exciting, real products

I remember at the beginning of the standards movement we had showcase web sites that showed real, commercial, user-facing web sites and praised them for using standards. The first CSS layout driven sites, sites using clever roll-over techniques for zooming into product images, sites with very clean and semantic markup – that sort of thing. #HTML on ircnet had a “site of the day”, there was a “sightings” site explaining a weekly amazing web site, “snyggt” in Sweden showcased sites with tricky scripts and layout solutions.

I think it may be time to re-visit this idea. Instead of impressing one another with codepens, dribbles and other in-crowd demos, let’s tell one another about great commmercial products aimed not at web developers using up-to-date technology in a very useful and beautiful way.

That way we have an arsenal of beautiful and real things to show to people when they are confused why we like the web so much. The plan is simple:

  • If you find a beautiful example of modern tech used in the wild, tweet or post about it using the #webexcite hash tag
  • We can also set up a repository somewhere on GitHub once we have a collection going

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Webconf Hungary – HTML5 Beyond the Hype: Let’s make it work

I am on my way back to England from Budapest where I spent the last two days in an epic hotel and the day speaking at the 10th annual Webconf. I was invited by the Mozilla community in Hungary, who did a great job showing off Firefox OS to the attendees. My presentation (one of the very few in English) was about HTML5 and how Firefox OS helps making some of its promises a reality.

The slides are available on Slideshare:

And as always there is a screencast on YouTube.

The talk was filmed, and the video should be released soon. All in all Webconf was a cozy one day conference with a lot of very interested attendees. As most content was in Hungarian – a language that seems base64 encoded to me – I didn’t get much, but it seemed the overall quality was very high.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Let’s explain the “why” instead of the “how”

One thing that bugs me a lot is that in the publishing world about the web we have a fetish for the “how” whereas we should strive for the “why” instead.

What do I mean by that? Well, first of all, I count everything that is published as important. This could be a comment, a tweet, a blog post, a presentation, a screencast – doesn’t matter. If it ends up on the web it will be linked to, it will be quoted, it will be taken as “best practice” or “common usage” and people will start arguing over it and adding it to what we call “common knowledge” (spoiler: there is no such thing).

Advice duck telling people to go to W3Schools and learn to be a web developer to make money to finance your real studies
Meme that got around the web some time ago: web development is a means to make a lot of money to finance your real studies and it is possible by following the courses on w3schools. This cheapening of a whole profession to me is an immediate result of giving people solutions instead of inviting them to understand what they are doing.

That is why publications that answer the “how” without also explaining the “why” are dangerous. We explain how something is done and we pride ourselves when this is as short and simple as possible. We do live coding on stage showing how complex things can be done with one small command and five different build systems. We show how simple things are when people use this editor or that development tool or this browser and everything is just a click away and we get amazing insight into the things we do.

Assumed stamina and interest

We expect people who learn the “how” to be sharp and interested enough to get to the “why” themselves. Sadly enough this is hardly ever the case. Instead, the quick “how” also known as the “here is how you do it” becomes an excuse not to even question practices and solutions any longer. “Awesome technology expert $person said and showed on stage that this is how it is done. Don’t waste your time on doing it differently” is becoming a mantra for a lot of new developers.

Moldy advice

The issue with this is that “best practices” are getting more and more short-lived and in many cases very dependent on the environment they are applied in. What fixed performance issues in a Web View on iPhone 3 might be a terrible idea on Chrome on a Desktop, what was a real issue in JavaScript 10 years ago might not even make a minimal difference in today’s engines (string concatenation anyone?).

What is “the why”?

The “why” can be a few different things:

  • Why does doing something in the way we do it work?
  • Why should you use a certain technology?
  • Why is it important to do this, but also understand the environment it is most effective in?
  • Why is using something simple and effective but also dangerous depending on outside factors?
  • Why is a new way of doing something more effective than an older way of doing it?
  • Why is it important to understand what you do and how do you explain to other people that there is a reason to do it?

Explaining the “why” is much, much harder than the “how”. Telling someone to do something in a certain way is giving orders, explaining a procedure. Explaining why it should be done this way means you teach the other person, and it also means you need to deeply understand what you do. The “how” can be repeated by someone who doesn’t know really how something works – and in many cases is – the “why” means you have to put much more effort into understanding what you advocate. The “how” is what lead to boring school books and terrible training folders. The “why” leads to interactive and memorable training experiences.

W3Schools – the kingdom of the how

Getting rid of the fetish of the how is an incredibly frustrating uphill battle. The biggest manifestation of the “how” is W3Schools.com. This site shows you how to do something – even interactively – and thus has become a force majeur in the web development world. It gives you a fast, quick answer to copy and paste without the pesky having to “understand what you are doing” part. This leads to people defending it tooth and nail every time some righteous people set out to kill it. All of these efforts are doomed to fail if they mean setting up yet another resource that will “do things better than w3schools”. The reason sites like W3Schools work are:

  • They give you a short answer and make you feel clever as you achieved something amazing without effort
  • They are easy to link to as an answer to a question without having to explain things
  • They are easy to embed into a tutorial or article as a quick citation to “prove a point”
  • People used them for years and they grew constantly which is something that Google loves

In other words, they are a useful reminder and lookup resource for people who already know the “why” and simply forgot the “how”. Thus, they look like a power tool the experts use and are very tempting for beginners to use as well. Much like buying the same shoes as Usain Bolt should make you an amazing runner…

The only way to “kill W3Schools” is to support resources that explain the how and the why, like MDN or WebPlatform.org – not to create more resources that have the right heart but are doomed to fail as maintaining a documentation resource is an amazing amount of work. Instead of sending new developers to w3schools or a Stackoverflow post that explains how something is done quickly, send them to a deep link on those. We can not expect people we point to solutions to care about how they happened. We have to show them the way, not the destination. By sending them to the destination via a shortcut, we deprive them of their own, personal learning experience and we cheapen our job to something anyone can look up on demand.

The “how” gets outdated, and – in many cases – dangerous practice very, very quickly. The “why” remains as it lights up the way to a solution, a solution that can change over time.

That’s why I’d love people to stop spouting quick answers and let new developers ponder the solution for themselves before telling them a way to do it quickly. We need to learn in order to understand and be empowered to create on our own. You only learn by asking why – let’s be supportive of that instead of feeling smug about pointing out an already existing solution. Web development got to where it is by continuously questioning how we do things and find ways to make it work. If we stop doing that, we stagnate.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

These apples don’t taste like oranges – let’s burn down the orchard

When I see comparisons of HTML5 to native apps I get the feeling that the way we measure failure and success could give statisticians a heart attack. Take Andrea Giammarchi’s The difficult road to vine via web as an example. In this piece Andrea, who really knows his stuff tries to re-create the hot app of the month, Vine using “HTML5 technologies” and comes to the conclusion – once again – that HTML5 is not ready to take on native technologies head-on. I agree. But I also want to point out that a 1:1 comparison is pretty much useless. Vine is only available in iOS. Vine also was purposely built to work for the iPhone. In order to prove if HTML5 is ready all we’d need to do is to find one single browser on one single OS, nay even only on one piece of hardware to match the functionality of Vine.

sobbing mathematically

Instead we set the bar impossibly high for ourselves. Whenever we talk about HTML5 we praise its universality. We talk about build once and run everywhere and we make it impossible for ourselves to deliver on that promise if we don’t also embrace the flexible nature of HTML5 and the web. In other words: HTML5 can and does deliver much more than any native app already. It doesn’t limit you to one environment or hardware and you can deliver your app on an existing delivery platform – the web – that doesn’t lock you in to Terms and Conditions that could change any time from under you. Nowhere is written though that the app needs to work and look the same everywhere. This would actually limit its reach as many platforms just don’t allow HTML5 apps to reach deep into hardware or to even perform properly.

What needs to change is our stupid promise of HTML5 apps working the same everywhere and matching all the features of native apps. That can not happen as we can not deliver the same experience regardless of connectivity, hardware access or how busy the hardware is already. HTML5 apps, unless packaged, will always have to compete with other running processes on the hardware and thus need to be much cleverer in resourcing than native apps.

Instead of trying to copy what’s cool in native and boring and forgotten a month later (remember Path?) if we really want to have HTML5 as our platform of choice we should play it to its strengths. This means that our apps will not look and feel the same on every platform. It means that they use what the platform offers and allow lesser able environments to at least consume and add data. And if we want to show off what HTML5 can do, then maybe showcasing on iOS is the last thing we want to do. You don’t put a runner onto a track full of quicksand, stumbling blocks and a massive wind pushing in the opposite direction either, do you?

HTML5 needs to be allowed to convince people that it is a great opportunity because of its flexibility, not by being a pale carbon copy of native apps. This leads to companies considering native as the simpler choice to control everything and force users to download an app where it really is not needed. Tom Morris’ “No I’m not going to download your bullshit app” and the lesser sweary I’d like to use the web my way thank you very much, Quora by Scott Hanselman show that this is already becoming an anti-pattern.

Personally I think the ball is firmly in the court of Android to kill the outdated and limiting stock browser and get an evergreen Chrome out for all devices. I also look for Blackberry 10 to make a splash and for Windows phone and tablets to allow us HTML5 enthusiasts to kick arse. And then there is of course Firefox OS, but this goes without saying as the OS itself is written in HTML5.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Linklib – lets film lovers and filmmakers send time synced links from videos to phones – a WebFWD project

Have you ever googled films and TV-shows while you watch them? Do you think Youtube’s popup annotations in the middle of a video are distracting?

Having shot a documentary about the Pirate Bay for 4 years I wanted to embed links directly into the film to give the audience more nuances in the complex and bizarre story about the Swedish file-sharing site. I constantly google videos I watch.

What problem is Linklib solving?

Linklib lets filmmakers, film fans, journalists and bloggers send time synched links from a full screen video directly to their audiences’ phones. Instead of googling an actor, fact checking an election video or feverishly trying to find the soundtrack to that TV-series, just pick up the phone and the information is right there.

When I stumbled over popcorn.js in 2011 I realized the amazing potential of embedding time synched links into films, but I was still looking for a way to hide the hyperlinks from the fullscreen video.

So we built Linklib, a system that sends time synced links from streamed video to phones. That way you can read up on that actress, fact check that election video or follow that rapper on twitter while you’re watching the video. Without obtrusive annotations in the frame.

Linklib is a free and open library of time synced video commentary. Film directors, journalists and fan communities can add facts and comments to give films more depth and nuances. The system works just as well for feature films, documentaries, music videos, educational and commercical films. Linklib is an open source project that wants to tell better stories by using the open web.

How it works

The basic components of Linklib’s system are a remote, usually a smartphone or a tablet, and a video viewer, typically a computer. The remote shows synchronized links from the video viewer and can send and receive events such as play, pause, forward and rewind. To sync the phone with the video we show a QR code that you can scan with your phone. At the moment our video viewer can show youtube, vimeo and html5 video streams.

A lobby server handles the communication between the remote and the video. The remote uses socket.io to communicate with the lobby server and is written in JavaScript.

For users to be able to add videos and create link feeds of their own we’ve built a web based authoring tool focused on simplicity. The tool is built using Twitter bootstrap and jQuery. All links and account information are stored on a mysql database on Amazon AWS.


  • Remote – shows synchronized links from the Video Viwer and can send receive events such as play, pause, forward and rewind.
  • Video Viewer – Shows a youtube or vimeo stream.
  • Lobby server – handles communication between Remote and Video Viewer
  • Authoring Tool – Web based system that allows users to add videos and create link flows for them

APIs and Libraries

  • Remote uses socket.io to communicate with Lobby server and is written in JavaScript.
  • Lobby server is based on node.js
  • Video viewer uses popcorn.js to play videos
  • All links and account information are store on a mysql database on Amazon AWS
  • Authoring Tool uses Twitter bootstrap and jQuery

Help us test out Linklib

Are you a filmmaker looking for a way to tie closer bonds to your audience? Or a Game of Thrones-fan looking for a way to fill your favorite episode with geeky references? Maybe you want to throw in a bunch of research that you couldn’t explain in your last conference video? Or you’re a fashion designer that wants to reveal the details of your catwalk? If you’re a film producer you could fill your youtube trailer with your characters’ social media and reviews, like the great documentary Indiegame: The Movie here beneath.

You can also add mashups and remixes to that banging new Outkast music video! And help activists worldwide spread information that doesn’t make the mainstream news! Linklib puts the web into videos without ruining the traditional viewing experience.

We just launched a beta and we’d love your feedback about bugs and features!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

[watching] Salman Khan: Let’s use video to reinvent education

Lately I got into watching TED movies in the gym (free video podcast, 20 minutes, perfect length for a crosstrainer session). Today I checked out Salman Khan’s introduction to the Khan academy and its beginnings:

All in all a great talk and I am a big fan of the Khan academy as a way to give a kick up the backside of education. As Salman explains in the video, most of the time of teachers nowadays is wasted on not interacting with the students. Instead, we apply a “one size fits all” approach to teaching that leaves a lot to be desired and a lot of students in limbo of knowing things. We teach to measure, not to bring knowledge.

What annoyed me about the talk was how US centric it was. Whilst I agree that education is a big issue in the US (which is very ironic seeing how prosperous the country depicts itself) I think a project like that could have even more impact in areas where education is not free and easy to come by. Instead of fighting a system that happily stays inefficient (as it means not learning new things, ironically) this could be a blueprint for areas where you can start from zero.

Khan talks about this briefly at the end explaining that a street kid from Calcutta could watch these movies at night as it needs to work during the day to make money for its family instead of going to school. That makes no sense whatsoever to me. If the family is too poor to have food then surely they won’t have money for a computer and a fast enough connection to see these movies – let alone have the computer literacy for it.

This could work immensely well if Khan academy and others would start facilities like that. Have public libraries and buildings with computers and a connection (this could be chrome books) where people can go and learn. I could see internet cafes world-wide dedicating one sponsored computer to Khan teaching for example.

Saying the content is available to all is not enough – we need also to make the system available. There is already a good start being made by subtitling the videos in other languages. Fun ahead. I think I sign up as a volunteer there.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)