Mozilla

Articles by John Karahalis

Sort by:

View:

  1. Announcing the winners of the July 2013 Dev Derby!

    This past summer, some of the most passionate and creative web developers out there innovated with the File API in our July Dev Derby contest. After sorting through the entries, an all-star cast of former judges–Peter Lubbers, Eric Shepherd, and David Walsh–decided on three winners and two runners-up.

    Not a contestant? There are other reasons to be excited. Most importantly, all of these demos are completely open-source, making them wonderful lessons in the exciting things you can do with the File API today.

    Dev Derby

    The Results

    Winners

    Runners-up

    Congratulations to these winners! As always, this represents only a small portion of the impressive work submitted to the contest. After you have finished playing with these winning demos, be sure to check out the rest. You will not be disappointed.

    The Dev Derby is currently on hiatus, but will be back before long. In the meantime, head over to the Demo Studio to see some general-interest demos and submit your own.

    Further reading

  2. Announcing the winners of the June 2013 Dev Derby!

    This June, some of the most creative web developers out there pushed the limits of WebGL in our June Dev Derby contest. After sorting through the entries, our expert judges–James Padolsey and Maire Reavy–decided on three winners and three runners-up.

    Not a contestant? There are other reasons to be excited. Most importantly, all of these demos are completely open-source, making them wonderful lessons in the exciting things you can do with WebGL today.

    Dev Derby

    The Results

    Winners

    Runners-up

    Congratulations to these winners and to everyone who competed! The Web is a better, more expansive place because of their efforts.

    Further reading

  3. Interview with Micah Elizabeth Scott, winner of the Web Workers Dev Derby

    Micah Elizabeth ScottMicah Elizabeth Scott won the Web Workers Dev Derby with Zen photon garden, her impressive (and fun) interactive web raytracer. Recently, I had the chance to learn more about Micah: her work, her ambitions, and her thoughts on the future of web development.

    The interview

    How did you become interested in web development?

    I’ve been into building things for as long as I can remember. I love
    making things, and I’ll often learn new tools just for the sake of
    giving myself a different set of challenges and constraints to work
    with. My first big web project was an early collaboration tool for
    open source development, dubbed “CIA” because it spies on your source
    code commits.

    Can you tell us a little about how Zen photon garden works?

    Zen photon garden is a type of raytracer, which is to say it simulates
    the path that individual rays of light take as they bounce around in a
    scene. It’s a two-dimensional raytracer though, which opens up kind of
    a neat new possibility for visualizing how light works.

    A traditional three-dimensional raytracer traces rays “backwards”,
    casting rays out from each pixel on a virtual camera, bouncing it off
    of the objects in your scene, until it finally reaches a source of
    light. Each pixel of the scene comes about by counting, on average,
    how many photons would reach that portion of the virtual camera.

    In Zen photon garden, light rays emanate from a lamp and move along
    the image plane in two dimensions. Instead of visualizing the single
    point where a ray reaches the camera, I visualize the entire ray as it
    bounces through the scene. Each ray turns into a sequence of line
    segments, beginning at the light source and bouncing off of any number
    of objects before it’s eventually absorbed. This process repeats
    hundreds of thousands of times, and the image you see is a statistical
    average of these many light rays.

    The inner loop of Zen photon garden is quite specialized. For each
    light ray, I need to trace its path by intersecting it with the
    objects in the scene, and each segment of this path is visualized by
    drawing an anti-aliased line into a high-dynamic-range 32-bit
    accumulation buffer. After tracing a bunch of these rays, the
    high-dynamic-range buffer is mapped to an 8-bit-per-channel image
    according to the current camera exposure setting, and that image is
    drawn to a Canvas.

    These anti-aliased lines need to be fast and very high quality. Any
    errors in the uniformity of the line’s brightness, for example, will
    affect the smoothness of the final image. To get the combination of
    speed and accuracy I need, this line drawing algorithm is implemented
    in pure Javascript by a pool of Web Worker threads. This pool has to
    be managed carefully so that the app can draw with high throughput
    when you leave it alone, but it can still respond with low latency
    when you’re interactively adding objects to the scene.

    What was your biggest challenge in developing Zen photon garden?

    The hardest part of implementing Zen photon garden was making it run
    as fast as possible on all of the latest web browsers. Thankfully
    these days it’s relatively easy to write an app that runs on all
    browsers, but making it run optimally is tricky when your application
    is CPU-bound. Small changes to the inner loops would cause big
    differences in how well each Javascript engine’s optimizer performs.
    This required a lot of trial and error, and a few trips back to the
    drawing board.

    What makes the web an exciting platform for you?

    To me the killer feature of the web is its universality. Modern web
    browsers are nearly ubiquitous, and it’s the fastest way to take a
    weird new experimental concept and get it into people’s hands right
    now. As someone who loves exploring the intersection of art and
    technology, this means it’s finally possible to send your friends a
    link to your latest art project without having to worry about what
    operating system they’re using or whether they have the right library
    dependencies installed.

    What new web technologies are you most excited about?

    WebGL is really exciting to me, but as someone who used to write
    graphics drivers and worry about security for a living it also kind of
    terrifies me!

    The web technology I’m most excited about would have to be asm.js
    actually. I’ve always enjoyed getting my hands dirty with low-level
    graphics code, and even in today’s world of GPU acceleration and
    high-level 2D canvas APIs, I still find plenty of reasons to push
    pixels. Having a way to get near-native performance in a very reliable
    way across all major browsers would open up some great new creative
    possibilities, and I’m excited to see where that leads.

    If you could change one thing about the web, what would it be?

    It’d be great if we could find a way to ease the tension between those
    who see the web as a content platform and those who see it as a
    software operating system. Right now it feels like HTML is too
    unwieldy to be a document markup language, and it’s just barely
    starting to get the services you’d expect from a modern operating
    environment.

    Do you have any advice for other ambitious web developers?

    Plan to prototype a lot of things, keep the ideas that stick, and
    throw the rest away. Respect the web as a platform, and try to be
    playful about exploring its margins. Understand but don’t begrudge the
    ways in which web programming is different from other kinds of
    programming.

    Further reading

  4. Interview with Giovanny Granada, winner of the Geolocation Dev Derby

    Giovanny Granada won the most recent Geolocation Dev Derby with GoGeoTweet, his wonderful web-based visualization of Twitter activity happening nearby. Recently, I had the chance to learn more about Giovanny: his work, his ambitions, and his thoughts on the future of web development.

    The interview

    How did you become interested in web development?

    I became interested in development because I saw that my motivation was to innovate, create new things, and experiment with different technologies toward the goal of creating new and complete tools.

    Can you tell us a little about how GoGeoTweet works?

    The application works by using the Geolocation API and the Twitter API to show Tweets published within 1km of you–a very useful tool if you’re at an event or a special place and would like to know what Twitter users are saying.

    What was your biggest challenge in developing GoGeoTweet?

    The biggest challenge was using the Geolocation API and the Twitter API show to show only Tweets within a 1km radius.

    What makes the web an exciting platform for you?

    The ability to create things using technologies of all types and obtain great results. Building free alternatives that are full of new experiences and that share knowledge is something you can only do on the web.

    What new web technologies are you most excited about?

    Right now I’m excited to explore and learn about WebGL, HTML5 and all of the Web APIs that are making the web better.

    If you could change one thing about the web, what would it be?

    I would change web standards to limit the way applications can be created (for example, prohibiting Flash), to discourage applications that do not use modern technologies. I am totally sure that the web would be better if that changed.

    Do you have any advice for other ambitious web developers?

    If you can imagine you can create! Let’s do it! There are no limits!

    Further reading

  5. Interview with Sebastian Dorn, winner of the Drag and Drop Dev Derby

    Sebastian DornSebastian Dorn won the Drag and Drop Dev Derby with Pete’s Adventure, his wonderful web-based interactive story. Recently, I had the chance to learn more about Seba: his work, his ambitions, and his thoughts on the future of web development.

    The interview

    How did you become interested in web development?

    I think it was around the time I was in middle school. My father read an
    IT magazine and since I was at least a little bit interested, I flicked
    through it as well. There was a series in it about building web sites
    and I thought “I want to try that, building my own site”.

    So I built my first frames-using, table-layouted, GIF-plastered web
    sites–every atrocity you can imagine and some more–using HTML and
    CSS, but without knowing that something like CSS classes existed. Some
    time later I found a free host and put my “Hello, this is me” site
    online. Some years later I became interested in blogging, so I started
    learning PHP and MySQL to write my own CMS.

    Can you tell us a little about how Pete’s Adventure works?

    My goal was to show some other aspect of Drag&Drop in each level:
    Reading meta data like the file size from a dropped file, displaying a
    dropped image or dragging an HTML element from inside the page around.
    There isn’t really anything special in the code. Each level has its own
    JS file with functions to prepare the stage by adding HTML and event
    listeners.

    What was your biggest challenge in developing Pete’s Adventure?

    Not really anything that had to do with coding. At first, I wanted to
    use better drawings. But some horribly misshapen Petes later I gave up
    on that and went ahead with the pixelated look you can see now.

    Then there is the sound and music. I probably sat two hours at the piano
    keyboard, trying to come up with melodies which could be easily looped.
    This was the first time since the recorder lessons in middle school that
    I tried to compose.

    Ah, well, I got a little… agitated while trying to get the drop part of
    Drag&Drop to work for the level where you drag the slimey note to Pete.
    It only works in Firefox when you give the dragged element some transfer
    data, for example an empty string.

    What makes the web an exciting platform for you?

    How easy it is to create and share. Even without a server backend you
    can build exciting demos in HTML/CSS/JS and then just upload it
    somewhere, toss a friend the link and they can see it. To view it, other
    people only need an up-to-date browser–no plugins, no worrying about
    OS compatibility.

    What new web technologies are you most excited about?

    Basically everything that helps making plugins obsolete.

    I wonder if there will be more 3D in-browser rendering with WebGL in the
    future. Animated, interactive films? Games? CAD software?

    Firefox OS and building apps only with JavaScript sounds interesting,
    too. I’m not really that much into mobile development at the moment, but
    I’m interested in how that will develop. Will it become a really good
    alternative to iOS/Android? Or will it end as obscure toy for enthusiasts?

    If you could change one thing about the web, what would it be?

    Making the Internet immune to large scale blocking and censoring. No
    government should be able to cut off the communication channels of its
    people.

    On a less political note: I would be very pleased to see the same audio,
    video and image formats supported in every browser. Finding out that
    WebKit doesn’t support APNG was as a surprise for me.

    Do you have any advice for other ambitious web developers?

    Learning a new language or feature thereof works better, if you put some
    motivation behind it. Maybe you can build an useful browser extension
    with it, or some fascinating demo to show off. Make it fun!

    For other great advice I’d like to quote Jake from Adventure Time:
    “Sucking at something is the first step to becoming sorta good at
    something.”

    Further reading

  6. Announcing the winners of the May 2013 Dev Derby

    This May, some of the most creative web developers out there pushed the limits of getUserMedia in our May Dev Derby contest. After sorting through the entries, our four expert judges–James Padolsey, Janet Swisher, Maire Reavy, and Randell Jesup–decided on three winners and two runners-up.

    Not a contestant? There are other reasons to be excited. Most importantly, all of these demos are completely open-source, making them wonderful lessons in the exciting things you can do with getUserMedia today.

    Dev Derby

    The results

    Winners

    Runners-up

    To call these entries mind-blowing would be an understatement. I would say they left me speechless, but quite the opposite was true–I found myself sharing them with everyone I could. Naming just a few winners was especially difficult this month, so please join me in congratulating all of our competitors for making the web so much more exciting than it was just a couple of months ago.

    Want to get a head start on an upcoming Derby? We are accepting demos related to the File API in our ongoing July contest. Head over to the Dev Derby to get started.

    Further reading

  7. Interview with Parashuram Narasimhan, winner of the Offline Dev Derby

    Parashuram Narasimhan won the Offline Dev Derby with The conference, his web utility for beating unreliable conference connectivity. Recently, I had the chance to learn more about Parashuram: his work, his ambitions, and his thoughts on the future of web development.

    The interview

    How did you become interested in web development?

    Like most computer science majors, I started with systems programming. However, during the early days of Firefox, I used to play around with Venkman (before Firebug) and other Firefox developer tools to take a peek at how web pages were written. The undocumented and nascent web platform got me interested, and I found myself hacking around the limitations of the web platform. That is how I started writing code for the web.

    Can you tell us a little about how The conference works?

    The conference is a set of static HTML pages that sync data with a remote CORS enabled CouchDB server. The Sync functionality is taken care by PouchDB which implements the Couch synchronization protocol.

    With no server side code, all functionality and interactions are handled using on Backbone.js the browser. The static pages are styled using Twitter Bootstrap and are responsive for the mobile too.

    What was your biggest challenge in developing The conference?

    IndexedDB is not supported by all browsers today. Given the nature of the application, it was important for it to run on mobile devices that are easiest to use between sessions in a conference. Getting WiFi right at conferences is also hard, and the application had to work great with flaky connectivity. I had to use the IndexedDB polyfill to ensure that it runs across all browser, and even on mobile platforms.

    What makes the web an exciting platform for you?

    The openness of the web is the most exciting part. I just joined Microsoft Open Technologies and I am able to see how the open nature of the web is helping me with a lot of interesting projects at large scale. That combined with the current limitations is a great breeding ground for hackers and tinkerers to show amazing innovation. I like the idea of having to write once, and see it working everywhere. I am glad to see the web flowing out of the browser into systems like B2G and Windows 8.

    What new web technologies are you most excited about?

    Offline storage has always been my favourite and I would love to see it gain more traction. I am also impressed by the work done on pointer events and the efficiency at which the W3C working group is finalizing the standards. I also follow WebRTC and CSS3.

    If you could change one thing about the web, what would it be?

    The web seemed to have frozen before the HTML5 revolution. This was the time when native applications seem to become popular. I wish the web platforms had moved as fast, so that app developers considered it an alternative to writing applications for specific platforms. Looks like its getting there though.

    Do you have any advice for other ambitious web developers?

    In a project, the best code is the code that is not written. With so many web developers working on the web, I usually don’t have to reinvent the wheel and can always reuse someone else’s well tested code. It is good that I am embarrassed about the code I wrote in the past–it just tells me that I maturing as a programmer :P

    Further reading

  8. Interview with Koen Kivits, winner of the Multi-touch Dev Derby

    Koen Kivits won the Multi-touch Dev Derby with TouchCycle, his wonderful TRON-inspired mobile game. Recently, I had the chance to learn more about Koen: his work, his ambitions, and his thoughts on the future of web development.

    Koen Kivits

    The interview

    How did you become interested in web development?

    I’ve been creating websites since high school, but I didn’t really get serious about web development until I started working two and a half years ago. I wasn’t specifically hired for web development, but I kind of ended up there. I came in just as our company was launching a major new web based product, which has grown immensely since then. The challenges we faced during this ongoing growth and how we were able to solve them really made me view the web as a serious platform.

    Can you tell us a little about how TouchCycle works?

    The game itself basically consists of an arena with 2 or more players on it. Each player has a position and a target to which it is moving. As each player moves, it leaves a trail in the arena.

    Each segment in a player’s trail is defined as simple linear equation, which makes it really easy to calculate intersections between segments. Collision detection is then done by checking whether a player’s upcoming trail segment intersects with an already existing trail segment.

    The arena is drawn on a <canvas> element that is sized to fit the screen when the game starts. The <canvas> has 3 touch event handlers registered to it:

    • touchstart: register nearest unregistered player (if any) to the new touch and set its target
    • touchmove: update the target of the player that is registered to the moving touch
    • touchend: unregister the player

    Any touch events on the document itself are cancelled while the game is running in order to prevent any scrolling and zooming.

    Everything around the main game (the menus, the notifications, etc.) is just plain HTML. Menu navigation is done with HTML anchors and a hashchange event handler that hides or shows content relevant to the current URL. Note that this means you can use your browser’s back and forward buttons to navigate within the game.

    What was your biggest challenge in developing TouchCycle?

    Multitouch interaction was completely new to me and I had done very little work with the <canvas> element before, so it took me a while to read up on everything and get to work. I also had to spend some time tweaking the collision detection and the way a player follows your touch in order to not have players crash into their own trails easily.

    What makes the web an exciting platform for you?

    The openness of the platform, in several ways. Anyone with an internet connection can access the web using any device running a browser. Anyone can publish to the web–there’s no license required, no approval process and no being locked in to a specific vendor. Anyone can open up their browser’s developer tools to see how an app works and even tinker with it. Anyone can even contribute to the standards that make up the very platform itself!

    What new web technologies are you most excited about?

    I’m probably most excited about WebRTC. It opens up a lot of possibilities for web developers, especially when mobile support increases. For example, just think of how combining WebRTC, the Geolocation API and Device Orientation API would make for an awesome augmented reality app. The possibilities are limitless.

    If you could change one thing about the web, what would it be?

    I really like how the web is a collaborative effort. A problem of that collaboration, however, is conflicting interests leading to delayed or crippled new standards. A good example is the HTML <video> element, which I think is still not very usable today despite being such a basic feature.

    Browser vendors should be allowed some flexibility in the formats they support, but I think it would be a good thing if there was a minimum requirement of supporting at least 1 common open format.

    Do you have any advice for other ambitious web developers?

    As a developer I think I’ve learnt most from reading other people’s code. If you like a library or web app, it really pays to spend some time analysing its source code. It can be really inspiring to look at how other people solve problems; it can give you pointers on how to structure your own code and it can teach you about technologies you didn’t even know about.

    Also, don’t be afraid to read the specification of a standard every now and then to really learn about the technologies you’re using.

    Further reading

  9. Announcing an administrative change to the Dev Derby

    Today we would like to announce an administrative change to the Dev Derby, our monthly web development contest.

    Dev Derby

    The day-to-day operations of the Derby have historically been overseen by just one Mozilla staff member. This worked for a while, but the scope of the project has made the approach less and less realistic over time–keeping the lights on can alone require more time than any one person has to offer. Meanwhile, the wider Mozilla community has been doing an incredible job extending the contest in ways none could have imagined. They have started a blossoming online community of Dev Derby participants, have run several Derby-themed workshops in Toronto (complete with expert speakers, passionate attendees, and lots of pizza), and have even taken the first steps toward running these workshops around the world.

    Giving these wonderful volunteers ownership of the project just makes sense. They can do more than any one Mozilla staff member, and their creativity will undoubtedly lead to many exciting new contest improvements. As a result, we have decided to hand operations of the Dev Derby off to Kensie Connor–who has been leading many of these efforts–and others from the best community out there.

    The Dev Derby will take a short break from August to October so that we can prepare for this change. The July contest will run as usual, and the winners of previous contests will be announced and rewarded just as they always have, but a new contest will not begin until November. The November contest may bring some changes to the contest format, but the mission of providing a platform that helps web developers learn, share, and push the web forward will remain the same. Of course, we welcome your feedback in the comments section as we start to think about new opportunities.

    We also welcome you to leave a comment if you have any questions about this transition. We hope that this initial announcement will be the start of a longer discussion, one that will foster a bright future for this important project.

  10. Announcing the winners of the April 2013 Dev Derby!

    This past April, some of the most creative web developers out there showed us what they could do with Web Workers in the April Dev Derby contest. After looking through the entries, our expert judges–James Padolsey, Janet Swisher, Maire Reavy, and Randell Jesup–decided on three winners and two runners-up.

    Not a contestant? There are other reasons to be excited. Most importantly, all of these demos are completely open-source, making them wonderful lessons in the exciting things you can do with Web Workers today.

    Dev Derby

    The Results

    Winners

    Runners-up

    April was the month of the newcomer. If you have ever doubted your ability to make a difference on the web, just look at these results and think again. As always, it was difficult to name just a few winners, so please join me in congratulating all of our competitors for making the web a more exciting and a more responsive place.

    Want to get a head start on an upcoming Derby? We are now accepting demos related to WebGL (June) and the File API (July). Head over to the Dev Derby to get started.

    Further reading