Rob O'Leary

Blog

  1. The title card for the TV Series Arrested Development. The title is broken up on 2 lines. The first word is in red in lower case. The second word is in black and is in uppercase. The title is encircled by a red marked line.

    How to make a slick CSS animation from Arrested Development

    The title sequence of Arrested Development complements the kooky nature of the show well. Let’s see how we can recreate it in CSS.

  2. The Logrocket brand rocket icon sits in the center with an external link arrow beside itPublished on LogRocket

    How to implement view transitions in multi-page apps

    The View Transition API brings view transitions to all websites. 🤗 Not a framework in sight! Let’s explore using view transitions in a multi-page app (MPA).

  3. A person has an open book and is highlighting a passage of text with a marker. The page has a sticky post-it note for a reference.

    Hyperlinks have leveled up - link to a text snippet with text fragments

    Text fragments enable linking directly to a specific text snippet of any webpage. This is a significant improvement to cross-referencing on the web.

  4. A table top is covered with dollar bills and a calculator. This is a semi-transparent overlay of a rack of glowing servers. Omnious bills boi

    Actual free static website hosting

    Starter plans offer limited free hosting. Be careful with the conditions on the limits. Soft limits can led to an unexpected bill.

  5. The Logrocket brand rocket icon sits in the center with an external link arrow beside itPublished on LogRocket

    Styling HTML details and summary with modern CSS

    The styling possibilities of a disclosure widget, the dynamic duo of <details> and <summary>, is limited. Thankfully, this has changed for the better recently. I will run through the ways that you can style a disclosure widget with modern CSS.

  6. A grid of 6 demos are shown. Each demo has a preview image and a title.

    A glorious demo gallery

    I added a demo gallery to my website. A place to showcase some of my frontend adventures. Coupled with a dedicated RSS feed if you want to follow along!

  7. The word Sumptuous is in the centre of the frame. It has a pink stroke and white fill.

    Sumptuous stroked text in CSS

    You can create stroked text in CSS, but it is unwieldy. I submitted a proposal to Interop 2025 to improve this feature. Give it a vote! 👍

  8. A stairwell with a red and gold carpet is in the background. In the foreground a floating hand is a holding a book.

    Google is now an exclusive catalog

    Google was a comprehensive search engine. It has become an exclusive catalog.

  9. A simple bar chart is in the center of the frame. The eleventy possum is floating beside it on a balloon. It is cast againt a soft purple background.

    Eleventy - Zero JS charts

    It’d be cool to be able to sprinkle in some charts to your website easily. And without a lick of client-side JavaScript.

  10. A dark purple upgrade icon, a circle with an arrow pointing up, is in the center of the frame. The eleventy possum floating beside it on a balloon. It is cast againt a soft purple background.

    Eleventy - Is it time to upgrade to version 3?

    Version three of Eleventy has some exciting new features. It is now in beta pre-release. Is it time to upgrade?