On this page, you'll find a semi-comprehensive list of the resources
that I utilize to develop this website. I have tried to categorize them
in a way that makes sense. Let me know if any of the links are ever
broken and I will get those fixed. This page is
under construction, as I have a lot more resources than this, but
I haven't quite gotten around to compiling them all. Check back later
for more!
▸ The graffiti font on the landing page is called
Felipe Segundo. I feel like most graffiti fonts are not very
good, but this one translated really well to the style of my site. You
can download it from
Woodcutter.
▸ The bitmap font used in the site headings and buttons is called
04b_03b and may be downloaded from
dafont.com. The
author is Yuji Oshimoto, whose
portfolio is incredibly iconic and
worth digging through. This font and its lookalikes were all over
forum signatures back in the 2000s!
▸ The font that you are reading is called
SH Pinscher Regular. Tinghao Hu authored this incredible font;
you may download it from their
1001Fonts
profile. My site would honestly be boring and ugly without this font.
It is just so well done and easy to read at small point sizes, which
is definitely not the case for TRUE bitmap fonts (especially the one
above). It even has some emojis and other special characters built in!
🙂
▸ I obtain most of the animated .gifs on the site from
Gifcities, which is a
filename-based .gif search engine provided by the
Internet Archive. You can scroll
this bad boy for hours and never run out of unhinged images to harvest
from other (usually long-dead) personal websites. I recommend clicking
the images in the search results; if you do, then you'll be taken to
an archival snapshot of the site where it found the image. It's also a
fun scroll to share with friends!
▸ The site background is concept art from Fallout: New Vegas that I
dithered using DitherIt, which is a
fantastic web-based dithering tool.
▸ Anything else you see is likely my own art that I drew on the wife's
iPad in Procreate. It's a fun little thing that really got me into
drawing for the first time in almost a decade.
▸ I utilize the free version of
Cbox for the chatroom that
is embedded into Salty's Lair. The free version is nice, but I wish
it'd let you change the CSS without paying for the service. I might
switch away from this eventually.
▸ The goofy animated Surf Club embeddable next to the chatbox
will take you to the Surf Club webring navigator (if you click the
outer"Warp Zone" ring) to see other member sites in the
Melonland Surf Club. If
you get bored of Salty's Lair, I would definitely check this out!
▸ I use Status.Cafe to embed my most recent update (that you
see at the bottom-left portion of the site) from my
site profile.
Cloud Convert 🔸
Font File Conversion
I use this site to convert .TTF and .OTF files to web-compatible .WOFF
and .WOFF2 files. I try not to use these gimmicky conversion websites
when I can avoid it, but sometimes it's worth saving the headache of
doing it yourself.
CodePen 🔸
Code Testing & Sharing
I occasionally use CodePen for testing out development ideas without
breaking my projects. This "social media-slash-web-development" site
allows you to edit and preview HTML, CSS, and JS all in one window
(and in real time), but with the added benefit that it doesn't make
your eyes bleed. It's also a good way to find new CSS tricks and
inspiration from other users!
EmojiCopy 🔸
Copying Emoticons to the Clipboard
I use this to copy-paste the emoticons you see all over my website
into my code editor. I use this site over the many "emoji selector"
copycats because they have a search engine that is actually
functional, which saves me a lot of time. Yes, modern emojis aren't
very 2000s but I love them and they're so fun! Plus, they look cool
with my glowy, scanline overlay.
⭐ Ezgif 🔸
The WebDev Swiss Army Knife ⭐
If I could only choose one "indie webdev" tool, it would be Ezgif.
This is the holy grail of image conversion and optimization web tools.
It translates between common image file types. It crops, compresses,
rotates, resizes, and optimizes .gifs. You can even MAKE a .gif out of
a stack of pictures, which is not the most straightforward thing to do
offline if you don't have a good handle on Photoshop/GIMP. It isn't
updated too frequently, but it already has a ton of features that work
REALLY well. What more can you ask for out of a free tool?
Fsymbols 🔸
Copying Glyphs/Symbols to the Clipboard
This serves a similar to EmojiCopy, but I use this one for ALT code
symbols and other non-emoji symbols. They also provide an "emoji copy"
feature but navigating it gives me a headache. You'll see what I mean.
Remove.bg 🔸
Image Background Removal
This site just removes plain backgrounds from an image. I have no idea
what they do with my data, and I probably don't want to know, but
that's the trade-off I suppose. It works pretty well, so I use it
(sparingly) when I am away from home and can't use GIMP or Photoshop.
I wouldn't recommend feeding your personal photos it, however. :)
GifRun 🔸
Convert Youtube Clips to .gifs
Downloading a Youtube video, editing it, and converting it into a .gif
is a pain in the ass and a big time suck no matter which way you look
at it. If you survived the Tumblr fandom wars of '14, then you have
probably cried over the .gif creation process. This site takes
whatever Youtube URL you feed into it and gives you a simple tool to
convert it into a .gif, albeit with a hideous and slightly confusing
UI. I've tried a couple of similar online services but they were much
more limited with their freemium features.
I work in IT, so I usually cut my teeth on new software and languages by reading the boring vendor documentation and one supplementary "fun" source. My apologies in advance to all my video tutorial watchers, but that stuff doesn't work for me most of the time! I learned all I know through the following sites and the occasional "Stack Overflow" search:
The Mozilla Developer Network documentation is THE webdev [insert religious text of choice here]. They are on the cutting edge of standards and their documentation is beautifully-written and concise. If you can make it through the technical reading, there is no better way to figure out the proper way to code a webpage.
This is the go-to website for most budding front-end developers from what I have gathered. Their tutorials are easy to navigate and understand, and they're taught in a pretty effective order. I think they're a bit behind on coding best practices, especially with some of their CSS methods, but the functionality is definitely there even if not always the most efficient way to do something.
VSCodium is an open-source binary version of Microsoft's ever-popular VSCode code editor. I have tried many other alternatives, but I always come back to this one. It really is powerful, to Microsoft's credit, but I will avoid their telemetry at all costs. I use the following extensions (and their corresponding publisher) in my install: