• 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:

  • Development

    Sort “Select an existing field” options in Drupal by Label instead of Type

    Normally Drupal sorts the “Select an existing field” select list by the field types. Here’s an example of what this looks like:

    2016-04-22_11-40-52

    This looks good at first glance, but often it’s hard to quickly find the field you want to reuse. Most of the time you’re scanning the list for the name (label) of the field you want to reuse. Wouldn’t it make more sense to put the field label at the beginning and sort by that? I thought it would, so I made it happen with a quick userscript.

  • Development,  Tech Tips

    Keyboard Maestro URL Handler – Link Injection

    Introduction

    This post outlines some advanced usage of the Keyboard Maestro URL handler (KMLink).

    A few weeks ago I was automating some Chrome form filling with Keyboard Maestro. It occurred to me that the perfect trigger for what I was doing would actually be a simple link within the Chrome webpage itself (or a simple bookmarklet); when the link/bookmarklet is clicked, the KM macro is executed. How about a little backstory before I get to the “here’s how to do it!” ?

    We use a project management system called ActiveCollab. It’s a great piece of web-based software, but often simple things take several steps. When I want to quickly mark a task as “Due in 2 business days” (which I need to do very often) it’d be whole lot nicer to click a link to set this, than to have to go to the edit screen, pull up the date picker, think about what two business days from today is, click that date and submit the form. Sure, I could write a module for Active Collab that would do what I want, but Keyboard Maestro provides me with much more freedom and I can build it in minutes instead of hours.

  • Development

    Userscript: Hulu Right-Click for Pop Out Video

    Hulu’s default rather large video player is usually too big for my needs. I prefer the “Pop Out” player. So, I often load the large video, click the cog wheel, move my mouse to the “popout” link, click it, then close the main window. It’s been a pain in the butt. So, I took some time to write a simple userscript that lets you right-click on any video thumbnail to open its video in the popout immediately. It’s working great for me but I have not tested it elsewhere, so I won’t be surprised if it doesn’t work for you… just let me know in the comments below…

    http://userscripts.org/scripts/show/311800

    UPDATE: I rewrote this as a Chrome Extension and published it. View the blog post.

  • Development

    Maintaining Lightbox2 Templating

    Lightbox2 is a very popular and powerful Drupal module. One of the helpful features is that you can render a Drupal node in a lightbox rather easily in either PHP or HTML. View detailed explanation. The issue is that when you click a link within that lightboxed content, you will lose the lightbox2 templating (e.g., if your lightbox template hides sidebars, they’ll only be hidden when the node loads. If you click a link within the lightbox, the new node will load and sidebars will appear). Read on for a quick fix.

  • Development

    Make menu header a link to its first child link

    We use menu block a lot to create sidebar menus with specific depths, starting points, etc. The following snippet shows how we can use jQuery to turn a normal <h2> tag into a link. The link’s destination will be the same as the first child link.

    jquery_link

  • Development

    How to check if a jQuery plugin is loaded

    The following snippet is one way to determine if a jQuery plugin is loaded an available. There are probably other ways to achieve the same behavior, however this one never seems to fail me.

     

  • Development

    Open All External Links in a New Window/Tab using jQuery

    … and to match two urls/domains/whatever:
     

  • Development

    Add Javascript to a Specific Page

    There are several ways to add javascript code to a page in Drupal. The method outlined below involves a modification to your theme’s template.php file. You’ll be editing (and un-commenting if necessary) your theme’s preprocess_page function. This basically lets you modify the variables that are available in your page.tpl.php file(s).

    In the example below, I’ve checked if the page’s “is_front” property is true. You can use anything available in the $vars variable within the function. I suggest using the devel module to determine what variables are available. This can be done with: dpm($vars);