A mirror of my website's source code.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

WebP in blog post, button, frontpage marquee, styled inputs

I've updated the image in html-tag-ranking to use webp instead of PNG. The reason for such a change is that WebP is much smaller than PNG in most situations.

I've added a 88x31 button to my sidebar for people to link to my website.

A marquee has been added to the frontpage to show sites that I'm linking to using their provided button(or a custom one if they don't have one :P).

Inputs are now styled. This was for the button, as I'm using a readonly textarea element, so I just decided to also change the way the other inputs display (checkboxes, radios, etc.).

steve0greatness,
created on Wednesday, 22 May 2024, 01:29:39 (1716341379), received on Friday, 24 May 2024, 02:43:51 (1716518631)
Author identity: Steve0Greatness <steve0greatnessiscool@gmail.com>

1f8a65d90d99f26066d1ad0d66223190659f5a23

S0GBttn.xcf

blog-posts/html-tag-ranking.md

@@ -4,4 +4,4 @@ updated: 2024 Feb 21

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            I like HTML. I recently found a video of [Theo](t3.gg) ranking HTML tags with a tierlist, the video is available on YouTube([URL](https://youtu.be/EtYtYnhxeNc)), and the tierlist is on TierMaker([URL](https://tiermaker.com/create/html-elements-16095055)). Without further ado, here is how I ranked all\* HTML elements.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        <img src="/blog-files/HTML_tierlist.png" style="width: 97%; height: auto" alt="S: h1, html, ul, link, details, summary, form, title, kbd, a, main, p, b, head, body, img, meta, br, footer, label, input; A: track, blockquote, q, h2, h3, hr svg, tfoot, i, u, textarea, style, code, tbody, optgroup, th, tr, option, select, pre, datalist, s, nav, td, em, iframe, embed, video, dialog, button, mark, ol, noscript, table, article, header, col, field, figcaption, samp, thead, area, colgroup; B: sup, progress, sub, h4, cite, strong, strike, picture, audio, h5, source, h6, canvas, abbr, script, caption; C: figure, math, wbr, hgroup, section, div, small, center, span, template; D: data, object, slot, marquee" />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        <img src="/blog-files/HTML_tierlist.webp" style="width: 97%; height: auto" alt="S: h1, html, ul, link, details, summary, form, title, kbd, a, main, p, b, head, body, img, meta, br, footer, label, input; A: track, blockquote, q, h2, h3, hr svg, tfoot, i, u, textarea, style, code, tbody, optgroup, th, tr, option, select, pre, datalist, s, nav, td, em, iframe, embed, video, dialog, button, mark, ol, noscript, table, article, header, col, field, figcaption, samp, thead, area, colgroup; B: sup, progress, sub, h4, cite, strong, strike, picture, audio, h5, source, h6, canvas, abbr, script, caption; C: figure, math, wbr, hgroup, section, div, small, center, span, template; D: data, object, slot, marquee" />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/blog-files/HTML_tierlist.png

static/blog-files/HTML_tierlist.webp

static/button.webp

static/src/global.css

@@ -152,3 +152,59 @@ samp {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            	font-size: .85rem;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            	white-space: pre-wrap;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .button-hotlink {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            display: block;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            margin-top: 3px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        input,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        textarea {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            appearance: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            background-color: #000;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            color: #fff;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            border: 1px solid white;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        input[type=checkbox],
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        input[type=radio] {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            width: 1em;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            height: 1em;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        input[type=radio] {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            border-radius: 100%;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        input:is([type=radio], [type=checkbox]):checked {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            background-color: #f00;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .ticker-wrapper {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            overflow: hidden;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            display: block;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            width: 100%;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .ticker-wrapper .ticker {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            animation: infinite linear ticker 14s;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            white-space: nowrap;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            display: inline-block;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            min-width: 100%;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            box-sizing: content-box;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        .ticker-wrapper.pauseonhover:hover > * {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            animation-play-state: paused;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        @keyframes ticker {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            0% {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                transform: translateX(100%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            100% {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                transform: translateX(-100%);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

views/_layout.html

@@ -25,20 +25,57 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                <main>{% block content %}{% endblock %}</main>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                <footer>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                    <div class="footer-link-list-holder" role="group">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    <span aria-hidden="true" id="footer-label-site-details" class="footer-link-list-label">Site Meta</span>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    <span
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        aria-hidden="true"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        id="footer-label-site-details"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        class="footer-link-list-label"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    >Site Meta</span>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                        <ol class="footer-link-list" aria-labelledby="footer-label-site-details">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            <li><a href="/list/website-sources-mirrors.html">Source Code and Mirrors</a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            <li><a href="https://steve0greatness.github.io/extras">Extras</a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                        </ol>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                    </div>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                    <div class="footer-link-list-holder" role="group">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    <span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    <span
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        aria-hidden="true"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        id="footer-label-social-accounts"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        class="footer-link-list-label"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    >Social Accounts</span>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                        <ol class="footer-link-list" aria-labelledby="footer-label-social-accounts">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            <li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            <li><a href="https://youtube.com/@s0g">YouTube</a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                            <li><a href="/list/link-tree.html">More...</a></li>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                        </ol>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                    </div>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                <div class="footer-link-list-holder" role="group">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    <span
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        aria-hidden="true"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        id="footer-label-button"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        class="footer-link-list-label"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    >Button(hotlink it)</span>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    <div class="footer-link-list" aria-labelledby="footer-label-button">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    <a href="https://steve0greatness.nekoweb.org">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        <img
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                            src="/button.webp"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                            title="Steve0Greatness"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                            alt="Steve0Greatness"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                            width="88"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                            height="31"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                            style="image-rendering: pixelated"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    </a>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    <textarea class="button-hotlink" readonly="readonly"><a href="https://steve0greatness.nekoweb.org">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            <img
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                src="https://steve0greatness.nekoweb.org/button.webp"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                title="Steve0Greatness"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                alt="Steve0Greatness"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                width="88"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                height="31"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                style="image-rendering: pixelated"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        </a></textarea>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                </footer>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            </body>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

views/index.html

@@ -11,4 +11,18 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            <h1>Steve0Greatness</h1>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            <p>Hey there! I'm <i>Steve0Greatness</i>(<a href="/blog/name.html">About my username</a>). Welcome to my website!</p>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            <p>I'm a <i>human being</i> with an interest in full-stack web-dev. I'm also a proponent for <dfn id="floss"><abbr title="Free/Libre Open Source Software">FLOSS</abbr></dfn>. Despite this, I have a really bad hoarding problem, specifically for accounts on random websites I visit once every 5 years; because of this, I have a list of these: <a href="/list/link-tree.html">link tree</a>.</p>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        <h2 id="cool-people-projects">Cool People &amp; Projects!</h2>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        <div class="ticker-wrapper pauseonhover">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            <div class="ticker">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                <a href="https://tauon.dev/" target="_blank">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    <img
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        src="https://tauon.dev/images/88x31/lily.png"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        alt="lily"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        width="88"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        height="31"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                        style="image-rendering: pixelated"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                    />
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                                </a>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            {% endblock %}