Rob O'Leary

Blog

  1. 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! 👍

  2. 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.

  3. 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.

  4. 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?

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

    Svelte adoption guide: Overview, examples, and alternatives

    Let’s discuss Svelte’s history and key features, why you might choose it for your next project, and what sets it apart from other frameworks.

  6. An arrow from a server is inserting a box into a webpage that is displayed on a mobile screen.

    Third-party embeds: script embed vs iframe embed. Which should you choose?

    I will compare the 2 main methods of embedding third-party content in a website and outline some best practices.

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

    Improve text flow and balance with the CSS text-wrap property

    Discover how the recent CSS text-wrap values, balance and pretty, handle the tedious work of optimizing text layouts.

  8. The title card for the movie The Fall Guy. The title text is in a bold, yellow serif font. The letter 'A' has the counter (open area) filled in. In its place is a silhouette of a falling man.

    How to create a slick CSS animation from The Fall Guy

    The title sequence for The Fall Guy involves an animation of a man falling - a very literal depiction of the title! Let’s see how we can make it with CSS.

  9. A tablet has two hands hovering it with a measuring tape.

    Responsive video - How can we reduce the size of video content served?

    How can we reduce the size of video content served? How do you load the best fit video for a device - not too big, not too small?

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

    Dynamic CSS animations with the linear() easing function

    Implement more dynamic CSS animations with the linear() easing functions, and explore the role that other easing functions play in animations.