Math keyboard for Firefox OS

I did not mention it before but I’m mentoring a project for Mozilla in the Google Summer of Code of this year. My mentee is Raniere Silva, a math student from Brazil. He is working on a mathematical keyboard and he just released a demo today. There is already work to be done, of course but the project is working well. Check the demo following his tutorial about how to install the new Math layouts on a Firefox OS device (Flatfish tablet included!)

Greek letters layout
Common math functions

Introducing strongforce: an infrastructure for game engines

The strongforce library is a light-weight framework to build game engines. It provides a backbone for a powerful game loop and helper classes for efficiently implement new game components such as models, renders and simulators. Main framework features include:

  •  Model oriented.
  •  Decoupled simulation and render loops.
  •  Real time simulation loop for integration with physics engines.
  •  Separated read and write stages during simulation to avoid expensive model copies.
  •  Versatile and dynamic visitor pattern to implement the Game Model Hierarchy.
  •  Use of JavaScript functors to quickly implement simple renders or simulators.
  •  Helper classes to ease implementation of Renders and Simulators.
  •  Events for Model to allow asynchronous programming.
  •  Fully control of the loop step and execution.
  •  Careful separation of responsibilities allowing the developer to focus on data model, business logic and rendering process separately.

Strongforce is not a graphic engine, not even a game engine. It is only a proposal for a game architecture and a main loop. You can read more about the framework internals and philosophy of design in the wiki pages of the repository or further in this post. Please feel free to provide any feedback by opening new issues on GitHub.

Seguir leyendo «Introducing strongforce: an infrastructure for game engines»

I’m on Wizpert!

I’m giving a try to Wizpert, a platform to provide professional support for other users. I think it is a good idea and I’m very happy of see there are services like this. So I created my profile and let’s see if I have time to provide some help.

I know there are free platform and I’m currently signed in I hope to get some free time this year to provide some good answers here as well. Let’s see if I’m better chatting or writing posts.

You have the Wizper button on the side bar. Try if you want.

Of course and most important, if you have some experience related to Wizpert to share, please, leave a comment for collective enrichment ,)

Talking about Firefox OS on TV!

A couple of months ago I was showing some Firefox OS hacking for the contest Premios Apps Fundación Telefónica. I was interviewed by ‘La 2’, a national TV channel here in Spain. I was talking about Firefox OS and the its role in the present mobile market. Check it!

UPDATE: Here is the precise moment with the direct link to YoutTube:

Devcon 2013 talks

Some weeks ago Telefonica I+D held its second development conference Devcon 2013 and I talked there about Beatiful APIs and The Python Data Model. As the last time, I have uploaded the reveal.js slides to my git repository. Enjoy them!

Beautiful APIs
Python data model
Metaprogramming in Python & JavaScript
Continuation Passing Style in JavaScript

Note: remember each talk has main sections (left / right arrows) and the development is vertical (up / down arrows) ,)

Non alphanumeric JavaScript

This post is a translation of JavaScript no alfanumérico which was linked by Diario Linux some days ago so I decided to write an English version. Enjoy it!

I have a discussion with Adri about if JavaScript is a good programming language or not. In one of our conversations, Adri shows criticism about JS’ weak type and links the article Brainfuck beware: JavaScript is after you! by Patricio Palladino.

I encourage the lecture. It is quite interesting.

In short, Patricio has created a tool to convert a JS script into another equivalent formed by symbols +[](){}! only. Don’t you believe me? Try to enter this in a JS console from any browser (ensure you are visiting a web site).


It should have appeared a dialog with the number 1. What the hell happened?

Seguir leyendo «Non alphanumeric JavaScript»

Introducing AutoBlog

One of the first things I want to do always I publish some new project on GitHub is to provide a development diary / (b)log with the latest updates or feature additions but I have not found the proper tool yet. I’ve been told about Jekyll but it requires more effort than I’m willing to do (although it require very low effort). I want something quick and easy: with the minimum server or client support. Something to do with a simple text editor.

So I created AutoBlog. And I have all the documentation, setup, and feature list in an AutoBlog supported static site you can check for inspiration and example. Of course, this is only a beta and more features are coming but you know, step by step.

Seguir leyendo «Introducing AutoBlog»

Hacking Gaia with Firefox OS Simulator

From my point of view, the real potential of Firefox OS is not developing applications for Gaia but modifying the system itself. It is true that nowadays Gaia and Gecko suffer from some hard coupling but you have all the code in the web so learn, improve and distribute. This is free software, bro!

The common way to hack Gaia itself in order to replace components such as the keyboard, the homescreen or even the system application is to clone the repository and use make to push your modifications to the device and adb for debugging. But the other day I found a way of doing the same but using Firefox OS simulator. I.e. with no need of pushing to the device!

Seguir leyendo «Hacking Gaia with Firefox OS Simulator»

Firefox OS: applications 101

Hi again!

The other day in TID I was told there is not much information about how to start a HTML5 application for Firefox OS and deploy it into the device. There is. Seriously. But I have to admit there is not a straight way to the topic and you could get lost in the middle of all the available information. So this is a try to provide a quick and basic Firefox OS application tutorial.

Step 0: set-up the environment

Firefox Nightly

Nightly is the latest version of Firefox. Always. Built every night from the source-code. You can download it from the Nightly’s official site.

Before open it, it is very important you close all sessions of Firefox.

Firefox OS Simulator

This is an extension to Firefox; grab it by clicking on «+ Add to Firefox» from the Firefox OS Simulator add-on page.

The device and drivers

If you are fortunate enough then you have a Firefox OS device. If not, you can purchase one from Geekphone’s store. You need its drivers as well and they depend on the device you have and the operating system of your PC.

Finally, in the device go to Settings > Information > More information > Developer and enable «Remote debugging».

Now you are ready to start  developing Firefox OS applications!

Step 1: the first app

Before starting, create a new folder. Name it as you want (i.e. myapp) and enter the folder. All your application files will go here.

Open your favorite text editor and create a new document named «index.html». Now enter the following HTML5 code and save it inside the folder you created before.

<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <p>This is my first Firefox OS application.</p>

If you are not used with HTML5, let’s take a quick review to the code:

  • Line 1 indicates the navigator we are using HTML5.
  • Line 2 is the beginning of the HTML5 document.
  • Line 3 indicates the beginning of the head section where metadata goes.
  • Line 4 is metadata saying the document is encoded in «UTF-8».
  • Line 5 is more metadata saying you don’t want Firefox OS to cache the content. This is very convenient while developing.
  • Line 6 indicates the end of the head section.
  • Line 7 indicates the beginning of the body section where content goes.
  • Line 8 is a paragraph with some text.
  • Line 9 indicates the end of the body section.
  • And line 10 indicates the end of the HTML5 document.

Step 2: the manifest

The index.html is one of the two things you need to make a Firefox OS application. Again, use your favorite text editor an create another file named «manifest.webapp», Put this text inside:

"name": "MyApp",
"description": "My first Firefox OS application",
"launch_path": "index.html"

This is a JSON file. Again, if you never read about this format before let’s review what is it saying:

  • Line 1 indicates the beginning of a JSON object. A JSON object is a list of pairs «key»: «value».
  • Line 2 is the key «name» which indicates the name of the application.
  • Line 3 contains the key «description» with the description of the application.
  • Line 4 has the key «launch_path» which says Firefox OS what file must be opened when launching the application.
  • Line 5 ends the JSON object.

Step 3: test your application!

Yes, you’ve read well, it’s time to test your application. Nothing more is needed. Now open Nightly and click on Tools menu, then go to Web Developer > Firefox OS Simulator.

Firefox OS Simulator dashboard
Firefox OS Simulator dashboard.

This will open the dashboard. Click on «Add directory» button and navigate to the folder you created in step 1. Select the manifest file and accept. This will launch the Firefox OS simulator allowing you to see your application as if it were running in a real device.

MyApp application in the dashboard.
MyApp application in the dashboard.

If you modify the application while the application is still running, go to «App» menu, then «Refresh» to reload the app.

Application running in the Simulator.
Application running in the Simulator.

Step 4: testing on the device!

If you have a device, connect it to your PC. If the drivers are installed properly you should see the phrase «Device connected» below the «Simulator» switch. Furthermore, your application entry will display a «Push» button.

Device has been recognized by the Firefox OS Simulator.
Device has been recognized by the Firefox OS Simulator.

Press the «Push» button and your application will be uploaded to your phone. The first time you upload an application, a prompt will be displayed on it. If you accept, the application will be installed and a status message will appear when finished.

Then you can go to your home screen and search for your application. Open it and see the results.

Note there is no such thing as Refresh in your real device. If you change the source files in your PC, you need to push your application again. Furthermore, you must close the application and reopen to see the changes.

Congratulations. You have written and run your first Firefox OS application.

Seguir leyendo «Firefox OS: applications 101»