Mozilla

Articles by Havi Hoffman

Sort by:

View:

  1. Build Your Next App With a Flame

    Earlier this week, we introduced Flame, the Firefox OS reference device for developers, testers and reviewers from T2Mobile, and announced the opening of the everbuying.com pre-order page. The Flame retails at $170 (USD), global shipping included.

    Wanted: Engaging apps for Firefox OS

    Flame2If you are an experienced HTML5 app developer with a published, well-rated app that you’d like to port to Firefox OS, we’d love to hear from you! It’s always exciting to discover topnotch apps (such as PhoneGap app Find the Movie, pictured to the right running on a Flame) and see them ported from native platforms to Firefox OS. We currently have a small inventory of Flame phones for qualified HTML5 app developers with published, well-rated apps.

    How to qualify

    Through our ongoing Phones for Apps program, there’s an opportunity now for a limited number of invited app developers to receive Flame devices in exchange for a commitment to port their qualifying HTML5 apps within a month of receiving the device. Please apply here.

    There are only three ways to qualify:

    1. You’ve built a successful, well-rated HTML5 app on another platform (such as Amazon Web Apps, Blackberry WebWorks, Chrome Web Store, WebOS, Windows Phone or the PhoneGap store) and are ready to port it now to Firefox OS.
    2. You’ve built a successful, well-rated native app for iOS or Android using a cross-platform wrapper like Cordova or PhoneGap and are ready to port it to Firefox OS. Be sure to indicate the cross-platform tool you used.
    3. You’ve already published a well-rated app in Firefox Marketplace, and you have a second app in progress or already built, and are ready to port it now to Firefox OS.

    Resources

    • Learn more about the Flame (Mozilla Developer Network)
    • Get started with Open Web Apps (Mozilla Developer Network)
    • Mark your calendars for Marketplace Day, June 26 – it’s all about Apps and how you can contribute – as app developers, testers, reviewers and localizers. Hope you can join us!
  2. Firefox OS App Workshop Prague

    Update:This event will be rescheduled for Autumn 2014. We are designing the workshop with a new regional focus and aim to re-open the invitation request form with a confirmed date and venue before the summer starts. Please stay tuned here on the Hacks blog.

    Back in March, Mozilla tech evangelist Frédéric Harper visited Prague in the Czech Republic and gave a talk at the local Prague JavaScript meetup. His presentation, Empower Mobile Web Developers With JavaScript and WebAPI introduced a roomful of Czech JavaScripters to Firefox OS, Open Web Apps, and our recent integration with Apache Cordova and Adobe PhoneGap. PhoneGap/Cordova developers who’ve built native apps for other platforms and stores can now port PhoneGap-built apps to Firefox OS.

    Just as sure as the coming of summer, Firefox OS is coming to the Czech Republic in 2014, and Fred and friends are heading back to Prague to host a full-day, invitation-only Firefox OS App Workshop on Saturday, June 28. There will be phones! All participants will receive a developer device to test and demo their apps, and to keep for future app development. For free.

    Requirements: Show us your app

    REQUIRED: To qualify for this free hands-on, technical workshop, you must be able to show us a published HTML5 app that you’re porting to Firefox OS or a working Firefox OS app in progress. Show us a link to your existing app or to working code for the app you’re building.

    Apply now for the Prague App Workshop, June 28, 2014.

    FoxSay500


    NOTE: If you do not provide relevant links to working app code we will not be able to consider your application. Firefox Marketplace currently offers plenty of tic-tac-toe games, sliding puzzles, calculators, and to-do list apps. We love to be impressed by new, original, and locally relevant apps, for work and play.

    In the Czech Republic, we need apps that are in Czech. And if you want to extend the reach of your app by translating it to other languages, we have a pilot localization program to help you.

    What to expect

    This workshop is open to individual developers and teams of up to 4 people. The workshop begins with a technical introduction in English in the morning; the rest of the time is for coding and testing your app using the App Manager that’s built in Firefox Developer Tools. Bring laptops and devices.

    At the close of the day, there will be demos of all the apps in progress. After demos, we’ll all go to dinner. Mozilla will provide food and drink throughout the day of the workshop, but travel and lodging arrangements are up to you. And after the workshop, we will stay in touch while you complete your apps and submit them to Firefox Marketplace.

    Resources

    If you don’t have a Firefox OS app in progress, here are some resources to help you get started. There’s never been a better time:

  3. The Translation of the Firetext App

    The History

    Firetext is an open-source word processor. The project was started in early 2013 by @HRanDEV, @logan-r, and me (@Joshua-S). The goal of the project was to provide a user-friendly editing experience, and to fill a major gap in functionality on Firefox OS.

    Firetext 0.3Firetext 0.3

    In the year since its initiation, Firetext became one of the top ten most popular productivity apps in the Firefox Marketplace. We made a myriad of new additions, and Firetext gained Dropbox integration, enabling users to store documents in the cloud. We also added Night Mode, a feature that automatically adjusts the interface to the surrounding light levels. There was a new interface design, better performance, and web activity support.

    Even with all of these features, Firetext’s audience was rather small. We had only supported the English language, and according to Exploredia, only 17.65% of the world’s population speak English fluently. So, we decided to localize Firetext.

    The Approach

    After reading a Hacks post about Localizing Firefox Apps, we determined to use a combination of webL10n and Google Translate as our localization tools. We decided to localize in the languages known by our contributors (Spanish and German), and then use Google Translate to do the others. Eventually, we planned to grow a community that could contribute translations, instead of just relying on the often erratic machine translations.

    The Discovery

    A few months passed, and still no progress. The task was extremely daunting, and we did not know how to proceed. This stagnation continued until I stumbled upon a second Hacks post, Localizing the Firefox OS Boilerplate App.

    It was like a dream come true. Mozilla had started a program to help smaller app developers with the localization process. We could benefit from their larger contributor pool, while helping them provide a greater number of apps to foreign communities.

    I immediately contacted Mozilla about the program, and was invited to set up a project on Transifex. The game was on!

    The Code

    I started by creating a locales directory that would contain our translation files. I created a locales.ini file in that directory to show webL10n where to find the translations. Finally, I added a folder for each locale.

    locales.ini - Firetext

    I then tagged each translatable element in the html files with a data-l10n-id attribute, and localized alert()s and our other scripted notifications by using webL10n’s document.webL10n.get() or _() function.

    It was time to add the translations. I created a app.properties file in the locales/en_US directory, and referenced it from locales.ini. After doing that, I added all of the strings that were supposed to be translated.

    app.properties - Firetext

    webL10n automatically detects the user’s default locale, but we also needed to be able to change locales manually. To allow this, I added a select in the Firetext settings panel that contained all of the prospective languages.Settings - Firetext

    Even after all of this, Firetext was not really localized; we only had an English translation. This is where Transifex comes into the picture.

    The Translation

    I created a project for Firetext on Transifex, and then added a team for each language on our GitHub issue. I then uploaded the app.properties file as a resource.

    I also uploaded the app description from our manifest.webapp for translation as a separate resource.

    Firetext on Transifex

    Within hours, translations came pouring in. Within the first week, Hebrew, French, and Spanish were completely translated! I added them to our GitHub repository by downloading the translation properties file, and placing it in the appropriate locale directory. I then enabled that language in the settings panel. The entire process was extremely simple and speedy.

    The Submission

    Now that Firetext had been localized, I needed to submit it back to the Mozilla Marketplace.  This was a fairly straight forward process; just download the zip, extract git files, and add in the API key for our error reporting system.

    In less than one day, Firetext was approved, and made available for our global user base.  Firetext is now available in eight different languages, and I can’t wait to see the feedback going forward!

    The Final Thoughts

    In retrospect, probably the most difficult part of localizing Firetext was supporting RTL (Right To Left) languages.  This was a bit of a daunting task, but the results have totally been worth the effort!  All in all, localization was one of the easiest features that we have implemented.

    As Swiss app developer Gerard Tyedmers, creator of grrd’s 4 in a Row and grrd’s Puzzle, said:

    “…I can say that localizing apps is definitely worth the work. It really helps finding new users.

    The l10n.js solution was a very useful tool that was easy to implement. And I am very happy about the fact that I can add more languages with a very small impact on my code…”

    I couldn’t agree more!

    Firetext Editor - Spanish

    Editor’s Note: The Invitation

    Have a great app like Firetext?  You’re invited too!  We encourage you to join Mozilla’s app localization project on Transifex. With a localized app, you can extend your reach to include users from all over the world, and by so doing, help to support a global base of open web app users.

    For translators, mobile app localization presents some interesting translation and interface design challenges. You’ll need to think of the strings you’re working with in mobile scale, as interaction elements on a small screen. The localizer plays an important role in creating an interface that people in different countries can easily use and understand.  Please, get involved with Firetext or one of our other projects.

    This project is just getting started, and we’re learning as we go. If you have questions or issues not addressed by existing resources such the Hacks blog series on app localization, Transifex help pages, and other articles and repos referenced above, you can contact us. We’ll do our best to point you in the right direction. Thanks!

  4. Wanted: Awesome HTML5 app ports for Firefox OS & the Open Web

    A bit of background

    In 2013, Mozilla and our partners launched Firefox OS in fourteen markets. We released three Firefox OS smartphone models and a Geeksphone developer preview device. Our Developer Relations team hosted eight invite-only workshops for app developers around the world: Mountain View, London, Madrid, Bogota, Warsaw, Porto Alegre, Guadalajara, and Budapest. This year, Firefox OS will launch on more devices in more countries around the world. We continue to grow Firefox Marketplace with new and engaging HTML5 apps that run on Firefox OS devices.

    Through our Phones for Apps program, we’ve shipped hundreds of Geeksphones to app developers around the world. Developers like you ported existing HTML5 apps to Firefox OS, and got to keep the developer preview devices we sent. Huge thanks to hundreds of these pioneers in scores of countries who delivered apps to Firefox Marketplace!

    What’s new: Phones for Cordova/PhoneGap ports

    This year we’re focused on finding the very best apps — apps that deliver great experiences and local relevance to Firefox OS users. For HTML5 app developers, powerful cross-platform tools make it easier to build apps for native platforms and to access native device APIs. This week we introduced the Firefox OS Cordova 3.4 integration, which makes it possible to release Cordova apps on the Firefox OS platform. While this is an ongoing project, significant functionality is available now with the 3.4 release of Apache Cordova. Yesterday’s post describes how to use these new capabilities to port your existing app or apps.

    If you’ve already built apps with Cordova/PhoneGap this is a unique opportunity to port your apps quickly and easily. We’ve heard from developers who successfully migrated PhoneGap apps to Firefox OS over a weekend — taking hours, not weeks or months. And we know there are great PhoneGap apps out there. For this reason, the third phase of our popular and successful Phones for Apps program will focus exclusively on app “porters” with currently popular and well-rated Cordova/PhoneGap apps. (NOTE: HTML5 applications can be packaged as native apps via the framework and made available for installation. Cordova is the underlying software in the Adobe product PhoneGap.)

    Who should apply

    Works_w_PhoneGap

    If you’re a Cordova/PhoneGap developer with published HTML5 apps on any platform, we invite you to participate in the Phones for Cordova/PhoneGap Apps program. Show us your well-rated listed app and if it’s a fit for Firefox Marketplace, we’ll ship you a developer device and help you through the process of getting your app into the Firefox Marketplace. Here’s how it works:

    • Apply here: Phones for Cordova/PhoneGap Ports application.
    • All submissions will be reviewed as they are received. We’ll let you know if your application is accepted.
    • Once you commit to porting your app, we’ll send you a device.

    Upcoming Firefox OS workshops & hack events

    In addition to our online Phones for Cordova/PhoneGap Ports program, we plan to host a limited number of invitation-only Firefox OS App Workshops in new locales. We’re excited to announce a workshop in the beautiful city of Prague in the Czech Republic, date to be set next quarter. The enrollment form is open and we are accepting applications from qualified HTML5 developers.

    REQUIRED: You must have a Firefox OS app in progress or a published HTML5 app that you’re porting to Firefox OS. Show us a link to your existing app or to working code for the app you’re building. If you don’t provide relevant links to working app code we will not consider your application.

    Apply now for the Prague App Workshop.

    What if you don’t live near Prague in the Czech Republic? Don’t worry! We plan to offer several other app workshops this year and we’ll announce them here.

    hackday_devices

    Whether you’re just getting started or you’ve already built apps for Firefox OS, there are many hackathons, App Days, and other events hosted or sponsored by Mozillians and happening around the world where you can participate and learn. Find out about community-driven Firefox events hosted by Mozilla Reps as well as talks and events that include Mozilla participants across the planet.

  5. Write Elsewhere, Run on Firefox OS

    Over the last year we’ve been recruiting developers who’ve already built apps for various Open Web and HTML5 platforms: apps for native platforms built with PhoneGap, Appcelerator Titanium or hand-coded wrappers; HTML5 apps built for Amazon Appstore, Blackberry Webworks, Chrome Dev Store, Windows Phone, and WebOS; and C++ apps translated to JavaScript with Emscripten. We’ve supported hundreds of developers and shipped devices all over the world to test and demo Firefox Apps. If you have a well-rated, successful HTML5 app on any platform we urge you to port it to Firefox OS: We’re betting it will be worth your while.

    In November, Firefox OS launched in Hungary, Serbia, Montenegro and Greece. Earlier this month we launched in Italy. In 2014, we launch in new locales with new operators, with new devices in new form factors. We anticipate more powerful cross-platform tools in 2014, and closer integration with PhoneGap and Firefox Developer Tools. It is the best of times for first-mover advantage.

    Here’s a look at just a few of the successful ports we’re aware of. We spoke with skilled HTML5 app developers who’ve participated in “app port” programs and workshops and asked them to describe their Firefox app porting experience.

    RunOnFirefoxOSCaptain Rogers, by Andrzej Mazur; Reditr by Dimitry Vinogradov & David Zorycht; Aquarium Plants by Diego Lopez

    Aquarium Plants (Android w/ hand-coded native wrapper)

    App: Aquarium Plants Developer:Diego Lopez Original platform: Google Play Store

    Time:

    Aquarium Plants is written with our own JavaScript code and simple HTML5 code: we just used two common JavaScript frameworks (Zepto.js and TaffyDB.js). It took me about 3 hours or less. Most of the time was reading forums and documentation.

    Recommendations:

    It is extremely easy to build/port apps for Firefox OS. It is great that we can use web tools and frameworks to create native apps for Firefox OS. I recommend that other developers start developing Firefox Apps; it is almost effortless and a great experience.

    Challenges:

    The only challenge I had was finding out how to build the package. It was amazing when I realized that building for Firefox OS was as easy as creating a zip with the app files and manifest.

    Calc (iOS w/ hand-coded native wrapper)

    App: Calc Developer: Markus Greve Original platform: iOS w/ hand-coded native wrapper

    Time:

    It was really easy. That’s why I would sign the claim “Write Elsewhere, Run on Firefox OS.” I think it took about two evenings with night #1 getting the app to run and night #2 doing some fine-tuning for display size of the simulator and Keon. Afterwards another evening for app icon and deployment to the Marketplace ;-) .

    Recommendations:

    I would recommend that developers give it a try to see how easy it really is. I think Mozilla.org is doing a great job and your support for developers is excellent. I already made a short presentation about how to create FirefoxOS Apps as a documentation of my experiences. You can see it here: A Firefox OS app in five minutes (in English). There’s also a blog post called App Entwicklung fur den Feuerfuchs that documents my experience in German.

    Challenges:

    1. I use OSX 10.9 Mavericks and the Simulator crashed with the old plugin and ran more stably with Firefox 1.26b and app-manager. 2. The need to have a subdomain per app — it seems there’s an open issue with this. 3. Data types in JSON Manifest (I tried “fullscreen”: true instead of “fullscreen”: “true”). My fault: Solved by sticking to the documentation. 4. I have the feeling that the icon sizes are different in the documentation to the sizes really needed for the Marketplace. Also, it’s not sensible to offer a Photoshop-Template for a 60×60 pixel Icon when you need much bigger files elsewhere (256×256 for the store I think). It would be better if you provided a template for 1024 and the user then shrank the images afterwards. 5. Suggestion: The correlation between navigator.mozApp.checkInstalled() and .install() could be explained more comprehensively.

    Calcula Hipoteca – Amazon Appstore

    App: Calcula Hipoteca Developer: Emilio Baena Original platform: Amazon Appstore

    Time:

    It was easy. I took a few hours.

    Recommendations:

    You are doing good work with this platform.

    Challenges:

    I had problems with manifest.webapp, I think that I missed having more documentation about this type of file.

    Captain Rogers (HTML5 Desktop)

    App: Captain Rogers Developer: Andrzej Mazur Original platform: HTML5 Desktop

    Time:

    The whole process of porting Captain Rogers for the Firefox OS platform took me only two weeks of development with an additional two weeks of testing and bug-fixing. In the core concept the game was supposed to be simple so I could focus on the process of polishing it for Firefox OS devices and publishing it in the Firefox Marketplace.

    Challenges:

    There weren’t any big problems, because basically building for Firefox OS is just building for the Web itself. Firefox OS devices are the long-awaited hardware for the mobile web — it is built using JavaScript and HTML5 after all. My main focus on making the game playable on the Firefox OS device was put on the manifest file. I had some problems with getting the orientation to work properly, but during the Firefox OS App Workshop in Warsaw I received great help from Jason Weathersby and at the end of the day the first version of the game was working very smoothly and a few days later it was accepted into the Firefox Marketplace. For optimizing the code I recommend this handy article by Louis Stowasser and Harald Kirschner — it was very helpful for me. Also, the Web Audio API is still a big problem on mobile, but it works perfectly in Captain Rogers, launched on the Firefox OS phone.

    Recommendations:

    The main message is simple: if you’re building HTML5 games for Firefox OS, you’re building them for the Open Web. Firefox OS is the hardware platform that the Web needs and in the long run everybody will benefit from it as the standards and APIs are battle-tested directly on the actual devices by millions of people. If you want to know more about HTML5 game development I can recommend my two creations: my Preparing for Firefox OS article and HTML5 Gamedev Starter list. You should also read this great introduction by Austin Hallock. The community is very helpful, so if you have any problems or issues, check out the HTML5GameDevs forums for help and you will definitely receive it. It’s a great time for HTML5 game development, so jump in and have fun!.

    Cartelera Panama (Appcelerator Titanium)

    App: Cartelera Panama Developer: Demostenes Garcia Original platform/wrapper: Appcelerator Titanium

    Time:

    It was pretty easy to get up to speed on the development flow for Cartelera. The development for Firefox OS is easy, since it’s well documented and HTML5 + JavaScript makes it *really* easy to make apps.

    Challenges:

    Our UX/UI team at Pixmat Studios is very centered on usability, and that’s why we choose Titanium over PhoneGap (better user experience) so our main challenge was to make it look as a real Firefox OS application. In the end, we decided to go with real Firefox OS Building Blocks, instead of using Titanium for the UI. We decided to:

    • Extract all the business logic for the App (which handles the schedules, movies, listings, etc.) to its own Git repository/module. Then we reuse everything on Titanium and Firefox OS, using native user experience for all the three platforms we now accept.
    • Another issue we had was to actually implement an OAuth client on our phone in a good way. However Jason Weathersby pointed out good resources on that matter for us.

    Recommendations:

    Firefox OS and the environment (debug, etc) is easy for a regular web developer, so we didn’t need extra knowledge for making real mobile apps.

    • Use Firefox OS Building Blocks for UI. It’s easy to get a native UI experience with no fuzz.
    • Firefox OS at the Mozilla MDN will be your best friend :-).
    • GitHub has some good projects to learn from, so create an account (if you still don’t have one) and look for demo projects.

    Fresh Food Finder (PhoneGap)

    App: Fresh Food Finder Developer: Andrew Trice Original platform/wrapper: PhoneGap

    Time:

    PhoneGap support is coming for Firefox OS, and in preparation I wanted to become familiar with the Firefox OS development environment and platform ecosystem. So… I ported the Fresh Food Finder, minus the specific PhoneGap API calls. The best part (and this really shows the power of web-standards based development) is that I was able to take the existing PhoneGap codebase, turn it into a Firefox OS app AND submit it to the Firefox Marketplace in under 24 hours!

    Recommendations:

    Basically, I commented out the PhoneGap-specific API calls, added a few minor bug fixes, and added a few Firefox-OS specific layout/styling changes (just a few minor things so that my app looked right on the device). Then you put in a mainfest.webapp configuration file, package it up, then submit it to the Marketplace. If you’re interested, you can check out progress on Firefox OS support in the Cordova project, and it will be available on PhoneGap.com once it’s actually released. (Editor’s note: Look for release news in early 2014.)

    Picross (WebOS)

    Picross: Picross Developer: Owen Swerkstrom Original platform: WebOS

    Time:

    Picross was installed and running on FxOS within minutes of getting my hands on a device.

    Challenges:

    I did have to make some touch API tweaks, but that just meant some quick reading.

    Recommendations:

    My favorite quote was “You’re not porting to FirefoxOS, you’re porting to the Web!” Also, Firefox OS (and Firefox browser) Canvas support is sensational. My next game will use Canvas, for sure. In my case, the “porting” path was really simple. My game already ran in a browser, and it had originally been designed to run on the Palm Pre, a device with the exact same resolution as the lowest-end FirefoxOS phone. But the concept of installing an app involves nothing more than visiting a website: that’s what really made it painless, and that is what’s really unique about FirefoxOS. It has an “official” app marketplace, but unlike every other smartphone ever made, it doesn’t _need_ one! As a user, this is liberating. I can install any web app, from any site I want. As a developer, the story’s even better. I don’t even need Mozilla’s permission to publish an app on this platform. I don’t need to put my device into a special developer mode, or buy any toolkit, or build on any specific platform. If I can put up a website, I’m good to go. Even though I just called it “unnecessary”, the Firefox Marketplace has given me nothing but good experiences. I don’t need to bundle up, sign, and upload any package — I just enter a URL and type up some descriptive blurbs. Review times have always been short, and are even quicker now than when I started. When I submitted Halloween Artist, it was approved almost immediately, and the reviewer suggested that I write up a blog entry for Mozilla Hacks about how I’d put it together. This is both a traditional “marketplace” with the featured apps etc, and a community of geeks celebrating interesting code and novel ideas. That is absolutely the world I want my apps to live in. Before I went to the Mozilla workshop, I was considering what approach to take for an action/adventure game that I’m still working on. I was torn between writing some C OpenGL code, waiting for the not-yet-released-at-the-time SDL 2.0, or, as a longshot, doing at least some prototyping in HTML5 canvas. After learning that Canvas operations on a FirefoxOS phone basically go right to the framebuffer, and after trying some experiments and seeing for myself the insane performance I could get out of these cheap little ARM devices, I knew I’d be ditching C for the project and writing the game as a web app. I’d highly recommend investigating Canvas for your next game, even if you’ve mostly done Flash or SDL etc. before.

    Reditr (Chrome Dev Store)

    App: Reditr Developer: Dimitry Vinogradov & David Zorycht Original platform: Chrome Dev Store

    Time:

    It took us about a week to port everything over from Chrome to Firefox OS.

    Challenges:

    One challenge we faced when creating Reditr for Firefox OS was the content security policy (CSP). One of the great things about web applications for users is that they can see an entire overview of the permissions that a given app requires. For developers though, it can take some time to learn how to create a content security policy. For Reditr, it took us several days of trial and error to learn how the security policy effected our app.

    Recommendations:

    Make sure you understand how your app deals with the content security policy. Check to see if the APIs you use have oAuth support since this can help remedy CSP issues.

    Speed Cube Timer – Blackberry Webworks

    App: Speed Cuber Timer Developer:Konstantinos Mavrodis Original platform: Blackberry Webworks

    Time:

    It took about half an hour to make the exported web app compatible with Firefox OS. (Insanely fast, don’t you think? :) )

    Challenges:

    No real challenges here that I can recall of. Everything was almost a piece of cake!

    Recommendations:

    My recommendation to fellow devs would be them to port their HTML5 apps to Firefox OS as soon as possible! Porting a Web app has never been easier. Firefox OS is a promising OS that shows the great power of Web Development!

    Squarez (C++)

    App: Squarez Developer: Patrick Nicolas Original platform: C++ with Emscripten

    Emscripten and C++ usage:

    I have always preferred statically typed and compiled languages as they fit better with my way of organizing software. There are several options with Emscripten, and I have decided to write the game logic in C++ and the user interface in HTML/CSS/JavaScript. All the logic code is in C++, and for multiplayer mode, server can reuse everything and only has roughly 500 additional lines of code.

    Time:

    The game has always been a web project: the initial development, from scratch, took nearly 1 month. Porting it to be a Firefox application only took a couple of days, in order to make the manifests and icons. Performance tweaking has been a complex task and took nearly as much time as the rest of development.

    Challenges:

    Squarez is the first game I have ever written and it is the first time I have used Emscripten, that was the first challenge. Writing a web application is not really a challenge any more, because good quality documentation is available everywhere. Second challenge was tweaking performance, once I had received the Geeksphone Keon, I saw that the game was so slow that it was almost unplayable. I have used performance tools from native compiled code and both desktop Firefox and Chromium to find the bottlenecks. Because of Emscripten JavaScript generation, it was not very easy to track the faulty functions, I had to deal with partially mangled names in profile view. The following step was to optimize CSS, and I have only found tools to check time spent in selector processing. It is impossible to know which specific animation is taking time, I had to use very manual methods and try disabling individual ones, guess what is taking time and change it blindly.

    Recommendations:

    My recommendation for other developers is to choose technologies they like; I wanted structured and statically typed code, so Emscripten/C++ was a great solution. I would also discourage creating an application that only works in Firefox OS, but take advantage of standards to make it available to any browser and have Web APIs used to enhance the application. If you want to also include a link to the code repository, it is available at squarez.git. Everything is GPLv3+, fork it if you want.

    Touch 12i (Windows Phone)

    App: Touch 12i Developer: Elvis Pfutzenreuter Original platform: HTML5 for Windows Phone (and other platforms)

    Time:

    It took one day to do the bulk of the work, and another day for final details, including registration in Marketplace. Later, I added payment receipt checking which took me the best part of a day since it needs to be well tested. But this effort could be reused readily for another app (Touch 11i).

    Challenges:

    In general, porting was very easy. I put it to work in one day. The biggest problem was the viewport: that works differently in other platforms (all Webkit-based). For Firefox, I had to use a CSS transform-based approach to fit the calculator in screen. Touch 12i is an HTML5 app that runs on Windows Phones and it works in the same way for Android and iOS too: a “shell” of native code with a Web component that cradles the main program. Currently the Firefox version is the only one that is “purely” HTML5. (I used to have a pure Web-based version for iOS as well, but this model has been toned down for iOS.) I’ve written a detailed blog post called Playing With Firefox OS, about my experience participating in the Phones for App Ports program. And that’s a wrap. Thanks for reading this far. If you’re a Firefox OS App porter, a web developer or simply a curious reader, we’d love to hear from you. Leave a comment or send us a note at appsdev@mozilla.com.

  6. New Firefox OS App Workshops & Other Updates

    Here in the virtual headquarters of Mozilla’s geo-distributed tech evangelism team, we always have bags packed and traveling shoes on. Today we’re happy to announce a couple of new Firefox OS App Workshops for web developers: we’ll be in Guadalajara, Mexico, on Saturday, October 26, and we’ll be in Budapest, Hungary, on Saturday, November 23.

    Who should apply

    Remember, these are full-day hands-on technical workshops for developers who are already working on building or porting mobile apps for Firefox Marketplace. You must apply to participate and we will give a preference to developers who can show us a Firefox OS app in progress or a listed HTML5 web app that’s ready to port. Try to arrive at the Workshop with app code already running in the Firefox Simulator.

    bogota_workshop

    At the workshop, you’ll spend the day working on your app with help from our team, with breaks for meals and snacks. Our first activity will show you how to send your app from the Simulator to the Geeksphone Keon Firefox OS Developer Preview device. At the end of the day, there’s a chance to demo the app you’re working on. After the workshop, the Geeksphone is yours to keep, to complete your Firefox OS app and continue to use. Our goal is to help you finish your first app and see it listed in Firefox Marketplace. We’re especially interested in apps built in your language, for people in your location.

    Firefox OS App Workshop, October 26, Guadalajara, MX: Apply here.

    Firefox OS App Workshop, November 23, Budapest, HU: Apply here.

    How to prepare

    Getting started with Open Web Apps – why and how will help you get started. Once you’ve installed the Firefox OS Simulator, and spent a little time reading the documentation, there are many other useful articles about Firefox OS on the Hacks blog. On the Mozilla Developer Network, you’ll find abundant documentation for app developers.

    captrogers

    Update: Phones for app ports

    Thanks to everyone who applied for our Phones for app ports program. Submissions to this program are now closed. We share your enthusiasm and look forward to seeing all your apps listed in Marketplace. We hope to finish reviewing all submissions this week, so please be patient just a little bit longer if you haven’t heard from us. Please note: If your proposal is not accepted, you will not receive a notification.

    If your proposal is selected, you will receive an acceptance email from Mozilla, followed by a notification from the shipper with more information. Once your phone is shipped and your app is in progress, someone on our team will contact you and be available if you need help to get your app done and listed. We are probably a week or two behind on shipping phones, so again, please bear with us. In some countries, we are working through some specific shipping issues. Thanks everyone for your patience. We regret that we can’t respond to every email inquiry.

    Special kudos to those app developers who’ve already received phones and gotten their apps ported and listed in Marketplace. We are super-proud of you and we know there are more of you every day. Together we can build the open mobile web. Thank you!

  7. Calling All Porters: Phones for App Ports to Firefox OS

    Back in May we launched a program for app developers called Phones for Apps for Firefox OS. We heard from thousands of developers in all corners of the world– thank you for your overwhelming interest.

    Developers at BrazilJS by holmes.josh
    Since then we’ve shipped out heaps of Geeksphone Keon Firefox OS Developer Preview phones and we’ve listed many new apps in Firefox Marketplace, including games like Rooftops and Yatzy, and L’Arrosoir, a lovely French language garden app. If you’ve built and submitted your app, thank you! Hope the rest of you are making good progress.

    Phase 2 now open

    Today we’re opening up the second phase of Phones for Apps for Firefox OS. This phase is about sending you a device (for keeps!) to make it easier for you to PORT and test your existing HTML5 app. We’re hyper-focused on getting Firefox OS phones into the hands of porters – developers who’ve already built and shipped an HTML5 web app and have the time now to port that app to the new Firefox OS platform.

    Help Mozilla bring the open web to the world of mobile — and gain yourself a first-mover advantage in the Firefox Marketplace.

    First step: Apply.

    Guidelines

    Here’s what you need to know when you apply.

    • We expect to see a URL for a web site, a code repository, or an app platform such as Amazon Web Apps, Blackberry WebWorks, Chrome Web Store, webOS, or the PhoneGap store. If you wrapped an HTML5 app with a native skin to distribute it to iTunes, Google Play or another app market, please indicate the tool you used (e.g., Appcelerator, PhoneGap, Sencha).
    • You must be able to get to work quickly. We are looking for completed apps in September and October.
    • Don’t wait to hear from us. Get started now by downloading the Firefox OS Simulator.
    • REMINDER: If you can’t point us to a live HTML5 app, you will not be eligible for this program.

    Introducing Firefox OS

    Apply

    We look forward to reviewing your application. We’ll send an email confirmation when you complete the form. Then we will be in touch only if you are selected to receive a phone. Otherwise you will not hear from us. Thanks for your understanding. (We’re a really small team.)

    Can’t wait to see your awesome ported apps. Apply now!

    Photo credits: Thanks to Josh Holmes for the great shot from BrazilJS and to MozillaEU for the image from the Firefox OS Debut Poland.

  8. Phones for Apps for Firefox OS

    Update: Today, Wednesday, June 19, we began inviting app developers with winning Firefox OS app proposals to join the Phones for Apps program. We will begin shipping Geeksphones to app developers who’ve committed to building and porting apps for Firefox OS. Congratulations.

    Thanks to everyone who participated by sending a proposal. The open mobile web needs your interest and enthusiasm. And your apps!

    Whether or not you receive an invitation now, the Marketplace is open and there’s never been a better time to submit your apps. We regret we can’t respond to the thousands of you with great ideas for apps for Firefox OS. There will be other opportunities to get access to the the Developer Preview device. We can’t wait to see what you build.

    Hello HTML5 app developers, the open mobile web is calling.

    We know you’re out there, chomping at the bit, coding, testing, reading documentation, downloading and running the Firefox Simulator. And you’re ready to ‘Send to Device.’ You just need to get your hands on a device.

    Today we’re announcing a new program with you in mind. We call it: Phones for Apps for Firefox OS.

    Firefox Marketplace on the Geeksphone

    Firefox Marketplace on the Geeksphone Keon

    Maybe you’ve built apps in the past for Chrome, webOS, Blackberry WebWorks, or the PhoneGap store. Maybe you’ve created beautiful web apps for a desktop environment and now you want to port them to mobile. Maybe you’re a student about to start a summer break. We know you may not live anywhere near Bogota, Colombia or Warsaw, Poland, locations of upcoming App Workshops.

    Wherever you are

    Wherever you are, if you can show you’ve got a great app idea and the skill to build it, we’d love to see your apps in the Marketplace when the Firefox OS launch begins later this summer. And to sweeten the deal, we’ll send a Firefox OS Developer Preview device for you to work with now.

    When Firefox OS phones become available to consumers in select locales this summer, you’ll have an opportunity that only comes around once—a first-mover advantage in Firefox Marketplace. End users in Latin America, Eastern Europe and other launch locations will be on the lookout for playful and practical apps to install: games, tools, and utilities as well as locally relevant news, sports, travel, entertainment, review apps, and social sharing experiences. And you can build and submit them now!

    Apply now

    Tell us about the Firefox App you’d like to build or port. If your proposal is accepted, we’ll send you a Geeksphone Keon. Our device inventory is limited and our launch dates are approaching fast, so act now. This program will close at the end of May or when our limited supply of Geeksphones runs out. There’s a limit of one phone per app proposal. We can’t wait to see what you’re working on. There’s never been a better time to get started.

    Note: We are not accepting applications for the Phones for Apps program at this time.

  9. Announcing Firefox OS App Workshops

    Madrid, Bogotá, Warsaw & Beyond


    blaze_your_fxosFirefox OS phones will be available to consumers in several countries this summer, and they will be looking for great apps to install from Firefox Marketplace. If you know how to build mobile app experiences with HTML5 and JavaScript, we’re looking for you—especially if you’d like to develop apps in Spanish, Polish or Portuguese! If you’re fast and focused, this is the time to take first-mover advantage.

    Our first three hands-on technical workshops for skilled web app developers take place in Madrid, Spain, on Saturday, April 20; in Bogotá, Colombia on Saturday, May 18; and in Warsaw, Poland on Saturday, June 1. We hope to announce more workshops in more locales later in the season.

    You must apply to attend: We’ll ask you to show us your JavaScript expertise and/or past experience building web apps and working with web APIs.

    Who Should Apply


    We’re looking for small teams or solo developers with solid ideas and strong web development skills. If you’ve already built a successful PhoneGap, Chrome, webOS, Blackberry WebWorks app, or other open web app for mobile or desktop, we’d love to work with you on migrating your existing app or building a new one. Mozilla engineers and tech evangelists will help participants complete an app or port an existing one to the Firefox OS phone and into the Firefox Marketplace.

    Please apply now if you’d like to attend any of these workshops. We’ll be reviewing applications as they come in, with a focus on our first locations. We’ll get back to you as soon as possible.

    Moz_Ldn

    What We’ll Offer

    • A great place to hack.
    • Hands-on help from Firefox OS developers.
    • Food, drink and demos. And t-shirts, of course.
    • More code, less talk.
    • Firefox OS Developer Preview phones, really!

    How to Prepare

    There’s more than one way to start building Firefox apps. Here are a few resources to get you started:

    Firefox OS Workshop application form.

  10. A Conversation With Appeio Developer Harold Fudge

    Editor’s note: Appeio is no longer available, and Harold is now spending his time with his consultancy..

    Last month we released Firefox Marketplace on the Aurora channel of Firefox for Android. This release has given developers an opportunity to start building a base of early adopters and get feedback on apps as the Marketplace grows.

    Harold Fudge is a Canadian web developer who was excited to be part of this first wave of apps for Firefox Marketplace on Android. Appeio, his device-responsive, cross-platform app.net client, is the first of its kind in Firefox Marketplace. We were interested in talking to Harold to learn more about his approach to open web apps. Here’s how the email conversation went:

    HAROLD: I’ve always been interested in technology. I’ve been drawn to computers partly for the pure thrill of creation but also because of the implications for communication between individuals and groups. I grew up in a small town in the center of an island during the 1980s and created simple apps for myself out of interest. Just as I finished high school suddenly the Internet emerged as something for everyone. I saw plainly the Internet was everything a computer was already, but infinitely expanded. It was my mission to be a part of it. I began to learn HTML and what it meant to be a web developer. You can see a selection of things I’ve built and am working on at hxf148.com.

    Q:What inspired you to develop Appeio, an app.net client for the Marketplace?

    In mid-August when App.net gained its initial funding I simply signed up out of an interest in the technology. I am not shy about trying different things or supporting an idea as it gets started, but unlike the average project I investigate, App.net as an API service had an immediate pull for me. I really enjoy building things online and App.net offered a wide open low cost way to build apps with a powerful communications backend and a engaged early adopter set. This core idea hooked me and I quickly decided that if possible I only wanted to interact with the ADN (App Dot Net) through my own code as a way to force me to learn its methods and potential.

    I looked at the options and while I have dabbled in iOS and Android programming I did not think I could quickly compete in the already heated race to build app.net clients for those platforms. I then turned to my strengths. I decided I would take upon the challenge to build a full-featured HTML5 app that would extend and improve my own skills and knowledge while providing a solid client for any device with a web browser.

    I had been following the Marketplace project for some time and it seemed like a natural fit for Appeio. While being present in other app stores can lead to confusion, the Marketplace and its focus on HTML5 and other browser-based technologies is something I want to support and be part of. From the early days when I sat down to learn HTML, it was because I felt the future lay with technologies that enabled applications regardless of the underlying hardware, software or specific company policies.

    Q:You’ve done a lot of mobile app development, what do you see as the biggest challenges for developing in HTML5?

    Just stating that you develop in HTML5 is a bit of an issue. What that really means is still a bit of a jumbled set of tools and technologies. When you sit down to develop an app, for iOS in particular, you are given a canvas and some predefined controls, methods and styling. You can ignore all of it, but if you are just starting out it gives you a powerful bridge to develop your idea into an actual app people would want to use.

    Starting an app targeted at browsers on all devices with all methods of input is an interesting challenge. The power of CSS, HTML and JavaScript to deliver a great user experience is there, but it is hidden behind a learning curve filled with pitfalls and technology distractions. So then, the biggest challenge to me with starting a web app is often not showing if the idea is good, it is in deciding how it should be developed.

    Starting from scratch is usually not an option in small web development shops like mine, so we turn to toolkits, IDEs and frameworks to build apps with. If this selection is not done carefully the idea/app/project can often be dragged down by the weight of its own underpinnings. It is crucial to decide what outside dependencies will help your app be realized. Some tools are helpful to get the software built, but eventually lead it to an unsustainable position.

    My goal in facing this challenge is as the KISS principle states. I try to pick well known, well supported tools that are well built and not over-designed/engineered. These can vary from project to project, but currently the combination of Bootstrap, JQuery and CSS3 on the front end and when needed PHP/mySQL on the server side meet my personal objectives to build well, fast and light for as many devices as possible.

    Q:What’s your advice to web developers who know their way around HTML5, JavaScript & CSS3, but are new to the world of mobile development?

    Build everything to be screen responsive and mobile will fall into place as another supported part of your technique. We hear from all sides that mobile is the future, but when everything is mobile it does not mean that everything is small. It is pretty clear already that we are headed to a world with connected mobile screens of all sizes from wearable to desktop portable. And your web-based property should just work on them all.

    Screenshot of Appeio on mobile

    This is not just about taking into account button sizes, finger-friendly navigation and how the actual presentation can be reflowed to different screen sizes. Mobile devices have less memory and processing power and often a web app that will work on a desktop is too much for a mobile browser. It takes some planning and a lot of testing. There is a good balance to find in almost any app that will allow it to run everywhere with a good user experience.

    Don’t take on mobile as a unique special case needing separate and stripped down versions, everyone dislikes this and it’s futile. Make being mobile a fundamental part of your app from its inception and many of the gotchas found large screen first apps will start to melt away. It is not easier to make a fully screen-responsive HTML5 application, but it is better.

    Q:What gets you excited about HTML5 app development? What do you see as the opportunity for independent developers like you?

    The truly exciting thing about HTML5 and web development is that it’s not done.

    That it might never be done but it is open and continues to advance, keeping reasonable step with proprietary native app systems. Technologies by Apple, Google, Microsoft, RIM and others may and will have good long runs but at some point these companies need to make the next thing which is not always compatible with their previous thing. As devices get cheaper and more widespread, as operating systems continue to become more varied and transparent, the one constant they will have is the web.

    There is something fundamentally appealing about the idea of a well-built app working well into whatever comes next. Things change and patches happen but the principles of the web specifications should mean that your app will load and run without too much fuss for as long as you want.

    No one truly can say what computers will look like in 10 or 20 years but there is a high likelihood that they will have a browser to view the apps and sites we are all building right now. Many early websites continue to exist nearly two decades after they were launched. I believe this will happen again.

    Many devices released only five years ago cannot today run the latest version of their operating system let alone the latest version of most apps for it. In contrast, most web apps built at the same time continue to operate or require only minor adjustments. Should a web app need a fix, it’s made and done, no updates for users and no waiting on approvals. It is much more interesting and exciting to me not to be bound by those restrictions, regardless of any short-term gains.

    A final point on my excitement is that the next two to four years will be important steps forward for web development as specifications are finalized and simply what a web app is capable of in terms of WebGL, storage and other hardware interaction leaps ahead.

    Q:At the moment, do you have any plans to port any of your other mobile apps to the Firefox Marketplace?

    I have spent much of this year rebooting my career direction and retooling my skill set in web development. Looking over what I have done and what I am looking to do going forward the Marketplace is a part of my plans. I think there are amazing and fun challenges to undertake in this space and having the Marketplace is going to be important to reaching more users. A place to offer high quality HTML5 apps to an informed set of individuals with the support of Mozilla is a great thing.

    Q:What do you do to make your apps work well offline?

    To this point I have focused on connected apps almost exclusively. Though I have been keeping up on developments in client-side storage and expect it to be an important aspect for my work very soon. For instance in Appeio it would be great to use client side storage to store and archive posts for faster UI and fewer API calls.

    Q:Any feedback on the developer experience on Firefox OS or the Android Web Runtime that you’d like to share with our Apps & Marketplace team?

    I am simply in love with what you are trying to do here. It means so much to the developers and to the users who benefit from access and curation of these apps.

    As a small developer it’s important to me that there be a place like this. Make it fast, make it stable and the apps will give it life and make it fun.

    Q:Have you checked out the Firefox OS Simulator?

    I have checked it out and test my apps in it on a regular basis. The glimpse it gives into the future of devices and the OS that they present the user is fascinating. I appreciate the tool and look to this project as the future of a better connected and open web everywhere.