DEV Community: Tibor Udvari

Flexbox Wrap Border Collapse Effect

Tibor Udvari — Thu, 20 Feb 2025 23:21:40 +0000

I had to create a layout similar to what the border-collapse property does for tables in Tailwind but for elements in a flex-wrap. My first instinct was to try borders with some negative margin wizardry, but that didn't work since there is no way of knowing which elements wrapped without Javascript.

Conceptually, I needed a line centered on the edge of a container, with half of its width on the inside and the other half extending outwards to overlap with the neighboring containers—a fancy way of saying a centered border if there were one.

As a Tailwind user, I tried the ring utility, but I could not find a way to have an outside and an inset ring simultaneously. Luckily, this is only a Tailwind limitation: there can be an arbitrary number of box-shadows on an element.

There's even a handy box-shadow editor over at MDN.

Given this knowledge, the solution was a piece of cake: combine an inset and outset box-shadow to have everything stack up nicely, and add extra spacing inside the parent container to compensate for the outset width.

<div class="flex flex-wrap m-[1px]">
  <div class="[box-shadow:0_0_0_1px_black,inset_0_0_0_1px_black]">Box 1</div>
  <div class="[box-shadow:0_0_0_1px_black,inset_0_0_0_1px_black]">Box 2</div>
  <div class="[box-shadow:0_0_0_1px_black,inset_0_0_0_1px_black]">Box 3</div>
</div>

References

How to work with Storybook and Astro Image

Tibor Udvari — Sun, 16 Feb 2025 21:52:22 +0000

If you're wondering how to use Astro components in Storybook, the short answer is you can't. Astro renders its components on the server side, making it impossible to load them into Storybook. Maybe the Astro Container API will make this easier in the future 🤞, but right now, it's not even close to the DX of Storybook.

That being said, if you're like me, you're probably only interested in the Astro Image component for all those groovy optimizations, so it makes sense to conjure up a ~~sneaky workaround~~ clever workflow.

The idea is to make a mock client-side image component that we pass in the Storybook context, then switch it out for the real thing later with Astro. Named slots will allow us to do this.

Here's a simple demo of a Figure component with an image and a caption in Preact.

// src/components/Figure.tsx 
export default function Figure({ image, caption }) {
  return (
    <div class="flex flex-col">
      {image}
      <span>{caption}</span>
    </div>
  );
}

Because of serialization, args don't work in Storybook with this approach, so do this instead:

// src/components/Figure.stories.tsx
import Figure from "./Figure";
import PreactImage as Image from "./PreactImage";

export default {
  component: Figure,
};

const image = (
  <PreactImage
    src="https://cdn.shopify.com/static/sample-images/bath.jpeg"
    width={800}
    height={600}
    alt="A lovely bath"
  />
);

export const Default = {
  render: () => <Figure image={image} />,
};

Finally, swap it out with an Astro Image in the regular project. Notice the named image slot.

// pages/index.astro for example
---
import Figure from "../components/Figure";
import { Image } from "astro:assets";
---
<Figure >
  <Image
    slot="image"
    src="https://cdn.shopify.com/static/sample-images/bath.jpeg"
    width={800}
    height={600}
    alt="A lovely bath"
  />
</Figure>

Now you've got a Storybook that closely resembles the Astro build.

Oculus Web Launch Bookmarklet

Tibor Udvari — Sat, 06 Apr 2024 18:14:24 +0000

I want a convenient way to send links from your desktop browser to the Meta Quest Oculus Browser. Initially, I couldn't find a better solution than sending links to myself via WhatsApp and then opening them on the headset. This process could be improved.

Luckily, there is a better way for Meta Quest headsets, called the
Web Launch feature. This feature lets you directly open or bookmark a link on your Quest. To use it, you must be logged in to your Oculus account on both devices, and the links need to be https.

While Meta suggests a unique button for every app, a generic send-to-headset button for any website would be better. A bookmarklet is an ideal use case for this feature. For those unfamiliar, bookmarklets are like bookmarks that allow JavaScript execution on the current page instead of redirecting to another page. They're like lightweight browser extensions.

Drag the button from this page to use it.

Here is the code that it contains, passed through Bookmarklet Maker.

function sendLinkToQuest (linkUrl) {
  let sendToQuestUrl = new URL("https://oculus.com/open_url/");
  sendToQuestUrl.searchParams.set("url", linkUrl);
  if (window.location.protocol !== "https:"){
    alert("Must be an https page");
  }
  window.open(sendToQuestUrl, "_blank");
}

sendLinkToQuest(window.location.href);