Xiaomi's MIUI interface is flawed with a variety of issues that the company needs to get serious about.

Google Chrome is the best web browser right now. Millions of users are using this web browser. Chrome provides various customization options to its users. Recently, the Edge browser is the new browser which has the same features as the web

Take advantage of the new element and new features of in your next responsive website.

How do you spot a fake?

When users of Microsofts Edge mobile browser visit a news website with a dubious reputation, they will now get a warning to proceed with caution.

As spotted by The Guardian, Microsoft has partnered with the news watchdog organization NewsGuard to provide Edge users with more information about the news veracity of the site they are visiting.

complete article

Tuning web performance with just browser APIs Yaser Adel Mehraban, Lead Consultant Telstra Purple As web applications become more complex, with a corresponding increase in required bandwidth and bundle sizes, to meet users’ expectations the need to consider web performance has never been more important. Yes, there are third-party tools that can help with performance […]

The post Web Directions Code ’20 session spotlight–Tuning web performance with just browser APIs appeared first on Web Directions.

2020 is only three weeks old, but there has been a lot of browser news that decreases rendering engine diversity. It’s time for some good news on that front: a new rendering engine, Flow. Below I conduct an interview with Piers Wombwell, Flow’s lead developer.

This year alone, on the negative side Mozilla announced it’s laying off 70 people, most of whom appear to come from the browser side of things, while it turns out that Opera’s main cash cow is now providing loans in Kenya, India, and Nigeria, and it is looking to use 'improved credit scoring' (from browsing data?) for its business practices.

On the positive side, the Chromium-based Edge is here, and it looks good. Still, rendering engine diversity took a hit, as we knew it would ever since the announcement.

So let’s up the diversity a notch by welcoming a new rendering engine to the desktop space. British company Ekioh is working on a the Flow browser, which sports a completely new multi-threaded rendering engine that does not have any relation to WebKit, Gecko, or Blink.

The last new rendering engine to come to the desktop was KHTML back in 2000 in the form of the Konqueror browser. Later Apple adapted KHTML into WebKit. And then Google forked WebKit to become Blink. And ... well, almost everyone browses with a KHTML descendant now. Let’s not forget how it all began.

It is far too early to tell if Flow will have a similar impact, but the news was reason enough for me to conduct an interview with lead developer Piers Wombwell.

PPK: Hi Piers, could you please introduce yourself?

PW: I’m Piers Wombwell, the co-founder of Ekioh, the company behind the Flow browser. I’m also the architect of the project and one of the software engineers on it.

Why did Ekioh decide to create a new browser?

In 2006 we started developing an SVG engine for user interfaces in the set-top box market. No existing browser was full-featured, or was fast enough on the low-powered set-top box chips available at the time. User interface developers wanted HTML, but couldn’t get the performance they needed, especially in animations. SVG seemed better suited to user interfaces as there was no time spent in complex box model layout.

A user interface running on our SVG engine was much faster than any of the HTML browsers at the time and was very popular in this niche market with millions of STBs running it across most continents.

Over the next six or so years, STB chips started to move to multi-core GPUs, at the same as TV resolutions were moving to 4K. HTML was becoming fast enough on set-top boxes. On the other hand, a 4K TV has four times as many pixels as an HD TV, and a multi-core GPU doesn't make each individual core any faster. Thus, a single threaded browser won’t really see any significant speed improvements. That's why we decided to make Flow multi-threaded.

Dabbling with HTML/CSS layout seemed equally fun technically as building an SVG browser, so that’s been the main focus since. It started off being an XHTML/CSS layout engine on top of SVG, but we got carried away and over time moved to full HTML.

But, really, I suppose we did it because it would be fun to do it.

How far along is Flow? Can people download it and use it right now?

Well, it can render and interact with Gmail quite well. It’s pretty much perfect on a few sites we’ve targeted as focuses during development, but it struggles with many others. We only started implementing HTML forms in the last few months in order to log into Gmail.

It’s not yet available for download as I think we need to address the usability of it first. It currently needs a configuration file tailored to your computer, and has no toolbar. You don't want a toolbar for TV interfaces, so we never implemented one.

For which platforms is Flow currently available?

For Mac, Linux, and Android. Plus, of course, for the set-top boxes that are our main market, most of which run Linux. As to Windows, none of us run Windows so its development is untested and lags behind a bit, but I’ve just compiled a version and it seems to work.

Is Flow open source?

It’s not. There’s no current plan for that as we don’t have a large corporation backing our development.

Which JavaScript engine do you use?

We chose Spidermonkey in 2006, and as far as I recall it was because of both licensing and a documented embedding API. It was around the time that TiVo were having arguments over the GPL. The paranoia over that also ruled out use of LGPL licensed libraries for a few years.

The core browser code is abstracted away from any Spidermonkey APIs, largely so we could handle upgrades over the years - we can still handle its legacy garbage collection model quite happily.

What are your long-term goals with Flow?

The primary goal is stability, followed by getting more websites rendering perfectly in Flow. They generally fail because of either layout bugs or missing JavaScript APIs in Flow, so we have to solve those. Even for the embedded market, getting as many websites working as possible improves our confidence that a new HTML user interface will function correctly, first time.

Our roadmap is very flexible, usually because of commercial needs, but also we prioritise what’s interesting to a developer at that given time.

You said Flow is multi-threaded. Which tasks exactly are divided among the multiple threads?

HTML and CSS parsing is single-threaded, as is JavaScript (if you ignore WebWorkers). It’s the layout, primarily word wrap of text, that is done in parallel. Several caveats apply, but in general, two paragraphs can be laid out in parallel since they don’t impact each other apart from their vertical position.

We wrote some technical papers on this process.

Is the word wrap of paragraphs the computationally most expensive part of laying out an HTML page?

Yes. Each letter is a separate rectangle, plus you have word wrap rules for groups of letters. It’s also probably the hardest to achieve, so it's a good place to start. Desktop browsers haven’t touched layout, and have instead concentrated on making whole components run in separate threads.

Is Flexbox one of the caveats you mentioned?

There are multiple passes across the tree, all in parallel. We first calculate, in parallel, essentially the min-content and max-content widths of each paragraph, flexbox or table cell. Once we have those constraints, a relatively quick pass (not in parallel for that one flex box) works out the final widths of each box.

But we can handle multiple flexboxes in parallel, or one flex box and a paragraph outside the flexbox, and so on.

How integral is multi-threading to Flow and its architecture? Could you remove it? Would other browsers be able to copy Flow's multi-threading?

Multithreading can be turned off with a config setting. I suspect it’s always going to be easier to rewrite the layout code with multithreading in mind than rework existing layout algorithms - Mozilla took that approach that with Servo, rather than rework Gecko. The new layout engine could then, in theory, be combined with the rest of an existing browser.

Can you give an example of tricky problems you encountered while creating this browser?

Many sites, Gmail being a good example, were very frustrating as the JavaScript can be so large and obfuscated. It’s almost impossible to tell what they are doing, and much of the debugging was educated guesses as to what it was trying to do. Thankfully, the web platform tests help us make sure we are compatible with other browsers once we figured out the blocking bug or missing feature.

We can’t realistically pass these tests 100% as they test such a huge set of APIs - it would take us years to catch up with other browsers so we can only focus on what is used by priority websites.

And something that was much easier to implement than you thought?

The HTML parser. I first wrote an HTML parser back in 2002, and back then there was no detailed specification of how to handle badly-nested elements. We spent so much time writing test cases to figure out what desktop browsers did in each situation, and trying to behave the same. Ten years later, the detail in the WHAT-WG specification was amazing, and it was perfectly possible to write an HTML parser that is completely compatible with all other browsers.

And a feature you decided not to implement for now?

HTML forms. A TV user interface doesn’t use most, if any, of the features of HTML forms so it was a very low priority. We started adding them because they are needed for general web browsing, but they are not complete.

We haven’t yet implemented WebGL or IndexedDB because they are not used on most of the websites we’ve tried. Obviously Google Maps uses WebGL and Google Docs uses IndexedDB but both have fallbacks. Implementing more features to allow a larger number of websites to work is a priority.

What is Flow's UA string?

For the Mac version, it's the following:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0) EkiohFlow/5.7.4.30559 
Flow/5.7.4 (like Gecko Firefox/53.0 rv:53.0)

The strings vary depending on the device, but the "EkiohFlow" and "Flow" strings should always occur.

Why do you emulate Firefox? I assumed it'd be Chrome.

We’ve spent ages on that UA string… I could probably write a blog post about it. Essentially, I copied Chrome. Things mostly worked. Then I hit the Instagram site, which decided to use ES6 features based on the UA string. I changed it to FireFox’s, using the version of SpiderMonkey that we were using (53 in the build you have), and the site worked. Then I added more afterwards (the rc:53) to get us to the more modern Google login box.

The UA string isn’t final at all but its choice is full of compromises.

Ekioh creates browsers for set-top boxes. What is Flow’s main purpose on set-top boxes?

It is used to render the UIs created by the box’s vendors, and not for actually surfing the web. But we don’t always get to see the UIs the vendors create, so being able to render all HTML flawlessly is the goal. That way, UI developers can do as they please.

Does the average set-top box have a browser meant for surfing the web?

Sort-of, but not really. I have a 2012 Sony TV with that functionality, but it was useless then and is useless now. IR has a significant lag, and that makes TV remotes far too painful to control a TV browser with. I don’t recall any modern TV/STBs that let you have open internet, but they probably exist. I can’t imagine anyone seriously using them.

Flow also runs on TVs and embedded devices. Could you give a few examples of embedded browsers? And TV browsers?

Back before we started our SVG engine, there were many HTML 4 browser engines for the TV market, such as ANT Fresco and Galio (which I also worked on), Access’s NetFront, Oregan, Espial and Opera. For the non-TV market, we have replaced Internet Explorer Mobile on a line of Windows CE devices. These days, almost all embedded browsers are based on Blink or WebKit.

What are your main competitors in the TV and embedded browser markets?

The main competitors to Flow are Blink and WebKit. Most STB providers often do their own port of one of these browsers. WebKit can be optimised for these low-powered devices, but Flow is usually able to out perform other browsers, and in the areas it’s not as fast, we can usually optimise it.

In a strange way, we also compete with ourselves - we offer our own embedded WebKit-based browser that is more feature-complete than Flow. The same developers work on maintaining and improving that.

Thanks for this interview!

You’re welcome.

Online Resource

Colin Bendell gets into the minutia of microbrowsers - the small previews of your site that are pervasive all around the web and through social media apps and search engines whenever an item of content on your site is referenced.

---

You’ve seen it everywhere - that little thumbnail preview of a website mentioned in a tweet, the expanded description in a Slack channel, or in WhatsApp group chat.

Figure 1: The preview shown in a group chat provides a hint of what the real webpage looks like

These link previews are so commonplace that we hardly pay any attention to how our site design might be impacting the generated preview. Yet, these previews can be the most influential part for attracting new audiences and increasing engagement - possibly more than SEO. Even more alarming is that most web analytics are blind to this traffic and can’t show you how these Microbrowsers are interacting with your site.

As we close out the year, here are five essential questions and ideas that every web dev should know about Microbrowsers.

1. What are Microbrowsers? How are they different from “normal” browser?

We are all very familiar with the main browsers like Firefox, Safari, Chrome, Edge and Internet Explorer. Not to mention the many new browsers that use Chromium as the rendering engine but offer unique user experiences like Samsung Internet or Brave.

In contrast, Microbrowsers are a class of User-Agents that also visit website links, parse HTML and generate a user experience. But unlike those traditional browsers, the HTML parsing is limited and the rendering engine is singularly focused. The experience is not intended to be interactive. Rather the experience is intended to be representational - to give the user a hint of what exists on the other side of the URL.

Creating link previews is not new. Facebook and Twitter have been adding these link previews in posts for nearly a decade. That used to be the primary use case. Marketing teams created backlog items to adopt different microdata - from Twitter Cards and Open Graph annotations for Facebook. LinkedIn likewise embraced both Open Graph and OEmbed tags to help generate the previews

<meta name="description" content="seo description long">
<meta name="keywords" content="seo keyword list">

<link rel="shortcut icon" href="favicon.ico" 
                          type="image/x-icon">
<link rel="icon" href="favicon_32.png" sizes="32x32">
<link rel="icon" href="favicon_48.png" sizes="48x48">
<link rel="icon" href="favicon_96.png" sizes="96x96">
<link rel="icon" href="favicon_144.png" sizes="144x144">

<meta property="og:title" content="Short title here" />
<meta property="og:description" content="shortish description" />
<meta name="twitter:title" content="Short title here">
<meta name="twitter:description" content="shortish description">

<meta property="og:image"
      content="https://res.cloudinary.com/.../hero-img.png" />

<meta name="twitter:image:src"
      content="https://res.cloudinary.com/.../hero-img.png">

As group chats and other collaboration tools have become more prevalent, we have seen many features from the big social media platforms emerge. Particularly in recent years we’ve seen the adoption of the link unfurling behaviour in these chat platforms. Rather than reinventing the wheel, each platform looks for pre-existing microdata to generate the preview.

But which data should be used? How should this be arranged? As it turns out, each platform behaves slightly differently; presenting information in slightly different ways.

Figure 2: The same amazon link shared in iMessage (left), Hangouts and WhatsApp (right)

2. If Microbrowsers are everywhere, why don’t I see them in my analytics reports?

It’s easy to miss the traffic from Microbrowsers. This is for a number of reasons:

First, page requests from Microbrowsers don’t run JavaScript and they don’t accept cookies. The Google Analytics <script> block won’t be run or executed. And all cookie will be ignored by the rendering agent.

Second, if you were to do a log analysis based on HTTP logs from your CDN or web stack, you would see a relatively small volume of traffic. That is assuming you can identify the User-Agent strings. Some of these Microbrowsers impersonate real browsers and others impersonate Facebook or twitter. For example, iMessage uses the same User-Agent string for all these requests and it hasn’t changed since iOS 9.

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) 
             AppleWebKit/601.2.4 (KHTML, like Gecko) 
             Version/9.0.1 Safari/601.2.4 
             facebookexternalhit/1.1  
             Facebot Twitterbot/1.0

Finally, many platforms - particularly Facebook Messenger and Hangouts use centralized services to request the preview layout. This, in contrast to WhatsApp and iMessage where you will see one request per user. In the centralized consumer approach your web servers will only see one request, but this one request might represent thousands of eyeballs.

3. Microbrowser are probably more important than google bot

We all know the importance of having our web sites crawled by search engines like googlebot. These bots are the lifeblood for lead generation and for discovering new users.

However, the real gold for marketers is from word-of-mouth discussions. Those conversations with your friends when you recommend a TV show, a brand of clothing, or share a news report. This is the most valuable kind of marketing.

Last year when assembling the data for Cloudinary’s State of the Visual Media report, I discovered that there was a very prominent usage pattern over the USA holiday season. During thanksgiving, all the way to Black Friday, the rate of link sharing skyrocketed as group chats shared deals and insights.

Zooming out (and normalizing for time-of-day), we can see that there is a daily cadence of link sharing and word of mouth referrals. It probably isn’t a shock to see that we predominantly share links in Slack between Monday and Friday, while WhatsApp is used all week long. Likewise, WhatsApp is most often used during our ‘break’ times like lunch or in the evening after we put the kids to bed.

While the link preview is increasingly common, there are two user behaviours to balance:

• Users can be skeptical of links sent via SMS and other chats. We don’t want to be fooled into clicking a phishing links and so we look for other queues to offer validation. This is why most platforms use the preview while also emphasize the website url host name.

• Skimming. I’m sure you’ve had the experience coming out of a meeting or grocery store to find a group chat with 100 messages. As you scroll to catch up on the conversation, links can easily be skipped. In this way, users expect the preview to act as a summary to tell them how important it is to visit the link.

Figure 4: Nielsen Norman Group summarizes the research in a dynamic image preview

Figure 5: A mockup of how an ecommerce product could create compelling previews showcasing colors, stock and price in the preview

4. Microbrowsers are not real browsers (they just play one on TV)

As I previously mentioned, Microbrowsers pretend to be a browser in that they send the right HTTP headers and often send impersonating User-Agent strings. Yet, there are several characteristics that a web dev should be aware of.

First, Microbrowsers try to protect the User’s privacy. The user hasn’t decided to visit your site yet, and more importantly, the user is having a private conversation. The fact that your brand or website is mentioned should just make your ears burn, but you shouldn’t be able to listen in to the conversation.

For this reason, all Microbrowsers:

• don’t execute JavaScript - so your react application won’t work
• ignore all cookies - so your A/B or red/green cookies will be ignored
• some will follow redirects, but will quickly time out after a few seconds and give up trying to expand the link.
• there won’t be a referer: HTTP header when the user clicks the link for the full browser. In fact, a new user will appear as ‘direct’ traffic - as though they typed in the url.

Second, Microbrowsers have a very small brain and very likely don’t use an advanced network algorithm. Most browsers will use a tokenizer to parse the HTML markup and send requests to the network stack asynchronously. Better yet, browsers will do some analysis of the resources needed before sending the async request to the network.

Based on observational experimentation, most platforms simply use a glorified for loop when parsing the HTML and often request the resources synchronously. This might be ok for fast wifi experiences, but it can cause inconsistent experiences on flaky wifi.

For example, iMessage will discover and load all <link rel="icon" > favicon, all <meta property="og:image" images, and all <meta name="twitter:image:src" before deciding what to render. Many sites still advertise 5 or more favicon sizes. This means that iMessage will download all favicons regardless of size and then not use them if it decides to instead render the image.

For this reason the meta markup that is included is important. The lighter the content, the more likely it will be to be rendered.

5. Markup Matters

Since Microbrowsers are simple-brained browsers, it is all the more important to produce good markup. Here are a few good strategies:

• It’s almost 2020, you only need one favicon size. Remove all the other <link rel="shortcut icon" and <link rel="icon" references.
• Based on observational experimentation, the most commonly recognized microdata tags for preview are the Open-Graph tags. When the OG and twitter card tags are missing, the default SEO <meta name="description" is used. However, since the description is often nonsensical SEO optimized phrases, users’ eyes will likely glaze over.

• On that note, use good descriptive text
• Provide up to three <meta property="og:image" images. Most platforms will only load the first one, while others (notably iMessage) attempts to create a collage.

Figure 6: Amazon uses User-Agent detection which results in many link previews using the description meta tag.

• Use <meta property="og:video* with progressive (not streaming) video experiences.

<meta property="og:type" content="video.other">
<meta property="og:video:url" 
               content="https://shoesbycolin.com/blue.mp4">
<meta property="og:video:secure_url" 
               content="https://shoesbycolin.com/blue.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">

• Don’t use UA sniffing to hide the <meta> tags. Sites like Amazon do this to try and show only Facebook/Twitter the microdata annotated website. But this can cause problems for some Microbrowsers that don’t use the same impersonation convention. The result is a simple link without a preview.
• Use the opportunity to tell your product story or summarize your ideas.

Summary

As more of our conversations happen in group chats and slack channels, link previews are an important way for you to engage users before they start the journey on your site. Unfortunately, not all websites present good or compelling previews. (And now that you know what to look for, you won’t be able to unsee bad examples - I’m sorry). To help users take the leap and visit your site, we need to make sure that all our pages are annotated with microdata. Better yet, we can use these previews to create compelling visual summaries.

---

About the author

Colin is part of the CTO Office at Cloudinary and co-author of the O’Reilly book High Performance Images. He spends much of his time at the intersection of high volume data, media, browsers and standards. He recently helped the community effort writing chapters in the Web Almanac on Media and CDNs. You can find him on tweeting @colinbendell and at blogging at https://bendell.ca

More articles by Colin

The panelists talk Browserify with James Halliday.

The panelists talk about browser tools and extensions.

You should be using SVG favicons. They're supported in all modern browsers right now.