DEV Community: Tyler Steck

React Native Storybook Toggle

Tyler Steck — Thu, 31 Jul 2025 16:52:42 +0000

🚀 Development Toggle for React Native: Seamless App/Storybook Switching in `DEV` Mode

Testing UI components in isolation with Storybook is awesome, but context switching can be a pain. Here’s how I implemented a floating toggle button that lets you instantly switch between your main app and Storybook—only in development mode—for maximum developer efficiency.

✨ What’s New?

1. Floating Toggle Button

Position: Top-left, with safe area insets (handles iOS notches/Dynamic Island)
Design: Blue circular button with outline Ionicons
Visibility: Only appears when __DEV__ is true
Icons:
- library-outline (shows when in main app — tap to switch to Storybook)
- apps-outline (shows when in Storybook — tap to switch back)

2. Dynamic State Management

showStorybook boolean in RootLayout controls which view is active
Tapping the button toggles Storybook/App
State isn’t persisted (resets on reload)—intentional for dev clarity

3. Safe Area Integration

Uses useSafeAreaInsets() for positioning below the notch/Dynamic Island
Works cross-platform (iOS & Android)

🧑‍💻 Code Changes

`app/_layout.tsx`

DevToggle Component

function DevToggle({ isStorybook, onToggle }: { isStorybook: boolean; onToggle: () => void }) {
  const insets = useSafeAreaInsets();

  if (!__DEV__) return null;

  return (
    <TouchableOpacity
      onPress={onToggle}
      style={{
        position: 'absolute',
        top: insets.top,
        left: 0,
        zIndex: 1000,
        backgroundColor: '#1976d2',
        borderRadius: 20,
        width: 40,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5,
      }}
    >
      <Ionicons 
        name={isStorybook ? "apps-outline" : "library-outline"} 
        size={20} 
        color="white" 
      />
    </TouchableOpacity>
  );
}

RootLayout With Toggle

export default function RootLayout() {
  const [showStorybook, setShowStorybook] = useState(false);

  if (showStorybook && StorybookUIRoot) {
    return (
      <>
        <StorybookUIRoot />
        <DevToggle isStorybook={true} onToggle={() => setShowStorybook(false)} />
      </>
    );
  }

  return (
    <SafeAreaProvider>
      {/* ... main app content ... */}
      <DevToggle isStorybook={false} onToggle={() => setShowStorybook(true)} />
    </SafeAreaProvider>
  );
}

🛠️ Usage Guide

Enable Development Mode
- Toggle only appears if __DEV__ is true when running Expo with their constants https://docs.expo.dev/versions/latest/sdk/constants.
Switch to Storybook
- Tap the blue library-outline button in the top-left.
- App instantly switches to Storybook UI.
Switch Back to App
- In Storybook, tap the blue apps-outline button to return.
Production Safety
- Toggle is auto-hidden in production—no accidental exposure, zero overhead.

🎯 Benefits

Developer Experience

Instant Access: No code edits or reloads to open Storybook
Context Jumping: Compare component behavior in isolation vs. app
Zero Friction: Smooth, fast toggle

Testing Efficiency

Component Isolation: Use Storybook for focused testing
Integration: Test in the real app context
Visual Comparison: Flip back and forth for validation

Team Collaboration

Easy Design Review: Stakeholders can quickly access component previews
QA: Testers can validate both isolated and integrated components
Always-on Docs: Storybook always one tap away

🧩 Technical Details

Z-Index: 1000 (always on top)
Safe Area Aware: Respects iOS notches/Dynamic Island
Shadow: Subtle, for visibility
Conditional: Only in dev, never in prod
Touch Target: 40x40 for accessibility
Contrast: Blue button, white icon

✅ Ready to Switch!

The floating toggle is ready for dev builds and makes testing a breeze.

Questions? Ideas?

Drop a comment! Would love to hear how others handle Storybook/app toggling in React Native.

Happy coding! 🚀

Harnessing the Power of Figma: A Journey from HTML to High-Fidelity Designs

Tyler Steck — Sat, 13 Jan 2024 16:50:31 +0000

Introduction

Figma has revolutionized the world of digital design, offering unparalleled flexibility and collaboration. As an engineering team lead with limited design experience, I was tasked with a unique challenge: transforming an existing product design into a Figma project for my team to work on. This article highlights my journey, focusing on a remarkable tool: html.to.design, and briefly touches on other notable tools enhancing the Figma ecosystem.

The Role of html.to.design

My journey began with a common predicament - having a product that existed only outside of Figma. The task at hand was daunting: how to transfer this design into Figma efficiently, without extensive design experience. This is where html.to.design stepped in as a game-changer.

html.to.design is more than just a tool; it's a bridge between the web and Figma. It allowed me to capture our existing website and seamlessly transform it into editable Figma components. The process was astonishingly straightforward. By simply inputting our website's URL, html.to.design generated Figma components, assets, and styling. It was like watching a skilled translator at work, turning lines of HTML into a beautiful, workable Figma design.

The impact was immediate. Not only was I able to provide my engineering team with a solid design foundation in Figma, but it also empowered them to work autonomously, iterating over the design with ease.

Before and After Screenshots

BEFORE:

AFTER:

FINAL:

As seen in the screenshots, the transformation is not just about replication; it's about enhancement and adaptability. The new design in Figma is not only a faithful representation of the original but also offers the flexibility to be modified and improved upon.

Other Mentionable Tools

While html.to.design was the star of my journey, other tools deserve mention for their contribution to the Figma ecosystem:

data.to.design: Transforms data sets into visual components, ideal for data-driven design projects.
story.to.design: A great tool for converting user stories into design elements, bridging the gap between narrative and visual design.
pdf.to.design: Simplifies the process of turning PDF files into editable Figma components, perfect for incorporating existing documentation into the design process.
code.to.design: Facilitates the conversion of code snippets into design elements, a boon for developers venturing into design.

Each of these tools offers a unique way to streamline the design process, making Figma more accessible to professionals from various backgrounds.

Conclusion

The journey from a non-designer to creating a fully functional Figma project was made possible by these innovative tools, with html.to.design leading the charge. They collectively enhance the Figma experience, making it more inclusive and efficient.

Whether you're a seasoned designer or an engineer like me, these tools open new possibilities, allowing us to focus on creativity and functionality rather than getting bogged down in the intricacies of design translation. I will continue to learn more about creating shared components in the future. But glad to know that my team has a high quality design to move forward into implementation.

Call to Action

I invite you to share your experiences with these tools or suggest others that have transformed your approach to design in Figma. For those interested in exploring these tools, I've included links below for further exploration. Happy designing!

Figma Plugin Links

html.to.design
data.to.design
story.to.design
pdf.to.design
code.to.design

Updating to AWS SDK V3 for SQS messaging in NodeJS Typescript

Tyler Steck — Fri, 03 Mar 2023 05:59:20 +0000

As a Node.js developer, you might have come across scenarios where you need to work with different AWS services, such as Amazon SQS. In this article, we will explore how to load credentials from the environment variables, retrieve a message from SQS, update its visibility, and delete the message when the work is completed using TypeScript and the client-sqs library.

Prerequisites

Before proceeding with this article, you need to have the following installed on your system:

Node.js and NPM installed.
An AWS account with access to Amazon SQS.
The AWS CLI configured with your credentials.

Setting up the Environment

To begin, let's create a new Node.js project and install the required dependencies. Open your terminal and follow these steps:

Create a new directory and navigate into it.
```
mkdir sqs-example
cd sqs-example
```
Initialize a new Node.js project using NPM.
```
npm init -y
```
Install the aws-sdk and client-sqs packages as dependencies.
```
npm install aws-sdk client-sqs
```

Retrieving a Message from SQS

In this section, we will create a function to retrieve a message from SQS.

Create a new file named sqs.ts in the project's root directory.

Import the necessary modules and initialize a new SQS client.

import { fromEnv } from "@aws-sdk/credential-provider-env";
import { SQSClient, ReceiveMessageCommand } from "@aws-sdk/client-sqs";

const credentials = fromEnv();
const sqsClient = new SQSClient({ credentials });

Define a new function named getMessage that accepts a queue URL and returns a message.

async function getMessage(queueUrl: string): Promise<string> {
  const command = new ReceiveMessageCommand({
    QueueUrl: queueUrl,
    MaxNumberOfMessages: 1,
  });

  const response = await sqsClient.send(command);

  if (response.Messages?.length) {
    const message = response.Messages[0];
    return message.Body!;
  }

  throw new Error("No messages found in the queue");
}

Export the getMessage function.
```
export { getMessage };
```

Updating Message Visibility

In this section, we will create a function to update the visibility of a message.

Add a new function named updateMessageVisibility to the sqs.ts file.

```typescript
import { ChangeMessageVisibilityCommand } from "@aws-sdk/client-sqs";

async function updateMessageVisibility(
  queueUrl: string,
  receiptHandle: string,
  visibilityTimeout: number
): Promise<void> {
  const command = new ChangeMessageVisibilityCommand({
    QueueUrl: queueUrl,
    ReceiptHandle: receiptHandle,
    VisibilityTimeout: visibilityTimeout,
  });

  await sqsClient.send(command);     
}
```

Deleting a Message

In this section, we will create a function to delete a message from SQS.

Add a new function named deleteMessage to the sqs.ts file.

import { DeleteMessageCommand } from "@aws-sdk/client-sqs";

    async function deleteMessage(queueUrl: string, receiptHandle
): Promise {  
  const command = new DeleteMessageCommand({
    QueueUrl: queueUrl,
    ReceiptHandle: receiptHandle,
  });

  await sqsClient.send(command);
}

Putting it all Together

In this section, we will put together all the functions we created and create a new file to run our code.

Create a new file named index.ts in the project's root directory.

Import the getMessage, updateMessageVisibility, and deleteMessage functions from the sqs.ts file.

import { getMessage } from "./sqs";
import { updateMessageVisibility } from "./sqs";
import { deleteMessage } from "./sqs";

Define the queue URL and visibility timeout.

const queueUrl = "https://sqs.<region>.amazonaws.com/<account-id>/<queue-name>";
const visibilityTimeout = 60;

Call the getMessage function to retrieve a message from the queue.
```
const message = await getMessage(queueUrl);
```

Process the message and call the updateMessageVisibility function to extend its visibility timeout.

// TODO: DO THE WORK
await updateMessageVisibility(queueUrl, receiptHandle, visibilityTimeout);

Delete the message when the work is completed.

await deleteMessage(queueUrl, receiptHandle);

Running the Code

To run the code, execute the following command in your terminal:

ts-node index.ts

This will execute the index.ts file and retrieve a message from the queue. You can replace the TODO comment with your own code to process the message.

Conclusion

In this article, we explored how to load credentials from the environment variables, retrieve a message from SQS, update its visibility, and delete the message when the work is completed using TypeScript and the client-sqs library. By following the steps outlined in this article, you should now be able to work with SQS in your Node.js applications with ease.

Remember to replace the placeholders in the queueUrl variable with your own values. Additionally, you can customize the visibilityTimeout variable to suit your needs.

We hope that this article has helped you learn how to work with SQS in your Node.js applications using TypeScript. Remember that this is just a starting point, and there is a lot more to learn about SQS and AWS services in general. If you want to learn more, we recommend checking out the official AWS documentation, as well as other resources available online. Happy coding!

BONUS TESTS

We will be using the Jest testing framework to write our tests. If you haven't installed Jest yet, you can install it using the following command:

npm install --save-dev jest

After installing Jest, create a new file named sqs.test.ts in the same directory as the sqs.ts file. This file will contain our unit tests.

Testing the getMessage Function

First, let's write a unit test for the getMessage function. The purpose of this function is to retrieve a message from SQS.

Here's an example test:

import { getMessage } from "./sqs";
import { ReceiveMessageCommand } from "@aws-sdk/client-sqs";

jest.mock("@aws-sdk/client-sqs", () => ({
  SQSClient: jest.fn(() => ({
    send: jest.fn(),
  })),
  ReceiveMessageCommand: jest.fn(),
}));

describe("getMessage", () => {
  it("should retrieve a message from SQS", async () => {
    // Arrange
    const queueUrl = "https://sqs.<region>.amazonaws.com/<account-id>/<queue-name>";
    const messageBody = "test message";
    const receiptHandle = "test-receipt-handle";
    const command = new ReceiveMessageCommand({
      QueueUrl: queueUrl,
      MaxNumberOfMessages: 1,
      VisibilityTimeout: 0,
    });
    const expectedMessage = {
      Body: messageBody,
      ReceiptHandle: receiptHandle,
    };

    // Mock the SQS client to return the expected message
    const mockSend = jest.fn().mockResolvedValueOnce({
      Messages: [expectedMessage],
    });
    const SQSClient = require("@aws-sdk/client-sqs").SQSClient;
    SQSClient.prototype.send = mockSend;
    const ReceiveMessageCommand = require("@aws-sdk/client-sqs").ReceiveMessageCommand;
    ReceiveMessageCommand.mockReturnValueOnce(command);

    // Act
    const message = await getMessage(queueUrl);

    // Assert
    expect(mockSend).toHaveBeenCalledTimes(1);
    expect(ReceiveMessageCommand).toHaveBeenCalledTimes(1);
    expect(ReceiveMessageCommand).toHaveBeenCalledWith({
      QueueUrl: queueUrl,
      MaxNumberOfMessages: 1,
      VisibilityTimeout: 0,
    });
    expect(message).toEqual(expectedMessage);
  });
});

In this test, we are mocking the client-sqs library to return a test message. We then call the getMessage function and assert that it retrieves the expected message from SQS.

Testing the updateMessageVisibility Function

Next, let's write a unit test for the updateMessageVisibility function. The purpose of this function is to update the visibility of a message in SQS.

Here's an example test:

import { updateMessageVisibility } from "./sqs";
import { ChangeMessageVisibilityCommand } from "@aws-sdk/client-sqs";

jest.mock("@aws-sdk/client-sqs", () => ({
  SQSClient: jest.fn(() => ({
    send: jest.fn(),
  })),
  ChangeMessageVisibilityCommand: jest.fn(),
}));

describe("updateMessageVisibility", () => {
  it("should update the visibility of a message in SQS", async () => {
    // Arrange
    const queueUrl = "https://sqs.<region>.amazonaws.com/<account-id>/<queue-name>";
    const receiptHandle = "test-receipt-handle";
    const visibilityTimeout = 60;
    const command = new ChangeMessageVisibilityCommand({
      QueueUrl: queueUrl,
      ReceiptHandle: receiptHandle,
      VisibilityTimeout: visibilityTimeout,
    });

    // Mock the SQS client to return a successful response
    const mockSend = jest.fn().mockResolvedValueOnce({});
    const SQSClient = require("@aws-sdk/client-sqs").SQSClient;
    SQSClient.prototype.send = mockSend;
    const ChangeMessageVisibilityCommand = require("@aws-sdk/client-sqs").ChangeMessageVisibilityCommand;
    ChangeMessageVisibilityCommand.mockReturnValueOnce(command);

    // Act
    await updateMessageVisibility(queueUrl, receiptHandle, visibilityTimeout);

    // Assert
    expect(mockSend).toHaveBeenCalledTimes(1);
    expect(ChangeMessageVisibilityCommand).toHaveBeenCalledTimes(1);
    expect(ChangeMessageVisibilityCommand).toHaveBeenCalledWith({
      QueueUrl: queueUrl,
      ReceiptHandle: receiptHandle,
      VisibilityTimeout: visibilityTimeout,
    });
  });  
});

In this test, we are mocking the client-sqs library to return a successful response. We then call the updateMessageVisibility function and assert that it updates the message visibility in SQS.

Testing the deleteMessage Function

Finally, let's write a unit test for the deleteMessage function. The purpose of this function is to delete a message from SQS.

Here's an example test:

import { deleteMessage } from "./sqs";
import { DeleteMessageCommand } from "@aws-sdk/client-sqs";

jest.mock("@aws-sdk/client-sqs", () => ({
  SQSClient: jest.fn(() => ({
    send: jest.fn(),
  })),
  DeleteMessageCommand: jest.fn(),
}));

describe("deleteMessage", () => {
  it("should delete a message from SQS", async () => {
    // Arrange
    const queueUrl = "https://sqs.<region>.amazonaws.com/<account-id>/<queue-name>";
    const receiptHandle = "test-receipt-handle";
    const command = new DeleteMessageCommand({
      QueueUrl: queueUrl,
      ReceiptHandle: receiptHandle,
    });

    // Mock the SQS client to return a successful response
    const mockSend = jest.fn().mockResolvedValueOnce({});
    const SQSClient = require("@aws-sdk/client-sqs").SQSClient;
    SQSClient.prototype.send = mockSend;
    const DeleteMessageCommand = require("@aws-sdk/client-sqs").DeleteMessageCommand;
    DeleteMessageCommand.mockReturnValueOnce(command);

    // Act
    await deleteMessage(queueUrl, receiptHandle);

    // Assert
    expect(mockSend).toHaveBeenCalledTimes(1);
    expect(DeleteMessageCommand).toHaveBeenCalledTimes(1);
    expect(DeleteMessageCommand).toHaveBeenCalledWith({
      QueueUrl: queueUrl,
      ReceiptHandle: receiptHandle,
    });
  });
});

In this test, we are mocking the client-sqs library to return a successful response. We then call the deleteMessage function and assert that it deletes the message from SQS.

These unit tests will help you ensure that your code is working as expected and will help you catch bugs early on in the development process. You can run these tests using the following command:

npm test

This will run all the tests in the sqs.test.ts file and output the results in your terminal.

We hope that this article has been helpful in guiding you on how to write unit tests for your Node.js TypeScript code using the Jest testing framework. Remember to write tests for all the functions in your code to ensure that it works as expected. Happy testing!

Pair programming on a project remotely in VSCode

Tyler Steck — Thu, 02 Mar 2023 06:07:22 +0000

Collaborating on a Node.js project with other developers can be challenging, especially if you're working remotely. However, Visual Studio Code's Live Share extension makes it easy to collaborate with other developers in real-time. In this article, we'll explore how to use Live Share to collaborate on a Node.js project and how to allow other developers to access the console to run unit tests.

Step 1: Install the Live Share Extension

The first step in collaborating on a Node.js project with Live Share is to install the Live Share extension for Visual Studio Code. You can do this by opening Visual Studio Code and navigating to the Extensions view, then searching for "Live Share" and clicking "Install".

Step 2: Start a Live Share Session

To start a Live Share session, open the project you want to collaborate on in Visual Studio Code and click the Live Share button in the sidebar. Then, click "Start Collaboration Session" and select the sharing settings you want to use.

Once you start a Live Share session, you'll be given a link that you can share with other developers. When they open the link in their browser, they'll be able to join the session and collaborate with you in real-time.

Step 3: Share the Console

To allow other developers to access the console to run unit tests, you'll need to share the console with them. To do this, open the integrated terminal in Visual Studio Code by selecting "View" > "Integrated Terminal" from the menu bar.

Then, click the "Share Terminal" button at the top of the terminal window. This will create a new tab in the terminal that's dedicated to the Live Share session.

Step 4: Collaborate on the Project and Run Unit Tests

Once you've shared the console, you can collaborate with other developers on the project and run unit tests together. To run unit tests, you can use a testing framework like Mocha or Jest.

For example, you could create a new test file called "test.js" and write a simple test that checks if a function returns the correct output:



const assert = require('assert');
const myFunction = require('./myFunction');

describe('myFunction', function() {
  it('should return the correct output', function() {
    assert.strictEqual(myFunction(), 'Hello, world!');
  });
});

Then, you could run the test by entering the following command in the shared console:



npm test

This will run the tests and display the results in the console. Other developers in the Live Share session will be able to see the results in real-time and collaborate with you on fixing any issues that arise.

Here are a few additional tips for using Live Share to collaborate on a Node.js project:

Use a shared workspace: Instead of just sharing the project folder, you can create a shared workspace in Visual Studio Code. This allows all collaborators to see the same set of files and settings, making collaboration even easier.
Set up debugging: You can also use Live Share to debug your Node.js project together. This can be especially helpful when trying to track down issues that are hard to reproduce.
Use the Live Share audio feature: Sometimes, it can be helpful to talk through a problem with other developers rather than just typing messages in the Live Share chat. The Live Share audio feature allows you to talk to other developers in real-time, which can make collaboration even more effective.

Conclusion

Collaborating on a Node.js project with other developers can be challenging, but Visual Studio Code's Live Share extension makes it easy. By following these steps, you can start a Live Share session, share the console, and collaborate with other developers on running unit tests together. This can help you catch issues early and work together more efficiently to build a better project.

Setting up M1/M2 Mac for using package node-gyp

Tyler Steck — Thu, 02 Mar 2023 05:55:25 +0000

If you're using an M1 Mac and trying to use Node.js for native module development, you may run into errors with node-gyp. Node-gyp is a tool that compiles native modules for Node.js, and it needs to be configured correctly to work on an M1 Mac. In this article, we'll explore how to set up an M1 Mac to use node-gyp without errors.

Step 1: Install Command Line Tools

After installing Xcode, you need to install the Command Line Tools. Open a terminal window and enter the following command:

xcode-select --install

This command installs the Command Line Tools, which include the necessary tools for compiling software on a Mac.

Step 2: Install Homebrew

Homebrew is a package manager for macOS that makes it easy to install and manage software packages. You can install Homebrew by entering the following command in a terminal window:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

This command installs Homebrew and sets it up on your system.

Step 3: Install Node.js

After installing Homebrew, you can use it to install Node.js. Enter the following command in a terminal window:

brew install node

This command installs the latest version of Node.js and its dependencies.

Step 4: Configure node-gyp

Now that Node.js is installed, you need to configure node-gyp to work on an M1 Mac. Open a terminal window and enter the following command:

export CXXFLAGS="-stdlib=libc++"

This command sets the C++ standard library to libc++, which is required for node-gyp to work on an M1 Mac.

Step 5: Test node-gyp

To test that node-gyp is configured correctly, you can install a native module that depends on it. Open a terminal window and enter the following command:

npm install -g node-gyp

This command installs the node-gyp package globally.

To test that node-gyp is working correctly, you can create a new Node.js project and install a native module that depends on it. For example, you can create a new project with the following command:bash

mkdir test-project &amp;&amp; cd test-project
npm init -y

Then, you can install a native module that depends on node-gyp with the following command:

npm install sharp

The sharp module is an image processing library that uses node-gyp to compile native code.

If node-gyp is configured correctly, you should be able to install the sharp module without errors.

Conclusion

Setting up node-gyp on an M1 Mac can be challenging, but it's necessary for native module development in Node.js. By following these steps, you can configure node-gyp to work correctly on your M1 Mac and avoid errors when compiling native modules.

Setting up Extensions Visual Studio Code for NodeJS

Tyler Steck — Thu, 02 Mar 2023 05:38:11 +0000

Node.js is a popular runtime environment used for building server-side applications in JavaScript. Visual Studio Code is a powerful and free code editor that is widely used by Node.js developers. In this article, we will explore the top Node.js extensions for Visual Studio Code that can improve developer productivity.

1. Node.js Extension Pack

The Node.js Extension Pack is a collection of extensions that provide essential features for Node.js development. This pack includes extensions such as the Node.js Debugger, npm, and IntelliSense. The Node.js Extension Pack provides an easy way to install all the necessary extensions for Node.js development with a single click.

2. ESLint

ESLint is a popular linting tool that helps developers identify and fix code errors, syntax issues, and potential bugs. ESLint can be used to enforce coding standards and best practices. The ESLint extension for Visual Studio Code provides real-time feedback on code errors and suggests fixes as you type. This extension can significantly improve code quality and reduce development time.

3. Prettier

Prettier is a code formatter that automatically formats your code to adhere to a consistent style. The Prettier extension for Visual Studio Code can format your code as you type or on save. This extension supports several programming languages, including JavaScript, TypeScript, and CSS.

4. GitLens

GitLens is a popular Git extension for Visual Studio Code that provides advanced features for Git integration. GitLens can help you understand the history of your code changes, visualize code authorship, and compare code across multiple Git branches. This extension can help you collaborate more efficiently and reduce the time spent on Git-related tasks.

5. Live Server

Live Server is a simple and easy-to-use extension for Visual Studio Code that provides a live preview of your web application as you code. With Live Server, you can quickly test your web application without having to refresh the browser manually. This extension can save you a significant amount of time and make web development more efficient.

6. REST Client

The REST Client extension for Visual Studio Code allows developers to send HTTP requests and receive responses directly from within the code editor. This extension can be useful for testing API endpoints, debugging, and exploring APIs. The REST Client extension supports several HTTP methods, including GET, POST, PUT, DELETE, and PATCH.

Conclusion

Visual Studio Code is a powerful code editor for Node.js development. By installing these top Node.js extensions, developers can significantly improve their productivity and streamline their workflow. These extensions can help developers identify and fix errors, enforce coding standards, format code, collaborate more efficiently, test web applications, and interact with APIs. Best of all, these extensions are free and easy to install.

Scalable solutions to pull records from Salesforce through API

Tyler Steck — Wed, 01 Mar 2023 05:28:59 +0000

When dealing with millions of records, it's important to consider scalability and performance. Here are a few things you can do to improve the scalability of the Node.js server that synchronizes Salesforce objects and values to a local server in a memory store:

1. Use pagination:

When retrieving large datasets from Salesforce. By using pagination to limit the number of records returned in each query. This will reduce the amount of data transferred over the network and improve performance.

// Define the batch size for each query
const batchSize = 2000;

// Retrieve the object's data in batches
let offset = 0;
let allRecords = [];
while (true) {
  const queryResult = await conn.query(
    `SELECT * FROM ${objectName} LIMIT ${batchSize} OFFSET ${offset}`
  );
  allRecords = allRecords.concat(queryResult.records);
  if (queryResult.done) {
    break;
  }
  offset += batchSize;
}

// Store the object's data in the memory store
memoryStore[objectName] = allRecords;

2. Use Redis or other caching mechanism:

Storing large amounts of data in a memory store can quickly become unmanageable and lead to performance issues A better approach is to use a caching mechanism such as Redis. Redis is an in-memory data structure store that can be used as a database, cache, and message broker. It's highly scalable and can handle millions of records with ease. Instead of storing the data in a memory store, you can store it in Redis and retrieve it as needed.

import Redis from 'ioredis';

// Create a Redis client
const redisClient = new Redis();

// Retrieve the object's data from Redis
const cachedData = await redisClient.get(objectName);
if (cachedData) {
  memoryStore[objectName] = JSON.parse(cachedData);
} else {
  // Retrieve the object's data from Salesforce
  // ...
  // Store the object's data in Redis
  redisClient.set(objectName, JSON.stringify(result.records));
  // Store the object's data in the memory store
  memoryStore[objectName] = result.records;
}

3. Use a message queue:

If you're synchronizing large amounts of data. This is important to avoid blocking the event loop. One way to do this is to use a message queue such as RabbitMQ or Kafka. Instead of synchronizing the data in real-time, you can add messages to a queue and process them asynchronously. This will improve performance and allow you to handle millions of records with ease.

import amqp from 'amqplib';

// Create a RabbitMQ connection
const conn = await amqp.connect('amqp://localhost');
const channel = await conn.createChannel();

// Create a queue
await channel.assertQueue('syncQueue');

// Add a message to the queue
const message = {
  objectName: 'Account',
  action: 'sync',
};
channel.sendToQueue('syncQueue', Buffer.from(JSON.stringify(message)));

// Process messages from the queue
channel.consume('syncQueue', async (message) => {
  const { objectName, action } = JSON.parse(message.content.toString());
  if (action === 'sync') {
    // Synchronize the object's data
    // ...
  }
  channel.ack(message);
});

These are just a few examples of how you can improve the scalability of the Node.js server that synchronizes Salesforce objects and values to a local server in a memory store. Other techniques include load balancing, horizontal scaling, and database sharding. It's important to choose the right approach based on your specific use case and performance requirements.

4. Use database sharding:

As the size of the data grows, it may become necessary to distribute the data across multiple databases or shards. Database sharding involves partitioning the data horizontally across multiple databases, with each shard containing a subset of the data. This can help improve performance and scalability, as queries can be distributed across multiple shards, reducing the load on any single database.

5. Use a NoSQL database:

If you're dealing with large amounts of unstructured or semi-structured data, a NoSQL database such as MongoDB or Cassandra may be a better choice than a traditional relational database. NoSQL databases are designed to handle large amounts of data, with high scalability and performance. They can also be used to store data in a flexible and schema-less format, making it easier to handle complex and dynamic data structures.

6. Implement caching at the client-side:

Another approach to improving scalability is to implement caching at the client-side. This involves caching frequently accessed data in the client's browser or in a local storage. By caching the data, you can reduce the number of requests made to the server, which can help improve performance and reduce server load.

Overall, there are many techniques that you can use to improve the scalability of a Node.js server that synchronizes Salesforce objects and values to a local server in a memory store. The specific approach you choose will depend on your use case, performance requirements, and budget. By implementing the right strategies, you can ensure that your server can handle millions of records and provide fast and responsive performance.

Using Salesforce Subscriber in NodeJs Typescript using jsforce

Tyler Steck — Wed, 01 Mar 2023 05:18:30 +0000

Setting up a subscriber in Node.js Typescript to Salesforce Opportunities using change control events.

Make sure you have a Salesforce Developer account and a connected app. You can create a connected app in your Salesforce account by going to Setup > App Manager > New Connected App.

Install the @salesforce/core and jsforce packages in your Node.js project by running the following commands:

npm install @salesforce/core jsforce

Create a new Typescript file and import the necessary modules:

import { Connection, OAuth2 } from 'jsforce';
import { createStreamClient, ReplayExtension, CLIENT_CONFIG_DEFAULT } from '@salesforce/core';

Create a function to authenticate with Salesforce using OAuth2 authentication:

async function authenticateWithSalesforce(): Promise<Connection> {
  const oauth2 = new OAuth2({
    clientId: 'your-connected-app-client-id',
    clientSecret: 'your-connected-app-client-secret',
    redirectUri: 'http://localhost:3000/oauth2/callback'
  });
  const authUrl = oauth2.getAuthorizationUrl();
  console.log('Open the following URL and grant access to your Salesforce account:');
  console.log(authUrl);

  // After the user grants access and is redirected to the callback URL,
  // extract the authorization code and exchange it for an access token
  const conn = new Connection({
    oauth2,
  });
  const authCode = 'the-authorization-code-you-received';
  const authResult = await conn.authorize(authCode);

  console.log('Successfully authenticated with Salesforce');
  return conn;
}

Note: Replace your-connected-app-client-id and your-connected-app-client-secret with the values for your connected app, and make sure to configure the callback URL in your connected app settings.Create a function to set up a Change Data Capture (CDC) stream for the Opportunities object:

async function subscribeToOpportunityChanges(conn: Connection) {
  // Create a CDC stream client
  const streamClient = await createStreamClient(conn, CLIENT_CONFIG_DEFAULT);

  // Create a replay extension to receive missed events
  const replayExtension = new ReplayExtension();

  // Subscribe to change events for the Opportunities object
  const subscription = await streamClient.subscribe({
    topic: 'OpportunityChangeEvent',
    // Use the replay extension to receive missed events
    // (optional, but recommended)
    replay: replayExtension,
    // Set the initial position to start streaming from
    // (optional, defaults to the latest available position)
    ...replayExtension.getInitialPosition(),
    // Callback function to handle incoming events
    // (replace with your own implementation)
    onEvent: async (event) => {
      console.log(`Received OpportunityChangeEvent: ${JSON.stringify(event)}`);
      // Do something with the event data, e.g. update a local database
    },
  });

  console.log('Successfully subscribed to OpportunityChangeEvent');
}

Call the authenticateWithSalesforce and subscribeToOpportunityChanges functions to start streaming CDC events for the Opportunities object:

(async () => {
  const conn = await authenticateWithSalesforce();
  await subscribeToOpportunityChanges(conn);
})();

That's it! You should now be able to receive real-time change events for the Opportunities object in your Node.js application. Note that this is just a basic example - you can customize the onEvent callback function to handle the event data in any way you like.

If you encounter an error with the code, you can add error handling to the subscribeToOpportunityChanges function to catch any errors that may occur during the subscription process:

async function subscribeToOpportunityChanges(conn: Connection) {
  try {
    // Create a CDC stream client
    const streamClient = await createStreamClient(conn, CLIENT_CONFIG_DEFAULT);

    // Create a replay extension to receive missed events
    const replayExtension = new ReplayExtension();

    // Subscribe to change events for the Opportunities object
    const subscription = await streamClient.subscribe({
      topic: 'OpportunityChangeEvent',
      // Use the replay extension to receive missed events
      // (optional, but recommended)
      replay: replayExtension,
      // Set the initial position to start streaming from
      // (optional, defaults to the latest available position)
      ...replayExtension.getInitialPosition(),
      // Callback function to handle incoming events
      // (replace with your own implementation)
      onEvent: async (event) => {
        console.log(`Received OpportunityChangeEvent: ${JSON.stringify(event)}`);
        // Do something with the event data, e.g. update a local database
      },
    });

    console.log('Successfully subscribed to OpportunityChangeEvent');
  } catch (error) {
    console.error(`Failed to subscribe to OpportunityChangeEvent: ${error}`);
  }
}

If you want to customize the CDC subscription, you can refer to the Salesforce Change Data Capture Developer Guide for more information on available options and best practices.

That's it! You should now be able to receive real-time change events for the Opportunities object in your Node.js application using the Change Data Capture feature in Salesforce.

Debugging NodeJS Typescript App using Nodemon

Tyler Steck — Wed, 01 Mar 2023 05:12:49 +0000

Nodemon is a tool that helps in developing Node.js applications by automatically restarting the node application when changes are detected in the file system. In this article, we'll walk through the steps to set up a nodemon.json configuration to debug a Node.js TypeScript application using the tsconfig.json settings to debug with source code.

Prerequisites:Node.js installed on your machine
TypeScript installed on your machine
Nodemon installed on your machine

Step 1: Create a Node.js TypeScript project

Create a new Node.js TypeScript project by creating a new folder and running the following command in your terminal:

npm init -y

Next, install the necessary dependencies for the project by running the following command:

npm install typescript @types/node nodemon --save-dev

Create a tsconfig.json file in the root folder of your project, and add the following configuration:

{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es6",
        "sourceMap": true,
        "outDir": "dist",
        "rootDir": "src"
    },
    "include": [
        "src/**/*"
    ]
}

This configuration will tell TypeScript to compile the TypeScript files to JavaScript, and output the compiled files to the "dist" folder. The "rootDir" field specifies the root folder of your TypeScript source files.

Step 2: Configure nodemon

Create a nodemon.json file in the root folder of your project, and add the following configuration:

{
    "watch": ["src"],
    "ext": "ts,json",
    "ignore": ["src/**/*.spec.ts"],
    "exec": "ts-node --files --require tsconfig-paths/register src/index.ts"
}

This configuration will tell nodemon to watch the "src" folder for changes, and ignore any test files. The "exec" field specifies the command to run when nodemon restarts the application. The "ts-node" package is used to run the TypeScript files directly, without needing to compile them to JavaScript. The "tsconfig-paths" package is used to handle module resolution when using paths specified in the tsconfig.json file.

Step 3: Start the development server

Start the development server by running the following command in your terminal:

This will start the nodemon process and begin watching for changes to your files.

Step 4: Set up debugging

Open your Node.js TypeScript project folder in your preferred code editor and create a new launch.json file in the .vscode folder. Add the following configuration to the file:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug nodemon",
            "type": "node",
            "request": "attach",
            "restart": true,
            "protocol": "inspector",
            "port": 9229,
            "localRoot": "${workspaceFolder}/dist",
            "remoteRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ]
        }
    ]
}

This configuration will tell your code editor to attach to the nodemon process running the application, and enable debugging using the source maps generated by TypeScript. The "localRoot" field should be set to the folder containing the compiled JavaScript files. The "outFiles" field should be set to the folder containing the transpiled JavaScript files.

Step 5: Start debugging

To start debugging, run the nodemon command in your terminal, and then select the "Debug nodemon" configuration in your code editor's debug panel. This will attach the debugger to the nodemon process and allow you to set breakpoints and step through your TypeScript code.

Conclusion

Setting up nodemon to debug a Node.js TypeScript application with source code debugging is a simple process that can greatly improve your development workflow. With the right configuration, you can quickly and easily debug your code and ensure that your application is running smoothly. Follow the steps outlined in this article, and you'll be up and running in no time!

Exploration of var vs const in NodeJS Application

Tyler Steck — Wed, 01 Mar 2023 04:53:07 +0000

Variables are a fundamental part of any programming language, including TypeScript. In TypeScript, developers have the option to use var and const to declare variables. While var has been used in JavaScript for a long time, const was introduced with the ES6 standard and has quickly become a popular choice for declaring variables. In this article, we will explore the performance benefits of using var and const in an Express.js TypeScript application.

The Difference Between var and const

Before we dive into the performance benefits, let's take a look at the differences between var and const:

var: Variables declared with var are function-scoped, meaning that they are accessible within the function they are declared in. They can also be re-declared and re-assigned.

const: Variables declared with const are block-scoped, meaning that they are only accessible within the block they are declared in. They cannot be re-declared, but they can be re-assigned if they are mutable.

Now that we understand the differences between var and const, let's explore their performance benefits.

Performance Benefits of Using const

One of the main performance benefits of using const is that it allows the TypeScript compiler to optimize the code better. When a variable is declared with const, the compiler can determine that it will never change, and can optimize the code accordingly.

For example, consider the following code:

let myNumber = 10;
for (let i = 0; i < 1000000; i++) {
  myNumber += i;
}
console.log(myNumber);

In this code, myNumber is declared with let, which means that it can be re-assigned. As a result, the TypeScript compiler cannot determine if myNumber will change or not. This can lead to slower code execution.

Now let's take a look at the same code, but with myNumber declared with const

const myNumber = 10;
for (let i = 0; i < 1000000; i++) {
  // This will throw an error because myNumber is read-only
  myNumber += i;
}
console.log(myNumber);

In this code, myNumber is declared with const, which means that it cannot be re-assigned. As a result, the TypeScript compiler can determine that myNumber will never change, and can optimize the code accordingly. This can lead to faster code execution.

In fact, according to a benchmark test conducted by Stefan Baumgartner, using const can be up to 95% faster than using let in some cases.

Performance Benefits of Using var

While const can provide significant performance benefits, there are also cases where var can be more performant. One such case is when using closures.

Consider the following code:

function counter() {
  let count = 0;
  return function() {
    return ++count;
  }
}

const myCounter = counter();
console.log(myCounter());
console.log(myCounter());
console.log(myCounter());

In this code, count is declared with let. While this code works correctly, it is not as performant as it could be. This is because each time the function returned by counter is called, a new instance of count is created. This can lead to slower code execution.

Now let's take a look at the same code, but with count declared with var:

function counter() {
  var count = 0;
  return function() {
    return ++count;
  }
}

var myCounter = counter();
console.log(myCounter());
console.log(myCounter());
console.log(myCounter());

In this code, count is declared with var. Because var is function-scoped, count is only created once, and subsequent calls to the function returned by counter reuse the same count variable. This can lead to faster code execution.

Conclusion

In conclusion, when it comes to performance in an Express.js TypeScript application, using const can provide significant benefits in most cases. However, there are some cases where var can be more performant, such as when using closures. It's important to understand the differences between var and const and choose the appropriate one for each use case to achieve optimal performance.

While the performance differences between var and const may not be noticeable in small applications or single requests, they can add up over time and become a significant factor in larger applications or high-traffic scenarios. As such, it's worth taking the time to consider which one to use for each variable declaration in your Express.js TypeScript application.

Creating multiple instances of OctoPrint for Raspberry Pi 3

Tyler Steck — Tue, 28 Feb 2023 04:55:12 +0000

To set up two instances of OctoPrint on a single Raspberry Pi 3, you will need to follow the steps below:

Install OctoPrint on the Raspberry Pi 3 using the official installation guide.
Create a copy of the OctoPrint installation directory by using the command sudo cp -R /home/pi/OctoPrint /home/pi/OctoPrint2. This command will create a copy of the OctoPrint directory named OctoPrint2.
Edit the config file for the second instance of OctoPrint by using the command sudo nano /home/pi/OctoPrint2/config.yaml.
Change the port number for the second instance of OctoPrint. The default port number is 5000, so you can change it to another number like 5001 or 5002.
Save the changes made to the config file and exit the editor.
Start the second instance of OctoPrint by running the command ~/OctoPrint2/venv/bin/octoprint serve --port 5001 in the terminal.
Access the second instance of OctoPrint by going to http://<Raspberry Pi IP address>:5001 in a web browser.

That's it! You now have two instances of OctoPrint running on a single Raspberry Pi 3. Repeat the above steps if you need to set up more instances. Note that running multiple instances of OctoPrint may require additional resources, so make sure your Raspberry Pi has sufficient memory and processing power to handle the load.

#AI

Send Email using Nodemailer to Google SMTP

Tyler Steck — Tue, 28 Feb 2023 04:37:31 +0000

Express.js TypeScript function that takes in an email body and sends it to the Google SMTP server using an access and refresh token, as well as allowing the addition of CSS to the email template:

import express, { Request, Response } from 'express';
import nodemailer from 'nodemailer';

const app = express();

app.use(express.json());

const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    type: 'OAuth2',
    user: process.env.GOOGLE_EMAIL,
    clientId: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    refreshToken: process.env.GOOGLE_REFRESH_TOKEN,
    accessToken: process.env.GOOGLE_ACCESS_TOKEN,
  },
});

app.post('/send-email', async (req: Request, res: Response) => {
  try {
    const { to, subject, body, css } = req.body;

    const mailOptions = {
      from: process.env.GOOGLE_EMAIL,
      to,
      subject,
      html: `
        <html>
          <head>
            <style>
              ${css}
            </style>
          </head>
          <body>
            ${body}
          </body>
        </html>
      `,
    };

    await transporter.sendMail(mailOptions);

    res.send('Email sent successfully');
  } catch (err) {
    console.error(err);
    res.status(500).send('Error sending email');
  }
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

In this example, we create an Express.js server and use the nodemailer library to create a transporter object that connects to the Google SMTP server using OAuth2 authentication. We then define an endpoint at /send-email that accepts a POST request with a JSON payload containing the to, subject, body, and css fields. The to field specifies the email address of the recipient, the subject field specifies the subject of the email, the body field specifies the body of the email, and the css field specifies any custom CSS styles to be applied to the email template.

In the endpoint handler function, we create a mailOptions object that contains the from, to, subject, and html fields.

Html field contains an HTML string that specifies the email template. This string includes a tag that injects the CSS styles provided in the css field, as well as the body field that contains the body of the email. We then use the <code>transporter</code> object to send the email using the <code>sendMail</code> method, passing in the <code>mailOptions</code> object. If there are any errors during the sending process, we catch them and return a 500 error response. Otherwise, we return a success response indicating that the email was sent successfully. Note that in order to use this function, you'll need to provide the required environment variables for the Google OAuth2 authentication, including the <code>GOOGLE_EMAIL</code>, <code>GOOGLE_CLIENT_ID</code>, <code>GOOGLE_CLIENT_SECRET</code>, <code>GOOGLE_REFRESH_TOKEN</code>, and <code>GOOGLE_ACCESS_TOKEN</code> fields.

DEV Community: Tyler Steck

React Native Storybook Toggle

🚀 Development Toggle for React Native: Seamless App/Storybook Switching in __DEV__ Mode

✨ What’s New?

1. Floating Toggle Button

2. Dynamic State Management

3. Safe Area Integration

🧑‍💻 Code Changes

app/_layout.tsx

DevToggle Component

RootLayout With Toggle

🛠️ Usage Guide

🎯 Benefits

Developer Experience

Testing Efficiency

Team Collaboration

🧩 Technical Details

✅ Ready to Switch!

Harnessing the Power of Figma: A Journey from HTML to High-Fidelity Designs

Introduction

The Role of html.to.design

Before and After Screenshots

Other Mentionable Tools

Conclusion

Call to Action

Figma Plugin Links

Updating to AWS SDK V3 for SQS messaging in NodeJS Typescript

Prerequisites

Setting up the Environment

Retrieving a Message from SQS

Updating Message Visibility

Deleting a Message

Putting it all Together

Running the Code

Conclusion

BONUS TESTS

Testing the getMessage Function

Testing the updateMessageVisibility Function

Testing the deleteMessage Function

Pair programming on a project remotely in VSCode

Step 1: Install the Live Share Extension

Step 2: Start a Live Share Session

Step 3: Share the Console

Step 4: Collaborate on the Project and Run Unit Tests

Conclusion

Setting up M1/M2 Mac for using package node-gyp

Step 1: Install Command Line Tools

Step 2: Install Homebrew

Step 3: Install Node.js

Step 4: Configure node-gyp

Step 5: Test node-gyp

Conclusion

Setting up Extensions Visual Studio Code for NodeJS

1. Node.js Extension Pack

2. ESLint

3. Prettier

4. GitLens

5. Live Server

6. REST Client

Conclusion

Scalable solutions to pull records from Salesforce through API

1. Use pagination:

2. Use Redis or other caching mechanism:

3. Use a message queue:

4. Use database sharding:

5. Use a NoSQL database:

6. Implement caching at the client-side:

Using Salesforce Subscriber in NodeJs Typescript using jsforce

Debugging NodeJS Typescript App using Nodemon

Step 1: Create a Node.js TypeScript project

Step 2: Configure nodemon

Step 3: Start the development server

Step 4: Set up debugging

Step 5: Start debugging

Conclusion

Exploration of var vs const in NodeJS Application

The Difference Between var and const

Performance Benefits of Using const

Performance Benefits of Using var

Conclusion

🚀 Development Toggle for React Native: Seamless App/Storybook Switching in `DEV` Mode

`app/_layout.tsx`