Tags: opera

6

sparkline

The Progressive Web App Dev Summit

I was in Amsterdam again at the start of last week for the Progressive Web App Dev Summit, organised by Google. Most of the talks were given by Google employees, but not all—this wasn’t just a European version of Google I/O. Representatives from Opera, Mozilla, Samsung, and Microsoft were also there, and there were quite a few case studies from independent companies. That was very gratifying to see.

Almost all the talks were related to progressive web apps. I say, “almost all” because there were occasional outliers. There was a talk on web components, which don’t have anything directly to do with progressive web apps (and I hope there won’t be any attempts to suggest otherwise), and another on rendering performance that had good advice for anyone building any kind of website. Most of the talks were about the building blocks of progressive web apps: HTTPS, Service Workers, push notifications, and all that jazz.

I was very pleased to see that there was a move away from the suggesting that single-page apps with the app-shell architecture model were the only way of building progressive web apps.

There were lots of great examples of progressively enhancing existing sites into progressive web apps. Jeff Posnick’s talk was a step-by-step walkthrough of doing exactly that. Reading through the agenda, I was really happy to see this message repeated again and again:

In this session we’ll take an online-only site and turn it into a fully network-resilient, offline-first installable progressive web app. We’ll also break out of the app shell and look at approaches that better-suit traditional server-driven sites.

Progressive Web Apps should work everywhere for every user. But what happens when the technology and API’s are not available for in your users browser? In this talk we will show you how you can think about and build sites that work everywhere.

Progressive Web Apps should load fast, work great offline, and progressively enhance to a better experience in modern browsers.

How do you put the “progressive” into your current web app?

You can (and should!) build for the latest and greatest browsers, but through a collection of fallbacks and progressive enhancements you can bring a lot tomorrow’s web to yesterday’s browsers.

I think this is a really smart move. It’s a lot easier to sell people on incremental changes than it is to convince them to rip everything out and start from scratch (another reason why I’m dubious about any association between web components and progressive web apps—but I’ll save that for another post).

The other angle that I really liked was the emphasis on emerging markets, not just wealthy westerners. Tal Oppenheimer’s talk Building for Billions was superb, and Alex kicked the whole thing off with some great facts and figures on mobile usage.

In my mind, these two threads are very much related. Progressive enhancement allows us to have our progressive web app cake and eat it too: we can make websites that can be accessed on devices with limited storage and slow networks, while at the same time ensuring those same sites take advantage of all the newest features in the latest and greatest browsers. I talked to a lot of Google devs about ways to measure the quality of a progressive web app, and I’m coming to the conclusion that a truly high-quality site is one that can still be accessed by a proxy browser like Opera Mini, while providing a turbo-charged experience in the latest version of Chrome. If you think that sounds naive or unrealistic, then I think you might want to dive deeper into all the technologies that make progressive web apps so powerful—responsive design, Service Workers, a manifest file, HTTPS, push notifications; all of those features can and should be used in a layered fashion.

Speaking of Opera, Andreas kind of stole the show, demoing the latest interface experiments in Opera Mobile.

That ambient badging that Alex was talking about? Opera is doing it. The importance of being able to access URLs that I’ve been ranting about? Opera is doing it.

Then we had the idea to somehow connect it to the “pull-to-refresh” spinner, as a secondary gesture to the left or right.

Nice! I’m looking forward to seeing what other browsers come up with it. It’s genuinely exciting to see all these different browser makers in complete agreement on which standards they want to support, while at the same time differentiating their products by competing on user experience. Microsoft recently announced that progressive web apps will be indexed in their app store just like native apps—a really interesting move.

The Progressive Web App Dev Summit wrapped up with a closing panel, that I had the honour of hosting. I thought it was very brave of Paul to ask me to host this, considering my strident criticism of Google’s missteps.

Initially there were going to be six people on the panel. Then it became eight. Then I blinked and it suddenly became twelve. Less of a panel, more of a jury. Half the panelists were from Google and the other half were from Opera, Microsoft, Mozilla, and Samsung. Some of those representatives were a bit too media-trained for my liking: Ali from Microsoft tried to just give a spiel, and Alex Komoroske from Google wouldn’t give me a straight answer about whether he wants Android Instant apps to succeed—Jake was a bit more honest. I should have channelled my inner Paxman a bit more.

Needless to say, nobody from Apple was at the event. No surprise there. They’ve already promised to come to the next event. There won’t be an Apple representative on stage, obviously—that would be asking too much, wouldn’t it? But at least it looks like they’re finally making an effort to engage with the wider developer community.

All in all, the Progressive Web App Dev Summit was good fun. I found the event quite inspiring, although the sausage festiness of the attendees was depressing. It would be good if the marketing for these events reached a wider audience—I met a lot of developers who only found out about it a week or two before the event.

I really hope that people will come away with the message that they can get started with progressive web apps right now without having to re-architect their whole site. Right now the barrier to entry is having your site running on HTTPS. Once you’ve got that up and running, it’s pretty much a no-brainer to add a manifest file and a basic Service Worker—to boost performance if nothing else. From there, you’re in a great position to incrementally add more and more features—an offline-first approach with your Service Worker, perhaps? Or maybe start dabbling in push notifications. The great thing about all of these technologies (with the glaring exception of web components in their current state) is that you don’t need to bet the farm on any of them. Try them out. Use them as enhancements. You’ve literally got nothing to lose …and your users have everything to gain.

The literary operator

One of the great pleasures of putting on Brighton SF right before last year’s dConstruct was how it allowed me to mash up two of my favourite worlds: the web and science fiction (although I don’t believe they’re that far removed from one another). One day I’m interviewing Jeff Noon about his latest book; the next, I’m introducing Tom Armitage on stage at the Brighton Dome.

Those two have since been collaborating on a new project.

You may have seen Jeff’s microspores—a collection of tweet-sized texts, each one an individual seed for a sci-fi story. Here’s Spore #50:

After the Babel Towers attack, lo-fi operators worked the edges of the language, forging new phrases from the fragments of literature. They filled boxes with word shards in the hope of recreating lost stories.

Tom has taken that as the starting point for creating a machine called the literary operator

It’s quite beautiful. It fits inside a suitcase. It has an LED interface. It has a puck that nestles into the palm of your hand. It comes with a collection of books. You take the puck in your hand, pass it over the spine of one of the books, and wait for the LEDs to change. Then you will receive a snippet of reconstructed text, generated Markov-style from the book.

As Tom says:

It is an object that is both entirely fictional, and entirely real. Not “design fiction”; just fiction.

Literary Operator Fahrenheit 451

You can use/play with the literary operator—and hear from Tom and Jeff—this Thursday evening, September 26th at the Brighton Museum as part of Digital Late. Sarah and Chris are also on the bill so don’t miss it: tickets are a fiver if you book ahead of time.

South by CSS

South by Southwest has become a vast, sprawling festival with a preponderance of panels pitched at marketers, start-ups and people that use the words “social media” in their job title without irony. But there were also some great design and development talks if you looked for them.

Samantha gave a presentation on style tiles, which I unfortunately missed but I’ll be eagerly awaiting the release of the audio. I also missed some good meaty JavaScript talks but I did manage to make it along to Jen’s excellent introduction to HTML5 APIs.

Andy’s talk on CSS best practices was one of the best presentations I’ve ever seen. He did a fantastic job of tackling some really important topics. It’s a presentation (and a presenter) that deserves a wider audience, so if you’re involved in putting together the line-up for any front-end conferences, I highly recommend that you nab him.

Divya put together an absolutely killer panel called CSS.next, all about how CSS gets specced and shipped, and what’s coming down the line. All of the panelists were smart, articulate, and well-informed. The panel was very enlightening, as well as being thoroughly enjoyable.

And then there was the Browser Wars panel.

This is something of a SXSW tradition. Arun assembles a line-up of representatives from browser makers—Mozilla, Google, Microsoft, and Opera—and then peppers them with some hardball questions. Apple is invited to send a representative every year, and every year, Apple declines.

There was no shortage of contentious topics this year. The subject of Google Dart was raised (“Good luck with that,” said Brendan). There was also plenty of discussion about the recent DRM proposal submitted to the HTML working group. There was a disturbing level of agreement amongst all the panelists that some form of DRM for video was needed because, hey, that’s just the way things go…

As an aside, I must say I found the lack of imagination on display to be pretty disheartening. Two years ago, Chris was on the Browser Wars panel representing Microsoft, defending the EOT format because, hey, that’s just the way things go. Without some form of DRM, he argued, we couldn’t have fonts on the web. Well, the web found a way. Now Chris is representing Google but the argument remains the same. DRM, so the argument goes, is the only way we’ll get video on the web because that’s what the “rights holders” demand. And yet, if you are a photographer, no such special consideration is afforded to you. The img element has no DRM and people are managing just fine, thank you. Video, apparently, is a special case …just like fonts. ahem

Anyway…

The subject of vendor prefixes also came up. Specifically, the looming prospect of non-webkit browsers parsing -webkit prefixed properties was raised.

I saw a pattern amongst all three subjects: the DRM proposal, Dart, and browsers implementing another browser’s vendor prefix. All three proposals were made to address a genuine problem. The proposals all suffer from varying degrees of batshit craziness but they certainly galvanised a lot of discussion.

For example, Brendan said that while Google Dart may not stand a hope in hell of supplanting JavaScript, some of the ideas it contains may well end up influencing the development of ECMAScript.

Similarly, Mozilla’s plan for vendor-prefixing certainly caused all parties to admit the problem: the W3C was moving too slow; Apple should have submitted proprietary properties for standardisation sooner; Mozilla, Microsoft, and Opera should have been innovating faster; and web developers should have been treating vendor-prefixed properties as experimental features, not stable parts of a spec.

So the proposal to do something batshit crazy and implement -webkit-prefixed CSS properties has actually had some very positive effects …but there’s no reason to actually go ahead and do it!

I tried to make this point during the audience participation part of the panel, but it was like banging my head against a brick wall. Chaals kept repeating the problem case, but I wasn’t disputing the problem; I was trying to point out that the proposed solution wouldn’t fix the problem.

It was a classic case of the same kind of thinking we saw in the SOPA proposal:

  1. Something must be done!
  2. Implementing -webkit prefixes is something.
  3. Something has been done.

The problem is that it won’t work. Adding “like Webkit” to the user-agent string will probably have much more of an effect and frankly, I don’t care if any of the browsers do that. At this point, a little bit more pissing into the bloated cesspool of user-agent strings is hardly going to matter. A browser’s user-agent string isn’t an identifier, it’s a reverse-chronological history of the web. Why not update the history booklet to include the current predilection amongst developers for Webkit browsers on mobile?

But implementing -webkit vendor prefixes? Pointless! If a developer is only building and testing their sites for one class of device or browser, simply implementing that browser’s prefixed CSS is just putting a band aid on a decapitation.

So I was kind of hoping that Mozilla would just come right out and say that maybe they wouldn’t actually go ahead and do this but hey, look at all the great discussion it generated (just like Dart, just like the DRM proposal). But sadly, no. Brendan categorically stated that the proposal was not presented in order to foment discussion. And in follow-up tweets, he wrote that he actually expected it to level the mobile browser playing field. That’s an admirably optimistic viewpoint but it’s sadly self-delusional.

And what will happen when implementing -webkit prefixes fails to level the playing field? We’ll be left with deliberately broken browsers.

Once something ships in a browser, it’s very, very hard to ever remove it. During the Dart discussion, Chris talked about the possibility of removing Dart from Chrome if developers don’t take to it. Turning to the Microsoft representative he asked rhetorically, “I mean, do you guys still ship VBScript?”

The answer?

“Yes.”

Wii: The Opera

It’s been almost a year now since I gave a little talk at a soirée thrown by Opera up in London. It remains one of the most pretentious speeches I’ve ever given, second only to my first Reboot talk. It was also one of the most stressful—my iBook was playing silly buggers, leaving me to try to recall all that purple prose from memory.

Still, it was a fun night out. Everyone seemed to like what I had to say and the folks from Opera said they were very pleased. “Oh, really?” I said with a gleam in my eye. “Then I probably deserve some sort of reward, don’t I?”

I was assured that some token of appreciation would indeed be forthcoming. Given Opera’s partnership with Nintendo, it wasn’t unrealistic of me to contemplate visions of a DS Lite or even a Wii. Sure enough, within a few weeks a package arrived at the Clearleft office. I eagerly opened it up to find… a cartridge of the Opera browser for the DS Lite. It was a nice thought but seeing as I don’t have a DS Lite, it was of little use to me (I passed it on to Paul).

I thought that was the end of the story but then I bumped into some of the Opera posse at South by Southwest. “We’re still planning to get you that Wii,” they said. “But it’s just so hard to find one.” These words were the sparks that reignited the flame of my gaming dreams. “I’m getting a Wii,” I would tell anyone who would listen, “any day now.”

But as the weeks and then the months passed by, my optimism began to flag. Sometimes I would see David Storey at a conference. “We’re still getting you that Wii,” he would say. “Sure,” I’d say, “sure.”

The most recent of these exchanges was at the dConstruct after-party. “They still haven’t gotten you that Wii?” asked David. I assured him that they hadn’t. “That’s terrible,” he said, “but they’re so hard to find in Norway. Are they hard to find here in the UK?” I grabbed someone who was walking by and asked, “Are Wiis hard to find?” “Not any more,” I was told. “That’s it,” said David, “I’m going to go into a shop tomorrow before I leave town and buy you a Wii.”

Now I realised that it could have just been the alcohol talking but in the long-standing tradtion of taking advantage of those in an inebriated state, I pressed my phone number into David’s hand, telling him, “Call me when you’ve got it and I can come and meet you.”

Alas, David’s phone battery died the next day. For want of a phone call, the plan fell through. But all was not lost. Opera’s newest employee is Chris Mills, aka Mills of Steel, aka Dark Satanic Mills. He was also at dConstruct and could clearly see the sad desparation in my eyes. Taking matters into his own hands, he simply bought a Wii on Amazon and had it shipped to me.

It showed up last week. It was like Christmas but better because at Christmas time I didn’t have a Wii and now I do.

It didn’t take long to get it all set up. Chris had thoughtfully sent on some Wii points as well. I dutifully spent 500 of those points on the Opera browser.

By good fortune, I had a house guest at the time. Joe was in town for the ATypI conference. Inevitably then, we spent the first hour of Wii time testing various sites in the browser. Everything is rendered in a somewhat unusual font, featuring a particularly odd “e”, its crossbar tilted at a jaunty angle… hey, you’d start to talk like this too if Joe Clark came to visit you.

Unlike the iPhone, the Wii comes with support for Flash (hence games like PandiPanda). That means that sIFR works flawlessly. There’s also an in-built zoom layout option which I suspect is using Opera’s small-screen rendering.

Once we had established all that, we moved onto the real order of business. I had already experienced the joy of Wii sports once or twice but Joe had his Wii cherry popped that night. Much fun was had. Jessica kicked our asses at bowling, for which she dispays a remarkable aptitude.

Now that there is a Wii in the household, I fear that my already poor productivity may plummet to new depths. On the other hand, this little gaming console might just provide me with the most exercise I’ve had in years.

Tusen takk, Opera.

London calling

It’s seems like I’m going up and down to London like a yo-yo this week.

On Monday, I gave a day of Ajax training at Framfab LBI. They’re a smart bunch. Normally, I have to sell developers on the concepts of progressive enhancement and unobtrusive JavaScript but these guys were already walking the walk. I felt kind of bad: for at least the first half of the day, I must have been preaching to the converted. Nonetheless, they were all very gracious and said they got a lot out of the day anyway. Too kind.

Yesterday evening was the Opera event which, despite the technical hitches, ended up being an enjoyable night out. Once the sales pitches and PowerPoint were out of the way, everyone was able to relax and enjoy the free booze, the mysterious canapés, and of course, the company.

After my talk and my hasty blog post, I spent the remainder of the evening explaining to people that no, I don’t have any connection to Opera, and wishing I had introduced myself before I started spouting my little after-dinner speech.

I had the chance to hang out with some of the gang from Last.fm, which was a lot of fun. It turns out that Hannah is a fellow believer in fighting the good fight for liquid layouts.

Today is the one day I won’t be getting on a train to the big smoke. Band practice takes precedence. Tomorrow, though, I’ll be returning to the bosom of mother London.

The second ever Web Standards Group meetup in London is taking place at the New Cavendish Street campus of Westminster University. The theme of the evening is microformats. Norm!, Drew and I will be covering the past, present and future of the single coolest thing happening on the Web right now. Why not join us for an evening of entertainment and education? The event is free. You can find more details on the Upcoming page. Try to get there for around half past six. Afterwards, we’ll decamp to the Bricklayer’s Arms for drinks ‘till late.

Be there or be square.

Opera in London

I’ve just come offstage, having spoken at the Opera Backstage event in Leicester Square in London.

I was very pleased to be asked to speak. I decided to do a really pretentious over-the-top talk, which I hastily prepared on the train the day before. Forgoing slides, I settled on using the same JavaScript teleprompter that I used at Reboot.

The best laid plans of mice and men…

In between walking from my seat to the stage, my iBook died. It just shut down and wouldn’t start up again. I was left standing on stage with no slides, no script, nothing. It was like that dream where you show up for school without your pants.

“Screw it”, I thought. I decided to wing it. I think I managed to recall most of what I was going to say. It was mostly about science-fiction and Irish poets.

Now I’m done talking, my laptop is behaving just fine. Typical.

I’ve posted the script of what I was planning to say — which is, more or less, what I ended up saying — over in the articles section.