Today I Learned | Kybercode

Cooper Gidge on Aug 3, 2025.

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

Result

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

CSS Today I Learned Web Dev

Cooper Gidge on May 28, 2025.

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

Result

HTML Today I Learned Web Dev

Cooper Gidge on May 4, 2025.

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.

Embeds Today I Learned

Cooper Gidge on Dec 14, 2024.

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.

Efficiency Today I Learned

Cooper Gidge on Nov 26, 2024.

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?