DEV Community: Andreas B. Vestergaard

CSS Grid vs. Position Absolute for Overlapping Elements

Andreas B. Vestergaard — Wed, 12 Mar 2025 08:03:38 +0000

When you need to position elements on top of each other, many developers instinctively reach for position: absolute. While this approach works, it comes with several drawbacks including elements being removed from the document flow, which can cause layout issues and complicate responsive design.

CSS Grid offers a more elegant solution for creating overlapping elements. By placing multiple child elements in the same grid cell, you can achieve the same visual effect while maintaining a more predictable layout system.

Here's a simple implementation:

.parent {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}

.div2 {
  grid-area: 1 / 1 / 2 / 2;
}

The beauty of this approach is that:

All elements remain in the document flow
The parent container will properly size itself based on its content
It's easier to center content or align it consistently
You gain all the responsive benefits of CSS Grid
Z-index still works as expected to control stacking order

This technique is particularly useful for card overlays, image captions, or any UI component where elements need to be stacked precisely.

For more complex overlapping patterns, you can combine this with the z-index property to control which elements appear on top, just as you would with absolutely positioned elements.

How to make a spacing component for Gutenberg Blocks

Andreas B. Vestergaard — Wed, 12 Mar 2025 07:59:48 +0000

One of the challenges we faced while building custom Gutenberg blocks was providing clients with an intuitive way to control spacing. Clients often need to adjust the spacing above or below blocks to maintain visual hierarchy and improve readability. To solve this problem, we developed a reusable SpacingSettings component.
The Problem

Before creating this component, we had to implement spacing controls for each block individually, leading to:

Duplicated code across multiple blocks
Inconsistent UI for spacing controls
Maintenance headaches when changes were needed

Our Solution

We created a reusable SpacingSettings component that can be easily imported and used across all our custom blocks. This component provides toggle controls for spacing at the top and bottom of blocks.

The core of our solution is a simple React component that leverages WordPress's built-in UI components. The component accepts properties for current spacing values, a change handler, and customizable labels.

const {
  element: { Fragment },
  components: { ToggleControl }
} = wp

const SpacingSettings = ({ onChange, spacingTop, spacingBottom, labels }) => {
  return (
    <Fragment>
      {typeof spacingTop !== 'undefined' && (
        <ToggleControl
          label={labels?.spacingTop?.label || 'Spacing Top'}
          help={spacingTop ? labels?.spacingTop?.enabled || 'Block has spacing top.' : labels?.spacingTop?.disabled || 'Block does not have spacing top.'}
          checked={spacingTop}
          onChange={(value) => onChange('spacingTop', value)}
        />
      )}
      {typeof spacingBottom !== 'undefined' && (
        <ToggleControl
          label={labels?.spacingBottom?.label || 'Spacing Bottom'}
          help={spacingBottom ? labels?.spacingBottom?.enabled || 'Block has spacing bottom.' : labels?.spacingBottom?.disabled || 'Block does not have spacing bottom.'}
          checked={spacingBottom}
          onChange={(value) => onChange('spacingBottom', value)}
        />
      )}
    </Fragment>
  )
}

export default SpacingSettings

Let's break down what this component does:

It imports the necessary WordPress components (Fragment and ToggleControl)
It conditionally renders spacing controls based on provided props
It handles the toggling of spacing options and communicates changes back to the parent block
It supports customizable labels with sensible defaults

How to Use It

Implementing the component in any block is straightforward. You simply import it and include it in your block's Inspector Controls panel.

The component requires just a few props:

spacingTop and spacingBottom: Boolean values that determine the current state
onChange: A function that updates the block attributes when spacing is toggled
labels: An optional object for customizing the text displayed in the UI

Making It Work in the Frontend

The toggle controls are only half the solution. We add CSS classes based on the toggle states to make the spacing affect the block's appearance.

In our block's save function, we use the classnames utility to apply spacing classes conditionally:

const blockClasses = classnames(
  'my-custom-block',
  {
    'has-spacing-top': spacingTop,
    'has-spacing-bottom': spacingBottom
  }
);

Then in our stylesheet, we define what those spacing classes actually do:

.has-spacing-top {
  margin-top: 2rem;
}

.has-spacing-bottom {
  margin-bottom: 2rem;
}

Benefits

This component has significantly improved our development workflow:

DRY Code: We eliminated repetitive code across our block library
Consistent UI: All blocks now have the same spacing controls
Easier Maintenance: Changes to spacing controls only need to be made in one place
Client Satisfaction: Clients appreciate the intuitive controls for adjusting layout spacing

Lessons Learned

Creating reusable components for common functionality is a powerful pattern in Gutenberg development. It not only makes your codebase more maintainable but also creates a more consistent experience for content editors.

We've since applied this same pattern to other common block settings like background colors, animations, and responsive visibility options. Each reusable component has further streamlined our development process.

By investing time in building these foundation components, we've been able to develop new blocks much faster while maintaining a consistent editing experience across our entire block library.

How to use Native Share on iOS and Android

Andreas B. Vestergaard — Tue, 11 Mar 2025 20:18:29 +0000

How to Use Native Share on iOS and Android

In today's mobile-first world, creating seamless experiences for your users is crucial. One feature that can significantly enhance user experience is native sharing functionality. Rather than building custom sharing interfaces, modern web applications can leverage the Web Share API to tap into the device's built-in sharing capabilities.

Why Native Sharing Matters

Native sharing provides a familiar interface for users, allowing them to share content through their preferred applications without leaving your website. This seamless experience not only improves usability but can also increase engagement and content distribution.

When users encounter content they want to share, they expect a quick and intuitive process. The Web Share API delivers exactly that by presenting the same sharing sheet they're accustomed to using in native applications.

Understanding the Web Share API

The Web Share API is a relatively new browser feature that bridges the gap between web and native applications. It allows websites to trigger the device's native sharing dialog with just a few lines of code.

At its core, the API is remarkably simple:

  const handleShare = async ( button: HTMLElement ): Promise< void > => {
    const title = document.title;
    const url = window.location.href;

    try {
      if ( navigator.share && isMobile ) {
        await navigator.share( { title, url } );
      } else if ( navigator.clipboard ) {
        await navigator.clipboard.writeText( url );
      } else {
        throw new Error( 'Sharing is not supported in your browser.' );
      }
      updateButtonState( button, true );
    } catch ( error ) {
      console.error(
        'Error sharing:',
        error instanceof Error ? error.message : String( error )
      );
    }
  };

This simple function call invokes the device's sharing panel, allowing users to select their preferred sharing method.

Mobile Detection with window.matchMedia

Since native sharing is primarily useful on mobile devices, it's important to detect whether the user is on a mobile device. The window.matchMedia API provides an elegant solution:

const mediaQuery = window.matchMedia( '(max-width: 768px)' );
let isMobile = mediaQuery.matches;

This approach uses a media query to determine if the device's screen width is below a certain threshold (768px in this case), which is a common breakpoint for distinguishing between mobile and desktop devices.

What makes this approach particularly powerful is that it responds to changes in the viewport size.

With this listener in place, your application will adapt its sharing behavior if the user rotates their device or resizes their browser window.

Implementing Throttling for Better User Experience

User interfaces should be responsive but also protected against accidental or rapid repeated actions. Throttling is a technique that limits how frequently a function can be executed, which is perfect for share buttons.

A simple throttle implementation might look like this:

  const throttle = < T extends ( ...args: unknown[] ) => unknown >(
    func: T,
    delay: number
  ): ( ( ...args: Parameters< T > ) => void ) => {
    let timeoutId: ReturnType< typeof setTimeout > | null = null;

    return function ( this: unknown, ...args: Parameters< T > ): void {
      if ( ! timeoutId ) {
        func.apply( this, args );
        timeoutId = setTimeout( () => {
          timeoutId = null;
        }, delay );
      }
    };
  };

This function creates a wrapper that only allows the original function to be called once within the specified delay period. When applied to a share button, it prevents users from triggering multiple share dialogs by rapidly clicking the button:

  const addShareListener = ( button: HTMLElement ) => {
    button.addEventListener( 'click', () => throttledShare( button ) );
  };

Graceful Fallbacks for Unsupported Browsers

Not all browsers support the Web Share API, particularly on desktop platforms. It's essential to provide fallbacks for these scenarios:

      if ( navigator.share && isMobile ) {
        await navigator.share( { title, url } );
      } else if ( navigator.clipboard ) {
        await navigator.clipboard.writeText( url );
      } else {
        throw new Error( 'Sharing is not supported in your browser.' );
      }

This progressive enhancement approach ensures that all users can share content, regardless of their browser's capabilities.

Visual Feedback for User Actions

When users interact with your share button, providing visual feedback is important. This could be as simple as updating the button text temporarily.

This feedback reassures users that their action was successful and completes the interaction loop.

Browser Compatibility Considerations

The Web Share API has gained significant support in recent years, but it's still important to be aware of compatibility:

iOS Safari: Supported since version 12.2
Android Chrome: Supported since version 75
Android Firefox: Supported since version 79
Desktop browsers: Limited support, primarily in Chromium-based browsers

By implementing proper feature detection and fallbacks, you can provide a consistent experience across all platforms.

Putting It All Together

A well-implemented share button combines all these elements: feature detection, mobile awareness, throttling, and user feedback. The resulting functionality feels native and intuitive, enhancing the overall user experience of your web application.

When implementing sharing in your projects, remember that the goal is to create a seamless experience that feels natural to users. The Web Share API allows you to leverage the platform's native capabilities, resulting in a familiar and efficient experience.

Conclusion

Native sharing capabilities represent an important bridge between web and native applications. By implementing the Web Share API with proper mobile detection and throttling, you can provide users with a sharing experience that feels truly native to their device.

As web technologies continue to evolve, we can expect even more powerful integrations between web applications and native platform features. For now, the Web Share API offers a compelling solution for one of the most common user interactions: sharing content with friends and colleagues.

How do I know if I need Core-js as a dependency?

Andreas B. Vestergaard — Sat, 27 Jan 2024 20:40:34 +0000

I recently dove deep into all the different npm packages we are using on one of our projects, and I started wondering how to proper test if we really need core-js as a devDependency.

I am having a hard time figuring out how to test if we need it or not - and would love to hear from you 👌

Is core-js still relevant and are there good alternatives?

🦄

Use XCode Simulator for easy mobile testing

Andreas B. Vestergaard — Mon, 06 Mar 2023 10:23:06 +0000

Want to make sure your website looks good on iPhones without having an actual device? Apple's Xcode comes with a built-in simulator that makes this super easy. Here's how to use it to test your websites during development.

First, you'll need to download Xcode from the Mac App Store if you haven't already. It's free but pretty big (around 10GB), so be patient during installation. Once installed, open Xcode and go to "Xcode" menu → "Open Developer Tool" → "Simulator." You don't need to create an actual Xcode project - the Simulator can run independently.

When the Simulator launches, it will show a virtual iPhone on your screen. You can change which device it simulates by going to "File" → "Open Simulator" and selecting a different device like an iPad or a different iPhone model. Once your virtual device is up and running, just open Safari on it and type in your website address. You'll see exactly how your site looks and functions on that device!

Want to test different orientations? Just use "Command + Left Arrow" to rotate to landscape mode or "Command + Right Arrow" to go back to portrait. You can also test gestures like pinch-to-zoom right on your Mac using your trackpad or mouse. This makes it super easy to spot any layout issues before your users do.

Don't have your iPhone with you but still want to test on a real device? No problem! You can actually connect your iPhone to your Mac with a USB cable and inspect your website that way. First, make sure your iPhone and Mac are connected. Then on your iPhone, open Safari and navigate to your website. On your Mac, open Safari, go to the "Develop" menu (if you don't see it, enable it in Safari preferences under Advanced), find your iPhone's name, and select the page you want to inspect. Now you can see how your site performs on an actual device!

Testing on both the simulator and real devices is super important because sometimes things look different in the real world. The simulator is great for quick tests during development, while connecting a real iPhone gives you the most accurate picture of how users will experience your site. Either way, these tools make it much easier to create websites that work perfectly on mobile without the headache of constant deployments just to check small changes.