DEV Community: ArkfulDodger

macOS Keyboard Shortcuts for Arranging your Windows

ArkfulDodger — Wed, 18 May 2022 20:44:38 +0000

If you're a developer, or anyone who spends most of their day typing away at the computer, chances are good that you have your own personal set of keyboard shortcuts that are your go-to's. I'm here to share with you one of my personal favorites in terms of global quality of life improvements, and how you can get it set up on your macOS computer.

Arranging Windows with Keyboard Shortcuts

The Goal: change the positioning/sizing of a window or windows without ever touching the mouse

Our Limitations: repositioning and resizing windows (regardless of application) is possible on Mac, but only the specified options below. For any more nuanced repositioning of your workspace using the keyboard, you may need to look into downloading software specifically for the task.

How We'll Do It: The way we make this work is by using the ability to create custom keyboard shortcuts on macOS, and by using the pre-existing commands that mac has for positioning windows, which you can see by hovering over the green button (often called the "maximize" button) at the top left of any open window, as seen below:

Note that the commands shown here change contextually, and may appear differently for you.

Creating the Shortcuts

To create our keyboard shortcuts, start by going to your mac's keyboard settings. You can do this quickly (using shortcuts!) by pressing CMD + SPACE to open the search bar, typing "keyboard", and pressing RETURN when the keyboard settings option shows up.

From here, click the "Shortcuts" tab option.

From here, select "App Shortcuts" from the list on the left. This will display your App-level keyboard shortcuts on your machine, there may be one or two already here.

Finally, press the + button to create a new shortcut, and fill in the entries as follows:

Application: select "All Applications". This will mean that the shortcut(s) we are creating will be accessible regardless of the application we are using.
Menu Title: enter the name of the command you wish to map to the keyboard shortcut exactly as it appears in the menu. This must be a character-for-character match in order to work. Note that if you use multiple screens like me, each screen will have a specific name you must use in order to move windows to that screen, so when in doubt, check how it is listed!
Keyboard Shortcut: Enter the shortcut you wish to use. It is a good idea to use shortcuts that are unlikely to be in use by any other application (you can see the shortcuts I use in the screenshots above).

And that is all there is to it! You should now be able to use your custom keyboard shortcuts to move, tile, fullscreen, and/or zoom your windows.

Notes and Troubleshooting

It may sometimes be impossible to find a series of keyboard combinations that are unused by all of the applications you frequent, and you will probably find that application-level keyboard shortcuts override anything you set here (usually a good thing!).

In these cases, your options might be to list multiple keyboard shortcuts for the same command, and ensure that the backup shortcut works in the application you are trying to use.

My preferred solution however is often to see if the application in question will give me control over its keyboard shortcuts, and alter the conflicting shortcut(s) to be different (assuming I don't need the native shortcut of course!).

I personally did this in VS Code for the shortcuts in the images above for moving windows from one side of the screen to the other. It's all about finding which solution is best for your personal workflow.

Ruby VS Code Snippets

ArkfulDodger — Fri, 08 Apr 2022 19:38:31 +0000

I have a minor addiction to writing snippets. Below are a few of the ones I have created for use in programming with Ruby. Feel free to add these to your own snippet files in VS Code!

UPDATE: 4/11/21: Init Var, Init Attr, and Class Setup snippets updated. Will now work with keyword arguments and arguments with default values

Ref for adding custom snippets to VS Code:

My blog post on VS Code Snippet Transformations

VS Code Snippet Transformations

The program I use to record my gifs:

LICEcap

Snippet List

Initialize with Variable Assignments
Initialize with Attr_Accessor
Class Setup
All Variable
ActiveRecord Model Class

Initialize with Variable Assignments



"Initialize With Var Assign" : {
    "prefix": "init var",
    "body": [
        "def initialize($1$2)",
        "\t${1/^(\\w+)((:\\s*|\\s*=\\s*)((\"[^\"]*\"|'[^']*'|\\[[^\\]]*\\]|{[^}]*})?[^,\"'\\[{]*)*)?|,\\s*(\\w+)((:\\s*|\\s*=\\s*)((\"[^\"]*\"|'[^']*'|\\[[^\\]]*\\]|{[^}]*})?[^,\"'\\[{]*)*)?/${6:+\n\t}@$1$6 = $1$6/g}$0",
        "end"
    ]
}

Purpose: creates initialize method for a class, taking arguments which are assigned to class-scoped variables

Demo:

How-To:

Prefix: "init var"
Tabstop 1: enter any parameters which should be set as class variables, separated by a comma
- format will update after tabbing out of this tabstop
Tabstop 2: enter any parameters which should not be set as class variables, separated by a comma
Tabstop 0: cursor placed within end of initialize method

Initialize with Attr_Accessor



"Initialize With Attr" : {
    "prefix": "init attr",
    "body": [
        "attr_accessor ${1/^(\\w+)((:\\s*|\\s*=\\s*)((\"[^\"]*\"|'[^']*'|\\[[^\\]]*\\]|{[^}]*})?[^,\"'\\[{]*)*)?|,\\s*(\\w+)((:\\s*|\\s*=\\s*)((\"[^\"]*\"|'[^']*'|\\[[^\\]]*\\]|{[^}]*})?[^,\"'\\[{]*)*)?/${6:+, }:$1$6/g}$3",
        "",
        "def initialize($1$2)",
        "\t${1/^(\\w+)((:\\s*|\\s*=\\s*)((\"[^\"]*\"|'[^']*'|\\[[^\\]]*\\]|{[^}]*})?[^,\"'\\[{]*)*)?|,\\s*(\\w+)((:\\s*|\\s*=\\s*)((\"[^\"]*\"|'[^']*'|\\[[^\\]]*\\]|{[^}]*})?[^,\"'\\[{]*)*)?/${6:+\n\t}@$1$6 = $1$6/g}$0",
        "end"
    ]
}

Purpose: creates initialize method for a class, as with the prior snippet, but additionally creates attr_accessors for each class variable set

Demo:

How-To:

Prefix: "init attr"
Tabstop 1: enter any initialize method parameters which should be set as class variables and attr_accessors, separated by a comma
- format will update after tabbing out of this tabstop
Tabstop 2: enter any initialize method parameters which should not be set as class variables, separated by a comma
Tabstop 3: enter any additional attr_accessors, or enter other needed code such as attr_readers on a new line
Tabstop 0: cursor placed within end of initialize method

Class Setup



"Class Setup" : {
    "prefix": "class setup",
    "body": [
        "class ${1:${TM_FILENAME_BASE/[^a-zA-Z]*([a-zA-Z]+.*_.*)|[^a-zA-Z]*([a-zA-Z].*)/${1:/pascalcase}${2:/capitalize}/}}",
        "\tattr_accessor ${2/^(\\w+)((:\\s*|\\s*=\\s*)((\"[^\"]*\"|'[^']*'|\\[[^\\]]*\\]|{[^}]*})?[^,\"'\\[{]*)*)?|,\\s*(\\w+)((:\\s*|\\s*=\\s*)((\"[^\"]*\"|'[^']*'|\\[[^\\]]*\\]|{[^}]*})?[^,\"'\\[{]*)*)?/${6:+, }:$1$6/g}$4",
        "",
        "\tdef initialize($2$3)",
        "\t\t${2/^(\\w+)((:\\s*|\\s*=\\s*)((\"[^\"]*\"|'[^']*'|\\[[^\\]]*\\]|{[^}]*})?[^,\"'\\[{]*)*)?|,\\s*(\\w+)((:\\s*|\\s*=\\s*)((\"[^\"]*\"|'[^']*'|\\[[^\\]]*\\]|{[^}]*})?[^,\"'\\[{]*)*)?/${6:+\n\t\t}@$1$6 = $1$6/g}$5",
        "\tend",
        "",
        "\t$0",
        "end",
    ]
}

Purpose: creates initialize method and attr_accessors, as with the prior snippet, but also creates the containing class definition which derives its name from the filename

Demo:

How-To:

Prefix: "class setup"
Tabstop 1: enter class name
- by default, will be set to file name in PascalCase (UpperCamelCase) omitting leading numbers
Tabstop 2: enter any initialize method parameters which should be set as class variables and attr_accessors, separated by a comma
- format will update after tabbing out of this tabstop
Tabstop 3: enter any initialize method parameters which should not be set as class variables, separated by a comma
Tabstop 4: enter any additional attr_accessors, or enter other needed code such as attr_readers on a new line
Tabstop 5: enter any additional code within initialize method
Tabstop 0: cursor placed within end of class definition

All Variable



"All Class Variable" : {
    "prefix": "all",
    "body": [
        "\t@@all = []",
        "",
        "${TM_SELECTED_TEXT/(end)$/\n\t\t@@all << self\n\tend/}",
        "",
        "\tdef self.all",
        "\t\t@all",
        "\tend"
    ]
}

Purpose: for an existing class, creates class-level @@all variable to contain array of class instances, adds instance to array within initialize method, and creates class-level get method

Demo:

How-To:

Select: initialize method, starting with the beginning of the first row through the final word "end" closing the method definition
- NOTE: the "end" must be the final characters in your selection for the snippet to work properly. If they are not, the shovel method within initialize will not generate
Type Prefix: "all"
Tabstop 0: cursor placed at end of getter method

ActiveRecord Model Class



"ActiveRecord Class" : {
    "prefix": "ar class",
    "body": [
        "class ${1:${TM_FILENAME_BASE/[^a-zA-Z]*([a-zA-Z]+.*_.*)|[^a-zA-Z]*([a-zA-Z].*)/${1:/pascalcase}${2:/capitalize}/}} < ActiveRecord::Base",
        "\t$0",
        "end"
    ]
}

Purpose: creates basic class definition with inheritance for use with the ActiveRecord ORM gem

Demo:

How-To:

Prompt: "ar class"
Tabstop 1: enter class name
- by default, will be set to file name in PascalCase (UpperCamelCase) omitting leading numbers
Tabstop 0: cursor placed within class definition

Transforming VS Code Snippets

ArkfulDodger — Wed, 06 Apr 2022 14:30:38 +0000

VS Code Snippets

If you're here, you probably know what snippets are, and have maybe even dabbled in making your own. As such, you're familiar with some or all of the basic features/benefits of snippets outlined below:

Snippet Features/Benefits

quickly output pre-written code (save repetitive typing)
use tabstops to navigate your cursor to predetermined locations in your snippet using the tab key
use multiple occurrences of the same tab stop to enter recurring values only once
use placeholder values to provide default values to tabstops
give placeholder choice options (as from a dropdown) to be selected when the snippet is inserted
insert certain variable values into your snippets

If you're new to making your own snippets, I highly recommend working on each of these in turn, as they build on each other well and are simple enough to pick up. With only these 6, you can create a great many incredibly useful snippets.

Here, I am going to cover one of the tricker, but more powerful customizations you can add to your snippets to further streamline your own coding process:

7. Variable and Placeholder Transformations

Transformations

Transformations in our snippets take either a variable or placeholder and modify it in some way.

Why would we do this? Let's look at one practical use-case example.

Use-Case Example: React Use State Declaration

Let's say you're programming in React and want to declare a new state. Not familiar with React? Don't worry about it. For this example, just know that declaring state involves creating a variable as well as a method used to set the value of that variable. This is declared as such:

const [fooBar, setFooBar] = useState()

We have our variable "fooBar" and our method "setFooBar". By convention, the method is named as "set____" using the name of the variable. Both are in camelCase.

If we were making a snippet for this, we might write our snippet body as something like:

"body": "const [$1, set$2] = useState();"

This snippet is functional, but note that we are typing the same variable name twice. We could replace the "$2" tabstop with "$1", but we will quickly run into the issue that the second occurrence comes out as setfooBar and no longer adheres to our camelCase.

What we want is a way to type the variable once, and capitalize the first letter of the second occurrence.

To achieve this we use a placeholder transform to insert tabstop $1 and change it to our specifications. The new snippet code is as such:

"body": "const [$1, set${1/(.*)/${1:/capitalize}/}] = useState()"

Okay, it looks like there's a lot going on in there, so let's break it down into pieces and put it back together.

Transformation Structure/Syntax

To start, let's think of a transform in terms of a series of questions:

What are we transforming?
What part(s) of that thing are we transforming?
How are we changing each part?
Are there any additional details or modifications?

Let's get our bearings in the code by looking at the syntax of a transformation:

${«variable|tabstop»/«regexp»/«text|format»/«options»}

The transform is contained inside "{}" curly brackets preceded by a "$" dollar sign and is divided into four sections by "/" forward slashes. Each section directly relates back to our questions thusly:

What are we transforming?
- variable or tabstop: the variable or tabstop input being transformed
What part(s) of that thing are we transforming?
- regex: a regular expression that searches for matches in the variable/tabstop
How are we changing each part?
- text or format: the text to insert in place of the match(es) found by the regex, or the format indicating how to return or act upon the match(es) found by the regex
Are there any additional details or modifications?
- options: additional options for the regex, often blank (we won't use or go into this in this example)

The Structure of our Example Transformation

Now let's see how these sections present themselves in the transformation we used above:

${1/(.*)/${1:/capitalize}/}    // the full transformation
${ /    /                /}    // container and dividers
  1                            // tabstop reference
    (.*)                       // regex
         ${1:/capitalize}      // format

Let's touch on each of the three sections in play (section 4, options, is not used here):

Tabstop - What is being transformed?
The tabstop reference is relatively self explanatory. We are wanting to transform whatever we are entering into our first tabstop (our variable name from up above), so we list 1.

If we were transforming a variable instead of a tabstop input, we would put the variable name here instead.

So the answer to our question 1: Tabstop 1's input

Regex - What part is being transformed?
If you are unfamiliar with regex syntax, there are some resources listed at the bottom of this post that might be helpful. For now, just know that this particular expression (.*) indicates that we are searching within our tabstop input string for any characters in any combination; aka: return the whole string.

So the answer to question 2 is: All of Tabstop 1's input

An important thing to note here before moving on is that the use of parentheses around the entire regex means that it is all part of the same regex "capture" – the first capture to be specific. This is important, because the format section cares about captures and capture order.

Again, if regex and captures are foreign to you, don't worry about it too much for this example. You can think of regex/captures this way: regex is a way to search a string for specific substrings, and captures are ways to further break those substrings into chunks that can be referenced. Here, the whole regex is grouped as a single chunk.

Format - How is it being transformed?

Format references the results/captures from our regex and can act upon captures individually. Depending on the change being made, format can have the following syntaxes:

Format Syntax

insertion: $«int» or ${«int»}
method: ${«int»:/«method»}
conditional insertions:

if/else ${«int»:?«if insertion»:«else insertion»}

if ${«int»:+«if insertion»}

else ${«int»:-«else insertion»} or ${«int»:«else insertion»}

Above, "int" is the capture number being acted upon, "method" is the change being applied, and "if/else insertion" are strings to be inserted if the regex/capture does or does not return a match respectively.

This can be quite a lot to get into, so let's limit our scope to our example. Recall that our format above looks like this:

${1:/capitalize}

So our format appears to be calling a method of "capitalize" on capture number 1.

Sidenote: It would be easy to confuse the "1" here for referencing our tabstop $1, but they are entirely unrelated. In format, "1" indicates that this format is acting on the first capture in our regex. Note that if you wish to act on the entire regex collectively, you can list an int of "0" in your format. In our example, we only have one capture, and it is the entirety of our regex, so we could technically use "0" or "1".

The methods listed in the VS Code documentation are:

/upcase - converts string to upper case
/downcase - converts string to lower case
/capitalize - capitalizes first character of string
/camelcase - converts snake_case to camelCase
/pascalcase - converts snake_case to PascalCase (aka upper-camelcase)

So our format of ${1:/capitalize} takes the first capture and capitalizes the first letter. This is exactly what we were aiming for!

The answer to our third question then is: First Letter is Capitalized

Recap

That was a fairly in-depth look, so let's zoom back out to look at our snippet, and see if the pieces make more sense to us now.

"body": "const [$1, set${1/(.*)/${1:/capitalize}/}] = useState()"

Bringing it back to our questions, we:

What? - 1 - are taking the input from tabstop 1
Part? - (.*) - are modifying the whole input string
Changes? - ${1:/capitalize} - capitalize the first letter of that string
And...? and are done

The result is a snippet which lets you type a variable one time, and as soon as you tab out of the first tabstop (you must tab out!) the second occurrence will adjust its capitalization automatically!

It seems like a lot of work for something very small, but the more familiar you can become with snippet syntax, regex, format, etc, the easier it will become to implement.

This is a complex topic, and this single use-case could only cover so much. I recommend looking through the resources below if you want to look into this further.

Resources:

Snippets

Regex

Programming "Natural" Idle Character Animations

ArkfulDodger — Wed, 16 Mar 2022 02:40:22 +0000

When you create animations for a character, one of the key animations you should consider is the idle animation.

Idle Animation - animation that occurs when the character is not performing actions

The purpose of an idle animation is to keep the character feeling "alive" even when they aren't doing anything. Having excellent animation assets can help with creating this illusion, but any animation run on a loop (as our idle animation will be) is bound to feel artificial once the eye catches on to the repetitive pattern.

Below, we are going to explore how to achieve more "natural" idle behavior by introducing purposeful randomness into our code.

Assumptions for This Walkthrough

For this, we are going to assume we have:

animation assets (we will use two)
a way to invoke the animations in our code

While the method you use for the above may vary drastically based on the game engine/app/extension you use, the logic we will explore in how/when to call these animations is transferrable.

Our code examples below will be in JavaScript.

Examining Idle Animation Structure

A common structure for an idle animation loop is to have a primary looped behavior which may be broken up by intermittent behaviors.

Examine the cat gif below as an example:

looped behavior: tail swish
intermittent behavior: yawn

What you will also notice from this image is that you can very quickly catch on to the fixed pattern (2 swish, 1 yawn, repeat), so while it is more active than a static sprite, there is no illusion of it being "alive" as is our goal.

Creating the Basic Loop

Let's imagine we start with the code below:

let interval = 3000 // interval in milliseconds to run animation

function runAnimation () {
    animateSwish() // invokes our given tail swish animation
}

setInterval( runAnimation, interval ) // invokes animation every interval

setInterval() invokes a callback function every interval in milliseconds. Here, we have set it to run every 3 seconds, at which point it will call runAnimation (which we have told to invoke our given tailSwish animation). The resulting behavior will be to have our cat image swish its tail every three seconds.

But we also want it to yawn, per our gif. So below we add:

let interval = 3000
let count = 1 // creates a counter
let yawnInterval = 3 // sets count on which we will yawn

function runAnimation () {
    // if not yet to our yawn Interval, Swish
    if (count < yawnInterval) {
        count++ // increment our count
        animateSwish()

    // if at/above our yawn interval, Yawn
    } else {
        count = 1 // resets swish counter
        animateYawn() // invokes our given yawn animation
    }
}

setInterval( runAnimation, interval )

This successfully brings us to the point in our gif above where we have our looping swish punctuated by yawns at definite, repeated intervals.

Implementing Randomness

Right now, our cat will always yawn on every 3rd loop. However, we can use Math.random() to randomly drop in a yawn at intervals within a range of our choosing.

First, decide the minimum number of loops after a yawn until our cat should be able to yawn again. This is subjective! Ask yourself: would it look unnatural for our cat to yawn immediately after just yawning? Probably. Let's say 2, so that our yawn will (at earliest) take place on the second loop after the last yawn.

let yawnIntMin = 2

Next, set the maximum loops that should pass between yawns. We know we want the behavior to take place at some point, so what is the longest we want to wait before having the cat yawn? For now, we'll say yawn on the 5th loop at latest.

let yawnIntMax = 5

Now, we can use these to create a function that will return a random number between these two numbers (inclusive).

let yawnIntMin = 2
let yawnIntMax = 5

function getRandomYawnInterval() {
    numberRange = yawnIntMax - yawnIntMin + 1; // the +1 is important because Math.random is not inclusive of our max
    randomRange = Math.random() * numberRange // random decimal between 0 and 4 (not inclusive)
    randomInt = Math.floor(randomRange) // our decimal rounded down to an int (0, 1, 2, or 3 max)
    yawnInt = randomInt + yawnIntMin // add the min back in so we are in the desired range

    return yawnInt // in this example (2, 3, 4, or 5 max)
}

Our entire function can be refactored to be:

let yawnIntMin = 2
let yawnIntMax = 5

function getRandomYawnInterval() {
    return Math.floor(Math.random() * (yawnIntMax - yawnIntMin + 1)) + yawnIntMin;
}

Now let's put this back in our main function so that every time our cat yawns, it will wait a random number of loops (within our defined range) before yawning again!

let interval = 3000
let count = 1
let yawnInterval = getRandomYawnInterval() // set initially

function runAnimation () {
    if (count < yawnInterval) {
        count++
        animateSwish()
    } else {
        count = 1
        yawnInterval = getRandomYawnInterval() // set new
        animateYawn()
    }
}

setInterval( runAnimation, interval )

Now our cat will yawn at unpredictable (more natural-feeling) intervals, while our min and max ensures that they won't yawn either too frequently or not frequently enough.

Building on the Concept

This is the basic idea behind how to use code to create more "natural" behavior.

Decide the bounds within which a behavior feels natural, and allow the behavior to randomly occur within that range.

You can implement this in many ways. So far, we have made it so that our cat will break up its tail swishes with yawns. However, note that our cat is still executing each behavior in unnaturally exact 3-second intervals.

A next step could be to turn that interval at which behavior occurs into a variable itself, which could then be set to a random number of milliseconds within its own predetermined range. See below:

// code governing getting the behavior interval (in milliseconds)
const behaviorIntMin = 2
const behaviorIntMax = 4

function getRandomBehaviorInterval() {
    let intervalSeconds = (Math.random() * (behaviorIntMax - behaviorIntMin)) + behaviorIntMin;
    return intervalSeconds * 1000;
}

// code governing getting the yawn interval (in loops)
const yawnIntMin = 2
const yawnIntMax = 5

function getRandomYawnInterval() {
    return Math.floor(Math.random() * (yawnIntMax - yawnIntMin + 1)) + yawnIntMin;
}

// code to call animations
let count = 1
let yawnInterval = getRandomYawnInterval()

function runAnimation () {
    if (count < yawnInterval) {
        count++
        animateSwish()
    } else {
        count = 1
        yawnInterval = getRandomYawnInterval()
        animateYawn()
    }

    let behaviorInterval = getRandomBehaviorInterval()

    setTimeout(runAnimation, behaviorInterval)
}


// invoking our final function
runAnimation();

View this code in action here!

The link above shows this code being used to animate our cat. You are encouraged to use the developer tools on that page to see the count, yawn interval, behavior interval, and animation calls logged as they happen to see how our randomization is working under the hood.

In addition to the variables and function for getting our random behavior Interval, note that we are now calling setTimeout from within our runAnimation function, feeding in runAnimation recursively as the callback.

We were able use setInterval earlier when the behavior interval was (as the name says) set. Now that the interval needs the freedom to be different every time, each invocation of runAnimation is going to trigger the next animation and then schedule the next call to runAnimation using our setTimeout method.

This is one solution for creating this loop in Javascript, and the language/engine you are using will determine the easiest and most efficient way to do this in your own project.

Closing

Depending on the assets (animations) at your disposal, there are many ways to utilize these ideas. Additionally, you are not bound to truly random sequences of behavior. For instance, a stretching animation might be more likely to occur directly following a yawning animation than it would otherwise, which delves into weighted random choices.

How (and if) you ultimately implement idle animations in your projects is up to you, but understanding how to structure randomness within otherwise static loops is a great tool to have in your belt. Next time you play a game, keep an eye out for idle character animations to see how this has been implemented out in the wild!