We tried to be clever and decided to ignore the first normal form (1NF) to "simplify" our database. And it went horribly. Read the story how.

Database Normalization: A Simple Tale of Ignoring 1NF

Let's dive into a quick chat about database normalization. If you've heard of it, awesome. If not, do not worry. This little story may shed light on why it's important.

### Database Normalization in a Nutshell

Picture this: you're trying to organize a big box of mixed-up Lego bricks. You'd probably sort them by color, size, or type, right? Database normalization is like that but for data! It's a way to sort and store your data neatly to avoid mix-ups and make sure everything is easy to find. For those who fancy a textbook definition, Wikipedia tells us:

> Database normalization is organizing a relational database to reduce data redundancy and improve data integrity.

In simpler terms: it's a set of rules (or "normal forms") that helps keep your data organized and your database running smoothly. However, the smoother your data, the trickier it might be to pull specific pieces when you need them.

### Bypassing 1NF: A Shortcut Gone Wrong
What this article will be a real story I have encountered in the past with one of the projects, where we tried to be clever and decided to ignore the first normal form (1NF) to "simplify" our database. 

Just to clarify, 1NF says:

> Every field should contain a single value, no sets of values or nested records allowed.

In other words: "Don't put tables inside of tables." But, of course, we did just that—tucked a table into another and found ourselves in a mess of complications and headaches.

## The story

Our journey commenced with the seemingly straightforward task of crafting a mechanism to store varied types of content – encompassing charts, custom HTML content, and checklists. The initial thought process nudged us toward the creation of a single table, structured as follows:

```sql
create table [dbo].[ContentSelection]
(
	[ContentPartSelectionID] int identity (1, 1) not null,
	[ConfigurationJSON] nvarchar(max) null,
	[ProfileTabID] int not null,
	[ContentType] int not null,
);
```

A singular majestic table, `ContentSelection`, was meant to graciously host various content types - charts, HTML blobs, or checklists, all neatly serialized and tucked into the `ConfigurationJSON` column. Oh, and a polite `ContentType` column to nudge us about what was packed inside each JSON, making deserialization ez thanks to .NET wizards like `System.Text.Json` and `Newtonsoft`.

### Problem 1: Navigating the Puzzle of Configuration Updates

Oh, the joys of updating configurations! Especially when dealing with JSON, it turned out to be a notable quest in our database management journey. Even seemingly simple tasks, like tweaking a chart's `Title` attribute, uncovered some pretty significant hurdles embedded in this method.

#### Simple Title Update in code: A Walk in the Park

In the world of coding, this task seemed like a walk in the park. The steps of deserialization, executing the update, and saving the JSON again could be done in a few simple steps:

```csharp
var data = JsonConvert.DeserializeObject<ChartConfiguration>(chart.ConfigurationJSON);
data.Title = "New Title";
chart.ConfigurationJSON = JsonConvert.SerializeObject(data);
// And the chart is saved!
```
This snippet of C# code allows developers to change the `Title` without diving deep into the entire JSON string. However, as the application goes, the code was all over the place, and this deserialization and serialization were done in many places. This is a code smell; we should have done it in one place. Sometimes, we just took the whole string and saved it as it is. I just trusted(hoped) that the client is sending the configuration in the correct state. Yeah, but that's a different story.

#### Simple but Not So Simple: The Database Update

Trying to update the configuration JSON directly within the database manually gave us a few options, each with its own set of complex puzzles:

1. **Whole JSON String Update:**
```sql
UPDATE [dbo].[ContentSelection] 
SET [ConfigurationJSON] = '{"Title": "New Title", "Type": "Chart", ...}'
WHERE [ContentPartSelectionID] = 1
```
Surprisingly, updating the entire JSON string, while seemingly straightforward, demands a meticulous understanding of the existing data structure to prevent any accidental data adventures (or misadventures).

2. **Making Friends with SQL Server’s JSON_MODIFY Function:**
```sql
UPDATE [dbo].[ContentSelection]
SET [ConfigurationJSON] = JSON_MODIFY([ConfigurationJSON], '$.Title', 'New Title')
WHERE [ContentPartSelectionID] = 1
```
The `JSON_MODIFY` function seemed like a neat and tidy update approach. Yet, it introduced a new set of complexities, particularly for those developers who might not be best buddies with SQL JSON manipulation functions.

#### HTML Property Challenges: An Additional Twist 

And then, things got particularly interesting when dealing with properties that encapsulate entire HTML strings. Direct updates weren't quite in the cards due to the necessity of escaping quotes to keep our JSON string in good shape. Thus, what seems like a straightforward update morphs into a careful dance of ensuring every character is correctly escaped and validated, amplifying the possibilities for error and inefficiency in database management.

---

### Problem 2: Leaping Over Initial Data Insertion Hurdles

Inaugurating a new production instance entailed inserting a wide variety of content—charts, checklists, and the like—into the `ContentSelection` table. What seemed like a straightforward task was, in reality, a hidden obstacle course.

#### The balance between Quantity vs. Quality 

Inserting many rows into the `ContentSelection` table meant wrestling with large strings of JSON configurations. Each piece of content, whether a chart or checklist, demanded a unique, error-free JSON string to guarantee smooth sailing in functionality and display.

Example JSON:
```json
{
  "Title": "Sample Chart",
  "Type": "Chart",
  "Configuration": {
    "Type": "Bar",
    "Data": {
      "Labels": ["January", "February", "March"],
      "Datasets": [{"Label": "Monthly Sales", "Data": [30, 25, 45]}]
    }
  }
}
```
Even the tiniest misstep, like a missing comma or mislabeled key, could introduce:

- **Data Integrity:** A chance of mischievous JSON disrupting data retrieval or manipulation.
- **User Experience:** The risk of misconfigurations causing a little chaos in content display or UI interactions.
- **Developer Efficiency:** The potential time-drain of debugging and correcting JSON strings.

#### The Sneaky "What-If" of Mistakes 

While seemingly trivial, an error in the JSON string can secretly trigger a chain reaction of operational disruptions, impacting developers and end-users alike. Though subtle, this issue beautifully underscores the crucial nature of precise data management and hints at the complex challenges that emerge when diverting from tried-and-true database normalization practices.

---

### Problem 3: Data Retrieval

While seemingly simple, extracting data from the `ContentSelection` table unveiled its complexity in deserializing JSON strings. This complexity, particularly when handling larger objects like comprehensive dashboards requiring multiple content elements, swells even more in cloud environments like Azure, where every computational second counts—both in performance and pennies.

### Problem 3.5 Search Operations: Not So Light on Serialized Columns 

Embarking on search operations within serialized columns is not just a stroll in the tech park. Here we are, navigating through JSON strings, demanding not just a splash, but a veritable ocean of additional computational prowess—especially when side-eyed with the columnar searches in our ever-so-organized normalized database setup. And as those JSON objects swell in size and complexity, our search operations mutate, becoming an increasingly obstinate beast, voraciously consuming resources and casually nudging our end-users’ response times into the slow lane.

And nvarchar(max), oh what a whimsical challenge for standard SQL server full search – a perfect storm of complexity all bundled up with a neat little bow. Thus, the serialized columns sashay through, daring us to keep pace without tripping over the nuances of adept database management. May the odds be ever in our favor!


### Problem 4: The Need for a Schema Update
We had multiple model classes within the source code with this comment.
> // Careful with renaming any of the properties here!!! - will break existing content parts

That's it. That explains it all. 

## The Solution: A Nod to 1NF

To alleviate the problems mentioned above, we pivoted towards adhering to the First Normal Form (1NF). It entailed restructuring our database, primarily by creating distinct tables for each content type, thus eliminating the need for JSON serialization within the database.

```sql
-- Original table, omitting the JSON column
create table [dbo].[ContentSelection]
(
    [ContentPartSelectionID] int identity (1, 1) not null,
    [ProfileTabID] int not null,
    [ContentType] int not null,
);

-- Additional tables
create table [dbo].[ChartConfiguration]
(
    [ContentPartSelectionID] int not null,
    [Title] nvarchar(max) null,
    [ChartType] int not null, -- e.g., 1 = Bar, 2 = Line, 3 = Pie
    [Values] nvarchar(max) not null,
    [XName]  nvarchar(100) not null,
    [YName]  nvarchar(100) not null
);

create table [dbo].[CustomContentConfiguration]
(
    [ChecklistConfigurationID] int identity (1, 1) not null,
    [ContentPartSelectionID] int not null,
    [Title] nvarchar(max) null,
    [Html] nvarchar(max) null,
);
... -- you get the idea
```

While effectively eliminating the need for extensive JSON operations within SQL, this solution required a meticulous migration process, ensuring existing customer data was transferred accurately and securely to the new structure.

### Navigating Through Data Migration

The transition demanded the crafting of migration scripts for each existing customer instance. 

```sql
insert into ChartConfiguration(ContentPartSelectionID, Title, Values, Type, XName, YName)
select
    ContentPartSelectionID,
    Json_Value(ConfigurationJSON, '$.title'),	   
    Json_Value(ConfigurationJSON, '$.values'),
    Json_Value(ConfigurationJSON, '$.ChartType'),
    Json_Value(ConfigurationJSON, '$.xName'),
    Json_Value(ConfigurationJSON, '$.yName')
from ContentSelection 
where ContentType = 1
```

Interestingly, this migration was multi-faceted and far from straightforward. For each content type, specific scripts were required. Moreover, each migration script must include checks to ensure data integrity, particularly validating JSON strings and managing instances where the `Json_Value` function misbehaved without apparent reason.

To safeguard against potential mishaps during the migration, the process was executed in two strategic phases: 
1. **Data Migration:** Transfer data without altering the original structure.
2. **Schema Update:** Only after verifying the migrated data did we modify the schema, like deleting the JSON column.

This dual-phase approach provided a safety net, ensuring that if complications arose at any point, a revert to the previous database state was always within reach. While resource-intensive, this strategy underscored the importance of meticulous planning and safeguarding data during migration, especially when restructuring to adhere to normalization principles like 1NF.

## Conclusion
This story concludes with a happy ending. We successfully migrated all our customers to the new structure and can now update the configuration of each content type without any problems. However, this story is not about the happy ending. It's about the issues we faced and how we solved them.

Take this story as a way to remind you to follow the best practices as much as possible. Even if you think you can do it better.

### One last note
Yes, I called them problems, not "challenges" or "opportunities". Because they were problems.


How do we flit between models within these layers, especially when models diverge or beckon another repo or service?

From Converters to Dependency Injection: Navigating Model Migrations

Do you know the three-layer software design? Think of it as tech's equivalent of a sandwich with neatly stacked presentation, logic, and data layers. Now, why choose multiple models over one mammoth model? It's akin to organizing playlists by mood. Nifty, isn't it? In the coding realm, it's about being spick and span. Tiny model tweaks feel more like a brisk walk than a marathon.

But the real query is: how do we flit between models within these layers, especially when models diverge or beckon another repo or service?

## Well, Examples Speak Louder
### Keep It Simple
Suppose a Dog is set to evolve into a DogDto.

``` csharp
public class Dog
{
    public string Name { get; set; }
}

public class DogDto
{
    public string Name { get; set; }
}
```
Seems direct, right? Either use AutoMapper:
``` csharp
Dog dog = new Dog{ Name = "doge"};
DogDto dogDto = _mapper.Map<DogDto>(dog);
```

Or, take the traditional route:
``` csharp
Dog dog = new Dog{ Name = "doge"};
DogDto dogDto = new DogDto { Name = dog.Name };
```

### Navigating Naming Nuisances
What if DogDto opts for a different nomenclature?

``` csharp
public class Dog
{
    public string Name { get; set; }
}

public class DogDto
{
    public string Naming { get; set; }
}
```
You've got two aces up your sleeve: use a FromXX/toXX method or integrate a mapper profile. Here's option one:
``` csharp
public class DogDto
{
    public string Naming { get; set; }

    public static DogDto FromDog(Dog dog)
    {
        return new DogDto
        {
            Naming = dog.Name
        };
    }
}
```
And here you have how would mapper profile look like:
``` csharp
using AutoMapper;

public class UserProfile : Profile
{
    public UserProfile()
    {
        CreateMap<Dog, DogDto>()
            .ForMember(dest => dest.Naming, opt => opt.MapFrom(src => src.Name));
    }
}
```
```csharp
var configuration = new MapperConfiguration(cfg =>
{
     cfg.AddProfile<UserProfile>();
});
```

### When Models are Like Apples and Oranges
``` csharp
public class Dog
{
    public string Name { get; set; }
}

public class DogDto
{
    public int NumberOfLegs { get; set; }
    
    public Superpower SuperPower  { get; set; }
}
```
Time to roll up the sleeves! Converters are the knights in shining armor here:

``` csharp
public interface IConverter<In, Out>
{
    Out Convert(In input);
}

public class DogConverter : IConverter<Dog, DogDto>
{
    // Your conversion magic here!
}
```

## Elevate Your Game: Services Within Converters
Ever bumped into a situation where your models are as different as, well, apples and oranges? And, to spice things up, you need to juggle an `AnimalRepository` or a `FoodService` within your converter. Tough spot, right?

Remember this code?
``` csharp
var converter = new DogConverter(_animalRepository, _foodService, _anotherService, _pleaseStopThisIsTooMuch, userId);
``` 
It might remind you of the infamous spaghetti mess. But fear not, there's a cleaner approach. Let me share a neat trick I've brewed up!

### Step into the World of ConverterFactory
A `ConverterFactory` is like a genie granting your converter wishes.
``` csharp
public class ConverterFactory
{
    private readonly IServiceProvider _serviceProvider;

    public ConverterFactory(IServiceProvider serviceProvider)
    {
        _serviceProvider = serviceProvider;
    }

    public IConverter<InType, OutType> GetConverter<InType, OutType>()
    {
        var converter = _serviceProvider.GetService(typeof(IConverter<InType, OutType>));
        if (converter == null)
        {
            throw new Exception("Missing converter alert!");
        }

        return (IConverter<InType, OutType>)converter;
    }
}
``` 
### Boot Things Up in Startup.cs
Here's where we align our forces. Add your services to the service collection:
```csharp 
services.AddTransient<ConverterFactory>();
services.AddTransient<IConverter<Dog, DogDto>, DogConverter>();
services.AddTransient<IAnimalRepository, AnimalRepository>();
services.AddTransient<IFoodService, FoodService>();
``` 

### Smooth Operations with DogHelper
With everything set, it's showtime:
```csharp 
public class DogHelper
{
    private readonly ConverterFactory _converterFactory;
    public DogHelper(ConverterFactory converterFactory)
    {
        _converterFactory = converterFactory;
    }

///...
    public DogDto TransformDog(Dog input)
    {
        var converter = _converterFactory.GetConverter<Dog, DogDto>();
        return converter.Convert(input);
    }
}
```

What's the magic? No more manually creating converter instances and wrestling with services. Dependency injection sweeps in, handling all the heavy lifting ensuring cleaner and more efficient code. 

## Wrapping Up: A Fresh Look at Tools and Tactics
### Is Automapper Outdated? Let's Debate
Let me drop a bombshell: Could Automapper be sliding into obsolescence? I recently found myself locked in a spirited dialogue with a colleague about its continuing relevance. The crux of the debate? Automapper's Achilles' heel is its runtime error reporting. Get a property name or type conversion wrong, and you're signing up for bug city.

Sure, Automapper shone when replicating models that were virtually identical, especially those property-heavy behemoths we often see in enterprise settings. But let’s be real: Visual Studio's ultra-efficient auto-code completion has redefined the game, making that argument a little wobbly.

### ConverterFactory: A Quick Fix, But Not a Cure-All
Time to tackle the not-so-hidden issue: If you find yourself leaning heavily on something like a ConverterFactory, coupled with dependency injection, it might be time to sniff out potential architectural odors. Could it be a red flag suggesting you revisit your system’s blueprints?

## The Final Takeaway
So, there we are! Whether you're nodding along or vigorously shaking your head, my hope is that this exploration has sparked some intellectual kindling. Got a different approach? Differing opinions? Lay it on me. Let's remember that achieving perfection is less a destination and more an ever-evolving journey. There's always room for development and refinement in the ever-changing tech landscape. So go ahead, share your insights—I'm more than ready for a good round to disscuss!

Shiki is arguably the most popular syntax highlighter out there. How can we improve its performance?

Caching Shiki for Faster Build Times

Shiki is arguably the most popular syntax highlighter out there. It uses the [TextMate grammar system](https://macromates.com/manual/en/language_grammars) with the [VS Code Oniguruma library](https://github.com/microsoft/vscode-oniguruma) to tokenize strings which then can be stylized using VS Code themes or CSS variables. Shiki is the way to go if you want your code to look exactly like that in VS Code.

> Using Shiki is practical because as your favorite languages and themes evolve, your syntax highlighting will evolve as well.

If you're here for the faster build times, go to [faster build times](#faster-build-times). If you've never heard of or used Shiki before, here's a great introduction:

## How does it work?

Although Shiki has a lot of customization options (themes, languages, and custom renderers), at its core, Shiki's [highlighter](https://github.com/shikijs/shiki/blob/main/packages/shiki/src/highlighter.ts) is incredibly easy to work with:

1. Call `getHighlighter` with the theme and languages you need to create a `highlighter` instance, and then
2. Use the `highlighter` methods, such as `codeToHtml`, to take a string of code and transform it to syntax-highlighted HTML.

Of course, there are more details, so make sure to check out [Shiki's configuration and options](https://github.com/shikijs/shiki/tree/main#configuration-and-options). However, if you want to keep things simple, here's how you'd get started:

```js
import { getHighlighter } from "shiki";

// Create a highlighter instance
const highlighter = await getHighlighter({
  theme: "nord",
  langs: ["ts"],
});

const code = `console.log("Here is your code.");`;

// Call a highlighter method to get syntax-highlighted HTML
const output = highlighter.codeToHtml(code, { lang: "ts" });
```

## What are the easiest customizations you can use?

### Using CSS variables for theming

One of the biggest things missing in Shiki is the lack of support for light/dark or dual-theming. While there are several solutions and alternatives out there, none are directly addressed by the library. If you're not restricted to using VS Code themes, you can use **CSS variables for theming**.

```js
import { getHighlighter } from "shiki";

// Create a highlighter instance
const highlighter = await getHighlighter({
  // ✅ Use CSS variables for theming
  theme: "css-variables",
  langs: ["ts"],
});
```

Then use CSS to style your code and create the theming implementation of your choice. Here's a safe starting point for this:

```css
:root {
  --shiki-color-text: #24292f;
  --shiki-color-background: #ffffff;
  --shiki-token-constant: #0550ae;
  --shiki-token-string: #24292f;
  --shiki-token-comment: #6e7781;
  --shiki-token-keyword: #cf222e;
  --shiki-token-parameter: #24292f;
  --shiki-token-function: #8250df;
  --shiki-token-string-expression: #0a3069;
  --shiki-token-punctuation: #24292f;
  --shiki-token-link: #000012;
}

:root .dark-theme {
  --shiki-color-text: #c9d1d9;
  --shiki-color-background: #0d1117;
  --shiki-token-constant: #79c0ff;
  --shiki-token-string: #a5d6ff;
  --shiki-token-comment: #8b949e;
  --shiki-token-keyword: #ff7b72;
  --shiki-token-parameter: #c9d1d9;
  --shiki-token-function: #d2a8ff;
  --shiki-token-string-expression: #a5d6ff;
  --shiki-token-punctuation: #c9d1d9;
  --shiki-token-link: #000012;
}
```

Note: If you prefer to stick with VS Code Themes you might want to check out Anthony Fu's [Shikiji](https://github.com/antfu/shikiji#lightdark-dual-themes), which is an ESM-focused rewrite of Shiki.

### Using custom renderers and CSS counters for line numbers

Custom renderers allow you to define your own custom rendering rules per each element type. The easiest way to understand how custom renderers work is by creating a renderer for line numbers. Instead of using `codeToHtml`, you can use `codeToThemedTokens` from your highlighter instance to obtain an array of tokens and then call `renderToHTML`, passing your tokens and your custom renderer.

```js
import { getHighlighter, renderToHTML } from "shiki";

// Create a highlighter instance
const highlighter = await getHighlighter({
  // ✅ Use CSS variables for theming
  theme: "css-variables",
  langs: ["ts"],
});

const code = `console.log("Here is your code.");`;

// ✅ Tokenize your code to apply your custom renderer
const tokens = highlighter.codeToThemedTokens(code, "ts");

// ✅ Use your custom renderer to get syntax-highlighted HTML
const output = renderToHTML(tokens, {
  elements: {
    line({ children, className, index }) {
      return `<span data-line=${index}
        class=${className}>${children}</span>`;
    },
  },
});
```

You can combine renderers with CSS to create any implementation you might need. Here is an example using [CSS Counters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters) (with a touch of TailwindCSS) for this purpose:

```css
.shiki code {
  @apply grid p-5 font-mono text-sm leading-normal;
}

code {
  counter-reset: line;
}

code > [data-line]::before {
  counter-increment: line;
  content: counter(line);
  @apply mr-6 inline-block w-4 text-right text-gray-500/50;
}

code[data-line-numbers-max-digits="2"] > [data-line]::before {
  @apply w-8;
}

code[data-line-numbers-max-digits="3"] > [data-line]::before {
  @apply w-12;
}
```

A font pairing that I've enjoyed recently is [Schibsted Grotesk](https://fonts.google.com/specimen/Schibsted+Grotesk) with [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono?query=IBM+PLex+Mono). Alright, now let's get to what we're here for _How to get faster build times using Shiki?_

## Faster build times

Regardless of how you use Shiki, the more code you highlight, the more likely it is that you will run into performance issues. After testing, our team concluded that **(a) creating Highlighter instances, (b) loading languages, and (c) generating token explanations are Shiki's most resource-intensive operations**.

> You should make sure that the Highlighter instance is only created once, and that it is bootstrapped asynchronously before calling any of the exposed functions

Shiki provides you with the flexibility to create the implementations you need to meet your syntax highlighting requirements, but you should exercise caution when using this flexibility. There's no built-in caching system or checks to make sure that the Highlighter instance is only created once, so you'll need to create your own.

Creating a caching system doesn't have to be overly complicated. By leveraging [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and abstracting the `getHighlighter` method, you can achieve this.

```ts
import shiki, { type Highlighter, type Theme, type Lang } from "shiki";

// ✅ Use Map to store Highlighter instance promises
const highlighterCache = new Map<string, Promise<Highlighter>>();

export async function getHighlighter({
  theme,
  langs,
}: {
  theme: Theme;
  langs: Lang[];
}) {
  // ✅ Generate identifiers for your instances, check and return if found
  const key = [theme, ...langs].join("-");
  const highlighter = highlighterCache.get(key);
  if (highlighter) return await highlighter;

  // ✅ If an instance hasn't been created, store it and return it
  const highlighterPromise = shiki.getHighlighter({ theme, langs });

  highlighterCache.set(key, highlighterPromise);
  return await highlighterPromise;
}
```

### A word on Shiki's explanations

Shiki's explanations are the biggest hidden bottleneck, though. Understanding Shiki's explanations is key to optimizing performance. Explanations are set to `false` if you're using `codeToHtml`, but with `codeToThemedTokens` you'll find the option: `includeExplanation`, which annotates this option and describes explanations as:

> Whether to include an explanation of each token's matching scopes and why it's given its color. It defaults to false to reduce output verbosity.

Interestingly enough, explanations are considered and included in the source code for both methods. They are exposed to the developer only with `codeToThemedTokens` and documented with a default value of `false`. However, **it turns out that the default value for this option is set to true**, so if performance is your concern and you do not need to make use of explanations, set this option to `false`.

```js
import { getHighlighter } from "@lib/shiki"; // Shiki Cache Abstraction
import { renderToHTML, type Theme, type Lang } from "shiki";

/** ✅ Config */
const theme: Theme = "css-variables";
const lang: Lang = "ts";

const highlighter = await getHighlighter({
  theme,
  langs: [lang],
});

const code = `console.log("Here is your code.");`;

// ✅ Avoid getting explanations if you do not need them
const tokens = highlighter.codeToThemedTokens(code, lang, theme, {
  includeExplanation: false,
});

const output = renderToHTML(tokens, {
  elements: {
    line({ children, className, index }) {
      return `<span data-line=${index}
        class=${className}>${children}</span>`;
    },
  },
});
```

## Final thoughts

If you're using any flavor of markdown and do not need control over Shiki, plugins like [Rehype Pretty Code](https://github.com/atomiks/rehype-pretty-code), which integrate custom renders and caching systems, are excellent choices that align with the concepts explored in this article.

This simple caching and setup solution made our build times a remarkable **80% faster**. We tried various other suggestions, but none worked as effectively as creating a caching system for Shiki Highlighter instances. By implementing these strategies, you can ensure a smoother and faster syntax highlighting experience for your projects.

Here are a couple of things to keep in mind:

- The keys used to identify instances are prone to duplicates if Highlighter instances are created using different aliases, i.e. `typescript` and `ts`. Check Shiki's [language aliases](https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages) and make sure your team has a convention for their use.
- You might not need to build your own caching system. If you aren't using Shiki directly, chances are that this has already been addressed by the libraries you're using.
- Using Shiki in the browser might require a different approach, make sure to check [Shiki's architecture to learn more](https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages).

Huge thanks to: [@ChcJohnie](https://github.com/ChcJohnie) and [@ericvalcik](https://github.com/ericvalcik) for these findings.

The Hidden Costs of Misusing Scheduled Jobs and Messaging Systems

It's a common scenario we've all faced: you've got a table and a scheduled job designed to process this table.

Below is a simplified example of what such a script might look like:
```sql
-- Declare a variable to store the ID of the row to be processed
DECLARE @rowID INT

-- Get the first row from the table to process
SELECT TOP 1 @rowID = ID
FROM TableToProcess
ORDER BY ID ASC

-- Check if a row was found
IF @rowID IS NOT NULL
BEGIN
    -- Perform processing on the selected row (You can put your processing logic here)
    -- For now, we'll add a comment to indicate where the processing happens

    -- Delete the processed row from the table
    DELETE FROM TableToProcess WHERE ID = @rowID
END
```

But what happens when there's no new data to process? Without any contingency, the script will repeatedly hammer your database with fruitless calls, generating redundant traffic and potentially impacting the performance of your entire system.

Now, don't get me wrong. Scheduled jobs are not the enemy. They have a critical role in certain situations, such as scheduling regular email alerts. However, as developers, we sometimes fall into the trap of over-reliance on this tool, leading to unnecessary overhead within our systems.

So, is there a better, more efficient alternative to deal with these situations? Welcome to the realm of messaging systems.

## So, What's a Messaging System?

In essence, a messaging system provides a reliable way to exchange information (in the form of messages) between applications, systems, or services. The main idea here is to enable communication between different components without them necessarily knowing about each other. 

In a messaging system, producers create messages and put them onto the system. Consumers get those messages and do something with them. These systems are crucial for enabling asynchronous processing, meaning that your components don't have to wait around for other tasks to finish. This can significantly enhance performance, scalability, and reliability.

## Message Flow vs Scheduled Task

### Advantages

1. **Real-time Processing**: Messages are processed as they arrive, leading to faster responses.
2. **Decoupling of Processes**: Allows systems to be developed, upgraded, and scaled independently.
3. **Improved Scalability**: Messaging systems can more easily scale to handle larger loads.
4. **Reduced Database Load**: By processing data as it comes in, constant database querying can be reduced.
5. **Resilience**: Messaging systems can handle failures without losing data.

### Disadvantages

1. **Complexity**: Messaging systems come with their own complexities that require more advanced understanding and maintenance.
2. **Handling Failures**: Although resilient, handling failures, "poison messages," and ensuring message ordering can be challenging.
3. **Infrastructure Requirements**: Establishing and maintaining a robust messaging system might require significant resources and expertise.


## Popular Messaging System Implementations

Now that you've got a taste of a messaging system let's dive into some popular implementations: Azure Service Bus, Kafka, Azure Queue System, and RabbitMQ. 

### Azure Service Bus

Azure Service Bus is a fully managed service from Microsoft Azure that supports queue and topic, messaging models. It's robust, provides guaranteed message delivery, and maintains the order of messages. Here's an example of sending a message with Azure Service Bus in C#:

```csharp
ServiceBusClient client = new ServiceBusClient("<connection_string>");
ServiceBusSender sender = client.CreateSender("<queue_name>");

ServiceBusMessage message = new ServiceBusMessage("Hello, World!");

await sender.SendMessageAsync(message);

Console.WriteLine($"Sent a single message to the queue: {sender.EntityPath}");
```

And here is how would consumer look like 
```csharp
string connectionString = "<connection_string>";
string queueName = "<queue_name>";

await using (ServiceBusClient client = new ServiceBusClient(connectionString))
{
    ServiceBusProcessor processor = client.CreateProcessor(queueName, new ServiceBusProcessorOptions());

    processor.ProcessMessageAsync += async args =>
    {
        string body = args.Message.Body.ToString();
        Console.WriteLine($"Received message: {body}");
        await args.CompleteMessageAsync(args.Message);
    };

    processor.ProcessErrorAsync += args =>
    {
        Console.WriteLine($"Error occurred: {args.Exception}");
        return Task.CompletedTask;
    };

    await processor.StartProcessingAsync();

    Console.WriteLine("Press any key to stop receiving messages...");
    Console.ReadKey();

    await processor.StopProcessingAsync();
```

And if you start using Azure function the implementation if even shorter and simple!

```csharp
[FunctionName("ServiceBusConsumer")]
public static async Task Run(
    [ServiceBusTrigger("<queue_name>", Connection = "<connection_string>")] string messageBody,
    ILogger log)
{
    log.LogInformation($"Received message: {messageBody}");

    // Process the message (you can replace this with your custom logic)

    // Note: Unlike the previous examples, the message is automatically marked as completed (removed from the queue) by the Function after successful processing.
}
```

### Azure Queue System

Azure Queue System is another Microsoft offering specifically for storing large numbers of messages that may be accessed from anywhere via authenticated calls. It's simpler than Azure Service Bus and perfect for light workloads. An example of sending a message with Azure Queue in C# looks like this:

```csharp
QueueClient queueClient = new QueueClient("<connection_string>", "<queue_name>");
string message = "Hello, World!";
await queueClient.SendMessageAsync(message);
```

### Kafka

Apache Kafka, an open-source system, is built to handle real-time data feeds with high throughput and low-latency. Kafka operates in a distributed manner and can handle massive amounts of data. Here's a simple example of producing a message with Kafka using Java:

```java
Properties props = new Properties();
props.put("bootstrap.servers", "localhost:9092");
props.put("key.serializer", "org.apache.kafka.common.serialization.StringSerializer");
props.put("value.serializer", "org.apache.kafka.common.serialization.StringSerializer");

Producer<String, String> producer = new KafkaProducer<>(props);
ProducerRecord<String, String> record = new ProducerRecord<>("test", "Hello, World!");

producer.send(record);
producer.close();
```



### RabbitMQ

RabbitMQ is another open-source messaging system known for its robustness. It supports multiple messaging protocols, message queuing, delivery acknowledgment, flexible queue routing, and more. Here's a Python example of sending a message with RabbitMQ:

```python
import pika

connection = pika.BlockingConnection(pika.ConnectionParameters('localhost'))
channel = connection.channel()

channel.queue_declare(queue='hello')

channel.basic_publish(exchange='', routing_key='hello', body='Hello, World!')

print(" [x] Sent 'Hello, World!'")
connection.close()
```

There you have it. Keep your system from getting bogged down by an overload of scheduled tasks. Give messaging systems a try and watch your application's performance and scalability reach new heights. Whether you go for a fully managed service like Azure Service Bus or Azure Queue System or an open-source option like Kafka or RabbitMQ, you'll reap the benefits of reliable, scalable, and high-performance messaging.

Did you pull a new assignment to sprinkle SAML2 magic on your .NET WebAPI using JWT with a free library? Well, your search ends here, fellow coder! By the end of this guide, you'll be equipped with a production-ready solution and glean insights into how to extend it and construct a truly enterprise-grade authentication system.

A Breezy Guide to Implementing SAML2 Authentication with JWT in .NET WebAPI using Sustainsys

Did you pull a new assignment to sprinkle SAML2 magic on your .NET WebAPI using JWT with a free library? Well, your search ends here, fellow coder! By the end of this guide, you'll be equipped with a production-ready solution and glean insights into how to extend it and construct a truly enterprise-grade authentication system.

My inspiration for this guide draws heavily from [this stackoverflow thread](https://stackoverflow.com/questions/55025336/sustainsys-saml2-sample-for-asp-net-core-webapi-without-identity) that offers a great [example](https://github.com/hmacat/Saml2WebAPIAndAngularSpaExample).

## Gearing Up: 
### Prerequisites
Before we delve into the thick of things, it would be beneficial to have:
- A basic understanding of .NET Core and C# programming. (This [article](https://jasonwatmore.com/net-7-csharp-jwt-authentication-tutorial-without-aspnet-core-identity) by Jason Watmore is a gem!)
- Some degree of familiarity with SAML2.

But fret not. Armed with the examples provided here, you'll manage to put together a working solution. 

### Visualizing the Flow
Before we embark, let's visualize how our app's authentication flow transforms with and without SAML.

Here is really simplified sequence diagram of how basic authentication looks like:
[![SAML2 Without](https://images.prismic.io/webscopeio/7719173d-8e7f-46e6-97eb-688b931e67bb_saml2-without.png)](https://images.prismic.io/webscopeio/7719173d-8e7f-46e6-97eb-688b931e67bb_saml2-without.png)

And now with SAML2:
[![SAML2](https://images.prismic.io/webscopeio/0d047a8b-f268-4ee9-8492-49c56b243bed_saml2-with.png)](https://images.prismic.io/webscopeio/0d047a8b-f268-4ee9-8492-49c56b243bed_saml2-with.png)


## Step 1: Loading Up the Necessary Packages
First off, we need to install the necessary NuGet packages for Sustainsys, JWT, and other supporting libraries. Head to the Package Manager Console and run these commands:

```
Install-Package Sustainsys.Saml2.AspNetCore2
Install-Package Microsoft.AspNetCore.Authentication.JwtBearer
Install-Package System.IdentityModel.Tokens.Jwt
``` 

## Step 1.1: Certificates 101
SAML authentication protocol mandates certificate management, primarily used for signing and encrypting SAML assertions. Here's a brief rundown on how to handle these certificates.

For our demo, we'll use the certificate from https://stubidp.sustainsys.com/Certificate

Here's how you'd use a .pfx file:
```csharp
public static X509Certificate2 GetCertificate()
{
    X509Certificate2 certificate = new X509Certificate2(@"path/to/your/certificate.pfx", certificatePassword);
}
```


## Step 2: Configuring SAML2 & JWT Authentication
Fantastic! Now, we'll couple SAML2 authentication with Sustainsys and set up JWT authentication in our .NET WebAPI application. Open your **Startup.cs** file (or **Program.cs**, based on your configs) and add these configurations:


```csharp
JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Clear();
services
    .AddAuthentication(options =>
    {
        options.DefaultScheme = "AppScheme";
        options.DefaultSignInScheme = "AppExternalScheme"; // If you didn't have add default scheme
        options.DefaultSignOutScheme = "AppExternalScheme"; // If you didn't have add default scheme
    })
    .AddCookie("AppExternalScheme") // If you didn't have add this
    .AddJwtBearer("AppScheme", options => ...);
```


```csharp
services
    .AddAuthentication()
    // AddSaml2 must always be after AddAuthentication
    .AddSaml2(sharedOptions =>
    {
        string siteAddress = "https://your.application.example.com/" // take note!
        sharedOptions.SPOptions.EntityId = new EntityId(siteAddress); 
        sharedOptions.SPOptions.ServiceCertificates.Add(serviceCertificate);
        sharedOptions.SPOptions.AuthenticateRequestSigningBehavior = SigningBehavior.Always;
        sharedOptions.SPOptions.WantAssertionsSigned = true;

        RegisterIdentityProvider(sharedOptions, siteAddress, selectedIdentityProvider);
    });

    // Register a single identity provider
    void RegisterIdentityProvider(Saml2Options sharedOptions, string siteAddress, IdentityProviderCustomClass identityProvider)
    {
        var ip = new IdentityProvider(
            new EntityId(identityProvider.MetadataId), sharedOptions.SPOptions)
        {
            MetadataLocation = identityProvider.MetadataLocation, // example: https://stubidp.sustainsys.com/metadata
            LoadMetadata = true,
            DisableOutboundLogoutRequests = false,
            AllowUnsolicitedAuthnResponse = identityProvider.AllowUnsolicitedAuthResponse,
        };

        
        X509Certificate2 customerSsoCertificate = GetCertificate();
        ip.SigningKeys.AddConfiguredKey(customerSsoCertificate);
        
        //Finally, add identity provider to the app
        sharedOptions.IdentityProviders.Add(ip);
    }
``` 

## Step 3: Crafting New Controller Endpoints
```csharp
/// <summary>
/// Redirects the user to the SAML authentication provider (SSO)
/// </summary>
/// <param name="returnUrl">URL to which the user should return post successful authentication.</param>
[HttpGet("saml/redirect")]
public async Task<ActionResult> SamlRedirectSaml(string returnUrl)
{
    return new ChallengeResult(
        Saml2Defaults.Scheme,
        new AuthenticationProperties
        {
            RedirectUri = Url.Action(nameof(SamlLoginCallback), new { returnUrlOrError.Value.Url }),
            IsPersistent = true
        });
}

/// <summary>
/// Logs the user in (SSO).
/// </summary>
/// <param name="url">URL to which the user should return post successful authentication.</param>
[HttpGet("saml/login")]
public async Task<ActionResult> SamlLoginCallback(string url)
{
    // Use .AuthenticateAsync to verify if user authentication was successful
    AuthenticateResult authenticateResult = await HttpContext.AuthenticateAsync("AppExternalScheme");
    if (!authenticateResult.Succeeded)
    {
        return await Problem(statusCode: StatusCodes.Status401Unauthorized);
    }
    
    // Use claims to identify authenticated user 
    Collection<Claim> claimCollection = authenticateResult?.Principal?.Claims;
    if (claimCollection.Count == 0) // No claims specified
    {
        return await Problem(statusCode: StatusCodes.Status400BadRequest);
    }

    // You can use ClaimTypes instead of long string like 
    // Always refer to the identity provider documentation of your choice to match the correct claims with your app
    string? userName = claimCollection.FirstOrDefault(c => c.Name.Equals(ClaimTypes.NameIdentifier, StringComparison.OrdinalIgnoreCase)).Value;    
    Maybe<UserSecurityData> existingUser = await _userService.GetUser(userName);
    if (existingUser.HasNoValue) // User doesn't exist 
    {
        // Optional: Auto-create a user account if none exists
        Result<User> autoCreatedUser = await _userService.AutoCreateAccount(userNameOrError.Value, claimCollection);
        if (autoCreatedUser.IsFailure)
        { 
            return await Problem(statusCode: StatusCodes.Status401Unauthorized);
        }
            
        // Log in user as you normally would
        await LogInSsoUser(autoCreatedUser.Value.Id);
    }
    else
    {
        // Log in user as you normally would
        await LogInSsoUser(existingUser.Value.Id);
    }

    // Redirect user to the original address
    return Redirect(url);
}
```

## Unveiling the Hidden Treasures
This section'll explore a few more tips to enhance your solution. 

### Tap into Azure Key Vault
Did you know there's a savvy way to manage your certificates? Azure Key Vault is your secret weapon among Microsoft Azure's cloud-based services. Think of it as a secure digital chest where you can safely stash your cryptographic keys, certificates, secrets, and connection strings used by your cloud apps and services. Rather than spreading them throughout your application code or configuration files, Azure Key Vault offers centralized, safe, and scalable storage. 

To give you an idea, here's a snapshot of how you can utilize Azure Key Vault:
```csharp
public static X509Certificate2 GetCertificate()
{
    DefaultAzureCredential azureCredentials = new DefaultAzureCredential();
    CertificateClient client = new CertificateClient(new Uri($"https://{VaultName}.vault.azure.net/"), azureCredentials);

    Azure.Response<X509Certificate2> certificate = client.DownloadCertificate("CertificateName");

    return certificate.Value;
}
```

### Juggling Multiple Identity Providers
Imagine handling multiple identity providers, such as Azure AD and OKTA. No problem at all! A few modifications to our existing solution, and you're all set.

Firstly, let's revisit our existing code and integrate some additional lines. We'll begin with the registration:

```csharp
services
    .AddAuthentication()
    // AddSaml2 must always follow AddAuthentication
    .AddSaml2(sharedOptions =>
    {
        string siteAddress = "https://your.application.example.com/" // be careful here
        sharedOptions.SPOptions.EntityId = new EntityId(siteAddress); 
        sharedOptions.SPOptions.ServiceCertificates.Add(serviceCertificate);
        sharedOptions.SPOptions.AuthenticateRequestSigningBehavior = SigningBehavior.Always;
        sharedOptions.SPOptions.WantAssertionsSigned = true;

        // NEW - Here's where we register multiple identity providers
        foreach(IdentityProviderCustomClass selectedIdentityProvider in multipleIdentityProviders)
        {
            RegisterIdentityProvider(sharedOptions, siteAddress, selectedIdentityProvider);
        }

    });
``` 

Then, let's add some flavors to the `saml/redirect` endpoint by incorporating identity provider selection logic.

```csharp
[HttpGet("saml/redirect")]
public async Task<ActionResult> SamlRedirect(string returnUrl, string entity)
{
    var properties = new AuthenticationProperties
    {
        RedirectUri = Url.Action(nameof(SamlLoginCallback), new { returnUrlOrError.Value.Url }),
        IsPersistent = true
    };
    
    properties.Items.Add("idp", new EntityId(entity).Id) // NEW - This line is crucial. It explicitly defines the identity provider to use.

    return new ChallengeResult(Saml2Defaults.Scheme, properties);
}
```

### A User-Friendly Approach to Error Handling
When directing users to multiple websites, the traditional error messaging approach between the Front-End (FE) and the API can fall short. However, you can handle this user-friendly by designing a cshtml view on the API end to display error messages.

Let's look at an example. Start by creating `Error.cshtml` and `ErrorModel.cs` files:

```html
@page
@model ErrorModel
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>Oops, Something Went Wrong!</title>
</head>
<body>
    <h1>Error</h1>
    <p>@Model.ErrorMessage</p>
</body>
</html>
```

```csharp
using Microsoft.AspNetCore.Mvc.RazorPages;

public class ErrorModel : PageModel
{
    public string ErrorMessage { get; set; }

    public void OnGet(string message)
    {
        ErrorMessage = message;
    }
}
```
Next, integrate this into your controller. Here's how it would look with some pre-existing code:

```csharp

[HttpGet("saml/login")]
public async Task<ActionResult> SamlLoginCallback(string url)
{
    AuthenticateResult authenticateResult = await HttpContext.AuthenticateAsync("AppExternalScheme");
    if (!authenticateResult.Succeeded)
    {
        ViewResult view = View("Error", new ErrorModel{ ErrorMessage = "Authentication failure!"});
        view.StatusCode = StatusCodes.Status401Unauthorized;

        return view;
    }
...
``` 

### Simplifying Claims Processing With a Helper Class
Claims are generally used to identify an authenticated user. You might want to consider creating a helper class to make your code easier to understand and maintain.

```csharp
 public class ClaimCollection : Collection<Claim>
{
    // Constructors...
    // ...

    public Result<UserName> GetUserName() => this.FirstOrDefault(c => c.Type.Equals(ClaimTypes.NameIdentifier, StringComparison.OrdinalIgnoreCase)));

    public Result<Email> GetEmail() => this.FirstOrDefault(c => c.Type.Equals(ClaimTypes.Email, StringComparison.OrdinalIgnoreCase));

// Add other claims as needed... 
```

### The Importance of Logging 
If you've ever been caught up in a SAML2 flow issue, you'd know how challenging it can be to identify the problem. Was it an error in the Identity Provider (IdP) configuration? Or was there a bug within your code? For this reason, it's crucial to incorporate a logging system into your application's communication with the identity provider.

The sustainsys library handles this aspect and allows for the injection of a logger. In the following example, we've used the pre-defined `AspNetCoreLoggerAdapter`, which employs the standard **Microsoft.Extensions.Logging** class.

```csharp
services
    .AddAuthentication()
    .AddSaml2(sharedOptions =>
    {
        string siteAddress = "https://your.application.example.com/" // remember this!
        sharedOptions.SPOptions.EntityId = new EntityId(siteAddress); 
        sharedOptions.SPOptions.ServiceCertificates.Add(serviceCertificate);
        sharedOptions.SPOptions.AuthenticateRequestSigningBehavior = SigningBehavior.Always;
        sharedOptions.SPOptions.WantAssertionsSigned = true;
        sharedOptions.SPOptions.Logger = new AspNetCoreLoggerAdapter(logger)  // Here's where you add the logger

... 
```


### The Charm of User-Password Authentication with SAML2
What's so special about SAML2 in .NET? With SAML2, you no longer need to implement user-password authentication separately. SAML2 seamlessly integrates into your authentication processes, allowing you to maintain your existing authentication endpoints. It handles the Single Sign-On (SSO) flow, so users can log in once and access multiple applications without having to repeatedly enter their credentials. 

## Final Thoughts
Voila! You've now become part of the elite club capable of integrating SAML2 into their .NET applications. Recognizing the potential for research headaches, I decided to put together this comprehensive guide. But don't rest on your laurels. This is just the starting point, and there's a whole universe to explore beyond. However, with this demo, you've already hit the ground running.

If you've discovered an even better solution, please share! We're all in this learning journey together. Also, a hearty shoutout to the talented team behind the Sustainsys library. Keep the coding spirit alive. Happy coding!

Have you ever found yourself in a situation where, amidst coding enthusiasm and focus, you accidentally committed an API key or secret onto GitHub? Most developers can relate to this scenario. Thankfully, ".env" files in Next.js React can save us from such blunders.

Unraveling the Magic of .env Files: Your Friendly Guide to Custom Variables in Next.js

Have you ever found yourself in a situation where, amidst coding enthusiasm and focus, you accidentally committed an API key or secret onto GitHub? Most developers can relate to this scenario. Thankfully, ".env" files in Next.js React can save us from such blunders.

## Introducing the .env File: Your Secret Keeper
Think of .env files as hidden vaults, safeguarding your top-secret info like API keys and database credentials. They protect your data from sneaky commit leaks on GitHub.

## The Rules of .env Files in Next.js

- Your .env file's hideout should be at the root of your project. Don't try to place them elsewhere; they're crafty and won't be found.
- Next.js has different costumes for the .env files based on their environment:
  - `.env`: Standard attire for all environments.
  - `.env.local`: Local disguise. Seen in all environments except 'test.'
  - `.env.development`, `.env.test`, `.env.production`: Specific attire for each environment.
  - `.env.development.local`, `.env.test.local`, `.env.production.local`: Local disguise for specific environments.
- Name your variables starting with the `REACT_APP_` prefix for the mission.

## Decoding the NEXT_PUBLIC_ prefix
When using Next.js, variables can only be accessed in the Node.js environment unless you include a prefix of either `NEXT_PUBLIC_` or `REACT_APP_`. Doing so lets you regulate which data remains on the server side and which is sent to the browser. 

Here's an illustration:
```typescript
# .env file
API_KEY_SERVER=12345678    # Only Node.js can see this
NEXT_PUBLIC_API_KEY_CLIENT=87654321  # Node.js and the browser can see this
```

## Deploying Your Secret Variables
Once you've given your variables their correct aliases, you can deploy them using the `process.env` gadget provided by Node.js. Here's an example:

You have these defined in your .env file:

```typescript
# .env file
REACT_APP_API_URL=https://api.mywebsite.com
NEXT_PUBLIC_SITE_NAME=MyCoolWebsite
```

You can then deploy these in your React components:

```javascript
// SomeReactComponent.js
import React from 'react';

const SomeReactComponent = () => {
  return (
    <div>
      <h1>Welcome to {process.env.NEXT_PUBLIC_SITE_NAME}!</h1>
      <p>We fetch data from: {process.env.REACT_APP_API_URL}</p>
    </div>
  );
};

export default SomeReactComponent;
```


## Custom TypeScript Script and .env.local
In Next.js, the `.env.local` file is meant to store environment variables that are specific to your local development environment. When you run next dev, Next.js automatically loads the environment variables from `.env.local` and makes them available in your application.

However, suppose you are trying to access these environment variables from a custom TypeScript script (outside your Next.js application). In that case, it won't be able to read them directly because the next CLI is not involved in running the custom script. The custom TypeScript script is a separate entity unaware of Next.js' environment variables.

Suppose you want your custom TypeScript script to access the environment variables from `.env.local`. In that case, you can use a package like dotenv, which loads the variables from the `.env.local` file and makes them available to your script. 

Here's how you can do it:

### Step 1: Install the dotenv package:

```bash
npm install dotenv --save
```

### Step 2: Create a dotenv configuration file in your project (e.g., dotenv-config.ts) and add the following code:

```typescript
import dotenv from 'dotenv';

// Load environment variables from .env.local file
dotenv.config({ path: '.env.local' });

// Now you can access the environment variables using process.env
const myVariable = process.env.MY_VARIABLE;
```


## Conclusion

These variables will transform into their actual values at build time. They offer flexible disguise options for different environments like development, testing, and production.

So, there you have it—an easy, secure, and flexible way to manage your secrets in Next.js React. Keep your secrets safe and happy coding.


Blog

Database Normalization: A Simple Tale of Ignoring 1NF

From Converters to Dependency Injection: Navigating Model Migrations

Caching Shiki for Faster Build Times

The Hidden Costs of Misusing Scheduled Jobs and Messaging Systems

A Breezy Guide to Implementing SAML2 Authentication with JWT in .NET WebAPI using Sustainsys

Unraveling the Magic of .env Files: Your Friendly Guide to Custom Variables in Next.js

Let’s stay connected