Articles by Jay Patel

Sort by:


  1. Congrats to our October Dev Derby winners!

    Responsive design is more important than ever as people experience the Web on a variety of devices. Web developers can now take advantage of CSS Media Queries to build sites and applications that can be viewed on different screen sizes. So we decided to focus on that for the October Dev Derby.

    For this challenge, developers submitted 15 demos to show what you can do with CSS Media Queries. Check them out so see how they present unique styles and layouts in response to changes in viewing area.

    It was a fairly close race, so join us in congratulating the winners circle:
    October Dev Derby winners - CSS Media Queries

    1st Place: CSS3 Cherry Blossom – Media queries by elufo
    2nd Place: Santa’s Media Queries by tuxie
    3rd Place: Too many fish is the sea by michal.b

    Responsive 3D-Models For Any Device
    Spriting with CSS Media Queries

    Thanks to everyone that participated in the October Dev Derby! Only a couple of days left to participate in the November Dev Derby, so get your Canvas demos in now. Otherwise, start experimenting with IndexedDB for December.

    NOTE: We recently updated our Dev Derby rules to allow developers to participate in multiple contests until they win 1st place. That means if you’ve submitted awesome demos and come up short in the past, you still have a chance to win that top spot in future Dev Derbies… so keep those demos coming!

  2. Located: Winners of the September Dev Derby on Geolocation.

    With more people going mobile and taking the Web with them, we thought Geolocation was a great topic for the September Dev Derby.

    Web developers explored a number of ways to bring your physical location into the Web experience and we had 16 demos submitted for the Dev Derby.

    Voting was tough this month, but once the votes were counted, we had our winners circle:
    Winners of the September Dev Derby - Geolocation

    1st Place: Urban arteries by Jaume Sánchez aka spite
    2nd Place: I Need A… by David aka d-b-f
    3rd Place: Find Street Art by Aaron Has


    Thanks to everyone that participated in the September Dev Derby and congratulations to the winners! A special shout out to Jaume for taking 1st place after submitting amazing demos for the past three Dev Derbies. Check out spite’s MDN profile to see what he’s done in the past.

    NOTE: We recently updated our Dev Derby rules to allow developers to participate in multiple contests until they win 1st place. That means if you’ve submitted awesome demos and come up short in the past, you still have a chance to win that top spot in future Dev Derbies… so keep those demos coming!

    If you’re working on CSS Media Queries, you have a few more days to join the October Dev Derby.

    Or get ready for the joy of painting in the November Dev Derby with Canvas. We’re looking forward to seeing some creative demos next month. So hack on!

  3. Congrats to our August Dev Derby winners!

    For our August Dev Derby, we decided to see what developers could do with the History API.

    We had 11 demos submitted and it was interesting to see how the History API creates new ways to interact with Web content.

    After all the votes were in, we had our August Dev Derby winners!
    August Dev Derby Winners - History API

    1st Place: HTML5 Drawings by Cory Gackenheimer
    2nd Place: Fly, fly! by Michal B.
    3rd Place: Media Memory by Ian Lunn

    History Image Gallery
    HTML5 Address Bar Video Status

    Thanks to everyone that participated in the August Dev Derby… if you want to experiment with Geolocation, you have one more day to join the September Dev Derby.

    Otherwise, October is going to be an amazing month as we explore the possibilities with CSS Media Queries. Whether you’re on a desktop, tablet or mobile phone… show us what you can do to bring the Web to devices of all sizes.

  4. Congrats to our July Dev Derby winners on their amazing HTML5 video demos!

    We shifted gears for July and invited Web developers to have some fun with HTML5 video for Dev Derby.

    We had 15 awesome demos submitted and while there was a lot of entertainment and innovation happening, we had to narrow them down to 5 finalists:

    Facial Recognition and Analytics with HTML5’s Video Tag
    HTML5 Video Voting
    HTML5 VJing Tool
    jQuery VideoBG
    Punch the TV!

    There are so many cool things you can do with HTML5 video on the Web, and our winners circle definitely reflects the possibilities. So join us in congratulating our July Dev Derby winners!

    MDN July Dev Derby winners for HTML5 video

    1st Place: HTML5 Video Voting by Jordan Humphreys
    2nd Place: HTML5 VJing Tool by spite
    3rd Place: Facial Recognition and Analytics with HTML5’s Video Tag by dsg (@dsg: Please update your profile with an email address so we can contact you! Thanks.)

    jQuery VideoBG
    Punch the TV!

    Thanks to everyone that submitted their HTML5 video demos for the July Dev Derby. On to the next race!

    Right now, there are only a few days left to submit your History API demo for August. And coming up next we have Geolocation for September and CSS Media Queries for October. So start experimenting and hack on.

  5. Congratulations to our June Dev Derby winners!

    We kicked off our series of monthly developer challenges in June to see what Web developers could do with CSS3 Animations. Our first ever Dev Derby was a huge success with almost 30 entries and a variety of demos that brought action to the Web without JavaScript. The results have been awesome!

    Early fan favorites included Rofox CSS3 and CSS Nyan Cat, which remain among the most viewed on Demo Studio.

    While all the demos were amazing, we had a tough task in narrowing down the submissions to 5 finalists based on our judging criteria. After careful review and feedback, the following demos surfaced as candidates for our final round of voting:

    Animated menu icons
    Auto-run photo album
    CSS Tricks
    Plan B – Retro Demo

    With those 5 demos left in the running, we brought in our expert judges and a few members of the Mozilla team to vote on the finalists. Judges rated each demo on a scale of 1 – 5 across the following dimensions:

    • Technology – Does the demo showcase the power of open Web technologies?
    • Originality – How innovative and unique is the demo?
    • Aesthetics – How good is the visual design and interaction experience?
    • Practicality – How useful is this demo in enhancing the Web today?

    It was a close race and we’re excited to announce that the winners of the June Dev Derby are:

    1st Place: CSS Tricks by Mircea Piturca.
    2nd Place: Animated menu icons by Koen Hendrix.
    3rd Place: Plan B – Retro Demo by matt64.

    Auto-run photo album

    Thanks to everyone that submitted their awesome demos for the June Dev Derby. Up next we have HTML5 video for July, History API for August and Geolocation for September. We look forward to seeing even more great submissions for July and beyond! Hack on.

  6. MDN Learning: A place to ratchet your Web development skills

    If you’re looking to improve your Web development skills, we have compiled some great resources from around the Web to help every level of developer dig into their favorite open Web technologies. Our new MDN Learning space serves as a starting point for anyone interested in learning more about Web development. While there is already awesome documentation on MDN, not everyone knows how to find it — or other great tutorials and examples scattered around the Web. There is just so much content out there, we felt it was time to create a central place developers can go to quickly find the best resources.

    MDN Learning

    Our initial set of pages focus on documentation, tutorials, and other content for learning HTML, CSS and JavaScript. We will continue to add new content, including MDN Learning pages for topics like video, audio, webGL, etc. We also plan to use this new space to share more information about our collaboration with other organizations and projects that are developing open models around education, like P2PU’s School of Webcraft.

    This launch of MDN Learning is just the beginning of what we hope will become a permanent place on MDN for everything related to educating people about Web development and the resources available to them on not just MDN, but around the Web. We look forward to feedback and suggestions on how we can improve on this first step towards expanding MDN to cater to those getting started with developing for the Web.

  7. Show off your HTML5 skillz with Demo Studio!

    Are you on the leading edge of Web technology? Do you want to show the world what you and the Web can do?

    New technologies introduced in the latest Web standards like HTML5 are enabling rich experiences on the Internet that were not possible even just a year ago. While many websites continue with the tried and true, some are beginning to experiment with new features and functionality. And then there are Web developers who are pushing the limits of modern Web browsers like Firefox 4 to pave the way for the future. If you’re one of them, Demo Studio is your place for sharing your most innovative work.

    We recently launched the Web O’ Wonder website for consumers to experience some of what’s possible with Firefox 4. Those demos are a great start to showcasing the power of the Web, but the latest Web standards and open technologies make possible so much more. So let those demos inspire you to create even more amazing ways for people to experience the Web. Help us build a collection of the best demos on the Web at Demo Studio.

    Do you have some awesome code that shows off the latest capabilities of HTML5, CSS3 and JavaScript? We invite you to join Demo Studio on MDN to contribute your demos and help everyone learn more about the Web through leading edge examples of what is possible today and a preview of things to come. Become an MDN member and check out Demo Studio today!

  8. Enter the Firefox Mobile Add-ons Cup

    This is a cross-post from the mobile team to invite web developers interested in mobile or add-ons to participate in the Mobile Add-ons Cup.

    The Firefox Mobile Add-ons Cup has arrived!

    Develop a mobile add-on for Firefox and showcase your innovation to millions of mobile users. We’re looking for compatible and innovative add-ons to extend Firefox on the Android and Maemo mobile platforms.

    We’re looking for the best example in each of the categories below:

    * Sports/Games
    * Commerce/ Shopping
    * Geolocation
    * Productivity
    * Sharing/Social
    * Novelty/Innovation

    We invite developers of all experience levels to participate in creating awesome add-ons for Firefox mobile. You’ll be rewarded with fantastic prizes and tons of exposure between now and January 7, 2011 when the contest wraps. Enter now and start creating your add-on today!

    But Wait, There’s More!
    We’ve got a serious panel of judges that include industry experts and mobile visionaries that will be judging the submissions and awarding a winner in each category. The prize for each category winner receives:

    * $1000 in cash
    * Android or Maemo phone of your choice
    * Placement on the Firefox for mobile Start Page
    * Showcased in a Featured Add-ons video distributed across Mozilla channels
    * Blog post and Rock your Firefox spotlight

    Of the 6 finalists, judges will also choose a Best in Show grand prize winner who will receive the above prizes, plus a full conference pass to Mobile World Congress 2011, plus 4 nights accommodation in Barcelona!

    Early Bird Challenge
    The Firefox Mobile Add-on Cup is packed full of exposure and prizes for add-on developers, but we have one more. If your add-on is submitted by December 17, we’ll send you a limited edition Firefox 4 Beta shirt!

    Check the Cup site for more information, rules and resources to help you get started. Good luck!

  9. Add-on Con 2010

    This is a cross-post from Dan Horner of our Add-ons team, who would like to invite any web developers interested in Add-ons and browser extensions in general to Add-on Con.

    Hi All – wanted to use my first post on the Mozilla Developer Network blog to remind you all about Add-on Con which is taking place next Wednesday and Thursday (December 8th and 9th) at the Computer History Museum in Mountain View.

    Add-on Con, as it’s name might suggest is dedicated to Add-ons, and is the only conference focused on Browser’s API’s. As one of the sponsors, we will be hosting Training Sessions on the 8th of December. Learn about Add-ons SDK and how to build restartless add-ons with Myk Melez. Jorge Villalobos will present a session on how to update Add-ons so that they’re ready for Firefox 4, and Mark Finkle will fill you in on everything you need to know about creating and porting Add-ons for Firefox onto mobile devices.

    During the conference on the 9th of December, we will see Keynotes from multiple industry analysts as well as Justin Scott, who will present key learnings from across Mozilla’s Add-On ecosystem. There will be a presentation by Dave Townsend, Jennifer Boriss and Justin Scott, on Firefox 4 & Add-ons from a UX and technical perspective including the new Add-ons Manager. Justin will also present a session giving tips on how to make Add-ons that will delight users.

    Finally our own Jay Sullivan, VP of Products will be on the closing keynote panel discussing the future of the browser.

    It’s not too late to register for the conference and attend our training sessions!

    Building Together Event with Mozilla

    We are also having a social event on Wednesday, 8th of December from 5pm to 9pm, where you can let your hair down, and share your development experiences and ask questions with other likeminded developers and the team from Mozilla. The theme for the social event this year is around “building together” which represents our determination to help developers to continue to build Add-ons, brands, userbases, and presence on mobile platforms.

    Join us for some food, drinks, activities and socializing, please RSVP here:

    Hope to see you all there!

    Dan Horner
    Product Marketing Manager, Add-Ons

  10. It's all about web developers!

    Ever wonder which industries have the most web developers? Do you know how many people develop for the web on Linux? Are there more web designers out there than web developers? Where do web developers hang out and what do they think of the resources out there today? Which JavaScript library is the most popular? How many developers use Google Code or visit the MDN for documentation?

    We wanted to get answers to those questions and more… so we reached out to our community and beyond. We ended up with a snapshot of the web developers out there to better guide our plans for the Mozilla Developer Network. While we know a lot about Mozilla hackers, add-on developers, and those working on mobile, we wanted to learn more about web developers, who are by far the largest segment that we touch. And while there is data available about their demographics and the technologies they use, we couldn’t find anything that would give us a better understanding of where they hang out and what they think of the companies that are working on the products and technologies they build and use.

    We looked at the breakdown of web developers, and of the websites and resources they rely on. We will use the results to improve our documentation on the MDN Doc Center and continue to better engage with web developers. As more mobile app developers adopt the web platform for apps and games we want to encourage web developers to push the limits of web applications. Our demos will showcase what the latest HTML5, CSS3, and JavaScript innovations. We want to use this survey to know what Mozilla can do to help web developers support the open web.

    I’ll summarize the results from the 1,331 responses we received from our “Web Developers & the Open Web 2010” (WDATOW 2010) survey, and share the infographic we created to capture some of the key findings.

    The Infographic

    Web Developers & the Open Web Survey 2010

    Our Sample

    We reached the greatest number of respondents via our Hacks blog and @mozhacks Twitter account, but we were also able to tap into our global community through our localizers, who helped translate the survey into 9 languages: English, Spanish, German, French, Italian, Hungarian, Portuguese, Japanese, and Indonesian. We also posted requests for responses to various developer forums and websites affiliated with other companies, to ensure we had a broad sample that was as representative as possible. Of course we didn’t get as many responses from some of those channels, so the results should be interpreted with the caveat that active Mozilla community members are likely overrepresented.

    However, that does not take away from the value of the information we have gathered. We identified “Mozilla” developers and “Other” developers based on answers to a few questions and found that the cross-over profiles of both categories of people were very similar. You can find out more on page 11 in the full report. We identified both categories based on the overall feedback on Mozilla sites vs other company sites, as well as how often they visited those sites, with those that primarily visited MDN making up the “Mozilla” developers, and those that did not being labeled “Other”. Therefore, while some of the open-ended questions might have a lot of subjective and fairly biased opinions, most of the questions produced fairly consistent responses from both groups when it came to the technologies and resources.

    We had a very diverse set of respondents that spans the entire globe. While most other research has large US samples, with only a few other countries represented, for our survey, only 20% of the respondents were in the US. Given the high response rate from Europe, we ended up with a well-balanced international sample. That’s why some of our results may not look like web developer profiles that you have seen elsewhere. And that’s a good thing: we are providing another data point for comparison and further analysis.

    Web Developer Profiles

    We started the survey with some basic questions that would allow us to segment the developers taking the survey. One interesting finding that didn’t seem to match other research we had looked at was the primary OS used by developers. While we would expect most web developers to be on Mac OS X, followed by Windows and a small percentage on Linux (like in the Web Directions survey), we had a more evenly distributed breakdown. Recent Windows versions combined made up 46%, followed by a strong showing of Linux users at 30%, and Mac OS X with a 24% developer base. I would say that a strong bias towards open source in the sample combined with the fact that we had a lot of responses from outside the US are the reasons for Linux being more popular. Also, while a lot of people self-selected as both a web developer and designer, the sample definitely skews towards web developers, so perhaps that explains the Mac OS X numbers.

    It was also interesting to see the years of experience spread out across veterans and newbies, with about 48% of the sample having less than 5 years of experience and 52% having 6 or more years in web development.

    For our “What type of a web developer/designer are you?” question, respondents were allowed to choose more than one answer, so it’s not surprising to see that a lot of people work on many aspects of web development. However, it was clear that most of them were in one (or both) of two categories: 89% front-end developers and 75% back-end developers. There were more web architects than I expected at 41%, and designers made up a sizable chunk, at 39% of the sample. And although only 15% of those surveyed selected “Add-on developer”, we expect that number to go up as more web developers start to create Firefox extensions with Add-on Builder, using JavaScript rather than heavier-weight programming languages.

    There were no surprises from the industries question, with most web developers working in technology at 38%, followed by media at 18%. And while there were smaller percentages working in other industries, 11% of those surveyed were students who have not yet entered the work force. For more on developer profiles see the full report.

    Where Developers Spend Time

    Perhaps the most important series of questions in this survey focused on the web resources and communities that developers rely on for their day-to-day work. Whether it was for looking up documentation or asking questions to debug their code, we wanted to get an idea of the most popular websites for web developers.

    We picked a list of websites based on initial feedback from web developers during the survey design process, and the results clearly show that all of them are popular and engender a lot of opinions on aspects of those sites.

    We not only asked which resource and community was the respondent’s favorite, but also provided a list of attributes for them to rate. was the most popular resource at 32%, followed by and w3schools. And Stack Overflow was by far the most popular developer community at 40%, followed by GitHub and Wikipedia.

    We intentionally included a diverse set of websites in order to see how developers rated them on our list of criteria. Since MDN supports both resources and communities, we wanted to get data on a broad set of sites. Be sure to take a close look at the ratings to see how all the websites did across a number of important attributes. You can find them starting on page 20 of the full report.

    We were looking for a way to find out what works across a variety of site characteristics. For example, our Hacks blog is mostly posts about web technology, the MDN Doc Center is all about documentation, and our various programs and campaigns via Mobile, Add-ons, and Labs provide a more interactive forum for developers to get involved. Based on the ratings and open-ended feedback, we have learned a lot about which existing sites do well in terms of effectiveness, documentation, navigation, aesthetics, etc.

    All of this information is valuable for us as we evaluate and prioritize projects that will help us grow and improve our MDN community.

    Web Technologies

    We also wanted to gauge which technologies developers are using right now. It was no surprise that the web standards trio of HTML, CSS and JavaScript remain the primary set of technologies for most web developers, with usage at over 95% for all three. PHP was also notably still the most popular programming language at 80%, with Python a distant second at 24%, followed by Flash at 22%. To see the complete breakdown of technologies used, as well as what developers identified as “open technologies”, see page 16 in the full report.

    Within JavaScript, jQuery remains the most popular library at 82%. Prototype was used by 16% of the respondents, with Mootools next at 12%, and Yahoo’s YUI coming in at 10%. With so many JS libraries to choose from, we expect that those numbers will continue to shift.

    We also asked which next-generation technologies were interesting to our respondents, and found out that HTML5 video, canvas, and SVG were all important to developers. 3D using WebGL seemed less interesting to them, but that might be due to the technology being not yet ready for prime time and the lack of examples in the wild. We hope to change that with the capabilities in Firefox 4 and beyond.

    Company Affiliated Websites

    Although all of the sites in this category serve different purposes and have varying feature sets, it was still important to get a feel for where developers were spending their time and how they viewed the developer sites from companies like Adobe, Apple, Google, Microsoft, Mozilla, Oracle, and Sun.

    Given our sample, we expected most developers to have heard of and frequently visited Google’s and Mozilla’s sites. The data clearly shows both as popular destinations for web developers. But it’s important to note that these two sites offer different benefits to developers. Google Code is a great open source code repository and community, while the MDN website remains a very popular web documentation resource.

    The other sites are mostly focused on promoting and supporting the company’s products and technologies, so it wasn’t surprising to see that many of our respondents had never, or rarely, visited them. Again, given our audience, we expected to see this and it was nice to confirm our assumptions.

    What’s next?

    Our survey report, as well as the high-level data reflected in our infographic, give us a snapshot of the web developers we serve through our MDN website and programs. With the insights from this survey, we now know where in the world our audience is, where they go for information and help, and what they think about the companies that help define the web.

    A few key areas we need to work on right now are localization, documentation, and developer tools. From the knowledge we have gained, we now have data to back up some of the assumptions we have made to date, the details we need to refine our MDN roadmap, and user feedback to guide our developer engagement efforts from a marketing and communications stand point.

    As we kick off the new MDN docs platform project, build out a demo gallery to showcase the latest in HTML5 and CSS3 the web has to offer, and continue to find ways to connect with the web developers that visit us every day, this survey and future developer research will continue to guide us.

    Thanks to everyone who participated and we hope that you find the infographic interesting. We tried to capture the major findings in a way that would allow anyone to quickly get a sense of what the web developer community looks like today. If you’re interested in seeing the full report, it is available at:

    – Jay & the MDN team

    UPDATE: I apologize for anyone that had problems viewing the full report on I did not realize you needed an account to view public slides. The report is now available for download in .pdf, .odp, and .pptx formats.