DEV Community: Roel

Analyze Your MTG Deck in Seconds with MTGDeckTag.com

Roel — Mon, 09 Mar 2026 09:34:56 +0000

I’ve been building a small MTG/EDH side project called mtgdecktag.com, a clean, focused tool for analyzing and understanding your decks. I love putting my decks into Moxfield, but what frustrated me most is that I have to manually tag all the cards and what they do. Especially for ramp and removal this can be tedious.

So that's why i created MTGDECKTAG.

Paste your list, hit “Analyze,” and you get a fast, structured breakdown of all the required items you want in a commander deck.

The UI is simple, readable, and built to get out of your way so you can focus on the game.

It can even list brackets, combo's and do a small EDHRec analysis.

If you want to try it or give feedback, it’s live here: https://mtgdecktag.com

How to Vue.js: Create Your First Project Quickly (using Vite)

Roel — Mon, 15 Dec 2025 13:24:28 +0000

In this guide, we will set up a brand new Vue.js 3 project using the standard build tool, Vite.

Why Vite?

If you are coming from older Vue tutorials, you might be used to the "Vue CLI" (Webpack). That is now legacy. We use Vite (French for "quick") because it significantly improves the development experience:

Instant Startup: It uses Native ES Modules (ESM) to serve files on demand, rather than bundling the entire app before starting.
Performance: Hot Module Replacement (HMR) stays fast regardless of how large your app grows.
Configuration: You will now use vite.config.js for your settings instead of the old vue.config.js.

Prerequisites

Node.js version 18.3 or higher.
A terminal (PowerShell, Bash, or cmd).
Visual Studio Code (recommended).

Step 1: Initialize the Project

Open your terminal and navigate to your projects folder. Run the following command to initialize the official Vue scaffolder. This command explicitly sets up a Vite-based project:

npm create vue@latest

Step 2: Configure the Project

The command line will prompt you for a project name and several optional features. For a clean start, use the following configuration:

Project name: my-first-vue-app
Add TypeScript? No (keep it simple for now)
Add JSX Support? No
Add Vue Router? No
Add Pinia for state management? No
Add Vitest for Unit Testing? No
Add ESLint for code quality? Yes

Step 3: Install Dependencies

Navigate into your new project folder and install the NPM packages.

cd my-first-vue-app
npm install

Step 4: Run the Development Server

Start the local development server. Because of Vite, this should be nearly instant.

npm run dev

You will see the output pointing to http://localhost:5173/. Open this URL to see the default Vue welcome page.

Step 5: Clean up the boilerplate

Open the project in VS Code. To start with a blank slate, open src/App.vue and replace the contents with this basic structure:

<script setup>
import { ref } from 'vue'

const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
</template>

<style scoped>
h1 {
  color: #42b883;
}
</style>

Save the file. Your browser will automatically reload to show your changes.

You now have a running Vue 3 application powered by Vite. From here, you can start building custom components in the src/components folder and importing them into App.vue. This can be advanced and tricky, but we will leave that up for another tutorial.

Happy coding!

How to: Using a clever way to store multiple values in a single enum using bitmask

Roel — Tue, 07 Oct 2025 08:19:59 +0000

Have you ever been in a position where you need to track multiple choices of a user and want to avoid having to create a new seperate variable for each of those choices? That is where Bitmask can be your hero!

In the following example we will set up user cookie consent using bitmask to have a real-world example.

Managing user consent for cookies can get messy when dealing with multiple categories. A bitmask-based rights system offers a compact and efficient way to store and evaluate consent using binary flags.

Step 1: Define Categories as Powers of 2

Assign each cookie category a unique power-of-2 value:

[Flags]
public enum CookieConsent
{
    None = 0,
    Necessary = 1,      // 2^0
    Preferences = 2,    // 2^1
    Statistics = 4,     // 2^2
    Marketing = 8       // 2^3
}

This allows combinations to be stored as a single integer.

Step 2: Store Combined Consent as an Integer

If a user consents to Necessary, Statistics, and Marketing, the combined value is:

var consent = CookieConsent.Necessary | CookieConsent.Statistics | CookieConsent.Marketing;

You can store 13 in a cookie or database.

Step 3: Check Consent Using Bitwise Operations

To check if a user has consented to a specific category:

bool hasMarketing = (consent & CookieConsent.Marketing) != 0;
bool hasPreferences = (consent & CookieConsent.Preferences) != 0;

This works even if multiple flags are combined.

Step 4: Deserialize from Stored Value

When reading the stored value (e.g. from a cookie):

var storedValue = 13;
var userConsent = (CookieConsent)storedValue;

if (userConsent.HasFlag(CookieConsent.Marketing))
{
    // Load marketing scripts
}

The value 13 in binary is 1101, which corresponds to:

Necessary (1)
Statistics (4)
Marketing (8)

So userConsent will contain:

CookieConsent.Necessary | CookieConsent.Statistics | CookieConsent.Marketing

You can check individual flags like this:

if (userConsent.HasFlag(CookieConsent.Marketing))
{
    // Load marketing scripts
}

if (userConsent.HasFlag(CookieConsent.Preferences))
{
    // Will return false, since Preferences (2) is not included in 13
}

Step 5: Extend with New Categories

Add new categories by continuing the power-of-2 pattern:

public enum CookieConsent
{
    None = 0,
    Necessary = 1,
    Preferences = 2,
    Statistics = 4,
    Marketing = 8,
    Analytics = 16      // 2^4
}

This keeps the system scalable and backward-compatible.

Step 6: Store and Retrieve Consent in Cookies

You can store the combined consent value as an integer in a cookie:

Response.Cookies.Append("CookieConsent",((int)consent).ToString());

To retrieve and parse it:

var storedValue = Request.Cookies["CookieConsent"];
var userConsent = (CookieConsent)int.Parse(storedValue);

Step 7: Use Consent Flags in Middleware or Services

Use the flags to conditionally load services or scripts:

if (userConsent.HasFlag(CookieConsent.Marketing))
{
    // Load marketing scripts
}

if (userConsent.HasFlag(CookieConsent.Analytics))
{
    // Enable analytics tracking
}

Step 8: Optional – Serialize to Frontend

If you need to pass consent flags to JavaScript:

var consentFlags = new
{
    Necessary = userConsent.HasFlag(CookieConsent.Necessary),
    Preferences = userConsent.HasFlag(CookieConsent.Preferences),
    Statistics = userConsent.HasFlag(CookieConsent.Statistics),
    Marketing = userConsent.HasFlag(CookieConsent.Marketing),
    Analytics = userConsent.HasFlag(CookieConsent.Analytics)
};

return Json(consentFlags);

This allows the frontend to react accordingly.

This system can be applied to even more scenario's if you feel like it. Examples can be user permissions/access control, file system attributes like hidden, readonly etc, or even log levels.

How to C#: Building a .NET 9 API with SQL Server and Entity Framework Core

Roel — Fri, 28 Mar 2025 12:46:39 +0000

In this tutorial, we will create a new project with a database using Entity Framework Core in .NET 9. For this example, we will build a simple blog API using SQL Server. Entity Framework Core is a powerful ORM that allows you to create and manage databases using C#.

There are different packages available depending on the database provider you need. For this tutorial, we will use SQL Server, which requires the package Microsoft.EntityFrameworkCore.SqlServer.

Prerequisites

Visual Studio 2022 (latest update)
.NET version 9
NuGet: Microsoft.EntityFrameworkCore.SqlServer
NuGet: Microsoft.EntityFrameworkCore.Tools

Creating a New Project

Open Visual Studio and create a new solution.
Add a new project using the ASP.NET Core Web API template.
Name the project EntityFrameworkCoreDemo.

Adding the Required Packages

To add Entity Framework Core, follow these steps:

Right-click on your project and select Manage NuGet Packages.
Navigate to the Browse tab and search for Microsoft.EntityFrameworkCore.SqlServer. Select the latest stable version and install it.
Install Microsoft.EntityFrameworkCore.Tools similarly.

Creating the Database

Defining the Model

Create a new folder called Models.
Inside the Models folder, create a new file called Post.cs and define the following model:

using System;
using System.ComponentModel.DataAnnotations;

public class Post
{
    [Key]
    public Guid Id { get; set; }
    public string Title { get; set; }
    public string Content { get; set; }
}

Creating the Database Context

Create another file named BloggingContext.cs inside the Models folder:

using Microsoft.EntityFrameworkCore;
using System;

public class BloggingContext : DbContext
{
    public DbSet<Post> Posts { get; set; }

    protected override void OnConfiguring(DbContextOptionsBuilder options)
    {
        var connectionString = Environment.GetEnvironmentVariable("BLOGGING_DB_CONNECTION")
            ?? throw new InvalidOperationException("Database connection string is not set.");
        options.UseSqlServer(connectionString);
    }
}

Applying Migrations

Before applying migrations, ensure error handling and rollback strategies are in place to maintain database integrity. Run the following commands in the Package Manager Console:

Add-Migration InitialCreate
Update-Database

If an error occurs, use Remove-Migration to undo changes before they are applied.
Before applying migrations, ensure error handling and rollback strategies are in place to maintain database integrity. Run the following commands in the Package Manager Console:

Add-Migration InitialCreate
Update-Database

If an error occurs, use Remove-Migration to undo changes before they are applied. Model

Create a new folder called Models.
Inside the Models folder, create a new file called Post.cs and define the following model:

using System;
using System.ComponentModel.DataAnnotations;

public class Post
{
    [Key]
    public Guid Id { get; set; }
    public string Title { get; set; }
    public string Content { get; set; }
}

Create another file named BloggingContext.cs inside the Models folder:

using Microsoft.EntityFrameworkCore;
using System;

public class BloggingContext : DbContext
{
    public DbSet<Post> Posts { get; set; }

    protected override void OnConfiguring(DbContextOptionsBuilder options)
    {
        var connectionString = Environment.GetEnvironmentVariable("BLOGGING_DB_CONNECTION")
            ?? throw new InvalidOperationException("Database connection string is not set.");
        options.UseSqlServer(connectionString);
    }
}

Configuring the Connection String

Instead of hardcoding the connection string, we store it as an environment variable. For production environments, consider using Azure Key Vault, AWS Secrets Manager, or a similar secrets management service.

Set the environment variable in your development environment:

   $env:BLOGGING_DB_CONNECTION = "Server=localhost;Database=BloggingDB;User Id=sa;Password=yourpassword;TrustServerCertificate=True;"

In production, set the environment variable securely using the hosting server’s configuration system.
Instead of hardcoding the connection string, we store it as an environment variable. For production environments, consider using Azure Key Vault, AWS Secrets Manager, or a similar secrets management service.
Set the environment variable in your development environment:

   $env:BLOGGING_DB_CONNECTION = "Server=localhost;Database=BloggingDB;User Id=sa;Password=yourpassword;TrustServerCertificate=True;"

In production, set the environment variable securely using the hosting server’s configuration system. Instead of hardcoding the connection string, we store it as an environment variable.
Set the environment variable in your development environment by using the environment variables or using a .env file:

   $env:BLOGGING_DB_CONNECTION = "Server=localhost;Database=BloggingDB;User Id=sa;Password=yourpassword;TrustServerCertificate=True;"

Or create a .env file in the root of your project.

!!! MAKE SURE TO INCLUDE THE .ENV INTO YOUR .GITIGNORE. NEVER PUSH THIS TO SOURCE CONTROL/GIT. !!!

In production, set the environment variable on the hosting server.

Creating the Database

Run the following commands in the Package Manager Console:

Add-Migration InitialCreate
Update-Database

Configuring the Application

Open Program.cs and modify the ConfigureServices section to register BloggingContext. Additionally, configure logging and monitoring for better observability.

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddDbContext<BloggingContext>();
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

// Configure logging
builder.Logging.ClearProviders();
builder.Logging.AddConsole();

var app = builder.Build();

app.UseSwagger();
app.UseSwaggerUI();
app.UseAuthorization();
app.MapControllers();
app.Run();

Open Program.cs and modify the ConfigureServices section to register BloggingContext:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddDbContext<BloggingContext>();
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

app.UseSwagger();
app.UseSwaggerUI();
app.UseAuthorization();
app.MapControllers();
app.Run();

Creating a Controller

Right-click the Controllers folder and select Add -> Controller.
Choose API Controller with actions, using Entity Framework.
Select Post as the model and BloggingContext as the data context.
Name the controller PostController.cs.

Running the Application

Start the application by pressing F5.
Open the browser and navigate to https://localhost:<port>/swagger.
Test your API using Swagger.

Conclusion

You have successfully created a blog API using Entity Framework Core with .NET 9 and SQL Server. The database connection is now managed via an environment variable, making it more secure and flexible for different environments.

To optimize performance in production, consider:

Enabling caching mechanisms to reduce database load.
Optimizing SQL queries and indexing frequently accessed columns.
Implementing monitoring tools like Application Insights or Prometheus.
Using connection pooling to manage multiple database requests efficiently.
Handling database migrations carefully to prevent downtime during deployments. You have successfully created a blog API using Entity Framework Core with .NET 9 and SQL Server. The database connection is now managed via an environment variable, making it more secure and flexible for different environments.

To optimize performance in production, consider:

Enabling caching mechanisms to reduce database load.
Optimizing SQL queries and indexing frequently accessed columns.
Implementing monitoring tools like Application Insights or Prometheus.

- Using connection pooling to manage multiple database requests efficiently.

How to C#: Add Configuration to your .NET 8 Web API Application

Roel — Wed, 27 Nov 2024 10:09:24 +0000

Managing configuration settings is crucial for any application, including Web APIs. Separating configuration from code allows for cleaner codebases, easier maintenance, and flexibility to change settings without redeploying your application. This guide will walk you through adding custom configuration to a .NET 8 Web API application.

Prerequisites

.NET 8 SDK installed on your machine.
A basic .NET 8 Web API Application. You can create one using the command:

  dotnet new webapi -o MyWebApiApp

Step 1: Understanding the Default Configuration

When you create a new Web API project, appsettings.json and appsettings.Development.json files are included by default. The appsettings.json file is used to store configuration settings in JSON format, which the application reads at runtime.

Step 2: Adding Custom Configuration Sections

Let's add a custom configuration section to the appsettings.json file. Open appsettings.json and add the following:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ApiSettings": {
    "TwitterApiKey": "your-api-key",
    "TwitterApiSecret": "your-api-secret",
    "BearerToken": "your-bearer-token"
  }
}

This adds a new section called ApiSettings where you can store your API credentials.

Step 3: Create a Strongly-Typed Configuration Class

To access the ApiSettings section in a strongly-typed manner, create a new class that matches the structure of the configuration section.

Create a new file ApiSettings.cs in your project:

namespace MyWebApiApp
{
    public class ApiSettings
    {
        public string TwitterApiKey { get; set; }
        public string TwitterApiSecret { get; set; }
        public string BearerToken { get; set; }
    }
}

Step 4: Register the Configuration in `Program.cs`

In .NET 8, the Program.cs file uses the minimal hosting model. You'll need to modify it to register your configuration class.

Open Program.cs and modify it as follows:

// Bind ApiSettings and add it to the services collection
builder.Services.Configure<ApiSettings>(builder.Configuration.GetSection("ApiSettings"));

It should look like this:

using Microsoft.Extensions.Configuration;
using MyWebApiApp;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

// Bind ApiSettings and add it to the services collection
builder.Services.Configure<ApiSettings>(builder.Configuration.GetSection("ApiSettings"));

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseAuthorization();

app.MapControllers();

app.Run();

This code binds the ApiSettings section of the configuration to the ApiSettings class and registers it with the dependency injection (DI) container.

Step 5: Access Configuration in Controllers or Services

Now that the configuration is registered, you can inject it into your controllers or services.

Injecting into a Controller

Open the WeatherForecastController.cs (or create a new controller) and modify it to use IOptions<ApiSettings>:

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;

namespace MyWebApiApp.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class TwitterController : ControllerBase
    {
        private readonly ApiSettings _apiSettings;

        public TwitterController(IOptions<ApiSettings> apiSettings)
        {
            _apiSettings = apiSettings.Value;
        }

        [HttpGet("apikey")]
        public IActionResult GetApiKey()
        {
            return Ok(new
            {
                TwitterApiKey = _apiSettings.TwitterApiKey,
                TwitterApiSecret = _apiSettings.TwitterApiSecret,
                BearerToken = _apiSettings.BearerToken
            });
        }
    }
}

Injecting into a Service

If you prefer to keep your controllers thin, you can create a service class:

Create a Service Interface and Class

Create a new interface ITwitterService.cs:

namespace MyWebApiApp.Services
{
    public interface ITwitterService
    {
        string GetApiKey();
        string GetApiSecret();
        string GetBearerToken();
    }
}

Create the implementation TwitterService.cs:

using Microsoft.Extensions.Options;

namespace MyWebApiApp.Services
{
    public class TwitterService : ITwitterService
    {
        private readonly ApiSettings _apiSettings;

        public TwitterService(IOptions<ApiSettings> apiSettings)
        {
            _apiSettings = apiSettings.Value;
        }

        public string GetApiKey() => _apiSettings.TwitterApiKey;

        public string GetApiSecret() => _apiSettings.TwitterApiSecret;

        public string GetBearerToken() => _apiSettings.BearerToken;
    }
}

Register the Service in `Program.cs`

Add the service to the DI container:

// ...

builder.Services.AddSingleton<ITwitterService, TwitterService>();

// ...

Modify the Controller to Use the Service

Update TwitterController.cs:

using Microsoft.AspNetCore.Mvc;
using MyWebApiApp.Services;

namespace MyWebApiApp.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class TwitterController : ControllerBase
    {
        private readonly ITwitterService _twitterService;

        public TwitterController(ITwitterService twitterService)
        {
            _twitterService = twitterService;
        }

        [HttpGet("apikey")]
        public IActionResult GetApiKey()
        {
            return Ok(new
            {
                TwitterApiKey = _twitterService.GetApiKey(),
                TwitterApiSecret = _twitterService.GetApiSecret(),
                BearerToken = _twitterService.GetBearerToken()
            });
        }
    }
}

Step 6: Run and Test the Application

Run your application using:

dotnet run

Navigate to https://localhost:<port>/swagger to access the Swagger UI. You should see your TwitterController and the GetApiKey endpoint.

Try executing the GetApiKey endpoint to see your configuration values returned.

Step 7: Secure Your Sensitive Data

Important: Never store sensitive information like API keys or secrets in plain text within appsettings.json, especially in production environments.

Using User Secrets for Development

For development, you can use the Secret Manager to store sensitive data.

Run the following command in your project directory:

dotnet user-secrets init

Add secrets using:

dotnet user-secrets set "ApiSettings:TwitterApiKey" "your-api-key"
dotnet user-secrets set "ApiSettings:TwitterApiSecret" "your-api-secret"
dotnet user-secrets set "ApiSettings:BearerToken" "your-bearer-token"

These secrets will be stored securely on your machine and won't be checked into source control.

Modifying `Program.cs` to Include User Secrets

When in development mode, the configuration builder automatically includes user secrets. Ensure your Program.cs includes builder.Configuration as shown:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.Configure<ApiSettings>(builder.Configuration.GetSection("ApiSettings"));

// ...

Conclusion

By following these steps, you've successfully added custom configuration to your .NET 8 Web API application. This setup allows you to manage your application settings efficiently while keeping your code clean and maintainable. Remember to secure sensitive information appropriately, especially in production environments.

Happy coding!

References:

This is a continuation from:
https://dev.to/iamrule/add-your-appsettingsjson-to-a-c-console-application-5gd6

How to C#: Creating a simple CRUD page with Blazor and EntityFrameworkCore

Roel — Fri, 22 Nov 2024 13:28:47 +0000

Blazor, part of the .NET ecosystem, enables developers to build interactive web applications using C#. In this guide, we'll create a simple CRUD (Create, Read, Update, Delete) application using Blazor and Entity Framework Core in .NET 8.

Prerequisites

.NET 8 SDK: Ensure you have the latest .NET 8 SDK installed. You can download it from the official .NET website.
Blazor Project: Create a new Blazor Server or WebAssembly project.
NuGet Packages: Add the following packages to your project:

  <ItemGroup>
      <PackageReference Include="Microsoft.EntityFrameworkCore" Version="8.0.0" />
      <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="8.0.0" />
      <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.0" />
  </ItemGroup>

Step 1: Set Up the Data Model

Define a simple data model, for example, a Product class:

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Create a DbContext to manage the database operations:

public class AppDbContext : DbContext
{
    public DbSet<Product> Products { get; set; }

    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }
}

Step 2: Configure the Database Connection

In your appsettings.json, add the connection string:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=BlazorCrudDb;Trusted_Connection=True;"
  }
}

In Program.cs, register the AppDbContext with the dependency injection container:

builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

Step 3: Create the Database

Use Entity Framework Core tools to create the database:

Open the Package Manager Console.
Run the following commands:

   Add-Migration InitialCreate
   Update-Database

Step 4: Build the Blazor Components

Create a Blazor component, e.g., ProductList.razor, to handle CRUD operations:

@page "/products"
@inject AppDbContext Context

<h3>Product List</h3>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in products)
        {
            <tr>
                <td>@product.Name</td>
                <td>@product.Price</td>
                <td>
                    <button @onclick="() => EditProduct(product.Id)">Edit</button>
                    <button @onclick="() => DeleteProduct(product.Id)">Delete</button>
                </td>
            </tr>
        }
    </tbody>
</table>

<h3>Add/Edit Product</h3>
<input @bind="currentProduct.Name" placeholder="Name" />
<input @bind="currentProduct.Price" placeholder="Price" />
<button @onclick="SaveProduct">Save</button>

@code {
    private List<Product> products;
    private Product currentProduct = new Product();

    protected override async Task OnInitializedAsync()
    {
        products = await Context.Products.ToListAsync();
    }

    private async Task SaveProduct()
    {
        if (currentProduct.Id == 0)
        {
            Context.Products.Add(currentProduct);
        }
        else
        {
            Context.Products.Update(currentProduct);
        }
        await Context.SaveChangesAsync();
        products = await Context.Products.ToListAsync();
        currentProduct = new Product();
    }

    private void EditProduct(int id)
    {
        currentProduct = products.FirstOrDefault(p => p.Id == id);
    }

    private async Task DeleteProduct(int id)
    {
        var product = await Context.Products.FindAsync(id);
        if (product != null)
        {
            Context.Products.Remove(product);
            await Context.SaveChangesAsync();
            products = await Context.Products.ToListAsync();
        }
    }
}

Step 5: Run and Test the Application

Run your Blazor application and navigate to /products. You should be able to add, edit, and delete products, with changes reflected in the database.

Conclusion

You've now created a basic CRUD application using Blazor and Entity Framework Core in .NET 8. This setup provides a solid foundation for building more complex applications.

How to Azure: Host a Selenium JavaScript Node Application in Azure and Send Email Notifications on Failures

Roel — Wed, 28 Aug 2024 08:25:54 +0000

How to Host a Selenium JavaScript Node Application in Azure and Send Email Notifications on Failures

Automated browser testing is essential for maintaining web application quality. Selenium is a powerful tool for automating browsers, and in this guide, we'll walk through hosting a Selenium JavaScript Node application on Azure App Service and setting up email notifications if the tests fail three times in a row. This approach ensures you are immediately aware of any repeated failures in your web application's functionality.

Prerequisites

To follow this tutorial, you’ll need:
(For more in depth about this process visit: https://dev.to/iamrule/how-to-js-automate-testing-with-selenium-46j4 )

Node.js and npm installed on your local machine.
A Selenium JavaScript script ready for deployment.
An Azure account with access to Azure App Services.
Basic understanding of using the Azure Portal.

Step-by-Step Instructions

Step 1: Prepare Your Selenium Script

Ensure your Selenium script is ready for deployment. Below is an example of a simple script that opens a webpage and checks for an element:

const { Builder, By, until } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

// Utility function to pause execution
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTest() {
  let options = new chrome.Options();
  options.addArguments('--no-sandbox', '--headless', '--disable-gpu');

  let driver = await new Builder()
    .forBrowser('chrome')
    .setChromeOptions(options)
    .build();

  try {
    await driver.get('https://example.com'); // Replace with your target URL
    await driver.wait(until.elementLocated(By.id('test-element')), 10000);
    console.log('Element found and page loaded successfully.');
  } catch (error) {
    console.error('Error during test:', error);
    process.exit(1);
  } finally {
    await driver.quit();
  }
}

runTest();

Ensure that the script runs in headless mode, as this is required for running Selenium scripts in a server environment like Azure App Services.

Step 2: Create an Azure Web App Using the Azure Portal

Log in to the Azure Portal:
- Go to portal.azure.com.
Create a Resource Group:
- In the left-hand menu, click on Resource groups.
- Click + Create.
- Fill in the Resource group name (e.g., SeleniumTestingRG) and select your Region.
- Click Review + create and then Create.
Create an Azure App Service:
- Navigate back to the Home screen and select App Services.
- Click + Create and choose Web App.
- Fill in the Basics:
  - Subscription: Choose your Azure subscription.
  - Resource Group: Select the resource group you just created (SeleniumTestingRG).
  - Name: Enter a unique name for your web app (e.g., selenium-tests-app).
  - Publish: Select Code.
  - Runtime stack: Choose Node 14 LTS or the version matching your script.
  - Operating System: Select Windows or Linux (Linux is preferred for headless browser tests).
  - Region: Choose the same region as your resource group.
- Click Next: Monitoring, then Review + create and Create.
Deploy Your Selenium Script to the Web App:
- After the deployment is complete, navigate to your Web App resource in the Azure Portal.
- In the Deployment section, click on Deployment Center.
- Choose Local Git or GitHub (if you want to connect to a repository).
- Follow the steps to set up deployment from your local machine or GitHub repository.

Step 3: Configure the Application Settings

Add Application Settings:
- In the Web App resource, go to Configuration under the Settings section.
- Click on Application settings.
- Ensure that you add any necessary environment variables or settings needed for your Selenium script to run.
Install Chrome and Chromedriver:
- You will need to ensure that the Chrome browser and ChromeDriver are available on the server. This can be managed by adding startup commands or scripts to download and install Chrome and ChromeDriver on the server, but for simplicity, ensure your deployment package includes these if needed.

Step 4: Set Up Azure Monitor and Alerts

Enable Logging and Monitoring:
- Go to the Monitoring section in your Web App and select App Service logs.
- Set Application Logging (Filesystem) to On and select a log level (e.g., Error).
- Save the settings.
Create an Alert Rule:
- Go to Azure Monitor in the Azure Portal.
- Click on Alerts > + New alert rule.
- Set the Scope to your Web App.
- Under Condition, choose Custom log search or Failed request depending on your script’s logging strategy.
- Set up the query to detect three consecutive errors or failures.
- Under Actions, click Add action group.
- Fill in the details and add an Email/SMS/Push/Voice action.
- Click Review + create and then Create.

Step 5: Test Your Setup

Run a Test Deployment:
- Deploy the Selenium script to the Azure Web App following the same steps as above.
- Check the logs in the Azure Portal to ensure the script runs successfully.
Trigger a Failure and Verify Alerts:
- Modify your Selenium script to cause a deliberate failure (e.g., by changing the element ID).
- Redeploy the script and monitor the logs for errors.
- Ensure that after three consecutive failures, an email notification is sent to your configured address.

Common Issues/Troubleshooting

Deployment Errors: Make sure your package.json is correctly set up and all dependencies are installed before deploying.
Environment Issues: If the browser does not open, check if the headless mode is enabled and ensure that Chrome and ChromeDriver are installed on the server.
Timeouts and Failures: Adjust the Selenium script to increase the wait time if elements take longer to load.

Conclusion

By following these steps, you have successfully hosted a Selenium JavaScript Node application on Azure and configured it to send email notifications if the test fails three times in a row. This setup helps automate your testing process and keeps you informed of any critical issues without constant manual checking.

Remember to keep monitoring your Azure services and update your Selenium scripts as your web application evolves.

Happy testing! 🚀

How to JS: Automate testing with Selenium

Roel — Wed, 28 Aug 2024 08:23:07 +0000

How to Automate Browser Testing with Selenium in JavaScript

Automated browser testing is a must for any web developer to ensure their applications function correctly. In this post, we'll walk through setting up Selenium with JavaScript to automate a simple browser task: opening a webpage and clicking a button.

Prerequisites

To follow along, you’ll need:

Node.js and npm installed.
Google Chrome and ChromeDriver installed (or another browser and its respective driver).

Step 1: Set Up Your Project

First, create a new folder for your project. Open your terminal and run:

mkdir selenium-test
cd selenium-test

Next, initialize a new Node.js project:

npm init -y

This command generates a package.json file that keeps track of your project’s dependencies.

Step 2: Install Selenium WebDriver

We’ll use npm to install Selenium WebDriver and ChromeDriver:

npm install selenium-webdriver chromedriver --save

These packages provide the necessary libraries and tools to automate Chrome with Selenium.

Step 3: Write Your Selenium Script

Create a new file named test.js in your project folder. This script will open a webpage, wait for a button to become clickable, and then click it.

const { Builder, By, until } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

// Helper function to pause the script
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTest() {
  // Configure Chrome to suppress unwanted prompts
  let options = new chrome.Options();
  options.addArguments('--no-default-browser-check', '--no-first-run', '--disable-default-apps', '--disable-infobars');

  let driver = await new Builder()
    .forBrowser('chrome')
    .setChromeOptions(options)
    .build();

  try {
    // Open the target webpage
    await driver.get('https://example.com'); // Change this URL to the site you want to test

    // Wait for an element to load
    await driver.wait(until.elementLocated(By.className('sample-class')), 10000);
    console.log('Found element with class "sample-class".');

    // Generic wait for 6 seconds to handle any dynamic content
    await sleep(6000);

    // Wait for the button to be clickable
    await driver.wait(until.elementLocated(By.id('sample-button')), 10000);

    // Re-locate the button to ensure it’s still in the DOM
    let button = await driver.findElement(By.id('sample-button'));
    console.log('Button located:', button);

    // Click the button
    await button.click();
    console.log('Button clicked successfully.');

    // Wait for the next page or action to load
    await driver.wait(until.urlContains('new-page'), 10000);
    console.log('Navigation to new page was successful.');

  } catch (error) {
    console.error('Error during the test:', error);
  } finally {
    // Always close the browser
    await driver.quit();
  }
}

runTest();

Step 4: Run the Script

To execute your script, run:

node test.js

Chrome will open and perform the actions defined in your script. Watch the console for logs indicating each step's progress.

Troubleshooting

StaleElementReferenceError: This happens when the DOM changes after finding an element. To avoid this, always re-locate elements right before interacting with them.
Timeouts: If an element takes longer to load, increase the timeout in driver.wait().

Conclusion

You now have a basic setup for automated browser testing using Selenium and JavaScript. This setup can be easily expanded to include more complex interactions, checks, and validation steps.

Remember to keep your drivers updated to match your browser versions and consider using a headless mode for CI/CD environments.

If you want to host it in Azure check out my other post: https://dev.to/iamrule/how-to-azure-host-a-selenium-javascript-node-application-in-azure-and-send-email-notifications-on-failures-2aio

Happy testing!

How to C#: Validating a JSON to a JSON Schema

Roel — Tue, 20 Aug 2024 10:00:49 +0000

Validating JSON against a JSON schema is crucial when ensuring the data your application consumes meets the expected structure. Here's how you can quickly set this up in a C# console application.

1. Set Up Your Project

Start by creating a new C# Console Application:

dotnet new console -n JsonValidationDemo
cd JsonValidationDemo

2. Install Required Packages

To validate JSON against a schema, you'll need to install the Newtonsoft.Json and Newtonsoft.Json.Schema packages. Use the following commands:

dotnet add package Newtonsoft.Json
dotnet add package Newtonsoft.Json.Schema

3. Add Your JSON and Schema

For this example, let's assume you have a sample.json and schema.json files.

sample.json:

{
  "name": "John Doe",
  "age": 30
}

schema.json:

{
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "age": { "type": "integer" }
  },
  "required": [ "name", "age" ]
}

4. Write the Validation Code

In Program.cs, add the following code to read the JSON and schema, then validate:

using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using Newtonsoft.Json.Schema;
using System;
using System.IO;

class Program
{
    static void Main(string[] args)
    {
        string jsonData = File.ReadAllText("sample.json");
        string schemaData = File.ReadAllText("schema.json");

        JSchema schema = JSchema.Parse(schemaData);
        JObject json = JObject.Parse(jsonData);

        if (json.IsValid(schema, out IList<string> errors))
        {
            Console.WriteLine("JSON is valid.");
        }
        else
        {
            Console.WriteLine("JSON is invalid. Errors:");
            foreach (var error in errors)
            {
                Console.WriteLine($"- {error}");
            }
        }
    }
}

5. Run the Application

Execute the program using:

dotnet run

This will tell you if your JSON matches the schema, providing detailed errors if not.

Extras: Advanced Tips for JSON Schema Validation

1. Strict Validation with `additionalProperties`

To ensure that your JSON object does not contain any properties not defined in the schema, use the additionalProperties keyword in your schema:

{
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "age": { "type": "integer" }
  },
  "required": [ "name", "age" ],
  "additionalProperties": false
}

With additionalProperties: false, any extra properties in your JSON will cause validation to fail, enforcing a strict schema.

2. Best Practice: Validate Required Fields

Always specify the required fields in the required array to prevent accidental omission. For example:

Updated `schema.json`:

{
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "age": { "type": "integer" },
    "email": { "type": "string" }
  },
  "required": [ "name", "age" ]
}

In this example, the email field is optional, but name and age are required. If the JSON does not include name or age, validation will fail.

3. Best Practice: Use Version Control for Schemas

Keep your JSON schemas in version control, just like your code. This allows you to track changes over time and ensures consistency. Here’s a basic example of how you might organize your schemas:

Project Structure:

/JsonValidationDemo
  /Schemas
    - v1.schema.json
    - v2.schema.json
  Program.cs

In this setup, you might start with v1.schema.json and evolve to v2.schema.json as your application grows, ensuring that you can always refer back to or validate against older schemas if needed.

Conclusion

Validating JSON against a schema is a straightforward process with C#. By leveraging Newtonsoft.Json and Newtonsoft.Json.Schema, you can easily ensure your data adheres to the expected format. Implementing strict validation with additionalProperties, carefully managing required fields, and versioning your schemas are key practices to make your application more robust and reliable.

How to C#: Using the JObject Class

Roel — Mon, 01 Jul 2024 13:26:30 +0000

Working with JSON is essential in many C# applications. The JObject class from the Newtonsoft.Json library makes it easy to manipulate JSON data. Here’s a quick guide with practical tips and a real-world example to help you get the most out of JObject.

Installing Newtonsoft.Json

Make sure you have the Newtonsoft.Json package installed:

dotnet add package Newtonsoft.Json

Creating and Parsing JSON

Creating a JObject from a JSON string:

using Newtonsoft.Json.Linq;

string jsonString = @"{ 'name': 'John', 'age': 30 }";
JObject person = JObject.Parse(jsonString);

Creating a JObject programmatically:

JObject person = new JObject
{
    { "name", "John" },
    { "age", 30 }
};

Accessing Data

Access properties using indexers or the Value<T> method:

string name = person["name"].ToString();
int age = person["age"].Value<int>();

Console.WriteLine($"Name: {name}, Age: {age}");

Modifying JObject

Add or update properties:

person["name"] = "Jane";
person["email"] = "jane@example.com";

Remove properties:

person.Remove("age");

Traversing JObject

For nested JSON structures, use SelectToken:

JObject nestedObject = JObject.Parse(@"{ 'person': { 'name': 'John', 'age': 30 } }");
JToken nameToken = nestedObject.SelectToken("$.person.name");

Console.WriteLine(nameToken.ToString()); // Output: John

Real-World Example: Configuring API Settings

Let's look at a practical example where we manage API settings using JObject.

appsettings.json:

{
  "ApiSettings": {
    "TwitterApiKey": "your-api-key",
    "TwitterApiSecret": "your-api-secret",
    "BearerToken": "your-bearer-token"
  }
}

Loading and Using API Settings:

using System.IO;
using Newtonsoft.Json.Linq;

class Program
{
    static void Main(string[] args)
    {
        var json = File.ReadAllText("appsettings.json");
        JObject config = JObject.Parse(json);

        var apiSettings = config["ApiSettings"];

        string apiKey = apiSettings["TwitterApiKey"].ToString();
        string apiSecret = apiSettings["TwitterApiSecret"].ToString();
        string bearerToken = apiSettings["BearerToken"].ToString();

        Console.WriteLine($"API Key: {apiKey}");
        Console.WriteLine($"API Secret: {apiSecret}");
        Console.WriteLine($"Bearer Token: {bearerToken}");
    }
}

Tips and Best Practices

Validate JSON Structure: Always validate your JSON structure before parsing to avoid runtime errors.

   if (config["ApiSettings"] == null)
   {
       throw new Exception("ApiSettings section is missing in appsettings.json");
   }

Handle Null Values: Ensure you handle potential null values to prevent NullReferenceException.

   string apiKey = apiSettings["TwitterApiKey"]?.ToString() ?? "default-api-key";

Use Strongly Typed Classes: For complex configurations, consider deserializing JSON into strongly-typed classes for better maintainability.

   var apiSettings = config["ApiSettings"].ToObject<ApiSettings>();

   public class ApiSettings
   {
       public string TwitterApiKey { get; set; }
       public string TwitterApiSecret { get; set; }
       public string BearerToken { get; set; }
   }

Leverage LINQ to JSON: Use LINQ queries to filter and select JSON data.

   var keys = config["ApiSettings"]
               .Children<JProperty>()
               .Select(p => p.Name)
               .ToList();

   keys.ForEach(Console.WriteLine);

Conclusion

The JObject class in Newtonsoft.Json is a powerful tool for working with JSON in C#. From basic parsing and manipulation to advanced usage and best practices, this guide provides a solid foundation. Keep experimenting and applying these techniques in your projects to handle JSON data efficiently. Happy coding!

How to configure API Versioning in .NET 8

Roel — Sat, 29 Jun 2024 22:11:44 +0000

Implementing API Versioning in .NET 8 with Evolving Models

What if you want to create a robust API and need to manage different versions to ensure backward compatibility, especially when models evolve over time? The default .NET application template doesn’t provide this out of the box, so here's a guide to make this process simpler.

Requirements

.NET 8 Web API project
The following packages:

<ItemGroup>
    <PackageReference Include="Asp.Versioning.Http" Version="8.0.0" />
    <PackageReference Include="Asp.Versioning.Mvc.ApiExplorer" Version="8.0.0" />
</ItemGroup>

Guide

Follow these steps to implement versioning in your .NET 8 Web API project, including handling evolving models.

Add the references above to the project
Configure Services in Program.cs:

   var builder = WebApplication.CreateBuilder(args);

   builder.Services.AddApiVersioning(options =>
   {
       options.DefaultApiVersion = new ApiVersion(1, 0);
       options.AssumeDefaultVersionWhenUnspecified = true;
       options.ReportApiVersions = true;
       options.ApiVersionReader = ApiVersionReader.Combine(
           new UrlSegmentApiVersionReader(),
           new HeaderApiVersionReader("X-Api-Version")
       );
   }).AddApiExplorer(options =>
   {
       options.GroupNameFormat = "'v'VVV";
       options.SubstituteApiVersionInUrl = true;
   });

   builder.Services.AddControllers();
   builder.Services.AddEndpointsApiExplorer();
   builder.Services.AddSwaggerGen(c =>
   {
       c.SwaggerDoc("v1", new OpenApiInfo { Title = "My API - V1", Version = "v1.0" });
       c.SwaggerDoc("v2", new OpenApiInfo { Title = "My API - V2", Version = "v2.0" });
   });

   var app = builder.Build();

   if (app.Environment.IsDevelopment())
   {
       app.UseSwagger();
       app.UseSwaggerUI();
   }

   app.UseHttpsRedirection();
   app.UseAuthorization();
   app.MapControllers();
   app.Run();

Implement Versioned Controllers: Create versioned controllers by decorating them with the ApiVersion attribute:

   namespace MyApp.Controllers.v1
   {
       [ApiVersion("1.0")]
       [Route("api/v{version:apiVersion}/[controller]")]
       [ApiController]
       public class WorkoutsController : ControllerBase
       {
           [MapToApiVersion("1.0")]
           [HttpGet("{id}")]
           public IActionResult GetV1(int id)
           {
               return Ok(new { Message = "This is version 1.0" });
           }
       }
   }

   namespace MyApp.Controllers.v2
   {
       [ApiVersion("2.0")]
       [Route("api/v{version:apiVersion}/[controller]")]
       [ApiController]
       public class WorkoutsController : ControllerBase
       {
           [MapToApiVersion("2.0")]
           [HttpGet("{id}")]
           public IActionResult GetV2(int id)
           {
               return Ok(new { Message = "This is version 2.0", NewField = "New data" });
           }
       }
   }

Handling Evolving Models: When models evolve, create separate model classes for each version to maintain backward compatibility.

Version 1 Model:

   public class WorkoutV1
   {
       public int Id { get; set; }
       public string Name { get; set; }
   }

Version 2 Model with Additional Fields:

   public class WorkoutV2
   {
       public int Id { get; set; }
       public string Name { get; set; }
       public string Description { get; set; }  // New field
   }

Update the controller methods to use the appropriate models:

   namespace MyApp.Controllers.v1
   {
       [ApiVersion("1.0")]
       [Route("api/v{version:apiVersion}/[controller]")]
       [ApiController]
       public class WorkoutsController : ControllerBase
       {
           [MapToApiVersion("1.0")]
           [HttpGet("{id}")]
           public IActionResult GetV1(int id)
           {
               var workout = new WorkoutV1 { Id = id, Name = "Workout V1" };
               return Ok(workout);
           }
       }
   }

   namespace MyApp.Controllers.v2
   {
       [ApiVersion("2.0")]
       [Route("api/v{version:apiVersion}/[controller]")]
       [ApiController]
       public class WorkoutsController : ControllerBase
       {
           [MapToApiVersion("2.0")]
           [HttpGet("{id}")]
           public IActionResult GetV2(int id)
           {
               var workout = new WorkoutV2 { Id = id, Name = "Workout V2", Description = "This is a description." };
               return Ok(workout);
           }
       }
   }

Configure Swagger Documentation: Ensure each API version has its own Swagger documentation:

   builder.Services.AddSwaggerGen(c =>
   {
       c.SwaggerDoc("v1", new OpenApiInfo { Title = "My API - V1", Version = "v1.0" });
       c.SwaggerDoc("v2", new OpenApiInfo { Title = "My API - V2", Version = "v2.0" });
   });

Run Your Application: Build and run your application to see the versioned API in action:

   dotnet run

Access Different API Versions: Use the URL to access different versions of your API:
- Version 1.0: https://localhost:5001/api/v1/workouts/{id}
- Version 2.0: https://localhost:5001/api/v2/workouts/{id}

Deprecating API Versions

To deprecate an old API version, set the Deprecated property on the ApiVersion attribute:

[ApiVersion("1.0", Deprecated = true)]
[Route("api/v{version:apiVersion}/[controller]")]
[ApiController]
public class DeprecatedController : ControllerBase
{
    [HttpGet("{id}")]
    public IActionResult GetV1(int id)
    {
        return Ok(new { Message = "This version is deprecated." });
    }
}

Organizing Versioned Controllers and Models in Solution Explorer

To keep your project organized, especially as you add more versions, follow these tips:

Create a Folder Structure:
- Create a main folder called Controllers and subfolders for each version, e.g., v1, v2.
- Place each version of your controllers in the respective folder.

Example structure:

   - Controllers
     - v1
       - WorkoutsController.cs
     - v2
       - WorkoutsController.cs
   - Models
     - v1
       - WorkoutV1.cs
     - v2
       - WorkoutV2.cs

Naming Conventions:
- Use clear and consistent naming conventions to differentiate between versions.
- Include the version number in the model and controller class names if needed for clarity, e.g., WorkoutV1, WorkoutV2.

Updating Namespaces:

Ensure the namespaces reflect the folder structure to avoid conflicts.
Example:

 namespace MyApp.Models.v1
 {
     public class WorkoutV1
     {
         public int Id { get; set; }
         public string Name { get; set; }
     }
 }

 namespace MyApp.Models.v2
 {
     public class WorkoutV2
     {
         public int Id { get; set; }
         public string Name { get; set; }
         public string Description { get; set; }  // New field
     }
 }

Consistent Routing:
- Ensure your routing attributes are consistent and clear to indicate the version in the URL path.

All Done!

Now you have a versioned API that can evolve smoothly while maintaining backward compatibility. Don’t forget to document and communicate breaking or big changes! Feel free to experiment and make it even more advanced!

The best webtools I can find for you to use

Roel — Mon, 17 Jun 2024 17:25:53 +0000

Some of the best tools I can find on the web that I frequently use. This list will always be under construction. Feel free to comment with your tips!

Productivity and Utilities

Ninite - Bulk install multiple applications.
CCleaner - System optimization and cleaning.
Chocolatey - Windows package manager.
Everything - Fast file search.
AutoHotkey - Automation scripting language.
Greenshot - Screenshot tool.
TreeSize - Disk space management.
IrfanView - Image viewer and editor.
Recuva - File recovery.
Speccy - System information.
Ditto - Clipboard manager.
F.lux - Screen color adjustment.
Rainmeter - Desktop customization.
Stardock Fences - Desktop organization.
SumatraPDF - PDF reader.
7-Zip - File archiver.
WinRAR - File archiver.
PeaZip - File archiver.
KeePass - Password manager.
Launchy - Application launcher.
Executor - Application launcher.
Clover - Windows Explorer tabs.
Listary - Search utility.
WizTree - Disk space management.
Belarc Advisor - System information.

Development

Visual Studio Code - Code editor.
Sublime Text - Code editor.
Atom - Code editor.
JetBrains IntelliJ IDEA - Java IDE.
Postman - API development.
Insomnia - API client.
Docker - Containerization.
Git - Version control.
GitHub Desktop - Git client.
SourceTree - Git client.
ngrok - Secure introspectable tunnels.
Pinggy - Secure tunnels to localhost.
XAMPP - Local server environment.
WAMP - Windows server environment.
Laragon - Lightweight server environment.
Vagrant - Development environments.
Anaconda - Data science and machine learning.
Jupyter - Interactive notebooks.
Visual Studio - IDE for various languages.
PyCharm - Python IDE.
Eclipse - IDE for Java and other languages.
NetBeans - IDE for Java and other languages.
PhpStorm - IDE for PHP.
WebStorm - IDE for JavaScript.
Brackets - Code editor for web development.

Design and Multimedia

Photopea - Online image editor.
GIMP - Image editor.
Inkscape - Vector graphics editor.
Blender - 3D modeling and animation.
Krita - Digital painting.
Audacity - Audio editing.
OBS Studio - Screen recording and streaming.
HandBrake - Video conversion.
DaVinci Resolve - Video editing.
Lightworks - Video editing.
Affinity Photo - Image editor.
Affinity Designer - Vector graphics editor.
Sketch - Design tool.
Figma - Design collaboration.
Milanote - Visual organization.
Canva - Online design tool.
Pixlr - Online photo editor.
Vectr - Vector graphics editor.
Gravit Designer - Vector design app.
CorelDRAW - Vector graphics editor.
Aseprite - Pixel art tool.
Procreate - Digital painting (iPad).
ArtRage - Digital painting.
ZBrush - 3D sculpting.
Cinema 4D - 3D modeling and animation.

Communication and Collaboration

Slack - Team communication.
Discord - Voice, video, and text chat.
Zoom - Video conferencing.
Microsoft Teams - Collaboration and communication.
Trello - Project management.
Asana - Project management.
Notion - All-in-one workspace.
Miro - Online whiteboard.
Figma - Design collaboration.
Milanote - Visual organization.
Basecamp - Project management.
Monday.com - Project management.
ClickUp - Project management.
Airtable - Project management and database.
Wrike - Project management.
Google Meet - Video conferencing.
GoToMeeting - Video conferencing.
Skype - Voice, video, and text chat.
Cisco Webex - Video conferencing.
TeamViewer - Remote access and support.
Yammer - Enterprise social network.
Chanty - Team communication.
Flock - Team communication.

Web Development

Bootstrap - Front-end framework.
Tailwind CSS - Utility-first CSS framework.
jQuery - JavaScript library.
React - JavaScript library for building user interfaces.
Vue.js - JavaScript framework.
Angular - JavaScript framework.
Next.js - React framework.
Nuxt.js - Vue.js framework.
Svelte - JavaScript framework.
Django - Python web framework.
Flask - Python web framework.
Ruby on Rails - Ruby web framework.
Laravel - PHP web framework.
Symfony - PHP web framework.
ASP.NET - Web framework for .NET.
Spring - Java web framework.
Gatsby - React-based static site generator.
Hugo - Static site generator.
Jekyll - Static site generator.
WordPress - Content management system.
Drupal - Content management system.
Magento - E-commerce platform.
Shopify - E-commerce platform.
WooCommerce - E-commerce plugin for WordPress.
Ghost - Publishing platform.

Security and Privacy

LastPass - Password manager.
1Password - Password manager.
Bitwarden - Password manager.
NordVPN - VPN service.
ExpressVPN - VPN service.
Malwarebytes - Anti-malware.
Avast - Antivirus.
Kaspersky - Antivirus.
VeraCrypt - Disk encryption.
Privacy Badger - Browser privacy.
Adblock Plus - Ad blocker.
uBlock Origin - Ad blocker.
ProtonMail - Encrypted email.
Tutanota - Encrypted email.
Signal - Encrypted messaging.
Tor Browser - Anonymous browsing.
DuckDuckGo - Private search engine.
Brave - Privacy-focused browser.
GlassWire - Network monitoring.
ZoneAlarm - Firewall.
Emsisoft - Anti-malware.
SuperAntiSpyware - Anti-spyware.
HitmanPro - Malware removal.
RogueKiller - Malware removal.
Spybot - Anti-spyware.

Cloud Storage and Backup

Google Drive - Cloud storage.
Dropbox - Cloud storage.
OneDrive - Cloud storage.
iCloud - Cloud storage.
pCloud - Cloud storage.
Sync.com - Cloud storage.
Backblaze - Backup service.
CrashPlan - Backup service.
Acronis True Image - Backup software.
Carbonite - Backup service.
IDrive - Backup service.
SpiderOak - Cloud storage.
Zoolz - Cloud backup.
Livedrive - Cloud backup.
Degoo - Cloud storage.
Mega - Cloud storage.
Tresorit - Cloud storage.
Box - Cloud storage.
Amazon Drive - Cloud storage.
HubiC - Cloud storage.
Internxt - Cloud storage.
Jottacloud - Cloud storage.
ElephantDrive - Cloud backup.
MSP360 - Backup software.
Duplicati - Backup software.

Miscellaneous

Rainmeter - Desktop customization.
Stardock Fences - Desktop organization.
ShareX - Screen capture and file sharing.
LibreOffice - Office suite.
OpenOffice - Office suite.
SumatraPDF - PDF reader.
7-Zip - File archiver.
WinRAR - File archiver.
PeaZip - File archiver.
KeePass - Password manager.
Launchy - Application launcher.
Executor - Application launcher.
Clover - Windows Explorer tabs.
Listary - Search utility.
WizTree - Disk space management.
Belarc Advisor - System information.
F.lux - Screen color adjustment.
Ditto - Clipboard manager.
RescueTime - Time management.
Toggl - Time tracking.
Pomodone - Pomodoro timer.
Focus@Will - Productivity music.
Noisli - Background noise generator.
Cold Turkey - Distraction blocker.
Freedom - Distraction blocker.

This is just the first draft and will be expanded upon soon! If you have more tools we can add feel free to comment!

DEV Community: Roel

Analyze Your MTG Deck in Seconds with MTGDeckTag.com

How to Vue.js: Create Your First Project Quickly (using Vite)

Why Vite?

Step 1: Initialize the Project

Step 2: Configure the Project

Step 3: Install Dependencies

Step 4: Run the Development Server

Step 5: Clean up the boilerplate

How to: Using a clever way to store multiple values in a single enum using bitmask

Step 1: Define Categories as Powers of 2

Step 2: Store Combined Consent as an Integer

Step 3: Check Consent Using Bitwise Operations

Step 4: Deserialize from Stored Value

Step 5: Extend with New Categories

Step 6: Store and Retrieve Consent in Cookies

Step 7: Use Consent Flags in Middleware or Services

Step 8: Optional – Serialize to Frontend

How to C#: Building a .NET 9 API with SQL Server and Entity Framework Core

Prerequisites

Creating a New Project

Adding the Required Packages

Creating the Database

Defining the Model

Creating the Database Context

Applying Migrations

Configuring the Connection String

!!! MAKE SURE TO INCLUDE THE .ENV INTO YOUR .GITIGNORE. NEVER PUSH THIS TO SOURCE CONTROL/GIT. !!!

Creating the Database

Configuring the Application

Creating a Controller

Running the Application

Conclusion

- Using connection pooling to manage multiple database requests efficiently.

How to C#: Add Configuration to your .NET 8 Web API Application

Prerequisites

Step 1: Understanding the Default Configuration

Step 2: Adding Custom Configuration Sections

Step 3: Create a Strongly-Typed Configuration Class

Step 4: Register the Configuration in Program.cs

Step 5: Access Configuration in Controllers or Services

Injecting into a Controller

Injecting into a Service

Create a Service Interface and Class

Register the Service in Program.cs

Modify the Controller to Use the Service

Step 6: Run and Test the Application

Step 7: Secure Your Sensitive Data

Using User Secrets for Development

Modifying Program.cs to Include User Secrets

Conclusion

How to C#: Creating a simple CRUD page with Blazor and EntityFrameworkCore

Prerequisites

Step 1: Set Up the Data Model

Step 2: Configure the Database Connection

Step 3: Create the Database

Step 4: Build the Blazor Components

Step 5: Run and Test the Application

Conclusion

How to Azure: Host a Selenium JavaScript Node Application in Azure and Send Email Notifications on Failures

How to Host a Selenium JavaScript Node Application in Azure and Send Email Notifications on Failures

Prerequisites

Step-by-Step Instructions

Step 1: Prepare Your Selenium Script

Step 2: Create an Azure Web App Using the Azure Portal

Step 3: Configure the Application Settings

Step 4: Set Up Azure Monitor and Alerts

Step 5: Test Your Setup

Common Issues/Troubleshooting

Conclusion

How to JS: Automate testing with Selenium

How to Automate Browser Testing with Selenium in JavaScript

Prerequisites

Step 1: Set Up Your Project

Step 2: Install Selenium WebDriver

Step 3: Write Your Selenium Script

Step 4: Run the Script

Troubleshooting

Conclusion

How to C#: Validating a JSON to a JSON Schema

Step 4: Register the Configuration in `Program.cs`

Register the Service in `Program.cs`

Modifying `Program.cs` to Include User Secrets

1. Strict Validation with `additionalProperties`

Updated `schema.json`: