DEV Community: Seppe Gadeyne

Set up Astro with Svelte, Tailwind CSS, Vercel, Prettier, and TypeScript

Seppe Gadeyne — Thu, 10 Sep 2026 09:32:10 +0000

I use Astro with Svelte for interactive components, Tailwind CSS for styling, and Prettier to keep formatting consistent. This guide walks through the project setup, strict TypeScript checks, and a static deployment to Vercel.

Getting started

Before you begin, make sure you have the following on your machine:

Node.js 22.12.0 or higher (odd-numbered releases are not supported)
Visual Studio Code with these extensions: astro-vscode, prettier-vscode, svelte-vscode, and tailwindcss-intellisense

That's it. Astro needs no global CLI and no Docker container to get going.

Initial Astro project setup

Create a new Astro project with:

npm create astro@latest

Astro asks where to create the project and which starter to use. Choose a minimal template unless you already need a themed starter, and keep the strict TypeScript configuration shown below. That gives you a clean setup without demo files to remove later.

Adding Svelte, Tailwind CSS, Prettier, and type checks

From inside the newly created project folder, add the integrations:

npx astro add svelte
npx astro add tailwind
npm install --save-dev @astrojs/check typescript prettier prettier-plugin-astro prettier-plugin-svelte prettier-plugin-tailwindcss

Tailwind's integration has changed. The npx astro add tailwind command now installs the Tailwind Vite plugin (@tailwindcss/vite), which is the recommended path for Tailwind 4. The integration commands update astro.config.mjs where needed, so you rarely have to configure them by hand. Accept the defaults when prompted.

Create src/styles/global.css with @import "tailwindcss"; if the command has not already created it. Import that stylesheet in your shared Astro layout frontmatter with import '../styles/global.css' (adjust the relative path). The Vite plugin alone does not apply styles to a page.

Why this stack? Astro renders pages to static HTML by default and only ships JavaScript where an island needs it. That helps keep a static website fast. I use Svelte 5 for interactive parts because it has a small runtime, runes-based reactivity, and a comfortable component model. Tailwind CSS provides utility classes and can encode the tokens from a design system, keeping the styling predictable.

Configuring Prettier

Create a .prettierrc file in the root of your project:

{
  "useTabs": true,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "printWidth": 100,
  "tailwindStylesheet": "./src/styles/global.css",
  "plugins": ["prettier-plugin-astro", "prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
}

Create a .prettierignore too:

node_modules/**
vercel.json

Two details matter in 2026. First, pluginSearchDirs is gone. Prettier 3 no longer discovers plugins implicitly, so you must list them in plugins. Second, prettier-plugin-tailwindcss sorts classes for both Tailwind 3 and 4 configurations. With Tailwind 4, tailwindStylesheet is required: point it at your actual CSS entry file, here src/styles/global.css.

Configuring Astro

A typical astro.config.mjs for this stack:

import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  site: 'https://yourdomain.com',
  integrations: [svelte()],
  vite: {
    plugins: [tailwindcss()],
  },
  trailingSlash: 'never',
  output: 'static',
});

Astro's default output is static, and a fully static site can deploy to Vercel without an adapter. The platform serves the exported HTML and assets from its CDN without per-request rendering. Run npx astro add vercel only when you need on-demand routes or Vercel-specific services such as image optimization; current versions import the adapter from @astrojs/vercel.

The astro check command type-checks .astro files. It requires @astrojs/check and TypeScript, which the install command above adds. Run it in CI to catch type errors before they are merged or deployed:

{
  "scripts": {
    "dev": "astro dev",
    "check": "astro check",
    "build": "astro check && astro build"
  }
}

Configuring TypeScript

Edit tsconfig.json:

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

The paths setting gives you path aliases: import components as @/components/Button.astro instead of ../../components/Button.astro. My site uses the same trick with @blocks/* for its block registry.

The old advice to declare a *.astro module shim in src/env.d.ts is obsolete. Since version 3, Astro has generated typed references for .astro imports automatically. If you still have such a declaration lying around, you can delete it.

Configuring Vercel

A static deployment needs little configuration after you connect the repository in Vercel. Here is a minimal vercel.json for the project root:

{
  "regions": ["fra1"],
  "cleanUrls": true,
  "trailingSlash": false,
  "redirects": [
    { "source": "/old-slug", "destination": "/new-slug", "permanent": true }
  ]
}

trailingSlash: false makes Vercel redirect /old-slug/ to /old-slug with a 308, which keeps your URLs canonical. When you migrate slugs, account for both trailing-slash variants so every old incoming link reaches the intended page.

Running the project

Start the development server with:

npm run dev

If the project behaves oddly after an Astro upgrade, reinstall the dependencies before rewriting your configuration. Stale dependency state is often the culprit.

Originally published on Straffe Sites.

Integrate Prettier with Astro and Tailwind CSS

Seppe Gadeyne — Mon, 07 Sep 2026 08:53:55 +0000

Prettier handles indentation, quotes, and line breaks. With the right plugins, it also formats .astro files and sorts Tailwind utility classes. This guide sets up both for an Astro project using Prettier 3 and Tailwind CSS 4.

There are two details to get right: Prettier 3 requires explicit plugin loading, and the Tailwind plugin needs the CSS entry point for your Tailwind 4 configuration.

Getting started

Use a current Node.js LTS release supported by your Astro version, with npm installed. If you use VS Code, install these extensions:

Astro (astro-build.astro-vscode)
Prettier (esbenp.prettier-vscode)
Optional: Tailwind CSS IntelliSense for class suggestions; it is not required for formatting.

If you do not have an Astro project yet, create one:

npm create astro@latest

Choose a starter template and install its dependencies when prompted. Run the remaining commands from the project folder created by the wizard. This guide assumes Astro 5.2 or newer, where astro add tailwind installs the Tailwind 4 Vite plugin.

Adding Tailwind CSS and Prettier

If Tailwind 4 is not already configured, run:

npx astro add tailwind

Review and accept the proposed changes. The command adds @tailwindcss/vite to astro.config.mjs and creates src/styles/global.css with the Tailwind import:

@import 'tailwindcss';

Import that stylesheet in the front matter of a shared layout, such as src/layouts/Layout.astro, or in each page that needs it:

---
import '../styles/global.css'
---

Merge the import into your existing front matter; keep the rest of the layout. The CSS must be imported by a layout or page you actually render. See Astro's Tailwind setup instructions if your project uses a different structure. Existing Tailwind 3 projects should follow the migration instructions there first.

Then install Prettier and both formatting plugins:

npm install --save-dev --save-exact prettier@3 prettier-plugin-astro prettier-plugin-tailwindcss

--save-exact saves exact versions in package.json. Commit package-lock.json as well so teammates and CI can install the same dependency tree with npm ci.

Configuring Prettier

Create .prettierrc in the project root, or merge these settings into your existing Prettier configuration:

{
  "useTabs": true,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "printWidth": 100,
  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
  "tailwindStylesheet": "./src/styles/global.css",
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

The first five options are formatting preferences, not Astro requirements. Adjust them to your team's conventions.

The plugins array explicitly loads the plugins. Prettier 3 removed automatic plugin discovery; installing a package alone does not load it in the CLI. The Astro parser override follows the Astro plugin's recommended configuration.

For Tailwind 4, tailwindStylesheet is required by the Tailwind plugin's setup instructions. Point it to your actual CSS entry point containing the Tailwind import and your theme or custom utility definitions. The path is relative to .prettierrc, not the file being formatted.

Keep prettier-plugin-tailwindcss last in the plugin array. If your project also uses Svelte, install its formatter:

npm install --save-dev --save-exact prettier-plugin-svelte

Then replace the plugins array with this one, keeping the other settings:

["prettier-plugin-astro", "prettier-plugin-svelte", "prettier-plugin-tailwindcss"]

Add .prettierignore for generated output:

dist/
.astro/
.vercel/

Prettier already ignores node_modules by default. There is no general reason to exclude vercel.json; it is a source configuration file that Prettier can format.

Formatting on save in VS Code

Merge these settings into .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.documentSelectors": ["**/*.astro"],
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

The Astro extension has its own formatter; these settings explicitly select the Prettier extension for .astro files. The Prettier extension uses your project's locally installed Prettier. Open a trusted workspace and approve local module loading if prompted.

For Svelte projects, also add "**/*.svelte" to prettier.documentSelectors and a [svelte] setting with the same editor.defaultFormatter value.

Checking the setup locally and in CI

Format the project, then check it without making changes:

npx prettier . --write
npx prettier . --check

Review the formatting diff before committing. --check exits with a nonzero status if files need formatting, so it can fail a CI job. In CI, install the committed dependencies with npm ci before running npx prettier . --check.

If formatting fails, check that the stylesheet path exists, the Astro parser override is present, and the Tailwind plugin is last. If the CLI works but saving in VS Code does not, check the selected formatter and the Prettier output panel.

Conclusion

The project now has an explicit plugin configuration, a Tailwind 4 stylesheet reference, and a formatting check you can use outside the editor. Keep the configuration and lockfile in Git so format-on-save and CI use the same rules.

The full Astro setup guide covers the wider starter configuration, including Svelte, Vercel, and TypeScript.

Originally published on straffesites.com.

A guide to proper semantic markup for blog posts

Seppe Gadeyne — Thu, 03 Sep 2026 11:06:26 +0000

Semantic markup means choosing HTML elements for their meaning: one <h1> for your title, <h2> and <h3> for logical sections, <figure> with <figcaption> for images, <time> for your publication date, and JSON-LD BlogPosting data for search engines. This guide explains why that matters for SEO and gives you examples of each element that you can copy, paste, and validate.

Introduction to semantic markup

Semantic markup uses HTML elements to make the structure and meaning of a page clear to browsers, search engines, and assistive technology. Give the blog post one <h1> for its title. Below it, use a logical hierarchy without skipping levels: <h2> for main sections and <h3> for subsections. This makes the article easier to scan and understand.

You can also add an id attribute to each <h2> and <h3>, usually based on a short hyphenated version of the heading. A table of contents can then link directly to it with a fragment such as #name-of-the-id.

The basic structure of a blog post

Here is an example of the basic structure of a blog post with semantic markup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My website</title>
  </head>
  <body>
    <header>
      <figure>
        <img src="logo.svg" alt="Company name" />
      </figure>
      <nav aria-label="Main navigation">
        <!-- aria-label instead of a heading: navigation doesn't belong in the content outline -->
        <menu>
          <li><a href="/">Home</a></li>
          <li><a href="/contact">Contact</a></li>
        </menu>
      </nav>
    </header>
    <main>
      <article>
        <h1>Main title</h1>
        <h2>Title 1</h2>
        <p>Paragraph 1</p>
        <h2>Title 2</h2>
        <p>Paragraph 2</p>
        <h2>Title 3</h2>
        <p>Paragraph 3</p>
      </article>
    </main>
    <footer>
      <nav aria-label="Footer navigation">
        <menu>
          <li><a href="/">Home</a></li>
          <li><a href="/contact">Contact</a></li>
        </menu>
      </nav>
      <p>&copy; 2023 Company name</p>
    </footer>
  </body>
</html>

Notice that the navigation does not need an <h2>. Headings describe content sections; an aria-label names the <nav> landmark instead. The heading hierarchy stays clean, while screen reader users can still distinguish one navigation area from another.

Images and their alt text

Images need the same care as the surrounding text. Use descriptive filenames and write alt text that explains the content or purpose of each informative image. Alt text is primarily an accessibility feature, though it can also give search engines useful context.

A <figcaption> provides a visible caption that connects the image to your article. The alt text describes the image for someone who cannot see it; the caption is visible to everyone. The two may overlap, but they do not need to repeat each other word for word.

<figure>
  <img
    src="example-image.jpg"
    alt="An example of a well-formatted image"
  />
  <figcaption>An example of a well-formatted image</figcaption>
</figure>

Using `<time>` and `<address>`

Use <time> for a machine-readable publication or modification date. The <address> element is suitable for the article author's contact information, not for every postal address that happens to appear in the copy. Link to a useful author page if you have one.

Here is a simple example using <time> and <address>:

<time datetime="2023-03-21">March 21, 2023</time>
<address>
  Written by <a href="author-page.html">The Author</a>
  Follow me on <a href="https://twitter.com/theauthor">Twitter</a>
</address>

Schema markup for blog posts

Schema markup gives search engines an explicit description of the page. A blog post can use Article or its more specific BlogPosting type. If the page contains a genuine FAQ, FAQPage can describe those questions and answers too.

Here is a BlogPosting example:

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "A guide to the right semantic markup for blog posts",
  "url": "https://example.com/blog/semantic-markup-blog-posts",
  "image": [
    "https://example.com/image/1x1/image.jpg",
    "https://example.com/image/4x3/image.jpg",
    "https://example.com/image/16x9/image.jpg"
  ],
  "datePublished": "2023-03-20T12:42:21.345Z",
  "dateModified": "2023-03-21T12:12:44.220Z",
  "author": {
    "@type": "Person",
    "name": "The Author",
    "url": "https://example.com/the-author",
    "sameAs": [
      "https://twitter.com/the-author",
      "https://www.linkedin.com/in/the-author/"
    ]
  },
  "publisher": {
    "@type": "Organization",
    "name": "Company name",
    "url": "https://example.com",
    "sameAs": ["https://www.linkedin.com/company/company-name/"],
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.svg"
    }
  }
}

And here is an FAQPage example using Question and Answer:

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Why is semantic markup important for SEO?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Semantic markup helps search engines understand the structure and meaning of a page and gives assistive technologies useful relationships. It can support indexing, but it does not guarantee rankings or traffic."
      }
    },
    {
      "@type": "Question",
      "name": "Should I always use alt text for images?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Use descriptive alt text for informative images. Give purely decorative images an empty alt attribute so screen readers can skip them. Alt text primarily supports accessibility and can also provide search engines with useful context."
      }
    }
  ]
}

Always validate pasted markup. Google's Rich Results Test shows whether Google recognizes supported structured data, while the Schema.org validator checks the underlying vocabulary. URL inspection in Google Search Console shows how Google sees the published page. As a quick local check, the JSON must be accepted by JSON.parse without HTML-entity corruption.

Conclusion

Correct semantic markup gives readers, assistive technology, and search engines a clearer article. Use headings in order, describe informative images with useful alt text, and add valid schema markup where it accurately reflects the page. For the editorial side, I also wrote a guide on formatting and structuring a blog post. MDN has a useful reference on semantics in HTML as well.

This post was originally published on straffesites.com — I build fast, semantic websites there.

Supercharge your Shopify pages with Liquid shortcodes for collections

Seppe Gadeyne — Fri, 02 Jun 2023 11:33:14 +0000

I will share a handy trick I recently applied to a client's website selling orthopedic insoles. We needed a way to showcase collections in a page's text. Unlike WordPress, this isn't a feature directly offered by Shopify. We can achieve this with some Liquid, Shopify's template language. Look at the link above for an example of this implementation.

Making your Shopify theme shortcode-ready

The first step in our journey involves tweaking your theme's main-page.liquid file, located under the /sections directory. We'll make a small but impactful change here: replace {{ page.content }} with {% render 'shortcode', page: page.content %}. This modification tells Shopify to load the snippet named shortcode.liquid and pass it the variable named page containing page.content.

Creating the liquid shortcodes

Once we've prepped our theme, it's time to create two new files within the /snippets folder: shortcode.liquid and shortcode-collection.liquid.

In shortcode.liquid, we'll be inserting the following code:

{% liquid
   if page != empty
       assign content = page | split: '[collection='

       if content.size > 1
           assign content_parts = content[1] | split: ']'
           assign shortcode_handle = content_parts[0]

           echo content[0]

           if collections[shortcode_handle].id != empty
               render 'shortcode-collection', handle: shortcode_handle
           else
               echo '<p>No collection found with the handle "' | append: shortcode_handle | append: '".</p>'
           endif

           echo content_parts[1]
       else
           echo page
       endif
   endif
%}

This code checks if a shortcode in the format [collection=name-collection] is present within the text. If detected, the content will be split into two parts, and shortcode-collection.liquid will be loaded. If no shortcode is found, page.content is loaded as is.

Now, we'll add the following code to shortcode-collection.liquid:

{% assign collection = collections[handle] %}

{% if collection.id != empty %}
   <article>
       <h2>{{ collection.title }}</h2>
       {% for product in collection.products %}
           <article>
               <a href='{{ product.url }}'>
                   <img
                       src='{{ product.featured_image | image_url: width: '600', height: '600' }}'
                       alt='{{ product.title }}'
                       width='600'
                       height='600'
                       loading='lazy'
                   >
               </a>

               <a href='{{ product.url }}'>
                   <h3>
                       {{ product.title }}
                   </h3>
               </a>

               <p>
                   {{ product.price | money }}
               </p>
           </article>
       {% endfor %}
   </article>
{% else %}
   <p>No collection found with the handle "{{ shortcode_handle }}".</p>
{% endif %}

This code is responsible for rendering the products of a given collection. Remember, you'll likely need to style the output with CSS to match your website's looks. I intentionally used the <article> element, along with heading elements <h2> and <h3>, to leverage semantic markup, which can help your site rank higher on Google. For more information on semantic markup and improving your Google ranking, check out my other articles at Straffe Sites.

Conclusion

With some creativity and Liquid code, we've created a system that allows for the flexible insertion of Shopify collections into any part of your webpage.

This technique can be a real game-changer for those who want to provide a more dynamic and customized shopping experience. It's another example of the flexibility and power that Shopify's Liquid language offers.

But remember, with great power comes great responsibility. Always double-check your code and test your pages thoroughly to ensure everything works as expected. And remember to style your output with CSS to maintain a consistent and appealing visual aesthetic across your site.

I hope this tutorial has been helpful and has given you ideas for your Shopify projects. Remember, the possibilities are nearly endless when customizing your e-commerce store.

Unlocking your website's potential: eliminate render-blocking resources

Seppe Gadeyne — Mon, 08 May 2023 09:35:42 +0000

Do you need help constantly seeing poor Lighthouse ratings from Google PageSpeed Insights? The main issue is often render-blocking resources. In this blog post, I'll walk you through some straightforward steps to eliminate these performance issues and help your website achieve the speed boost it deserves.

Optimize JavaScript loading to prevent page load delays

A simple tweak can impact your website's performance. Optimizing loading ensures no longer render-blocking the initial rendering of your page. Eliminating render-blocking is facilitated through the use of a Promise, which allows scripts to be loaded asynchronously without blocking the rendering of the page, ensuring that they are injected into the page only after the initial HTML document has been fully loaded and parsed. Some scripts, like chat widgets, are introduced toward the end of the page or when the user interacts with the website.

Here's an example of how to optimally load Google Tag Manager:

<script type="module">
    // Function to load JavaScript to the DOM
    function loadJS(src, id) {
        return new Promise((resolve) => {
            const script = document.createElement('script')
            script.type = 'text/javascript'
            script.async = true
            script.src = src
            script.id = id
            script.onload = resolve
            document.head.appendChild(script)
        })
    }

    // Load Google Tag Manager 
    loadJS(`https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX`, 'gtm').then(() => {
        window.dataLayer = window.dataLayer || []
        window.dataLayer.push({
            event: 'gtm.js',
            'gtm.start': new Date().getTime(),
            'gtm.uniqueEventId': 0
        })
        window.dataLayer.push({ event: 'pageLoad' })
    })
</script>

The following example demonstrates how to load a chat widget only when the user begins scrolling on the website:

<script type="module">
    // Function to load JavaScript to the DOM
    function loadJS(src, id) {
        return new Promise((resolve) => {
            const script = document.createElement('script')
            script.type = 'text/javascript'
            script.async = true
            script.src = src
            script.id = id
            script.onload = resolve
            document.head.appendChild(script)
        })
    }

    function handleScroll() {
      // Load the external JavaScript
      loadJS(`https://static.chatbotkit.com/integrations/widget/v2.js`, 'chatbotkit')

      // Remove the event listener after executing the code
      window.removeEventListener('scroll', handleScroll);
    }

    window.addEventListener('scroll', handleScroll);
</script>

Embedding videos without hindering page load

Adding multimedia, like videos, can provide a rich experience for your users. However, loading external resources such as videos can significantly slow page load time. A solution to this is to initially display a thumbnail of the video and only load the video when the user expresses interest by clicking on the thumbnail.

I applied this technique for a client on their page: Hire silent disco at Verhuurwinkel.nl. It worked seamlessly, ensuring the page loaded faster and providing interactive video content.

Here’s how you can implement this technique for a YouTube video:

<div id="my-youtube-id">
    <img id="my-thumbnail-id" src="https://example.com/images/thumbnail.jpg" alt="ALT text for your image"
        width="1200" height="675" style="cursor: pointer;">
</div>

<script>
    // Function to handle thumbnail click event
    function handleThumbnailClick() {
        const iframe = document.createElement('iframe');
        iframe.setAttribute('title', 'YouTube video player');
        iframe.setAttribute('src', 'https://www.youtube.com/embed/X4z0ojfdLac');
        iframe.setAttribute('width', '1200');
        iframe.setAttribute('height', '675');
        iframe.setAttribute('frameborder', '0');
        iframe.setAttribute('allowfullscreen', 'allowfullscreen');

        const contentDiv = document.getElementById('my-youtube-id');
        const thumbnail = document.getElementById('my-thumbnail-id');

        // Replace the image with the iframe
        contentDiv.removeChild(thumbnail);
        contentDiv.appendChild(iframe);
    }

    // Wait for DOM to be ready
    document.addEventListener('DOMContentLoaded', function () {
        const thumbnail = document.getElementById('my-thumbnail-id');
        thumbnail.addEventListener('click', handleThumbnailClick);
    });
</script>

In the code above, an image thumbnail of the video is initially displayed on the webpage. When the user clicks on the thumbnail, a handleThumbnailClick function is triggered, which replaces the thumbnail with the actual YouTube video iframe. This way, the external video resource is only loaded when it's needed, which helps in reducing the initial load time of your webpage.

By following the above method, you can embed videos in your website without negatively impacting the page load time, further unlocking your website's potential for speed and performance.

Conclusion

Following the steps outlined in this blog post, you can eliminate render-blocking resources from your website and enhance its overall website performance. Try these tips, and watch your website's loading time dramatically improve!

Crafting a mobile menu with Tailwind CSS without JavaScript

Seppe Gadeyne — Fri, 28 Apr 2023 08:34:10 +0000

Welcome to this blog post, where I'll walk you through building a mobile menu using only Tailwind CSS and HTML, without JavaScript. This approach is excellent for enhancing website performance, as minimizing the use of JavaScript can help your site load faster. You can check out a live example of this technique on my website. Let's get started!

Using `peer-*` from Tailwind CSS for animations and state

To create the animations for our mobile menu, we'll utilize the peer-* utility from Tailwind CSS. This allows us to control the state of a sibling element, like an <input> element of the type checkbox. By placing all HTML elements within the <label> element, we can make them dependent on the state of the <input> element. We will then hide the <input> element and make the <label> element respond to touch or cursor.

<label class="relative z-40 cursor-pointer px-3 py-6" for="mobile-menu">
   <input class="peer hidden" type="checkbox" id="mobile-menu" />
</label>

Creating the hamburger icon with `before:` and `after:` pseudo-elements

To craft the hamburger icon, we'll use the before: and after: pseudo-elements. We'll start with a <div> element with a height of 1px and a width equal to the w-7 value. In this example, the middle line is set to transparent, so we only see the lines from before: and after:

<label class="relative z-40 cursor-pointer px-3 py-6" for="mobile-menu">
    <input class="peer hidden" type="checkbox" id="mobile-menu" />
    <div
        class="relative z-50 block h-[1px] w-7 bg-black bg-transparent content-[''] before:absolute before:top-[-0.35rem] before:z-50 before:block before:h-full before:w-full before:bg-black before:transition-all before:duration-200 before:ease-out before:content-[''] after:absolute after:right-0 after:bottom-[-0.35rem] after:block after:h-full after:w-full after:bg-black after:transition-all after:duration-200 after:ease-out after:content-[''] peer-checked:bg-transparent before:peer-checked:top-0 before:peer-checked:w-full before:peer-checked:rotate-45 before:peer-checked:transform after:peer-checked:bottom-0 after:peer-checked:w-full after:peer-checked:-rotate-45 after:peer-checked:transform"
    >
    </div>
</label>

Completing the mobile menu with additional elements

Now, let's add more elements to complete the mobile menu:

A full-screen background with a backdrop blur filter
A <div> element for the menu items with an animation, which scrolls the menu from right to left
The menu itself, using a <menu> element (which functions like a <ul> element, but is better for semantics in HTML)

<label class="relative z-40 cursor-pointer px-3 py-6" for="mobile-menu">
    <input class="peer hidden" type="checkbox" id="mobile-menu" />
    <div
        class="relative z-50 block h-[1px] w-7 bg-black bg-transparent content-[''] before:absolute before:top-[-0.35rem] before:z-50 before:block before:h-full before:w-full before:bg-black before:transition-all before:duration-200 before:ease-out before:content-[''] after:absolute after:right-0 after:bottom-[-0.35rem] after:block after:h-full after:w-full after:bg-black after:transition-all after:duration-200 after:ease-out after:content-[''] peer-checked:bg-transparent before:peer-checked:top-0 before:peer-checked:w-full before:peer-checked:rotate-45 before:peer-checked:transform after:peer-checked:bottom-0 after:peer-checked:w-full after:peer-checked:-rotate-45 after:peer-checked:transform"
    >
    </div>
    <div
        class="fixed inset-0 z-40 hidden h-full w-full bg-black/50 backdrop-blur-sm peer-checked:block"
    >
        &nbsp;
    </div>
    <div
        class="fixed top-0 right-0 z-40 h-full w-full translate-x-full overflow-y-auto overscroll-y-none transition duration-500 peer-checked:translate-x-0"
    >
        <div class="float-right min-h-full w-[85%] bg-white px-6 pt-12 shadow-2xl">
            <menu>
                <li><a href="/">Home</a></li>
                <li><a href="/contact">Contact</a></li>
            </menu>
        </div>
    </div>
</label>

Conclusion

In this blog post, we've successfully built a lightweight mobile menu using Tailwind CSS and HTML without JavaScript. This approach is crucial for optimizing your website's load speed and ranking higher in search engines. So try and experience the benefits of a more performant, JavaScript-free mobile menu.

Unlocking the power of semantics in HTML

Seppe Gadeyne — Thu, 27 Apr 2023 11:57:37 +0000

Welcome to the world of semantics, where code speaks the language of content. In today's fast-paced digital landscape, creating accessible and search engine-friendly web pages is crucial for success. However, as a freelance web developer, I've noticed that many newly built websites need improvement regarding semantics in HTML. In this blog post, we'll dive into the importance of semantics, explore a basic HTML structure with the correct semantics, and provide resources for further learning.

The importance of semantics

Using semantics correctly allows you to communicate the meaning of content blocks on your website through code. Semantics are of great value for search engines and screen readers, making your site more accessible and easily understood.

A basic HTML structure with proper semantics

Here's an example of how to structure a page with the correct semantics:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>My Page</title>
</head>
<body>
    <h1>This is my page</h1>
    <header>
        <figure>
            <img src="logo.svg" alt="My brand" />
        </figure>
        <nav>
            <h2>Primary navigation</h2>
            <menu>
                <li><a href="/">Home</a></li>
                <li><a href="/contact">Contact</a></li>
            </menu>
        </nav>
    </header>
    <main>
     <article>
         <h2>Article Title</h2>
         <h3>Subtitle 1</h3>
         <p>Paragraph 1</p>
         <h3>Subtitle 2</h3>
         <p>Paragraph 2</p>
         <h3>Subtitle 3</h3>
         <p>Paragraph 3</p>
     </article>
    </main>
    <footer>
        <nav>
            <h2>Footer navigation</h2>
            <menu>
                <li><a href="/">Home</a></li>
                <li><a href="/contact">Contact</a></li>
            </menu>
        </nav>
        <p>&copy; 2023 My Brand</p>
    </footer>
</body>
</html>

You might notice that the <h1> element is positioned immediately after the <body> element. This implies that subsequent heading elements should begin with the <h2> element, and beneath the <h2> element, there should be <h3> elements. Sticking to these rules is essential for implementing semantics correctly in HTML. For more guidance, refer to resources on semantics in HTML from MDN.

Placing the <h1> element right below the <body> element can be challenging visually organizing your layout. Therefore, I usually make this <h1> element visible only to screen readers using CSS. Remember that this element's content is crucial for search engines, so ensure it's optimized for SEO.

Resources and tools for better semantics

Many sectioning elements in HTML need to be identified by a heading element as a child. You can consult the HTML elements reference from MDN for each element's requirements, and you can use a tool like HTML5 Outliner to check your work. If you've missed a heading element, this tool will make finding and correcting the issue easy. By implementing the correct markup, you'll create a well-structured table of contents for your page.

Semantics for blog posts

For those interested in diving deeper into the topic, I've written a separate blog post about the specific elements and semantics to use for blog post pages. Check it out to enhance your understanding and application of HTML semantics in blogging.

Conclusion

Understanding and applying the correct semantics in HTML is essential for creating accessible, search engine-friendly websites. By following the basic structure provided and using the resources mentioned, you'll be on your way to unlocking the full potential of semantics in your web development projects. Remember, code is not only about functionality – it's also about communication. So make your code speak the language of your content with the power of semantics.

DEV Community: Seppe Gadeyne

Set up Astro with Svelte, Tailwind CSS, Vercel, Prettier, and TypeScript

Getting started

Initial Astro project setup

Adding Svelte, Tailwind CSS, Prettier, and type checks

Configuring Prettier

Configuring Astro

Configuring TypeScript

Configuring Vercel

Running the project

Integrate Prettier with Astro and Tailwind CSS

Getting started

Adding Tailwind CSS and Prettier

Configuring Prettier

Formatting on save in VS Code

Checking the setup locally and in CI

Conclusion

A guide to proper semantic markup for blog posts

Introduction to semantic markup

The basic structure of a blog post

Images and their alt text

Using <time> and <address>

Schema markup for blog posts

Conclusion

Supercharge your Shopify pages with Liquid shortcodes for collections

Making your Shopify theme shortcode-ready

Creating the liquid shortcodes

Conclusion

Unlocking your website's potential: eliminate render-blocking resources

Optimize JavaScript loading to prevent page load delays

Embedding videos without hindering page load

Conclusion

Crafting a mobile menu with Tailwind CSS without JavaScript

Using peer-* from Tailwind CSS for animations and state

Creating the hamburger icon with before: and after: pseudo-elements

Completing the mobile menu with additional elements

Conclusion

Unlocking the power of semantics in HTML

The importance of semantics

A basic HTML structure with proper semantics

Resources and tools for better semantics

Semantics for blog posts

Conclusion

Using `<time>` and `<address>`

Using `peer-*` from Tailwind CSS for animations and state

Creating the hamburger icon with `before:` and `after:` pseudo-elements