Magic Kit

In the following, I have gathered most of the tools that make up my kit (in the widest sense of the word), accompanied by short notes to give a better idea of their use. They are loosely categorized, starting with resources I regularly use; situational resources are listed further down. Note that these are just my tools — equal, better or more recent alternatives exist that may work better for you.

I highly recommend checking out the respective websites for more information and feature overviews. Unless otherwise stated, all tools are freeware.

Last update: 27 November 2022

Backbone

• Teacake — Web hosting service by Yuuka, perfect for hobby sites, with reliable, caring support over the years. ❤ Leprd by Lysianthus is also a recommended host who operates in the same sphere.
• Porkbun — Domain registrar. Attractive and transparent pricing plus free unlimited Whois privacy. (Due to the TLD, oubliette.nu is registered at NuNames though.) Namecheap, my previous registrar, is also a reliable choice. Whatever you decide on for hosting and domains, do not use GoDaddy or any services belonging to Newfold Digital (formerly EIG).
• FileZilla — FTP client.
• Chronica — Blogging script by Yuuka, used for categorized updates.

Coding

• Brackets — Source code editor with focus on front end and web development. Created by Adobe, now community-owned. Features I use extensively include: live preview, quick edit, colour picker, split view, code completion by auto-suggestion, multi-line selection. Not all of these are exclusive to Brackets. Its main draws, however, are its live preview (i.e. you see your changes live, without prior saving and reloading), and quick edit (i.e. you can select any element in your HTML file to quickly display the corresponding CSS immediately underneath). Refer to the videos on the official site for a visual introduction. There are many themes to choose from; I use Star Platinum Dark.
• Markdown Web Dingus — Markdown to HTML web converter. I write my sites in plain text with Markdown in Scrivener (see below) and convert text to code once I’ve finished designing the layout.
• W3Schools — Web development portal. I frequent W3Schools all the time while coding, be it to refresh my knowledge of what the different values of CSS properties do so as to broaden my options, or to look up tutorials and the like. MDN Web Docs serves the same purpose.

Graphics

• Adobe Photoshop CS5 — Graphics editor. Not freeware.
• FontBase — Font manager. Rather than clogging up the system fonts folder and slowing down your computer and apps, a font manager allows you to save fonts in non-system folders, and to activate and deactivate fonts as needed. This means that I only ever activate (design) fonts when I’m using Photoshop; they don’t show up in, say, Microsoft Word, where I don’t want need them. What’s more, fonts can be sorted into many different folders/collections, and the same font can be placed into several folders/collections simultaneously. I have collections/folders for different font types (e.g. handwriting, serif, pixel fonts) as well as project-specific font batches as I try to make a selection. Google’s library can also be activated. You can also preview all fonts at a glance with a customized message and set size, colour and alignment, and there’s a preview feature for the font combination of page elements.
• Creative Market — Design marketplace. Listing this for completion, but obviously, the resources are not free. The site used to offer a new weekly batch of free resources, so I’ve accumulated a lot over the years. When browsing marketplaces like this, keep an eye out for sales on packaged deals (this also goes for fonts), where you get many different resource sets with a big discount.
• Subtle Patterns — Pattern resource library. If this site ever goes down, I will probably perish.
• TinyPNG — Image compressor. I mostly use Photoshop’s save for web tool to reduce the file size of images, but have sometimes had more success with TinyPNG when it comes to transparent PNG files.

Writing and Planning

• Scrivener — Word processor and outliner. Very powerful and highly customizable writing app; the initial learning curve is steep, but it pays off especially in terms of writing flow. It lets you easily switch between different sections (even projects, if you’d like), display them in split view, organize all your notes and resources, keep track of your writing progress, and much more. Changed my life and massively increased my output. Not freeware, but you can test it for 30 days for free and the trial version only counts days on which you actually use it. The software can be installed on any device once purchased. There’s a discount for students, and there are regular sales during NaNoWriMo.
• Evernote — Note-taking app. Jotting down ideas, links, outlines. I use it out of habit, but there are most likely better options by now, whether it’s light-weight apps or something more complex like Notion. Be warned that Evernote only allows two devices to be synced in its free version.
• dict.cc — German-English dictionary. I mainly use German-English/English-German, so I can’t comment on the other languages available, but this is probably my most visited website on a daily basis and pretty much functions as my permanent plug-in brain. Sleek interface, and if you think bilingually, it’s a neat way to look for synonyms and related expressions by page-hopping. (It effectively helps me think. Example: Fumbling for a word in German or wondering how else to express something, I enter a related German expression, click on all the applicable English translations and get a list of German words for each term, which covers a wide range of nuances.)
• DeepL Translator — Neural machine translation service. Leading translation service based on Linguee data (which I also reference) with highly accurate translations even of complex sentences. It’s so powerful that German-speaking students use it to translate their botched German texts to English only to translate it back to German. Result: Gone are their spelling, grammar and punctuation mistakes, and it even polishes their writing style. Go figure. As with the above, its translations can thus inspire a different turn of phrase. Neat for research too. :v

Gallery Creation

• ShareX — Screenshot tool. My screenshot app of choice, which I used, for example, for taking screenshots of old video games on the computer. I also use it all the time while designing sites to spam my friends with WIP shots as I ask for input.
• PotPlayer — Multimedia player. My screenshot app of choice when it comes to videos. Also allows you to set bookmarks at specific timestamps. You know, for the times you have to retake the same scene multiple times because you messed up the frame setting.
• Easy Thumbnails — Thumbnail creation app.
• Rename Master — File rename app. Mass-renaming made easy. Always has me in awe.
• Fancybox — jQuery lightbox script. A way to display your gallery.
• Larissa’s Gallery Counter — Gallery code generator by Larissa. Unless you’re using PHP, this makes gallery-related codes significantly less of a chore. Can be used to generate other sequential code snippets.

Fonts

• Wordmark — Font web preview. Useful if you don’t use a font manager.
• Google Fonts — Allows you to call web fonts from Google’s big library, no CSS @font-face rules necessary. Comes with a customizable preview feature.
• DaFont — Probably one of the largest and oldest libraries around.
• 1001 Free Fonts
• abstract fonts
• Behance
• Fonts Arena
• FontSpace
• Font Squirrel

Code References

• W3C Markup Validation Service — Checks the validity of your code.
• What CSS to prefix? — Tells you which newer CSS properties to prefix so things behave as intended across different browsers.
• Can I use… Browser Support Tables — Tells you which CSS properties are supported by which browser and browser version.
• W3Schools CSS Selectors — If you’re not already familiar with these selectors, understanding these can significantly add to your arsenal while making your life easier. Learn to Code HTML & CSS provides a detailed rundown on them.
• CSS Specificity Calculator — Use as a companion to the link above when CSS doesn’t behave as you wish and you’re throwing a hissy fit.
• Listamatic — I go here for (navigation) inspiration or when I forget how lists work.
• HTML Entities — Comprehensive HTML symbol reference. Makes you extra special. ✯ ❄

Hacks

• Table Tag Generator — I use this so I don’t sob over tables. :v
• CSS3 Generator — Browser generator for a wide range of things.
• CSSmatic — Browser generator for gradient, border radius, noise texture and box shadow. Slightly outdated compared to the above since none of these CSS properties require prefixes anymore, but it’s handy to have all of these on one page (I prefer this one’s interface).
• CSS Gradient Generator
• Color Blender
• Border-Image Generator
• CSS Separator Generator
• Sprite Cow CSS Sprite Generator
• Image Map Generator

Articles, Tutorials etc.

To be added in the future.