There’s a Christmas song on YouTube that has a special place in my heart. I’ve been listening to it every holiday season since its release in 2011. Music has a way of taking us back to memories, and whenever I hear this song, I’m transported back in time. I used to take for granted that it would always be available to me on YouTube, but that all changed in Christmas 2021.
All of a sudden, the song was nowhere to be found.
Last week, I tinkered with developing a Shopify App. Shopify’s developer guides are… eh – a mixed bag. What I wanted to do just wouldn’t work. So, when I can’t find an answer in their guides and it’s also not easily googled, I turn to ChatGPT. I don’t often use ChatGPT for this kind of stuff – I still mostly use Google because it’s faster – but I’ve found that searching for Shopify’s subscription guides often leads to forum posts with no clear answers.
The issue with ChatGPT is that it can be so annoying. It’s like talking to that one coworker who never responds directly to your questions, trying to hide that they secretly have no idea what they’re doing. Just give me an answer, Chatty!
Today I learned that you can capture a screenshot with transparent background using Safari’s Web Inspector. That’s nice because Chrome’s Dev Tools can’t do it. It will always capture it with the background. Sometimes I just want to quickly paste an HTML element into Figma without recreating it. Now I have at least one reason to open Safari from time to time!
A few interesting things to mention:
If you zoom in, the screenshot is also more high res, which is nice.
If you select text, the text is also selected in the screenshot. Before you ask: the mouse is not included.
It only makes a screenshot of whatever is in the bounds of the selected element. If the element has a shadow, the shadow is not in the screenshot. You gotta add some spacing around it if you wanna include the shadow.
It also includes any absolute positioned child elements, even if they’re not in the bounds of the element. Which makes sense, you’re capturing the node, which also includes its children.
While the screenshot does not include the background, it does include elements that overlap the bounds of screenshot, even if they’re from a totally different node.
But it doesn’t include all overlapping elements? It’s a bit difficult to explain, let me demonstrate:
I played around with it, and when I remove the inline-block from my name, it is in the screenshot. Interesting, but not interesting enough to try to understand it because it’s likely the most useless knowledge out there.
In-ear earbuds are weird, aren’t they? You’ve got those small rubbery mushrooms that you shove into your ear canal to listen to music and you hope there’s no juicy ear gunk on them when you pull ‘em out.
I think some apps I use every day, like Spotify for Desktop or YouTube TV, are being way too careless with seemingly small UI changes. It starts to annoy me a lot, so I put together some examples of sloppy and irresponsible UI changes that I noticed in Spotify and YouTube TV to make you think twice before making such careless changes in your apps.
I’ve been a zsh user for a long time, though I’ve had a bit of a love-hate relationship with it. It’s cool once you get it configured, but there’s so much to configure, and from time to time things would just break or the shell would get annoyingly slow.
You can do the same with other GitHub resources—like commits, users, tags—if that’s useful to you. But I find the releases feed super handy. Sometimes I just wanna stay in the loop on certain software, like apps, frameworks, major libraries, services, databases.
