snippets

[JS] Click button to copy

For those who prefer the simplicity of copy-to-clipboard over textarea. This is my personal edit of electric-tenshi's script, so credit goes to them.

function copyButton() {
	const siteURL = "https://your-site.org/";
	const siteName = "your-site";
	const buttonURL = "https://your-site.org/button.png";
    
    try{
        navigator.clipboard.writeText(`<a href="${siteURL}" target="_blank"><img src="${buttonURL}" alt="${siteName} button" title="${siteName}"></a>`);
        alert("Code copied! Thank you for linking my site!");
    } catch (err){
        alert("Failed to copy. Please try again!");
    }
}

The only change I make is to make a few constants so I don't have to edit anything inside writeText.

Copy multiple buttons

This is done by passing the button's image link from onClick function inside img to JS.

HTML

<img src="/assets/your-button.png" alt="[your-site] button" title="Click to copy my button!"

onclick="copyButton('https://your-site.org/button.png')">

For multiple buttons, just insert different button URL inside copyButton() for each img.

JavaScript

function copyButton(buttonURL) {
	const siteURL = "https://your-site.org/";
	const siteName = "your-site";
    
    try{
        navigator.clipboard.writeText(`<a href="${siteURL}" target="_blank"><img src="${buttonURL}" alt="${siteName} button" title="${siteName}"></a>`);
        alert("Code copied! Thank you for linking my site!");
    } catch (err){
        alert("Failed to copy. Please try again!");
    }
}

[CSS] Inline description/definition list

Make dd appear next to dt.

It's full moon again,: crazy how time flies.
One might wonder,: if my path was in a right direction.

dt {
	display: inline;
	font-weight: bold;
}
	
dd {
	display: inline;
	margin-inline-start: 0;
}

dd::after {
	display: block;
	content: '';
}

[JS] Simple, no-iframe clock

A simple clock script that you can use in your site. Customisable with CSS and no more relying on third-party widgets!

Paste the code below in between <script> at the bottom of your HTML file or in a separate JavaScript file. Make sure to give id="time" to the HTML element of your choice, for example <p id="time"></p>

document.addEventListener("DOMContentLoaded", function getCurrentTime() {
    let currentTime = new Date().toLocaleTimeString(
        'en-GB', {
            hour: '2-digit',
            minute: '2-digit',
            timeZone: 'Europe/London',
            timeZoneName: 'short'
        }
    );
    document.getElementById('time').innerHTML =  currentTime;
    setTimeout(getCurrentTime, 1000);
});

Parameters

Locale: I use 'en-GB', but you can change it to your country's locale. Find the BCP-47 code of your country here.
Hour and Minute: Choose between '2-digit' or 'numeric'. I don't see any difference so far.
timeZone: Accepts TZ identifier code. Find your timezone here.
timeZoneName: 'short' if you want an abbreviated name, like GMT/BST. 'long' if you want the complete localised name, like Western Indonesia Time. Other values can be found here.

Notes

Can only target one element. If you give two elements with both id="time", the clock will appear in neither of them.
If you want to display two clocks in different timezones, duplicate the script and change the variables inside document.getElementById() and the parameters to your liking. Let me know if there's an easier way to do this.
Remove setTimeout(getCurrentTime, 1000); if you experience performance issues. This makes the time only update upon refresh.

Credits

W3Schools, vkash8574 on Geeks4Geeks.

[CSS] Bratify your text

Brat generator begone! Now you can have your own brat text for your site.

brat

.brat {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    transform: scale(1, 3);
    margin: 0;
    line-height: 0.8rem;
}

blurry brat

.blurry-brat {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    transform: scale(1, 3);
    margin: 0;
    line-height: 0.8rem;
    filter: blur(0.3px);
}

mirrored brat

.mirrored-brat{
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    transform: scale(-1, 3);
    margin: 0;
    line-height: 0.8rem;
}

If you plan on making a long text, I suggest the text to be wrapped inside a container since the styling messes up the line height. It might also look messy when using bigger font size.

[HTML] Back to Top + Smooth Scrolling

A link that takes you back to the top, preferably placed at the end of a long blog post, long web page, etc.

<a href="#top">back to top</a>

Add id="top" to the topmost element of your website, like <div class="header" id="top"> or <header id="top">.

[01/09/2026 Update] 7vtia let me know of a much simpler way to achieve this. Instead of using #top, we can simply use do this:

<a href="#">back to top</a>

The only difference is to omit the top, leaving only #. This achieves the same outcome, except leaving it to only # is intended to scroll back to the top by default. Thank you, Saif!

Smooth scrolling

html {
  scroll-behavior: smooth;
}

Instead of immediately taking you to the top, scroll-behavior: smooth; will smoothen the animation.

Code Snippets

Copy multiple buttons

HTML

JavaScript

Smooth scrolling