31 Matching Annotations
  1. Last 7 days
    1. Build a baseline email experience for subscribers using email apps with limited support for HTML and CSS—such as Outlook and Gmail—before enhancing your email for other clients. Progressive enhancement should not create suboptimal experiences for other users.
    2. An escalator is a great example of progressive enhancement and graceful degradation in real life. The late comedian Mitch Hedberg joked, “An escalator can never break: it can only become stairs. You should never see an Escalator Temporarily Out Of Order sign, just Escalator Temporarily Stairs. Sorry for the convenience.” Regardless of its environment, an escalator maintains its functionality.
    3. The main focus of his talk was on progressive enhancement, which involves providing advanced functionality in environments where its supported. He also emphasized the importance of graceful degradation. Graceful degradation means that if your subscriber’s email client doesn’t support a certain functionality, you’ll still provide them with a pleasant experience.
    1. And that just leaves the Word Outlooks (and their ever-aligning web based equivalents), and a few lesser used (for us) regional clients. Here, our div based layout reverts back to every story being on a new line. For #EmailWeekly, we’re ok with that.
  2. Mar 2021
  3. Feb 2021
    1. There’s an important wrinkle when it comes to animating the menu away. When the user closes the menu, it will always disappear instantly, because the open attribute is, by default, removed immediately when the user clicks that summary element. In order to gracefully animate your menu out when it closes, we need some JavaScript. Here we can listen for clicks on the details element, and call preventDefault() on the click event, then use setTimeout() to determine exactly when that open attribute should be removed. This gives us time to trigger the closing animation with CSS. This click event listener will also fire when a keyboard user hits space or enter while the element is focused, which means no further listeners are needed for keyboard actions!
  4. Jan 2021
    1. JavaScript is more brittle than we care to admit. <a> elements function even if JavaScript breaks. Using anchors for your download means that a person can access what they need, even in suboptimal situations.
  5. Nov 2020
  6. Sep 2020
  7. Jun 2020
    1. We do know that, just like iMessage, this new approach will failover to SMS/MMS if a user cannot receive the encrypted variant or if bandwidth is insufficient on either end.
    2. A couple of years after WhatsApp, Apple jumped into the game with iMessage—its obvious drawback, that senders and recipients had to be using iPhones, was overcome by integration with the standard SMS platform on those phones. If a recipient was not on iMessage or was offline, the message would revert to SMS.
  8. May 2020
    1. Adopting TypeScript is not a binary choice, you can start by annotating existing JavaScript with JSDoc, then switch a few files to be checked by TypeScript and over time prepare your codebase to convert completely.
    1. First proposed as a somewhat less unwieldy catchall phrase to describe the delicate art of "separating document structure and contents from semantics, presentation, and behavior"
    2. In progressive enhancement (PE) the strategy is deliberately reversed: a basic markup document is created, geared towards the lowest common denominator of browser software functionality, and then the designer adds in functionality or enhancements to the presentation and behavior of the page, using modern technologies such as Cascading Style Sheets, Scalable Vector Graphics (SVG), or JavaScript.
    3. graceful degradation
  9. Jul 2016
    1. Library (originally from Mozilla) for building components based on the W3C Web Components specs

    1. A Web Component that can be used to pull fragments of HTML from the server and replace some placeholder content in the page once the fragment loads.

  10. youtube.github.io youtube.github.io
    1. Framework for fast PE-navigation by updating just sections of a page that change during navigation, rather than reloading the whole page.

    1. An experimental performance comparison of client and server-side templating on desktop and mobile, focusing on time to first paint and time to last paint metrics.

      The server is written in Go. The client is the simplest possible client-side templating you can do (using a <template> element and a few DOM API calls), so no frameworks involved.

      Some takeaways:

      • Everything on mobile is ~5x slower than desktop
      • For small amounts of data, there is little difference in time to first paint
      • Server-side rendering generates a modestly larger HTML payload vs. sending JSON down to the client
      • Time to first paint is faster for SSR as the client can render markup as it is streaming down, but this is only significant when there is a decent amount of data on the page
    1. Server-rendered markup can be progressively enhanced as element definitions are registered and upgraded by the browser.

      Question - How is the server-rendering done and in what language?

    1. I came across this from a post reflecting on the last Chrome summit.

      The splash pages which appear to be basic static content with little interactivity load a 1.5MB JS bundle (500KB gzipped). Flipping back and forwards between pages feels sluggish in Firefox. My initial hypothesis is that letting the client's side router tear down the DOM for the current route and build up the DOM for the new route might be slower than just relying on the browser's back/forwards cache as a set of boring static pages would do.

    1. Hardly a scientific survey, but the answers on Twitter and offline have been surprisingly consistent: server-side React for graceful degradation, jQuery and possibly shared templates (e.g. Mustache) for progressive enhancement
  11. Apr 2016
    1. Good article on progressive enhancement. Jake Archibald now works for Google, I'm not sure if that was the case at the time.

  12. Jan 2015