275 The HTML5 platform [1.5d]

Goals

• Get an idea of the varying support for HTML/CSS/JavaScript features in different browsers like Chrome, Firefox, Internet Explorer, Edge, Safari.
  • Look up a few modern features like "subgrid", ":has()" or "optional chaining" on Caniuse Show archive.org snapshot .
• Understand how we test for older browsers using BrowserStack Show archive.org snapshot
  • Ask a colleague for our shared BrowserStack credentials
• What are "Evergreen browsers"?
• Understand which browsers you are supposed to support in a project
  • For most projects this is all popular evergreen browsers (Chrome, Firefox, Edge) and the last two major versions of Safari and Mobile Safari.
  • We can often get away with supporting fewer browsers in applications with a closed circle of users (vs. a publicly available service)
• Understand that Safari and mobile Safari (for iOS) usually lag behind other browsers when it comes to feature support.
• "Transpilation" and "polyfills" are both techniques to use modern HTML and JavaScript features with old browsers
  • Understand the differences between transpilation and polyfilling
  • Find some JavaScript features that can not be backfilled with either transpilation and polyfilling. Why?
• What is "Graceful degradation"?
  • Name at least two practical examples
  • How can you gracefully degrade when using a maybe-unsupported HTML feature?
  • How can you gracefully degrade when using a maybe-unsupported JavaScript feature?
  • How can you gracefully degrade when using a maybe-unsupported CSS feature?
• Understand which legacy technologies you no longer need to support
  • We no longer need to support Internet Explorer 11.
  • We no longer need to transpile JavaScript down to ES5. We can pick a more recent ES target, resulting in a smaller transpilation output.
  • Note that you will find a lot of outdated articles on the Internet, talking about workarounds that are no longer required.

Resources

• Can I Use Show archive.org snapshot
  • Get into a habit of looking up any JavaScript, HTML or CSS feature on Can I use before using them in your code.
  • Over time you will get a feeling which features are safe to use.
  • This site should be in your bookmarks bar.
• ES compatibility tables by kangax et al. Show archive.org snapshot
  • Extremely detailed support matrix for new JavaScript features.
  • JavaScript gets a new version every year. You can switch between ES versions at the top.
• English MDN Web API Reference Show archive.org snapshot
  • MDN is maybe the best reference for JavaScript, HTML and CSS features.
  • Google my-feature mdn is a quick way to find a relevant reference page.
• Polyfills: everything you ever wanted to know, or maybe a bit less Show archive.org snapshot
  • This archive.org copy of the article comes without the blinding green background
• Implementing Feature Detection Show archive.org snapshot
  • MDN tutorial on detecting features in JavaScript and CSS.
  • Note that the "HTML5 shiv" from the tutorial is no longer needed in current browsers.
• Reminder: Safari is not an evergreen browser Show archive.org snapshot
• Browser-Support in unseren Anwendungen 🇩🇪🔒

Exercises

Debugging old browsers

Use BrowserStack to view your MovieDB app in an older Safari version. Use increasingly older Safari versions until something breaks in your JavaScript or CSS.

Can you find out what missing feature is causing your app to break?

Tip

BrowserStack lets you open the developer tools within the remote computer.

Graceful degradation

Use the Web Share API Show archive.org snapshot to implement a share button on each movie's show view.

When the user presses the show button on a mobile phone, the phone's native share target selection should open. The share target selection allows me to pick a target app like WhatsApp, GMail, or Slack. When the user picks e.g. WhatsApp a text like this should be shared:

Check out "Sunshine" from 2007: https://moviedb/movies/123

When the current browser doesn't support the share() function, the user should instead see the shareable text in a prompt Show archive.org snapshot from where they can copy & paste the text manually.

Tip

The Web Share API only works for https:// URLs. You can enable HTTPS for development.

Write your own polyfill

Write a Polyfill for NodeList#forEach Show archive.org snapshot . It should only be applied to browsers that don't implement it Show archive.org snapshot , for example IE11 or Chrome 50 in BrowserStack.