If you use <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">yarn</code> you can Install Playwright with:<pre><code>yarn create playwright</code></pre>It will ask you some questions, I sticked with the defaults:<pre><code>✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'yarn playwright install')? (Y/n) · true</code></pre>It will install the required packages, create the config file (<code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">playwright.config.js</code>) and add some example tests.<h2>Running the tests</h2>In playwright you can run the tests in two modes:<ul class="list-disc list-outside leading-3 -mt-2 tight" data-tight="true"><li class="leading-normal -mb-2">Headless mode: no browser will open up, the results of the tests will show up in the terminal</li><li class="leading-normal -mb-2"><a target="_blank" rel="noopener noreferrer nofollow" class="text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer" href="https://playwright.dev/docs/test-ui-mode">UI mode</a>: a browser-like UI will open and you will see a list of all the tests that you can run</li></ul>The command to run them is:<pre><code>yarn playwright test [--ui]</code></pre>Where the <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">--ui</code> argument is optional to enable UI mode.

It will ask you some questions, I sticked with the defaults:

✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'yarn playwright install')? (Y/n) · true

It will install the required packages, create the config file (

In playwright you can run the tests in two modes:

If you use `yarn` you can Install Playwright with:

```
yarn create playwright
```

It will ask you some questions, I sticked with the defaults:

```
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'yarn playwright install')? (Y/n) · true
```

It will install the required packages, create the config file (`playwright.config.js`) and add some example tests.

## Running the tests

In playwright you can run the tests in two modes:

- Headless mode: no browser will open up, the results of the tests will show up in the terminal
- [UI mode](https://playwright.dev/docs/test-ui-mode): a browser-like UI will open and you will see a list of all the tests that you can run

The command to run them is:

```
yarn playwright test [--ui]
```

Where the `--ui` argument is optional to enable UI mode.

How to install and run Playwright with Javascript

For my blog I use the package <a target="_blank" rel="noopener noreferrer nofollow" class="text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer" href="https://github.com/remarkjs/react-markdown">react-markdown</a> to render markdown content, there are different options to highlight the code blocks with it, in general the most famous and reliable syntax highter libraries are two: <a target="_blank" rel="noopener noreferrer nofollow" class="text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer" href="https://prismjs.com/">Prism</a> and <a target="_blank" rel="noopener noreferrer nofollow" class="text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer" href="https://highlightjs.org/">Highlight.js</a>.In my case I don't specify the language of the blocks so I needed a solution that also auto detect the language. Since that feaure is present only in highlight.js, I've chosen it.To use it with react-markdown the easiest way is to use <a target="_blank" rel="noopener noreferrer nofollow" class="text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer" href="https://github.com/rehypejs/rehype-highlight">rehype-highlight</a> that hooks it up to the transformation tools that react-markdown uses under the hood.So install both libraries with:<pre><code>yarn add rehype-highlight highlight.js</code></pre>And then use them like follow:<pre><code>import "highlight.js/styles/github-dark.min.css";
import ReactMarkdown from "react-markdown";
import rehypeHighlight from "rehype-highlight";
import remarkGfm from "remark-gfm";

const rehypeHighlightWithAutoDetect = (options) =&gt;
 rehypeHighlight({ ...options, detect: true });

export default function MardkownViewer({ content, className }) {
 return (
 &lt;ReactMarkdown
 className="markdown prose"
 children={content}
 remarkPlugins={[remarkGfm, remarkToc]}
 rehypePlugins={[rehypeHighlightWithAutoDetect]}
 /&gt;
 );
}</code></pre>The main function that I couldn't find on the web is <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">rehypeHighlightWithAutoDetect</code> that passes the <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">detect: true</code> argument to rehype-highlight since it's <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">false</code> by default.

 to render markdown content, there are different options to highlight the code blocks with it, in general the most famous and reliable syntax highter libraries are two: 

In my case I don't specify the language of the blocks so I needed a solution that also auto detect the language. Since that feaure is present only in highlight.js, I've chosen it.

To use it with react-markdown the easiest way is to use 

 that hooks it up to the transformation tools that react-markdown uses under the hood.

import "highlight.js/styles/github-dark.min.css";
import ReactMarkdown from "react-markdown";
import rehypeHighlight from "rehype-highlight";
import remarkGfm from "remark-gfm";

const rehypeHighlightWithAutoDetect = (options) =>
 rehypeHighlight({ ...options, detect: true });

export default function MardkownViewer({ content, className }) {
 return (
 <ReactMarkdown
 className="markdown prose"
 children={content}
 remarkPlugins={[remarkGfm, remarkToc]}
 rehypePlugins={[rehypeHighlightWithAutoDetect]}
 />
 );
}

The main function that I couldn't find on the web is 

 argument to rehype-highlight since it's 

For my blog I use the package [react-markdown](https://github.com/remarkjs/react-markdown) to render markdown content, there are different options to highlight the code blocks with it, in general the most famous and reliable syntax highter libraries are two: [Prism](https://prismjs.com/) and [Highlight.js](https://highlightjs.org/).

In my case I don't specify the language of the blocks so I needed a solution that also auto detect the language. Since that feaure is present only in highlight.js, I've chosen it.

To use it with react-markdown the easiest way is to use [rehype-highlight](https://github.com/rehypejs/rehype-highlight) that hooks it up to the transformation tools that react-markdown uses under the hood.

So install both libraries with:

```
yarn add rehype-highlight highlight.js
```

And then use them like follow:

```
import "highlight.js/styles/github-dark.min.css";
import ReactMarkdown from "react-markdown";
import rehypeHighlight from "rehype-highlight";
import remarkGfm from "remark-gfm";

const rehypeHighlightWithAutoDetect = (options) =>
 rehypeHighlight({ ...options, detect: true });

export default function MardkownViewer({ content, className }) {
 return (
 <ReactMarkdown
 className="markdown prose"
 children={content}
 remarkPlugins={[remarkGfm, remarkToc]}
 rehypePlugins={[rehypeHighlightWithAutoDetect]}
 />
 );
}
```

The main function that I couldn't find on the web is `rehypeHighlightWithAutoDetect` that passes the `detect: true` argument to rehype-highlight since it's `false` by default.

How to highlight code and auto detect the language with react-markdown

<h3>Problem</h3>Let’s say you have a javascript object like:<pre><code class="language-jsx">const countryCodes = {
 'United States': 'US',
 'Canada': 'CA',
 'Mexico': 'MX',
};</code></pre>And you want to invert the keys and values to get the reverse object:<pre><code class="language-jsx">const codeCountries = {
 'US': 'United States',
 'CA': 'Canada',
 'MX': 'Mexico'
};</code></pre><h3>Solution</h3>Here’s a simple function to do that:<pre><code class="language-jsx">function revertObject(obj) {
 return Object.fromEntries(
 Object.entries(obj).map(a =&gt; a.reverse())
 )
}</code></pre><h3>Explanation</h3>How it works:<ul class="list-disc list-outside leading-3 -mt-2 tight" data-tight="true"><li class="leading-normal -mb-2">The <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">Object.entries(obj)</code> method converts the object into an array of key-value pairs</li></ul><pre><code class="language-jsx">[["United States","US"],["Canada","CA"],["Mexico","MX"]]</code></pre><ul class="list-disc list-outside leading-3 -mt-2 tight" data-tight="true"><li class="leading-normal -mb-2">The <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">map(a =&gt; a.reverse())</code> function then reverses each key-value pair</li></ul><pre><code class="language-jsx">[["US","United States"],["CA","Canada"],["MX","Mexico"]]</code></pre><ul class="list-disc list-outside leading-3 -mt-2 tight" data-tight="true"><li class="leading-normal -mb-2"><code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">Object.fromEntries()</code> converts the array of reversed pairs back into an object</li></ul><pre><code class="language-jsx">{
 'US': 'United States',
 'CA': 'Canada',
 'MX': 'Mexico'
};</code></pre>

Let’s say you have a javascript object like:

const countryCodes = {
  'United States': 'US',
  'Canada': 'CA',
  'Mexico': 'MX',
};

And you want to invert the keys and values to get the reverse object:

const codeCountries = {
  'US': 'United States',
  'CA': 'Canada',
  'MX': 'Mexico'
};

function revertObject(obj) {
  return Object.fromEntries(
    Object.entries(obj).map(a => a.reverse())
  )
}

[["United States","US"],["Canada","CA"],["Mexico","MX"]]

[["US","United States"],["CA","Canada"],["MX","Mexico"]]

{
  'US': 'United States',
  'CA': 'Canada',
  'MX': 'Mexico'
};

### Problem

Let’s say you have a javascript object like:

```jsx
const countryCodes = {
  'United States': 'US',
  'Canada': 'CA',
  'Mexico': 'MX',
};
```

And you want to invert the keys and values to get the reverse object:

```jsx
const codeCountries = {
  'US': 'United States',
  'CA': 'Canada',
  'MX': 'Mexico'
};
```

### Solution

Here’s a simple function to do that:

```jsx
function revertObject(obj) {
  return Object.fromEntries(
    Object.entries(obj).map(a => a.reverse())
  )
}
```

### Explanation

How it works:

- The `Object.entries(obj)` method converts the object into an array of key-value pairs

```jsx
[["United States","US"],["Canada","CA"],["Mexico","MX"]]
```

- The `map(a => a.reverse())` function then reverses each key-value pair

```jsx
[["US","United States"],["CA","Canada"],["MX","Mexico"]]
```

- `Object.fromEntries()` converts the array of reversed pairs back into an object

```jsx
{
  'US': 'United States',
  'CA': 'Canada',
  'MX': 'Mexico'
};
```

Revert an object with Javascript

With Javascript you can listen to browser events like clicks, resizing, storage changes, focus, blur and so on with the common listeners like:<pre><code>button.addEventListener("click", myFunction);</code></pre>But what if you want to trigger an event yourself? You can create it with the <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">CustomEvent</code> class, dispatch it and listen as with normal events:<pre><code>// Create the event
const customEvent = new CustomEvent("myCustomEvent", {
 detail: { message: "Hello, World!" }
});

// Listen for the event
document.addEventListener("myCustomEvent", (event) =&gt; {
 console.log("Custom event triggered:", event.detail.message);
});

// Dispatch the event
document.dispatchEvent(customEvent);</code></pre>Here's some use cases:<ul class="list-disc list-outside leading-3 -mt-2 tight" data-tight="true"><li class="leading-normal -mb-2">Extending Third-Party Libraries: Enhance or extend the functionality of third-party libraries without modifying their core code. For example Adding a custom "dataLoaded" event to a third-party charting library to trigger actions after chart data has been fetched.</li></ul><ul class="list-disc list-outside leading-3 -mt-2 tight" data-tight="true"><li class="leading-normal -mb-2">Decoupling Logic: when implementing loosely coupled components, custom events allow one part of the code to trigger behavior in another without direct references.</li><li class="leading-normal -mb-2">Creating a Pub/Sub System: custom events can be the foundation for a simple publish-subscribe (pub/sub) system for inter-module communication. For example an e-commerce site where adding an item to the cart publishes a "cartUpdated" event, and other modules (like cart display or analytics) subscribe to it.</li><li class="leading-normal -mb-2">Track user interactions or application state changes in a centralized analytics module: Emitting a "pageViewed" event when a user navigates to a new page.</li><li class="leading-normal -mb-2">Asynchronous Operations: Signal completion of asynchronous tasks to other parts of the application. For example a "dataReady" event when an API call returns data, enabling components to update their content. </li></ul>There are other solutions for the use cases above that may be often cleaner, but sometimes custom events are convenient and a good tool to have.

With Javascript you can listen to browser events like clicks, resizing, storage changes, focus, blur and so on with the common listeners like:

button.addEventListener("click", myFunction);

But what if you want to trigger an event yourself? You can create it with the 

 class, dispatch it and listen as with normal events:

// Create the event
const customEvent = new CustomEvent("myCustomEvent", {
  detail: { message: "Hello, World!" }
});

// Listen for the event
document.addEventListener("myCustomEvent", (event) => {
  console.log("Custom event triggered:", event.detail.message);
});

// Dispatch the event
document.dispatchEvent(customEvent);

There are other solutions for the use cases above that may be often cleaner, but sometimes custom events are convenient and a good tool to have.

With Javascript you can listen to browser events like clicks, resizing, storage changes, focus, blur and so on with the common listeners like:

```
button.addEventListener("click", myFunction);
```

But what if you want to trigger an event yourself? You can create it with the `CustomEvent` class, dispatch it and listen as with normal events:

```
// Create the event
const customEvent = new CustomEvent("myCustomEvent", {
  detail: { message: "Hello, World!" }
});

// Listen for the event
document.addEventListener("myCustomEvent", (event) => {
  console.log("Custom event triggered:", event.detail.message);
});

// Dispatch the event
document.dispatchEvent(customEvent);
```

Here's some use cases:

- *Extending Third-Party Libraries:* Enhance or extend the functionality of third-party libraries without modifying their core code. For example Adding a custom "dataLoaded" event to a third-party charting library to trigger actions after chart data has been fetched.


- *Decoupling Logic:* when implementing loosely coupled components, custom events allow one part of the code to trigger behavior in another without direct references.
- *Creating a Pub/Sub System*: custom events can be the foundation for a simple publish-subscribe (pub/sub) system for inter-module communication. For example an e-commerce site where adding an item to the cart publishes a "cartUpdated" event, and other modules (like cart display or analytics) subscribe to it.
- *Track user interactions or application state changes in a centralized analytics module*: Emitting a "pageViewed" event when a user navigates to a new page.
- *Asynchronous Operations*: Signal completion of asynchronous tasks to other parts of the application. For example a "dataReady" event when an API call returns data, enabling components to update their content.

There are other solutions for the use cases above that may be often cleaner, but sometimes custom events are convenient and a good tool to have.

How to use custom events in Javascript

Django has a powerful ORM that makes working with a database very easy. For the example below we will use the following model (or database table):<pre><code>from django.db import models

class Todo(models.Model):
 text = models.TextField()
 is_done = models.BooleanField(default=False)</code></pre><h2>Query data</h2>To get a single item given with the primary key you can use the <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">get</code> function:<pre><code>Todo.objects.get(id=1)</code></pre>To get multiple records you can use the <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">filter</code> function:<pre><code>Todo.objects.filter(is_done=True)</code></pre><h2>Create data</h2>To create a record you can simply do:<pre><code>Todo.objects.create(
 text="Groceries",
 is_done=False # This field can be also omitted as it is optional
)</code></pre>If you want to create multiple records at once you can use the <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">bulk_create</code> method:<pre><code>Todo.objects.bulk_create([
 Todo(text="Clean dishes",
 Todo(text="Clean house")
])</code></pre><h2>Update data</h2>To update an existing record you can simply modify its values and then use <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">save</code> :<pre><code>todo.text = "Clean dishes with the dishwasher"
todo.save()</code></pre>If you want to update multiple records at once you can use the <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">update</code> function:<pre><code>Todo.objects.all().update(is_done=True)</code></pre><h2>Delete data</h2>To delete records you can use the <code class="rounded-md bg-muted px-1.5 py-1 font-mono font-medium" spellcheck="false">delete</code> function:<pre><code>todo.delete()</code></pre>You can apply it also to multiple records at one:<pre><code>Todo.objects.all().delete()</code></pre>

Django has a powerful ORM that makes working with a database very easy. For the example below we will use the following model (or database table):

from django.db import models

class Todo(models.Model):
  text = models.TextField()
  is_done = models.BooleanField(default=False)

To get a single item given with the primary key you can use the 

Todo.objects.create(
  text="Groceries",
  is_done=False # This field can be also omitted as it is optional
)

If you want to create multiple records at once you can use the 

Todo.objects.bulk_create([
  Todo(text="Clean dishes",
  Todo(text="Clean house")
])

To update an existing record you can simply modify its values and then use 

todo.text = "Clean dishes with the dishwasher"
todo.save()

If you want to update multiple records at once you can use the 

You can apply it also to multiple records at one:

Django has a powerful ORM that makes working with a database very easy. For the example below we will use the following model (or database table):

```
from django.db import models

class Todo(models.Model):
  text = models.TextField()
  is_done = models.BooleanField(default=False)
```

## Query data

To get a single item given with the primary key you can use the `get` function:

```
Todo.objects.get(id=1)
```

To get multiple records you can use the `filter` function:

```
Todo.objects.filter(is_done=True)
```

## Create data

To create a record you can simply do:

```
Todo.objects.create(
  text="Groceries",
  is_done=False # This field can be also omitted as it is optional
)
```

If you want to create multiple records at once you can use the `bulk_create` method:

```
Todo.objects.bulk_create([
  Todo(text="Clean dishes",
  Todo(text="Clean house")
])
```

## Update data

To update an existing record you can simply modify its values and then use `save` :

```
todo.text = "Clean dishes with the dishwasher"
todo.save()
```

If you want to update multiple records at once you can use the `update` function:

```
Todo.objects.all().update(is_done=True)
```

## Delete data

To delete records you can use the `delete` function:

```
todo.delete()
```

You can apply it also to multiple records at one:

```
Todo.objects.all().delete()
```

Hello 👋 I'm Marco