Finding speakers

Probably the most tricky part of organising meetups, specially when you get started.

Make sure to leverage your network. Some of your friends, colleagues, Twitter followers may not have considered giving a talk before. Give them a chance!

If you struggle to find speakers, you can be creative and maybe ask a remote speaker to speak through Skype or similar. There are also other things you can do like hands-on sessions, lightning talks or discussion panels.

I also enjoyed giving under-represented people (students...) a platform to talk, to foster a culture of diversity. I even hard-coded this principle in the rule of conduct of the last meetup I organised.

Getting a venue

If you're in London and your meetup aligns somehow with Mozilla mission and manifesto, why not hold it at Mozilla office? You'll need to have an employee to sponsor you and make the requests on your behalf.

For other places or other topics I unfortunately don't have much experience, but you can try to contact the venues where you have attended meetups in the past. Here again, use your network!

Drink and snack sponsoring

it's nice if possible to offer snacks and drinks to provide the attendees with the best experience possible.

I don't have much experience in finding sponsor but you can try to contact hiring companies in industries closely related to your meetup. They'll be happy to sponsor your event in exchange of a way to get in touch with local talents and potential users.

Another possibility depending on the number of attendees is to buy and bring snacks and drinks for yourself. Some big meetups don't offer such amenities so don't feel bad if you don't.

AV

Do you need any specific Audio/Video support? Some venues can accommodate all sorts of A/V needs (recording, live streaming...). At the very least you'll need an internet connection and a monitor to show slides and demos. Make sure you know your needs and clear any assumptions with both the speakers and the venue beforehand.

Planning

When everything is ready, it's good to prepare a detailed plan. That will help on the day of your meetup to make sure speakers or Q&A sessions don't overrun. It's also good to start on time specially if you're live streaming the event. That said, you must also keep in mind that some attendees may be late so allow a few minutes for everybody to show up before starting.

Promotion

To advertise your meetup is critical to its success. Make sure your communicate it on social media and ask, for example, your speakers to help with spreading the word.

After your event it's also nice to engage with your participants and send a feedback form to help you make the next edition even better!

Organisation

The big day has arrived! Make sure there is at least another person to help with the organisation. You'll be busy making sure everything is ready and the attendees are feeling welcome. Some support from someone who is up to date with the organisation will provide invaluable help.

That's it! Many other aspects such as using meetup.com, writing a good code of conduct or charging for attendance are not covered in this guide to keep it quick and easy. I hope the points above will decide you to get started with organising your very own meetup. Feel free to leave a comment below if you have more specific questions.

tl;dr: Media capture, object detection and WebGL can be combined to hack a simple augmented reality experience. See my demo called we are all Saints.

To simplify things, augmented reality is based mainly on 2 technologies:

• Sensors to track the position and orientation of the user field of view (FOV)
• Computer vision to detect objects in the user FOV

Of course modern AR headsets like Hololens combine both to create the best experience possible. I explored using common devices with web technologies to create a simple AR experience. I decided to go for computer vision applied to media capture.

Object detection

There are few different libraries to detect objects in an image. Most of them seem to be based on OpenCV, ported to JavaScript via emscripten. I didn't spend too much time looking for a library and quickly settled for js-objectdetect. It's hand-written (as opposed to converted via emscripten) so it makes easy to read, understand and debug if needed. It can detect different types of objects but I used human faces here.

Once set up properly, js-objectdetect accepts a video element as an input, so I just pass to it the one that displays the camera feed I got from getUserMedia.

It return the coordinates in pixel of the faces detected (left, top, width and height).

Recreating a virtual 3D space

Next step is to place the faces detected in the image in a virtual 3D space by estimating their respective positions. I used A-Frame to create the 3D world because this framework is easy to use.

Positioning an element on the x and y axes is really easy. We need to convert the position in the (-1, 1) range, more about that later. For example a point centred in the image will have both its x and y values set to 0. Knowing the position in pixels and the size of the video the values are easy to get (Also the y axis direction is reverse in the web and WebGL). For the x axis, half the width needs to be added so that the element is horizontally centred on the face.

The z axis is a bit trickier. It needs to get estimated and calibrated. I used the height value. I noticed that once detected my face takes at most 80% of the image height when I stand at about 50cm from the camera. The further I step back, say about 2m, the smaller my face gets, to take about 30% of the screen height.

I used these distances as the values for the camera frustum near and far clipping planes (near and far attributes on the <a-camera> element).

Then I only need to convert and clamp the height of the face detected between the % values of image height that I determined above. Once converted to the (-1, 1) range, they'll vary proportionally between 50cm and 2m. That gives me a good enough approximation of where my face is located in respect to the camera.

I also used the detected height to position the virtual element a few apparent centimetres on top the faces.

Overlaying

A-Frame uses Three.js under the hood. That's what I'm using to perform computations.

Now that I've got the x, y and z position in the (-1, 1) range I need to unproject this vector along the active camera. That is not as complicated as it sounds:

const pos = new THREE.Vector3(x, y, z).unproject(camera);

This returns a vector corresponding to the position in space of the object given the current FOV (i.e. camera).

Finally I can set the position of the A-Frame element in the virtual space that I want to super impose over faces:

element.setAttribute('position', pos);

Conclusion

This experiment wasn't as hard as it sounded at first and the result is quite convincing. I learnt a lot about projection and unprojection in the process. As usual the code is on GitHub as all-saints-ar because we are all saints!

VR, but what for?

Creating content for virtual reality is easy. A-Frame is probably the easiest way to get started. It's entirely free and open-source and only requires a basic of HTML programming. On other projects, I used Google VR SDK for Unity and the graphic UI of Unity allows you to create content without even typing a single line of code.

So now the real question is what are we going to use VR for? VR is just a medium and in itself has no value.

This is what I explored in this project. VR is an immersive and engaging platform so I decided to use it to share personal experiences with the readers.

It took a direction towards philosophical questioning and reality challenging that I hadn't expected. But overall it's been successful from a personal standpoint: the experiments are consistent (except maybe the first one) and I've been able to go through the 6 days.

Working as a hobby

An essential aspect to this experiment is being on holiday with a lot of free time. I dedicated about 2 or 3 hours a day actively working on the VR experiment and writing the post. The rest of the day was spent thinking passively about what to do next.

This liberty was essential to generate new ideas to experiment. Creative people know you can't just sit at a desk and expect to get new ideas. That's when you go out for a walk, sit in the grass, spend some time in a zoo or a museum that you release the most of your creative potential.

I thoroughly enjoy this lifestyle of working actively a few hours in the morning and passively for the rest of the day. Maybe that's how life should be: dedicating most of your time to creativity and self-expression and work only for how long is necessary. This is something I want to explore more in the future.

A bit of history

The meetup was rebranded from the previous Firefox OS meetup group. A lot happened at Mozilla this year. The Firefox OS project was turned into a community project and the Connected Devices team was created.

Now that things got more stable we decided it was a good time to resume a series of meetups.

This was the first session so we're still learning and experimenting, but we're planning on doing monthly or bimonthly meetups. This first session was not recorded, but the plan is to record or stream the next ones.

The first session

Meetups are and should always be about meeting people so we want to emphasise the social aspect of it and making a place where ideas are shared and discussions happen naturally.

For this first session, we had a nice lineup of speakers:

• Francisco Jordano on introducing Mozilla IOT meetup
• Marc Walsh on what to expect in the IOT space at MozFest 2016
• Sam Giles on the physical web and Project Magnet
• Becky Jones with just like magic - Design thinking meets the Internet of Things

In addition to the amazing speakers above I wanted to thank Mandy for the coordination, Dietrich and the devrel team for sponsoring the meetup and all the attendees.

What's next?

We're super happy to receive feedback from the participants. If you happen to be in London during one our of next sessions, make sure you're attending and let us know what would you like this meetup to be?

See you soon!

I gave it a try at drawing myself VR landscapes. It turns out VR textures are a form of anamorphosis. Some artists like Dali drew such projections. To reconstitute a normal image, you need a special device, in our case a VR environment.

What I learnt

VR is an immersive technology. To feel yourself part of a VR landscape, we apply a texture to the sky (see the <a-sky> element in A-Frame). A texture is a simple image that is distorted to the inside of a sphere.

Drawing a landscape for such a projection is really counter-intuitive, but here are some of my findings.

Equirectangular projection

The easiest way to get started with drawing your own landscapes for VR is to start with a image (or paper, canvas...) twice as large than high (once scanned, 4096 × 2048 works pretty well).

In an equirectangular projection, the top line of the image is distorted in such a way that it's merged in a single point. The same apply to the bottom. This means that the closer to the top or bottom an object is the smaller it will be rendered in the VR scene. its width will be squeezed.

The left and right sides of the image are merged together. To make it feel seamless, be sure to draw something that looks the same on both lateral sides or stitch lines may appear.

The horizon line

If you draw a horizontal line right in the middle of the image, this is going to be rendered as your horizon line when you place the camera in the centre of the sphere.

You can play with it. Make it slightly higher and the user will feel that they're trapped in the group (or maybe surrounded by mountains), making the final result a bit suffocating.

If you lower the horizon line, the user will think they're flying.

4 sides

Your field of view fits in roughly 1/4 of the image width. If you draw a single element larger than 1/4 of the width, it will force the user to look left and right to see it entirely, without being able to see it completely at once.

Be creative with it. Big elements like monuments or mountains should be larger than 1/4 of the width. Smaller elements like vehicles or trees should be much smaller.

Sphere in the sky

As explained above, the equirectangular projection will merge the top of the image to a single point. If you want to draw a circular object right above the user, draw a stripe going from the top of the image on a small fraction of the height. This will render as a perfect circle if the line is parallel to the top of the image.

Of course this principle applies to the bottom of the image too.

The result

I uploaded my experiments. On your mobile, go to: gmarty.github.io/vr-landscapes/ Grab a Google Cardboard and insert your phone. You can change the landscape with the click button.

Drawing for an equirectangular projection leads to results that are hard to predict. Another technique is to draw on the 6 sides of a cube and use a software to turn this cubic texture into an equirectangular projection, but I haven't tried myself.

If you want to give it a go, you can reuse the code on Github. Just replace the images by yours. Then, share your creations and ideas in the comments section below.

tl;dr: You can build a voice assistant in JavaScript with existing open source libraries but the result sucks.

In the last couple of days, I explored the voice in the browser. Here are my findings.

What's available

Most of the voice related libraries in JavaScript that I found are simple wrappers around the Web Speech API. Under the hood browsers use external services so I ruled out these libraries immediately as I wanted something that works offline.

What I found:

• pocketsphinx.js for voice recognition
• speak.js for voice synthesis (several forks available)

Both these projects are brought to the web thanks to Emscripten and asm.js.

Building a (not so) intelligent voice assistant

Thanks to a discussion with my friend Thomas this weekend, CENode.js was brought to my attention. It's an open source project to enable human-machine conversation based on a human-friendly format. It can be used to simulate intelligence.

I had all the elements at hand to build a browser-based, offline voice assistant (Think Siri, OK Google, Amazon Echo...).

Coding (or rather gluing)

Gluing all parts together was unsurprisingly easy. Pocketsphinx.js calls a function when the web worker has a final hypothesis:

worker.onmessage = (evt) => {
  if (evt.data.hyp !== undefined && evt.data.final) {
    gotHypothesis(evt.data.hyp);
  }
};

I can feed this hypothesis to CENode.js by creating a new card:

function gotHypothesis(hypothesis) {
  const card = "there is a nl card named '{uid}' that is to the agent 'agent1' and is from the individual 'User' and has the timestamp '{now}' as timestamp and has '" + hypothesis.replace(/'/g, "\\'") + "' as content.";
  node.add_sentence(card);
}

Then I just have to wait until the deck is polled for new cards to my attention (my name is User). The new card contains the answer to my request and I can just do:

speak(card.content);

The function speak will call espeak.synth() of speak.js.

Adding a grammar

This is it for the JavaScript code. But an important part is still missing. Pocketsphinx.js needs to be fed with a grammar and the pronunciation of all the words used in the grammar. This is used to reduce the scope of detected phrases. So I'll conveniently reuse all the possible requests supported by CENode.js.

Considering the CENode.js demo about astronomy, here's a list of some requests that it can understand (let me know if I missed any):

What orbits Mars?
What does Titan orbit?
What is Saturn?
What is a star?
List instances of type planet

The first step is to compute all the possible permutations that make sense in English and that CENode.js will understand. I found 124 of them. This is the corpus I'll use in the next steps.

The grammar used by pocketsphinx.js is a Finite State Grammar. Think of a finite state machine where each state adds a word to the phrase:

s = 0 // s is the state with initial value 0.

[]    -> [What] -> [does] -> [Titan] -> orbit?
s = 0    s = 1     s = 2     s = 3      s = 4

The grammar for this simple phrase is:

const grammar = {
  numStates: 5,
  start: 0,
  end: 4,
  transitions: [
    { from: 0, to: 1, word: "WHAT" },
    { from: 1, to: 2, word: "DOES" },
    { from: 2, to: 3, word: "TITAN" },
    { from: 3, to: 4, word: "ORBIT" },
    { from: 4, to: 4, word: "<sil>" }
  ]
};

The more phrases you add, the more complex it gets. For each state, pocketsphinx.js uses the grammar to figure out what is a possible next step. If your grammar is correct, you cannot end up with meaningless sentences.

I wrote a small script to build grammars from a corpus of phrases that I may publish if anyone is interested.

Adding pronunciation

For each word in the corpus, pocketsphinx.js needs to know how to pronounce it.

I fed my corpus to Sphinx Knowledge Base Tool. I simply took the *.dic file from the gz archive, split it on line breaks and split again each line on tabs and I got something like:

const wordList = [
  ["WHAT","W AH T"],
  ["WHAT(2)","HH W AH T"],
  ["ORBIT","AO R B AH T"],
  ["MARS","M AA R Z"],
  ...

The result

Et voila ! That's all I needed to get an astronomy centred voice assistant that can tell me what satellites orbit around what planets and other detailed infos. I have to say it's pretty cool, specially because I'm a big fan of astronomy and I got this project done in under 2 days.

As a side note I tested it only on Firefox Nightly on my laptop. Results may differ on Chrome or on mobile devices.

The result though is not really convincing. First of all pocketsphinx.js voice recognition is bad. I can probably blame it on my accent (I'm French, remember), but it's so frustrating to say "What orbits Saturn?" hundreds of time with no results while my colleague got understood at the first try! The good thing at least is it can't return phrases out of the grammar, so it will always output something that makes sense.

CENode.js is also super limited and I don't really know how to improve it beyond the example provided (the format is well documented though). Some simple phrases, outside of the understanding scope, fail miserably:

What is orbited by Titan? --> fails
What does Titan orbit?    --> succeeds

But if you ask "What is Saturn?", you get:

Saturn is a planet. Saturn orbits the star 'sun' and is orbited by the moon 'Titan'...

The passive voice does not seem to be supported in requests.

Finally, what is output by speak.js is pretty terrifying. Whatever the voice you choose, they all sound robotic. They have a cool retro feeling if that's what you're after (and you can argue that it works better for something related to astronomy and space), but they're far from the quality of commercial products.

Going further

This experimentation was limited in time so I didn't want to spend too much on it, but if I had had a real project to build, I'd had seriously looked at:

• Finding better language packages for pocketsphinx.js.
• Building better grammar files for pocketsphinx.js.
• Using CENode.js' advanced features.
• Using better voice packages in espeak.js.
• Supporting more languages outside of English

I don't think it's worth sharing the code that's messy and I'll leave it as an exercise to the reader, unless somebody is really interested.

What I can share though is the FSG generator from a corpus. It needs some cleaning but the code can run on node or in the browser.

There's probably tons of mistakes and approximations in this post, I'm by no means a voice expert, so please correct me if need be. Also if you have any ideas on how to improve it or if I missed an existing library, please do let me know in the comments. Thanks!

Install and activate the Welsh keyboard

Make sure you are using the latest version of B2G. If your device is a Flame or a Sony Z3C running Firefox OS, then you should get new updates automatically. Otherwise, you'll want to flash the latest version.

Here's a quick demo of how to install it on your device.

Test the keyboard

The dictionary builtin in the keyboard is based on Wikipedia in Welsh, which has, I believe, a decent number of pages (around 64,000 articles, ranking it 64th biggest language out of 290).

From my experience, the results is very satisfying. I found the words suggested by this keyboard very useful. But my knowledge of Welsh is very limited, so it may not be completely helpful to a fluent speaker (or writer rather). In particular, I'm afraid that it may be too formal or lack slang or colloquial expressions, frequently used in SMS or social networks.

We need you!

If you speak Welsh, please, try it for yourself. I'd love to hear your feedback and if you have any comments, please use the field below, or reach me on Twitter at @g_marty. If this method is proved to give good results, I'd love to give it a go at producing dictionary in more languages.

Diolch!

tl;dr: You can't efficiently type in Japanese on a Firefox OS device, unless you buy a fx0 device or you build Gaia yourself and are very patient!

Firefox OS is targeting a global audience. You can set your interface in 90 different languages and there are over 70 language specific keyboards! But developing a keyboard is more challenging for some languages than others and Japanese is one of them.

I won't give much details about why is a Japanese IME hard to implement, but the main reason is that there is a massive amount of suggestions that need to be stored on the device somehow. In Japanese, any word can be usually written in several different ways. Storing such a dictionary can cause serious issues on low-end devices with limited memory and processing power.

But that's not a reason to just giving up typing in Japanese on Firefox OS.

fx0

Earlier this year, KDDI released the fx0, a Firefox OS powered device, on the Japanese market. This phone comes with a Japanese keyboard called iWnn IME and developed by Omron Software.

The implementation is efficient and powerful. It comes with many options to configure the keyboard to perfectly suit your needs and habits. Such a high quality is not really surprising as the same keyboard is already available on other platforms (Android notably).

This keyboard has been open sourced in the iwnn-ime-sample Github repo. However the licence is expiring on 30th September 2015 (not sure what's happening afterwards).

The readme file claims it's possible to flash it on a Flame running Firefox OS v2.0. So I tried and everything is working, except for the core feature: the words suggestion. To achieve this in an optimised way, a local server running on the device is used to query words. This part doesn't work. The keyboard however can still be used to input kana, but you won't get any word suggestions.

I then flashed it on a master (tried both on a Flame and Sony Z3C). I encountered the same issue with the words suggestion together with other few minor bugs. But if you use it as a kana only keyboard, then this is probably acceptable.

Drop me a comment below if you need help on how to install it.

Gaia jp-kanji keyboard

There is already a Japanese keyboard in Gaia. To install it, you must build Gaia yourself and flash your device. Here is the suggested command line:

$ GAIA_KEYBOARD_LAYOUTS=en,jp-kanji make reset-gaia

Once flashed, you must enable the new keyboard in Settings > Keyboards > Select keyboards.

This IME comes with words suggestion, but it is neither as user-friendly nor as fast as the iWnn IME one. That is the reason why it is not available to current builds. I love how the design fits in the Firefox OS UI though.

There are plans to build a better Japanese keyboard for Firefox OS, but nothing has happened yet.

So unfortunately, there is no easy way to install a Japanese keyboard on Firefox OS, but we're working on it! If you're wondering what I'm doing with my device, I use the iWnn IME keyboard, but because of its limitations, I avoid typing in Japanese on my mobile whenever I can :-)

The concept

The physical web is based on hardware beacons that broadcast data using Bluetooth Low Energy (BLE) without the need to pair the device. In this case, the data is an URL. For now, it requires you to install an app on your mobile device. This app will scan in the background the surroundings for beacons and will inform you whenever you come across one. You'll then be presented with a list of URL, one per beacon. If the project is successful, this feature may be built-in your mobile OS in the future, thus removing the need for an external app.

There are already some beacons available. I bought a physical web pack from Blesh, but there are more providers. You can also turn your laptop or other devices into beacons using the projects listed here. There's even an implementation for Node.js.

These projects allow you do to both reading and advertising. The app required to read physical web beacons is available on Android and iOS.

mDNS support

Advertising URL on a local network is also supported thanks to mDNS. It works essentially by using a _http._tcp service with an optional TXT record for the path. As noted on the website, the advantage over BLE is that reading is limited to the devices connected to the local network and won't leak to unauthorised people. It also enables broadcasting longer URLs.

Criticism

This project is really interesting because it helps discovering content useful locally using the P2P web. Unfortunately I wish the concept had been taken further and instead of advertising URL that requires an Internet connection to be visited, it could have advertised content stored locally, on a embedded server. You can always advertise URL from a local network using mDNS, but how to make sure the visitors are connected to the correct local network if you use BLE? I understand it is probably in Google's own interest to promote Internet and force users to remain connected at all time. They're not making money on local content completely disconnected from the Internet.

Also it looks like the main use case is to advertise products and services. I strongly think the web and the Internet of things shouldn't be about consumption and profit only. The P2P Web should reinforce local communities and make people to help each other. It should enable you to connect with local people (It sounds cheesy, I know...). Anyway, the web being what you make of it, I still think the physical web is an interesting project.

Next step

I've started building an app to implement the Physical Web on Firefox OS. It will allow you to read and act as a physical web beacons. At the moment BLE is not implemented on B2G, but it's coming to v3, later this year. So in the meantime, I'm relaying on mDNS.

I've set up one of the physical web beacons to advertise the URL of this blog. I'm carrying this beacon with me most of the time. So if you come across it in the streets of London, you'll know I'm not far away!

After reading a post comparing analytics solutions, I realised most people ignore that Google Analytics can be fine tuned to comply with stricter privacy policies. In this post, I'll share the solutions I implemented to keep using Google Analytics without compromising my visitors (a.k.a. yourself) privacy.

Please note that the code only relates to the latest analytics.js API. Look for support pages for older versions of Google Analytics.

The solutions

Disable data sharing

By default, the data collected from Google Analytics are shared across several services like:

• Other Google products like AdWords
• Industries aggregate trends that allow comparing your result with web sites in the same sector
• Technical support...

Though this data sharing should be harmless most of the time, you can disable it in your account settings. You can read more about it on the data sharing settings support page.

Anonymise IP address

Google Analytics has a built-in feature to anonymise IP address (see this help page for details). When enabled, the last few digits of the visitor's IP address are set to 0 (IPv6 is supported). In theory it is not possible for Google to map an anonymised IP address to a specific user. Also, according to their documentation, the complete IP address is never logged.

However, I read the relevant document carefully and noticed it's not very clear to me if Google logs the IP address when the analytics.js file is requested from their server. If you're a bit paranoid, you may decide not to trust Google here. In such case, you'll want to proxy it on your own domain and refresh it as often as possible. I haven't tried myself, but if you're doing that, let me know as I'd love to read more.

Obviously, the down side of this setting is you get a less accurate geographic report as it is based on the IP address. But who needs a granularity to the level of a city?

Implement an opt-out mechanism

You can easily give your users the ability to deactivate tracking. Just create a setting in your app that sets the following property to true:

window['ga-disable-UA-XXXXXX-Y'] = true; // Replace UA-XXXXXX-Y by your Google Analytics ID

You can persist this setting in your user account, so that her preference is is kept whatever the device she's using to access your website. But for performance reason, I recommend not to load Google Analytics at all when your user has opted out. You can read more about user opt-out in the help pages.

Don't use cookies

Though not directly related to privacy, not setting cookies is likely to increase your visitors confidence while removing the need to display a message related to the EU cookie directive.

Instead of cookies, use local storage for storing the visitor identifier used by Google Analytics, the so called clientId parameter. This technique has a beneficial aspect on performance as well. The browser won't send all the cookie detail with every request made to an asset located in the same domain as the page.

Here is the code used in this blog:

ga('create', 'UA-XXXXXX-Y', { // Use your own ID!
  'storage': 'none',
  'clientId': localStorage.getItem('gaClientId')
});
ga(function(tracker) {
  localStorage.setItem('gaClientId', tracker.get('clientId'));
});
ga('send','pageview')

Comply with Do Not Track

The DNT is not only exposed to the client as a HTTP header but also as a property on the navigator object: navigator.doNotTrack. This returns:

• '1' (the visitor does not want to be tracked)
• '0' (the visitor wants to be tracked)
• null or 'unspecified' (the visitor tells nothing about her preference)

You can wrap the code responsible for loading Google Analytics in a if statement like I do in this blog (examine the source for yourself if you don't believe me!):

if (navigator.doNotTrack !== '1') {
  // Load Google Analytics and track user.
}

Force SSL

This blog is hosted on Github pages. Unfortunately, https is not (yet?) supported. The least I could do was to force the analytics.js file and the beacon to be respectively received and sent encrypted. More info about the forceSSL setting is available.

The challenge

Some of the solutions presented here depend on your level of trust. I decided to trust Google even if I can never have the certitude that they really do what they say they do. So after all, your trust level may be different and you can decide whether to apply the solutions mentioned above or turn to other analytics services, like Piwik.

Also, I would have loved to see Google making some of these options easier. For example, support of DNT could have been made an option in the account settings. Also, we can't create a custom IP masking function to push anonymisation even further.

Google Analytics offer some very basic privacy aware options, but they should offer more!

But is a completely serverless web really achievable?

Let's stay very basic for now and let's not consider issues like security or version update.

(Note: the content of this post was inspired and developed during an event and a hack day I attended recently.)

A dystopian example

Imagine you are demonstrating against the government in place in your country. They are powerful and control the communication. In order to slow and confuse you they cut all network. Without internet you can't communicate with your peers and can't organise the movement.

You want to be able to send and receive information. How can you do that when all you have is a web enabled device and no network?

Distribute serverless apps

Let's see if it's possible to distribute apps from device to device, using web technologies only but without servers.

file:// URI scheme

The most obvious and direct approach is to create a file on your computer and open it in your browser using the file:// protocol. It works for simple documents but comes with a huge list of limitations:

• Same-origin policy limitations
• Can't open a file:// URI from a http:// web page
• The reference to the document is local and can't be shared
• Does it even work on mobile browsers?

Data URI

Data URIs allow to package all of your app logic and resources in a string format that your browser can recognise and execute. Rather than using a URL as a reference to a content located somewhere, the URL contains everything. The address IS the content.

A very simple example is the following: data:text/html;utf-8,<b>Hello, world!</b>

Clicking on the link will display the text "Hello, world!" in bold. Everything is self-contained.

There is a limitation, however, in the number of characters such a URI can contain: no more than 65535. Here is the function I use to convert HTML code to data URI:

function dataUriEncode(string) {
  var encoded = 'data:text/html;utf-8,' + encodeURIComponent(string);
  if (encoded.length >= 65535) {
    console.error('The string generated is too long.')
  }
  return encoded;
}

Abusing data Uris

Let's now abuse this simple mechanism to create web pages and distribute them without server.

For the sake of an example, I shamelessly stole WOLF1K, a clone of Wolfenstein in JavaScript that only weights 1K. Here is the complete source code of the app that I'll try to distribute:

data:text/html;utf-8,<title>WOLF1K</title><canvas id=c></canvas><script>E="A=document.body.children.c;B=A.getContext('2d'~=1$&31$&992(E&19)?1;    n=@nB#[A#)onkeyup=0};D=[setInterval(@=innerWidth-30;A.heigh@/2;    n=@n=[t,n,S,8+$*S&8)|(X+y+t*s+t*c8&7]){w=X=x=;v=y=;z=2]z+n/@ a=s=yG=F,r=u;a=c=
X    ;$~)F<G?(F,F1/uS=c/u):(G,G1/rS=32*s/r)}    n=@i<15;i++){2];j=38;i?1X=(+
,
;Y=(,+;ji?random(8-42]=(b-t/16+9.42%6.28)-3.14;z-atan2(Y-=v,X-=w~i&&
>.5?=[sqrt(X*X+Y*Y),@/2-@*b,i,0,++n]    D.sort(+x[-y[}~n)    a=[,a/@ F=@/2/
/[,c=8,u=v=+1=[3]=c=1,@,0%)'):a!ca)    '+v+'%)'atob('CBF+/p6f9AC9bsP/w/dqvdvb2NvD29sb'),y=8,@/4,b!yb)d>>y&1,v),9)]";"@A.width
Math.cos(b)B[i][function(x,y){B.fillStyle='hsl('+D[n][2]+'1,99%,%=1;u=a<0?-a:a,F=(a<0?d:1-d)/u;onkeydownMath.sin(b).charCodeAt(x++%73)    for(?B.fillRect(a,b,u:A[j]-A[j+2];D[n]A[x.which]=--;*t/8;x|=y<<5;,i=0;Math.+=0]1.1,return)*b=,d=:0}F/41]t= -.5,!-=F;#[n]=$(x~);,x".replace(/.([%-}]+)/g,function(x,y){E=E.split(x[0]).join(y)});eval(E)</script>

I will now run this web page and distribute it to other devices without using a server. The tests below are based on the following browser/OS configuration:

• Firefox OS
• Firefox for Android
• Chrome for Android
• Firefox and Chrome desktop (on Ubuntu ; where it makes sense)

Feel free to test and send me the results on other OS configurations.

Distribution strategies

Link

This is the easier way of sharing a data URI app and it works everywhere! Just click the link below to start the app: WOLF1K

Obviously a link means that a web page is required and possibly a server to host it.

Emails

I haven't been able to send or receive a data URI link from an email. This is due to security reasons. What works though is to paste the source code of the app and ask the recipient to copy and paste it in her browser address bar.

SMS

Likewise, copy/pasting content from a text message is the only way to use SMS to send such an app.

Bluetooth and NFC

This methods were a major disappointment to me. I was really hoping that one can send a data URI app from a device to another. But it doesn't work due to "Can't open media type" (Bluetooth) and "Unknown tag type" (NFC) errors. That said, I suspect it can be fixed on Firefox OS.

QR Code

1084 characters are too much for QR Code and make it impossible to decode.

This is sad because this prevents us from using printed material to distribute apps.

If you don't believe me, try to scan that:

Wifi Direct

This is a protocol to discover and communicate with devices connected to the same Wifi network, even if there is no Internet connection. Though it is currently implemented in Firefox OS and Android, this needs to be tested to see if it's possible to send data URI web app via this channel.

Bookmarking and adding to homescreen

Once the app received is running on your browser, you want to bookmark it so that you can use it later.

Desktop browsers permit bookmarking data URI apps, but not to add to homescreen.

On mobile browsers, things are slightly more complex:

• Firefox for Android: bookmark and add to homescreen both work OK
• Chrome for Android: can bookmark but app added to homescreen can't be opened ("App isn't installed" error message)
• Firefox OS: bookmark is replaced by add to homescreen, but this feature doesn't work as of version 2.1 with data URI (Here again I believe this can be fixed)

So what now?

Ironically the only methods that work are the server based one (link, email, text messages). Distributing web documents encoded in data URI without a server is a bit tricky at the moment. OS UI don't always allow creating, sharing or opening such apps. I understand this falls in a particular edge case, but if data URI apps were supported like URL based apps, things would be easier.

Now I'd love to see a discussion happening around what does the web need to achieve this. Are they any specifications currently being standardised that would go in this direction?

Let's move things forward and get a truly serverless web!

The only workaround on desktop is to deactivate HTML5 Audio (and enable Flash!) in Settings > Lab:

The reasons why HTML5 playback doesn't work is probably because of browser sniffing. A couple of bugs are opened (Google Play Music HTML5 Audio Feature broken and Google Play Music not working on Firefox for Android/Firefox OS), but no clear solution was provided thus far.

I'm using Google Play Music to play my CD collection that I've encoded over the last few years and I want listen to it on Firefox OS.

JavaScript API? Nay

There are no official APIs, but some unofficial ones are available. The risk of relying your product on unofficial API is that it can stop working because of a redesign or a protocol change of the original service. Before consider this as an option make sure to check how is the maintainer committed to the API maintenance!

I'm not enquiring further in this direction because a server is usually required. I want something that works offline.

Offline mode? Yay

So, here's how I use Google Music on my Firefox OS devices:

• Install the official client on my desktop
• Download all of my library (warning: may take time and bandwidth)
• Copy to a memory card.

I get:

• My albums
• The songs metadata
• The art cover (I really like that)

I don't get:

• Uploaded content since last library download
• My playlists

It's completely disconnected to the Google Music account, so whenever I upload new CDs, I have to download and copy them to the SD card. But to be honest I don't really mind and it works for me: I get the album covers and it works offline!

Getting all the user languages

As explained in an earlier post, navigator.languages gives us the complete list of languages as set by the user in her browser.

navigator.languages is an array of language codes sorted by priority (the lower the index, the higher the priority).

You can do cool things like:

var langNum = new Set(navigator.languages.map(function(code) {
  return code.split('-').shift();
})).size;
console.log('It looks like you can read %i %s.', 
  langNum, langNum > 1 ? 'different languages' : 'language');

(Set is used here to dedupe the array.)

Use this to show the best matching language by comparing navigator.languages to the ones supported by your app. But of course, also offer an option to change the language.

languagechange event

In addition to navigator.languages, browsers can now listen to the languagechange event fired by the window object to update the UI language accordingly:

window.addEventListener('languagechange', function() {
  console.log('You updated your browser languages to "%s"', navigator.languages.join(', '));
});

I set up this quick demo that lists the languages set in your browser and stays up to date.

This powerful event means web apps don't require to be reloaded to update their UI language and can integrate perfectly in the browser/OS.

Polyfill

Polyfilling navigator.languages couldn't get any easier:

if (!navigator.languages) {
  navigator.languages = [navigator.language];
}

Setting the language independently to the OS

As a side note on this topic, on most mobile OSes (and some others like MacOS), the language of the browser is tied to that of the OS. Since last year, it's now possible to change the language of Firefox for Android independently (and without restarting the browser!). Why is it important? See this blog post for more details.

Naive implementation

When I started adding the software gamepad, I did something quick and dirty. I didn't really have time to waste developing a nice looking controller in canvas (though that would have been easier). So I just threw some <div> tags, styled them and attached a couple of event listeners.

To have a gamepad compatible with touch screens, I naturally listened to touch event on each key (up, down, left, right, fire1, fire2 and start). touchstart and touchmove communicate the active key to the emulator and touchend release it.

The main issue I found was that if the user moves her finger, the JavaScript will recognise the activation of a particular key, but will release a different one. In other word, the key initially pressed will never be released.

Clearly, this was unusable.

Better implementation

I looked for tutorials and references about how to build a gamepad using HTML5, but it looks like most HTML5 games use canvas and detect the currently touched key using the location of the touch.

The location of the finger relative to the screen is stored in clientX and clientY properties of the touch event. If you use jQuery, like myself, make sure to reference the original event using originalEvent property (i.e. evt.originalEvent.clientX).

To get the position of the currently touch key in HTML, I could have computed the position and size of each buttons, then loop through them to find the element touched. In my case, that wasn't possible because I use a complex layout made of rounded and rotated elements and not just square buttons.

Thanks to StackOverflow, the answer was actually quite easy and requires a single DOM method: document.elementFromPoint.

To get the currently touched element just pass the touch event coordinates to document.elementFromPoint:

var touchedElement = document.elementFromPoint(evt.clientX, evt.clientY);

Then, you need to implement a mechanism to map back the DOM element touched to the emulated key (I personally use CSS class name and a map object).

Also, you'll want to iterate over the changedTouches array to properly activate all the buttons pressed on multi-touch devices.

To put it in a nutshell:

function onTouch(evt) {
  emulator.releaseAllKeys();
  evt.changedTouches.forEach(function(touch) {
    var target = document.elementFromPoint(touch.clientX, touch.clientY);
    var key = getKeyFromElement(target);
    emulator.pressKey(key);
  });

  evt.preventDefault();
}

function onTouchEnd(evt) {
  emulator.releaseAllKeys();
}

padElement.addEventListener('touchstart', onTouch);
padElement.addEventListener('touchmove', onTouch);
padElement.addEventListener('touchend', onTouchEnd);

Obviously, you'll want to code your own getKeyFromElement and emulator communicating functions.

How optimised?

The result is a nicely working touch optimised controller in HTML5. The finger can swipe from one key to another and the emulator reacts responsively.

I don't think you could do simpler and according to my coworker, the brilliant Chris Lord, if your DOM tree is simple you shouldn't get any performance penalty from using document.elementFromPoint.

Happy gaming!

Disclaimer

I wish I had a serious background in NLP and machine translation, but I don't and the logic described here is solely based on my scarce knowledge in this field and my experience as a foreign language speaker.

Definition

I'm not sure if the word syntactic machine translation does really exist, but I found it describes what I mean very well. So let's start off by giving my personal definition of syntactic MT.

Unlike advanced techniques, the syntactic MT engine only takes the syntax of the languages into account. It doesn't try to understand the meaning of the phrases to translate. This is major limitation as it can't understand idiomatic expressions, such as proverbs...

Also a single word with different meanings will be translated the same way regardless of the context in the sentence to translate.

This is to be remembered when assessing the accuracy of the translated phrases.

However, the advantage of this method lays in the fact that it is very easy to develop, doesn't require a deep understanding of MT and can be hacked in a weekend!

How does it work?

I'll now describe the mechanism I implemented to hack a quick and dirty syntactic MT engine for English and Japanese.

This idea of syntactic MT is that elements in translated pairs bear the same class of Part of Speech (POS ; i.e. noun, verb, adverb...) in both languages, for example, an adjective remains an adjective in the resulting translation. A certain grammatical pattern will be the same in each pairs of the corpus and the resulting translation.

Spring cleaning

First of all, I cleaned up the corpus a bit, applying the following steps:

• Removing incomplete sentences
• Unify punctuations (specially adding an optional question mark at the end of questions in Japanese)
• Normalising the Japanese to use half-width alphanumeric characters and full-width katakana and punctuation signs

I then normalise both languages to keep semantic equivalents while reducing inflected forms (e.g. can't -> cannot ; します -> する ; See /utils/ja-normalizer.js and /utils/en-normalizer.js). Doing so reduced noise and helped a lot on quality as the corpus is quite small.

Tag the corpus

Then, the next thing to do is to tag the POS of all the pairs in the corpus.

The English sentences are tagged using pos-js written in JavaScript (an in-browser and Node.JS versions both exist).

The Japanese is tagged using ChaSen. ChaSen is a famous command line utility, but this is a serious limitation here. To make it work, the sentence to translate must be tagged too (more on this later). I wanted the app to work offline and use frontend code only, but the lack of a JavaScript implementation of a Japanese POS tagger forced me to reject Japanese to English translation. Only English to Japanese is supported.

The first problem arising here is the difference between the POS items in English and Japanese. Chasen is very comprehensive, so I had to simplify and match its POS items to the ones returned by pos-js (see /utils/chasen2jspos-map.json and /utils/jspos2simplified-map.json).

Build a dictionary

At this stage, I have 2 corpus tagged, I can easily align classes of POS in both languages to build a dictionary. Let's say a pair has only one adjective in English and in Japanese, we can conclude that this adjective in English is likely to be translated by this other adjective in Japanese. The first pass consists of extracting terms whose class of POS appear only once in each pair.

For more ambiguous pairs containing more than one class of POS in both sentences, alignment is harder. The method I found makes use of the dictionary we are building.

Let's say a phrase has 2 adjectives in both languages. If one of them and its translation are already in the dictionary, we can assume that the remaining adjective matches the other one in the destination sentence. This is the second pass. I repeat this step a couple of times until no new translations are found.

This dictionary building method gives incredible results. Of course there is some noise, but for frequent words, the translations are very accurate. Here's an example for the word already and its frequency in Japanese translations:

{
  "すでに": 23,
  "既に": 17,
  "もう": 8
}

It indeed contains all the translation for already that I know!

See /build-dico.js for the implementation.

Build a POS converter

Now we're still using the POS tagged corpus to match patterns in both languages.

For each phrase with a certain POS pattern (e.g. Noun Verb Noun), we look for the most common pattern in the translated phrases. The idea is to determine which is the most frequent translated POS pattern of a language given the POS pattern of the source phrase.

At this stage I also generate what I called placeholders. They are generic sentences for this particular POS pattern where I replaced each word by the most common one (I know it's completely unscientific!). These are used as a base for translation. I just need to inject the right words (see below).

See the code at /build-pos-converter.js.

Finally, translate

With all these static assets generated (dictionary, POS pattern matcher, POS pattern placeholders), I can try to translate from one language to another.

The user input in English is first normalised (see above), then POS tagged (Remember? That's why I can't use Japanese input on the browser as ChaSen is a command line tool). I then look for the most frequent POS pattern in Japanese.

Once found, I take the Japanese placeholder sentence for this POS pattern and inject into it the translations from the original English input. For words that don't have translations, the word is just ignored and the one from the placeholder is preserved (thus creating very weird translations at time, but at least giving complete and correct sentences). Of course this could be improved using a more comprehensive dictionary, but I didn't try it.

One of the problem not addressed by this script is the alignment of several identical classes of POS. In this case, I just assign them in order: the first adjective in English is matched to the first in Japanese, then the second... and so on. I know this is quite of an issue, but I just couldn't be bothered trying to fix it.

The script is located in /en2ja.js.

The future

There is a lot of room for improvement in many places:

• Using an unified POS tagger for English and Japanese, ideally written in JavaScript, for a better quality.
• Using an external dictionary to enhance translations.
• Use statistics to reject the less significant pairs in the dictionary and the POS converter.
• Use a stemmer to group several inflections of the same nouns, verbs or adjectives and get a more complete dictionary.
• Use a bigger corpus.

But that's it for now, I may work on this later, but in the meantime, feel free to contribute!

Google Translate is powered by the technique called machine translation. It can translate sentences from one natural language to another, without human interactions. I recently heard that Mozilla was starting a project to create an open source machine translation engine. That immediately resonated in me and I decided to give it a try and build my own English-Japanese translator in JavaScript.

Day 1: Get ready

On the Friday late afternoon, I had a general idea of what I wanted to implement: a machine translation engine using syntax to translate sentences. I wanted something simple and couldn't wait to see it working. I realized I had this "fire in the belly" and jumped directly into the action. I spent a small amount of time gathering what I needed: a corpus of translated pairs in English and Japanese and a part-of-speech tagger for these languages. I started fiddling around with the tools with as few coding as possible.

Day 2: Put it together

I had a late night and woke up on Saturday around 11 o'clock. I spent a few hours cleaning up what I had done the day before, creating a dedicated folder and project in my IDE. I started coding and refactor the code. I also spent some time sketching solutions on paper, to make sure I hadn't missed an important point.

Day 3: Make it work

I got back to the project in the early afternoon. I mostly did coding this day. I was so excited to see my translation engine work that I sat in front of my computer for ~10 hours. At the end of the day, I had something working. After a bit of cleaning, I created the repo on Github and pushed the code.

After day 3

Whatever happened after day 3 is not important. Most of the work has been done over the weekend and I had a working prototype. Obviously, it is just a toy system, that is nothing comparable to Google Translate, but I'm happy I was able to do it in a rather limited amount of time. And most importantly, I can iterate on it and progressively make it better. Try it for yourself!

Conclusion

I was able to achieve this because JavaScript is very suited for fast prototyping. If it were a business, I could have started generating profit from day 4. I really love the idea of hacking a quick and dirty prototype and see how it works. Next time you have an idea for a business, do some quick prototyping and launch it as early as possible!

And if you're wondering, I had dinner in a lovely Italian restaurant on Saturday night :-)

I've always wondered why it is not possible to get in JavaScript the list of all languages as configured in the browser. This list is made available to servers via a HTTP header.

On the other hand, JavaScript can only get the first language using:

console.log(navigator.language); // 'en', 'fr', 'de' or whatever

Browsers inconsistencies

Getting the language of the browser is part of the HTML5 specifications, but implementations vary widely.

Internet Explorer

Let's start with IE that has (surprisingly) the most complete set of (non standard) features about the environment language. navigator.userLanguage gets the first language set by the user (can be changed in Internet Options > General > Languages ; see Internet Explorer Dev Center).

navigator.browserLanguage returns the language of the UI of the browser. You can't change this value, it is decided by the version of the executable you installed (This property and all its subtleties are described in Internet Explorer Dev Center).

Finally, navigator.systemLanguage will give you the locale used by the OS (See Internet Explorer Dev Center.

Firefox & Safari

navigator.language returns the first language in the list of languages.

In Firefox, you can define it in Options > Content > Languages.

Safari uses the language set at the system level (See navigator.systemLanguage of IE above). You cannot just override it in Safari.

Some details are available on the navigator.language page on MDN.

Chrome

Invariantly returns the language of the UI through navigator.language without a possibility to change it. The value is similar to navigator.browserLanguage of IE.

Chrome extensions can retrieve the full list of languages as set by the user thanks to chrome.i18n.getAcceptLanguages() (Not sure why this API is async):

chrome.i18n.getAcceptLanguages(function(requestedLocales) {
  // 'requestedLocales' is an array of strings.
});

What's wrong with the current approach?

Well, apart from the semantic inconsistencies, knowing only the main language is a serious limitation. Let's illustrate this with my personal experience. My browsers have the following configuration:

1. Japanese
2. English (GB)
3. English
4. English (US)
5. French
6. Spanish
7. Korean
8. German

(Yeah, I want to train my Japanese, so I listed it first!)

A website available in several languages will show the interface in Japanese and English if not available.

But a local app will only get the first language, Japanese. So if this language is not available, the UI will be shown in a totally random language that I may not understand.

Also, if the app knows the full list, it could use it to detect visitors speaking rare languages and ask them to collaborate on translation.

How to fix it?

First of all, an easy cross browser way to get the preferred language is to do:

/** @const */ DEFAULT_VALUE = 'en';
/** @const */ PREFERRED_LANGUAGE = navigator.language || navigator.userLanguage || navigator.browserLanguage || navigator.systemLanguage || DEFAULT_VALUE;

That's fine as long as your app supports this language.

If not, you could always ping a server, get the accept-language HTTP header, send the response back to JavaScript and parse it. That means that you need a scriptable server, so you cannot do it for, offline apps or for apps hosted on a static web server like Github Pages. Oh and Mac have only one language configured at a time: you will never get more than 1 element in the list of this header on Safari.

What to do next?

The good news is things are being worked on.

First, there is this bug on the WHATWG bug tracker to discuss this feature, with all the details here. Firefox is already thinking of implementing it.

To put it in a nutshell, the current consensus is to have a new JavaScript property called navigator.languages that returns an array of language codes sorted by preference order:

console.log(navigator.languages);
// The configuration above would give something like:
// ['ja', 'en-GB', 'en', 'en-US', 'fr', 'es', 'ko', 'de'];

Also, firing an event when language changes is also being discussed. Firefox OS allows this on certified apps with a proprietary API:

navigator.mozSettings.addObserver('language.current', function(event) {
  console.log('New language', event.settingValue); // Default value is 'en-US'.
});

To conclude

Making the full list of languages configured in a browser available to JavaScript can't be done front-end at all and partially using back-end. But this information is stored in the OS/browser itself. Am I the only one to think something is wrong here?

This topic is hard and has been around for a while, so some of the resources I consulted might be outdated. Use the comments below if you spotted any error.

tl;dr: In case of slow web app:

• Don't immediately jump into JavaScript optimisation; instead investigate network, DOM, rendering... and fix accordingly
• Profile your application and optimise the code logic
• Optimise JavaScript only when required

Find the culprit

In modern browsers, JavaScript is rarely the cause of slow applications. There are many layers involved in web applications that are way slower.

The first thing to do is to investigate to find out where the performance issue is coming from. The causes can be multiple:

• Relying too much on the connexion
• Extensive DOM manipulation
• Rendering issues (forced layout...)
• io (e.g. repeated usage of localStorage)

Use the Network tab of your favourite browser's development tool. Make sure your requests don't have any impact on your application at start and run time. Repeated Ajax calls can slow down applications too.

Identifying slow DOM manipulation is a bit harder. The Timeline tab of Chrome's dev tools can help you pinpointing such issues. Of course, you must get familiar with the best practices. For example, when rendering a list of items in a templating engine, move the loop to the template and append all items to the DOM in one operation.

Rendering issues can also be captured by Chrome's dev tools and starting from version 27, Firefox can now log functions that trigger a reflow!

There are a lot of valuable resources on the net about how to track down and fix these issues, so I won't cover them here. Once fixed, your application should work smoother. Not the case with yours? Keep reading then.

Profile and improve logic. Rinse and repeat

So you made all these checks and you realised that JavaScript is actually what causes your application to perform badly.

Nice, my favourite part of the optimisation process starts here! You need to profile your application.

Grab your modern browser. Start the profiler then your app and interact with it like a normal user would. After a while, stop the profiler.

You can now drill down to the most frequently called functions. If you're using closures or generated functions, make sure to name them to get meaningful results.

Now, have a look at the logic of the calls. There is certainly room for optimisation. Common mistakes include:

• Calling a function too many times, where the result could be cached and reused
• Deeply nested loops
• Iterating too many times when you could stop the iteration prematurely

You also need to profile the memory used and track potential leak or heavy garbage collections.

By operating at the code logic level, you can improve the speed of your application. The fixes applied here are not directly related to the JavaScript language, but rather to the logic of your code.

You found and fixed these bottlenecks and now your application is running faster and smoother. You are now done, no need to read further.

About JavaScript optimisation

You are still reading? I assume you are working on a signal processing tool, a game or a fundamental piece of software that must run fast.

Before looking into the optimisation of JavaScript, I must clarify a couple of things.

Keep in mind that JavaScript VMs are very good at running your code at a fast speed.

Trust the VM.

The second thing is using an alternate JavaScript syntax in your code is likely to never have any significant impact on speed. This belief dates back from the time browsers didn't have a JIT. Back then, using different syntaxes could make a difference. These kind of statements flourished over the web:

• if are faster than switch.
• bitwise operations are faster than mathematical operators.
• join array to do strings concatenation

Optimising JavaScript is not about the syntax. You can't base an optimisation strategy on syntax rewriting only. You'll end up wasting your time and get a little to no results. I'm not even mentioning the impact on readability and maintainability of your code.

Also, VM are constantly evolving. What perform best today might not tomorrow. VM implementors take code from the real world to see what developers do and what patterns to optimise. Using weird syntax is likely to never be optimised. Just write your code in a way that makes sense and that should be enough.

Finally, you're ready to optimise JavaScript

After reading and understanding the statements above, you are now ready to improve your code using advanced optimisations. These crazy techniques include:

• Enforcing type stability
• Tracking deoptimisations
• Use web workers to do parrallel processing

In the 2nd part of this talk, Vyacheslav shows a tool to inspect the code generated by V8. It's complex to dive into the VM internals, but that's the only way to gain some performance points.

To track deoptimisations, using Chrome or V8, you can pass some flags like --trace_deopt (trace deoptimization). You'll get a more or less descriptive message about why V8 is not able to optimise your code. Fix it if possible.

There are no such tools for Firefox (since JIT inspector is not working) or IE. So I have to recommend Chrome to optimise JavaScript this way. However, try as much as possible not to be too specific so that your code run fast, or at least not slower, on other browsers too.

Optimisation is a complex topic, but there are techniques we can apply to make your code run fast. I'd like to elaborate on each step described in this process in the form of blog posts. But for now, just take the time to locate the cause of slowness and don't incriminate JavaScript right away, the culprit can be hiding elsewhere!

SD Card

The SD Card location used by Firefox OS Simulator is mapped to a physical folder on your computer.

On Windows:

C:\Users\USERNAME\AppData\Roaming\Mozilla\Firefox\Profiles\PROFILEKEY\extensions\r2d2b2g@mozilla.org\profile\fake-sdcard

On Ubuntu:

/home/USERNAME/.mozilla/firefox/PROFILEKEY/extensions/r2d2b2g@mozilla.org/profile/fake-sdcard

On Mac:

Let me know via a comment below where is this folder on Mac.

Of course, USERNAME and PROFILEKEY are specific to your configuration, so make sure to look into the right folder.

Place files in this folder and you’ll be able to access them from the Simulator using a privileged app.

If this folder doesn't exist, I believe it's safe to create it yourself first.

The File objects

When you call get or enumerate on navigator.getDeviceStorage('sdcard') you get File objects.

For reference, these objects look like this (slightly different than the File API page on MDN):

{
  name: 'file.txt',
  size: 32768, // In bytes
  type: 'text/plain', // MIME type
  lastModifiedDate: 'Fri Nov 22 2013 12:00:00 GMT+0000 (GMT Standard Time)', // Date object,
  mozFullPath: 'path/to/the/file' // Relative to the SD Card folder
}

They also have 2 methods: slice() and mozSlice().

Then if you want to have access to the content of these files in JavaScript, you can just pass them to the FileReader API:

var reader = new FileReader();
reader.onload = function(e) {
  // e.target.result is the content of the file.
};
reader.readAsText(file); // Or whatever method suits you best.

I found this API complex to work with. There are different way to access files depending on:

• what you do with (read only or write)
• whether you know the file location or not

I hope to write a more complete post or tutorial on the Device Storage API in the future, as accessing files is a common use case for web apps in Firefox OS.

• Simple
• Hosted for free
• Editable from anywhere
• and of course based on open source tools

Finding tools and solutions

I'm a lazy person and I find it very difficult to do things routinely. So, if I start a blog, I must make sure that nothing gets in my way. The writing/publishing process must be as easy as possible. It took me a while to love the simplicity of Markdown. But ever since I started working heavily with Github, I fell in love with its syntax. Markdown powers the simplicity I needed.

I admire the logic behind the static websites generators. They move the complexity of blogs from the server to your computer. The resulting blogs are incredible fast. We can then use Github as a web hosting platform for free! I choose Cabin because it is simple and I wanted to experiment with Jade templates.

The mobile aspect was important to me. I wanted to start or edit posts directly from my mobile, wherever I am, whenever I have time. Also I always use several browsers on different computers all the time, sometime on a bad connexion, if any at all. That's why I needed something distributed and not dependent on network status. A few months ago I came upon StackEdit and was struck by its simplicity, beauty and powerfulness. It works on the browser, offline by default, can synchronise to many services (including Dropbox and Google Drive). The interface is split vertically with the original Markdown view on the left hand side next to the resulting formatted post, a UI pattern used by the blogging platform Ghost that received a lot of attention lately.

Putting it all together

A typical blog post starts like this. I launch a browser on the device available (laptop, mobile...), start StackEdit and open a new document. I've modified the default document to start with the metadata used by Cabin (Think of it as YAML front matter used by Jekyll, but in JSON):

{
  title: "Title",
  date: "2013-11-01",
  description: "Description"
}

I edit these metadata, start writing my draft and save it to Google Drive. I guess I could publish it directly to the Github repo as a draft (prefixed by _), but I prefer to keep my drafts private until they are ready for publication. Then I can synchronise and edit the posts from whatever device is available.

When the post is ready, I publish it to my blog repo on Github, in the posts folder. The tricky part now is that I need to launch the terminal, navigate to the blog folder on my computer and type:

git pull && grunt deploy

The Grunt task deploy of Cabin is responsible for generating a static version and push it to the gh-pages branch of the repo.

That's it.

Wrapping up

This blog is powered by:

1. Stackedit
2. Cabin
3. Github
4. Love

I really wish I were able to optimise the pull/deploy step and call it from any device, but I can't really think of any free and easy alternative. Do you have any ideas? Use the comments box below and make my life easier :-)