What We Liked and Learned at JSConf.eu
Microsoft Edge, Mozilla Flame, WYSISWYM, JSCodeShift, and more.
Kai Jäger of Microsoft gave an introduction to Microsoft’s most recent — and joyfully anticipated — browser. Edge seems designed specifically to silence the developer community who would otherwise say, “of course the website doesn’t render properly in [this MS browser]”; it even picks up Webkit vendor prefixes, if necessary. Jäger explained that the Microsoft team had a hard time testing for compatibility because web servers showed them dumbed-down webapps; consequently, its user agent string now contains every browser.
Perhaps the most important aspect of Edge is that Microsoft is being particularly transparent about it. As an example, we’d been asking developers to vote for SVG External Content support for cross-browser SVG icons; last week, Microsoft delivered on this feature. Developers can still suggest features (and track the progress of their suggestions).
Building a Robust WYSIWYM Editor
Marijn Haverbeke, the creator of ProseMirror, spoke about WYSIWYM, or “what you see is what you mean" — his approach to editing formatted text in the browser. WYSIWYM’s key difference from WYSIWYG (what you see is what you get) is that, while the latter allows you to style text, it doesn’t enable you to structure the text semantically. Marijn spoke about different approaches to editing formatted text in the browser: using the contentEditable browser feature, for instance, or implementing everything — including the cursor and selection — from scratch.
Both approaches have their pros and cons, so in many situations applying a combination of the two works best. Use contentEditable, but then intercept default events and write your own code to update the DOM and overcome browsers’ inconsistencies.
None of our hard metrics (Time-to-First-Byte, for example) are of much use when we fail to take human psychology into account. How much do you have to speed up your app before your users even notice a difference? Or, inversely, by how much can you fuck up a production deployment? Denys Mishunov suggests using a 20 % rule to simplify the science behind it: If your app previously took one second to load, users won’t notice a 200 milliseconds’ difference in either direction. Luckily, you don’t have to wait for the video of Denys’s talk, because he has been exploring this topic in great detail at Smashing Magazine.
RegExp Unicode Flag
ES6 will include an “u” flag for available regular expressions. Finally, you will be able to safely write [😸-🙀]/gu to match all cat faces! This wasn’t possible before, because Emojis are encoded by two Unicode code points (surrogate halfs); ES5 would interpret the above as [\uD83D\uDE38-\uD83D\uDE40]. Mathias Bynens from Opera has created regexpu: a transpiler that makes it possible to use the “u” flag right now. It’s already integrated in Babel, so you should start using the “u” flag for all new Regexes. Please be careful, though, when adding the flag to old Regexes, because it may alter their behavior in unexpected ways.
Another big-potential project from Facebook. JSCodeShift is (basically) scripted refactorings of your code, called “codemods.” Presenter Christoph Pojer used it to update a project from React.createClass to ES6 classes in mere seconds. Facebook plans to release codemods along with API changes, which could relieve developers from a lot of churn (even more so if the practice spreads to other projects). Internally, it uses a parser from Babel and a clever diffing algorithm to ensure that the correct indentation is preserved, and that the least number of source lines is touched by the transformation. The plan is to make the Babel parser sensitive to whitespace to make JSCodeShift even more robust. Play around with AST explorer to get a better idea.
Adobe Engineer Razvan Caliman’s very inspiring talk reminded us that we might not actually need HTTP or WebSockets to do stuff. He demo’ed several data transmissions via ultrasound (or regular sound), low-fi gesture detection using ultrasound and the Doppler effect — using Ambient Light Events to detect Morse code and some other creative applications of visible light communication.
Time zones are always fun, as long as you don’t deal with them yourself. (You probably know the excellent “falsehoods programmers believe about time” already, but just in case: Part 1, Part 2.) What really stuck as the perfect example of how messy they are: Morocco switches time zones not twice but four times a year, because they change it before and after Ramadan, too. As the Islamic calendar is a lunar calendar, Ramadan shifts through the Gregorian calendar. Oh and Sydney had a one-off change before the Olympics. Good luck coding around that! The main takeaway from timezone-talking Gilmore Davidson: Avoid dealing with timezones. Think hard if you really, really need them. “In the end, they still don’t tell you whether someone is awake or at work.”
Consequences of an Insightful Algorithm
The closing talk by CallbackWomen founder Carina C. Zona was about algorithms that kinda work for the majority of people, but fail horribly for the rest. An example: Facebook’s “Year in Review” app, which showed technologist Eric Meyer pictures of his daughter — captioned “Anne turned 7!” — who had died that year. Another: When Google Photos tagged black people as gorillas. Yet another: Fitbit tracking people’s sexual activity and making the data public by default. Carina’s message was a reminder to the audience that any of us developers could one day create a product that causes a similar type of damage. We are making decisions all the time, often quickly. Yet we need to be mindful at all times about the impact of potential false-positives or false-negatives, in order to do no harm.
Firefox OS Workshop
We got to have a quick hands-on with a Firefox OS phone. If you don’t know, this is a mobile phone operating system built on web standards, so that you can inspect your Home Screen with Firefox’s developer tools (and see that it’s all just divs and spans).
The “getting started” experience was quite pleasant and easy to follow. Andrey, always living on the edge, immediately tested support for marquee and blink tags (the former worked, the latter didn’t). Support for web standards is so good that one Mozilla employee suggested that I just use getUserMedia instead of the non-web Camera API to access the camera.
@wa7son created several npm packages to work with Apple’s Airplay.
@_munter_ made a task runner that’s easy to understand and doesn’t need much configuration.