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 CSS property :focus-visible has great support. It means that focus styles don't apply on elements when clicked on with a fine pointer (mouse), but still do from other inputs (like tabbing), which is ideal.

Let's have a play, and make sure we have focus styles no matter what. pic.twitter.com/7jcSppErA0

— Chris Coyier (@chriscoyier) November 3, 2022

From Patrick: Today I found this design system for "building faithful recreations of old UIs."👌

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">
</div>

From Steve:

🤼‍♂️ Sort ActiveRecord models by an enum value (in SQL!) using `in_order_of`

Super handy to float results to the top of a list pic.twitter.com/r34Y45zPLr

— matt swanson 😈 (@_swanson) November 10, 2022

From Stefan: 👆That's another reason to never use integers for enums. +1: for strings.

From Chris: Check out this article on comparing a value to zero from One Ruby Thing.

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