Article (Feed)

Recommended Restaurants

Sakura Sushi
4 stars
Japanese, Fish, Sushi
123 Blueberry Ln
Pomona, CA
(111) 111-1111
The HotPot Spot
5 stars
Hot Pot, Japanese
123 Blueberry Ln
Pomona, CA
(111) 111-1111
Tito's Tacos
5 stars
Mexican, Tacos
123 Blueberry Ln
San Dimas, CA
(111) 111-1111
The Pizza Factory
4 stars
Pizza
123 Blueberry Ln
Pomona, CA
(111) 111-1111
Prime Steakhouse
4 stars
Steakhouses
123 Blueberry Ln
Claremont, CA
(111) 111-1111
Taste Kitchen
4 stars
American
123 Blueberry Ln
Claremont, CA
(111) 111-1111
Bon Appetit
4 stars
French
123 Blueberry Ln
La Verne, CA
(111) 111-1111
Emperor's Mongolian
5 stars
Mongolian, Barbequeue, Buffets
123 Blueberry Ln
La Verne, CA
(111) 111-1111
Sally's Sandwiches
3 stars
Sandwiches, American
123 Blueberry Ln
San Dimas, CA
(111) 111-1111
Backyard Grill
3 stars
American, Burgers
123 Blueberry Ln
San Dimas, CA
(111) 111-1111

Go to original documentation or feed display page.

Lessons learned:

  • The original example was implemented as an 'infinite feed' which does not seem to lend itself well because it interwove many aspects of dataloading into the plugin. The 'plugin' itself could have been more generic.
  • This example used Element.matches which is new to me. The example includes a polyfill but browser support for this browser API is practically universal now, so I've omitted it.
  • Rendering of the article elements could leverage a template element instead of having everything embedded as strings in JS.
  • Coming from React experience, I expected there to be a way to get a ref to the rendered children but that seems to be an edge case that isn't fully supported at the moment. See also sveltejs/svelte#4869. Instead, this uses native DOM methods for identifying focusable elements.
  • I learned that styles passed down to a component are not preserved (since the component may or may not use them? so they must be made :global which I'm not a fan of, but there is a corresponding proposal at sveltejs/rfcs#13 that is interesting.
  • The example maintained an index cursor of the currently selected article. I instead opted for using document.activeElement and other DOM APIs for managing the focus.
  • The requirements state:
    Control + Home     Move focus to the first focusable element before the feed.
    but instead focus is being manually set to thefirst item in the feed, presumably because there are no focusable elements before the feed. Even so, focusing on the first item seems incorrect and could instead simply not move focus at all. My implementation attempts to find the first focusable element before and after the feed, and doesn't do anything if no such element is found.
  • Another difference I chose to implement was that the list of restaurants was always the same. I added some pseudo-randomness to the generation of restaurant items.