Arpit Agrawal Arpit Agrawal

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.

Cool Fonts I'd Love to Use

Here’s a small collection of fonts that I find incredibly cool and would love to use in future projects.

Alfa Slab One

I love the bold design of this font. Google has tagged it as a serif fat face. But it’s a slab serif font. It’s literally in the name.

An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C

A great resource to understand how to use the alt attribute in various situations.

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.

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.

While you’re fixing the fun stuff, fix the important stuff too - Piccalilli

Initially, I thought this was just an article on how to fix the janky hover state of a card component. But it also goes over the HTML markup for a typical card component in the context of semantics and accessibility.

Adactio: Journal—Mind set

Ah! Good old Jeremy Keith, insightful and funny.

If I really want to change someone’s mind, then I need to make the effort to first understand their mind. That’s going to be far more productive than declaring that my own mind is made up. After all, if I show no willingness to consider alternative viewpoints, why should they?

There’s an old saying that before criticising someone, you should walk a mile in their shoes. I’m going to try to put that into practice, and not for the two obvious reasons:

1. If we still disagree, now we’re a mile away from each other, and
2. I’ve got their shoes.

I just purchased Josh Comeau’s new course, Whimsical Animations. The course page itself has some delightful animations.

PS: I also discovered Gochi Hand, a cute handwritten font, on the course page.

Jimmy Kimmel & the FCC: Last Week Tonight with John Oliver (HBO) - YouTube

John Oliver on drawing the line:

Giving the bully your lunch money doesn’t make him go away. It just makes him come back hungrier each time.

How the web works, explained simply

What happens in between the user entering a web page address into a browser and the browser displaying the web page:

1. The browser requests the web page using HTTP from the web server it is stored on.
2. If the request is successful, the web server sends a response using HTTP back to the web browser containing the web page.
3. When that HTML file is received by the browser, it will start to parse it, and will probably find instructions to make more requests.
4. These might be resource requests for styles, fonts, images, scripts, and so on.
5. When all of the resources have been requested, the web browser parses and renders them as required, before displaying the result to the user.

Reference

How the web works: the basics

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.

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 */
}

I re-read Heydon Pickering’s post on the HTML article element in the middle of writing the markup for a new website.

Heydon’s writing is so sharp and funny. Unmistakably theirs. No one else writes quite like them, and I’m here for it.

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

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

Missed Connections - Jim Nielsen’s Blog

Jim Nielsen on the personal connections formed on the internet.

I fell in love with the web for this reason, this feeling of connection. You could search the world and find someone who saw what you see, felt what you feel, went through what you’re going through.

And how these connections are increasingly being lost when we prompt an impersonal LLM instead.

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 */
}