Diigo Bookmarks 12/30/2017

2017年12月30日 著

• Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit` | CSS-Tricks

  "If you're using auto-fit, the content will stretch to fill the entire row width. Whereas with auto-fill, the browser will allow empty columns to occupy space in the row like their non-empty neighbors"

• How to recreate Medium's article layout with CSS Grid

  "With CSS Grid though, this becomes piece of cake, as we'll simply use columns to set the width. To make our image take up the entire width we'll just tell it span from the first to the last column line."

• Component-Based Design - Hacker Noon

  "By first creating isolated, extensible components, we were able to remove a lot of duplicated effort on both teams. It also transformed our process. There's less of a hand-off and more continual collaboration. Our design and development team members better understand the other's intent and constraints."

• Practical Examples of Accessibility Improvements - Axess Lab

  ""It would be great to see actual examples of accessibility in action. Like before and after accessibility improvements." I got this great comment from a woman in the audience at a meetup. So let's make that idea a reality!"

• The Pain of Waiting -- Navigating the 7 Levels of Progress Indicator Hell

  "If waiting is a given, we should do everything we can to lessen that pain for the sake of our users. Disney has experimented with "interactive waiting lines" for their rides. While it's about as fun as it sounds, at least it's something."

• Performance Calendar » Time To Interactive - Measuring more of the user experience

  "As more and more apps moved to server-side-rendering and as the applications got richer and richer we started to notice a disturbing pattern. The applications would be visually displayed quickly but if the user actually tried to interact with the page they would be met with a UI that wasn't reacting to their input."