• Development

    Using Lazy Builders and Auto Placeholders in Drupal 8

    Introduction

    I’ve been working on a site that features a lot of user-specific customization and output. The site offers workshops (courses) using the Opigno LMS for Drupal 8. The workshops are rendered in a few different ways throughout the site. For the most part, the rendered workshops appear the same for all users. Here’s an example of a “card” view mode for a workshop:

    If a user has successfully completed a workshop, a special badge will appear on the card view mode. Also, the card will be highlighted:

    There are two parts of the workshop card template that have to change based on the user viewing the card:

  • Development

    NightwatchJS Command to Repeat a Keystroke

    Here’s a simple custom command that lets you repeat a specific key (single or combo) N number of times.

    In the Drupal world you want to place this in your “Commands” directory (as defined in DRUPAL_NIGHTWATCH_SEARCH_DIRECTORY in web/core/.env).

    You’d want to change “sitename” to be your site’s name (so it feels namespaced).

    /tests/Nightwatch/Commands/sitenameRepeatKeystroke.js

     

    Using this in /tests/Nightwatch/Tests/misc.js with a 1000ms pause between each keystroke:

  • Development

    Monitoring Which Element Has Focus in a Web Browser

    While building accessibility-minded websites, it’s useful to be able to monitor which element has focus in your browser.

    Using a screen reader works well, but there may be an easier solution for those who aren’t used to screen readers.

    Chrome makes this pretty simple. See https://developers.google.com/web/tools/chrome-devtools/accessibility/focus.

    In Firefox, Safari, Chrome, and other browsers I’m able to achieve similar functionality (maybe evenĀ better) by running a simple snippet in the web developer tools console.

    New lines appear as you move through the elements with your keyboard (or mouse).

    You may want to turn this into a one-liner for easier pasting.

    Output in Firefox: