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?