Tags: browsers

451

sparkline

Introducing ‘My Browser’ - Andy Bell - Front-End Developer

Andy describes the technical approach he took building his handy reporting tool, My Browser:

Although the site is built with bleeding edge technology such as web components, it’s built with a progressive-first approach. This means that in order to get the best experience, you need to be on a modern browser, but to do the most basic function—reporting data, you can still do it by pressing a “generate report” button, which is the default state.

Not only is this a liberating way to work, it really pays off in performance:

We’re given so much for free to make a progressively enhanced website or web app. We’ve got feature detection and @supports in CSS which means that “My Browser” ships with no polyfills, fallbacks or hacks like Autoprefixer. The app degrades gracefully instead.

This has been a very refreshing way to work that I’ve enjoyed a lot. The fact that the whole thing comes in around 25kb tells you how effective progressive enhancement can be for performance too.

Fixing these webs - daverupert.com

I’m a fan of fast websites. Your website needs to be fast. Our collective excuses, hand-wringing, and inability to come to terms with the problem-set (There is too much script) and solutions (Use less script) of modern web development is getting tired.

I agree with every word of this.

Sadly, I think the one company with a browser that has marketshare dominance and could exert the kind of pressure required to stop ad tracking and surveillance capitalism is not incentivized to do so.

So the problem is approached from the other end. Blame is piled on authors for slow first-party code. We’re told to use certain mobile publishing frameworks that syndicate to proprietary CDNs to appease the gods of luck and fortune.

Should I try to use the IE version of Grid Layout? Revisited for 2018

Rachel follows up on my recent post about CSS grid in old IE with her thoughts.

As Jeremy notes, the usefulness of a tool like Autoprefixer is diminishing, which is a good thing. It is becoming far easier to code in a way that supports all browsers, where support means usable in an appropriate way for the technology the user has in front of them. Embrace that, and be glad for the fact that we can reduce complexity based on the increasing interoperability of CSS in our browsers.

When 7 KB Equals 7 MB - Cloud Four

I remember Jason telling me about this weird service worker caching behaviour a little while back. This piece is a great bit of sleuthing in tracking down the root causes of this strange issue, followed up with a sensible solution.

Pixels vs. Ems: Users DO Change Font Size – Evan Minto – Medium

I have to admit, I didn’t realise that text reszing behaved differently for user preferences compared to page zoom. For that reason alone, I’m going to avoid setting font sizes in pixels.

If 2 to 3% (or more!) of your users are relying on a custom font size, you should know that so you can either support that user preference or make a conscious decision to not support it. Doing anything less is frankly irresponsible, especially considering that users with larger font sizes may be using those sizes to compensate for visual disabilities.

The Critical Request - Speaker Deck

There are some handy performance tips from Ben in this slide deck.

In this talk we’ll study how browsers determine which requests should be made, in what order, and what prevents the browser from rendering content quickly.

I discovered a browser bug - JakeArchibald.com

Jake’s blow-by-blow account of uncovering a serious browser vulnerability is fascinating. But if you don’t care for the technical details, skip ahead to to how different browser makers handled the issue—it’s very enlightening. (And if you do care for the technical details, make sure you click on the link to the PDF version of this post.)

User agent as a runtime | Blog | Decade City

Ultimately you can’t control when and how things go wrong but you do have some control over what happens. This is why progressive enhancement exists.

Fresher service workers, by default

“Ah, this is good news!”, I thought, reading this update about how service worker scripts won’t be cached.

And that was the moment when I realised what an utter nerd I had become.

Progressive Web Games – Mozilla Hacks – the Web developer blog

I was just talking about how browser-based games are the perfect use-case for service workers. Andrzej Mazur breaks down how that would work:

  • Add to Home screen
  • Offline capabilities
  • Progressive loading

A cartoon intro to DNS over HTTPS – Mozilla Hacks – the Web developer blog

This is a great illustrated explanation of how DNS resolution works.

CSS Is So Overpowered It Can Deanonymize Facebook Users

First of all, don’t panic—this browser vulnerability has been fixed, so the headline is completely out of proportion to the reality. But my goodness, this was a clever technique!

The technique relies on luring users to a malicious site where the attacker embeds iframes to other sites. In their example, the two embedded iframes for one of Facebook’s social widgets, but other sites are also susceptible to this issue.

The attack consists of overlaying a huge stack of DIV layers with different blend modes on top of the iframe. These layers are all 1x1 pixel-sized, meaning they cover just one pixel of the iframe.

Habalov and Weißer say that depending on the time needed to render the entire stack of DIVs, an attacker can determine the color of that pixel shown on the user’s screen.

The researchers say that by gradually moving this DIV “scan” stack across the iframe, “it is possible to determine the iframe’s content.”

Web Push Notifications Demo | Microsoft Edge Demos

Push notifications explained using astrology. But don’t worry, there’s also some code, just in case you prefer your explanations to also include models that actually work.

I Don’t Know How to Waste Time on the Internet Anymore

I started a Twitter account, and fell into a world of good, dumb, weird jokes, links to new sites and interesting ideas. It was such an excellent place to waste time that I almost didn’t notice that the blogs and link-sharing sites I’d once spent hours on had become less and less viable. Where once we’d had a rich ecosystem of extremely stupid and funny sites on which we might procrastinate, we now had only Twitter and Facebook.

And then, one day, I think in 2013, Twitter and Facebook were not really very fun anymore. And worse, the fun things they had supplanted were never coming back. Forums were depopulated; blogs were shut down. Twitter, one agent of their death, became completely worthless: a water-drop-torture feed of performative outrage, self-promotion, and discussion of Twitter itself. Facebook had become, well … you’ve been on Facebook.

The Slow Death of Internet Explorer and the Future of Progressive Enhancement · An A List Apart Article

Oliver Williams makes the case—and shows the code—for delivering only HTML to old versions of Internet Explorer, sparing them from the kind of CSS and JavaScript that they can’t deal with it. Seems like a sensible approach to me (assuming you’re correctly building in a layered way so that your core content is delivered in markup).

Rather than transpiling and polyfilling and hoping for the best, we can deliver what the person came for, in the most resilient, performant, and robust form possible: unadulterated HTML. No company has the resources to actively test their site on every old version of every browser. Malfunctioning JavaScript can ruin a web experience and make a simple page unusable. Rather than leaving users to a mass of polyfills and potential JavaScript errors, we give them a basic but functional experience.

A Guide To The State Of Print Stylesheets In 2018 — Smashing Magazine

Good advice on print styles from Rachel. The browser support situation is frustrating; I suspect it’s because the people working on browsers would rather get stuck in on shinier stuff.

What’s new in Microsoft Edge in the Windows 10 April 2018 Update - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

Service workers, push notifications, and variable fonts are now shipping in Edge.

Upcoming changes to the CSS you need for variable fonts | Clagnut

Rich enumerates some changes in how you set up variable fonts. So if you’re pulling in a font that has weight as an axis, you can now add this to your @font-face rule:

font-weight: 1 999;

I’m already very excited about variable fonts—I’m going to be positively giddy by the time Ampersand rolls around (which, by the way, you should totally go to—it’s going to be sooo good!).

Animating Progress - Snook.ca

Jonathan goes down the rabbit hole of trying to animate a progress element.

Inside CSS | Clearleft

If you’ve ever wondered what it would be like to be a fly on the wall at a CSS Working Group meeting, Richard has the inside scoop.

The consensus building is vital. Representatives from all the major browsers were in the room, collaborating closely by proposing ideas and sharing implementations. But most fundamentally they were agreeing together what should go in the specifications, because what goes in the specs is what gets built and ends up in the hands of users.