DEV Community: Olushola

How npm Crashed Our VPS (and What Finally Fixed It)

Olushola — Fri, 31 Oct 2025 19:44:17 +0000

Our VPS kept crashing every time we ran npm install.

I thought it was Docker bringing down our server. I removed our entire Docker setup and installation, but the issue wasn’t fixed.

After hours of debugging and a few restarts, the fix turned out to be just one line (not quite).

npm Resource Overload

We use a simple bash script for our deployment flow.

#!/bin/bash

set -e

REPO_SSH="git@github.com:user/repo.git"
APP_DIR="/home/xxx/project"
ENV_FILE="/home/xx/.env.prod"

echo "==> Pulling latest code..."

if [ -d "$APP_DIR" ]; then
    cd $APP_DIR
    git pull origin main
else
    git clone $REPO_SSH $APP_DIR
    cd $APP_DIR
fi

echo "==> Copying env..."
sudo cp $ENV_FILE "$APP_DIR/.env"

echo "==> Install dependencies and build output ..."

npm ci && npm run build

echo "==> Deploy via PM2..."

pm2 deploy ecosystem.config.js production

echo "✅ Deployment complete!"

We had a more complex setup using Docker, but it was removed as stated earlier.

We noticed a memory spike during dependency installation. RAM usage was above 80%.

Within minutes, our server was struggling to keep up with the demand.

API calls were unresponsive, and the nginx proxy was no longer responding to client requests.

Our entire VPS came to an instant halt.

npm had consumed nearly 2GB of RAM, and the process was so heavy that it forced us to reboot the machine.

We’re running a small VPS and scaling our resources using pm2 clusters

After trying every common fix, clearing the npm cache, and reinstalling Node.js. Nothing worked.

Each install would spike resource usage and hang until the server ran out of memory. It wasn’t a one-time glitch; it happened consistently.

Increasing memory wasn’t an option because we wanted to keep our server budget very tight. And I also wanted to fix this for Aura (IKYK).

Switching to pnpm

Out of desperation, and because the team had begun to notice the unusual downtime.

We decided to test pnpm, an alternative package manager for Node.js known for its efficient dependency management.

Installation was straightforward:

npm install -g pnpm

Then we replaced our existing install command:

pnpm install

And just like that, everything ran smoothly (Yeah, I wish).

We had to actually fix some dependency mismatches, downgrade some packages because of how pnpm handled symlinks, and also explicitly approve some dependency builds.

After all these, we replaced npm with pnpm in our build script.

Memory usage dropped drastically, the process completed faster, and the system stayed stable throughout.

I wondered why we didn’t use pnpm all this time (sigh).

How pnpm Solved It

The main reason pnpm outperforms npm in scenarios like this is how it manages dependencies.

npm duplicates every package into each project’s node_modules folder.

This leads to massive memory and disk overhead, especially for large projects or shared environments.

pnpm, on the other hand, uses a content-addressable store.

Packages are downloaded once and then symlinked into individual projects.

This dramatically reduces redundant data and improves performance across multiple builds.

In short, pnpm is more memory-efficient, faster, and better suited for large-scale projects or CI pipelines where npm often struggles.

Key Takeaway

We spent hours debugging what turned out to be an npm performance bottleneck. Switching to pnpm solved it instantly.

If your build or deployment process feels heavier than it should be.

Or if your servers keep running out of memory during installs, then it’s worth switching to pnpm.

It’s a drop-in replacement that can save you hours of debugging (and a few reboots).

If you like reading about programming in general or real-world experience in the engineering space, then consider subscribing to this Newsletter.

You can connect with me on X(F.K.A. Twitter).

Like. Comment. Share. Happy debugging.

PHP 8.4: Top Features and Improvements

Olushola — Thu, 02 Jan 2025 03:38:25 +0000

PHP 8.4 is finally here, bringing exciting changes that are set to transform the way developers work! With every new version, PHP keeps proving why it’s such an essential tool in today’s web development landscape.

Prerequisites

This article assumes you have basic knowledge of the PHP programming language.

Software I Use for PHP Development

Laravel Herd: used to manage my PHP versions and Nginx server.
PHPStorm: A great IDE with good IntelliSense and AI copilot.
Laragon: An easy-to-use local development environment that supports PHP and other technologies.

Asymmetric Property Visibility (version 2)🔓🔒

In PHP, the visibility of object properties has traditionally been symmetric. This means that the ⁣get and set operations for a property must share the same visibility—public, private, or protected—but cannot differ.

For instance, if a property is public, both reading and writing to it are public, with no way to allow one operation without the other.

In context, when you declare a property of a class public, it becomes mutable, allowing it to be read and modified from outside the class.

However, with the advent of asymmetric visibility, you can now define separate scopes for reading and writing properties.

This means a property can be readable in one context and writable in another, offering greater control over how properties are accessed and modified.

class Animal{
  public private(set) string $name;

  public setName(string $foo){
    $ths->name = $foo;
  }
}

$animal = new Animal();

echo $animal->name; // This will run correctly

We can have a property made public and the set property is made private. This means the property cannot be updated outside the class, making it immutable.

If you try to modify the $name property, you will get an error showing that you cannot modify the property because of the visibility scope.

Here are a few key points to note about asymmetric visibility:

Spaces are not allowed in the set-visibility declaration. private(set) is correct. private( set ) is not correct and will result in a parse error.
If a property is declared as public, the main visibility can be omitted. For instance, public private(set) and private(set) will behave identically, as the public visibility is implied.
Only typed properties are allowed to have separate visibility for set operations. This means you cannot apply asymmetric visibility to untyped properties in PHP.
The set visibility must be the same as or more restrictive than the get visibility. For example, public protected(set) and protected protected(set) are valid, but protected public(set) will result in a syntax error.

Find out more about asymmetry visibility, including other examples for your perusal.

Property hooks 🪝

Property hook is a great feature of PHP 8.4 that introduces a way for developers to add get and set directives directly to a variable without expressively creating methods to read and write to the variable.

Alternatively,__get and __set magic methods can be used, but this makes the code more verbose, can introduce errors, and breaks static analysis tools.

It is safe to say the design and syntax of property hooks is similar to that of Kotlin but is mostly influenced by C# and Swift programming languages.

In PHP 8.3, we can create a class with a property in its constructor, and it gives us the capability to read and write to the property.

class Car {
    public function __construct(public string $model) { }
}

The problem with this approach is that when we decide to write to the property, we either use the __set magic method or expressively create a method to mutate the variable, which might cause a break in the codebase down the line.

Property hooks allow developers to immediately create a set directive after creating the property.

class Car{
  public string $model{
    set (string $value) {
      if(strlen($value) === 0){
        throw new ValueError("Model name cannot be empty");
      }
      $this->model = $value;
    }
  }
}

Note that the value passed to the set directive must be the same type as the property, or else an error will be thrown.

You can pass another type to the set directive and convert it to the correct type before writing to the property, as seen below:

class Car{
  public string $year{
    set (string|number $value) {
      $year = intval($value);
      if($year < 2000){
        throw new ValueError("We only accept cars produced in year 2000 and above");
      }
      $this->year= $value;
    }
  }
}

The example above shows how we can safely receive a compound type variable from the set directive and parse it to the correct type defined by the property.

You can omit the argument passed to the set directive if it is the same as the property type. For example, the two methods below are valid and behave similarly.

// --------------------------METHOD 1----------------------------
public string $model{
    set (string $value) {
      if(strlen($value) === 0){
        throw new ValueError("Model name cannot be empty");
      }
      $this->model = $value;
    }
 }

// --------------------------METHOD 2----------------------------
public string $model{
    set {
      if(strlen($value) === 0){
        throw new ValueError("Model name cannot be empty");
      }
      $this->model = $value;
    }
  }

Note that the argument defaults to $value if it is omitted. This syntax is common in programming languages like Kotlin and C#.

Instantiating Classes Without Extra Parentheses

Before this feature, accessing members of a class in PHP involved adding extra parentheses around the class.

class Car {

  public function getName(){
    return "Toyota Camry";
  }
}

$carName = (new Car())->getName();

If you do not wrap the new Car() call in parentheses, you will get a parse error.

The new syntax allows us to access methods, properties, and constants without the need for extra parentheses.

class Car {
  const TYPE = "vehicle";

  public function getName(){
    return "Toyota Camry";
  }
}

$carName = new Car()->getName();
echo new Car()::TYPE;

For a full breakdown of this proposed change, check out the details in the RFC.

Introducing New Array Functions

New helper functions are coming to PHP 8.4.

Some of these functions already have their implementation in Laravel Arr or Collection helpers.

The array_find_key() Function

The array_find_key($array, $callback) function returns the key of the first element for which the $callback method returns true. If no element meets the condition, the function returns null.

function array_find_key($array, $callback) {
    foreach ($array as $key => $value) {
        if ($callback($value)) {
            return $key;
        }
    }
    return null;
}

// Example array
$numbers = [1, 2, 3, 4, 5];

// Callback to find the key of the first element greater than 3
$key = array_find_key($numbers, function($value) {
    return $value > 3;
});

echo $key;  // Output: 3 (the key of the value 4)

The array_find() Function

The array_find_key() function is designed to search through an array and return the key of the first element that satisfies a condition defined by a callback function.

Similarly to the array_find_key(), it returns null if no matching element is found.

// Sample array
$fruits = [
    'apple' => 5,
    'banana' => 12,
    'cherry' => 8,
    'date' => 15
];

// Find the key of the first fruit with quantity greater than 10
$key = array_find_key($fruits, function($value) {
    return $value > 10;
});

echo $key;  // Output: banana

If no fruit in the array had a quantity greater than 10, the function would return null.

The array_any() Function

The array_any() function determines if at least one element within an array fulfills a specific criterion specified by a provided evaluation function.

If at least one element meets the condition, the function returns true; otherwise, it returns false.

// Sample array
$numbers = [3, 8, 12, 5];

// Check if there is any number greater than 10
$result = array_any($numbers, function($value) {
    return $value > 10;
});

echo $result ? 'True' : 'False';  // Output: True

If no number in the array is greater than 10, the function will return false.

The array_all() Function

The array_all() function checks if every single item in an array passes a specific test. It applies a special rule (the callback function) to each item.

If all items pass the test according to the rule, then array_all() returns true.

<?php

$numbers = [2, 4, 6, 8, 10];

// Check if all numbers are even
$areAllEven = array_all($numbers, function ($number) {
    return $number % 2 === 0;
});

if ($areAllEven) {
    echo "All numbers are even.\n";
} else {
    echo "Not all numbers are even.\n";
}

?>

In this example, the array_all() function will iterate through the $numbers array and apply the callback function to each element. The callback checks if the number is divisible by 2 (i.e., even).

Since all numbers in the array are even, the array_all() function will return true, and the message "All numbers are even." will be displayed.

We’ve examined the key improvements introduced in PHP 8.4. These updates offer valuable enhancements for developers, including powerful new features and potential gains in efficiency.

To dive deeper into all the updates, including examples and detailed explanations, visit the official PHP 8.4.0 Release Announcement page.

Don’t forget to review the deprecations and backward compatibility changes to ensure a smooth transition to the latest version.

What’s Next? 🫡

If you enjoyed the article, don’t forget to share it with others.
I’d love to hear your thoughts—drop a comment below and let’s keep the conversation going. Cheers! 🎉

Follow me for more PHP, Node.js, TypeScript, and PHP articles! You can also find me on Twitter or LinkedIn.

Create a Figma Plugin in Under 300 Lines of Code

Olushola — Wed, 09 Nov 2022 06:39:51 +0000

Figma plugins are a set of programs or applications that adds a cherry on top of Figma functionalities. Figma plugins are usually created by the community of developers. It helps to improve product designers overall experience and enhance time management. You can interact fully with the Figma boards and also modify as much as you need to.
To find out more, check the Figma plugin documentation.

Why was this Figma plugin developed?

A few months back, My friend Sam who is also a professional product designer needed a way to search for layers and texts on Figma boards, then he reached out to me as a developer and friend to build one :).

Before this moment, I had no previous knowledge of how Figma plugins are developed, hence the meme below.

Challenges encountered

What programming stack is used to develop Figma plugins
What name should we give the Figma plugin?
How do we finally publish the Figma plugin?

Figma plugins are developed using HTML and JavaScript only. You have the option of using TypeScript(recommended) and also styling your HTML elements using CSS for a better and more intuitive user interface.

To get the most out of this article, you need a basic understanding of TypeScript and HTML

To start with, you need Node.js installed on your computer. You can test the installation by displaying the version of Node.js on your computer via the command line or terminal.

node --version

We will use NPM as our package manager. You can use yarn if you prefer. Do note that NPM comes with the Node.Js installation.

Install TypeScript on your machine
Install TypeScript globally so you can run it anywhere, from your favourite code editors to your terminal.

npm install -g typescript

Get the Figma desktop application
To test the plugin, you need to download the desktop application. Figma needs to parse your codebase and run it locally for you to test it out on your Figma boards.
Download the Figma desktop application on their website.

If you already have the desktop application, it is recommended to upgrade to the latest version

Create a new plugin

Next, Go to the menu, then navigate to Plugins > Development > New plugin as depicted below:

A modal titled "Create plugin" will pop open. Give it a name, then choose "Figma design" and click "Next". In the next screen, you will select "With UI & browser APIs" and then click "save as", this will prompt you to save the plugin anywhere on disk.

Please note that these steps might differ depending on your Figma desktop version.

Setup the project and run the sample plugin

Open the folder created using Visual Studio Code(recommended), you can decide to use your favourite code editor.

Install the Figma plugin typings package using NPM

npm install --save-dev @figma/plugin-typings

Next, start the typescript compilation using the terminal.

Run npm run build -- --watch

Make sure your terminal is in the directory of the Figma plugin

To test the plugin, switch to the Figma desktop app, go to the menu then navigate to Plugin > Development > "Name of your plugin"

Subsequently, you can navigate to Plugin > "Run Last Plugin" if you have run the plugin previously.

Once you run the plugin you should see a popup modal showing you the sample plugin and you can interact with it.

Let's Build FigFinder

Yes, we named the plugin FigFinder and I will explain how it was developed in this article.

FigFinder helps to search for a layer or text on the Figma board, it receives a search query and layer type via a form, and the form data is sent to the Figma API which in turn sends back a list of components that matches the search query. The list is displayed on a result page. When each item on the list is clicked, an event is sent to the Figma API which in turn navigates to where the component can be found on the Figma board.

This Plugin allows designers to easily search for a component by name, even if there are thousands of components on the Figma board.

Building the plugin interface

Open ui.html then empty the file, and create a new div and script element respectively. The div element will contain our plugin interface while the script element will contain the business logic.
Create two new div elements inside the div element and give them an id named "search-page" and "result-page" respectively.

<div>
  <div id="search-page" style="padding: 24px;">
  </div>
  <div id="result-page" class="hide" style="padding: 0px 24px">
  </div>
</div>

Give the div with an id of "result-page" a class of "hide", we will use this class to toggle the visibility of the search page and result page.

Next, paste the code below inside the "search-page" div element

<div style="margin-bottom: 24px;">
      <label for="search">Keyword</label>
      <div class="input-icons">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-1">
          <path
            d="M7.66659 14.0002C11.1644 14.0002 13.9999 11.1646 13.9999 7.66683C13.9999 4.16903 11.1644 1.3335 7.66659 1.3335C4.16878 1.3335 1.33325 4.16903 1.33325 7.66683C1.33325 11.1646 4.16878 14.0002 7.66659 14.0002Z"
            stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
          <path d="M14.6666 14.6668L13.3333 13.3335" stroke="#999999" stroke-width="1.5" stroke-linecap="round"
            stroke-linejoin="round" />
        </svg>
        <input id="search" type="text" class="text-field" placeholder="Search" />
      </div>
    </div>

    <div style="margin-bottom: 16px;">
      <label for="layer-type">Layer type</label>
      <select class="select-field" id="layer-type">
        <option value="text">Text</option>
        <option value="frame">Frame</option>
      </select>
    </div>

    <div class="info-box">
      <svg width="36" height="36" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M7.99992 14.6668C11.6666 14.6668 14.6666 11.6668 14.6666 8.00016C14.6666 4.3335 11.6666 1.3335 7.99992 1.3335C4.33325 1.3335 1.33325 4.3335 1.33325 8.00016C1.33325 11.6668 4.33325 14.6668 7.99992 14.6668Z"
          stroke="#474747" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M8 5.3335V8.66683" stroke="#474747" stroke-width="1.5" stroke-linecap="round"
          stroke-linejoin="round" />
        <path d="M7.99634 10.6665H8.00233" stroke="#292D32" stroke-width="2" stroke-linecap="round"
          stroke-linejoin="round" />
      </svg>

      <p>Input your keyword phrase into the input “Keyword” and select your layer type. Click on the search button to
        run plugin.👌</p>
    </div>

    <button type="button" class="search-btn" id="search-btn">Search</button>

We added the input field that obtains the user search query used to filter and find components from the Figma API
Dropdown input field that allows users to search for either a text or a layer from the Figma board.
Button element used to trigger a function to send the form data to the Figma API.

Next, we populate the div element of the "result-page"

<div class="back-button" id="back-button">
      <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.38016 3.95312L2.3335 7.99979L6.38016 12.0465" stroke="#7D7D7D" stroke-width="1.5"
          stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M13.6668 8H2.44678" stroke="#7D7D7D" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
          stroke-linejoin="round" />
      </svg>
      <p style="margin: 0;">Back to search</p>
    </div>
    <div id="empty-result" style="padding: 48px 24px; text-align:center;" class="hide">
      <svg width="110" height="102" viewBox="0 0 110 102" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="49.6812" cy="49.6812" r="49.6812" fill="#F1F1F1" />
        <circle cx="49.275" cy="49.7657" r="28.7081" fill="#F1F1F1" stroke="#C4C4C4" stroke-width="2" />
        <circle cx="49.2748" cy="49.766" r="20.2201" fill="#FFFEFF" stroke="#C4C4C4" stroke-width="2" />
        <path
          d="M49.2749 34.1653C49.2749 33.8537 49.0221 33.6 48.7106 33.6109C44.8118 33.747 41.0862 35.2895 38.2287 37.964C35.3712 40.6385 33.5858 44.254 33.1923 48.1353C33.1609 48.4453 33.3973 48.7143 33.7082 48.7349C34.0191 48.7555 34.2868 48.5199 34.319 48.21C34.693 44.6145 36.3514 41.2667 38.9998 38.7879C41.6482 36.3091 45.0983 34.8756 48.7107 34.7401C49.0221 34.7284 49.2749 34.4769 49.2749 34.1653Z"
          fill="#C4C4C4" />
        <rect x="71.4574" y="81.2695" width="10.3062" height="29.6873" rx="5.15309"
          transform="rotate(-45 71.4574 81.2695)" fill="#F1F1F1" stroke="#C4C4C4" stroke-width="2" />
        <rect x="82.1211" y="83.6025" width="1.34862" height="11.3078" rx="0.674309"
          transform="rotate(-45 82.1211 83.6025)" fill="white" />
        <rect x="70.9087" y="74.4121" width="1.38436" height="5.53746" transform="rotate(-45 70.9087 74.4121)"
          fill="#C4C4C4" />
        <rect x="85.5972" y="46.2798" width="13.8436" height="1.38436" rx="0.692182" fill="#C4C4C4" />
        <rect y="57.7319" width="13.8436" height="1.38436" rx="0.692182" fill="#C4C4C4" />
        <rect x="102.209" y="46.2798" width="6.92182" height="1.38436" rx="0.692182" fill="#C4C4C4" />
        <rect x="89.0581" y="51.3589" width="6.92182" height="1.38436" rx="0.692182" fill="#C4C4C4" />
        <rect x="3.46094" y="62.811" width="6.92182" height="1.38436" rx="0.692182" fill="#C4C4C4" />
      </svg>
      <p style="color: #7D7D7D; margin:16px;">
        We could not find any result that
        matches the keyword “search”
      </p>
    </div>
    <div id="result" class="hide">

    </div>

The result section has a placeholder for displaying a simple message when no result is available.
It also has a div element with an id of "result" which is empty by default and will get populated when the Figma API returns a list of available search results.

Next, we have to style the interface. Inside the ui.html but outside the primary div element, create a style element which will enclose all our styles.

<style>
  * {
    font-family: Arial, Helvetica, sans-serif;
  }

  #result div {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 12px;
    background: #FAFAFA;
    border-radius: 4px;
    padding: 12px 16px;
    height: 20px;
  }

  #result div.active {
    background-color: #D6D8DB;
  }

  #result div p {
    margin: 2px 12px;
  }

  .hide {
    display: none;
  }
  .text-field {
    width: 100%;
    border-radius: 6px;
    padding: 16px 12px 16px 32px;
    border: 0.5 solid grey;
  }
  .select-field {
    width: 100%;
    border-radius: 6px;
    padding: 16px;
    margin: 10px 0px;
    border: 0.5 solid grey;
  }

  .input-icons {
    width: 100%;
    margin: 10px 0px;
  }

  .input-icons svg {
    position: absolute;
  }

  .input-icons svg {
    position: absolute;
  }

  .icon-1 {
    padding: 16px 0px 0px 12px;
  }

  .info-box {
    margin-top: 24px;
    margin-bottom: 28px;
    padding: 8px 16px 8px 16px;
    background-color: #F5F5F5;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 4px;
  }

  .back-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    width: fit-content;
    column-gap: 12px;
    margin: 20px 0 0 0;
  }

  .back-button p {
    color: #7D7D7D;
    margin-left: 12px;
  }

  .info-box p {
    font-size: 13px;
    margin-left: 16px;
    color: #555555;
  }

  .search-btn {
    height: 52px;
    background-color: #1C77C3;
    width: 100%;
    border-radius: 4px;
    font-size: 16px;
    border: none;
    color: white;
  }
</style>

We styled the search page, buttons, and result page elements.

The styling gives the Figma plugin its overall blazing look 🔥🔥

The interface of this Figma plugin was actually designed on Figma by Sam.

Run the Figma plugin and see how it looks. It should look like what we have below.

Writing the plugin functionality

Next, we open the code.ts file. We will write all the business logic for the Figma plugin in this file.

We use the Figma API to create an interface that scaffolds how the elements will be displayed figma.showUI(__html__, { title: 'FigFinder', height: 460, width: 490 });, next we create a listener that gets a message from the ui.html then we run a set of instructions based on the message received.

figma.showUI(__html__, { title: 'FigFinder', height: 460, width: 490 });

figma.ui.onmessage = msg => {

};

Inside the onmessage listener, we create two conditional statements, one to process the search query and one to search for the selected element on the Figma board.

  if (msg.type === 'process-search') {

    const { searchQuery, layerType } = msg.query;
    if (layerType == 'all') {
      console.log(searchQuery)

      const node = figma.currentPage.findAll(node =>
        node.name.toLowerCase().includes(searchQuery.toLowerCase()));
      console.log(node.map(n => n.name))
      const result = node.map(n => n.name);
      figma.ui.postMessage({ count: result.length, type: 'all', result })
    } else if (layerType == 'text') {
      console.log(searchQuery)
      const node = figma.currentPage.findAll(node => node.type === "TEXT"
        &&
        node.characters.toLowerCase().includes(searchQuery.toLowerCase())) as TextNode[];
      console.log(node.map(n => n.characters))
      const result = node.map(n => n.characters);
      figma.ui.postMessage({ count: result.length, type: 'text', result })
    } else if (layerType == 'frame') {
      console.log(searchQuery)
      const node = figma.currentPage.findAll(node => node.type === "FRAME"
        &&
        node.name.toLowerCase().includes(searchQuery.toLowerCase())) as TextNode[];
      console.log(node.map(n => n.name))
      const result = node.map(n => n.name);
      figma.ui.postMessage({ count: result.length, type: 'frame', result })
    } else {
      figma.ui.postMessage({ count: 0, type: layerType, result: [] })
    }
  } else if (msg.type === 'search-item') {
    const { searchQuery, layerType } = msg.query;
    let nodesFound ;
    if (layerType == 'text') {
      nodesFound = figma.currentPage.findChildren((node) => node.type === 'TEXT' && node.characters.toLowerCase().includes(searchQuery.toLowerCase()));
    }
    if (layerType == 'frame') {
      nodesFound = figma.currentPage.findChildren((node) => node.type === 'FRAME' && node.name.toLowerCase().includes(searchQuery.toLowerCase()));
    }

    if (nodesFound) {
    figma.currentPage.selection = nodesFound;
    figma.viewport.scrollAndZoomIntoView(nodesFound);
    }

  } else {
    figma.closePlugin('Command not available');
  }

We used figma.currentPage to interact with the current Figma board while figma.postMessage sends an event to ui.html.

Make everything work together

Next, we update the script element inside ui.html to listen to the message coming from code.ts. Inside this listener, we process the messages received and then display a list of elements based on the information.

 var layer_type = '';

  onmessage = (event) => {
    const pluginMessageResult = event.data.pluginMessage;
    if (pluginMessageResult.count && pluginMessageResult.count > 0) {
      const resultDiv = document.getElementById('result');
      resultDiv.classList.remove('hide');
      layer_type = pluginMessageResult.type;
      resultDiv.innerHTML = `<p>Search results: ${pluginMessageResult.count} item(s)</p>`
      for (let index = 0; index < pluginMessageResult.count; index++) {
        const element = pluginMessageResult.result[index];
        const parentDivNode = document.createElement("div");


        const node = document.createElement("p");
        const textnode = document.createTextNode(element);
        node.appendChild(textnode);

        parentDivNode.setAttribute('content', element)
        parentDivNode.onclick = handleClick;

        parentDivNode.appendChild(node)

        resultDiv.appendChild(parentDivNode)

        node.insertAdjacentHTML("beforebegin", getIcon());

      }
    } else {
      document.getElementById('empty-result').classList.remove('hide');
    }
    console.log("got this from the plugin code", event.data.pluginMessage)
  }

  const textSvg = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.78003 4.77986V3.56652C1.78003 2.79986 2.40003 2.18652 3.16003 2.18652H12.84C13.6067 2.18652 14.22 2.80652 14.22 3.56652V4.77986" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 13.8136V2.74023" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.37329 13.8135H10.6266" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
`;

  const frameSvg = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="4.5" y1="1.3335" x2="4.5" y2="14.6668" stroke="black"/>
<line x1="14.6667" y1="5.1665" x2="1.33341" y2="5.1665" stroke="black"/>
<line x1="14.6667" y1="11.1665" x2="1.33341" y2="11.1665" stroke="black"/>
<line x1="11.8333" y1="1.3335" x2="11.8333" y2="14.6668" stroke="black"/>
</svg>
`;

  function getIcon() {
    if (layer_type == 'text') {
      return textSvg;
    }
    return frameSvg;
  }



  function handleClick() {
    const query = { searchQuery: this.getAttribute('content'), layerType: layer_type };
    parent.postMessage({ pluginMessage: { type: 'search-item', query } }, '*')

    const resultDiv = document.getElementById('result');
    const divElement = resultDiv.querySelector('div.active');
    if (divElement) {
      divElement.classList.remove('active');
    }
    this.classList.add('active')
  }

The handleClick function sends an event to code.ts so it can search for the selected element on the Figma board.

Next, we handle the search logic, which will send an event to code.ts to get elements that match the search query based on the user input.

We add a click event on the button with the id "search-btn" then parent.postMessage is used to send the form data to the code.ts. This data sent will be processed inside the onmessage listener in code.ts

 document.getElementById('search-btn').onclick = (event) => {

    const inputFieldText = document.getElementById('search').value;
    const selectFieldText = document.getElementById('layer-type').value;
    console.log(inputFieldText, selectFieldText)

    const query = { searchQuery: inputFieldText, layerType: selectFieldText };
    parent.postMessage({ pluginMessage: { type: 'process-search', query } }, '*')

    document.getElementById('search-page').classList.add('hide');
    document.getElementById('result-page').classList.remove('hide');
  }

Finally, we add the logic to close the result page when the user returns to the search page.

document.getElementById('back-button').onclick = () => {
    document.getElementById('search-page').classList.remove('hide');
    document.getElementById('result').innerHTML = '';
    document.getElementById('result-page').classList.add('hide');
    document.getElementById('empty-result').classList.add('hide');
  }

Test the Figma plugin

Run the Figma plugin and interact with it. You can type in the input field to search for a frame or text. Then, finally, click the search button. You will get a list of components on the next page. You can click on each item of the result that sends an event to the Figma API to navigate to the particular Figma component on the Figma board.

If the response returns an empty list, the Figma plugin alerts the user that no results are available.

The Figma plugin was built with little over 300 lines of code when combining the ui.html and code.ts files.

What I learned from this project

I put my critical thinking to the test as there were little or no resources on building Figma plugins except the documentation and the Figma community.
I was able to refresh my knowledge of vanilla JavaScript.
I was able to build a solid foundation for creating complex Figma plugins in the future.

Current limitations for developing a Figma plugin

Creating Figma plugins is exciting but has a few drawbacks that make it less fun. I discussed some of them below:

Using external assets does not seem to work, so external CSS, images, and JavaScript are not allowed at the time of writing this article
Using JavaScript frameworks for building Figma plugins is impossible currently, so you have to be well-equipped to write Vanilla JavaScript. You can use CDN for importing libraries like jQuery though I have not personally tested it.
Lastly, you are confined to the project structure and cannot explore or set up your preferred architecture.

If you decide to build a Figma plugin and publish it, please refer to their official website, where they explained the steps to get the Figma plugin deployed and used by the Figma creators' community.

Conclusion

This article explained what a Figma plugin is and its usage. I also explained how I built FigFinder(A Figma plugin that finds components on the Figma board). I cannot wait to see what you will develop with it. You can also reach out to me on Twitter.
The complete codebase of this Figma plugin is available on GitHub. Please do well to give a GitHub star to the repository.

If you found this helpful, leave a reaction ❤️

Getting Started with ES6 JavaScript for Node.js Development Using Express

Olushola — Fri, 31 Dec 2021 12:29:49 +0000

Have you ever been hooked on ES6 JavaScript for frontend development and wished you could use it for backend Node.js projects too? This article will guide you through setting up a Babel transpiler to bridge the gap between modern JavaScript and older Node.js environments.

While TypeScript offers many benefits, JavaScript remains a valid choice for many developers.

Prerequisites

Here are some requirements you need to follow in this tutorial:

Node.js v14 or above installed on your system.
Code editor or IDE: I recommend VSCode.
Basic knowledge of JavaScript and Express.js.
API client for testing our implementation: I recommend Insomnia.

What is ES6?

ES6 refers to version 6 of the ECMAScript programming language. ECMAScript is the standardized name for JavaScript, and version 6 is the next version after version 5, released in 2011.

It significantly enhances the JavaScript language and adds many more features to simplify large-scale software development.
Find out more here.

What is Babel?

Babel is a toolchain mainly used to convert ECMAScript 2015+ (ES6+) code into a backwards-compatible version of JavaScript in current and older browsers or environments.

This also means you can use Babel to convert our ES6 codes for backward compatibility when writing Node.js applications.

A normal JavaScript code snippet for importing express will look like this:

var express = require('express')

When using ES6 syntax, all you need to do is just import your package like this:

import express from 'express'

Building a Todo API with Node.js, Express, and ES6 🤸

We will use NPM(comes installed with Node.js) as our package manager, and you can use yarn if you prefer.

Project Setup

mkdir todo-api
cd todo-api
npm init -y

This helps to initialize a new node project and install the necessary packages for our application.

To install Babel and its required dependencies, open your terminal and execute the following commands.

Babel is the tool we'll use to convert our modern ES6 code into older ES5 code, which is compatible with older Node.js versions.

npm i @babel/cli @babel/core @babel/node @babel/preset-env --save-dev

npm i @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread --save-dev

npm i rimraf nodemon --save-dev

Once you install all the packages, open the folder using your preferred editor if you have not done that earlier.

We will edit the package.json file to continue the setup for running our application and build the code for deployment on any hosting platform.
We will update the script's section of our package.json file to complete the setup.

Here is what it should look like 👇

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rimraf dist && babel src --out-dir dist  --copy-files",
    "start": "node dist/app.js",
    "start:dev": "nodemon --exec babel-node src/app.js"
  },

Here's a breakdown of the `scripts` property in the `package.json` file:

The scripts property in a package.json file allows you to define custom commands that can be executed directly from the command line.

This simplifies the process of running common tasks like starting a development server, building the project, running tests, or linting code.

build: This command creates our ES6 codes using Babel and dumps the output inside the dist directory (automatically deleted and recreated on every build). The dist directory contains the duplicate files and folders in our base directory. The only difference is that it includes codes transpiled from ES6 to ES5.
start: This command starts our node.js application after converting it to ES5 codes inside the dist directory.
start:dev: This command starts our application using nodemon (it helps to restart our server automatically when any JavaScript file changes) and converts all ES6 codes in memory to ES5 using babel-node. You do not want to do this in production. That is why we have the build command for more optimized performance.

Next, we create a .babelrc file in the root directory of our application; this file is used to add configurations for our Babel package in order to work correctly.
Copy the code below into the file.

{
  "presets": [
    ["@babel/env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

Follow this link to learn more about using Babel.

Install Express.js:

npm install express cors

Express: A popular web framework for Node.js.
Cors: Middleware for enabling CORS (Cross-Origin Resource Sharing).

Create the `src` folder and required files:

mkdir src
touch app.js
touch store.js

Run each line in your terminal.

Finally, your project structure should look like this:

todo-api/
├── src/
│   ├── app.js         # API entry point
│   ├── store.js         # In-memory data store
├── .babelrc             # Babel configuration
├── package.json         # Project metadata and dependencies
└── README.md            # Project documentation

Updating the `store.js` file

We are using in-memory storage to store our data because it is ideal for development and testing.

let todos = [];
let idCounter = 1;

export const getTodos = () => todos;

export const addTodo = (title) => {
  const todo = { id: idCounter++, title, completed: false };
  todos.push(todo);
  return todo;
};

export const updateTodo = (id, updates) => {
  const todo = todos.find((t) => t.id === id);
  if (!todo) return null;

  Object.assign(todo, updates);
  return todo;
};

export const deleteTodo = (id) => {
  const index = todos.findIndex((t) => t.id === id);
  if (index !== -1) {
    todos.splice(index, 1);
    return true;
  }
  return false;
};

getTodos: Retrieve all to-do items as an array.
addTodo: Create a new to-do item and append it to the to-do list.
updateTodo: Update an existing to-do item by ID.
deleteTodo: Remove a record from the to-do items by ID.

Updating the app.js file


import express from 'express';
import { getTodos, addTodo, updateTodo, deleteTodo } from './store.js';

const app = express();

app.use(json())

const PORT = process.env.PORT || 3000;

// Routes
app.get('/todos', (req, res) => {
  res.json(getTodos());
});

app.post('/todos', (req, res) => {
  const { title } = req.body;
  if (!title) {
    return res.status(400).json({ error: 'Title is required' });
  }
  const todo = addTodo(title);
  res.status(201).json(todo);
});

app.put('/todos/:id', (req, res) => {
  const id = parseInt(req.params.id, 10);
  const updates = req.body;

  const updatedTodo = updateTodo(id, updates);
  if (!updatedTodo) {
    return res.status(404).json({ error: 'Todo not found' });
  }
  res.json(updatedTodo);
});

app.delete('/todos/:id', (req, res) => {
  const id = parseInt(req.params.id, 10);

  const success = deleteTodo(id);
  if (!success) {
    return res.status(404).json({ error: 'Todo not found' });
  }
  res.status(204).end();
});

// Start server
app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

Running the Server

npm run start:dev

You should have something similar to this.

Testing our implementation on Insomnia

The base URL would be http://localhost:3000 based on my project configuration.

Create a New Todo

Get All Todos

Update a Todo

Delete a Todo

If you encounter any problems, please ensure you've followed all the steps accurately. If you're still facing issues, feel free to comment below, and I'll be happy to assist.

You can expand this project using any architecture or web framework you prefer, like Fastify. Adding a database is also an option. It's entirely up to you.

Key Benefits of ES6 Features 🎯

Arrow Functions: Concise syntax for defining functions.
Destructuring: Used to extract values from objects and arrays.
Template Literals: Used for creating strings with embedded expressions.
Async/Await: Used for asynchronous operations, making code more readable.

Thanks for coming this far. 🫡

Please share your ES6 experience with me, and let’s engage in the comment section.
Share this article with those you believe would benefit from my experience. Cheers 🎉.

You can find the codebase for this article on GitHub.

DEV Community: Olushola

How npm Crashed Our VPS (and What Finally Fixed It)

npm Resource Overload

Switching to pnpm

How pnpm Solved It

Key Takeaway

PHP 8.4: Top Features and Improvements

Prerequisites

Software I Use for PHP Development

Asymmetric Property Visibility (version 2)🔓🔒

Property hooks 🪝

Instantiating Classes Without Extra Parentheses

Introducing New Array Functions

What’s Next? 🫡

Create a Figma Plugin in Under 300 Lines of Code

Why was this Figma plugin developed?

Challenges encountered

Create a new plugin

Setup the project and run the sample plugin

Let's Build FigFinder

Building the plugin interface

Writing the plugin functionality

Make everything work together

Test the Figma plugin

What I learned from this project

Current limitations for developing a Figma plugin

Conclusion

Getting Started with ES6 JavaScript for Node.js Development Using Express

Prerequisites

What is ES6?

What is Babel?

Building a Todo API with Node.js, Express, and ES6 🤸

Project Setup

Here's a breakdown of the scripts property in the package.json file:

Install Express.js:

Create the src folder and required files:

Updating the store.js file

Updating the app.js file

Running the Server

Testing our implementation on Insomnia

Create a New Todo

Get All Todos

Update a Todo

Delete a Todo

Key Benefits of ES6 Features 🎯

Thanks for coming this far. 🫡

Follow and connect with me.

Here's a breakdown of the `scripts` property in the `package.json` file:

Create the `src` folder and required files:

Updating the `store.js` file