Pick date

This is a preview. All links and Twitter names have been removed. The full version of this content can be accessed only by patrons of this digest (after signing in). Become a patron by subscribing for $6/month.

  • News

    • Yandex’s upcoming browser (?) introduces non-standard <meta name="viewport"> extensions, source
  • Posts

    • 2 Bower tips: custom target directory via .bowerrc & syncing dependencies w/ team, @………’s post
    • Device detection vs Responsive Web Design, @………’s post
  • Info

    • Responsive images: 90% percent of devices fall under device pixel ratios 1, 1.5 and 2, source
  • Demos

    • @………’s proof of concept offline single sign-on system (using Web Cryptography API), post
      • “[With web cryptography], browsers are now capable of the same kind of passwordless decentralized authentication schemes we’ve had server-side with SSH and TLS asymmetric keys for decades.”
    • 4 practical usage examples of CSS currentColor, @………’s post
  • Opinion

    • “Shorter code is inconsiderate” (reducing LOC harms readability & maintainability), @………’s post

Best of February 2014

  • Posts

    • Getting started with gulp (w/ comparison to Grunt + full example gulpfile), @markgdyr’s post
    • @mnot (chair of IETF HTTPbiz WG): “Nine things to expect from HTTP/2”, post
    • A guide to serveral security-related HTTP headers, Boy Baukema’s post
    • CSS performance revisited: selectors, bloat and expensive styles, @benfrain’s post
  • Content

    • Best practices for using capability URLs (?), @torgo’s 25-page slide deck
  • Media

    • @guypod explains SPDY and HTTP/2.0 in a 10-min whiteboard-animated preso
  • Demos

    • Animating gradient colors with background-size and -position, @lonekorean’s demo
    • A simple subsetting and inheritance trick using Google web fonts, @heydonworks’s demo
    • Responsive footnotes, @johndjameson’s demo
  • Tools

    • AccessLint, a web tool for testing accessibility of websites, site

Best of March 2014

  • Posts

    • @aerotwist shares his page load and runtime performance audit workflow, post
    • The device-agnostic philosophy and the 4 scenarios it addresses, @TrentWalton’s post
    • With promises, resolve isn’t the opposite of reject, @jaffathecake’s post
  • Content

    • A 15 point checklist for writing accessible links, page
    • @ppk’s presentation: “Why responsive design works”, 84-page deck (PDF)
    • @mdo’s code guide for sustainable HTML and CSS, page
    • A solid set of jQuery coding standards and best practices, @abhinay_rathore’s page
  • Media

    • Redefining and recompiling a function during breakpoint debugging, @paul_irish’s 3-min s’cast
    • Applying multiple CSS animations on one element, @vlh’s 10-min s’cast

Best of April 2014

  • Posts

    • @igrigorik explains how CDNs cannot fix the problem of high ‘last-mile latency’ on mobile, post
    • What is ARIA and when should you (not) use it?, @MarcoZehe’s post + my notes
    • Debugging asynchronous JavaScript in Chrome (via async call stacks), @PearlChen’s post
    • Improving accessibility through focus management (2 examples with demos), @heydonworks’s post
  • Content

    • @owasp’s HTML5 security cheat sheet, page
  • Media

    • A progressive enhancement strategy for CSS animations, @vlh’s 6-min screencast
  • Demos

    • Breaking CSS animations into segments with steps(), @JoniTrythall’s post + page (4 demos)
    • @chriscoyier’s 3-tier font-size idea (px at the root, rem for components, em for text elem’s), post
  • Tools

    • A web tool for quickly finding HTML entities (e.g. type “<” or “c”), site
  • Opinion

    • “We need to convince websites to stop using passwords altogether”, @ninjudd’s post

Best of May 2014

  • Posts

    • Why placeholders should not be used as replacements for form field labels, @kwsherwin’s post
      • And even with labels, placeholder text is still bad for both usability and accessibility. The best approach is to have clear, visible labels that are placed outside empty form fields. Hints and instructions should also be persistent and placed outside of the field.
    • @philwalton argues that stopping event propagation is an anti-pattern, post
      • Browser events are global and ‘shared’ between components on the page. Stopping event propagation alters global behavior which can lead to bugs, e.g. some page components might rely on event handlers bound high up in the DOM tree, e.g. on the document node. “Stopping propagation should be thought of like canceling an event, and it should only be used with that intent.”
    • New best practice: Use async attribute instead of script-injected scripts, @igrigorik’s post
      • Browsers block inline scripts until the external CSS of the page is loaded/parsed and the CSSOM is constructed/available. Since dynamically loaded scripts are initiated from inline scripts, their HTTP requests are delayed until the CSSOM is ready. In comparison, when scripts are loaded via plain <script>s, their HTTP requests are sent immediately (but DOM construction is blocked and script execution still waits for CSSOM). The async attribute fixes both DOM block and CSSOM delay (+ non-supporting browsers have preload scanners).
    • Guide: The fundamental accessibility best practices, @tjvantoll’s post
      • Contents: 1. make sure everything works with the keyboard, 2. mark up forms semantically, 3. provide plenty of contrast, 4. ensure that screen readers know what your controls do, 5. test your website on an actual screen reader.
  • Info

    • Firewall/proxy issues: CORS-based services not reliable, JSONP fallback needed, @jlemoine_algo’s post
  • Media

    • Error-handling on the client-side: Getting better stacktraces, @toddhgardner’s 27-min talk
      • Insightful talk. Lays out the inconsistent behavior of the Error object and the global error handler in Chrome/Firefox/IE11. “Anonymous functions kill debugability of your stacktraces.” Wrapping addEventListener() handlers in try-catch does not work: Errors thrown in event handlers are caught directly by window.onerror.
    • Douglas Crockford: The new good parts in ECMAScript 6, 51-min talk (starts at 13:45)
      • Shortlist: 1. Proper tail calls (enable memory/performance optimizations; are able to replace while loops), 2. the splat (rest/spread) operator, 3. the new module system (fixes the dependence on global variables), 4. the let statement (“not a big deal” but reduces confusion for people coming from other prog. lang.), 5. destructuring, 6. WeakMap (“it’s the way objects should’ve worked”; enables real hash tables). “The class declaration is going to be a bad part.“
  • Demos

    • A responsive lightbox dialog (accordion dropdown fallback on small screens), @cfarm’s demo
  • Tools

    • page.js, a client-side routing library for single-page apps (w/ Express-like syntax), @airportyh’s post
  • Opinion

    • Progressive enhancement: “You’re so smart you turned JavaScript into XHTML”, @robreact’s post
      • “I don’t think it’s the way of the web to have your site fail and show a blank screen because some third-party dependency doesn’t load, JavaScript is turned off or because your developer left a trailing comma in a JavaScript object and didn’t test in Internet Explorer.”

Best of June 2014

  • Posts

    • Improving typography: Using small caps and text figures on the Web, @dfadeyev’s post
      • Default fonts (Arial, Times, etc.) don’t support small caps/text figures. These features can be used with (OTF) webfonts via CSS font-feature-settings, but this is not very efficient due to the increased file size of such fonts. An alternative solution is to create a font subset with just the relevant characters (e.g. lowercase a-z for small caps) and then prepend the subset to the font stack.
    • @dudleystorey’s guide to font subsetting, post
      • Google webfonts can be subsetted via the subset or text query string parameters. For self-hosted webfonts, you can use the Font Squirrel webfont generator to create the font subset. “If you’re only using a few characters from a font, it may be worthwhile base-64 encoding the result, saving yourself a HTTP request.”
    • The current state of installable web apps, @rauschma’s post
  • Info

    • Elements with CSS transform act as containing blocks for fixed positioned descendants, source
      • The containing block for the position:fixed element is in this case not established by viewport (demo).
    • FPWD of Media Queries L4 deprecates all media types except for all, print, screen and speech, spec
      • “Unfortunately, media types have proven insufficient as a way of discriminating between devices with different styling needs.” and “…the definition of media types as mutually exclusive makes it difficult to use them in a reasonable manner; instead, their exclusive aspects are better expressed as media features.”
  • Content

    • Google’s XSS game: “learn to find and exploit XSS bugs” (6 levels), page
      • Don’t hesitate to reveal hints. This isn’t a test. You can look for spoilers in this discussion on HN. Also, see Google’s guide to preventing/testing for XSS: page.
  • Demos

    • Grayscaling images with CSS background-blend-mode: luminosity, demo
    • Scalable typographic designs with SVG <text> (and when to use this approach), @chriscoyier’s post
      • “In SVG, the font-size you set is relative to the size of the SVG itself, not the whole document. So if you adjust the size of the SVG (it can easily be fluid width), your typographic design stays perfectly intact.”
  • Tools

    • flare.js (<1KB gzipped), Google Analytics event tracking via data-* attributes, @toddmotto’s repo

RSS feed

Use this feed as a reminder to visit every day

@openwebdaily

2–3 tweets/day (the best stuff from each release)

GitHub repo

Use this repo to submit issues with the site

Subscriber features

(Yeah, this part still needs to be rewritten, haha…) Become a patron of this digest for $6/month and you will (1) gain access to past releases, (2) get the option to receive dailies via email. More features coming later this year!

Payment options

  • Automatic monthly payment

  • One-time payment (½ or 1 year)

Note: PayPal only. (Other providers are not available in my country.) If you don’t want to have your credit/debit card connected to PayPal, you can just disconnect it immediately after making an one-time payment.

Notable subscribers

  • Keeping up with the ever-changing web is hard. Web Platform Daily is one of my favorite ways to do that and my absolute favorite format: simple, distilled, curated, and reliable.

    Chris Coyier’s avatarChris Coyier, designer at CodePen, writer at CSS-Tricks

  • Web Platform Daily is a fantastic way to stay on top of the latest front-end techniques, tools and resources. Very, very valuable.

    Vitaly Friedman’s avatarVitaly Friedman, editor-in-chief of Smashing Magazine

  • Web Platform Daily has quickly become not only an essential resource, but the essential resource. Nowhere else will you keep pace with the changing frontend landscape.

    Paul Irish’s avatarPaul Irish, developer advocate at Google

Open Web Platform Daily Digest

released Mon–Fri at 7 a.m. UTC
curated by Šime Vidas (Twitter, Gmail)
supported by 133 patrons (view list)