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 degredate when using a maybe-unsupported HTML feature?
- How can you gracefully degredate when using a maybe-unsupported JavaScript feature?
- How can you gracefully degredate 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 degredation
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.