Bits

Use a zero-width, no-break space to make your external link icons wrap with the link text. Even if you use display: inline, the icon won't wrap on Safari (although it will on Chrome and other browsers, which is confusing).

<div>
    <p>Here is a paragraph with <a href="https://example.com/" class="external">a super amazing link</a>, no way!</p>
</div>

.external::after {
    /* Use this zero-width, no-break space */
    content: "\FEFF";
    /* Icon Credit: https://remixicon.com/icon/external-link-line */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(0,0,255)'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z'%3E%3C/path%3E%3C/svg%3E");
    background-position: center;
    background-size: cover;
    padding-right: 18px;
    white-space: nowrap;
    display: inline;
}
div {
    border: 2px solid #FF0000;
    padding: 10px; 
    width: 300px;
    resize: both;
    overflow: auto;
}

false

For full transparency, ChatGPT helped a bit when coming up with the above solution.

So overflow-wrap: break-word and CSS Grid don't work well together. But using minmax(0, 1fr) instead of just 1fr fixes it.

This defaults the min-width of the column to 0 instead of auto. For whatever reason, min-width: auto causes problems.

<div class="grid">
    <div><p>Without <code>minmax(0, 1fr)</code></p></div>
    <div><p>This div contains a very long word: someveryveryveryveryveryverylongword</p></div>
</div>
<div class="grid grid-2">
    <div><p>With <code>minmax(0, 1fr)</code></p></div>
    <div><p>This div contains a very long word: someveryveryveryveryveryverylongword</p></div>
</div>

.grid {
    display: grid;
    /* this doesn't work... */
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 400px;
    margin-bottom: 8px;
}
.grid div {
    /* overflow-wrap: break-word isn't working... */
    overflow-wrap: break-word;
    border: 3px dashed #FF0000;
}
.grid-2 {
    /* this DOES work... */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

false

What's the difference between readonly and disabled in form controls? I found myself asking this question when implementing a very specific feature.

I'm making a form to send data, but I also want to include some generic information that the user doesn't need to enter. So I added another <input> element and gave it a visually-hidden class. But then I was faced with a question...do I set it to disabled or readonly?

After consulting this thread, I settled on readonly because it appears that the value of disabled inputs won't be sent when the form is submitted.

Links with a different color underline are cool. I couldn't tell you why I like them. I just do.

Here is how I normally style my links for projects:

<p class="style-1">
    Here is a paragraph with <a>some great hanging underlines</a>. Here is <a>another link</a> for your linking pleasure.
</p>
<p class="style-2">
    Here is yet another paragraph with <a>some great links without hanging underlines</a>. Here is <a>another link</a> for your linking pleasure.
</p>

/* The link styles */
.style-1 a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #FF0000;
    text-underline-position: under;
}
.style-2 a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #FF0000;
}
/* Extra styles for the demo */
p {
    font-family: sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
}
a {
    cursor: pointer;
}
a:hover {
    color: #FF0000;
}

false

Though whether to use text-underline-position: under; is always up for debate.

I'm trying to avoid the word "just." Ever since reading this article, I've been making a conscious effort to avoid using the word. I think I've done a good job, but I'll admit there are times where it's just hard to avoid it. See what I did there?

If I believe the use of the word doesn't belittle the reader, I'll usually still use it. But pretty much any other time I'll avoid it.

Just trying to make the developer world a little more accessible through my small role. Was that an appropriate use of the word?

I keep seeing companies using AI for things that shouldn't need AI. It's pretty good when it comes to tasks that require some creativity, like writing poetry. But when it comes to anything formulaic, don't use AI.

Instead, use an algorithm. It is faster, more efficient, doesn't use any external API requests, doesn't require an OpenAI subscription, and uses virtually no power compared to AI.

Don't use AI because your corporate boss saw an article saying it's good. Try and explain to them that a traditional approach is better.

When using oEmbed on Discord, make sure you include your website domain in the discovery URL. In my <head> element, I specified my oEmbed support like:

<link type="application/json+oembed" href="/path/to/oembed.json">

But Discord (truth be told, they're all I checked) wasn't including it in their embeds until I changed it to:

<link type="application/json+oembed" href="https://www.example.com/path/to/oembed.json">

So maybe it's not a bad practice to include the site domain in all href attributes.

Today I learned that print statements cost more than you think. I had a program that needed to perform a calculation...100 million times. I, in my wisdom, had it print what it was doing...100 million times.

When I ran it with print statements, it took over an hour to complete. When I removed the print statements, it took seconds.

It turns out even tiny bits of inefficiency can add up. Who would've guessed?

Introducing...Bits! I said that I was considering this feature when I launched this site a few days ago, and now I've gotten around to adding it!

This post type will be for short, few-sentence bits of information that we learn, but nothing long enough to fit in an entire article.

Along with this change, we now have more RSS feeds! Now, you can choose the feeds you like best and not get bombarded with everything we post.