Codes Index

If you’re, for whatever reason, deeply curious, or want access to these in a more succinct form, consider visiting Clarity Anne’s Code Pen, where you’ll find most of these in action.

This is an index of all coding snippets (and related phenomena) currently present on this website, followed by a brief description of their effects and possible usages. They are, by and large, suitable for static sites such as those hosted on neocities, but will function on any other web host as well.

You can feel absolutely completely free to copy what you want of this, and indeed, you needn’t even link back to me. If you’d like to, feel free, of course, but it isn’t necessary in the slightest. Crib all you want, dearies.

Keep in mind that these are the creations of a beginner, and, as such, may not function entirely as they ought. I may be able to troubleshoot some of them if you contact me, but I can’t /won’t help solve general CSS/HTML questions, though.

Some rather interesting codes and bits are located (or will be located) in the section on site preparation. These are bits that concern the page's organization and fundamental structure, as well as file organization, and almost all of them aren't uploaded yet. You can check back later, though.

Functionality

  • Eclipsing Table of Contents explains in some detail how to create a site table of contents that unfolds on command, either wholly or in part, and also has a built-in feature to allow you to mark items as incomplete. I need to make some updates to this page.
  • Clickthrough Snippet Display allows the visitor to rotate content within a box (div) by clicking a button. This is cute and allows you to, for example, display a clickable list of your favorite songs, videos, or facts about yourself on your about page.
  • Discord Webhook Form explains how I modified the usual Discord webhook form that gets used on neocities a bit to add a rudimentary checking system, requiring the user to fill out all fields, use at least a real-seeming email address, etc...
  • Preparing HTML for Display isn't a code, exactly - it's a form that will help you prepare your own HTML to be displayed on a website without actually executing. I find it useful for my own work, so I created it and added it to this site. Unsure if anyone else will use it.
  • Adding Escape Strings for JavaScript is another form. It transmutes regular HTML into JavaScript-friendly HTML (to be inserted into JavaScript, that is) by adding escape strings where necessary. Useful if you're keeping a static sidebar or somesuch using JavaScript, as described here.
  • Label Everything explains why you should label sections within your website's code. This allows you to easily find them again. You can also use ASCII art to add a bit of fun and aesthetics, even to your source code. Useful even if you're using linkware.
  • Displaying Last.fm Recent Songs is possible if you generate an API key and use some Javascripts. I've included several variations on it here, both vanilla and styled, and a version that lists your most recent several songs rather than just one.

Aesthetics

  • Fun Page Transitions Too many animations can be a bad thing, but it's often nice for your site to roll, fade, or burst onto your user's screen, depending on your vibe. This shows you my attempts to do just that in various ways.
  • Sprucing Up YouTube Players Like it or not, YouTube dominates the online video-sharing sphere. Embedded YouTube videos themselves, especially on sites like neocities, can look a little... odd, though. Here is one slapdash measure to fix that.
  • Styling Long Quotations On many of my own sites, I end up quoting long passages of text from other sources. This is true for a lot of research-heavy sites. If you find yourself doing this, here's one way of styling those quotations. I try to explain how to customize as best I can.
  • Simply Short Pullquotes Pullquotes are short quotations taken directly from your own content, but pulled out from it and given emphasis using large fonts and different styling. Here is one way of doing that. Can also work for general short quotations with some minor alteration.
  • Adding Fancified Footnotes Few sites these days, aside from perhaps academic ones, use footnotes. This is a pity because they can sometimes be useful. They can be a little tricky to set up, though, so I've written a bit about how I, myself, did it. Maybe it will help someone else.
  • An Aesthetic Button Wall explains how to create a wall of 88x31 buttons with site titles and descriptions using a table - much better than a disorganized wall! It also has an optional JavaScript function that randomizes the table rows, to allow each button an equal chance of being seen!
  • Figuring Out Figures focuses on figures! This oft-ignored HTML feature can be very useful when displaying illustrations on your site which aren't part of your layout, nor simple cruft, adding a source, and caption, sizing, floating, and more.
  • Styling Chatlogs will show a haphazard method of doing just that, using HTML and CSS. While nowadays, most people "spill tea" with screenshots, back in the day, we'd often just copy and paste chatlogs, particularly from roleplaying games. Useful for many (non-dramatic) purposes, actually.
  • Tweaking Neocities Displays gives you a short charm that works only within neocities itself, but will allow you some customization for how your site is displayed within the feed on neocities. Do not abuse this power.
↑