An upsettingly tragic gothic/magical realist marriage horror clusterfuck of method acting and desperate astral metaphor on the ethics, dimensional logistics, and the destructive implications of "making an Ice Betty" on the sanctity of the timeline.
Dogsled is an amazing novella inspired by adventure time and the tragedy of Betty Grof, written by my friend @freezerprince.
I coded everything in the website from scratch (minus the MP3 player, which was only heavily edited), and even created some of the pixel graphics around the site. The site includes 3 playlists, illustrations, adjustable font size, and reading progress storage.
I created this website because i desperately wish for more people to read Dogsled, so please visit the site and leave a comment!!
How did you learn how code everything in the dogsled website from scratch? How did you design it? pls teach me ur ways /gen ask
To be completely upfront: 30% of my experience comes from a childhood interest in coding via scratch.mit.edu, 10% from one hs level beginner python class, 15% from one college level beginner c++ course, and the other 45% is from w3schools' free online webdev tutorials.
Classes aren't *necessary* bc a lot of beginner programming classes will focus on the mindset instead of actual coding practice, but I did learn quite a bit from my college course. Most of my actual knowledge came from w3schools's massive repository of tutorials & language documentation. Seriously, just start there. They have way more than just web languages too, its super useful for all types of programming. Decade old stackoverflow threads also helped when I got stuck on some stupid bug or couldn't find a solution to my Artistic Vision. Sadgrl's website may also be useful to beginners, and jsfiddle can come in handy if you need to test out some small scripts.
Self-congratulatory yapping that probably doesn't answer ur questions under the cut:
TLDR i taught myself everything except for the parts where i didn't. challenge urself with a project 4 tiers above ur skill level and burn out immediately, then work your way back up to it and surpass yourself. find at least one friend who is also autistic about programming and scream at them anytime you struggle writing basic scripts. profit.
To start from the beginning, my very first foray into web development (besides a few barebones & quickly abandoned personal sites) was this webshrine for PAFL. It was messy and ugly, so I rebuilt it from the ground up 3 months later. I used only two code snippets in this project: the counting-up timer on the front page, and the gallery's image pop-ups. The rest was all done from scratch as well, and the gallery especially served as a crucible to learn JS the hard way, since i had some very specific needs in mind (somehow navigating through 50+ images per page, each with a downscaled and upscaled version, AND keeping my unique filenames intact instead of naming each image 1.png 2.png 3.png etc). It took me a whole year after the initial redesign to get the galleries in order, and even after that I spent another year tweaking and rewriting their code just to improve performance & add more features (the left + right buttons were a particular nightmare). Technically the website is still unfinished, since I have been working on & off on a separate python script to make adding new images to the galleries easier.. JS is hands down the most frustrating part of web development sometimes, so do yourself a favor and don't make any fancy JS stuff the main feature of ur site until ur confident in ur overall programming skills. CSS is also annoying, but most problems are caused by not knowing how it interweaves with HTML. Flexboxes ARE your best friend, and also your enemy, but mostly your friend. Everything is easier if you plan out your site layout in advance:
you can find my real-time development log of paflshrine at this tag.
Dogsled was a refreshing break from paflshrine's outdated backend and neverending updates. The biggest changes with dogsled's development were the usage of Github to organize updates & branches, & the use of VScode for programming instead of the in-browser neocities editor. Using Github to push out updates all at once really helped with CSS, because I used to update the site any time I wanted to preview my code, and using separate CSS files would require me to refresh my cookies every time too. The learning curve is so worth it, please use VSC & Github, or at least just VSC if Github is too intimidating..
Since dogsled was a site FOR somebody else, I wanted all the code to be easy to read, edit, and revise, so I made sure most of my code was heavily commented, and I didn't shy away from organizing my JS and CSS into multiple files per use case. These were both skills I learned from the classes I took. When I built paflshrine my attitude was something like "who cares lol", so I had a shitton of inline js that was copy & pasted between dozens of files.. it SUCKED. Please don't be afraid of multiple files, it makes things so much easier to work with.
The snowflakes are probably one of the scripts I'm most proud of, and 100% what I'm bragging about when I mention the entire site being coded from scratch. When I looked up snowfall code snippets, every single one was so bulky and unnecessary that I took it upon myself & my pride to make one that used JS to generate a set number of snowflakes when the page loaded, instead of manually adding 50 elements to ur html by hand. Its kinda small but its just something I wouldn't have bothered with back when i first started programming.
Importing the chapter text separately was also HUGE for code readability. After the mess that was the paflshrine galleries, I really didn't want massive chunks of text interrupting my code, so my C++ file parsing assignments inspired me to designate each chapter's text to its own file and import them on page load. This was pretty technically challenging bc I hadn't worked with "promises" before and most online resources used a weird way of abbreviating JS code that I'm still not familiar with and was hard to understand.. but the relief when you find a solution is always worth the mental agony of programming lol.
Also, please leave comments in your code. It doesn't have to be anything super fancy, but the bare minimum will help you remember what you were working on when you inevitably forget about your project for 2 months and revisit it with all knowledge of programming suddenly evacuated from your brain.
Anyways, as a thank-you for reading all this, here are the concept doodles for dogsled's layout !!! most of the design was off the top of my head, and future changes & aesthetics were inspired by a multitude of other neocities sites, as well as feedback from dogsled's author.
+ early development screenshot for funsies
& a brief development log of dogsled can be found at this tag, though there's not much because most of my yapping was confined to Pony's direct messages.
i spent the past 5 hours wrestling this site layout into a beautiful ultra dynamic flexbox heaven. and i fixed the text so half of the novel isnt straight up missing anymore
next i will figure out how to store the e-readers progress in local cookies ..
also heres some important context for the index page ehe.. the intro text will eventually be more mysterious and foreboding . eventually
also ftr the writing isnt mine , click the hieroglyphics for a link to the author im collaborating with
