sign in sign up
<<
Home , Browser wars, Cello (web browser), Erwise, HTTPS, Line Mode Browser, Lynx (web browser)

HOW TO MAKE BROWSERS COMPATIBLE WITH THE WEB LET'S SAVE THE

- we <3 Front Trends -

Hello there! How are you? Are you tired? Great party yesterday, right? Did you enjoy your first two days so far? Cool! Okay… So, lets do this. Welcome to my talk about how to make browsers compatible with the web. OLA GASIDLO

WEB COMPATIBILITY ENGINEER & TECH LEAD

My name is Ola Gasidlo. I am a web compatibility engineer at and work on the web compat team to make sure the broken web gets fixed.

I am also part of Hoodie, CSSConfEU and organizer of various conferences and meetups, the OpenTechSchool and other…

I know, you all are here because you care about the web & want to help and fix it. Thanks for that! Web Compatibility

@misprintedtype / @webcompat

So, what is this about? This web compatibility thing? I know, it took me like a month to pronounce the word correctly. BUG

Web Compatibility

@misprintedtype / @webcompat

Ever experiences a that was broken in one browser but not in the others?

A web combat bug is when something works in all browsers except of one (sometimes 2). Tell me

@misprintedtype / @webcompat

Tell me by raising your hand… - Who of you ever experienced such a bug? - Who of you reported that bug? - Who of you wrote a dirty hack for it?

Please report those, so we can fix them! But if it makes you feel better… You are not alone. @misprintedtype / @webcompat

Here you can see a totally representative poll on with close to 400 votes. 79% of those, who voted, do not report bugs. From our experience, it is waaaay more. So why is that?

A lot of people think, it is too much hassle or have no idea how and where to report them. I get that! Before I started working on the web compatibility project, I didn’t know either. ://webcompat.com/

@misprintedtype / @webcompat

The Web Compatibility Project is an project that makes sure specs are implemented in the same way in all the browsers. https://webcompat.com/

REPORT

@misprintedtype / @webcompat

Report a broken website or an re-occurring bug to webcompat.com, so we can help to fix the issues on the browser vendors site (and that means not just ). It literally takes 2 minutes. @misprintedtype / @webcompat

The other issue we see… People think no one cares.

We do…! And we are really good at annoying people. Trust me on this one! @misprintedtype / @webcompat

I’m curious, so I ran a second poll. People seem to be confident about their skills and knowledge.

Awesome! …1, 2, 3… Let’s test that! QUIZ TIME � @misprintedtype / @webcompat

It’s QUIZ TIIIIME! …1, 2, 3…

Let’s pick something really simple, as we all know CSS is something everyone can do, right? Which of these work in Firefox, Edge and Chrome?

@misprintedtype / @webcompat

So, please tell me by raising your hand… Which of the four following works in Firefox, Edge and Chrome. Which of these work in Firefox, Edge and Chrome?

1. el.style.webkitTransform 2. el.style.WebkitTransform 3. el.style.[‘--transform’] 4. el.style.[‘transform’]

@misprintedtype / @webcompat

Please raise your hand now, if you think the first is correct… Second? Third? Last one? That one is actually obvious. Which of these work in Firefox, Edge and Chrome?

1. el.style.webkitTransform 2. el.style.WebkitTransform 3. el.style.[‘-webkit-transform’] 4. el.style.[‘transform’]

@misprintedtype / @webcompat

Surprise! All of them actually work.

1, 2, 3… Sorry, if I made you feel uncomfortable. @misprintedtype / @webcompat

Of course a Twitter poll, my bubble is nothing representative.

From our experience this results look more like… @misprintedtype / @webcompat

… this.

People often know frameworks by heart. Which makes sense as you shouldn’t build a town when you just need a house and you also shouldn’t reinvent the wheel over and over again. Don’t put your time in an issue that was solved already million times. @misprintedtype / @webcompat

But you should be aware how things work. And not just how, but also… why!

I totally get it. With all the frameworks that are around and every day one new coming out, it’s really hard to keep up already. Our day still has just 24 hours and the week 7 days. @misprintedtype / @webcompat

There are moments I miss those times, where you didn’t need 4 hours to set up a project with this huge amount to tools like grunt, npm, webpack, travis etc. just to fix a typo in your app. Or wait 20 minutes on your npm install, just because of all the dependencies.

A long time ago, we didn’t had that hassle. We just opened an editor and started to code. Can you believe that? Pushed things on the or ran it the code in our browser. Things worked. But we had different battles to fight. Some of you might remember… 1, 2, 3…

@misprintedtype / @webcompat

.. the browser wars. **Dööö - dööö - dööö - döööDöööDööö - döööDöööDööö*

So, a browser war defines as competition for dominance in the usage share of web browsers. Let’s go back and see how it all began. The beginning 1991 - 1992

@misprintedtype / @webcompat

It all began with Sir Tim Berners-Lee, you all might know. He invented in the late 1980s this thing we call “the web” today. WorldWideWeb (Nexus)

1991

@misprintedtype / @webcompat

He also invented the very first browser called WorldWideWeb in 1991, which was renamed to Nexus later. WorldWideWeb (Nexus) 1992

1991

Line Mode Browser, , Samba

@misprintedtype / @webcompat

By the end of 1992 other browsers appeared… For example , Erwise or Samba for Mac.

Even though these browsers tended to be simple HTML viewers, relying on external helper applications to view content, they provided choice to users. That was the point when the pre-war started. WAR 1993 - 1995

@misprintedtype / @webcompat

Mosaic was the that led to the Internet boom of the . , , WorldWideWeb , (Nexus) Mosaic 1992

1991 1993

Line Mode Browser, Erwise, Samba

@misprintedtype / @webcompat

In 1993, it made the web relevant and touched off the revolution. More browsers appeared. Cello, Arena, Lynx. But nothing like Mosaic…

By 1994 Mosaic was… “MOSAIC IS WELL ON ITS WAY TO BECOME THE WORLDS STANDARD INTERFACE.”

Gary Wolfe - Wired (Oct ’94)

… on its way to become the worlds standard interface. Said by Gary Wolfe from Wired in October 1994.

Mosaic was the first true multi platform browser and that was a huge thing back then. Something that is hard to believe these days, right? Cello, Arena, WorldWideWeb Lynx, (Nexus) Mosaic 1992

1991 1993

Line Mode Browser, Erwise, Samba

@misprintedtype / @webcompat

Several companies licensed Mosaic to create their own commercial browsers, such as AirMosaic and Spyglass Mosaic. One of the Mosaic developers, created a new web browser named Mosaic … Cello, Arena, WorldWideWeb Lynx, (Nexus) Mosaic 1992 1994

1991 1993

Line Mode Browser, Erwise, Samba

@misprintedtype / @webcompat

…which they had to rename to Netscape Navigator after legal issues in 1995.

By beginning of 1995 the Netscape Navigator was the dominating browser of the because of two reasons. It improved on Mosaic’s usability and reliability and was able to display as they loaded. AND it was free for non-commercial use. I know, today we might ask ourselves how can a browser not be free, right? Cello, OmniWeb, Arena, WebRouser, WorldWideWeb Lynx, Netscape, (Nexus) Mosaic IE 1992 1994

1991 1993 1995

Line Mode Browser, Netscape Navigator Erwise, Samba

@misprintedtype / @webcompat

Netscape also faced new competition from OmniWeb, WebRouser, UdiWWW, and 's 1.0, but continued to dominate the market.

But this was the beginning of the very first browser war. 1st BROWSER WAR 1995 - 2002

@misprintedtype / @webcompat

Users had suddenly a choice again between two usable, multi-platform browsers that were free.

The war began… The battle for marketshare was rough. Browser vendors added features and support for various specs on the fly. 1995 @misprintedtype / @webcompat

IE 2.0 was released shortly after 1.0. It was free, not just for non-commercial, but also for commercial use. Game changer! So other browser followed that approach and made their free. New versions were released rapidly. JS support 1995 @misprintedtype / @webcompat

Browsers where document viewers… Just could interpret HTML. Netscape released JavaScript support , which Microsoft replicated and named it JScript. more HTML tags

JS support 1995 @misprintedtype / @webcompat

They also both released more proprietary HTML tags like… more HTML tags

JS support 1995 @misprintedtype / @webcompat

… … more HTML tags

JS support 1995 @misprintedtype / @webcompat

… marquee … 1996 CSS support

more HTML tags

JS support 1995 @misprintedtype / @webcompat

In 1996, IE 3.0 and Netscape added both CSS support and reached feature parity within ONE YEAR. 1996 CSS support Released!

more HTML tags

JS support 1995 @misprintedtype / @webcompat

Side note, came out the same year. Not many people noticed back then. @misprintedtype / @webcompat

In October 1997, .0 was released and distributed with . That was a big game changer.

Things got personal. @misprintedtype / @webcompat

The IE 4.0 release party in San Francisco featured a ten-foot-tall letter "e" logo.

The IE team put the giant logo on Netscapes front lawn, with a sign attached that read "From the IE team ... We Love You". Netscape 72 Microsoft 18

@misprintedtype / @webcompat

The Netscape employees promptly knocked it over and set a giant figure of their Mozilla dinosaur mascot on top of it, holding a sign reading "Netscape 72, Microsoft 18" representing the market distribution.

The IE started with… @misprintedtype / @webcompat

…a marketshare of 18% in 1997. @misprintedtype / @webcompat

But it became the new dominant browser, attaining a peak of about 96% of the web browser usage share during 2002. �

@misprintedtype / @webcompat

The first browser war ended with Internet Explorer having no remaining serious competition for its market share. 2nd BROWSER WAR 2003- 2014

@misprintedtype / @webcompat

New browsers came out. IE got competition again. The second round was about to start. @misprintedtype / @webcompat

Second browser war continued with the decline of Internet Explorer's market share since 2003 and the increasing popularity of browsers including Mozilla Firefox, Chrome, , and Opera. @misprintedtype / @webcompat

Opera 4.0, released in 2000, included a new cross-platform core that facilitated creation of editions of Opera for multiple operating systems and platforms. @misprintedtype / @webcompat

Internet Explorer 6.0 was released in 2001 and gave it the boost, it needed to climb up to 96% market share in 2002. @misprintedtype / @webcompat

Safari was first released in 2003 with Mac OS X Panther. �

@misprintedtype / @webcompat

A mobile version has been included in iOS devices since the introduction of the iPhone in 2007. �

@misprintedtype / @webcompat

At the start of Navigator's decline, Netscape open-sourced their browser code, and later entrusted it to the newly formed non-profit —a primarily community-driven project to create a successor to Netscape.

Mozilla Firefox 1.0 was released on November 9, 2004. �

@misprintedtype / @webcompat

Google released Chrome for on December 11, 2008.

As the first browser war was all about usability, multi-platform usage and being free for everyone. The second browser war was decided through the focus on developers. @misprintedtype / @webcompat

It was all about performance, browser engines and usability for developers. Don’t get me wrong. was great and I grew up with it, but it killed the browser performance and got unusable at some point. Chrome devtools made a massive impact on the community and the market share. @misprintedtype / @webcompat

Also beginning of 2012, Google launched Chrome Beta for Android 4. The first stable version of the browser was released on mid-2012. The turning point for Chrome and IE and their market share �

@misprintedtype / @webcompat

Again, pairing a browser with an , here Android + Chrome decided the war.

… DRINK … @misprintedtype / @webcompat

One thing we’ve learned from the browser wars is, that it didn’t make things better. It just made things worse. And not just the incompatibility across all browsers. Marketing might make it seem like a battle in the mud between the vendors for browser share, but its actually not. Today we all, vendors, developers, users, we work together as one. We all realized, we are stronger as an unit.

Remember, a war is never a thing to strive for. THE FORCE

@misprintedtype / @webcompat

As browsers started to use the same browser engines, things seemed getting better, but the were still different. Why was that?

Let me tell you a secret. You know what the true force is and every browser has that in common? THE SPECS

@misprintedtype / @webcompat

The specs! …1, 2, 3… SPECS

@misprintedtype / @webcompat

Specifications or specs in short are a defined standard for what to implement in the browser. But who creates the specs? Who is the creator of the force? @misprintedtype / @webcompat

In October 1994 Sir Tim Berners-Lee founded the, World Wide Web Consortium, also called the W3C.

The organization wants to foster compatibility and tries to get all those vendors to implement a set of standards, core principles and components which are chosen by the consortium. Consortium decides

@misprintedtype / @webcompat

So in short, they decide on specifications that browsers should implement. There were issues. The W3C was slow in developing standards.

As browser vendors wanted to release features rapidly, because of the browser wars, they often didn’t have finished specs to implement, if they had any at all. This caused a lot of incompatibility among browsers. Consortium decides

@misprintedtype / @webcompat

Also the W3C's decision to abandon HTML in favor of XML-based technologies was a huge issue and seemed not close to what developers and vendors wanted. @misprintedtype / @webcompat

This was the point where the Web Application Technology Working Group or WHATWG was formed in June 2004 by individuals from Apple, the Mozilla and Opera.

They work on spec drafts and propose them to the W3C working groups. Usually they get accepted.

At the WHATWG, the editor of a spec has significant control over the specification, but the community can influence the decisions of the editor. Community decides

@misprintedtype / @webcompat

Besides of the big advantage of having direct feedback from developers and users, this working group also solved another issue.

The W3C describes in their specs WHAT to implement. Not How. Which lead to a lot of drama (Just take a look at the history of IndexedDB). This working group was able to agree on the HOW and decide on a standard that made sense for everyone. SPECS

@misprintedtype / @webcompat

Wait… …1, 2, 3… Does this mean, you can even be part of CREATING the force? Yes. Yes, you can. https://www.w3.org/Consortium/join

@misprintedtype / @webcompat

You can become a member of the W3C by applying and hopefully your membership will be accepted (after a small fee depending on your country and a few other things).

Oooorrrrr… 1, 2, 3… https://whatwg.org/mailing-list#specs

@misprintedtype / @webcompat

… you join the WHATWG mailing list. You can also… https://github.com/whatwg

@misprintedtype / @webcompat

…contribute on GitHub and give direct feedback or participate in discussions. Yeah, it can be that simple.

But you might still be skeptical and like… WHY SHOULD I CARE?

@misprintedtype / @webcompat

… why should I care? WHY?

@misprintedtype / @webcompat

…why?! @misprintedtype / @webcompat

I just want to build my app and the world to leave me alone.

Well… 1, 2, 3… Which of these work in Firefox, Edge and Chrome?

1. el.style.webkitTransform 2. el.style.WebkitTransform 3. el.style.[‘-webkit-transform’] 4. el.style.[‘transform’]

@misprintedtype / @webcompat

Remember the fun cross browser question from before? Where everything worked but it was weird and made us feel uncomfortable? QUIZ TIME pt2 � @misprintedtype / @webcompat

QUIZ TIME! Part 2. I know, browsers are weird. But specs are specs. Which are correct, per CSSOM spec?

1. el.style.webkitTransform 2. el.style.WebkitTransform 3. el.style.[‘-webkit-transform’] 4. el.style.[‘transform’]

@misprintedtype / @webcompat

Lets take a look. This one is the W3C CSS Object Model draft specs.

Which one is correct? …1, 2, 3…

Obviously number four is correct. Does anyone think, 1, 2 or 3 are correct? No, clearly not. Which are correct, per CSSOM spec?

1. el.style.webkitTransform 2. el.style.WebkitTransform 3. el.style.[‘-webkit-transform’] 4. el.style.[‘transform’]

@misprintedtype / @webcompat

But they are. So… 1, 2, 3… thats actually weird. This happened, because Apple was the first one to write that spec. They got to decide how the spec should look like.

This is why it is important not just one company or a small group works on specifications. The community, you… need to participate…Your voice matters. If the community would have contributed, maybe those things wouldn’t have happened. You can actually help to fix such things. SPECIFICATIONS = set of rules

@misprintedtype / @webcompat

What are specs exactly…? You can think about specifications like a set of rules. Its actually nothing else. It is a set of rules everyone agrees on to make all of our lives easier. @misprintedtype / @webcompat

Like this little fellows here… hiiiii! SPECIFICATIONS = set of rules

@misprintedtype / @webcompat

Programming is a hard profession already. When everyone follows the specs, it makes all of our lives so much easier.

You will be able to understand code from others faster. You save time and money. Probably also keep the frustration level low. SPECIFICATIONS = set of rules

@misprintedtype / @webcompat

And this is not just about us developers of applications or sites. This is also about developers, who build frameworks, tools and infrastructure. And it is about browser vendors.

It is even like this set of rules, those specs are our agreement, our… CODE of CONDUCT � for Code

@misprintedtype / @webcompat

Code of Conduct for Code! …1, 2, 3…

But how can we produce clean code beside of helping to the specifications? Which tools are there, we can use? HOW? Building compatible code

@misprintedtype / @webcompat

First.. Being aware of specs is a huge help. You might figured. Where do we find the specs? https://www.w3.org/TR/css3-layout/

@misprintedtype / @webcompat

You can read the specs on the W3C page. They got way better to read as few years back.

I used to do that. I like that. I know, not everyone is as weird as I am. https://developer.mozilla.org/en-US/docs/Web/CSS/grid

@misprintedtype / @webcompat

The MDN is a pretty good resource for let’s say “pre-chewed” content with examples… https://developer.mozilla.org/en-US/docs/Web/CSS/grid

@misprintedtype / @webcompat

… but also code pens you can play around with. A link to the specifications and a compatibility table including side notes about weird behavior in specific browsers.

Okay, but what about when you are already aware of the specs? But you are not sure about compatibility…? http://caniuse.com/

@misprintedtype / @webcompat

You can go to canIuse.com. There is a great overview of browser support for specs, again with weird, but fun side notes about “surprising features” in some of the browsers. npm install -g caniuse-cmd

https://davidwalsh.name/caniuse-command-line

@misprintedtype / @webcompat

There is even this FUN Command Line Tool for canIuse.com.

Because we can get this information in an automated way, you can probably write a decent scraper with cURL and other tools. Imagine all those possibilities! https://github.com/amilajack/eslint-plugin-compat

@misprintedtype / @webcompat

Maybe you also just want to have a linter, that tells you all the important info? SURE! Looking up things all the time, can get annoying.

ESLint Compat Plugin is your tool! It is open source and works with most editors. Which of these work in Firefox, Edge and Chrome?

1. el.style.webkitTransform 2. el.style.WebkitTransform 3. el.style.[‘-webkit-transform’] 4. el.style.[‘transform’]

@misprintedtype / @webcompat

Remember our fun little quiz before…

Pre-fixed seemed like a great idea to introduce new features. So, every browser could implement a feature without relying on the others like a working group to write specs.

Prefixed versions are NOT production ready. Browser vendors got that message. about:config

about: flags @misprintedtype / @webcompat

They are walking away from pre-fixes and walk towards flags in your browser. So you can play around with it and start developing and learning about a specific feature, before it is stable and compatible to all browsers. PWA

@misprintedtype / @webcompat

…1, 2, 3… I know, you all think about , when it comes down to compatibility. Well… I am tired of talking about PWA’s as it seems no one can agree on a definition. PWA something, something

@misprintedtype / @webcompat

So, just fill in your definition here…

The only thing you need to know, please make sure to be backwards compatible. Which means, use specs that are stable. If you use experimental stuff, use pollyfills… �

PWA something, something

@misprintedtype / @webcompat

… or ponyfills.

Please make others aware to drop deprecated browsers. If the vendors are letting it die and made a new version, there is a reason. @misprintedtype / @webcompat

Write tests and test your sites. Browserstack as well as Saucelabs are a great way to go to automate your testing for various browsers as well as operating systems.

Also, please write tests for APIs, so you know 100% if they work or they were changed and will break your code. @misprintedtype / @webcompat

You can also run your code locally if you install a server. If you ever done that, you know… it such a pain.. I mean, its soooo much fun. @misprintedtype / @webcompat

If you love selenium as much as I do, take a look at webdriver I/O. It’s an open source testing utility for Nodejs. Takes away a lot of the pain. PLUS… http://webdriver.io/guide/services/visual-regression.

@misprintedtype / @webcompat

… there is a way to test your site visually. Behind this is a , which takes screenshots for various browsers and operating systems. You can take a look at all of them if you want OR automate it. Then it just overlays all of the screenshots and gives out a warning if something differs too much. TOOLS ✅

@misprintedtype / @webcompat

With all those tools, you are set to produce clean code. This is probably the biggest step to help saving the web.

If you feel this is still not enough, there is one last thing, you could do… …1, 2, 3… You could become a… WOMPAT

@misprintedtype / @webcompat

… WOMPAT. …1, 2, 3… @misprintedtype / @webcompat

There are many of us out there! You might not see us, but we are there and fighting to fix the web.

But what do wompats even do? And how can you become a wompat? Just focus, listen to this little voice deep inside of you and feel the force. Feel what you’d like to contribute. …1, 2, 3… And then open the browser of your choice and… https://webcompat.com/

@misprintedtype / @webcompat jump over to webcompat.com!

You are already helping so much by reporting bugs! But also… @misprintedtype / @webcompat

If you have some spare time, you can also help and triage bugs! It sounds way harder as it seems and I haven’t learned more anywhere else. You can also reach out to sites and suggest fixes or help to work on specs. https://github.com/webcompat

@misprintedtype / @webcompat

You can help build web compat tools. Either you grab one of the starter issues on one of the repositories or you jump in one of our discussions. Having an amazing idea for something you’d like to build? Ping us! Open an issue and we’d love to hear from you. � �

� � @misprintedtype / @webcompat

The wompat community is kind hearted, lovely and always very helpful. This is why I am there.

Join us on IRC or on the mailing list. Spread the word. Talk to your friends about the importance of web compatibility. Let’s fix the web. Together. YOU! �

@misprintedtype / @webcompat

Okay, folks… Looks like our time is up. I hope, you had a great time and thank you for listening. If you have any questions, let’s talk. Otherwise please reach out via twitter or find me here somewhere.

And remember, together we can fix the world (wide web)… @misprintedtype / @webcompat

… and destroy the death star. we <3 you!

@misprintedtype / @webcompat

Thank you. slide 16: browser wars https://en.wikipedia.org/wiki/Browser_wars#/media/File:Browser_Wars_(en).svg

the source: https://i.stack.imgur.com/TYWs7.png

slide 32: https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/ Usage_share_of_web_browsers_%28Source_StatCounter%29.svg/630px- Usage_share_of_web_browsers_%28Source_StatCounter%29.svg.png

Yoda: https://static.wixstatic.com/media/ eecfc6_5fc9d1c2e5db4b268afdb1f48001c734~mv2.png_srz_799_599_85_22_0.50_1.20_0.00_png_srz , http:// images.vfl.ru/ii/1459054178/79c494e9/12043110_m.png , http://jenniskens.livedsl.nl/MyPorsche/Yoda.png

BW1: http://home.snafu.de/tilman/mozilla/mozilla-uber-alles.jpg https://cdn-images-1.medium.com/max/ 800/1*lGRQrFtYsQ9ExIXUBXSN_g.png

Exploding death star: https://33.media.tumblr.com/c06357649f8590e963d94e6eec14d59f/ tumblr_na1y1eJ5uJ1qbxh0uo1_400.

C-3PO & R2D2: https://cache.popcultcha.com.au/media/catalog/product/cache/1/image/ 9df78eab33525d08d6e5fb8d27136e95/s/t/starwarsc3por2d2artfxstatue.png

Ewok: https://s-media-cache-ak0.pinimg.com/originals/72/4d/21/724d217f1979fc9d945f2d0fee5f6a5e.png http:// www.audienceseverywhere.net/wp-content/uploads/2014/05/Ewok.png https:// chrischattertondotcom.files.wordpress.com/2012/11/ewok.png

@misprintedtype / @webcompat

Thank you.