DEV Community: Kayode

Effective Neovim Setup. A Beginner’s Guide

Kayode — Sat, 09 Mar 2024 14:53:03 +0000

Vim is a text editor that comes preinstalled with most major Linux distributions. It’s a highly customizable editor and it can be a productivity improvement for developers when utilized well.

Vim encourages the use of keyboards with several keybindings that can operate differently in different modes thereby minimizing the need for a mouse.

Simply put, Vim is an editor that can match the speed at which you think.

Neovim is an extension of Vim. It’s built for users who want the good parts of Vim, and more.

You can read more about the vision of Neovim here.

Note: For the article, we are using LazyVim to configure our Neovim setup. LazyVim makes it easy to customize and extend Neovim’s configuration.

Installing Neovim

There are several ways to install Neovim. This wiki provides several guidelines on how to install Neovim.

I use an Arch Linux machine so it was easy to install Neovim by running the command:

sudo pacman -S neovim

On a Windows machine, you can use Chocolatey by running the command.

choco install neovim

On a macOS machine, you can use homebrew by running the command.

brew install neovim

Once Neovim is installed, we can confirm that it exists by running the command.

neovim

The output should look similar to the image below.

Setting up LazyGit

There are some requirements needed to set up LazyVim:

Neovim (we have this installed already)
Git
a Nerd Font (optional but needed to display icons)

First, we will clone the LazyVim starter repository into our Neovim runtime path.

~/.config/nvim is the Neovim’s runtime path for macOS and Linux machines while ~/AppData/local/nvim is for Windows machines.

Since I am not an Arch Linux machine, I’d run the command below:

git clone https://github.com/LazyVim/starter ~/.config/nvim

Run the command nvim again to confirm that it is set up.

Basic Plugins Installation

LazyVim comes with a wealth of plugins pre-configured and ready to use. This section of the article will introduce two more plugins that can greatly improve your Neovim experience.

nvim-telescope

This is a highly extendable fuzzy finder over lists. To install this plugin, you can create a new file in the plugins directory of your Neovim config path named telescope.lua

cd ~/.config/nvim/lua/plugins/; nvim telescope.lua

Then paste the code below into the telescope.lua file

--telescope.lua
return {
  "nvim-telescope/telescope.nvim",
  tag = "0.1.5",
  dependencies = { "nvim-lua/plenary.nvim" },
}

Then in ~/.config/nvim/lua/config/lazy.lua you can add this below the last line.

local builtin = require('telescope.builtin')
vim.keymap.set('n', '<C-p>', builtin.find_files, {})
vim.keymap.set('n', '<leader>fg', builtin.live_grep, {})
vim.keymap.set('n', '<leader>fb', builtin.buffers, {})
vim.keymap.set('n', '<leader>fh', builtin.help_tags, {})

The code above set up keymaps to execute some of the functions provided by nvim-telescope.

The <C-p> keymap is a Ctrl + p keybinding that opens a fuzzy finder for files in a modal.

nvim-treesitter

This is a plugin that provides a simple way to use the tree-sitter in Neovim and also provides functionalities like highlighting, etc.

Just like we did for the nvim-telescope plugin, we will create a new file in the plugins directory of Neovim’s configuration called treesitter.lua and then paste the code below into it.

-- treesitter.lua
require("lazy").setup({{
    "nvim-treesitter/nvim-treesitter",
    build = ":TSUpdate",
    config = function () 
      local configs = require("nvim-treesitter.configs")

      configs.setup({
          ensure_installed = { "c", "lua", "vim", "vimdoc", "query", "elixir", "heex", "javascript", "html" },
          sync_install = false,
          highlight = { enable = true },
          indent = { enable = true },  
        })
    end
 }})

The ensure-installed is a tuple that includes various languages you want to include the parser support for.

You can see a list of supported languages here.

Conclusion

This is a very basic introduction to getting Neovim set up quickly.

Using Neovim can be very uncomfortable for the first time especially when you have habits that is different from from what Vim preaches. It will be a slow painful start but in no time, you will pick it up.

And do not be overwhelmed with trying to learn everything about Vim for a start. Pick up the barest minimum you need to get started and grow with that.

Optimizing Older PCs to Learn How to Code

Kayode — Mon, 11 Dec 2023 23:32:42 +0000

Do you have an old clunky laptop and you want to learn programming, this is a simple guide to help you utilize the little resources available to you.

When I started learning how to code, I had a Dell Inspiron with 2GB RAM and an old processor that I don’t even remember again. Following the guides listed below helped me use my Inspiron to get my first-ever paid job until I was able to afford a better laptop.

N.B: This might not be the best experience but it’s always greater than no experience.

Discard Windows and install Linux:
Lighter variations of Linux are known to operate functionally on old PCs. Giving up Windows and your favourite software might be hard but we are running on limited resources and we need the best output as much as we can.

Moreover, many Linux distros are beginner-friendly and can play your favourite media type.
Select a user-friendly and lightweight Linux distribution for beginners. Consider options like Ubuntu-based distributions (Lubuntu, Xubuntu) or Linux Mint with the XFCE desktop environment for a familiar and efficient experience.

Here’s an installation guide on some recommended options
- Lubuntu’s installation guide
- Xubuntu’s installation guide
- Linux Mint’s installation guide
- Linux Lite’s installation guide
Turn off desktop effects and animation
Use lightweight software alternatives
Manage Startup Application:
Manage your startup applications by removing unused applications to improve speed time and save resources
Browser Optimization:
Web browsers can be resource-hungry. Removing or disabling unnecessary browser extensions can be one way to improve your browser extensions.
You can switch to light browsers like Midori or research ways to optimize settings in popular browsers.

Conclusion

I hope you find this helpful and that it points you in the right direction. You don’t have you wait for a better PC, you can start now with what you’ve got.

I am available to help, you can always reach me via:

X (Twitter): https://twitter.com/zt4ff

LinkedIn: https://www.linkedin.com/in/oluwasegun-kayode-07879b1aa/

So The Journey Begins - My Startup Story

Kayode — Sat, 03 Jun 2023 04:34:40 +0000

Hi friends 👋🏽. It's been a while since I heard from you. I hope you are doing well and are doing great.

Since the last time I wrote here, there have been a lot of interesting things happening to me, both good and otherwise. I wish to write about them here, but that would defeat the purpose of this article.

Why Startups?

The reason I want to create startups is that owning a business has proven to have certain benefits such as financial gain and potential for growth. Moreover, some people exceed their peak capacity or creativity where there is no predictable path to follow.

Little disclaimer here: I am more focused on product development right now rather than other aspects that make up a business. I am going solo right now, but I hope to make some friends (with you) along the way to build awesome and useful products.

Which Startups?

Or rather, which products? Currently, I am interested in dev tools and utilities. Being a developer for over 4 years, I have created helpful tools or scripts to help me do my job faster, and I have occasionally contributed to such tools. I aim to build on this foundation.

What Plans?

I am new to this. My approach to this is to learn as it unfolds. Many of the products I will build may never be used by anybody, but I will make sure to learn, have fun, and document my experience.

Since I primarily write TypeScript, I found a tool called Redwood.js that helps you bootstrap your project so you can develop faster. I was part of their showcase event recently, and I love many of the products that are being built with it. Moreover, Redwood.js has a community of founders who are usually helpful, especially when you are just starting this journey or going solo.

What’s Next?

I started working on a project a month ago, and I look forward to shipping it and sharing it with you. It’s a tool that is guaranteed to help firms and individuals automate their content.

Will You Join Me?

I created a newsletter dedicated to documenting my experience, the experience of others, courses, opportunities, job openings, investment opportunities, and many more, and this journey continues.

Join me here!

Finally

I would love to hear about your experience building a business on the internet. What works and what didn’t?

What advice will you give a newbie like me?

Playwright Tutorial for Beginners 2 - Code Generator

Kayode — Sun, 16 Apr 2023 13:43:16 +0000

Using Playwright test generator (codegen)

Playwright has a feature that allows us to generate tests scripts by interacting with web apps directly.

Generating a test script

We will run the below command in our terminal to open a todo app, then we can perform some basic functions of the website:

npx playwright codegen https://todomvc.com/examples/vanillajs

At the time of writing this journal, there is a bug where the Inspect tool window is opened outside of your laptop view, only if you have an external monitor (Playwright somehow assume you have an external monitor, even when you do not).

More on the issue on GitHub at https://github.com/microsoft/playwright/issues/5696 A simple hack I use for now is to manually move the window into view using these steps:

Right-click on Windows taskbar and select cascade windows

Hold the shift key down and right-click on the app icon and select move

Use the arrow key to pan the application into view

You can comment if you have a fix for this or a better way to do this, please.

We get this Inspect tool once we run the codegen command and we can see that a test script is generated showing that the page loads into the URL we provide.

We can interact with the website and codegen automatically generates a script based on our interaction.

The generated test scripts:

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {

  // Go to https://todomvc.com/examples/vanillajs/
  await page.goto('https://todomvc.com/examples/vanillajs/');

  // Click html
  await page.click('html');

  // Click [placeholder="What needs to be done?"]
  await page.click('[placeholder="What needs to be done?"]');

  // Click [placeholder="What needs to be done?"]
  await page.click('[placeholder="What needs to be done?"]');

  // Fill [placeholder="What needs to be done?"]
  await page.fill('[placeholder="What needs to be done?"]', 'play games');

  // Press Enter
  await page.press('[placeholder="What needs to be done?"]', 'Enter');

  // Fill [placeholder="What needs to be done?"]
  await page.fill('[placeholder="What needs to be done?"]', 'watch movies');

  // Press Enter
  await page.press('[placeholder="What needs to be done?"]', 'Enter');

  // Fill [placeholder="What needs to be done?"]
  await page.fill('[placeholder="What needs to be done?"]', 'run to school');

  // Press Enter
  await page.press('[placeholder="What needs to be done?"]', 'Enter');

  // Check text=play gameswatch moviesrun to school >> input[type="checkbox"]
  await page.check('text=play gameswatch moviesrun to school >> input[type="checkbox"]');

  // Check :nth-match(input[type="checkbox"], 3)
  await page.check(':nth-match(input[type="checkbox"], 3)');

  // Click button
  await page.click('button');

  // Click text=Clear completed
  await page.click('text=Clear completed');

  // Click a:has-text("All")
  await page.click('a:has-text("All")');
  await expect(page).toHaveURL('https://todomvc.com/examples/vanillajs/#/');

  // Click button
  await page.click('button');

});

Following the next tutorials, we will have a full grasp of the scripts generated above.

Playwright Tutorial for Beginners 9 - Assertions

Kayode — Sun, 16 Apr 2023 13:09:00 +0000

Playwright Assertions

Playwright make use of expect library (provided by Jest) for assertions. The library provides different types of matchers like toEqual, toContain, toMatch, toMatchSnapshots and many more.

To make use of the library, import it into your test script.

const { expect } = require('@playwright/test')

You can extend with async matchers that will wait until the specified assertion condition is met.

expect(value).toEqual(anotherValue);

await expect(value).toBeTruthy();

Common patterns

// assert text content
expect(await page.locator('.welcomeMsg').textContent()).toEqual('Welcome pal');

// assert inner text
expect(await page.locator('.goodbyeMsg').innerText()).toBe('Goodbye pal');

// assert inner html
expect(await page.locator('.button-container').innerText()).toEqual(
    '<button>Submit</button>'
  );

// assert attribute
expect(await page.locator('css=#name-input')).toHaveAttribute('type', 'text');

// assert url
expect(await page.url()).toMatch(/\/users\/test/);

// and many more!

Custom assertions

To have custom assertions, you can extend the expect provided by Jest. For instance, we will create a custom matcher called toBeBetween10And100:

const { expect, default: test } = require('@playwright/test');

expect.extend({
  toBeBetween10And100(num) {
    const pass = num > 10 && num < 100;

    if (pass) {
      return {
        message: () => `expected ${num} to be not within 10 and 100`,
        pass: true
      };
    }
    return {
      message: () => `expected ${num} to be within 10 and 100`,
      pass: false
    };
  }
});

test('simple test', async () => {
    // pass
  expect(25).toBeBetween10And100();
});

There are a bunch of matchers you can use with Playwright depending on what your test suites are.

Playwright Tutorial for Beginners 8 - Screenshots

Kayode — Sun, 16 Apr 2023 13:08:00 +0000

To screenshot, make use of page.screenshot({ path: 'screenshot/screenshot.png' })

Full page screenshots

Full page screenshot is a screenshot of a full scrollable page, as if you had a very tall screen and the page could fit it entirely.

await page.screenshot({ path: 'screenshot.png', fullPage: true });

Element screenshots

You can also take screenshots of elements too:

await page.locator('.header').screenshot({ path: 'screenshot.png' });

An example

const { test } = require('@playwright/test');

test('Demo video', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await page.screenshot({ path: 'screenshot.png' });
});

Playwright Tutorial For Beginners 7 - Videos

Kayode — Sun, 16 Apr 2023 13:07:00 +0000

Playwright can record videos for all pages in a browser context.

A BrowserContext is an isolated incognito-alike session within a browser. Just like when you open an incognito window of your browser, the browser state (cache, cookies etc.) is isolated between test.

Using the page provide by Playwright test runner, @playwright/test, the page provided in the tests callback opens in a new context out of the box.

To record a video, we will:

create a new context from a browser with some options in place
create a new page with from the context
open a web app in the page
make sure to close the context (the video is generated after this

We will create a test scripts in demo.spec.js and run to generate a video:

// demo.spec.js
const { test } = require('@playwright/test');

test('Demo video', async ({ browser }) => {
  const context = await browser.newContext({ recordVideo: { dir: 'videos' } });
  const page = await context.newPage();
  await page.goto('https://google.com');

  await page.type('input', 'playwright');
  await page.press('input', 'Enter');
  await page.waitForTimeout(1000);

  await context.close();
});

The test will generate a video in a /videos folder.

Playwright Tutorial for Beginners 5 - Performing Actions

Kayode — Sun, 16 Apr 2023 13:05:00 +0000

Test input

You can easily fill-out form fields with page.fill().

page.fill() focuses on the element and triggers an input event with the specified text. It works on <input>, <textarea>, [contenteditable] and <label> associated with an input or text area.

const { test } = require('@playwright/test');

test('input text into a test element', async ({ page }) => {
  await page.goto('https://demoblaze.com');
  await page.click('#signin2');
  await page.fill('#sign-username', 'zt4ff');
});

To view how the test ran, you can set the headless and slowMo property in the playwright.config.js file. For instance:

// playwright.config.js

// ...
use: {
    launchOptions: {
      slowMo: 400,
      headless: false
    }
// ...

page.type() can also be used but it differs to page.fill() in sense of it sending a keydown, keypress/input and keyup event for each character of the text while page.fill() fires only an input event on the focused element with the specified text.

page.type() fires every necessary keyboard event and you can even set the delay of the typing.

Checkboxes and radio buttons

When working with checkboxes and radio buttons, page provide some methods to check, uncheck and get the state of theses input elements (input[type=checkbox], input[type=radio] or [role=checkbox].

// Check the checkbox
await page.check('#agree');

// Assert the checked state
expect(await page.isChecked('#agree')).toBeTruthy();

// Uncheck by input <label>.
await page.uncheck('#subscribe-label');

// Select the radio button
await page.check('text=XL');

Selecting options from `<select>`

// Single selection matching the value
await page.selectOption('select#colors', 'blue');

// Single selection matching the label
await page.selectOption('select#colors', { label: 'Blue' });

// Multiple selected items
await page.selectOption('select#colors', ['red', 'green', 'blue']);

// Select the option via element handle
const option = await page.$('#best-option');
await page.selectOption('select#colors', option);

Using the mouse

You can perform different types of mouse clicks using Playwright. The .click() method takes an argument of the element you want to click and optional arguments to define the options for the click event. Some examples use cases:

// generic clicking
await page.click('#edit-button');

// double click
await page.dblclick('#edit-button');

// right click
await page.click('#edit-button', { button: 'right' });

// using modifiers (like shift, control...) with the click
// shift + click
await page.click('#edit-button', { modifiers: ['Shift'] });
// ctrl + click
await page.click('#edit-button', { modifiers: ['Control'] });

// define the position point of click on the element
await page.click('#edit-button', { position: { x: 0, y: 0 } });

Using `.dispatchEvent()`

For cases where you want to just trigger events programmatically or trigger a custom event that is not directly implemented in the Playwright API, you can make use of the .dispatchEvent() method.

You can read about creating and triggering events here

// trigerring a custom event 'build'
// .dispatchEvent(selector, type[, eventInit, options])
await page.dispatchEvent('#edit-button', 'build')

Playwright Tutorial for Beginners 4 - Selectors and Locators

Kayode — Sun, 16 Apr 2023 13:04:00 +0000

Playwright locators and selectors

To interact with elements, you need to locate the element first. Selectors are used when locating an element. Then we can perform actions and write assertions on the elements by means of methods such click(), dbclick().

Ways to select locate an element in Playwright:

Text selectors

The selector locates element that contains specified text. e.g

test('Locate "Log in" button', async() => {
    await page.locate('text=Log in').click();
});

Text selector has a few variations:

text=Log in - default matching case is case-insensitive and searches for a sub string. For instance, text=Log matches <button>Log in</button>
wrap the text single or double quotes to make playwright match the exact text. For instance,
You can make use of a JavaScript-like regex wrapped in / symbol. For instance:
:has-text pseudo-class matches an element that contains specified text inside somewhere. It is used with other CSS specifiers because it will match all elements that contain the specified test. For instance

CSS selectors

CSS selector can be used in Playwright by :

CSS selector engine, e.g. page.locator(css='.button')
Using Playwright custom CSS locator with additional pseudo-classes like :visible, :text and many more

Query CSS selectors directly, for instance

await page.locator('.form > .button');

You can read more about selectors and locators in the official documentation.

Playwright Tutorial for Beginners 3 - Trace Viewer

Kayode — Sun, 16 Apr 2023 13:03:00 +0000

In this tutorial, we will learn about another GUI tool provided by Playwright called the Trace Viewer.

The Playwright Trace Viewer is a GUI tool that helps in exploring recorded Playwright traces after a tests script is executed.

Recording a Trace

We set the trace configuration in the Playwright configuration file, playwright.config.js.

For instance:

// playwright.config.js

const config = {
    retries: 1,
    use: {
        trace: 'on-first-retry'
    }
};

module.exports = config;

When you run a test with the above configuration, a trace.zip file would be created for each test that was retried.

When you specify the retries key in the config file, Playwright retries the test until the test is passed or the maximum number of retries specified is reached.

Available options for the trace key:

off - does not record a trace at all
on - records a trace for each test ran
retain-on-failure - record trace for each test but removes it when the test runs successfully
on-first-retry - record a trace only when retrying a test for the first time

Lets practice now

Lets configure trace to run on every test in the playwright.config.js file and make use of the Desktop Chrome device:
Lets create a test:
Running the test with npx playwright test simple_test.spec.js would generate a trace.zip file.
You can view the trace by running this command in the CLI. (The trace.zip file is stored in the test-results folder:
Doing this would open the Trace Viewer window now you can see the actions performed by the script.

The trace-viewer shows the action on the script on the left side of the window and clicking each of the actions reveals:
- action snapshot
- action log
- source code location
- network log for the action
For instance, clicking on the locator.click text=Phones:

The trace viewer is a really useful tool when you want to trace how some of your tests ran (flaky or failing).

You can play more around the tool. And read more on the official documentation.

Track Errors in Your NestJS Application with AppSignal

Kayode — Wed, 01 Mar 2023 13:54:02 +0000

Many variables — such as your users' device type and configuration, external hosting services, and third-party libraries — can impact an application's performance. Without a performance monitoring system in place, numerous problems can arise. These issues could even mean that users stop using your application.

AppSignal provides application performance monitoring (APM) — with features such as error tracking, performance monitoring, host monitoring, anomaly detection, and uptime monitoring — to help you track errors and monitor your app's performance.

In this article, we will set up AppSignal for a NestJS application and give some tips for tracking errors using AppSignal.

Let's get started!

Initializing a NestJS Application

NestJS is a framework for building Node.js server-side applications. NestJS is built with Typescript and supports Typescript right out of the box, but it still enables developers to write pure JavaScript code. It provides a layer of abstraction over HTTP server frameworks like Express (the default) or Fastify and exposes the API so developers can integrate many of NestJS’ third-party modules.

You can install a NestJS TypeScript starter project on your machine by running the following:

git clone https://github.com/nestjs/typescript-starter.git sample_app
cd sample_app
npm install

Configuring AppSignal for NestJS

If you don’t have an AppSignal account, create one, then run the command below to install and configure AppSignal in your app.

npx @appsignal/cli install

This will install the necessary packages and you'll be asked for a configuration method. Select the Using the appsignal.cjs configuration file option.
The CLI tools will generate a configuration file named appsignal.cjs in the src/ directory.

The configuration that's generated includes:

a valid Push API key
an application name
setting active to true

You can get the Push API key from your AppSignal account by clicking through to Organization Settings → Administration → API Keys.

In this article, we will call our application "sample_app".

NestJS Error Tracking with AppSignal

The AppSignal for Node.js package automatically instruments NestJS. This command starts the application in development mode with hot code reloading and uses --require to preload appsignal.cjs at startup:

npx nest start --watch --exec "node --require ./src/appsignal.cjs"

You should add the --require flag to any script that starts your app. For our demo, we'll only add it to start:dev:

You can also include the command above as a script in your package.json.

{
  "scripts": {
    // ...
    "start:dev": "nest start --watch --exec \"node --require ./src/appsignal.cjs\""
    // ...
  }
}

Then start your application by running the command.

npm run start:dev

AppSignal tracks any errors raised by your NestJS application and will start collecting metrics immediately.

To test this, update the getHello() method in the app.service.ts file to raise an error.

// src/app.service.ts
import { Injectable } from "@nestjs/common";

@Injectable()
export class AppService {
  getHello(): string {
    throw new Error("SOME SAMPLE ERROR");
    // return 'Hello World';
  }
}

Then open http://localhost:3000 in your browser, so your application raises an error. Go to your dashboard on AppSignal and click on Overview:

AppSignal's error tracking provides different insights that help keep your application under control. The dashboard overview gives simple but powerful visuals for important metrics like:

Error rate
Throughput
Response time
Worst 10 hosts by

And more!

When you click on an error listed in the Latest open errors section, this opens a page that contains further details to help with debugging.

Using this information, you can:

see the host's state on the day the error occurred
find out more about the request environment or request headers
backtrace the error via its callstack, etc.

You can also integrate personal issue trackers or GitHub to assign issues and manage errors.

Handling Errors with AppSignal

There are situations where you'll want AppSignal to ignore some errors raised by your application — for instance, exceptions raised by bots using your app.

To do this, you can add the ignoreErrors property to the configuration object in appsignal.cjs. ignoreErrors takes an array of specific error names.

const { Appsignal } = require("@appsignal/nodejs");

new Appsignal({
  // ...
  ignoreErrors: ["SpecificError", "AnotherError", "SomeError"],
});

To handle exceptions in your application, use the sendError method provided by the @appsignal/node package to record an incident.

NestJS has a built-in exceptions layer that automatically processes unhandled exceptions in your app. It catches unhandled errors and sends appropriate user-friendly responses. As we've seen, such errors are also tracked and reported by AppSignal.

You may want full control over the exceptions layer to customize the content of the response you send to the client. You can use the ExceptionFilter class from @nestjs/common for this.

Create a new file called appsignalexception.filter.ts in the src/exception_filters/ directory and copy the code below into the file.

import {
  ExceptionFilter,
  Catch,
  ArgumentsHost,
  HttpException,
} from "@nestjs/common";
import { sendError } from "@appsignal/nodejs";
import { Response } from "express";

@Catch(HttpException)
export class AppSignalExceptionFilter implements ExceptionFilter {
  catch(exception: HttpException, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse<Response>();
    const status = exception.getStatus();

    sendError(exception);

    //  handle the exceptions however you want: logging, additional info, HTTP response, etc.
    response.status(status).send("handle the error however you may want");
  }
}

The AppSignalExceptionFilter extends the ExceptionFilter class, overriding the catch method.

In the app service, update your app.service.ts file, so getHello raises an HttpException.

import { HttpException, Injectable } from "@nestjs/common";

@Injectable()
export class AppService {
  getHello(): string {
    throw new HttpException("THIS IS AN ERROR", 500 /* status code */);
  }
}

In the app's controller, make use of the exception filter by updating the app.controller.ts file.

import { Controller, Get, UseFilters } from "@nestjs/common";
import { AppService } from "./app.service";
import { AppSignalExceptionFilter } from "./exception_filters/appsignalexception.filter";

@Controller()
@UseFilters(new AppSignalExceptionFilter())
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

When you run the application, AppSignal will track incidents sent by the sendError method (see the 'latest open errors' part of the screenshot below):

Invite Team Members and Set Up Alerts for Errors in AppSignal

AppSignal can be utilized to manage a collaborative workflow including:

assigning tasks to team members
sending specific notifications to some team members

To add team members to your AppSignal application, click the App settings button on the bottom-left of your dashboard.

Then Team Permissions → Manage this team → Invitations.

AppSignal also provides a notification system that can send alerts via email and integrates with many communication tools like Slack, Discord, Microsoft Teams, etc.

AppSignal's alerts can be configured to suit your organization's workflow. For instance, if you mainly use Slack and email, you can configure your alert settings to send uptime monitoring alerts to every team member's emails and send error tracker metrics to a particular Slack channel.

Click on App settings and the Notifications option to access the configuration panel.
You can add integrations based on your workflow and configure older integrations.

AppSignal can also offer webhooks for notifications so you can create workflows, functions, and operations to handle the incidents occurring in your application. Read the docs to find out more about AppSignal webhooks.

Enable Uptime Monitoring in AppSignal

AppSignal’s uptime monitoring monitors when your application is down and alerts you. It checks URLs you provide and logs a given endpoint's performance in different regions.

AppSignal pings the given URL in multiple regions worldwide, and if there’s no response within 30 seconds from a region, it considers the application down in that region.

To create an uptime monitor, click the Add uptime monitor button on the Uptime Monitoring page and provide the necessary information.

Check out Monitoring Your NestJS Application with AppSignal to learn more.

Wrapping Up

In this article, we installed AppSignal for a NestJS application. Then we explored how to:

track errors and dig into error details
set up alerts from AppSignal to track errors in a way that suits your workflow
enable uptime monitoring for different URL endpoints

Happy debugging!

P.S. If you liked this post, subscribe to our JavaScript Sorcery list for a monthly deep dive into more magical JavaScript tips and tricks.

P.P.S. If you need an APM for your Node.js app, go and check out the AppSignal APM for Node.js.

The 20 Most Trending Open Source Tools for Ecommerce

Kayode — Sat, 04 Feb 2023 15:53:18 +0000

In the past decade, ecommerce and marketing have drifted into a more digitized landscape. More investments and research are poured towards ecommerce and tools are created to help set up online stores faster, improve sales, market digitally, etc.

This article compiles a list of different categories of open source tools to help you set up and improve your online stores.

Why Should You Use Open Source Tools?

Open source simply refers to software with source code that is publicly visible or accessible. Availability of the source code means developers and non-developers can contribute to the software.

One of the biggest advantages of open source tools is that they are cost-effective in comparison to proprietary tools and offer as good a value. Open source software is generally free, but there are exceptions. The freeness depends on the restrictiveness of the software license.

Linuss law asserts that given enough eyeballs, all bugs are shallow. Open source ensures security and transparency due to the openness of source code. More involvement means more use cases, and more use cases lead to more edge cases being discovered and bugs being fixed.

The large involvement common with popular open source software reduces the duplication of effort. It encourages you to focus on the competency that makes you unique or gives you an advantage by utilizing common components provided by open source tools.

Below is a list of some open source tools that can improve and optimize the experience of your online stores. Beside each listed tool is the number of GitHub stars currently available on their respective repository.

Trending Ecommerce Engines

These are tools that help you set up an ecommerce store. They provide many features like CMS integration, payment integration, carting system, etc. necessary to run an effective online store and may provide options for extensibility. See some examples below.

Medusa (15.8k)

If you want to build a scalable and sophisticated commerce setup with low effort and great developer experience, Medusa is the choice for you. It is an open source, JavaScript-based, headless commerce platform whose abstraction-based architecture makes it more extensible and easy to customize.

Medusa has a large community of developers using it and contributing to its ecosystem to make it better and more extensible with custom tools and third-party services.

Reaction Commerce (11.9k)

Reaction Commerce, now known as MailChimp Open Commerce, is an API-first ecommerce tool powered by Meteor.js made for technical retailers. Since its launch, it has gained the attention of people because of its high level of customizability.

You can write your API plugin for your store integrated with third-party services and also reuse codes between plugins.

Magento (10.4k)

Now known as Adobe Commerce, Magento is an open source ecommerce platform acquired by Adobe in 2018. Magento has built a large community of people contributing to its ecosystem.

It supports a series of payment gateway options so that you can make multiple payment integrations.

You need just a little understanding of technology to be able to build yourself a store with this tool.

WooCommerce (8.3k)

WooCommerce helps you build online stores with WordPress. All you need to do is to install the WooCommerce plugin into your WordPress website to get started. It is beginner-friendly and because it uses WordPress, you can access a variety of free or paid themes and plugins.

OpenCart (6.6k)

OpenCart is a PHP-based store management software. To use OpenCart, download the software from its official website or GitHub and install it.

It has multi-store support that lets you manage different stores from a single interface. You can also use specific themes and set products for each store.

And just like many platforms, it is highly customizable and extensible.

Trending Payments Tools

These tools provide ways to receive payments and also provide integrations for many payment methods as well as multi-currency support.

Stripe

Stripe is a payment gateway that is easy and quick to implement. It handles the step between a paying customer and the recipient and acknowledging that payment has been received.

From a developers perspective, Stripe takes all the hard work out by providing developer-friendly SDKs to interact with its APIs.

PayPal

Paypal is one of the first online payment providers to be established globally. Paypal works as a service platform between people (or businesses) wanting to exchange. PayPal provides a list of software development kits (SDKs) that can be integrated with your online stores.

Marketing

Marketing is very important to ecommerce. It helps your customers to be aware of your store, engages them and helps them make the buying decision. These tools provide functions that can improve your business marketing.

Matomo (17.2k)

Data analytics are important to the success of modern web-based businesses. Matomo, formerly known as Piwik Analytics, is an open source web analytics platform that provides detailed reports on your website visitors. It provides information that can be used to improve the retention rate of online visitors.

Chatwoot (14.2k)

Chatwoot is an open source customer engagement platform that helps business engage their customers on their website, email, SMS, etc. It is an open source alternative to Intercom, Zendesk, etc.

It combines many features to become a central hub for communication and allows you to interact with many channels (SMS, email, Facebook, live chats, etc.) without leaving the app.

Plausible Analytics (13.3k)

Plausible Analytics is an alternative to Matomo although its a newer player in this market.

Unlike Matomo, Plausible is built with simplicity and ease of use in mind. It focuses on essential stats and metrics only while Matomo is a full-fledged Google Analytics alternative providing a huge number of metrics and reports you can choose from.

Listmonk (9.2k)

Listmonk is an open source self-hosted email marketing software that can manage subscribers lists providing tools to create email templates and can segment subscribers for arbitrary message campaigns.

Trending Business Tools

These tools are important to efficiently manage your business processes.

Rocket.Chat (34.4k)

Rocket.Chat is an open source platform designed for communities and organizations with high standards for data protection. You can install and host it however you want.

It provides a lot of features to manage internal and external business communications with a marketplace providing apps for integration with common social media channels like Facebook Messenger, WhatsApp, Instagram, SMS, etc).

Odoo (27.5k)

Odoo, formerly known as OpenERP, is an open source all-inclusive suite of business apps that can help you manage your business processes.

Due to the large community surrounding the tool, Odoo comes with many modules that you can integrate to boost your business processes.

n8n (27.2k)

n8n, pronounced nodemation, is an open source workflow automation tool that is self-hosted and easy to extend. With n8n, you can perform simple automation integrations and also complex workflows that combine both third-party APIs and your internal tools.

It provides an intuitive user interface that allows non-technical users to automate tasks.

ERPNext (12.4k)

Just like Odoo, ERPNext helps you manage your business processes. It consolidates your business operations into a single monolithic application.

With this tool, you can avoid jumping from one spreadsheet to another app to get things done. Due to data being central, all data stored can speak and interact with others.

Conclusion

This article outlined 20 open source tools to boost your sites performance across different categories. Open source ecommerce tools are growing rapidly; there are many more tools available. However, with these ones, you can build an online store with a wide range of functions made available.

DEV Community: Kayode

Effective Neovim Setup. A Beginner’s Guide

Installing Neovim

Setting up LazyGit

Basic Plugins Installation

nvim-telescope

nvim-treesitter

Conclusion

Optimizing Older PCs to Learn How to Code

Conclusion

So The Journey Begins - My Startup Story

Why Startups?

Which Startups?

What Plans?

What’s Next?

Will You Join Me?

Finally

Playwright Tutorial for Beginners 2 - Code Generator

Using Playwright test generator (codegen)

Generating a test script

Playwright Tutorial for Beginners 9 - Assertions

Playwright Assertions

Common patterns

Custom assertions

Playwright Tutorial for Beginners 8 - Screenshots

Full page screenshots

Element screenshots

An example

Playwright Tutorial For Beginners 7 - Videos

Playwright Tutorial for Beginners 5 - Performing Actions

Test input

Checkboxes and radio buttons

Selecting options from <select>

Using the mouse

Using .dispatchEvent()

Playwright Tutorial for Beginners 4 - Selectors and Locators

Playwright locators and selectors

Text selectors

CSS selectors

Playwright Tutorial for Beginners 3 - Trace Viewer

Recording a Trace

Lets practice now

Track Errors in Your NestJS Application with AppSignal

Initializing a NestJS Application

Configuring AppSignal for NestJS

NestJS Error Tracking with AppSignal

Handling Errors with AppSignal

Invite Team Members and Set Up Alerts for Errors in AppSignal

Enable Uptime Monitoring in AppSignal

Wrapping Up

The 20 Most Trending Open Source Tools for Ecommerce

Why Should You Use Open Source Tools?

Trending Ecommerce Engines

Trending Content Management Systems (CMS)

Trending Payments Tools

Marketing

Trending Business Tools

Conclusion

Selecting options from `<select>`

Using `.dispatchEvent()`