• 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

    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

    I keep forgetting, but the alt attribute of the <img> element is not just useful for users who are visually impaired. It is also useful when the image is not displayed in the browser for whatever reason. For example: the src attribute does not contain a valid path to an image.

  • Posted on

    John Mayer on how trying and not doing it well enough is a wonderful technique for being yourself:

    Failing to sound exactly like the person you want to sound like is a wonderful way to sound like yourself. So I’m not necessarily thinking this thing from scratch, going, Okay, I’m gonna, like, do Jerry-esque things, but I’m still gonna sound like me. No, it’s more like, I want to sound just like Jerry, and then the way I naturally, obviously don’t — that’s your personality. Music doesn’t let you lie. […] You try to sound like who you want to sound like, and you just will always end up sounding like you.

    I like this advice. It is an interesting take on the learning by copying method.

  • Posted on

    Just like a word document can be displayed in a word processing application, a web page is simply an HTML document that can be displayed in a web browser. The only difference is that a web page can embed a variety of different types of resources such as styles, fonts, images, scripts, and so on.

  • Posted on

    Ana Tudor wrote on Mastodon:

    Stupid #CSS question because I’m losing my mind here: why isn’t calc(.5*a) working? What am I missing? It doesn’t seem to be working in any browser.

    Ana is trying to use calc(.5 * a) as a part of the relative color syntax, presumably to create semi transparent outlines. But it is not working because calc(.5 * a) is an invalid property value. As Valtteri Laitinen replied, it should actually be alpha in there instead of a.

    .class {
      outline-color: rgb(from currentcolor r g b / calc(0.5 * a)); /* ❌ invalid */
      outline-color: rgb(
        from currentcolor r g b / calc(0.5 * alpha)
      ); /* ✅ valid */
    }

  • Posted on

    I was reading Manuel Matuzovic’s article on meta theme color and came across this snippet:

    index.html
    <style>
      :root {
        --theme: blue;
      }
    </style>
    <meta name="theme-color" content="var(--theme)" />

    I wish it was possible to access custom properties outside the <style> tag in the <head>. It would keep things DRY.

  • Posted on

    Today I learned, grid-auto-columns and grid-auto-rows size implicit tracks as well as any explicit tracks that are not explicitly sized by by grid-template-rows or grid-template-columns.

    Until now, I was under the impression that grid-auto-rows and grid-auto-columns size only implicit grid tracks.

  • Posted on

    Thanks to Kevin Powell, today I learned that the text-underline-offset property is named so because it only applies to underlines and not other text-decoration-line values like overline and line-through.

    <a href="https://example.com">Example</a>
    a {
      text-decoration-line: underline overline; /* We can set multiple line-decoration properties at once */
      text-underline-offset: 16px; /* Only impacts underline */
    }