DEV Community: Matt Kenefick

Figma Plugin: Nearest Aspect Ratio Viewer

Matt Kenefick — Mon, 14 Jul 2025 15:29:04 +0000

Ever inspect a Figma frame and think… “what even is this ratio?”

You’re not alone. Designers frequently run into frames with weird aspect ratios—things like 4:19 or 167:1000. And while that level of precision might be technically accurate, it's not exactly helpful if you’re trying to design consistently or prep assets for export.

I built a tiny plugin to help.

👉 View it on Figma Community

What does it do?

The Nearest Aspect Ratio plugin will:

Analyze the selected frame or component
Identify its actual aspect ratio
Suggest the closest simple ratio (like 1:1, 4:3, 16:9, etc.)
Recommend a simplified version (e.g. 4:19 becomes 1:5)
Provide biased width/height conversions rounded to the nearest 25px for easier scaling

Why it’s useful

If you’re designing a responsive layout, exporting assets, or prepping content for social media, having sensible ratios is helpful.

Let’s say you want a layout to look “vertical.” A 3:4 or 9:16 frame is what you’re probably going for—but you end up with something like 347:982 and now you’re stuck trying to do math.

This plugin does the math for you—and then politely rounds it to something a human can use.

Example: Frame that’s 240 × 1142

Here’s what the plugin gives back:

Actual Ratio: 120:571
Nearest Clean Ratio: 1:5
Suggested Width: 200 (at height 1000)
Suggested Height: 1125 (at width 225)

Now you can make fast decisions. Do you scale the frame down to 1:5? Or just rework the layout entirely?

It’s the kind of plugin that helps remove a tiny mental load during the day.

How to use it

Select a frame in Figma.
Run the plugin.
Look at the left panel.
Done. (Yes, really.)

Feedback welcome

This was built mostly for myself, but maybe it helps you too. Let me know what would make it better. Should it let you adjust the size of the frame to match the new ratio? Should it include more “media” presets like A4 or Instagram story dimensions?

🧩 Boilerplates in VSCode

Matt Kenefick — Mon, 13 Nov 2023 19:11:35 +0000

What is it?

A Visual Studio Code plugin streamlining the creation and management of reusable templates. It's an essential tool for developers looking to optimize their workflow in VSCode.

Why use it?

It's a versatile templating system designed for flexible application. Here are some practical use cases:

Project Boilerplates: Streamline the initial setup for complex projects, including web servers, prototypes, and standard templates.

Dynamic File Templates: Generate files with dynamic variables (docblocks, author info, dates, paths) for personalized, consistent documentation.

Dynamic Structures: Generate folders of files with dynamic variables like you might find in an Angular project.

File Distribution: Spread out files across existing directories / subdirectories of a project. (Some files in /etc, some in /var, some in /home)

Quickstart: A basic template

First, we create a template folder we can use.

Create a new template by pressing Cmd+Shift+P and > File Template: New template
Select $WORKSPACE/.vscode/templates
Type "My First Extension" in the prompt
Add some new file(s) in this newly opened project

You now have a working template. Here's how to use it:

Option 1: Generate into the root of project

Open your command panel with Cmd+Shift+P and select > File Template: Generate here...

You should now see the "My First Extension" available in the dropdown. Select that and watch the files appear in the root of your open folder.

Option 2: Generate into a specific folder

Right click a folder in the file explorer and select File Template: Generate here....

You should now see the "My First Extension" available in the dropdown. Select that and watch the files appear in the selected folder.

Template Setup

The structure of a template could look like this:

your-project/
├── manifest.json
└── src/
    ├── {filename}.ts
    ├── {filename}.scss
    └── index.html

By default, the filename copied from your template directory are the same. If you need a dynamic filename(s), you can wrap a variable in brackets like so:

{filename}.vue
{filename}-123.vue

This will prompt the user to provide a value for filename. If they input "Batman", you will get a directory like this:

Batman.vue
Batman-123.vue

We automatically include static variables from process.env and the nearest package.json, if one is available, but you can also define custom variables. There are a couple examples in the examples directory demonstrating a range of functionality for templates.

Note: We start looking for a package.json in the path you've selected and search upwards for the nearest one. This allows you to have multiple projects open in a workspace but still use the most accurate manifest.

For env vars, you can use them like this:

My Home: ${env.HOME}
My User: ${env.USER}

For package.json vars, you can use them like this:

${package.name}
${package.version}
...

To access variables input by the user, like filename if requested by VSCode:

${input.filename}

You can setup custom variables in settings like this:

"new-from-template.variables": {
    "${lorem}": "Lorem ipsum sit amet dolor adipiscing elit et al.",
    "${my-variable}": "Hello World."
}

Dynamic code can be executed via the eval() function in JavaScript by using a double bracket syntax like this: ${{ Date.now() }}

There are several variables injected into the dynamic variables scope, including:

// Special path variables (interpreted)
${{ workspaceRoot }}           = /Users/mattkenefick/Sites/Projects/vscode-file-template
${{ inputPathRelative }}       = .vscode/templates/my-first-extension/index.js
${{ outputPathRelative }}      = tmp/index.js
${{ inputDirectory }}          = /Users/mattkenefick/Sites/Projects/vscode-file-template/.vscode/templates/my-first-extension
${{ outputDirectory }}         = /Users/mattkenefick/Sites/Projects/vscode-file-template/tmp
${{ inputDirectoryRelative }}  = .vscode/templates/my-first-extension
${{ outputDirectoryRelative }} = tmp
${{ inputFilename }}           = index.js
${{ outputFilename }}          = index.js

You can also access the static variables (env/package) through the dynamic scope by prefixing like this: ${{ variables.package_version }}. You might do this to separate SEMVAR from your version, like this:

${{
    const [major, minor, patch] = variables.package_version.split('.');

    `Major: ${major}\nMinor: ${minor}\nPatch: ${patch}`
}}

You can also dynamically define variables on the fly within the template for later use. Let's say we wanted to define a custom "classname" to be used in multiple spots:

${--
    variables.className = outputPathRelative.split('.').slice(0, -1).join('.').split('/').join('-').toLowerCase().split('src-')[1]
--}

// The above can be later accessed via ${{ variables.className }} in the same template

Note: If you're trying the above technique, but the code still appears in your template, you may have a syntax error.

You can include standard JavaScript logic like conditionals as well:

${{
    if (variables.package_author.indexOf('Kenefick') > -1) {
        `It's Matt.`
    }
    else {
        `It's someone else.`
    }
}}

An example docblock might look like:

/**
 * @author ${package.author}
 * @package ${{ outputDirectoryRelative.split('src/')[1] }}
 * @project ${package.name}
 */

which may generate out as:


/**
 * @author Matt Kenefick <matt.kenefick@buck.co>
 * @package Page
 * @project MyProject
 */

Configuration

There are two places where templates are stored:

Your home directory, e.g. $HOME/VsCodeTemplates
Local vscode directory of your project, e.g. project/.vscode/templates

This can be adjusted in your settings.

"new-from-template.templateDirectories": [
    ".vscode/templates",
    "$HOME/VSCodeTemplates"
]

How to load an Unpacked Extension on Chrome / Edge

Matt Kenefick — Fri, 10 Nov 2023 14:52:47 +0000

Not every browser extension is allowed in the app store, so sometimes you have to sideload one into your browser. Fortunately, Chrome and Edge make this process easy.

What you need:

A trusted browser extension as a ZIP file
Chrome / Edge web browser

🔺 Important: Do not load extensions from untrusted sources unless you have reviewed the code first.

Steps:

Unzip browser extension to a place you won't move or delete
Open Chrome / Edge
Click the puzzle piece icon in the toolbar
Click "Manage Extensions"
Enable "Developer mode"
Click "Load unpacked"
Find and select the folder you unzipped before

The extension should now appear in your browser the same as anything you've installed from the store.

GPT Template plugin for VSCode

Matt Kenefick — Sun, 01 Oct 2023 02:14:35 +0000

Install Here: https://marketplace.visualstudio.com/items?itemName=PolymerMallard.gpt-template

What is it?
It's a plugin for VSCode that uses ChatGPT to create a variation of a file that already exists.

How does it work?
Select a file in the tree, or open it, and run the Generate using this as template command. (via Cmd+Shift+P)

Type a description of the new file you want to create that is loosely based off this one.

Press [Enter] and it'll generate a new file; or you can give it a name to save it.

And you end up with a similar file, similar commenting, etc but with a new purpose.

Why would you do this?

It's a more open-ended templating system that allows you to create things like migrations, seeders, services, and more using similar syntax, commenting, and file structure.

It's not practical to create a template or boilerplate for every filetype, so this steps in as a dynamic templating system.

Since it's using GPT, it can even predict what fields in a migration you might want, foreign keys, etc.

Hilarious.code

Matt Kenefick — Mon, 10 Jul 2023 13:50:49 +0000

Tell me you don't know what CSS is without telling me you don't know what CSS is. 🤢

Using nginx to look for files by server date, e.g. 2022-07-10.json

Matt Kenefick — Fri, 26 Aug 2022 11:57:08 +0000

I ran into an instance recently where I wanted a low cost solution to serving up pregenerated files by date on the server.

We couldn't allow users to fetch on their by query string or similar; the server had to be in charge.

location /example-endpoint {
    set $file "index.json";

    if ($time_iso8601 ~ "^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})") {
        set $file "$1-$2-$3.json";
    }

    index $file index.json =404;
}

This will look for a file of 2022-07-10.json, default to index.json, and then a 404.

It allows you to setup a lot of pregenerated content on the server that changes per day without the ability to skip ahead.

No additional processing required.

AdonisJS Refresh Command

Matt Kenefick — Fri, 07 Jan 2022 15:50:28 +0000

The following command should exist in commands/DatabaseRefresh.ts and is executed like: node ace db:refresh

It will rollback migrations, run new migrations, then seed the database fresh.

import execa from 'execa';
import { BaseCommand } from '@adonisjs/core/build/standalone';

export default class DatabaseRefresh extends BaseCommand {
    /**
     * Command name is used to run the command
     */
    public static commandName = 'db:refresh';

    /**
     * Command description is displayed in the "help" output
     */
    public static description = 'Rolls back migrations, migrates new, seeds database.';

    /**
     * @return void
     */
    public async run() {
        await execa.node('ace', ['migration:rollback', '--batch=0'], { stdio: 'inherit' });
        await execa.node('ace', ['migration:run'], { stdio: 'inherit' });
        await execa.node('ace', ['db:seed'], { stdio: 'inherit' });
    }
}

Bookmarklet for injecting scripts onto a page

Matt Kenefick — Wed, 22 Dec 2021 15:31:19 +0000

javascript:(function() {
    let url;

    // Add frame to ensure we have access to `prompt`
    let iframe = document.createElement('iframe');
    document.body.appendChild(iframe);

    // Request data
    if (url = iframe.contentWindow.prompt('Enter script URL. Type "module" if you want loaded as a module.')) {
        var type = url.match(/\s?module\s?/) ? 'module' : 'text/javascript';
        url = url.replace(/\s?module\s?/, '');
        var x = document.createElement('script');
        if (url.toLowerCase().substr(0, 4) === 'http') {
            x.setAttribute('src', url);
        } else {
            x.innerHTML = url;
        }
        x.setAttribute('type', type);
        document.querySelector('head').appendChild(x);
    }

    // Remove
    document.body.removeChild(iframe);
})();

If you create a bookmark with this code in it, it'll allow you to inject a script URL into the head of the page you're viewing.

It creates a temporary iframe just incase the top window overrides the prompt(...) command to prevent you from doing this.

There are some instances where the CSP of a page will prevent you from doing this, but it still works in many cases.

When it prompts you, you can give it responses like:

http://localhost:8080/script/my-script.js

// adds <script src="http://localhost:8080/script/my-script.js" type="text/javascript"></script>

http://localhost:8080/script/my-script.js module

// adds <script src="http://localhost:8080/script/my-script.js" type="module"></script>

Regex: Parsing usernames from Twitter, Facebook, and Instagram

Matt Kenefick — Fri, 03 Sep 2021 14:27:12 +0000

For a few of my recent projects, we've had to parse out usernames from various social media URLs. We usually do this on user settings pages to make it easy when filling out forms; you can either write in your handle or paste in a URL.

In PHP

<?php

$urls = [
    'https://www.twitter.com/mattkenefick',
    'http://www.twitter.com/mattkenefick',
    'www.twitter.com/mattkenefick',
    'twitter.com/mattkenefick',
    'https://www.instagram.com/tonightaliveofficial',
    'http://www.instagram.com/tonightaliveofficial',
    'www.instagram.com/tonightaliveofficial',
    'instagram.com/tonightaliveofficial',
    'vimeo.com/my-name-goes-here',
    'medium.com/@mattkenefick',
    'basic-name',
    '12345678',
    '',
];

/**
 * Parse username from social media URL
 *
 * @param string $url
 * @return string
 */
function parseUsername(string $url): string
{
    $output = $url;

    // Parse username
    preg_match('/(?:https?:\/\/)?(?:www.)?(?:twitter|medium|facebook|vimeo|instagram)(?:.com\/)?([@a-zA-Z0-9-_]+)/im', $url, $matches);

    // Set output
    $output = count($matches) ? $matches[1] : $output;

    return $output;
}

// Parse
foreach ($urls as $url) {
    $name = parseUsername($url);

    echo "Extacted: [$name] from $url \n";
}

// Extacted: [mattkenefick] from https://www.twitter.com/mattkenefick
// Extacted: [mattkenefick] from http://www.twitter.com/mattkenefick
// Extacted: [mattkenefick] from www.twitter.com/mattkenefick
// Extacted: [mattkenefick] from twitter.com/mattkenefick
// Extacted: [tonightaliveofficial] from https://www.instagram.com/tonightaliveofficial
// Extacted: [tonightaliveofficial] from http://www.instagram.com/tonightaliveofficial
// Extacted: [tonightaliveofficial] from www.instagram.com/tonightaliveofficial
// Extacted: [tonightaliveofficial] from instagram.com/tonightaliveofficial
// Extacted: [my-name-goes-here] from vimeo.com/my-name-goes-here
// Extacted: [@mattkenefick] from medium.com/@mattkenefick
// Extacted: [basic-name] from basic-name
// Extacted: [12345678] from 12345678
// Extacted: [] from

In JavaScript

// One-liner
(url.match(/(?:https?:\/\/)?(?:www.)?(?:twitter|medium|facebook|vimeo|instagram)(?:.com\/)?([@a-zA-Z0-9-_]+)/im) || [url])[1];

// Function
function parseUsername(url)
{
    let output = url;
    let matches;

    // Parse username
    matches = url.match(/(?:https?:\/\/)?(?:www.)?(?:twitter|medium|facebook|vimeo|instagram)(?:.com\/)?([@a-zA-Z0-9-_]+)/im);

    // Set output
    output = matches.length ? matches[1] : output;

    return output;
}

Here's a testable example. in JavaScript. https://jsfiddle.net/124ojfmp/

Fetch random items that are likely popular

Matt Kenefick — Thu, 26 Aug 2021 15:34:55 +0000

Let's say you want a shuffle mode on your music service or Netflix service. You'll have to combine randomness with weight, e.g. popularity, relevance, etc. From here on, I will use the term -weighted- to represent a combination of inputs like popular, relevancy, new, etc

Approaches

There are multiple approaches to this that will yield mildly different results. We will only touch on a couple ideas now, but may follow-up with more in the future.

📙 Pool of Popularity

One approach to retrieving randomly weighted data is to limit the available data first and then choosing a random item from the list.

Example: Take the top 500 chart topping songs in a decade and cycle through them.

This approach is good if you want to always exclude less popular songs, but a pitfall is that you're essentially limiting yourself to only 500 songs out of the box; if you've ever used Pandora, you'll know how repetitive this can get.

📒 A Weighted Array

This approach is similar to our final approach, but less efficient. I wanted to discuss it first because it's likely a technique people would think of and implement poorly.

Let's say you have numbers 1-6 and you want 2 and 4 to show up more often than the rest. In a normally distributed set, you'd have an array like:

[1, 2, 3, 4, 5, 6]

And you'd get as random an entry as your random number generator can make for you. However, a simple way of adding weight here is to increase the amount of times a number appears, like:

[1, 2, 2, 3, 4, 4, 5, 6]

If you pick a random number from this set, it's more likely to be a 2 or a 4, but it could still be all the rest. Unlike the Pool of Popularity approach, this will still allow unpopular items to be chosen at a lesser likelihood.

In order to determine fluctuating weights, you could add more numbers:

[1, 2, 2, 2, 2, 2, 2, 2, 3, 4, 4, 4, 5, 6]

Just at a glance, which item do you think is most likely to show up here?

This is an extremely simple way of adding weights, but it's not efficient at all. It's good for dice rolls, but not much more.

📗 Subtracting Popularity

This is my preferred approach over the one above. What we're going to do here is subtract numbers from each other in order to get a likely popular item. There are variations to this approach you can explore, so don't think this implementation is the end-all-be-all.

Let's first start by describing a simple set of data; we'll use movies from 2019. I'll assign them an arbitrary weight (0-1) that we pretend is made up of user reviews, relevance to user, etc.

0. [0.91] Parasite
1. [0.89] Avengers: Endgame
2. [0.85] Joker 
3. [0.76] Once Upon a Time... In Hollywood
4. [0.74] Marriage Story
5. [0.71] The Irishman
6. [0.61] Midsommar
7. [0.57] Ad Astra
8. [0.49] Yesterday
9. [0.25] Cats

Example: https://jsfiddle.net/hfnqk0t1/

As you can see, we have a selection of mostly good movies (0-5), then a selection of lesser movies. You'll also notice that our weights can be any number, such as 0.91481 which makes it complicated to use the dice approach above where we add more items to an array.

This example just shows 10 movies, but we could be dealing with hundreds of thousands over the years.

The purpose of this approach is to find a movie that is likely good, but not to completely exclude others that may be less popular. Ever heard of a cult classic? Fight Club, The Thing, and Blade Runner all failed at the box office but went on to become classics.

First, we'll want to sum all of our weights into a number.

// Realistically, you'd iterate or use a SQL SUM(...) function
const sum: number = 0.91 + 0.89 + 0.85 + 0.76 + 0.74 + 0.71 + 0.61 + 0.57 + 0.49 + 0.25;
// 6.78

Second, we'll want a random number between 0 - the sum (6.78).

const sum: number = 6.78; // from above
const target: number = Math.random() * sum;
// 4.76821

Lastly, we iterate through our random dataset subtracting numbers from that target variable. When we go below zero, that's the item we take that is more likely to be popular.

Before we implement this, let's talk about it.

// Implemented below the explanation

Why does this technique work?

When we sum up the numbers to reach 6.78, we're creating an upper bound for our random number. It can't possibly be 6.80 because we just don't have that many movies. If we were to use a lower number like 6.00, that means we'd be leaving some movies out of consideration. By summing everything up, it takes all of our possibilities into consideration.

We take a random number within those bounds as an arbitrary target. This will determine how many iterations we need to go through to find our movie.

Then we iterate through our movies and subtract the weight from our target until we reach zero. This works because a higher weight is more likely to get you toward zero, but a lesser weight still could push you over the line.

For instance, if your target is at 0.75, a popular movie has a really good chance at pushing you across the line: 0.75 - 0.91 = -0.16. But a lesser movie, or multiple lesser movies, still wouldn't work:

0.75 - 0.25 = 0.50 // still above 0.0
0.50 - 0.19 = 0.31 // still above 0.0
0.31 - 0.29 = 0.02 // still above 0.0
0.02 - 0.15 = -0.13 // finally

You can see here how it took 4 less popular movies to inch over that zero line, but 🎊 it was a 0.15 that ultimately did the job proving that less popular movies CAN be chosen, albeit less often.

for (let movie of movies) {
    if ((target -= movie.weight) < 0) {
        return movie;
    }
}

Here's another example that uses a more evenly distributed set of weights so you can see how the results come in more clearly.

But as you can see, every movie has an opportunity to be selected. The more popular ones are chosen more often, but even Cats can be shown from time to time.

If you run that example over and over, you'll see the numbers change each execution but they'll be approximately similar.

Complete Example

const movies = [
    { "selected": 0, "title": "Parasite", "weight": 1.0 },
    { "selected": 0, "title": "Avengers: Endgame", "weight": 0.9 },
    { "selected": 0, "title": "Joker ", "weight": 0.8 },
    { "selected": 0, "title": "Once Upon a Time... In Hollywood", "weight": 0.7 },
    { "selected": 0, "title": "Marriage Story", "weight": 0.6 },
    { "selected": 0, "title": "The Irishman", "weight": 0.5 },
    { "selected": 0, "title": "Midsommar", "weight": 0.4 },
    { "selected": 0, "title": "Ad Astra", "weight": 0.3 },
    { "selected": 0, "title": "Yesterday", "weight": 0.2 },
    { "selected": 0, "title": "Cats", "weight": 0.1 },
];

/** 
 * Get random movie from our list
 *
 * @param Movie[] movies
 * @return Movie
 */
function getRandomMovie(movies) {
    const sum = movies.reduce((accumulator, movie) =>
        (isNaN(accumulator) ? movie.weight : accumulator) + movie.weight);
    let target = Math.random() * sum;

    for (let movie of movies) {
        if ((target -= movie.weight) < 0) {
            return movie;
        }
    }

    // Unreachable
    return movies[0];
}

// Test iterations
for (let i = 0, l = 500; i < l; i++) {
    const movie = getRandomMovie(movies);

    // Increment how many times this movie was selected for demonstrations
    movie.selected ++;
}

// Log our movie array to see how many times each was picked
console.log(movies);

😎 How could it better / scalable?

We completely sum up all of the weights to determine an upper bound to our randomization factor, but if you have 10 million rows, that might be an unnecessary cost. It's possible you could choose an arbitrary clamped weight and then apply this method to an offset of rows.

For instance, if we had 1000 movies we could sum up the weights of 100 of them. Maybe you randomly choose a number between 0 - (1000 - 100), so you end up with 762. Query for 100 rows at that point:

SELECT *
  FROM `movies`
 LIMIT 100
OFFSET 762

I should note that this technique will put you more at the mercy of your data. If rows 762-862 are all bad movies, then you will be picking from a bad crop.

One might think a way around this is to randomize the dataset first; and you'd be right, but that is not efficient for large datasets.

A better approach would be to take random numbers and checking if your primary key is IN the dataset. People familiar with Laravel may recognize this style from their Eager Loading implementation.

const howManyRows = 10000000;
const sizeOfSet = 10;
let numbers = [];

// Generate random numbers from max set
// NOTE: This isn't dealing with potential duplicates
// but that may be superfluous for such scale.
for (let i = 0, l = sizeOfSet; i < l; i++) {
    numbers.push(Math.floor(Math.random() * howManyRows));
}

// Log
console.log(numbers);

// 0: 8316350
// 1: 9670724
// 2: 6592105
// 3: 2823263
// 4: 4172139
// 5: 6591340
// 6: 5969071
// 7: 8285343
// 8: 3639895
// 9: 5067900

Which could then become a SQL query like:

SELECT *
  FROM `movies`
 WHERE `id` IN (8316350, 9670724, 6592105, ...)

Now you have an efficiently-fetched randomized segment of an extremely large dataset that you can apply our weighted randomization technique to.

Final Note: The above technique assumes sequential numerical IDs and likely wouldn't work on something like Mongo's ObjectId. There are probably additional solutions to this, but I'll write about them in another article.

Feedback

What did you think?
What's your favorite technique?
Did you spot any errors in my code?
How could these be better?
Did I miss something in my write-up?

Til then, enjoy your weighted randomization.

Conway’s Game of Life in JavaScript

Matt Kenefick — Fri, 20 Aug 2021 03:06:24 +0000

Try out the demo: Matt Kenefick’s Game of Life

My solution is extremely experimental by design. It’s not intended to be your standard run-of-the-mill approach.

The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970. It is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input.

Yesterday, I read an article the other day about how someone approached the Game of Life problem. I didn’t know about the problem before seeing this article, but it appears to be something you’d likely see in a technical interview.

What intrigued me at first was how beautiful the grid was and the way it could take on a life of its own. It’s like a living breathing crossword puzzle.

I started to read about the problem itself, and then his implementation; that’s where it took a turn for me. At first, I thought it’d be fun to give this problem a shot within an hour to see how far I got.

After I saw his code, I had a different mission:

As you can see in Alex’s code, he’s using nested loops for his multidimensional arrays, lots of conditionals, and even throwing errors. Later he uses more loops and conditionals to execute the function above.

This might be how places expect you to solve it, but I don’t care for it.

Eliminating loops, conditionals, and errors

It was no longer about simply solving the problem itself, but about how I solved it. I wanted to come up with a way that didn’t depend on multi-dimensional arrays, additional loops, excessive conditionals, and errors.

Why?

For fun.

Okay, so what did I do?

First concession is that there must be one loop. Obviously since we’re potentially changing a list of items, we have to look at each one.

Second, I was determined to use a basic map where you have a: top-left, top -middle, top-right, middle-left, middle-right, bottom-left, bottom-middle, and bottom-right.

There are three main points of processing for this problem:

Recursively process N iterations in an X, Y grid
Calculate neighbor count of each item in the grid
Apply our rules for each item based on neighbor count

The focal point of all of this how we calculate how many neighbors each grid item has. Before we get into that, I’m going to briefly touch on points #1 and #3 to get them out of the way.

#1. Process

The main purpose of this function iterates through how many items we have. If the grid is meant to be 3x3, that means we have a total of 9 items to potentially process.

We run this function recursively so we can reach N number of iterations. The logic starts with a base set of data and then calls itself N times passing in the previous set of data each time.

We utilize a basic cache mechanism to store previously processed iterations to reduce unnecessary processing power. This is optional, but optimal.

#3. Determination

The main purpose of this function is to make a determination of what should happen to each item based on the rules of Life. Here are the rules:

In my implementation, I handle this very explicitly with conditionals. The reason I’m doing it this way is because these rules are pretty arbitrary and could be changed to do anything. If I were to go out of my way to identify a pattern in here, it would just make changes more complicated to implement.

Note: This part uses conditionals, but the neighbor count part does not; technically.

Determining neighbor count

For this application, a neighbor is anything adjacent to a particular index including diagonals; it’s very much like Minesweeper. Here’s an extremely basic starting position for Life.

Black indicates a dead item, white indicates a live item. The number inside represents how many live items said block is in contact with other than itself.

I wanted to solve this problem using a flat array, meaning:

[0, 1, 2, 3, 4, 5, 6, 7, 8]

As opposed to a multi-dimensional array, such as:

[
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8]
]

One of the problems that comes with a flat array is the idea of wrapping. I’ll explain that in a minute.

Basic approach for finding neighbors

The basic approach for finding neighbors is to add / subtract positions based off your current index. So let’s say we want the value for “4” in that array above.

The item left of it is 3, so that’s 4−1
The item right of it is 5, so that’s 4+1

To get the items above and below it, you simply have to remove an entire row. Since we have 3 items per row, we can say:

The item above it is 1, so that’s 4−3−0
The item above-left is 0, so that’s 4−3−1
The item above-right is 2, so that’s 4−3+1

Then you would do the same thing for beneath it by adding 3 items per row.

What about the corners?

Edges and corners are where this starts to get tricky and why you’d find people using conditionals.

If you’re at position 2, that’s the top right corner. You shouldn’t expect to find any data to the right of it, nor should you expect data above it. Same goes for anything on the top edge, left edge, right edge, or bottom edge.

What’s more is that this creates a particularly difficult problem for flat array mapping. We mentioned before that determining the place to the right is index + 1, but if you apply that logic to a flat array at position 2, you’ll end up with 3.

    [0, 1, 2, 3, 4, 5, 6, 7, 8]

    [0, 1, 2] x
    [3, 4, 5]
    [6, 7, 8]

As you can see, 3 is not next to 2 on the grid view, it’s middle left.

How do we adjust for this?

This is where it gets complicated. I’m also going to bring in this disclaimer here for the purists ☺️

Disclaimer: I’ve mentioned how I wanted to eliminate “conditionals”, but I must disclaim that there may be some behind-the-scenes conditionals at play here, e.g. min and max functions.

/**
 * Checks a key/val's neighbors to determine what
 * the next state should be. Returns how many living
 * neighbors exist for the supplied item.
 *
 * @param int index
 * @param array data
 * @return int
 */
getNeighborCount(index = 0, data) {
    data || (data = this.data);
    index = parseFloat(index);

    let output = 0;

    const x = this.board.columns;
    const y = this.board.rows;

    const a = Math.max(0, Math.floor((index - x) / x));
    const b = Math.floor(index / x);
    const c = Math.min(y - 1, Math.floor((index + x) / x));

    const grid = {
        [(a * x) + Math.abs(parseInt((index % x - 1).toString(36), x))]: 1,
        [(a * x) + parseInt((index % x - 0).toString(36), x)]: 1,
        [(a * x) + Math.min(x, parseInt((index % x + 1).toString(36), x))]: 1,

        [(b * x) + Math.abs(parseInt((index % x - 1).toString(36), x))]: 1,
        [(b * x) + Math.min(x, parseInt((index % x + 1).toString(36), x))]: 1,

        [(c * x) + Math.abs(parseInt((index % x - 1).toString(36), x))]: 1,
        [(c * x) + parseInt((index % x - 0).toString(36), x)]: 1,
        [(c * x) + Math.min(x, parseInt((index % x + 1).toString(36), x))]: 1,
    };

    output = Object
        .keys(grid)
        .filter(x => x >= 0 && x != index && data[x] === STATE_ALIVE)
        .length;

    return output;
}

As you can see, this grid map doesn’t use a bunch of complicated conditionals and loops to determine what’s next to it. It simply uses TL, TM, TR, ML, MR, BL, BM, and BR.

Variables a, b, and c are integers representing rows above, middle, under. They’re using max & min to clamp them within the bounds of the grid; but I should note this isn’t entirely necessary.

The four important aspects of this approach are:

Using Object keys
Modulo %
Math.abs
parseInt(…, base)

By using the Object keys, we are able to naturally overwrite indexes. If multiple calculations yield -2, that’s fine. As a matter of fact, it’s better that we don’t have to apply additional filters on it.

Modulo allows us to determine a remainder and it’s because of this that we can logically separate rows. Each row has 3 items, so for a list of items 6, 7, 8, it will look like:

6 % 3 = 0
7 % 3 = 1
8 % 3 = 2
9 % 3 = 0

You can see how those calculated values will be useful in determining each items position in the “column,” i. e. 6 % 3 = 0 meaning 0 index in a column.

Math.abs is a trick that allows us to deal with left-most edge specific cases. Above we talked about converting numbers using modulo to pseudo column indexes which is great, but what if want the item left of 6?

6 - 1 = 5; // no good
0 - 1 = -1; // off the grid

Using the -1 solution will either error us off the grid or calculate 5 by wrapping around the flat array; neither are what we want. If we wrap it in Math.abs(-1) it becomes simply 1 which is what we’d use for determining the item RIGHT ADJACENT, i.e. 7.

Since we’re using Object keys which will naturally be overwritten, the absolute value of -1 becoming 1 is essentially just throwing the value away because it’s already been determined by other calculations.

parseInt(…, base) is another trick that allows us to deal with right-most edge specific cases. It involves one of my favorite things ever: numerical bases. In other words, we’re leaving base-10.

For this, we’ll set the base to be how every many items exist in a row (3). Now ordinarily when you count something in base 3, it would look like:

0, 1, 2, 10, 11, 12, 20, 21, 22

But with parseInt() we will find that overflowing numbers are NaN, so here’s what you’ll get:

parseInt(0, 3) == 0
parseInt(1, 3) == 1
parseInt(2, 3) == 2
parseInt(3, 3) == NaN

🛑 Edit: I didn’t initially take into account double digit values and radix for this conversion, so it threw unexpected errors. For example:

parseInt(12, 19) == 21  // bad
parseInt('c', 19) == 12 // good
(12).toString(36) == 'c' // that's where it comes from

If we want to find what is right adjacent of our top right corner (x value below), we would be doing 2+1, but in a flat map that will give us 3. If we consider each row with bases, it would be parseInt(2 + 1, 3) which equals NaN. Since we’re using Object keys, that means we’ll be setting a key of NaN.

    [0, 1, 2] x
    [3, 4, 5]
    [6, 7, 8]

What does it all do?

Now if we process each row and apply that grid object to it, we’ll retrieve a result that looks like this:

Look at the keys: 1, 2, 4, 5, NaN then analyze those positions in the grid. They’re all neighbors (with self included).

Let’s look at the 9th position (bottom left). You can see how the only neighbors are 6, 7, 10 (with self included).

Now that we have that Object of keys, we can flip it and remove ourself from it. There are other ways of implementing this and it could also be optimized.

output = Object
    .keys(grid)
    .filter(x => x >= 0 && x != index && data[x] === STATE_ALIVE)
    .length;

We get the keys, then we check our indexes (keys), and determine if it’s an ALIVE value. The length of said array is how many living neighbors our index is in contact with.

Summary

Using the grid method above, we minimized the amount of conditionals, loops, and thrown errors required in order to reliably determine how many living neighbors a particular index has.

Is this the best approach? Maybe, maybe not.

Was it fun? Yes, and no.

The idea for changing bases came first as a solution for right-most edge cases but it didn’t fix left-most problems. If you put -1 into the parseInt function, it’ll return -1 regardless of what base you’re in. Applying modulo before entering it in would defeat the purpose.

It took like 20 minutes to come up with the Math.abs solution for left-most edge cases. I was worried that maybe I had hit a wall and my approach to solving it wasn’t doable.

I realize it’s not a conventional approach, but that was the point. I wanted to see if something like this could be done using nearly 100% arithmetic, one primary loop, and little-to-no conditionals/errors and it seems like the answer is yes; at least for JavaScript.

Try out the demo: Matt Kenefick’s Game of Life

Xamarin.Forms System.ArgumentException: Illegal characters in path

Matt Kenefick — Thu, 19 Aug 2021 12:15:16 +0000

If you’ve seen this, you’ve probably been banging your head against the wall figuring out what it means. If you’re fairly sure there aren’t actual illegal characters in your project, then it’s likely about how long your path string becomes.

Error XARDF7004: System.ArgumentException: Illegal characters in path.

Assuming you’re using Visual Studio on Windows 10 when encountering this issue, it's likely related to MAX_PATH which caps off at 260 characters on Windows due to compatibility.

How did I find out?

At first I thought it might be related to spaces in folders, but that couldn’t be possible since my primary user on my machine has a space in it. In such an instance, every project would fail.

Then I thought maybe it was an invisible character in a folder name, so I copied my solution straight to C:\ and it worked.

Then I thought maybe it was related to length, so I started creating subfolders. I found that the project build would fail around 65 characters for path. That didn’t make any sense so I assumed it had to be something deep inside that exceeded some predetermined length.

Eventually, I was able to get this error to show up:

Error XA4209: Failed to create JavaTypeInfo for class: Android.Support.V4.View.Accessibility.AccessibilityManagerCompat/ITouchExplorationStateChangeListenerImplementor due to System.IO.PathTooLongException: The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.

This explicitly talks about 260 characters and 248 characters.

I continued researching and found this thread: https://developercommunity.visualstudio.com/content/problem/521034/failed-to-create-javatypeinfo.html#

So this is definitely related to the MAX_PATH problem on Windows. This will hopefully be solved with up coming changes in .net and MSBuild which will remove the MAX_PATH as a limit [1]. This looks to be in d16 however it does require the user enable a setting on their machine via a Group Policy (see [1] for details).

After investigating that, it seems to be a pretty common issue:

The issue will be always present in Windows, to keep compatibility with old software. Use the NT-style name syntax "\?\D:\very long path" to workaround this issue.

To conclude, if you run into the Illegal characters in path issue when compiling Android in Xamarin and you search for “xamarin system.argumentexception illegal characters in path”, I hope you find this article and realize it’s actually about how many subfolders you have your project nested in.

Good luck.

DEV Community: Matt Kenefick

Figma Plugin: Nearest Aspect Ratio Viewer

What does it do?

Why it’s useful

Example: Frame that’s 240 × 1142

How to use it

Feedback welcome

🧩 Boilerplates in VSCode

What is it?

Why use it?

Quickstart: A basic template

Template Setup

Configuration

How to load an Unpacked Extension on Chrome / Edge

GPT Template plugin for VSCode

Hilarious.code

Using nginx to look for files by server date, e.g. 2022-07-10.json

AdonisJS Refresh Command

Bookmarklet for injecting scripts onto a page

Regex: Parsing usernames from Twitter, Facebook, and Instagram

In PHP

In JavaScript

Fetch random items that are *likely* popular

Approaches

📙 Pool of Popularity

📒 A Weighted Array

📗 Subtracting Popularity

Why does this technique work?

😎 How could it better / scalable?

Feedback

Conway’s Game of Life in JavaScript

Eliminating loops, conditionals, and errors

Why?

Okay, so what did I do?

#1. Process

#3. Determination

Determining neighbor count

Basic approach for finding neighbors

What about the corners?

How do we adjust for this?

What does it all do?

Summary

Xamarin.Forms System.ArgumentException: Illegal characters in path

How did I find out?

Fetch random items that are likely popular