My maternity leave has ended! I was one year at home with my little one. But, it's really like they say: the days are long, but the years are short. Around six months ago, I wrote a blog post called Matrescence which resonated with a few people. Meanwhile, as I found some headspace to go back online, I found a few more posts written by other parents that resonated with me too.

Around the time I wrote that post, things were rough in a different way. Driven by the fear of losing myself, I forced myself to attend three conferences (as an attendee) when maybe I wasn't ready. I put so much pressure on myself and on "having it all". I wanted perfection in our society's imperfect and unfair world of motherhood. I would crumble when I didn't achieve perfection (I never did). Finally, around December, I admitted that I needed to pause. Mentally I wasn't okay, so I took myself to see a GP. While we're still bouncing back ideas on whether I have PPD or PMDD, I started medication.

The first weeks were again tough. The side effects were brutal, and it took a while to see a difference. But now, nearly six months later, I am thankful to my past self for taking action. While life wasn't easy (for example, my father passed away unexpectedly a couple of months ago), I coped much better than I would have six months ago. And, of course, while there are moments of sadness, I can finally find joy in many things. Of course, I still worry about milestones and everything that entails in growing a little human, but I don't start the waterworks and can sleep at night.

Besides medication, I also took a proper social media break. It helped that Twitter, my social media of choice to compare myself to others and then feel sad, somehow got even worse, and people started to migrate to other places. But I did delete the app from my phone. Eventually, I completely forgot to check it out. Away from the sight, away from the heart. I stopped checking other places where the tech community hung out and didn't work on my blog. I stopped. And it was the best thing I did.

More recently, I did get back to it and noticed a few things. My network is now much smaller and also more spread out. I suppose many people assumed that my lack of content meant goodbye, so I must admit that it was a bit sad seeing mutuals unfollowing me. It's okay, and I know it isn't personal, but my evil inner voice blames me for not being "out there". On the other hand, I did reconnect with people differently.

I'm happy and excited for this new chapter of my life. I'm so glad to have found peace and some happiness in slowing down. I'm sure some days I will have labrador energy, and I'm sure that other days it will look like I went missing again.

I asked on Twitter, Mastodon and Bluesky what I missed, and these were the replies. So if you were away for the last 12 months, here it goes!

• 100 Days Of More Or Less Modern CSS via Dana and Stu.
• CSS Variable Secrets via Matthias.
• Scaling CSS Layout Beyond Pixels via Matthias.
• A Complete Guide to CSS Cascade Layers via Matthias.
• Use the Right Container Query Syntax via Matthias.
• beyond tellerrand 2023 playlist via Calum.
• Rich Harris on frameworks, the web, and the edge via bersling.
• The Interactive Guide to Rendering in React via Nitin.
• Andy Bell's talk "be the browsers mentor, not it's micro-manager" via Grace and Gregory.

This post has a content note of pregnancy, birth & mention of previous loss. Visit the link directly if you're okay with reading it.

I wasn't entirely sure how to title this blog post as it isn't straightforward to describe it but here it goes. I should also preface that my knowledge of SVGs is quite high level so maybe someone who is may more experienced than me would have spotted this out easily but I feel like this warrants a post because it doesn't happen in all browsers and quirks are annoying to solve.

Recently, we had a very intricate SVG that wasn't rendering as expected in Safari. Chrome, Edge and Firefox seemed to be happy with it. This SVG was an illustration and its code was automatically generated by a design platform and it included a raster image.

The following isn't the actual SVG but a high level presentation of the structure of the SVG. I substituted some random values with the word value as they aren't particularly important to the goal or issue.

<svg width="600" height="300" viewBox="0 0 600 300">
  <defs>
    <pattern id="pattern-a" patternUnits="objectBoundingBox" x="value" width="100%" height="100%">
      <use href="#image-a" transform="scale(value)"/>
    </pattern>
    <image id="image-a" width="1223" height="2190" xlink:href="data:image/png;base64,VALUE">
  </defs>
  <path d="value value" fill="url(#pattern-a)" fill-rule="nonzero"/> 
  <!--Lots of paths from here on without any links to patterns in the fill attribute-->
</svg>

When opened in Safari, all the path would render as expected except the path that was requesting to be filled with a pattern. So visually, people could describe it as "half of the image doesn't appear". It took me a bit to understand what was the problem because the svg file was really long.

Long story short: either the pattern or the use wasn't finding #image-a in Safari which looks like it might be a scope issue.

I moved the image to be inside the pattern and it began to appear twice. Which made sense. So my solution was to delete the use and use the image directly inside the pattern.

<svg width="600" height="300" viewBox="0 0 600 300">
  <defs>
    <pattern id="pattern-a" patternUnits="objectBoundingBox" x="value" width="100%" height="100%">
      <image id="image-a" width="328" height="329" xlink:href="data:image/png;base64,VALUE">
    </pattern>
  </defs>
  <path d="value value" fill="url(#pattern-a)" fill-rule="nonzero"/> 
  <!--Lots of paths from here on without any links to patterns in the fill attribute-->
</svg>

The image ended up needing some adjustments to its width and height but this finally fixed it in all browsers.

Now I know.

Here are some of the things that have been collecting dust in my bookmarks since June. I missed a lot of things shared online since. I hope one day I can catch up. This really isn't my year when it comes to sharing bookmarks. Luckily, the world won't end because of it!

Bookmarks related to tech and web development

• A Guide To CSS Debugging by Stephanie Eckles.
• A Deep Dive Into object-fit And background-size In CSS by Ahmad Shadeed.
• Respecting Users’ Motion Preferences by Michelle Barker.
• Podcast accessibility.
• An incomplete list of skills senior engineers need, beyond coding by Camille Fournier.
• Does my site deserve recognition?
• The Double Exploitation of Deepfake Porn by Maggie MacDonald.
• Advice for my younger developer self by Sally Lait.
• A Complete Guide To Accessibility Tooling by Nic Chan.
• Open source, experimental, and tiny tools roundup.
• Nostalgia is bullshit
• GSAP 3 Cheat Sheet
• Stop building websites for iPhones by David Sommers.
• Improving Cumulative Layout Shift at Telegraph Media Group by Chris Boakes.
• Inspecting Sizes by Michelle Barker.
• How to Eliminate Render-Blocking Resources: a Deep Dive by Sia Karamalegos.
• Accessibility of the section element by Scott O'Hara.
• The State Of The Web by Jeremy Keith.
• An update on the accessibility of conditionally revealed questions
• What they don’t tell you when you translate your app by Eric W Bailey.
• Improving The Accessibility Of Your Markdown by Eric W Bailey.
• On Tech Management by Shelby Spees.
• Building a Pet Cam using a Raspberry Pi, Cloudflare Tunnels and Teams by Mohak Kataria.
• I didn’t know how to write about my sister’s death - so I had AI do it for me by Vauhini Vara.
• Quibbles With Social Share Imagery by Jim Nielsen.
• AI deepfakes of Anthony Bourdain’s voice are only a taste of what’s coming by Matt Pearce.

Other bookmarks

• The Burnout List by Frank Chimero.
• "transphobic hate has stolen the colours of the suffragettes to identify themselves"
• Why Can’t We Be Friends by Brendan Mackie.
• #UnsilenceTheConversation Content note: pregnancy loss
• Dr. Amy Cutler - films.

Test index page?xx