--- date: "2024-04-19T04:08:01-04:00" title: "Classic web badges" outputs: - html description: "My curation of over 70 88x31 badges, representing what I and this site use and stand for." image: "b/sticker_352x124.png" --- My collection of over 80 88x31 badges, representing what I and this site use and stand for. If you have a badge you'd like me to add, just ask; it needs to have a format under 3 kb and avoid excessively flashy animations for me to consider it. [See some tools I use for image optimization]({{}}). ## My badge Use this to link to me! {{}} Note that this image's URL is cache-busted. It will change any time I alter my badge, and is **not** hotlink-friendly. If you wish to hotlink, use one of these URLs: - `https://seirdy.one/sticker_88x31.png` - `https://seirdy.one/sticker_88x31.gif` {{}}{{}} Template markup to embed my 88x31 badge. {{}} ```figure Square icon of a colon and semicolon, next to the word “Seirdy”. ``` {{}} ### Suggestions for embedding my badge - Use `image-rendering: pixelated;` in your CSS for most 88x31 badges, so upscaling filters don't ruin pixel art. - Double the width and height in your HTML to `width="176" height="62"` to make them easier to read on higher-resolution screens. - The more consecutive badges you have, the shorter your average alt-text should be. Balance the need for detail against the need to skim. - If you want to detect my button programmatically, consider the [`.well-known/button.json` schema](https://codeberg.org/LunarEclipse/well-known-button). ## About this site ### Site design standards Read more about the design of this site in my [site design standards page]({{}}). {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} }}">{{}} {{}} ### Software that seirdy.one runs on {{}} {{}} {{}} {{}} {{}} {{}} ### Other info about this site {{}} {{}} {{}} {{}} {{}} {{}} {{}} ### Notes on "About this site" badges The W3C Valid HTML5 badge isn't offered by the new Nu HTML Checker because [HTML5 is about conformance, not validity](https://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/). I use it anyways because my markup does fully conform _and_ is well-formed polygot XHTML5, despite false-positives from validators; [see my conformance statement]({{}}). I build Nginx, Conduit, Webmentiond, and other software for seirdy.one using LLVM in a Chimera Linux container, due to LLVM's release-build-optimized sanitizers such as ControlFlowIntegrity. ## Ideological affinity, web-related {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} ### Notes on "Ideological affinity, Web-related" badges I included "Right to repair" in this section because I think that page-alteration (via adblockers, inspect-element, userstyles, etc.) counts as exercising one's right to (software) repair. Free software, accessibility, and Right to Repair are interlinked. I previously microblogged [in defense of content blocking from a right-to-repair perspective]({{}}). ## Ideological affinity, other I might eventually move these to a separate page under the "About" section of my site. {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} ## Things I use See [my "uses" page]({{}}) for some more information. {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} ## Friendly sites These are some people/websites I think are cool! I might eventually move these to a separate page under the "About" section of my site. ### Reciprocal Sites that link back to me: {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} ### Other personal sites {{}} {{}} {{}} {{}} {{}} {{}} {{}} {{}} ### Other sites {{}} {{}} {{}} {{}} {{}} ### Notes on "Friendly sites" badges The Yesterweb is winding down its social activity after admin burnout, but it remains an important place during the Old Web revival of the late-2010s to early-2020s. I'm keeping the badge even if the rest of the shuts down (though it'll probably stick around in archived form). ## Other {{}} {{}} {{}} {{}} ## Credits Many were sourced from [88x31db.com](https://88x31db.com/), which itself sources from other directories. The following badges come from the sites they link to: - Any browser you like - 100% hand-coded HTML - Atom and RSS validation badges - Web-14 censorship panda - AGPLv3 license - humans.txt - Say no to Web3 - Web Interoperability Pledge - Standards NOW! - Yellow ribbon - Autistic as fxxk - Defective by Design - Wiby.me - All "friendly sites" badges except xkcd (I don't know who made that) Other credits: - The W3C CSS badge is from {{}}{{}} by the W3C{{}} - I took the WAI-AA WCAG 2.2 badge from {{}}{{}} by the WAI{{}}. - I cropped the "I ❤ Validator" badge from {{}}{{}} by the W3C{{}}. - The El Goonish Shive badge is from [an old archived version of its website](https://web.archive.org/web/20071223104609/http://www.egscomics.com:80/banners.html). - Tildeverse badge made by {{}}. - Linux Now badge with Xenia the Linux Fox [made by Volt](https://meow.social/@voltbun/109600348286574222). - "Emulate Now!" badge from [Neon with a Zero on Tumblr](https://ne0nwithazero.tumblr.com/post/702936474323206144). - envs.net badge [by winter](https://winter.entities.org.uk/buttons/). ## Appendix Here's how I made my badge! {{}}{{}} Code to generate my 88x31 button using [my favicon.svg file](../../favicon.svg), ImageMagick, `rsvg-convert`, and `pngquant`. {{}} ```figure magick -background black -size 56x31 -fill white \ -gravity center -font "Iosevka-Term" -pointsize 16 'label:Seirdy' \ tmp.png rsvg-convert favicon.svg -aw 31 \ | convert - tmp.png +append -background white -splice 1x0+31+0 \ -shave 1x1 -bordercolor white -border 1 - \ | pngquant -s 1 28 - >sticker_88x31.png rm tmp.png ``` {{}} After generating it, I compressed it as much as possible using [Efficient-Compression-Tool](https://github.com/fhanau/Efficient-Compression-Tool).