275 The HTML5 platform [1.5d]

Updated . Posted . Visible to the public.

Goals

  • Get an idea of the varying support for HTML/CSS/JavaScript features in different browsers like Chrome, Firefox, Internet Explorer, Edge, Safari.
  • 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

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.

Henning Koch
Last edit
Paul Demel
Keywords
html5
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra Curriculum (2015-07-08 18:02)