• Posted on

    The f*** off contact page - Nic Chan

    This bit from Nic captures a dynamic I want to address upfront with clients, so they never treat me as just a pair of hands:

    Instead of seeing us as people who brought valuable knowledge and expertise to the project, they saw us as the hands that would execute their vision.

    Then there’s the this bit, which really resonated with me (because I’ve been there too and it sucks):

    While I personally believe in the value of good design, I also believe there are a lot of smoke-and-mirrors in the industry, and I hated the thought that I might have inadvertently contributed to it. Even if the client is happy, it didn’t meet my internal bar for a quality product worth sticking my name on, and I feel like I’ve let down both the client and the end-users.

    Nic mentions how they hope to avoid similar situations in the future by blogging:

    By blogging, I’m putting a body of work out there that communicates my values and ethos. While much of the details of my client work has to remain private, these posts can be public, and hopefully they can help me find people who resonate with what I have to offer. Or you know, just be bold enough to communicate ‘Fuck off’ to those who don’t!

  • Posted on

    How selector scoping works in element.querySelector() & element.querySelectorAll()

    I was reading the MDN docs for element.querySelector() and learnt something totally unexpected about selector scope when this method is called on an element.

    Let’s say I have the following HTML:

    <div>
      <p>This is a paragraph and it has a <span>span inside</span> it.</p>
    </div>
    

    <script>
      const baseElement = document.querySelector('p');
      // Note: We are querying relative to the <p> element, not the document
      const matchedSpan = baseElement.querySelector('div span');
      console.log(matchedSpan);
    </script>

    Once the above JavaScript is executed, what do you expect to happen?

    I expected it to log null to the console. My reasoning was simple: I am calling the method on baseElement (the <p> tag), and that paragraph clearly does not contain a <div> inside it.

    But here’s what actually gets logged to the console:

    Terminal window
    <span>span inside</span>

    This surprisingly returns the <span> from inside the <p>.

    Why does this happen? MDN explains it like this:

    […] selectors is first applied to the whole document, not the baseElement, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of baseElement.

    Note: element.querySelectorAll() also applies selector scoping in the same manner.

    If we want to restrict the selector to the element on which it is called then we should use the :scope pseudo-class.

    const scopedQuery = baseElement.querySelector(':scope div span');
    console.log(scopedQuery); // Returns null, as expected

    As mentioned in the MDN docs for :scope, this works because:

    When used within a DOM API call — such as querySelector(), querySelectorAll(), matches(), or Element.closest() — :scope matches the element on which the method was called.

  • Posted on

    I just watched Homebound, Neeraj Ghaywan’s second feature film. And it left me devastated.

    The film is based on Basharat Peer’s article ‘Taking Amrit Home’ (which has since been retitled ‘A Friendship, a Pandemic and a Death Beside the Highway’).

    I highly recommend this film. But if you can’t watch it for whatever reason you must read the article.

  • Posted on

    I’m a web designer-developer who has mostly designed and built marketing websites for small to medium-sized businesses. I started designing because my clients didn’t have a designer and expected me to handle everything. But I’ve always felt like an imposter. It’s not a nice feeling.

    I’m really determined to change that, which is why I just bought Scott Riley’s course, Mindful Design. Piccalilli is running a Black Friday sale on all their courses, including Mindful Design, and I can wholeheartedly recommend them.

  • Posted on

    HTML and Typescript.

    Mandy Michael uses a brilliant analogy to explain why developers must get to know the HTML elements available to them and use the appropriate one for their content.

    In TypeScript, we have the concept of an any type. When you assign a type of any it means the content can be anything. […] But if everything is typed as any then you lose the benefits of the language.

    This is the same with HTML. If you use the <div> everywhere, you aren’t making the most of language. Because of this it’s important that you actively choose what the right element is and don’t just use the default <div>.

    This reminded me of the following quote by Jen Simmons from their HTML course:

    HTML syntax itself is fairly simple. The trickier part is knowing which tags to use when.

    (Discovered via Jeremy Keith)

  • Posted on

    Safari drops support for the theme-color meta tag

    The <meta name="theme-color"> tag is no longer supported in Safari 26 on macOS and iOS.

    If a fixed or sticky element touches the top or bottom edge of the window, then and only then, Safari extends that element’s background color into the corresponding top or bottom bar. Otherwise, on iOS, the bars remain translucent and have no solid color background.

    As Wenson Hseih explained on WebKit Bugzilla:

    A solid background color extension (“top bar tint”) is only needed in cases where there’s a viewport-constrained (fixed or sticky) element near one of the edges of the viewport that borders an obscured content inset (such as the top toolbar on macOS, or compact tab bar on iOS), in order to avoid a gap above or below fixed elements in the page that would otherwise appear when scrolling. This color extension behavior is more critical on iPhone, where there’s a much “softer” blur effect underneath the browser UI (and so more of the page underneath is otherwise directly visible).

  • Posted on

    View transitions: Handling aspect ratio changes

    To be honest, I had a tough time understanding this article completely. But that is a me problem because I think I don’t have the right mental model for view transitions yet. Nevertheless, I’m sure this article will be super helpful someday in the future.

  • Posted on

    Enrique Peñalosa: Why buses represent democracy in action - YouTube

    Enrique Peñalosa on how to build cities that prioritise human beings over cars and guarantee a citizen’s right to safe mobility.

    In my opinion, the following bit at the start of the video certainly holds true for India:

    The great inequality in developing countries makes it difficult to see, for example, that in terms of transport, an advanced city is not one where even the poor use cars, but rather one where even the rich use public transport or bicycles.

  • Posted on

    Today I learned, :root (0-1-0) has a higher specificity than html (0-0-1).

    In hindsight, it’s obvious. :root is a CSS pseudo-class selector and, like most pseudo-class selectors, it has the same specificity as a class selector or an attribute selector.

  • Posted on

    Padel is to tennis what bowling with bumpers on is to bowling.

  • Posted on

    The Simple Algorithm That Ants Use to Build Bridges | Quanta Magazine

    To see how this unfolds, take the perspective of an ant on the march. When it comes to a gap in its path, it slows down. The rest of the colony, still barreling along at 12 centimeters per second, comes trampling over its back. At this point, two simple rules kick in.

    The first tells the ant that when it feels other ants walking on its back, it should freeze. “As long as someone walks over you, you stay put,” Garnier said.

    This same process repeats in the other ants: They step over the first ant, but — uh-oh — the gap is still there, so the next ant in line slows, gets trampled and freezes in place. In this way, the ants build a bridge long enough to span whatever gap is in front of them. The trailing ants in the colony then walk over it.

    (Discovered via kottke.org)

  • Posted on

    Astro RSS MDX

    I love Astro. But for the life of me, I couldn’t figure out how to render the entire post content in my RSS feeds correctly. This article by Donnie D’Amato has been a lifesaver in this regard.