Things We Learned: Sixth Edition

It's been a busy time but the learning continues! Scroll on for new tips and tricks we've found useful in the latest TIL round-up from the KD team.

Design matters

From Lauren: Here's how to utilize Shopify apps' block-level widgets in your theme layouts (which isn't possible by default):

Within a section file's schema, you need to include a block with the type "@app"...

{% schema %}
    "name": "section",
    "blocks": [
        "type": "@app"

... then summon it within your section's block-rendering for loop:

{% for block in section.blocks %}  
  {% case block.type %}
    {%- when '@app' -%}
      {% render block %}

Then, you'll see any possible block-level app widgets listed when adding a new block to the section in the customizer.

From Chris: Check out these CSS guidelines from Harry Roberts, a front-end architect based in the UK.

From Patrick: This is a good reminder for being all about `:focus-visible` when it comes to interactive elements.

The joy of coding

From Chris: Today I learned this tip about load_async.

From Steve: The new version of Stimulus includes an outlets API

// item_controller.js

export default class extends Controller {
  markAsDone(event) {
    // ...

// list_controller.js

export default class extends Controller {
  static outlets = [ "item" ]

  markAllAsDone(event) {
    this.itemOutlets.forEach(item => item.markAsDone(event))

From Chris: Another new Stimulus feature:

KeyboardEvent Filter

There may be cases where KeyboardEvent Actions should only call the Controller method when certain keystrokes are used.

You can install an event listener that responds only to the Escape key by adding .esc to the event name of the action descriptor, as in the following example. 

<div data-controller="modal"
     data-action="keydown.esc->modal#close" tabindex="0">

From Steve:

Compared to other similar languages, Ruby often prioritises readability (and joy) when it comes to its syntax and the methods provided in its Standard Library.

An example of this is the syntactic sugar used when comparing a value to zero.

- Andy Croll, One Ruby Thing