Using HTTPS for local development is no longer optional. Modern browsers require a secure context to enable key features like PWAs, Service Workers, camera access, and WebAuthn. If your local dev server still runs on HTTP, you’re likely missing bugs that only appear in production.

This guide shows how to enable HTTPS on localhost using Vite and mkcert, with a setup that works on desktop and real mobile devices.

Why HTTPS is required for local development

Browsers restrict powerful APIs to HTTPS to protect users. These restrictions apply even in local development environments.

You need HTTPS on localhost if your app uses:

• Progressive Web Apps (PWA)

• Service Workers

• Camera or microphone access

• WebAuthn / passkeys

• Secure cookies and storage APIs

• Mobile testing on real devices

While localhost sometimes works without HTTPS, local IP access does not. If you test your app on an iPhone or Android device using your machine’s IP, HTTPS is mandatory.

Best solution for HTTPS on localhost: mkcert

mkcert is the recommended tool for local HTTPS development because it creates trusted certificates, not self-signed ones. That means:

• No browser security warnings

• Works across browsers

• Ideal for Vite, Next.js, and other dev servers

Step 1: install mkcert for local HTTPS

On macOS, install mkcert using Homebrew:

brew install mkcert
mkcert -install

This creates a local Certificate Authority and adds it to your system trust store.

Step 2: generate HTTPS certificates for localhost

Generate certificates for localhost and loopback addresses:

mkcert localhost 127.0.0.1 ::1

This creates:

• localhost.pem

• localhost-key.pem

These files will be used by your Vite dev server to enable HTTPS.

Step 3: enable HTTPS (UPDATED)

• If you are using Vite, edit your vite.config.ts file:

import fs from "fs";

export default {
  server: {
    host: "::",
    port: 8080,
    https: {
      key: fs.readFileSync("./localhost-key.pem"),
      cert: fs.readFileSync("./localhost.pem"),
    },
  },
};

• If you are using Nextjs, edit you package.json scripts:

{
...
  "scripts": {
    "dev": "next dev --experimental-https --experimental-https-key ./localhost+2-key.pem --experimental-https-cert ./localhost+2.pem",
    ...
}

This configuration:

• Enables HTTPS in Vite

• Allows IPv4 and IPv6 access

• Matches production-like behavior

Restart the dev server after applying the changes.

Step 4: access your HTTPS dev server from mobile devices

To test HTTPS local development on mobile:

1. Connect your phone to the same Wi-Fi network

2. Find your computer’s local IP address

3. Open the app in your phone browser:

https://[your-local-ip]:8080

This setup works on iOS Safari and Chrome for Android without certificate warnings.

Why HTTPS local development matters for PWAs and Service Workers

PWAs and Service Workers only work over HTTPS (except limited localhost cases). If your PWA behaves differently in production than in development, missing HTTPS is usually the cause.

With this setup, you can:

• Install your PWA locally

• Debug Service Worker caching

• Test offline behavior

• Validate mobile-only features early

HTTPS local development checklist

• ✅ Trusted HTTPS certificates (mkcert)

• ✅ No browser warnings

• ✅ Works on real devices

• ✅ Matches production security rules

• ✅ Compatible with Vite and modern frameworks

Conclusion: enable HTTPS early in local development

If you’re building modern web applications, HTTPS on localhost should be your default, not an afterthought.

Using mkcert with Vite gives you:

• Production parity

• Reliable mobile testing

• Fewer deployment surprises

Once you switch to HTTPS local development, you won’t want to go back.

Let’s step into the other 90%.
These are real-world, unburned uses — the kind of regex tricks that quietly make your workday smoother.

1. Regex as a debugging scalpel

When logs are a mess, regex can turn chaos into insight.
Instead of scrolling through thousands of lines, use patterns to isolate only what matters.

Example: isolating failed API responses

Imagine your logs are full of JSON payloads. You can use a regex to extract only the error messages that contain a specific code range:

# Imagine a giant log full of JSON-like lines:
cat server.log | grep -Po '"error":"\K[^"]*(?=.*code":\s*5\d{2})'

{"time":"10:22","error":"Database timeout","code":504}
{"time":"10:23","error":"Missing auth header","code":401}
{"time":"10:25","error":"Redis unavailable","code":503}

This isolates all error messages where the status code starts with 5 — perfect for spotting server-side failures, without touching your app logic.

Database timeout
Redis unavailable

2. Regex as a refactor assistant

Regex can help you refactor your codebase faster than any “find & replace” can dream of.

Example: catching deprecated function signatures

Let’s say you renamed fetchUserData() to getUserProfile(), but your teammates forgot to update it everywhere. You can find all lingering usages — even if they’re commented out or spaced oddly:

(?<!\/\/\s*)\bfetchUserData\s*\(

This ignores commented-out lines while still catching real function calls — so your refactors stay clean, not paranoid.

3. Regex as a data guardian

Regex can do compliance work too — like sanitizing logs in milliseconds.
Imagine you have sensitive tokens or IDs leaking in production logs 🤯 You can mask them on the fly:

const sanitized = log.replace(
  /(Bearer\s+)[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+/,
  '$1***.***.***'
);

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.abc.def

This keeps your authentication tokens visible enough to debug, but safe enough to share.

Authorization: Bearer ***.***.***

4. Regex for structured text mining

Parsing YAML or INI files? Regex can quickly extract key-value pairs without spinning up a parser.

Example: grabbing config overrides from text dumps

const text = `
# Main configuration
APP_ENV=production
DB_HOST=localhost
DB_PORT=5432

# optional overrides
API_KEY = 12345-ABCDE
TIMEOUT=  3000
DEBUG_MODE =false
`;

const regex = /(?<=^|\n)([A-Z_]+)\s*=\s*(.+?)(?=\n|$)/g;
const matches = [...text.matchAll(regex)].map(([_, key, value]) => ({ key, value }));

console.table(matches);

Feed it a .env file and it’ll give you all variables and their values — even if there’s inconsistent spacing or comments sprinkled in.

Output:

5. Regex in git hooks: code quality gatekeeper

Add a pre-commit hook that prevents committing console.log() or TODO notes.
Because regex can be your quiet code reviewer:

# .git/hooks/pre-commit
if grep -rE 'console\.log|TODO' src/; then
  echo "🚫 Remove debug statements before committing!"
  exit 1
fi

Developers start behaving better when regex guards the gate.

git commit -m "final cleanup"
🚫 Remove debug statements before committing!

6. Regex for content intelligence

Regex shines when you want to extract context — not just text.

Example: extracting localization keys for translation

grep -Po "t\(['\"]([a-z0-9_.-]+)['\"]\)" src/ | grep -Po "['\"][a-z0-9_.-]+['\"]"

<p>{t("dashboard.title")}</p>
<p>{t("errors.network")}</p>
<p>{t("profile.logout")}</p>

Run this across your repo, and you instantly get a list of every translation key used — great for detecting missing or unused entries in your i18n files.

"dashboard.title"
"errors.network"
"profile.logout"

7. Regex and AI: the pattern whisperer

Regex quietly powers modern AI workflows too.
In prompt engineering or data preparation, you often need to clean model output — e.g., extract only bullet lists or numbered answers.

Example: filtering AI-generated numbered items

const aiResponse = `
1. Refactor the login flow
2. Add input sanitization
3. Improve caching for heavy queries
`;

const items = aiResponse.match(/(?<=^\d+\.\s)(.*?)(?=\n|$)/gm);
console.log(items);

You can pipe a model’s raw response through this regex to get just the “content” of the list — no markdown or hallucinated noise.

["Refactor the login flow", "Add input sanitization", "Improve caching for heavy queries"]

Even better: use lookaheads to conditionally extract text before or after specific keywords in LLM output, helping you turn messy text into structured data.

8. Regex as a UX ally

Regex can also enhance user-facing experiences in subtle ways.

Example: flexible user input normalization

Allow users to type phone numbers however they like — regex can normalize them before validation:

const phone = "55 5123-4567";
const normalized = phone.replace(/[^\d]/g, '').replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
console.log(normalized);

Now 555.123.4567 all become the same friendly format.

9. Regex in your IDE: refactoring like a ninja

Modern editors like VS Code let you apply regex in “Find and Replace.”
You can, for instance, transform JSX props en masse:

Example: convert legacy props to new API format

Find:

label="([^"]+)"\s+value="([^"]+)"

Replace:

option={{ label: "$1", value: "$2" }}

<Select label="Mexico" value="MX" />
<Select label="Canada" value="CA" />

<Select option={{ label: "Mexico", value: "MX" }} />
<Select option={{ label: "Canada", value: "CA" }} />

Congratulations — you just migrated 200 dropdowns in one click.

The regex mindset

Regex isn’t about syntax — it’s about pattern recognition.

Once you start seeing patterns everywhere, you’ll use regex for things you never thought of: cleaning datasets, detecting unusual commit formats, shaping AI inputs, or auditing codebases.

Every developer should learn enough regex to stop fearing it and start wielding it.
Because once you do, you realize it’s not a tool for matching — it’s a tool for understanding.

The Web Content Accessibility Guidelines (WCAG), published by the World Wide Web Consortium (W3C), define how to make web content more inclusive. The newest version, WCAG 2.2 (released October 2023), refines the standards set by 2.1 and introduces new success criteria to address mobile use, cognitive accessibility, and low-vision users.

The good news: if your site already conforms to WCAG 2.1, you’re most of the way there. But the updates in 2.2 highlight critical areas we often overlook — focus visibility, target sizes, authentication, and redundant input.

The four pillars of accessibility

WCAG 2.2, like its predecessors, is structured around four core principles — Perceivable, Operable, Understandable, and Robust (known by the acronym POUR).

1. Perceivable: Content must be presented in ways users can perceive (e.g., alt text, captions, sufficient contrast).

2. Operable: Interfaces must work for everyone, including those who rely on keyboards or assistive tech.

3. Understandable: Information and navigation should be easy to follow and consistent.

4. Robust: Content must work across technologies, from modern browsers to screen readers.

These principles are timeless. WCAG 2.2 builds on them by introducing criteria that reflect how people actually use the web today — particularly on mobile devices and with diverse input methods.

What’s new in WCAG 2.2

The WCAG 2.2 update adds nine new success criteria. Here are the most impactful for real-world development:

1. Focus Not Obscured (2.4.11 – Minimum / 2.4.12 – Enhanced)

Ever tabbed through a page and lost track of where you were?
WCAG 2.2 requires that the keyboard focus indicator remain visible at all times — not hidden by sticky headers, pop-ups, or overlays.
Real-life fix: In a modal dialog, give the focus outline a higher z-index and ensure sufficient contrast. Never rely on color alone to show focus.

2. Target Size (2.5.8 – Minimum)

Tiny touch targets are a nightmare for users with limited dexterity or tremors.
Now, interactive elements like buttons and links must be at least 24 × 24 CSS pixels, or provide adequate spacing.
Real-life fix: If your “Submit” button is 18 × 18 px, increase it to at least 44 × 44 px on mobile. Also ensure clickable icons have padding or invisible hit-areas.

3. Dragging Movements (2.5.7)

Some users can’t perform drag-and-drop actions easily.
Provide an alternative input method, like a button or keyboard shortcut.
Example: Allow reordering list items via arrow keys or “Move up/Move down” buttons in addition to drag-and-drop.

4. Redundant Entry (3.3.7)

Users shouldn’t have to re-enter information you already have.
Example: If your checkout form asks for the shipping address twice, autofill it from the profile or previous step. This helps users with cognitive or memory challenges.

5. Accessible Authentication (3.3.8)

CAPTCHAs and tricky password puzzles can block users with cognitive, visual, or motor disabilities.
Now, authentication processes must avoid memory or pattern-based tests without an accessible alternative.
Example: Replace complex image CAPTCHAs with accessible options (audio CAPTCHA, email link verification, or device push notification).

Accessibility in everyday design and development

Accessibility isn’t just about compliance — it’s about usability. Here’s how these guidelines translate into day-to-day decisions:

Design phase

• Ensure color contrast meets AA (4.5:1) or AAA (7:1) standards.

• Use consistent spacing, labels, and button styles to improve comprehension.

• Provide visible focus states for all interactive elements — not just the keyboard user.

Development phase

• Use semantic HTML (<button>, <label>, <nav>, <main>) before adding ARIA roles.

• Test navigation with a keyboard only — no mouse, no touchpad.

• Avoid “keyboard traps” where users can’t escape a modal or dropdown.

• For touch interfaces, test buttons with physical devices and emulate hand tremors (many Android tools support this).

QA and testing phase

• Include accessibility testing in CI/CD.

• Use tools like axe DevTools, Lighthouse, or WAVE for automated checks.

• Pair automated testing with manual screen reader tests (NVDA, VoiceOver).

Practical checklist for developers

Before shipping any feature, ask yourself:

1. Can every interactive element be reached and operated with a keyboard?

2. Does the focus indicator stay visible and clear?

3. Are tap targets at least 24×24 px with enough spacing?

4. Do forms reuse known information instead of asking again?

5. Are login flows accessible without CAPTCHAs or memory tasks?

6. Does text have enough contrast, and are color cues not the only indicators?

7. Have you tested with a screen reader and real users with assistive tech?

If you can answer “yes” to all, you’re likely WCAG 2.2 AA-ready.

The human side of accessibility

Accessibility is about empathy. Behind every guideline is a real person trying to do something simple — buy groceries, apply for a job, read the news.

• A developer might see “2.5.8 Target Size,” but a user with Parkinson’s sees the difference between frustration and independence.
  A designer might see “3.3.7 Redundant Entry,” but a person with dyslexia sees relief from repetitive effort.

• When we design inclusively, we make technology that respects people’s time, dignity, and capabilities.

Why accessibility makes business sense

Accessibility is often framed as a compliance issue, but it’s also smart business.

• Broader audience: More than a billion people worldwide have some form of disability. Accessible design improves UX for all users — for example, captions help people in noisy environments, and high-contrast modes benefit mobile use in sunlight.

• Legal protection: Regions such as the EU, U.S. (ADA + Section 508), and Canada already require digital accessibility for public and commercial websites.

• SEO advantage: Many accessibility improvements (semantic HTML, descriptive links, alt text) improve search ranking and performance.

• Brand trust: A commitment to inclusion sends a strong ethical signal to users, employees, and partners.

Final thoughts

The web was meant to be universal. WCAG 2.2 is our roadmap for keeping it that way.

For developers, accessibility is not a checklist to clear once — it’s an ongoing practice woven into design systems, component libraries, and engineering culture. By baking accessibility into every sprint, we build not only better products but a more equitable internet.

At Lynsoft, we believe accessibility is where empathy meets engineering. It’s not about perfection — it’s about intent. Every label we name, every contrast we test, and every flow we refine brings someone closer to inclusion. WCAG 2.2 helps us stay accountable to that mission: making the web usable, human, and open to everyone.

Because accessibility isn’t just good practice — it’s good design, good business, and good humanity.

References and further reading

• W3C – Web Content Accessibility Guidelines (WCAG) 2.2: https://www.w3.org/TR/WCAG22/

• Level Access – WCAG 2.2 AA Summary and Checklist: https://www.levelaccess.com/blog/wcag-2-2-aa-summary-and-checklist-for-website-owners/

• AccessiBe – Understanding WCAG 2.2: https://accessibe.com/blog/knowledgebase/wcag-two-point-two

• W3C WAI – New in WCAG 2.2: https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/

But here’s the thing: not every project needs the complexity (or the price tag) of the big clouds. When I’m building fast, when budgets matter, or when I want full control without ten layers of abstraction — that’s when Hetzner shines.

Hetzner isn’t flashy. It doesn’t overwhelm you with 300 services and acronyms. What it does give you is reliable hardware, transparent pricing, and the flexibility to shape the server exactly the way you need it. For a lot of real-world client projects, that’s not just enough — it’s ideal.

Picking the right plan (from an agency perspective)

Here’s the truth: most of the time, we start projects on Hetzner’s smaller VPS plans. Why? Because speed of iteration matters more than raw specs at the beginning.

At Lynsoft, our rule is:

• Start small, validate fast.

• Scale up only when the product or client load demands it.

• Always design the system so migration to a bigger plan is painless.

That mindset has saved our clients thousands of dollars and us countless headaches.

Location matters more than you think

Hetzner’s regions (Germany, Finland, U.S.) look like a simple dropdown when you create your server. But for us, choosing the right one has a direct impact on user experience.

When Lynsoft deployed an app for a client in Costa Rica, we tested from both the U.S. and German data centers. Latency dropped by nearly half from the U.S. region. That difference translated into snappier dashboards and happier end users.

It’s a small decision during setup that pays off in production.

Security from day one (not day ten)

One thing I’ve learned: you don’t secure a server later. Later never comes. The moment a VPS goes live, I run through a quick checklist:

• SSH keys only. Passwords disabled. Always.

• Root login disabled. No excuses.

• UFW firewall enabled. Allow only what the app needs.

We’ve built a set of tools that automatically harden servers based on the security level you select. The stronger the security, the more system resources it will consume — so the goal is to balance protection with performance. The table below summarizes each (opinionated) level:

src
 ┣ config
 ┃ ┣ security-levels.conf
 ┃ ┗ system-paths.conf
 ┣ lib
 ┃ ┣ common.sh
 ┃ ┣ config.sh
 ┃ ┣ logging.sh
 ┃ ┣ module-base.sh
 ┃ ┗ validation.sh
 ┣ modules
 ┃ ┣ 01-system-update.sh
 ┃ ┣ 02-ssh-hardening.sh
 ┃ ┣ 03-firewall.sh
 ┃ ┣ 04-fail2ban.sh
 ┃ ┣ 05-kernel-security.sh
 ┃ ┣ 06-auditing.sh
 ┃ ┣ 07-monitoring.sh
 ┃ ┣ 08-security-tools.sh
 ┃ ┣ 09-ubuntu24-features.sh
 ┃ ┣ 10-compliance-scanning.sh
 ┃ ┗ 11-reporting.sh
 ┣ harden.sh
 ┣ install.sh
 ┗ security-validation.sh

Creating snapshots like a habit

Every founder has a story about the night they broke production. Mine involves a late-night Nginx config change that locked me out of a server completely. That’s when snapshots stopped being “nice to have” and became non-negotiable.

Now, before I touch critical configs, I make a snapshot in the Hetzner Cloud Console. I label it something obvious like before-docker-update or pre-db-migration. If something goes wrong, I just roll back.

Key takeaways:

1. Take a snapshot in the Hetzner Cloud Console.

2. Name it clearly (pre-docker-update, before-db-upgrade).

3. Only then do we touch configs or deploy containers.

It’s the equivalent of a “Save Game” button for production. And when you’re managing multiple projects for clients, it’s not optional — it’s how you sleep at night.

Backups: cheap insurance for serious projects

Snapshots are great, but they’re manual. For ongoing client projects, we also enable Hetzner’s automatic backups. It costs a few extra euros per month, but the ROI is huge.

I’ve had a client’s database corrupt after a bad import. Restoring from backup took minutes and avoided what could’ve been a very awkward conversation; it’s saving your reputation as a developer and your client’s trust in your company.

At Lynsoft, we frame this to clients as part of our “peace of mind” policy: we don’t just build software, we safeguard it.

Making the server yours

Once the basics are in place — updates, security, snapshots, backups — that’s when the fun begins. Some projects get Docker with multiple microservices. Others run on a simple Nginx reverse proxy pointing to a Next.js app. Internal tools sometimes just need a bare Postgres database with monitoring stacked on top.

That’s what I love about Hetzner: the freedom. With AWS for instance, you often feel like you’re being funneled into using their services (RDS for databases, ECS/Fargate for containers, CloudFront for CDN, etc.). With Hetzner, you get the raw building blocks and the control to shape them however you want. You’re in control of what runs on the machine. Want Postgres? Install it yourself. Prefer Docker Swarm, Kubernetes, or Nomad? Spin it up. Nginx, Traefik, Caddy? Your choice.

The important thing isn’t the exact stack — it’s that you own the environment. With Hetzner, we’re not fighting arbitrary limits. We build what the project needs.

The founder’s perspective

Looking back at all the servers I’ve deployed, one thing stands out: choosing Hetzner isn’t just about saving money. It’s about reliability and control — two things every founder needs when building software that real people rely on.

That doesn’t mean AWS or other cloud giants don’t have their place. If you’ve got deep budgets and need to move at lightning speed with managed services, they can be the right call. But when cost efficiency and flexibility matter, Hetzner is hard to beat.

For me, a well-configured Hetzner VPS is like a solid foundation: invisible to users, but essential for everything built on top.

And if there’s one lesson I’ve learned over the years, it’s this: treat every VPS as if it were going to production tomorrow. Secure it, back it up, and make it yours.

That mindset is what transforms a low-cost server into infrastructure you can trust.

In today’s development world, reactivity has become an essential feature for modern web development frameworks. This is because reactivity allows the user interface to automatically update in response to changes in the application state, providing a seamless and dynamic user experience.

With reactivity, developers can create applications that are more interactive and responsive, as the framework efficiently manages the synchronization between the data model and the user interface. This means that when data changes, the UI reflects these changes instantly without requiring manual DOM manipulation.

As a result, it not only enhances the performance of web applications but also simplifies the development process by reducing the amount of code needed to keep the UI in sync with the underlying data. Consequently, frameworks that prioritize reactivity, such as Svelte, are gaining popularity among developers who seek to build efficient and user-friendly applications.

How popular frameworks handle reactivity

To understand how reactivity is utilized in current web development frameworks, it's important to compare how different frameworks implement this feature.

In frameworks like React, reactivity is achieved through a virtual DOM and a component-based architecture. React uses a system of state and props to manage data flow, where changes in state trigger re-renders of components, updating the UI efficiently. This approach allows developers to build complex user interfaces with a clear separation of concerns.

Vue.js takes a slightly different approach by using a reactive data-binding system. It employs a reactivity system that automatically tracks dependencies and updates the DOM when data changes. Vue's reactivity is more granular, allowing for fine-tuned updates that can improve performance in certain scenarios.

Angular, on the other hand, uses a two-way data binding mechanism, which synchronizes the model and the view. This means that any changes in the UI are immediately reflected in the model and vice versa. Angular's reactivity is deeply integrated into its framework, providing a robust solution for building large-scale applications.

Svelte offers a unique take on reactivity by compiling components into highly efficient imperative code that directly manipulates the DOM. This means that Svelte applications do not require a virtual DOM, resulting in faster updates and less overhead. Svelte's reactivity is built into the language itself, making it intuitive and easy to use for developers.

Each of these frameworks has its own strengths and weaknesses in terms of reactivity, and the choice often depends on the specific needs of the project and the preferences of the development team. By understanding these differences, developers can make informed decisions about which framework best suits their application requirements.

Introduction to Runes in Svelte 5

In the latest version of Svelte, known as Svelte 5, a groundbreaking concept called "Runes" has been introduced. This innovative feature marks a major leap forward in how developers can handle state management and reactivity in their applications. Runes provide a more powerful and flexible way to define and interact with reactive data.

They allow developers to create more complex and dynamic user interfaces with ease. By using Runes, developers can write cleaner and more maintainable code, as they offer a more intuitive approach to managing the flow of data throughout an application.

Understanding Runes Through Examples

At the time of writing this article, there are currently seven runes integrated into the Svelte 5 framework. These runes are designed to enhance the way developers interact with state and manage reactivity in their applications:

• $state

<script>
  let counter = $state(0);

  const increment = () => {
    counter++;
  }
</script>

<button onclick={increment}>Count: {counter}</button>

• $derived

<script>
  const price = $state(100);
  const quantity = $state(2);
  const total = $derived(price * quantity);
</script>

<div>
  <p>Price: {price}</p>
  <p>Quantity: {quantity}</p>
  <p>Total: {total}</p>
</div>

• $effect

<script>
  // Reactive state for background color
  let backgroundColor = $state('#ffffff');

  // Synchronize the state with the document body background
  $effect(() => {
    document.body.style.backgroundColor = backgroundColor;
  });
</script>

<div style="padding: 1rem; text-align: center;">
  <label for="color-picker">Choose background color:</label>
  <input
    id="color-picker"
    type="color"
    bind:value={backgroundColor}
    style="margin-left: 0.5rem;"
  />
  <p>The current background color is: {backgroundColor}</p>
</div>

• $props

// MessageComponent.svelte
<script>
  const { message } = $props;
</script>

<p>{message}</p>

<MessageComponent message="Hello from parent!" />

• $bindable

<script>
  let { value = $bindable(0) }: { value: number } = $props();
</script>

<input type="number" bind:value={value} />
<p>The value is {value}</p>

<NumberInput bind:value={myValue} />

• $inspect

<script>
  let counter = $state(0);

  $inspect(counter, 'Counter Value');
</script>

<button onclick={() => counter++)}>
  Increment
</button>
<p>Counter: {counter}</p>

• $host

// ColorPicker.svelte
<svelte:options customElement="my-color-picker" />

<script>
  const colors = ['red', 'green', 'blue'];

  function dispatchColor(color) {
    $host().dispatchEvent(new CustomEvent('colorselect', { detail: color }));
  }
</script>

<div style="display: flex; gap: 10px;">
  {#each colors as color}
    <button
      style="background-color: {color}; width: 50px; height: 50px;"
      onclick={() => dispatchColor(color)}
    ></button>
  {/each}
</div>

// App.svelte
<script>
  import './ColorPicker.svelte';

  let selectedColor = 'none';
</script>

<my-color-picker
  oncolorselect={(event) => selectedColor = event.detail}
/>

<p>Selected color: {selectedColor}</p>
<div
  style="width: 100px; height: 100px; border: 1px solid black; background-color: {selectedColor};"
></div>

What truly sets Svelte 5 apart from other frameworks is how it implements Signals. First, they embedded them within the framework. Although this has its own drawbacks, it allows us, for example, to completely remove signals when compiling in server-side rendering mode, as they are unnecessary overhead on the server.

Conclusion

In conclusion, Svelte 5 introduces a revolutionary approach to reactivity with the introduction of Runes, offering developers a more intuitive and efficient way to manage state and data flow in their applications.

• By eliminating the need for a virtual DOM and embedding reactivity directly into the language, Svelte 5 provides faster updates and reduced overhead, making it an attractive choice for building modern web applications.

• The use of Runes allows for cleaner, more maintainable code and enhances the ability to create complex, dynamic user interfaces.

• As Svelte continues to evolve, its innovative features like Runes and Signals position it as a forward-thinking framework with significant potential for future developments in web development.

In Part 1 we learn how to quickly set up a Svelte 5 project with their new CLI. Check it out!

In the next part, we will start to create a real-world example project where we’ll add features and show what can be achieved with this great framework. We’ll be working within this simple repo I created for the series: Svelte5-course.

So, stay tuned & see ya in next chapter!

Svelte 5 is a compiler-based framework that takes a unique approach to web development. Unlike frameworks like React and Vue that use a Virtual DOM to manage reactivity, Svelte compiles your code to vanilla JavaScript during build time. This approach has several benefits:

• Performance: No Virtual DOM means less runtime overhead and faster updates.

• Smaller Bundle Size: Svelte only includes the code that your app actually needs, leading to leaner bundle sizes.

• Easier Reactivity: Svelte's reactivity model is simpler, using reactive declarations and $effect runes, which we’ll explore in depth in this series.

Key Features of Svelte 5:

• Runes for Fine-Grained Reactivity: Svelte 5 introduces "runes," a signal-powered reactivity API that provides explicit control over application state. Key runes include $state for declaring reactive variables, $derived for creating reactive values based on other states, and $effect for executing side effects in response to state changes

Due to the reactive nature of Svelte I haven’t found too many use cases where the $effect rune is really needed.

• Snippets for Reusable Markup: Replacing the previous slot system, snippets allow developers to define reusable blocks of markup and logic within components. This promotes code organization and reduces redundancy, enhancing component composition.

• Enhanced Compiler Performance: Svelte 5's compiler has been overhauled to generate more optimized JavaScript code, resulting in smaller bundle sizes and faster runtime performance. This improvement leverages Svelte's compiler-first approach to eliminate unnecessary overhead.

• Native TypeScript Support: Svelte 5 offers native TypeScript support, allowing developers to use TypeScript annotations directly within Svelte components. This integration streamlines development workflows and enhances type safety without the need for additional tooling.

// Just add a lang prop to the script and magic just happens
<script lang="ts">
  //...code
</script>

• Simplified Event Handling: Event handling in Svelte 5 has been refined to reduce boilerplate and increase flexibility. Event handlers are now treated as properties, aligning them with other component properties and simplifying the syntax for attaching event listeners.

<script lang="ts">
  import WaterPump from './WaterPump.svelte';

  let size = $state(10);
  let bloomed = $state(false);

  const resetPlant = () => {
    size = 10;
    bloomed = false;
  }
</script>

<WaterPump
  water={(amount) => {
    size += amount;
    if (size > 50) bloomed = true;
  }}
  dry={(amount) => {
    if (size > 0) size -= amount;
  }}
/>

{#if bloomed}
  <button onclick={resetPlant}>New Plant</button>
  <span class="flower">🌸</span>
{:else}
  <span class="plant" style="font-size: {0.2 * size}em">
    🌱
  </span>
{/if}

<script lang="ts">
  let { water, dry } = $props();
  let amount = $state(5);
</script>

<div>
  <button onclick={() => water(amount)}>💧 Water</button>
  <button onclick={() => dry(amount)}>☀️ Dry</button>

  <div>
    <button onclick={() => amount--} disabled={amount <= 1}>-</button>
    <span>Water Amount: {amount}</span>
    <button onclick={() => amount++}>+</button>
  </div>
</div>

• Benefits of Vite in SvelteKit

  SvelteKit is built on top of Vite, so we get to tap into its extensive and ever-evolving ecosystem. That means any tool compatible with Vite integrates seamlessly with SvelteKit, giving us a wealth of options to enhance our development experience with minimal setup.

  Here are some practical examples:

  • Vitest for quick and effective unit and integration testing

  • Storybook to streamline component-driven development

  • "@sveltejs/enhanced-img" for static image optimization without extra hassle

On top of that, SvelteKit leverages Vite's optimized development server and blazing-fast hot module replacement (HMR). This setup keeps our development workflows smooth and responsive, allowing us to see changes instantly and stay focused on building.

Setting Up Your Environment

To get started, you need to install Node.js (version 20 or higher is recommended) and set up a SvelteKit project.

Step-by-Step Setup

The Svelte team has shipped a great CLI tool to generate a starter boilerplate project from scratch 🤩

1. Install SvelteKit: Run the following command to create a new SvelteKit project:

    npx sv create my-app
   

2. Choose any of the three options provided, I always pick the minimal for starting new projects, full-time typescript, prettier, eslint, tailwindcss and many other tools that come out-of-the-box when setting up a new svelte app. Below I left the ones I usually pick:

One amazing thing is that it allows you to start up a local docker container database within the application, fully integrated with drizzle!

Spin up your database with the following command:

bun run db:start

As you may see I’m using bun, lately I’ve been more inclined to it, give it a try!

Project Structure Overview

SvelteKit uses a file-based routing system, where your file structure directly determines the routes of your application. This is the scaffold of the project within the above picks from the CLI:

TEST/
├── e2e/                       # End-to-end tests (e.g., Playwright)
├── node_modules/              # Dependencies
├── src/
│   ├── lib/                   # Library for utilities, stores, reusable functions/components
│   ├── server/                # Server-specific logic
│   │   ├── db/                # Database-related files (schema, auth)
│   │   │   ├── index.ts
│   │   │   └── schema.ts
│   │   └── auth.ts            # Authentication handling (e.g., Lucia)
│   ├── routes/                # File-based routing for SvelteKit
│   │   ├── demo/              # Example route or feature-specific routes
│   │   └── lucia/
│   │       └── login/         # Authentication routes or specific modules
│   │       ├── +page.svelte
│   │       ├── +page.server.ts
│   │       ├── +layout.svelte
│   │       └── +page.svelte
│   ├── app.css                # Global CSS
│   ├── app.d.ts               # TypeScript declarations for SvelteKit
│   ├── app.html               # Main HTML template for the app
│   ├── demo.spec.ts           # Component or page-specific tests
│   └── hooks.server.ts        # Server hooks for SvelteKit (auth, session handling)
├── static/                    # Static assets (images, icons, etc.)
├── .env                       # Environment variables
├── .env.example               # Example environment variables file
├── .gitignore                 # Git ignore file
├── .npmrc                     # npm configuration file
├── .prettierignore            # Files ignored by Prettier
├── .prettierrc                # Prettier configuration
├── bun.lockb                  # Bun package manager lock file
├── docker-compose.yml         # Docker configuration
├── drizzle.config.ts          # Drizzle ORM configuration
├── eslint.config.js           # ESLint configuration
├── package.json               # Project metadata and dependencies
├── playwright.config.ts       # Playwright configuration for end-to-end testing
├── postcss.config.js          # PostCSS configuration for CSS processing
├── README.md                  # Project documentation
├── svelte.config.js           # SvelteKit configuration
├── tailwind.config.ts         # Tailwind CSS configuration
├── tsconfig.json              # TypeScript configuration
└── vite.config.ts             # Vite configuration

Summary and Next Steps

That’s all folks!

In Part 1, you’ve learned:

• What differences Svelte 5 from other frameworks

• Key features that will streamline your workflow

• How to set up a SvelteKit project and understand its file-based routing structure.

Next, in Part 2, we’ll dive into Svelte’s reactivity model and explore more on the runes concept.

What is Comment Anchors?

Comment Anchors is a VS Code extension that lets you add special markers in your comments, which can then be easily navigated through an integrated panel. These markers help in organizing your code by providing quick access points to important sections or TODOs. This is especially useful in large projects where finding specific pieces of code can be challenging.

Installation

To install Comment Anchors in VS Code, follow these steps:

1. Open VS Code: Launch your Visual Studio Code editor.

2. Access Extensions: Click on the Extensions view icon on the Sidebar or press Ctrl+Shift+X.

3. Search for Comment Anchors: Type "Comment Anchors" in the search bar.

4. Install: Click on the Install button for the Comment Anchors extension by Exodius Studios.

Once installed, you’re ready to start using Comment Anchors to streamline your coding experience.

Basic Usage

Adding Comment Anchors

To add a comment anchor, you simply add a comment in your code with a specific prefix. The most common prefixes are ANCHOR, TODO, FIXME, NOTE, and SECTION. Here’s how you can add these anchors:

// ANCHOR: Imports
import React from 'react';
import { useState } from 'react';

// TODO: Implement dark mode toggle feature
function App() {
  const [count, setCount] = useState(0);

  // FIXME: Resolve issue with negative counter values
  function handleIncrement() {
    setCount(prevCount => prevCount + 1);
  }

  // STUB: Default decrement handler
  function handleDecrement() {
    // TODO: Implement decrement logic
  }

  return (
    <div>
      {/* NOTE: Button increments the counter */}
      <button onClick={handleIncrement}>Increment</button>

      {/* REVIEW: Ensure counter doesn't display negative values */}
      <p>Counter: {count}</p>

      {/* SECTION: Decrement Button */}
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

export default App;

Each of these prefixes creates a navigable anchor that you can access later.

Viewing and Navigating Anchors

To view and navigate your comment anchors:

1. Open the Comment Anchors Panel: Go to the Activity Bar and click on the Comment Anchors icon. Alternatively, you can press Ctrl+Shift+P and type "Comment Anchors: Focus Comment Anchors View".

2. Explore Your Anchors: The panel will display all the anchors in your project, grouped by file. You can click on any anchor to jump directly to that part of the code.

Customizing Comment Anchors

You can customize the appearance and behavior of your comment anchors through the settings:

1. Open Settings: Press Ctrl+, to open the Settings.

2. Search for Comment Anchors: Type "Comment Anchors" in the search bar.

3. Adjust Settings: Here, you can modify various settings such as the types of anchors, their color, and their visibility.

For example, you can change the colors for different anchor types to make them stand out more or less, depending on your preference.

Advanced Features

Custom Anchor Types

You can define your own anchor types if the default ones don’t meet your needs. To do this:

1. Open Settings JSON: Click on the Open Settings (JSON) icon in the top right corner of the settings page.

2. Add Custom Types: Add custom anchor types in the JSON file under the commentAnchors.tags array.

"commentAnchors.tags": [
    {
        "name": "HIGHLIGHT",
        "icon": "🌟",
        "color": "#FFD700"
    },
    {
        "name": "IMPORTANT",
        "icon": "⚠️",
        "color": "#FF4500"
    }
]

These custom types will now be recognized as comment anchors in your code.

Filtering Anchors

You can filter comment anchors by type or by keyword. This is particularly useful when you want to focus on specific types of comments, like TODOs or FIXMEs. Use the search box in the Comment Anchors panel to filter anchors.

Synchronizing Anchors

The extension also allows synchronization of comment anchors across multiple files. This means you can have a unified view of all important comments across your entire project, making it easier to keep track of tasks and important notes.

Conclusion

The Comment Anchors extension is a powerful tool that can significantly improve your productivity in Visual Studio Code. By allowing you to mark and navigate important comments throughout your codebase, it helps keep your projects organized and manageable. Whether you are working on a large project with multiple contributors or a solo venture, Comment Anchors provides a seamless way to keep track of your code.

Install Comment Anchors today and start experiencing a more efficient way to manage and navigate your code!

This guide should give you a solid foundation for using the Comment Anchors extension in VS Code. Happy coding!

Next.js has long been a favored framework for developers seeking to build fast and efficient web applications. With the release of Next.js 14, there's much to be excited about. The evolution of web development tools and frameworks has always been a driving force in the tech industry, guiding how developers create, deploy, and maintain applications.

This article will explore the introduction of new features such as enhanced forms, layouts, caching, authentication methods, accessibility improvements, and middleware enhancements. These advancements are set to redefine development practices by offering more efficient solutions to common challenges, thereby enabling developers to craft more powerful and responsive applications with ease.

New Features and Enhancements

Next.js 14 is packed with features designed to enhance the development experience, improve performance, and offer more flexibility. Here are some of the most notable updates:

Simplifying Data Mutations

Gone are the days of manually creating API Routes. With Next.js 14, developers can define functions that securely run on the server, directly from React components. This approach not only streamlines server-centric data mutations but also integrates with web fundamentals like forms and the FormData Web API. Developers can use Server Actions through a form for progressive enhancement or call them directly as functions, ensuring type-safety with TypeScript and efficient network roundtrips.

export default function Page() {
  async function create(formData) {
    'use server';
    const id = await createItem(formData);
  }
  return (
    <>
      <form onSubmit={create}>
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

Mutations: Updating Data on the Server

Mutations in Next.js 14 are actions that change the state of data on the server. They are essential for operations like creating, updating, or deleting records in a database. Mutations ensure that data integrity is maintained while allowing for responsive user interfaces.

Key Concepts:

1. Data Integrity: Mutations help maintain consistency in your data by ensuring that changes are applied in a controlled manner.

2. Optimistic Updates: Next.js supports optimistic updates, where the UI is updated immediately, and the server change is applied in the background. This provides a smoother user experience.

Example: Server Mutation for Database Update

import { mutateServer } from 'next/server';

export default function Dashboard() {
  async function updateUserData(userId, newData) {
    'use server';
    // Update user data in the database
    const updatedUser = await database.users.update(userId, newData);
    return updatedUser;
  }

  return (
    <div>
      {/* UI components */}
      <button onClick={() => updateUserData(1, { name: 'John Doe' })}>Update User</button>
    </div>
  );
}

This example demonstrates a server mutation that updates user data in a database, ensuring that changes are handled securely and efficiently on the server.

Integrating Server Actions with the App Router

The App Router in Next.js 14 provides a streamlined approach to integrating server actions and mutations within your application. This allows for a clear separation of client-side and server-side logic, facilitating better code organization and maintainability.

Steps to Integrate Server Actions:

1. Define Server Actions: Create server action functions within your component files, marked with 'use server' to indicate server-side execution.

2. Call Server Actions: Use these functions within your components to handle tasks like data fetching or form submissions.

3. Handle Responses: Ensure that responses from server actions are properly managed, updating the UI as necessary.

Example: Integrating Server Action in App Router

import { serverAction } from 'next/server';

export default function Profile() {
  async function saveProfile(data) {
    'use server';
    // Save profile data
    const result = await profileService.save(data);
    return result;
  }

  return (
    <div>
      {/* UI components */}
      <form onSubmit={saveProfile}>
        {/* Form fields */}
        <button type="submit">Save Profile</button>
      </form>
    </div>
  );
}

In this setup, the saveProfile function is a server action integrated within the App Router, providing a cohesive and efficient way to handle profile updates.

Practical Tips and Best Practices

• Use the App Router for a clear distinction between server and client components, ensuring better organization and maintainability.

• Leverage ISR for pages with content that changes periodically, allowing for automatic updates without the need for manual intervention.

• Optimize Cache Settings by setting appropriate cache headers and revalidation intervals to balance performance and data freshness.

• Monitor Data Usage to avoid excessive data fetching, which can lead to performance bottlenecks. Use tools like Next.js analytics to track data fetching metrics.

Integration with Caching and Revalidation

Data Fetching with the App Router

The App Router in Next.js 14 simplifies data fetching by providing a structured way to manage server-side and client-side data needs. The approach emphasizes component-based data fetching, allowing for better separation of concerns and easier maintenance.

Key Concepts:

1. Server Components: These components handle server-side rendering and can fetch data directly from the server. They do not include client-side JavaScript and are ideal for scenarios where SEO and initial load performance are critical.

2. Client Components: These components fetch data on the client side and are used for interactive features. They allow for dynamic data fetching using hooks like useEffect and useState.

Example: Fetching Data with Server Components

import { fetchPosts } from '../lib/api';

export default async function Home() {
  const posts = await fetchPosts();
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

In this example, data is fetched on the server and rendered directly, reducing the need for additional client-side data fetching.

Caching Strategies

Caching is essential for improving performance and reducing server load by storing responses and reusing them for subsequent requests. Next.js 14 offers several caching mechanisms that can be integrated seamlessly with the App Router.

Types of Caching:

1. Static Generation: Pages are generated at build time and served as static files. This approach is suitable for content that does not change frequently.

2. Incremental Static Regeneration (ISR): Allows you to update static pages incrementally after the initial build. This ensures that the pages remain up-to-date without rebuilding the entire site.

Implementing ISR Example:

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 60, // Revalidate every 60 seconds
  };
}

In this setup, the revalidate parameter ensures that the data is refreshed periodically, providing a balance between performance and data freshness.

Revalidation Techniques

Revalidation is the process of updating stale data with fresh data from the server. Next.js 14 makes this process straightforward, allowing developers to set revalidation intervals and manage data consistency effectively.

Revalidation Strategies:

1. On-Demand Revalidation: Trigger revalidation based on specific events or user actions.

2. Background Revalidation: Automatically update data in the background while serving stale content until the new data is ready.

Example: On-Demand Revalidation

import { revalidatePath } from 'next/cache';

export default async function handler(req, res) {
  await revalidatePath('/path-to-revalidate');
  res.json({ revalidated: true });
}

This example demonstrates how to trigger revalidation for a specific path, ensuring that the most current data is served to users.

Practical Tips and Best Practices

• Use the App Router for a clear distinction between server and client components, ensuring better organization and maintainability.

• Leverage ISR for pages with content that changes periodically, allowing for automatic updates without the need for manual intervention.

• Optimize Cache Settings by setting appropriate cache headers and revalidation intervals to balance performance and data freshness.

• Monitor Data Usage to avoid excessive data fetching, which can lead to performance bottlenecks. Use tools like Next.js analytics to track data fetching metrics.

Enhanced Middleware Capabilities

Understanding Middleware

Middleware in Next.js 14 operates at the edge of your application, allowing you to run code before a request is completed. This can be used for a variety of tasks such as modifying response headers, handling authentication, and implementing redirects.

Key Concepts:

1. Request Interception: Middleware can intercept requests and modify them before they reach the application’s main logic.

2. Edge Functions: Middleware runs on the edge, closer to the user, which reduces latency and improves performance.

3. Global Scope: Unlike API routes, middleware can be applied globally across your application, providing a centralized approach to request handling.

Example: Middleware for Authentication

import { NextResponse } from 'next/server';

export function middleware(request) {
  const token = request.cookies.get('auth-token');

  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*'],
};

This middleware checks for an authentication token and redirects unauthenticated users to the login page, ensuring that only authorized users can access protected routes.

Middleware Use Cases

Middleware can be used for a wide range of scenarios, from simple request handling to complex logic execution. Here are some common use cases:

1. Authentication and Authorization: Verify user credentials and permissions before granting access to protected resources.

2. Localization: Redirect users to different versions of the site based on their location or language preferences.

3. Analytics and Logging: Collect and log request data for analytics and monitoring purposes.

4. Content Personalization: Customize content delivery based on user preferences or behaviors.

Faster Code Updates with Fast Refresh

Fast Refresh in Next.js 14 has revolutionized the way we handle code updates which has became up to 96.3% faster. This enhancement allows developers to see changes almost instantaneously, fostering a more dynamic and efficient coding environment. The integration of Fast Refresh with Turbopack means that changes in React components are reflected immediately without the need for a full page reload, making the development cycle quicker and more responsive. Additionally, error handling has been improved, allowing developers to catch and correct mistakes swiftly without disrupting the overall flow.

By streamlining these critical aspects of the development process, Next.js 14 not only enhances productivity but also significantly elevates the user experience for developers.

Improved Image Optimization

Image optimization has always been a strong suit of Next.js, and version 14 takes it a step further. The new image component in Next.js 14 comes with automatic lazy loading and format selection, ensuring that images are delivered in the most optimal format and size. This not only enhances page load speeds but also improves overall user experience.

import Image from 'next/image'
import Link from 'next/link'

export default function Logo() {
  return (
    <Link href="/" aria-label="Logo">
      <Image priority src="/logomark.png" width={60} height={60} alt="Logomark" />
    </Link>
  )
}

Better TypeScript Support

Next.js 14 brings better integration with TypeScript, making it easier for developers to write and maintain type-safe code. With enhanced TypeScript support, developers can catch errors early in the development process, leading to more robust and reliable applications.

Pro Tip: The new App Router allows end-to-end type safety if you use a content provider or a database that supports Typescript, ex. an ORM.

Improving Accessibility

Accessibility is a crucial aspect of web development, ensuring that all users, including those with disabilities, can effectively interact with your website or application. Next.js 14 emphasizes the importance of building inclusive web experiences by providing tools and best practices for enhancing accessibility. This chapter explores how to integrate accessibility features in your Next.js projects, focusing on strategies, tools, and practical implementations.

The Importance of Accessibility

Web accessibility ensures that websites and applications are usable by everyone, including people with visual, auditory, motor, and cognitive impairments. Accessibility not only promotes inclusivity but also improves the overall user experience and can enhance SEO and legal compliance.

Key Principles of Accessibility:

1. Perceivable: Information and UI components must be presentable in ways that users can perceive, regardless of their abilities.

2. Operable: Users must be able to interact with and navigate the interface easily.

3. Understandable: The content and operation of the interface should be clear and intuitive.

4. Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.

Accessibility Features in Next.js 14

Next.js 14 offers several built-in features and recommendations to help developers create accessible applications. By following these guidelines, you can ensure that your applications are inclusive and provide a seamless user experience for everyone.

Key Features:

1. Semantic HTML: Use HTML elements that convey meaning and structure, aiding assistive technologies in interpreting content.

2. ARIA Roles and Properties: Utilize Accessible Rich Internet Applications (ARIA) roles and properties to enhance the semantic meaning of UI components.

3. Focus Management: Ensure that focus is managed appropriately to help users navigate your application using keyboards or other assistive devices.

4. Responsive Design: Design for a variety of devices and screen sizes, ensuring that content is accessible on mobile and desktop platforms.

Example: Using Semantic HTML

export default function About() {
  return (
    <main>
      <h1>About Us</h1>
      <section>
        <h2>Our Mission</h2>
        <p>We strive to make the web accessible to everyone.</p>
      </section>
    </main>
  );
}

In this example, semantic HTML tags like <main>, <h1>, and <section> provide a clear structure, aiding both users and assistive technologies in understanding the content.

Tools and Techniques for Accessibility

Next.js 14 integrates with various tools and techniques to help you test and improve the accessibility of your applications. These tools can identify issues and provide recommendations for making your site more inclusive.

Key Tools:

1. Lighthouse: A tool integrated into Chrome DevTools that audits your site for accessibility, performance, and SEO.

2. Axe: A powerful accessibility testing tool that can be used in browser extensions or as part of your CI/CD pipeline.

3. Screen Readers: Tools like NVDA and VoiceOver help simulate the experience of visually impaired users, allowing you to test the accessibility of your site.

Example: Running an Accessibility Audit with Lighthouse

1. Open Chrome DevTools.

2. Navigate to the "Lighthouse" tab.

3. Select the "Accessibility" checkbox.

4. Click "Generate report" to see a detailed audit of your site's accessibility.

The Lighthouse report provides insights and actionable recommendations to enhance your site’s accessibility, such as fixing contrast issues or adding alternative text to images.

Practical Implementation of Accessibility

Incorporating accessibility into your Next.js 14 projects involves following best practices and utilizing the right tools to ensure your site meets accessibility standards.

Best Practices:

1. Use Alt Text for Images: Provide descriptive alternative text for images to aid users who rely on screen readers.

2. Ensure Keyboard Navigation: Make sure all interactive elements are accessible via keyboard, and avoid using tabindex values greater than zero.

3. Provide ARIA Landmarks: Use ARIA roles like role="banner" or role="main" to help users navigate your site more effectively.

4. Test with Assistive Technologies: Regularly test your application using screen readers and other assistive technologies to identify and address accessibility issues.

Example: Enhancing a Form for Accessibility

export default function ContactForm() {
  return (
    <form aria-labelledby="contact-form-heading">
      <h2 id="contact-form-heading">Contact Us</h2>
      <label htmlFor="name">Name</label>
      <input id="name" name="name" type="text" aria-required="true" />
      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email" aria-required="true" />
      <button type="submit">Submit</button>
    </form>
  );
}

This form includes labels linked to their corresponding inputs, ARIA labels, and a clear form structure, making it easier for users with assistive technologies to interact with it.

Accessibility Testing and CI/CD Integration

Incorporating accessibility testing into your continuous integration and delivery (CI/CD) process ensures that your application remains accessible throughout development.

Steps to Integrate Accessibility Testing:

1. Choose a Testing Tool: Select a tool like Axe or Lighthouse CI that fits your development workflow.

2. Set Up Automated Tests: Configure your CI/CD pipeline to run accessibility tests on every build.

3. Monitor and Address Issues: Regularly review test results and address any accessibility issues that arise.

Example: Integrating Axe in CI/CD

# Install Axe CLI
npm install -g axe-cli

# Run Axe on your site
axe https://example.com --save --format=json --output=axe-report.json

By integrating Axe into your CI/CD pipeline, you can automatically check for accessibility issues and generate reports, ensuring that accessibility remains a priority throughout development.

Improvements from Previous Versions

To fully appreciate the advancements in Next.js 14, let's compare it with some of the key features from previous versions:

• Next.js 10 focused on image optimization and internationalization. Next.js 14 takes these features further with enhanced image component capabilities and improved support for global applications.

• Next.js 12 introduced the innovative middleware API, which laid the groundwork for the advanced capabilities we see in Next.js 14. However, the latest version offers more flexibility and control, making it a significant upgrade.

• Next.js 13 brought improvements in server-side rendering and static site generation. While these features made development more efficient, Next.js 14 builds on this foundation with faster build times and better caching mechanisms.

Each iteration of Next.js has progressively built on the previous one, and Next.js 14 is no exception. It represents a culmination of the best features from earlier versions, refined and enhanced to meet the evolving needs of developers.

Conclusion

Next.js 14 represents a significant leap forward in web development. With enhanced middleware capabilities, faster build times, improved image optimization, better TypeScript support, and advanced routing features, it offers a powerful toolkit for developers. As we've seen from the real-life examples, companies are already benefiting from these updates, making Next.js 14 a worthy upgrade for any project.

Whether you're building a new application from scratch or looking to improve an existing one, the framework provides the tools you need to create fast, efficient, and high-performing web applications.

This article belongs to the series - Supabase One for All

Introduction

In the world of modern web development, the choice of tools and libraries can make or break your application. It's not just about the aesthetics or the speed, but the ease of development, scalability, and integration capabilities that truly distinguish an application. In this article, we'll combine some of my favorite tools for web development: Next.js+TailwindCSS, Supabase, and the new kid in town, Hugging Face Transformers.js library.

Let's do a quick overview:

• Next.js, developed by Vercel, is a React-based framework that provides out-of-the-box solutions for rendering on the server side, static site generation, and more. It accelerates the development process, ensuring your application is fast and SEO-friendly from the get-go.

• Supabase is an open-source Firebase alternative that provides you with a database, authentication, real-time subscriptions, and an easy integration with Hugging Face. It empowers developers to build applications with less boilerplate code and more focus on business logic. They introduced Supabase Edge Functions last year, allowing developers to run serverless functions at the edge, closer to the users which reduced latency and enhanced performance and became particularly beneficial these days for AI computations that, in the past, may have necessitated round trips to central servers.

• Lastly, Hugging Face Transformers.js brings the power of machine-learning models directly to the browser. With the vast array of pre-trained models available, developers can easily embed advanced text processing capabilities into their applications.

A Brief Case Study: Consider TextAnalyzerPro, a hypothetical web application that allows users to input large blocks of text. The application then utilizes machine learning models to analyze the text's sentiment, extract key entities, and summarize its content. Built using Next.js, it boasts a sleek interface crafted with TailwindCSS. The backend is powered by Supabase, handling user data profiles, authentication, storing data in a vector database and ensuring real-time feedback. The core text processing is done using a pre-trained model from Hugging Face Transformers.js, executed directly in the browser for faster results 😎

By the end of this article, you'll have a clear pathway on how to integrate all these technologies into a single, coherent, and powerful web application, much like TextAnalyzerPro.

Setting up the development environment

Before we start coding, we need to set up our development environment. This involves creating a Next.js app, installing dependencies, configuring Supabase, and integrating everything.

Create-next-app

First, we'll create a new Next.js project using create-next-app. This gives us a basic scaffolded app we can build on top of.

Run the following in an empty directory to generate a new project called TextAnalyzerPro:

npx create-next-app@latest

What is your project named? TextAnalyzerPro
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

By following the CLI instructions, you should be able to create a new Next.js boilerplate with a basic configuration. For a detailed walkthrough, refer to the official Next.js documentation.

Next, we'll install the required libraries our app depends on:

npm install tailwindcss postcss autoprefixer @supabase/supabase-js @xenova/transformers

This adds:

• Autoprefixer - for handling vendor prefixes

• Tailwind CSS - for styling purposes

• PostCSS - for processing CSS

• SupabaseJS - for accesing the Supabase's API

• Transformers - for running pre-trained models

I designed this example in under an hour, just to demonstrate how quickly you can get on track:

Here is a quick example of the message component:

Configuring Supabase

Before you can harness the features of Supabase, you need an account. Register at Supabase.io

If you haven't used Supabase yet or are just greeting the tech, check this introductory article!

After logging in, click on the New Project button, fill in the necessary details for your project. Once created, you will be provided with a URL and API key. Make a note of these; they will be crucial for connecting your Next.js application to Supabase.

Remember to check Supabase's official guide for an in-depth setup.

Generate embeddings with Supabase Edge Functions

Supabase has also hosted on Hugging Face, a small General Text Embeddings (GTE) model with power-ups ONNX weights, making it compatible with the Transformers.js library as we mentioned before.

Developing and debugging Edge Functions requires setting up a local development environment, check out this guide on how to do so!

🤔 But, wait a second, what the heck are embeddings?

Embeddings are vector representations of text generated by machine learning models like BERT. Each word or piece of text gets converted into a vector of continuous numbers based on the model's understanding.

For example, the word "apple" may become:

[0.4, 0.2, -0.1, 0.7, ...]

These numerical vectors capture semantic meaning and relationships between words. Words with similar meanings will have similar embeddings.

Some key advantages of embeddings:

• Represent concepts mathematically so they can be easily processed by ML algorithms

• Capture semantic similarities between words based on context

• Low-dimensional representation of text that can be searched and clustered

• Efficient way to represent and compare large volumes of text data

• etc

This model also benefits from fewer dimensions (384), it is 4 times smaller compared to popular models like OpenAI's text-embedding-ada-002 and even ranks higher on the MTEB leaderboard. There is a detailed article explaining why fewer dimensions are better on their blog that I recommend consulting.

which directly translates into:

• Fewer calculations for each computed distance

• Reduced-cost usage

With that in mind, let's generate our embeddings by invoking the GTE model within an EDGE Function.

If you don't know how to create an EDGE Function in Supabase, I have a step-by-step article about how to do so, check it out!

This is the function I created to generate the embeddings and insert them into a vector database.

Let's do a quick review:

• First, we import the required libraries that were configured in the import_map.json file.

• Then, we retrieve the environment keys SUPABASE_URL and SUPABASE_ANON_KEY directly from the Deno environment, as these are variables exposed by the EDGE ecosystem.

• We load the GTE model Supabase/gte-small hosted by Supabase into the pipeline.

• Then pass the input to the pipeline to generate the embeddings and extract them from the output data

• Finally, insert the generated embeddings into the vector database

To remove the ban just go to Project Settings ➡️ Database ➡️ Banned IPs. Search for yours and click on the right-side button that says unban IP.

How to create a vector database in Supabase?

To achieve this we are gonna create a migration with the following command in our project:

## I have called initial_schema, but you can call it as you want
supabase migrations new initial_schema

this command is gonna generate an empty .sql file, you can create something similar to:

create extension vector with schema extensions;

CREATE TABLE collections (
    id SERIAL PRIMARY KEY,
    embedding vector(384)
);

create index on collections using hnsw (embedding vector_cosine_ops);

Supabase vector experienced a significant performance improvement, as announced on the 6th of September, with the addition of pgvector v0.5.0 and the HNSW (Hierarchical Navigable Small World) index. More information can be found on their blog. And that's what we are using here:

1. First, we enable the vector extension.

2. Afterward, we can create a table that includes a column of the vector type.

3. Finally, we create an index utilizing the HNSW index 😅

Now, when you call the function, your table should populate with something like this:

Use cases

Up to this point, numerous potential use cases can be followed:

• Semantic search - Store embeddings for documents/pages. Then search by converting the query to embedding and finding the closest matches.

• Content recommendations - Embed user history and products. Recommend items with similar embeddings.

• Sentiment analysis - Pass text through the sentiment classifier model to embed "positive" or "negative" sentiment.

• Chatbots - Embed user input and bot responses to select the most appropriate reply.

• Summarization - Generate embeddings for sentences in articles. Select sentences with embeddings closest to the overall article embedding as a summary.

• Clustering - Embed documents/users then cluster using K-means or hierarchical clustering to find groups.

• Information retrieval - Embed query and candidate passages. Return to most similar passages.

• Text generation - Embed initial text, and pass it to the generator model to get autocompletion matching the embedding.

• Spam detection - Classify texts as spam/not spam. Embed samples to train the classifier model.

• Language detection - Embed text samples from different languages. Build a model to classify language based on embedding proximity.

Examples

Let's take the TextAnalyzerPro example from the beginning:

Imagine users submitting the following text data related to their customer support experience:

1. Text A: "I loved the latest version of the software. It has become more user-friendly and intuitive."

2. Text B: "The customer support was very unhelpful and dismissive. I'm thinking of switching to another service."

Processing the Data:

1. Generating Embeddings:

   When these texts are submitted to TextAnalyzerPro, Supabase Edge Functions, with the help of the GTE Small model, convert them into embeddings. These embeddings capture the semantic essence of each text as can be described in the next scenarios:

2. Sentiment Analysis:

   Using a pre-trained model like BERT or RoBERTa, the embeddings are analyzed for sentiment:

   • Text A: Positive

   • Text B: Negative

3. Entity Extraction:

   Identifying key entities or themes in each text:

   • Text A: Entities extracted: ["latest version", "software", "user-friendly", "intuitive"]

   • Text B: Entities extracted: ["customer support", "unhelpful", "dismissive", "another service"]

4. Summarization:

   Generating concise summaries of the submitted texts:

   • Text A: "The user praises the software's latest version for its enhanced user-friendliness."

   • Text B: "The user is unhappy with the customer support and is considering switching services."

Final thoughts

That covers the basis of how to build a modern web application from start to finish with Next.js, Supabase and Hugging Face technologies! They provide the essentials for great performance, user experience, infrastructure and AI capabilities.

By combining reusable components, intelligent APIs and global CDN hosting, we can develop full-stack apps faster than ever.

The entire stack is free and open source, enabling rapid prototyping and iteration.

There's lots of room for additional features like real-time subscriptions, analytics, and more built on this stack - so stay tuned for upcoming articles!

Potential improvements and extensions

Here are some ideas for enhancing the application even further:

1. Implement real-time functionality with Supabase subscriptions for instant updates.

2. Add a voting or commenting system for users to interact with posts.

3. Analyze text with Hugging Face's sentiment analysis to detect tone.

4. Create user profiles and avatars for more personalization.

5. Add search and filtering so users can easily find posts.

6. Build a recommendation system to suggest content to users.

7. Implement analytics to track page views, interactions, and conversions.

8. Support editing and deleting posts to keep content up-to-date.

9. Add rich media embedding for videos, images, and other media.

10. Build a mobile app version using React Native to complement the web.

Encouraging further exploration and learning

This article provided an overview of building an app with these technologies, but there's always more to learn. Here are some resources for leveling up your skills:

• Next.js Docs - https://nextjs.org/docs

• Supabase Docs - https://supabase.com/docs

• Hugging Face Docs - Transformers.js

• Next.js Learn Course - https://nextjs.org/learn

• Supabase YouTube - https://www.youtube.com/channel/UCJ9jj5YMzo-HsyM6WG9Q_Lg

Start building! Applying these frameworks to your projects is the best way to reinforce what you've learned. And don't hesitate to dive into the documentation or communities when you need help.

Happy coding!

Recently, I've seen many people asking how to move their PostgreSQL database to Supabase. They want a clear guide to help them switch without losing data or causing too much downtime. The process is straightforward, let me show you!

Prerequisites

• A local/remote PostgreSQL database you wanna migrate to Supabase.

• A Supabase account (you can sign up for free).

• Basic knowledge of PostgreSQL commands.

For this example, I have created a table called User with the fields: id, name, lastname and age, really simple, just for demonstration purposes:

Step-by-Step Guide to Migrating Your Database

Backup Your Local Database

Before making any changes, it's crucial to back up your local database to prevent any data loss.

Use the pg_dump command:

pg_dump 'postgres://{user}:{password}@{hostname}:{port}/{database-name}' > database_dump.dump

Replace the placeholders with your local database details.

Alternatively, you can use any app that allows you to manage databases like TablePlus, which is the one I'll be using in this example:

As you can see I have two connections one pointing to my local database and another to the Supabase remote connection. To create a dump just click on the Backup option, select the local connection, and the database name and click the Start backup button as shown in the picture:

This will ask you to save a .dump file.

Create a New Supabase Project

The next step would be the Backup importation. For this, we'll need to have a Supabase account created, if you already have one:

• Navigate to the Supabase Dashboard.

• Click on "New Project" and fill in the required details.

If you're having trouble with it, I have a Supabase starter guide that will assist you in completing the task.

Restore the Backup to Supabase

Now, you'll upload the backup to Supabase.

Use the pg_restore command:

pg_restore -d 'postgres://{user}:{password}@{hostname}:{port}/{database-name}' database_dump.dump

Replace the placeholders with the details provided by Supabase for your project and the path to your backup file.

Again, you can achieve this with TablePlus easily and the steps are mostly identical to the dump process. This time click on the Restore option, select the previously created Supabase connection, and the database name and click the Start restore button as shown in the picture:

Verify the Migration

After the restoration process, navigate to the Table section in your Supabase dashboard. You'll see there all the tables of your database.

Adjust Settings & Permissions

Supabase provides a robust role-based permission system as you could see in the previous step. Make sure you set the correct permissions to each table in your database, it will make it more secure

• Go to the "Authentication" section.

• Adjust the roles and permissions to match your application's requirements.

Update Your Application's Connection Strings

If you have an application using the database:

• Update the connection strings to point to the Supabase database.

• Test the application to ensure data retrieval and other operations work seamlessly.

Conclusion

That's it!

Migrating your local PostgreSQL database to Supabase is a straightforward process that can offer numerous benefits, including scalability, real-time capabilities, and a user-friendly interface. By following the steps outlined in this article, you can smoothly transition your database to the cloud and leverage the power of Supabase for your projects.

In today's digital world, user experience is key to the success of any web or mobile application. Users expect seamless, intuitive, and secure authentication processes that protect their personal information. That's where Supabase Auth UI comes in.

This powerful tool offers a comprehensive set of authentication features that not only enhance user experience but also prioritize cybersecurity. With Supabase Auth UI, developers can easily implement user authentication, manage user accounts, and customize the authentication flow to fit their specific application's needs.

In this article, we will explore the benefits of Supabase Auth UI and how it can transform the authentication process for developers and users alike.

If you are new to Supabase or haven't read my previous articles about it, I recommend checking them out 😎:

• Getting Started with Supabase: A Comprehensive Guide for Developers

• The Ultimate Guide to Supabase Edge Functions

• Unleash the power of automation by scheduling Supabase Edge Functions

• How to set up a Local Development environment for Supabase

Understanding the significance of user experience

User experience (UX) plays a significant role in the success of any web or mobile application. It encompasses every interaction a user has with an application, from initial login to completing tasks and navigating through different features. A seamless and intuitive authentication process is crucial in ensuring a positive user experience.

Most business models have focused on self-interest instead of user experience.

-Tim Cook

When users encounter complicated or time-consuming authentication procedures, they may lose interest and abandon the application altogether. Supabase Auth UI understands the significance of delivering a smooth authentication experience to users. By simplifying the authentication flow and providing intuitive interfaces, it minimizes user frustration and enhances engagement.

Furthermore, Supabase Auth UI prioritizes cybersecurity, offering robust security measures to protect user information. By implementing industry-standard security practices, developers can ensure the safety and trustworthiness of their applications, resulting in enhanced user confidence.

In the next section, we will delve deeper into the specific features of Supabase Auth UI and how they contribute to an enriched user experience. Stay tuned to discover the power of this authentication tool!

Introducing Supabase Auth UI and its capabilities

Supabase Auth UI is a powerful authentication tool that brings a range of capabilities to enhance user experience. With its intuitive interfaces and simplified authentication flow, this tool ensures a frictionless user journey from login to completing tasks within the application.

One of the standout features of Supabase Auth UI is its customization options. Developers can easily adapt the authentication process to fit the look and feel of their application, providing a seamless transition for users. This level of personalization allows developers to maintain brand consistency and create a cohesive user experience.

Another noteworthy capability of Supabase Auth UI is its support for various third-party authentication providers, including Google, Apple, and GitHub. This integration increases convenience for users who prefer using existing accounts to log in, providing them with a hassle-free authentication experience.

// example of third party authentication providers 
import { createClient } from '@supabase/supabase-js'
import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'

const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')

const App = () => (
  <Auth
    supabaseClient={supabase}
    providers={['google', 'facebook', 'twitter', etc...]}
  />
)

Furthermore, Supabase Auth UI offers developer-friendly APIs that facilitate quick and efficient integration. Developers can leverage these APIs to build custom authentication workflows or extend the functionality of the authentication process.

We'll be covering this in upcoming articles ✍️

async function signInWithEmail() {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: 'johndoe@gmail.com',
    password: 'strong-password',
  })
}

Simplifying user onboarding

One of the key challenges that developers face when building applications is ensuring a smooth onboarding experience for users. This is where Supabase Auth UI truly shines. With its user-friendly interfaces and simplified authentication flow, it takes the hassle out of user onboarding.

// installing libraries
npm install @supabase/supabase-js @supabase/auth-ui-react @supabase/auth-ui-shared

Supabase Auth UI provides a seamless authentication process that guides users through the necessary steps, from creating an account to verifying their email address. The intuitive interfaces make it easy for users to understand and complete each task, reducing the chances of confusion or abandonment.

// basic example of powering up your App with the Auth component
import { createClient } from '@supabase/supabase-js'
import { Auth } from '@supabase/auth-ui-react'

const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')

const App = () => <Auth supabaseClient={supabase} />j

Additionally, as we mentioned above, Supabase Auth UI offers features such as passwordless authentication and social login options, further streamlining the onboarding process. Users can choose the authentication method that suits them best, whether it's receiving a one-time password via email or logging in with their Google or Apple account among many other options.

Increasing security and trust

When it comes to user authentication, security is of paramount importance. Thankfully, Supabase Auth UI excels in this aspect by providing robust security features that enhance user trust and safeguard sensitive information.

Supabase Auth UI supports industry-standard security protocols, such as the use of password hashing and salting to protect user passwords. This ensures that user credentials are securely stored and transmitted, reducing the risk of unauthorized access.

Additionally, Supabase Auth UI offers multi-factor authentication (MFA) capabilities, allowing developers to implement an extra layer of security. With MFA, users have to provide a verification code, generated on their trusted device, in addition to their username and password. This significantly reduces the likelihood of unauthorized access, adding an extra level of confidence for both developers and users.

By prioritizing security, Supabase Auth UI reinforces the trust users have in the application and builds a solid foundation for a secure user experience. In the next section, we will dive deeper into the customization options offered by Supabase Auth UI, allowing developers to seamlessly integrate authentication into their application's unique design and branding.

Customizing and branding your user interface

Customizing and branding your user interface with Supabase Auth UI is a breeze. This powerful authentication tool provides developers with a range of options to seamlessly integrate the authentication process into their application's unique design and branding.

With Supabase Auth UI, you can customize the look and feel of the user interface to ensure it aligns perfectly with your application's aesthetics. You can easily customize colors, and fonts, and even add your logos and images to create a cohesive and branded experience for your users.

Let's take the following example where you can customize the appearance by using a custom predefined theme and even a dark theme variation:

// 
import { createClient } from '@supabase/supabase-js'
import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'

const supabase = createClient(
  '<INSERT PROJECT URL>',
  '<INSERT PROJECT ANON API KEY>'
)

const App = () => (
  <Auth
    supabaseClient={supabase}
    appearance={{ theme: ThemeSupa }}
    theme="dark"
  />
)

You can, of course, add custom CSS styles and create your own theme:

const customTheme = {
  default: {
    colors: {
      brand: 'hsl(153 60.0% 53.0%)',
      brandAccent: 'hsl(154 54.8% 45.1%)',
      brandButtonText: 'white',
      // ..
    },
  },
  dark: {
    colors: {
      brandButtonText: 'white',
      defaultButtonBackground: '#2e2e2e',
      defaultButtonBackgroundHover: '#3e3e3e',
      //..
    },
  },
  // You can also add more theme variations with different names.
  evenDarker: {
    colors: {
      brandButtonText: 'white',
      defaultButtonBackground: '#1e1e1e',
      defaultButtonBackgroundHover: '#2e2e2e',
      //..
    },
  },
}

Furthermore, Supabase Auth UI offers a range of pre-built UI components, making it easy to create a visually appealing and user-friendly authentication flow. Whether you need login forms, password reset forms, or magic links, Supabase Auth UI has you covered.

In addition to customization options, Supabase Auth UI also supports localization. You can easily translate your user interface into different languages, ensuring a seamless experience for users around the world. It is as easy as creating a file for each required language by overriding the localization variables available:

import { createClient } from '@supabase/supabase-js'
import { Auth } from '@supabase/auth-ui-react'
import { fr } from './i18n'

const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')

const App = () => (
  <Auth
    supabaseClient={supabase}
    localization={fr}
  />
)

export const fr = {
  variables: {
    sign_in: {
      email_label: 'Votre adresse e-mail',
      password_label: 'Votre mot de passe fort',
      ...
    },
  }
}

With Supabase Auth UI's customization and branding options, you can create an authentication process that not only enhances the user experience but also reinforces your application's unique identity.

Final thoughts

As we have explored in this blog series, Supabase Auth UI has the power to revolutionize user experiences by providing innovative features that ultimately enhance the way users interact with applications.

In the next articles we will be covering server-side authentication APIs and other cool features about Supabase, so stay tuned!

Supabase is an open-source alternative to Firebase that provides authentication, real-time databases, storage, and more through a PostgreSQL database. Setting up a local development environment allows you to build and test Supabase apps on your machine before deploying to production. In this post, we'll walk through the steps to get a local Supabase environment running on your computer.

If you are new to Supabase, check out these other posts about it:

• Getting Started with Supabase: A Comprehensive Guide for Developers

• The ultimate guide to Supabase Edge Functions

• Unleash the power of automation by scheduling Supabase Edge Functions

😎 As stated on their website, there are several benefits to being able to accomplish this:

1. 🚀 Faster Development: Developing locally allows you to work without any network latency or internet disruptions.

2. 💬 Easier Collaboration: Developing locally can make it easier to collaborate with others on the same project.

3. 🤑 Cost-Effective: Supabase provides a generous free plan and gives you two free projects to get started. But what if you need more than two? When you develop locally, you can spin up unlimited local projects and link them with live projects when you're ready to launch.

4. 🛠️ Configuration in code: If you directly change your tables via the Dashboard, none of that gets captured in code. If you follow these local development practices, you'll store all of your table schemas in code.

5. 🚂 Work offline: Need to work from a train? A plane? An automobile? No problem. Developing your project locally allows you to work offline.

Prerequisites

To set up a Supabase local environment, you will need to have some tools installed beforehand:

• Git

• Docker

• Docker Compose

These tools allow us to easily spin up the PostgreSQL database and other services needed for Supabase.

Installing Supabase CLI

The next step would be installing Supabase CLI to have access to a sort of useful commands, in my case I'll be installing it on a Mac but it can be installed pretty much on every platform:

brew install supabase/tap/supabase

Setting up a project

Now let's create a project using this Vite template for a quick-started POC project that I shared in this post.

Then let's clone the just-created project:

git clone https://github.com/aiherrera/whatever-name-you-choose

You should get something like this:

Now, initialize Supabase to set up the configuration for developing your project locally, on the root of your project folder run:

supabase init
Generate VS Code workspace settings? [y/N] N
Finished supabase init.

Then run the start command: the start command uses Docker to start the Supabase services:

• PostgreSQL (Database): PostgreSQL is the core of Supabase. It provides tools that make PostgreSQL as easy to use as Firebase.

• Studio (Dashboard): An open source Dashboard for managing your database and services.

• GoTrue (Auth): A JWT-based API for managing users and issuing access tokens. This integrates with PostgreSQL's Row Level Security and the API servers.

• PostgREST (API): A standalone web server that turns your PostgreSQL database directly into a RESTful API.

• Realtime (API & multiplayer): A scalable WebSocket engine for managing user Presence, broadcasting messages, and streaming database changes.

• Storage API (large file storage): An S3-compatible object storage service that stores metadata in Postgres.

• Deno (Edge Functions): A modern runtime for JavaScript and TypeScript.

• postgres-meta (Database management): A RESTful API for managing your Postgres. Fetch tables, add roles, and run queries.

• PgBouncer: A lightweight connection pooler for PostgreSQL. This is useful for connecting to Postgres when using Serverless functions.

• Kong (API Gateway): A cloud-native API gateway, built on top of Nginx.

Once finished pulling all images and setting up the environment you'll get all the local endpoints and secret keys to access Supabase Local.

supabase start
Seeding data supabase/seed.sql...
Started supabase local development setup.

         API URL: http://localhost:54321
     GraphQL URL: http://localhost:54321/graphql/v1
          DB URL: postgresql://postgres:postgres@localhost:54322/postgres
      Studio URL: http://localhost:54323
    Inbucket URL: http://localhost:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: eyJhbG...
service_role key: eyJhbG...

You can stop the Docker instance anytime by running this command:

supabase db stop

And can reset the database to its initial state by running:

supabase db reset

Publishing changes to Supabase

Once you have more certainty about the shape of a more mature project, you can publish your local changes to your live instance of Supabase. This command will sync your database structure and data within the live one.

supabase db push

Final thoughts

Upon successful completion of the setup process, you now have a fully operational instance of Supabase running locally on your machine. This local deployment offers several significant advantages that can enhance your overall development experience.

• First and foremost, by hosting Supabase locally, you can effectively reduce costs associated with cloud-based services. This cost-effective solution allows you to allocate resources more efficiently, ultimately saving you money in the long run.

• Secondly, the local instance enables you to work offline, providing you with the flexibility to develop and test your applications even in the absence of an internet connection. This feature is particularly useful for developers who may find themselves in remote locations or areas with limited connectivity.

• Lastly, the local Supabase instance ensures a high-speed development experience, as it eliminates any connection constraints that may arise from using a remote server. This results in a more seamless and efficient workflow, allowing you to focus on building and refining your applications without any unnecessary delays or interruptions.

It's just that easy, happy coding!

JavaScript, as a dynamic and ever-evolving programming language, continues to introduce new features and enhancements to cater to the needs of developers. Among its most recent additions is the Object.groupBy method, is a powerful and versatile tool that is still in its experimental phase. Although not yet universally supported across all web browsers, the Object.groupBy method provides a highly convenient means of grouping elements within an iterable based on a user-defined callback function. In this comprehensive article, we will explore the ins and outs of the Object.groupBy method, discussing its practical applications, compatibility with various browsers, and illustrating its usage through real-world examples.

What is Object.groupBy?

The Object.groupBy static method groups the elements of a given iterable according to the string values returned by a provided callback function. The returned object has separate properties for each group, containing arrays with the elements in the group.

Syntax

Object.groupBy(items, callbackFn)

• items: An iterable (such as an Array) whose elements will be grouped.

• callbackFn: A function to execute for each element in the iterable. It should return a value that can get coerced into a property key (string or symbol) indicating the group of the current element.

Return value

The method returns a null-prototype object with properties for all groups, each assigned to an array containing the elements of the associated group.

Usage examples

Grouping by type: Grouping students by grade level

Imagine you're a school administrator and you have a list of students with their respective grade levels. You want to group these students by their grade levels to make it easier to manage activities or distribute resources. The Object.groupBy method can come in handy for this task.

const students = [
  { name: "Alice", grade: "Freshman" },
  { name: "Bob", grade: "Sophomore" },
  { name: "Charlie", grade: "Junior" },
  { name: "David", grade: "Senior" },
  { name: "Eva", grade: "Freshman" },
  { name: "Fiona", grade: "Junior" },
  { name: "George", grade: "Senior" },
  { name: "Hannah", grade: "Sophomore" }
];
// Assuming Object.groupBy is available or polyfilled
const groupedStudents = Object.groupBy(students, ({ grade }) => grade);

console.log(groupedStudents);

This would be the expected result:

{
  Freshman: [
    { name: "Alice", grade: "Freshman" },
    { name: "Eva", grade: "Freshman" }
  ],
  Sophomore: [
    { name: "Bob", grade: "Sophomore" },
    { name: "Hannah", grade: "Sophomore" }
  ],
  Junior: [
    { name: "Charlie", grade: "Junior" },
    { name: "Fiona", grade: "Junior" }
  ],
  Senior: [
    { name: "David", grade: "Senior" },
    { name: "George", grade: "Senior" }
  ]
}

With the students now grouped by grade level, you can easily:

• Distribute grade-specific resources or announcements.

• Plan activities or events for each grade level.

• Perform statistical analysis on each grade level.

This is just one example, but the possibilities are endless. The Object.groupBy method provides a convenient and efficient way to group items in various real-world scenarios.

Grouping by Quantity: Grouping Products by Stock Availability

Imagine you're managing an online store's inventory, and you want to quickly identify which products need to be restocked and which are in good supply. You can use the Object.groupBy method to group your products based on their stock quantity.

const products = [
  { name: "Laptop", quantity: 10 },
  { name: "Smartphone", quantity: 5 },
  { name: "Headphones", quantity: 0 },
  { name: "Mouse", quantity: 25 },
  { name: "Keyboard", quantity: 3 },
  { name: "Monitor", quantity: 7 },
  { name: "Webcam", quantity: 0 },
  { name: "Microphone", quantity: 15 }
];

// Assuming Object.groupBy is available or polyfilled
function stockStatus({ quantity }) {
  if (quantity === 0) return "Out of Stock";
  if (quantity < 5) return "Low Stock";
  return "In Stock";
}

const groupedProducts = Object.groupBy(products, stockStatus);

console.log(groupedProducts);

This would be the expected result:

{
  "Out of Stock": [
    { name: "Headphones", quantity: 0 },
    { name: "Webcam", quantity: 0 }
  ],
  "Low Stock": [
    { name: "Smartphone", quantity: 5 },
    { name: "Keyboard", quantity: 3 }
  ],
  "In Stock": [
    { name: "Laptop", quantity: 10 },
    { name: "Mouse", quantity: 25 },
    { name: "Monitor", quantity: 7 },
    { name: "Microphone", quantity: 15 }
  ]
}

With the products now grouped by their stock status, you can:

• Quickly identify items that need to be restocked.

• Send low-stock alerts to the purchasing department.

• Prioritize marketing for products that are in good supply.

This example demonstrates how the Object.groupBy method can be a powerful tool for inventory management and other real-world applications.

Browser Compatibility

As of now, the Object.groupBy method is not universally supported. Here's a quick rundown:

• Chrome: Supported from version 117

• Edge: Supported from version 117

• Firefox: Not supported

• Safari: Supported from version 17.1

• Opera: Not supported

Note: This feature is experimental. Use caution before using it in production.

Final thoughts

The Object.groupBy method offers a convenient way to group elements of an iterable based on a callback function. While it's still experimental and not widely supported, it's a feature worth keeping an eye on as JavaScript continues to evolve.

For more information, you can refer to the MDN Web Docs.

Vite, a modern front-end build tool, has been gaining popularity due to its fast and lean development experience. Paired with Vitest, a testing framework designed specifically for Vite, you can create a robust testing environment for your applications. In this blog post, we'll explore how to master Vite application testing with Vitest, complete with tips, tricks, and examples.

What is Vite and Vitest?

Vite (French for "fast") is a next-generation front-end build tool created by Evan You, the creator of Vue.js. It offers a faster and leaner development experience for modern web projects.

Vitest, on the other hand, is a testing framework designed specifically for Vite. It provides a fast, scalable, and easy-to-use testing solution for Vite applications.

Setting Up Your Vite Project

Before we dive into testing, let's set up a simple Vite project. Here's how you can create a new Vite project using the command line:

pnpm create vite

This command will provide some quick questions to generate a new project. This is the configuration I selected for the project:

Installing and Configuring Vitest

To install Vitest, run the following command in your project directory:

pnpm add -D vitest

Next, add these two vitest scripts to your package.json:

"scripts": {
  ...
  "test": "vitest",
  "coverage": "vitest run --coverage"
}

Now, you can run your tests using pnpm run test.

Since Vitest is a unit testing framework for Vite, as you might have guessed by now, it integrates seamlessly with it. As stated on their website, Vitest can:

Reuse Vite's config, transformers, resolvers, and plugins - consistent across your app and tests.

In other words, this is all we need to begin creating Unit Tests for our project.

However, why stop here? Let's enhance our current toolkit with another fantastic tool!

For creating our tests, we will integrate Testing Library, a very handy set of utilities that, as they state:

The Testing Library family of libraries is a very light-weight solution for testing without all the implementation details. The main utilities it provides involve querying for nodes similarly to how users would find them. In this way, testing-library helps ensure your tests give you confidence in your UI code.

So, let's install it:

pnpm add -D jsdom @testing-library/react

as you can see we are also installing jsdom:

To effectively test React components, it is essential to replicate the DOM functionality in the test environment. JSDom aids in establishing this environment for testing, making it necessary to install it as a development dependency alongside the testing library, which provides utilities for querying nodes similarly to user interactions, ensuring confidence in your UI code.

Writing Your First Test

Let's write a simple component for greeting a user:

// src/components/greeting.jsx
import PropTypes from 'prop-types'

export function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
}

Here's how you can write a test for this component using Vitest & Testing Library:

// src/components/greeting.test.jsx
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { Greeting } from './greeting'

describe('<Greeting />', () => {
  it('greets the user', () => {
    render(<Greeting name="John" />)
    expect(screen.getByText(/John/i)).toBeDefined()
  })
})

So, let's explain what's going on here:

• you can think of describe as a wrapper for your tests, it creates a context for whatever it's happening inside.

• it is an alias for test and it contains the expectation for what you are testing. It is composed of the name of the test and a function.

• render it's a function from Testing Library that allows rendering a React component - in this case, we passed a hard-coded name "John"

• expect it is used to create assertions - like to check if there is a text with the word "John" painted on the screen

Now, you can run this test using pnpm run test. If everything is set up correctly, you should see a passing test in your console.

Let's then update our scripts in the package.json file:

...
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "test": "vitest run",
    "test:dev": "vitest",
    "coverage": "vitest run --coverage"
},
...

Now, we have a script for just one run and another for a testing developing experience.

Checking coverage

If you saw in the scripts there is a third one called coverage, this is another great utility that provides Vitest that we are gonna be covering here. Nevertheless, right now since they have migrated from the c8 to v8 coverage library, once you run the script pnpm run coverage you'll get this message in the terminal:

Simply respond with "yes" and the switch will be made automatically for you. Afterward, run the script once more and you'll receive the report.

This will generate a folder with a UI that you can open in the browser.

Vitest UI

Another amazing tool I want to share is the Vitest UI library, which allows you to view and interact with your tests. This is completely optional, and as you'll see, it needs to be installed separately, but trust me, it's worth it.

npm i -D @vitest/ui

Now, let's update again our package.json file and add "test:ui": "vitest --ui"

...
  "test": "vitest run",
  "test:dev": "vitest",
  "test:ui": "vitest --ui",
  "coverage": "vitest run --coverage"
},
...

that's it, if you run it, you'll get this:

a complete playground that provides you with:

• test's code

• a convenient module graph

• a console to watch errors

• search capacity

• dark mode switch 😎

Tips and Tricks

Here are some tips and tricks for mastering Vitest:

1. Use Descriptive Test Names: Descriptive test names can make it easier to understand what a test is doing and why it might be failing.

2. Group Related Tests: You can group related tests using describe blocks. This can make your tests easier to read and manage.

3. Take Advantage of Vitest's Features: Vitest comes with several features designed to make testing easier, such as parallel test execution and automatic retries for flaky tests. Be sure to take advantage of these features.

4. Keep Your Tests Small and Focused: Each test should focus on a single piece of functionality. Smaller, more focused tests are easier to understand and debug.

5. Use Mocks and Stubs Sparingly: While mocks and stubs can be useful, they can also make your tests more complex and harder to maintain. Use them sparingly and only when necessary.

Bonus

As usual, I’ll let you with the fully configured Github repository with the example used in this article for you to check & try out.

I plan to add more examples over time!🧑‍💻

Last Thoughts

In conclusion, Vite and Vitest offer a powerful combination for developing and testing modern web applications. With the right knowledge and techniques, you can create robust, reliable tests for your Vite applications. Happy testing!

Hope you enjoyed this article, if so, consider giving it a like 👍🏻 and Stay Awesome!

Design patterns play a crucial role in building well-structured and maintainable applications. React, being a popular JavaScript library for building user interfaces, provides developers with flexibility and freedom to choose from various design patterns. In this article, we will explore some common design patterns used in React applications and understand their purposes with practical examples.

On a daily-basis-code-rush to get the job done, it is usual to get over these patterns or just use them without notice.

The purpose of this article is to give an overview of what I consider (which means this is an opinionated article 😅, there are plenty more patterns) are the most used patterns in React.

Component Pattern

The Component Pattern is the foundation of React development, promoting reusability and modularity. It involves decomposing the UI into reusable, modular components. Components in React can be functional or class-based. They encapsulate their logic and rendering, making it easier to manage and maintain the application's UI.

// Button Component
const Button = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

// App Component
const App = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return <Button onClick={handleClick}>Click Me</Button>;
};

Render Props

The Render Props pattern allows components to share functionality through a common interface. It involves passing a function as a prop to a component, which allows the component to render the result of that function. This pattern enables code reuse and flexibility in building components.

// MouseTracker Component
const MouseTracker = ({ render }) => {
  const handleMouseMove = (event) => {
    const { clientX, clientY } = event;
    render(clientX, clientY);
  };

  return <div onMouseMove={handleMouseMove}>Move the mouse!</div>;
};

// MouseCoordinatesDisplay Component
const MouseCoordinatesDisplay = () => {
  return (
    <MouseTracker
      render={(x, y) => (
        <p>
          Mouse coordinates: {x}, {y}
        </p>
      )}
    />
  );
};

Container/Component Pattern

The Container/Component Pattern separates data logic (container components) from UI rendering (UI components). Container components handle data fetching, state management, and business logic, while UI components focus on rendering the UI based on props. This pattern promotes better separation of concerns and code maintainability.

// DataContainer Component
const DataContainer = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData()
      .then((response) => setData(response.data))
      .catch((error) => console.log(error));
  }, []);

  return <DataComponent data={data} />;
};

// UIComponent
const UIComponent = ({ data }) => {
  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

Higher-Order Component (HOC) - Decorator Pattern

Higher-Order Components (HOC) are functions that take a component and return an enhanced version of that component. HOCs enable the addition of extra behavior or modification of the rendering of the wrapped component. They provide a way to share common functionality among multiple components.

// withAuthentication HOC
const withAuthentication = (WrappedComponent) => {
  const isAuthenticated = true; // Logic to determine authentication status

  return (props) => {
    if (isAuthenticated) {
      return <WrappedComponent {...props} />;
    } else {
      return <p>Please log in to access this component.</p>;
    }
  };
};

// MyComponent
const MyComponent = () => {
  return <div>Authenticated component</div>;
};

export default withAuthentication(MyComponent);

Context API

The Context API in React provides a way to share state and data across multiple components without explicitly passing props. It eliminates the need for prop drilling and simplifies the management of global or application-level state.

// ThemeContext
const ThemeContext = createContext('light');

// ThemeProvider Component
const ThemeProvider = ({ children }) => {
  return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>;
};

// ThemeComponent Component
const ThemeComponent = () => {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
};

Singleton Pattern

The Singleton Pattern ensures that only one instance of a component or service is created and shared throughout the application. It provides global access to a single instance, preventing multiple instances from being created.

import axios from 'axios';

const apiClient = (() => {
  let instance = null;

  const createInstance = () => {
    const api = axios.create({
      baseURL: 'https://api.example.com',
      Authorization: `<Your Auth Token>`,
      Content-Type: "application/json",
      timeout : 1000,
      withCredentials: true
    });

    return api;
  };

  return {
    getInstance: () => {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();

export default apiClient;

In this example, the apiClient encapsulates API functionality using axios and is implemented as a Singleton. The static getInstance method ensures only one instance is created and shared throughout the application. This centralized API client promotes code consistency and prevents resource duplication.

import { useEffect, useState } from 'react';
import apiClient from './apiClient';

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [newUser, setNewUser] = useState('');

  const fetchUsers = () => {
    const api = apiClient.getInstance();

    api.get('/users')
      .then((response) => setUsers(response.data))
      .catch((error) => console.error(error));
  };

  const handleAddUser = () => {
    const api = apiClient.getInstance();

    api.post('/users', { name: newUser })
      .then(() => {
        setNewUser('');
        fetchUsers();
      })
      .catch((error) => console.error(error));
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <div>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <div>
        <input
          type="text"
          value={newUser}
          onChange={(e) => setNewUser(e.target.value)}
          placeholder="Enter a new user"
        />
        <button onClick={handleAddUser}>Add User</button>
      </div>
    </div>
  );
};

export default UserList;

In this example, the GET and POST methods use a single instance of the axios library, ensuring resource efficiency and consistent API functionality across the application.

Proxy Pattern

The Proxy Pattern controls access to a component and allows for additional logic or behavior before accessing or modifying it. It acts as an intermediary between the client and the component, providing additional functionality.

const ProxyComponent = ({ valid, children }) => {
  if (valid) {
    return <ActualComponent>{children}</ActualComponent>;
  } else {
    return <p>Invalid component</p>;
  }
};

You probably have had a Deja vu right now, it is quite similar to the approach used in the Higher-Order Components section right? In this case, we just isolated the Proxy pattern for demonstration purposes, but you are now starting to get the big picture!

Factory Pattern

The Factory Pattern provides a way to create instances of components or objects dynamically based on certain conditions or configurations. It encapsulates the creation logic and allows for flexible object creation.

import React from 'react';

// Factory function to create notification components
const createNotificationComponent = (type) => {
  switch (type) {
    case 'email':
      return ({ message }) => <div>Email notification: {message}</div>;
    case 'sms':
      return ({ message }) => <div>SMS notification: {message}</div>;
    case 'push':
      return ({ message }) => <div>Push notification: {message}</div>;
    default:
      throw new Error(`Unsupported notification type: ${type}`);
  }
};

// NotificationFactory component
const NotificationFactory = ({ type, message }) => {
  const NotificationComponent = createNotificationComponent(type);

  return <NotificationComponent message={message} />;
};

// Usage example
const App = () => {
  return (
    <div>
      <NotificationFactory type="email" message="New email received" />
      <NotificationFactory type="sms" message="New SMS received" />
      <NotificationFactory type="push" message="New push notification" />
    </div>
  );
};

export default App;

Memoization Pattern

The Memoization Pattern involves caching the result of a component's rendering to improve performance by preventing unnecessary re-rendering. It is useful when a component's rendering depends on expensive computations or when its props do not change frequently.

import React, { useState, useMemo } from 'react';

// Expensive Fibonacci calculation function
const fibonacci = (n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};

// FibonacciComponent
const FibonacciComponent = ({ n }) => {
  const memoizedFibonacci = useMemo(() => fibonacci(n), [n]);

  return <div>The Fibonacci number at index {n} is {memoizedFibonacci}</div>;
};

// App
const App = () => {
  const [index, setIndex] = useState(10);

  return (
    <div>
      <FibonacciComponent n={index} />
      <button onClick={() => setIndex(index + 1)}>Increase Index</button>
    </div>
  );
};

export default App;

Lazy Loading Pattern

A lazy Loading Pattern is a design technique used in software development where the initialization or loading of resources, such as data or objects, is delayed until they are needed, improving performance and reducing the initial load time.

import React, { lazy, Suspense } from 'react';

const LazyLoadedComponent = lazy(() => import('./LazyLoadedComponent'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyLoadedComponent />
    </Suspense>
  );
};

Observer Pattern

The Observer Pattern in React is a design pattern that allows an object (called the subject) to maintain a list of its dependents (called observers) and automatically notify them of any state changes, enabling a seamless user experience.

import React, { useState, useEffect } from 'react';

// ChatService
const ChatService = {
  listeners: [],
  notify(message) {
    this.listeners.forEach((listener) => listener(message));
  },
  subscribe(listener) {
    this.listeners.push(listener);
  },
  unsubscribe(listener) {
    this.listeners = this.listeners.filter((l) => l !== listener);
  },
};

// ChatRoom component
const ChatRoom = () => {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');

  useEffect(() => {
    const handleNewMessage = (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    };

    ChatService.subscribe(handleNewMessage);

    return () => {
      ChatService.unsubscribe(handleNewMessage);
    };
  }, []);

  const handleSendMessage = () => {
    const message = { text: newMessage, timestamp: Date.now() };
    ChatService.notify(message);
    setNewMessage('');
  };

  return (
    <div>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message.text}</li>
        ))}
      </ul>
      <input
        type="text"
        value={newMessage}
        onChange={(e) => setNewMessage(e.target.value)}
      />
      <button onClick={handleSendMessage}>Send</button>
    </div>
  );
};

// Notification component
const Notification = ({ message }) => {
  useEffect(() => {
    console.log(`New message: ${message.text}`);
  }, [message]);

  return null;
};

// App component
const App = () => {
  return (
    <div>
      <ChatRoom />
      <Notification />
    </div>
  );
};

export default App;

Here is a complete functional example of this pattern for better understanding. Feel free to check it out - just type any message and hit enter, it should update both the Notification and Message panel components at the same time, since they are both subscribed and listening for changes 🕵️‍♂️

Error Boundary Pattern

Error Boundary Pattern is a design pattern in React used to catch and handle errors in components, preventing the entire application from crashing and displaying a fallback UI when an error occurs.

import React, { useState } from 'react';

// ErrorBoundary component
const ErrorBoundary = ({ children }) => {
  const [hasError, setHasError] = useState(false);

  const handleOnError = () => {
    setHasError(true);
  };

  if (hasError) {
    return <div>Oops! Something went wrong.</div>;
  }

  return <div onError={handleOnError}>{children}</div>;
};

// ErrorProneComponent
const ErrorProneComponent = () => {
  // Simulating an error
  throw new Error('Error occurred in ErrorProneComponent');

  return <div>ErrorProneComponent</div>;
};

// App component
const App = () => {
  return (
    <ErrorBoundary>
      <ErrorProneComponent />
    </ErrorBoundary>
  );
};

export default App;

Final Thoughts

In this article, we explored some common design patterns used in React applications.

These design patterns, such as the Component Pattern, Render Props, Container/Component Pattern, Higher-Order Components (HOC), Context API, and more, provide developers with strategies and best practices for building robust and scalable React applications. Understanding and effectively applying these design patterns can significantly improve code organization, reusability, and maintainability.

Remember, the choice of design pattern depends on the specific requirements and structure of your application. Experiment with these patterns and choose the ones that best suit your needs. Happy coding!

Hope you enjoyed this article, if so, consider giving it a like 👍🏻 and Stay Awesome!

Recently we were struggling at work with newcomers joining our team and setting out each fresh equipment with all the required development environment. And from all the things we are trying to automate, I thought it would be nice to streamline the process of installing all the required & recommended VSCode (which is the code editor we use - most of us I think 🙊) extensions for the project.

So, I create this VSCode extension pack for three reasons:

1. Learn the whole process of how to create a VSCode extension throughout the Azure DevOps portal to Marketplace

2. Have a handy set of extensions for any new computer I have to grab and prepare the workspace from scratch

3. Sharing. Yes! - sharing with the community 👥

This article shares my experience creating a VSCode extension pack. I'll be showing you step-by-step the details of my journey. Also, I'll be sharing how I have configured my settings.json file and why.

Setting the Stage

The first thing to create, to build an extension, is a project. Well, there is a tool that have us covered with a boilerplate to not start from zero: Yeoman.

As they state on their website:

Yeoman is a generic scaffolding system allowing the creation of any kind of app. It allows for rapidly getting started on new projects and streamlines the maintenance of existing projects.

This is an amazing tool that I'll be covering in a later post(to show how to scaffold & ship your own CLI), but getting back to our journey, the Microsoft team built an npm package (a project generator using Yeoman) that helps the process a lot.
So, the first step is gonna install these two packages globally with this command:

npm install -g yo generator-code

After that, you are ready to go. Run `yo code` as shown in the image below and you'll see a bunch of possible options, select: New Extension Pack

The CLI is gonna ask some questions, just fill out them accordingly:

That's it! You'll get a folder structure like this one:

Building the Extension Bundle

Now it is time to start creating the extension bundle. If you selected yes to the question of pulling the currently installed extension in the VSCode editor, you have 50% of the work done, the rest is configuration. Let's dive in.

If you open your package.json file it would look like this:

{
  "name": "my-first-extension",
  "displayName": "my-first-extension",
  "description": "This is my first extension",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.79.0"
  },
  "categories": [
    "Extension Packs"
  ],
  "extensionPack": [
    "adpyke.codesnap",
    "bradlc.vscode-tailwindcss",
    "ChakrounAnas.turbo-console-log",
    "christian-kohler.npm-intellisense",
    "christian-kohler.path-intellisense",
    "dbaeumer.vscode-eslint",
....
}

Let's break this down:

• The first properties: name, displayName, description and version, are related to the extension you want to create.

• The engine's property is related to what versions of VSCode can support your extension.

• The categories list where your extension would be available in the Marketplace.

• And the extensionPack is where the currently installed extensions are pre-populated.

After this, I added some other configurations to my package.json

• preview: this is set to false because my extension isn't in preview mode, it is ready to use. If you are developing a new extension this may be useful to tell the users this is in development and can be unstable.

• publisher: the name you are gonna use to author your extension

• icon: the image it is gonna appear in the Marketplace (it has to be 128x128px or 256x256px for retina display)

• repository: well this has to be more with the repository where I host the project, this case Github.

{
  "name": "my-first-extension",
  "displayName": "my-first-extension",
  "description": "This is my first extension",
- "version": "0.0.1",
+ "version": "1.0.0",
+ "preview": false,
+ "publisher": "aiherrera",
+ "icon": "icon.png",
+ "repository": {
+   "type": "git",
+   "url": "https://github.com/aiherrera/vscode-extension-package.git"
+ },
  "engines": {
    "vscode": "^1.79.0"
  },
  "categories": [
    "Extension Packs"
  ],
  "extensionPack": [
    "adpyke.codesnap",
    "bradlc.vscode-tailwindcss",
    "ChakrounAnas.turbo-console-log",
    "christian-kohler.npm-intellisense",
    "christian-kohler.path-intellisense",
    "dbaeumer.vscode-eslint",
....
}

To finish this section let's concentrate on the repository part.

So, let's do it!

npm i -g cgx

With that in place now you just call it in any terminal, here are some screenshots about the steps:

What I did here was to first generate all the recommended files and after that add the ones that I thought I would match with my interests.

Note here that most of the generated files won't need any modification, but others may need some refinement, yet most of the work is already done. I loved this repository, so if you do, starred it, to give support to community members.

Creating an Azure DevOps Organization

The next step to get to publish your extension is to create an Azure DevOps Organization, which is a streamlined process.

Once you have created your organization, you need to set up a Personal Access Token:

Here are the instructions:

• Create a meaningful name for your token

• Select the name of the just-created organization

• Add an expiration time

• At the bottom of the scopes click on Show more scopes, it would expand all the possible scopes, scroll down until you find Marketplace and select Manage

• Click Create

The last step is to create a publisher, this is an identity that allows you to publish extensions in the Visual Studio Code Marketplace.

Publishing the extension package

Now we are ready to publish our Extension Pack. For this, we are gonna log in using our publisher name:

# publisher name
npx @vscode/vsce login aiherrera
# copy/paste the Personal Access Token you created at the begining
https://marketplace.visualstudio.com/manage/publishers/
Personal Access Token for publisher 'aiherrera': **********************
# if everything is ok, your are gonna get a succeeded message
The Personal Access Token verification succeeded for the publisher 'aiherrera'.

Once we are logged in, we are ready to create or first publication of our Extension Pack:

npx @vscode/vsce publish
 INFO  Publishing 'aiherrera.my-first-extension v1.0.0'...
 INFO  Extension URL (might take a few minutes): https://marketplace.visualstudio.com/items?itemName=aiherrera.my-first-extension
 INFO  Hub URL: https://marketplace.visualstudio.com/manage/publishers/aiherrera/extensions/my-first-extension/hub
 DONE  Published aiherrera.my-first-extension v1.0.0.

✨ Congrats, you have published your first extension ✨

Exploring settings.json

After creating the extension, I looked into my VSCode settings: the settings.json file. This file helps customize the editor in many ways. I checked the default settings and compared them to what I needed. Then, I changed important settings like indentation, theme, font, and code formatting to make it look and work how I wanted.

I created a Github gist with the configurations I use in most of my projects.

Take into account that certain configurations depend expressly on some extensions that live in the Extension Pack I created.

Final thoughts

• I learned how to create my own Visual Studio Code extension pack from generating the project to publishing the extension in the Marketplace

• On the journey, I learned some nice tools that I will use, for sure, in other projects

• This will help my newcomer teammates to streamline the process of setting up their environments

Hope you enjoyed this article, if so, consider giving it a like and a star the project on Github.

Here is the created extension on the VSCode Marketplace.

Stay tunned & happy coding!

When it comes to designing and managing database schemas, QuickDBD (Quick Database Diagrams) stands out as a powerful and efficient tool. It's a free online browser-based diagramming tool that comes with a host of beneficial features. In this blog post, we'll discover what I consider the most relevant key features of QuickDBD.

TL;DR

• Efficient Diagramming: This allows you to draw database diagrams by simply typing the schema, making the process quick and efficient.

• Professional Appearance: Creates neat and professional-looking diagrams that enhance the visual appeal of your documents and presentations.

• Real-Time Collaboration: Supports multi-user collaboration, allowing multiple users to edit a single diagram simultaneously.

• Easy Import and Export: Provides the ability to easily import and export your work. Supports exporting diagrams as images, SQL, PDF, or RTF files.

• Private Diagrams: The Pro plan allows you to create private diagrams that are not visible to others.

• Flexible Pricing: Offers a free basic plan with the option to upgrade to a Pro plan for additional features and capabilities.

• Browser-Based: As an online tool, QuickDBD can be used on any device with a web browser, without the need for any software installation.

• Templates: Provides templates to assist in creating diagrams, making the process even easier for beginners.

• Drag and Drop: The drag and drop feature allows even inexperienced individuals to create diagrams with ease 👌

Work fluently with QuickDBD

One of the standout features of QuickDBD is its ability to draw schemas without leaving the keyboard. This feature allows you to work fluently and capture your ideas quickly without the interruption of GUI tools. You only need to provide the details you want, saving you time and increasing your productivity.

QuickDBD helps you create professional-looking diagrams that not only make your documents look good but also help you communicate your ideas. The tool's ability to create neat and visually appealing diagrams makes it an excellent choice for professionals who need to present their database designs to clients or team members.

It supports real-time collaboration, allowing multiple users to edit a single diagram simultaneously. This feature is particularly useful for teams working on a shared project, as it enables everyone to contribute their ideas and see the changes made by others in real time.

You can easily import and export your work. This is amazing: it supports exporting into major SQL platforms like MySQL/MariaDB, Oracle, PostgreSQl, etc.

But, if that isn't enough, the tool supports exporting diagrams as images (PNG and SVG), PDF or RTF files, giving you the flexibility to use your diagrams in various ways. Whether you need to include a diagram in a report or use it in a presentation, QuickDBD has got you covered.

Pricing

Ok, but what about pricing, are all these features for free?

Well yes and no, QuickDBD offers a free basic plan that allows you to create up to 10 tables and one single diagram, that's the limitation, all the other cool stuff is included as in the PRO plan.

The cool thing is that they are giving away free PRO licenses in exchange for publicity!

You can get up to 1 year of free use with PRO 🤯 Check it out!

Final thoughts

QuickDBD is a versatile tool that makes database diagramming quick and easy. Its intuitive interface, collaborative features, and flexible export options make it a valuable asset for anyone involved in database design or management. Whether you're a database professional or a student learning about databases, QuickDBD can help you create clear and professional diagrams with ease.

In the dynamic world of JavaScript frameworks, few hold their ground as solidly as React. Combine it with the elegance and simplicity of Tailwind CSS, and you've got a potent mix that is ideal for building user interfaces. In today's post, we're going to demonstrate just how powerful this combination can be.

At the heart of our clock will be React Hooks, a groundbreaking feature that lets us tap into React's capabilities like state and life-cycle methods without needing to write a class. Using hooks, we'll demonstrate how you can manage state and side effects more intuitively and simply, making our code cleaner and easier to understand.

Get ready to tick-tock your way to the completion of this exciting project, as we delve into the hands-on and rewarding process of creating a React-based analog clock. Tune in as we crank up the gears and set the hands of our coding journey in motion. Let's dive into the world of React, Tailwind CSS, and Hooks, shall we?

In my previous post, I shared a template for rapidly developing proof-of-concept projects. Today, we'll be utilizing it for this particular endeavor. If you haven't checked it out yet, I highly recommend doing so!

This is what we are gonna be building.

So, without further ado, let's embark on this exciting journey to create our very own customizable Analog Clock component in React!

Setting up the environment

First, let's clone the template (since it is a template you can also directly create a new project in Github by clicking in the Use this template button):

git clone https://github.com/aiherrera/vite-react-starter-template.git

# then enter in the new generated folder
cd vite-react-starter-template

# and open it with your favourite code editor, I use vscode ;)
code .

Hooks

We are gonna extract some logic into custom hooks to encapsulate different reusable functionalities specific to our application requirements. These are them:

• use-audio.ts - loads the audio URL for the clock ticking

• use-clock.ts - handles all the clock mechanisms

• use-device-type.ts - detects the device type based on the sizing

• use-size.ts - used for handling the three clock sizes

• use-theme.ts - handles the three theme examples (you can add your own... 😉 )

Creating the clock component

After that, we're going to create a new file called analog-clock.tsx and start to add some code to it.

This is pretty much the first part of it, let's break it down:

import { FC } from 'react'

import AnalogClockActions from './clock-actions'
import { ClockSizes } from '../../types/clock-sizes'
import useClock from '../../hooks/use-clock'
import useTheme from '../../hooks/use-theme'
import useSize from '../../hooks/use-size'
import DaylightIcon from './daylight-icon'

interface AnalogClockProps {
  defaultSize?: ClockSizes
  defaultTheme?: string
}

const AnalogClock: FC<AnalogClockProps> = ({
  defaultSize = 'medium',
  defaultTheme = 'neutral',
}) => {
  const [timing, isDaytime] = useClock()
  const [theme, updateTheme] = useTheme(defaultTheme)
  const [size, lastSize, updateSize] = useSize(defaultSize)

  const clockNumbers = Array.from({ length: 12 }, (_, i) => i + 1)

  return (
...

• Here, we are importing all the necessary components and hooks that we've separated to streamline different logic and make some of them reusable.

• We've added an interface for our component with two default values for the sizing and theming of the component respectively.

• The clockNumbers receives a generated array with the clock numbers.

• Our .tsx begins with a component called AnalogClockActions which will, as you may guess, hold the actions that we are gonna apply over the clock (sizing, ticking, theming...) Here we pass two functions for our hooks that updates the current theme and size of the clock and as a default the last known size if any.

...
<div className="flex w-full cursor-pointer flex-wrap items-center justify-center gap-x-40 gap-y-0">
  <AnalogClockActions
    updateTheme={updateTheme}
    updateSize={updateSize}
    defaultSize={lastSize}
  />
...

This component renders this side of the app:

• Then we added an Icon that is going to display a moon or a sun depending on your timezone (this is handled via useClock hook)

...
<div className="group relative flex cursor-pointer items-center justify-center text-sm">
  <DaylightIcon isDaytime={isDaytime} lastSize={lastSize} />
...

• After that let's display our clock. Here we loop over our defined twelve hours and draw it inside a circle.

...
<div className={`${size?.dimension} ${theme?.main} ${theme?.shadow} relative flex items-center justify-center rounded-full`}>
  {clockNumbers.map((num) => (
     <label
       key={num}
       className={`absolute ${size?.numbers} text-center`}
       style={{ transform: `rotate(calc(${num}*(360deg/12)))` }}>
         <span 
            className={`inline-block`} 
            style={{ transform: `rotate(calc(${num}*(-360deg/12)))` }}
         >
           {num}
         </span>
       </label>
   ))}
...

You'll see there are some variables in the styles, they are defined in an individual file to make it reusable:

...
const AVALIABLE_SIZES = [
  {
    key: 'large',
    value: {
      daylight: 'h-10 w-10 right-12 -top-0 group-hover:-top-6',
      dimension: 'w-96 h-96',
      numbers: 'inset-5 text-5xl',
      center: 'h-4 w-4 -bottom-[3px]',
      hands: {
        hour: 'h-[6.5em] w-1.5',
        minute: 'h-[11em] w-1',
        second: 'h-[11em] w-[0.09em]',
      },
    },
  },
...

The same goes for the themes:

...
const AVALIABLE_THEMES = [
  {
    key: 'dark',
    value: {
      main: 'bg-slate-900 text-slate-300',
      shadow: 'shadow-xl shadow-slate-400',
      hand: {
        center: 'bg-slate-200 before:bg-slate-800',
        second: 'bg-slate-300',
        minute: 'bg-slate-300',
        hour: 'bg-slate-300',
      },
    },
  },
...

• And finally, we are adding a section for the clock center and hands (seconds, minutes & hours)

...
<section className="box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); absolute z-50 flex h-4 w-4 justify-center">
  {/* Clock center */}
  <span className={`${size?.center} ${theme?.hand.center} absolute z-50 flex rounded-full before:absolute before:left-0.5 before:top-0.5 before:h-3 before:w-3 before:justify-center before:rounded-full`}>         
  </span>
  {/* Second hand */}
  <span className={`${size?.hands?.second} ${theme?.hand.second} absolute bottom-1.5 z-30 w-1 origin-bottom rounded-md`} style={timing.updateSeconds}>
  </span>
  {/* Minute hand */}
  <span className={`${size?.hands?.minute} ${theme?.hand.minute} absolute bottom-1.5 z-20 origin-bottom rounded-md`}               style={timing.updateMinutes}>
  </span>
  {/* Hour hand */}
  <span className={`${size?.hands?.hour} ${theme?.hand.hour} absolute bottom-1.5 z-10 origin-bottom divide-zinc-100 rounded-md`}               style={timing.updateHours}>
  </span>
</section>
...

The logic behind the clock hands' movement is found within the useClock hook, specifically in this code snippet:

...
setTiming({
 updateSeconds: { transform: `rotate(${currentTime.getSeconds() * 6}deg)` },
 updateMinutes: { transform: `rotate(${currentTime.getMinutes() * 6}deg)` },
 updateHours: { transform: `rotate(${currentTime.getHours() * 30 + currentTime.getMinutes() / 2}deg)`,
      },
})
...

In an analog clock, the minute and second hands complete a full rotation of 360 degrees within 60 units (minutes or seconds). Therefore, to determine the rotation degree for each unit, we divide 360 by 60, which equals 6. This means that each minute or second is represented by 6 degrees of rotation.

For the hour hand, we multiply by 30 because there are only twelve hours, and a full rotation of 360 degrees within 12 units equals 30. This means that each hour is represented by 30 degrees of rotation.

Children logic

Clock ticking

For audio manipulation, we encapsulated the logic within a hook called useAudio. This hook manages an HTML native audio element that receives a URL containing the source and an update function that toggles the audio on and off. This is controlled by a checkbox in the view.

Size handling

The size is handled with the useSize hook. It contains three important pieces to keep the state:

• size => handles the styles for each size

• lastSize => determines what was the last known size

• updateSize => updates the state based on the newly selected size by the user

The state is persisted in the browser's local storage.

Theme handling

The same strategy was employed for theme handling; it is controlled by the useTheme hook. This hook includes a theme object for styling and an updateTheme function for setting the new theme selected by the user. The state is also persisted in the browser's local storage.

Responsiveness

The component checks for a mobile device type using the useDeviceType hook. This, for instance, allows restricting the user from selecting the larger size of the clock that breaks the UI on small devices.

Defining Clock Sizes

We define a function getClockSize that returns the size of the clock, the size of the numbers, and the sizes of the hands based on the clockSize prop.

const getClockSize = () => {
  switch (clockSize) {
      case 'large':
        return {
          size: 'w-96 h-96',
          numbers: 'inset-5 text-3xl',
          center: 'h-4 w-4 -bottom-[3px]',
          hands: { 
            hour: 'h-[6.5em] w-1.5', 
            minute: 'h-[7em] w-1', 
            second: 'h-[9em] w-1' 
          },
        }

      case 'medium':
        return {
          size: 'w-56 h-56',
          numbers: 'inset-2 text-xl',
          center: 'h-2.5 w-2.5 bottom-[2px]',
          hands: {
            hour: 'h-[4.5em] w-[0.35em]',
            minute: 'h-[4.8em] w-[0.2em]',
            second: 'h-[5.4em] w-0.5',
          },
        }

      default:
        return {
          size: 'w-40 h-40',
          numbers: 'inset-1 text-lg',
          center: 'h-2 w-2 bottom-[2px]',
          hands: {
            hour: 'h-[2.8em] w-[0.2em]',
            minute: 'h-[3.3em] w-[0.15em]',
            second: 'h-[3.6em] w-0.5',
          },
        }
    }
}

Here's a breakdown of how the function works:

1. The switch statement is used to evaluate the clockSize variable and determine the appropriate configuration for the clock based on its value.

2. The clockSize can be 'large', 'medium' or 'small', whatever the size, the function returns an object containing the following properties:

   • size: A string representing the width and height of the clock (ex. 'w-96 h-96').

   • numbers: A string representing the styling for the hour numbers (ex. 'inset-5 text-3xl').

   • center: A string representing the styling for the center dot of the clock (ex. 'h-4 w-4 -bottom-[3px]').

   • hands: An object with properties representing the styling for the hour, minute, and second hands. Each property is a string of Tailwind CSS classes.

The purpose of this function is to provide a way to dynamically generate the appropriate styling configurations for different sizes of analog clocks based on the clockSize parameter. Encapsulating the configurations in this function allows for flexibility and reusability when creating analog clocks with different sizes and styles.

We call this function and store the result in clockUI.

const clockUI = getClockSize()

Defining Themes

The clock includes three predefined themes for testing purposes, but it is designed to be extensible, allowing you to add as many themes as you need or remove those that don't make sense or simply don't appeal to you 😵‍💫

const AVALIABLE_THEMES = [
  {
    key: 'dark',
    value: {
      main: 'bg-slate-900 text-slate-300',
      shadow: 'shadow-xl shadow-slate-400',
      hand: {
        center: 'bg-slate-200 before:bg-slate-800',
        second: 'bg-slate-300',
        minute: 'bg-slate-300',
        hour: 'bg-slate-300',
      },
    },
  },
  {
    key: 'light',
    value: {
      main: 'bg-slate-300 text-slate-800',
      shadow: 'shadow-xl shadow-slate-400',
      hand: {
        center: 'bg-slate-800 before:bg-slate-300',
        second: 'bg-slate-800',
        minute: 'bg-slate-600',
        hour: 'bg-slate-600',
      },
    },
  },
  {
    key: 'neutral',
    value: {
      main: 'bg-neutral-300 text-teal-700',
      shadow: 'ring-offset-[2px] ring-[10px] shadow-[10px 5px 10px rgba(0, 0, 0, 1)]',
      hand: {
        center: 'bg-teal-700 before:bg-neutral-300',
        second: 'bg-teal-600',
        minute: 'bg-teal-700',
        hour: 'bg-teal-700',
      },
    },
  },
]

The same approach utilized in clock sizing was employed here. Since multiple parts of the component can be modified, a section for it has been incorporated into the template.

Wrapping Up

And there you have it!

We've built a simple yet effective analog clock component in React. This component not only displays the current time, but it also updates itself every second to keep the time accurate. Additionally, we've added the ability to customize the size of the clock, templating and ticking functionality, giving us more flexibility in how we use this component in our applications.

Remember, this is an opinionated implementation, there are many ways you can extend/modify this component. You could add different themes, change the style of the clock hands, add a different ticking sound, or even make the clock interactive. The possibilities are endless when you're building with React.

Hopefully, this tutorial has helped you understand how to build dynamic components in React and gives you some ideas for your projects.

Happy coding!

Bonus

Here you can find the repository and there is a live version at Stackblitz.

Thank you for reading! Any constructive feedback is greatly appreciated!

• Switched to Bun Toolkit

• Updated all dependencies

Introduction

Have you ever needed to prepare ASAP(as usual) a quick demonstration to be shown or just wanted to develop an idea that hit you out of the blue?

In this tutorial, we will be constructing a React application utilizing Vite as our primary development server. It would be the most minimal setup to create quick Proof Of Concepts ASAP.

Vite is a next-generation front-end build tool and development server, created by Evan You, the creator of Vue.js, that offers a fast and efficient development experience, is built on top of esbuild, a JavaScript bundler written in Go, which bundles dependencies 10 to 100 times faster than JavaScript-based bundlers. It doesn't require bundling the entire app or transpiling modules and code. In Vite, transpiling occurs on-demand, resulting in a significantly faster process compared to Create React App (CRA).

Our application will feature a simple yet interactive counter that can be both incremented and decremented through the use of dedicated buttons.

Prerequisites

Before we get started, make sure you have Node.js and npm installed on your computer. You can download them from https://nodejs.org/en/download/.

Initializing a new project

First, we need to initialize a new npm package. Open your terminal and navigate to the directory where you want to create your project. Then run the following command:

npm init -y

This will create a new package.json file in your project directory with default values.

Installing dependencies

Next, we need to install Vite and the necessary React dependencies. Run the following command in your terminal:

npm install vite react react-dom

This will install Vite as a development dependency and React and React DOM as regular dependencies.

Setting up the development server

Now that we have our dependencies installed, we can create a new directory called src in the project root and create the following files inside it:

// App.jsx
import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>My React App</h1>
      <Counter />
    </div>
  );
}

export default App;

// Counter.jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1);
  }

  function handleDecrement() {
    setCount(count - 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

export default Counter;

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Finally, create a new file called index.html in the project root with the following contents:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My new POC</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

This file will be used by Vite to serve our React app.

Starting the development server

To start the development server, run the following command in your terminal:

vite

This will start the development server on http://127.0.0.1:5173/. You should be able to see your React app by navigating to that URL in your browser.

Additionally, you can specify the desired port for serving your app by using the --host flag.

vite --host 3003

Final thoughts

I have encountered numerous situations where I don't want to create an app using CRA or Next just to experiment with a proof of concept, an example, or for demonstration purposes.

With this streamlined, minimal setup, I've successfully achieved my goals, and I wanna you to achieve them too.

Bonus

I've also created a template that you can use for this purpose, which you can find at this link.

Also, if you find it useful Star this repository on GitHub!

Thank you for reading! Any constructive feedback is greatly appreciated!

Desktop applications have been an essential part of the software industry for decades. With the increasing demand for user-friendly and responsive applications, developers are always on the lookout for better tools and frameworks to create top-quality desktop applications.

Over the years, several desktop application development frameworks have emerged, with each having its strengths and limitations. However, with the rise of web technologies and the growing popularity of cross-platform development, many developers are turning to web-based frameworks to build desktop applications.

In this article, we will explore how Next.js and Tauri can be used together to build high-quality cross-platform desktop applications using web technologies. We will discuss the advantages of using Next.js and Tauri, how they compare to other popular desktop application development frameworks, and some real-world examples of applications built using these technologies.

Why Tauri and not other technologies?

When comparing desktop application development frameworks, there are numerous popular options available, such as Electron, NW.js, and JavaFX. However, the combination of Next.js and Tauri offers a distinct set of advantages that set them apart from these other frameworks.

Let's take a quick look at the limitations of these frameworks:

Electron

Electron, a widely-used framework, is often criticized for its large memory footprint and slow start-up times, which can negatively impact the user experience. This is primarily because Electron applications bundle an entire Chromium instance, leading to increased resource consumption. This means that even simple applications built with Electron can consume a significant amount of system resources, which can be especially problematic for users with lower-end hardware or those running multiple applications simultaneously. As a result, developers may face challenges in optimizing their applications for performance and efficiency when using Electron as their framework of choice.

NW.js

NW.js, an alternative popular choice among developers, presents its own unique set of limitations, particularly in terms of providing comprehensive support for Linux platforms. This can pose a significant drawback for developers who aspire to design and develop cross-platform applications that cater to a diverse and extensive range of users, including those who rely on Linux-based systems. Consequently, developers may find themselves struggling to ensure seamless functionality and compatibility across different operating systems when utilizing NW.js as their primary framework.

JavaFX

JavaFX, a well-established framework, requires developers to have a solid understanding of the Java programming language. This can be a barrier for those who are not well-versed in Java or prefer to work with other languages. This prerequisite can pose a significant challenge for those who may not have a strong background in Java or have a preference for working with alternative programming languages. As a result, the requirement to master Java can potentially create a barrier to entry for some developers, especially when they are tasked with the development of cross-platform applications catering to a diverse and extensive range of users, including those who rely on Linux-based systems.

In contrast, Tauri has emerged as a strong contender in the realm of cross-platform development, boasting remarkable compatibility across a wide variety of platforms, including Windows, macOS, and Linux. This enhanced versatility makes these frameworks a more appealing and flexible option for developers who are seeking to create applications that can effortlessly cater to the needs and preferences of users, irrespective of the operating system they employ.

By opting for Tauri, developers can potentially overcome the challenges associated with NW.js and Electron, thereby delivering a more efficient and high-performing application experience to their end users.

Setting up the Development Environment

Now that we have established a starting point, let's set up our development environment. To accomplish this, we will need to fulfill a few prerequisites, since Tauri is built on top of the Rust language, some additional installations must need to be performed.

I'll be following the guide for macOS since that's my current operating system but feel free to select the one that matches yours.

Prerequisites

• First, install the Xcode Command Line Tools:

xcode-select --install

• Second, install Rust:

curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

If everything goes well, you'll see a log like this one:

Rust is installed now. Great!

Create a Next.js project

Now let's create a fresh install of a Next.js application:

npx create-next-app@latest --use-npm --typescript

I would call my app my-desktop-app, again name it as you like :)

Important: Next.js will ask you if you want to try the new and experimental app/ directory. You must select No because it does not yet support the next export command.

Then modify the next.config.js and set the image option unoptimized: true. This is required to use NextJS Image in SSG mode.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
+ images: {
+   unoptimized: true,
+ },
}

module.exports = nextConfig

and add an export script to your package.json :

{
  "name": "my-desktop-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
 +  "export": "next export",
    "start": "next start",
    "lint": "next lint"
  },
...

Create a Rust project

As I said before Tauri is built on top of Rust core, so let's add it:

npm install --save-dev @tauri-apps/cli

Also, add a tauri script to your package.json:

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "start": "next start",
    "lint": "next lint",
+   "tauri": "tauri"
  },
...

Now we are good to go with the project generation:

npm run tauri init

After executing that command you should see a similar output log:

and a file structure like this one:

I am planning an article that covers more advanced content related to the Tauri project and the Rust language.

The only step left is to run your project:

npm run tauri dev

You should see your Desktop app up and running!

Wrapping up!

That's it, hope you enjoyed this tutorial, now you can start to craft some amazing cross-platform Desktop apps.

Let me in the comments what you have built with Next and Tauri or if you rather prefer another technology!

Bonus

As usual, I already have created for you a fully-fledged, configured template with several add-ons in this link:

• TypeScript for static type checking

• ESLint for code linting

• Prettier for code formatting

• Pretty-quick runs prettier over changed files

For git integration, it has also:

• Conventional commits for improving commits

• Husky for improving commits

Thank you for reading! Any constructive feedback is greatly appreciated!