Shared by
Shared on
Jul 7, 2025
Archive
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;
}falseResult
For full transparency, ChatGPT helped a bit when coming up with the above solution.
Arrays in SQL, the SQL Way
Arrays in SQL feel needlessly complicated. The traditional way is to have a one-to-many relationship, aka create a whole new table for each array you create.
Netlify No Longer Has Overage Fees on the Free Plan
Netlify no longer has overage fees on the free plan—hooray! No more surprise $100,000 bills!
Shared by
Shared on
Jun 1, 2025
Serverless and Surprise Bills
I love serverless. Less time managing a server, more time coding my project. But the problem is there is a bad trend within the industry when it comes to setting budgets.
Author
Date
May 31, 2025
Maybe Don't Add That Feature
The more features you add, the harder it is to maintain a project. That was a point I tried to make, but I think this article explains it much better.
Shared by
Shared on
May 31, 2025
Super Easy Comments for Static Sites
Let's add comments to a static site, in a super easy way. No paid comment services or anything like that. I'm using Eleventy but this works with any static site generator. Like your blog posts, you can store your comments in your repo with this comment system.
Author
Date
May 29, 2025
Introducing...Comments!
Introducing what I will retroactively call Version 3 of Kybercode! This version adds comments, fixes our graph component, and minor site tweaks that needed to get done.
Author
Date
May 29, 2025
How to Make a Reusable Bar Chart Component for your Static Site
Instead of using an open source solution (like Chart.js) and adding yet another dependency to this site, I created my own reusable bar chart component for this static site!
Author
Date
May 29, 2025
Why I'm Close to Abandoning Cloud Computing
The one thing I hate more than spending money is spending an unknown amount of money. I want my monthly bills to be consistent. But cloud computing bills are inconsistent and depend entirely on usage.
Author
Date
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;
}falseResult
Previous
Next
Copyright © Kybercode