#it is fun to mess around with html
Explore tagged Tumblr posts
mossolantern · 2 years ago
Text
Tumblr media
hehe i learned how to add the sparkle mouse particle thing to one of my blogs
16 notes · View notes
subjectsix · 7 months ago
Text
KIP'S BIG POST OF THINGS TO MAKE THE INTERNET & TECHNOLOGY SUCK A LITTLE LESS
Tumblr media
Post last updated November 23, 2024. Will continue to update!
Here are my favorite things to use to navigate technology my own way:
A refurbished iPod loaded with Rockbox OS (Rockbox is free, iPods range in price. I linked the site I got mine from. Note that iPods get finicky about syncing and the kind of cord it has— it may still charge but might not recognize the device to sync. Getting an original Apple cord sometimes helps). Rockbox has ports for other MP3 players as well.
This Windows debloater program (there are viable alternatives out there, this one works for me). It has a powershell script that give you a little UI and buttons to press, which I appreciate, as I'm still a bit shy with tech.
Firefox with the following extensions: - Consent-O-Matic (set your responses to ALL privacy/cookie pop-ups in the extension, and it will answer all pop-ups for you. I can see reasons to not use it, but I appreciate it) - Facebook Container ("contains" Meta on Facebook and Instagram pages to keep it from tracking you or getting third party cookies, since Meta is fairly egregious about it) - Redirect Amp to HTML (AMP is designed for mobile phones, this forces pages to go to their HTML version) - A WebP/AVIF image converter - uBlock Origin and uBlacklist, with the AI blacklist loaded in to kill any generative AI results from appearing in search engines or anywhere.
Handbrake for ripping DVDs— I haven’t used this in awhile as I haven’t been making video edits. I used this back when I had a Mac OS
VLC Media Player (ol’ reliable)
Unsplash & Pexels for free-to-use images
A password manager (these often are paid. I use Dashlane. There are many options, feel free to search around and ask for recs!). There is a lot that goes into cybersecurity— find the option you feel is best for you.
Things I suggest:
Understanding Royalty Free and the Creative Commons licenses
Familiarity with boolean operators for searching
Investing in a backup drive and external drive
A few good USBs, including one that has a backup of your OS on it
Adapter cables
Avoiding Fandom “wikias” (as in the brand “Fandom”) and supporting other, fan-run or supported wikis. Consider contributing if its something you find yourself passionate or joyful about.
Finding Forums for the things you like, or creating your own*
Create an email specifically for ads/shopping— use it to receive all promotional emails to keep your inbox clean. Upkeep it.
Stop putting so much of your personal information online— be willing to separate your personal online identity from your “online identity”. You don’t owe people your name, location, pronouns, diagnoses, or any of that. It’s your choice, but be discerning in what you give and why. I recommend avoiding providing your phone number to sites as much as possible.
Be intentional
Ask questions
Talk to people
Remember that you can lurk all you want
Things that are fun to check out:
BBSes-- here's a portal to access them.
Neocities
*Forums-- find some to join, or maybe host your own? The system I was most familiar with was vbulletin.
MMM.page
Things that have worked well for me but might work for you, YMMV:
Limit your app usage time on your smartphone if you’re prone to going back to them— this is a tangible way to “practice mindfulness”, a term I find frustratingly vague ansjdbdj
Things I’m looking into:
The “Pi Hole”— a raspberry pi set up to block all ads on a specific internet connection
VPNs-- this is one that was recommended to me.
How to use computers (I mean it): Resources on how to understand your machine and what you’re doing, even if your skill and knowledge level is currently 0:
This section I'll come back an add to. I know that messing with computers can be intimidating, especially if you feel out of your depth. HTML and regedits and especially things like dualbooting or linux feel impossible. So I want to put things here that explain exactly how the internet and your computer functions, and how you can learn and work with that. Yippee!
848 notes · View notes
omeletcat · 6 months ago
Text
So i was talking to my friends about how sad it is that art and media is seen as content these days, and not as art. mostly just to consume adn then scroll past, and i was thinking hey wouldn't it be cool if people had their own little websites? people used to do this but now everything is done on big platforms. and i had this cool idea of a website that hosts little websites that you can customize and instead of having a feed, you'd share websites YOU like on your own website so people look around!!!!
and then my friend told me THIS ACTUALLY EXCISTS
ITS CALLED NEOCITIES
ITS A FREE WEBSITE, ITS OPEN SOURCE, NO ADS BECAUSE ITS 100% DONATION FUNDED AND ITS BEAUTIFULL
Tumblr media
ITS ALL I EVER WANTED, its a perfect space to set up all you're creative endevours and art! to make galleries or to just have your own website!!!
but some people do INSANELY cool things on here!! like
They made a beautifull and unique website thats fun to explore! just messing around clicking on stuff brings you to unique and interesting places!!!!
Tumblr media
it is perfection, look at how interesting it is!!!!! there is even more that i couldnt fit into 1 screenshot.
compare this to the boring websites you scroll on daily, wouldnt you much rather find and explore websites like these? i feel it would be much more rewarding to "explore" artists, then to scroll past them. you genuinely have to DO something to enjoy it and thats amazing.
the only thing that is holding Neocities back is the fact you have to know a bit of html and css to make a website BUT THATS SUPER EASY TO LEARN!!!!
SO GO NOW, MAKE YOUR OWN CUTE AND COOL AND INTERESTING WEBSITE PLEASE, LETS GO BACK TO A TIME WHERE WEBSITES LOOKED COOL AND INTERESTING
ALSO FOLLOW MY WEBSITE I ONLY JUST STARTED SO ITS SHIT BUT THATS THE BEAUTY OF IT
TO REPEAT ONE LAST TIME, A FREE, ADLESS, OPEN SOURCE, WEBSITE HOSTING PLATFORM, THAT LETS YOU MAKE AND HOST YOUR OWN WEBSITE FOR FREE, WITH A COOL AND UNIQUE COMMUNITY
137 notes · View notes
geoledgy · 4 months ago
Note
your oc website is SO SO SO SO INCREDIBLY COOL how the hell do you even start learning how to do this ?? if you learned how to do this by yourself online, are there any tutorials or resources you can share with us? was making this website free??
omg THANK YOU SO SOOOOOO MUCH!!! It makes me so happy to hear that folks like my little site. I code my site with Phoenix Code (for the live viewer and number dials) and I host my site on Neocities - it is all free. Phoenix can be used in browser or on desktop, but I like having it on desktop more for big projects in case my files get deleted. I use the browser version when I just want to test something quickly.
The 2 videos I use and can not recommend enough to anyone who asks me are this HTML tutorial and this CSS tutorial. They are simple and easy to understand, but I recommend watching it the first go, and then following along the next few watches until you get the flow of basic parts to a website, how they're organized, and what order they go in. At this point, I've memorized exactly where everything goes, and it is all thanks to these 2 videos.
If I am being honest, I learned how to code by myself, not quite even with online tutorials but just from being stupid and messing around myself (1, because I was a kid, and 2, because I didn't understand English very well to know what tutorials are saying.) I used to do html coding for Neopet pages when I was a kid with too much online time, first by just editing the default petpages and adding info and images, and then just doing trial and error with the html. I'll just try something and then if it doesn't turn out the way I want it, I try to find out why it didn't work and also get inspiration from other similar sites to figure out where things go or how they coded (with this nifty thing called right click > inspect page or right click > view page source). And BOOM, working webpage.
It was rudimentary, white blank background without any boxes or anything, you just scrolled down the page and sections were separated by a horizontal bar. OH and every text was centered! I had no idea how to make scrolling boxes or fancy assets, but damn I still had so much fun working on it every weekend. When you find authentic selfmade sites from the 90s and 2000s, most of them aren't super fancy either unlike what modern nostalgia makes you think. So I hope you don't feel discouraged if you begin making a website and feel it isn't "fancy", you're already doing a first big step which is making a webpage and learned your first set of html code!
It was over a decade later before I coded webpages with html again. I've gotten lazy and started relying on site builders, but nothing was quite as versatile as html. I wanted to try coding my own OC site again, so that was when I started working on OutKrop (the site I posted). Until I started coding again, I had literally no idea what CSS even is (and let me tell you, it's a game changer!)
Personally, I work best when I can do things hands on. I don't read through tutorials, I code first then go back and read through coding help sites like w3schools when I find myself stuck and unable to figure something out. Sometimes I grab existing codes and play around with them to see what changes and what I can do with it, cuz having visual context is what helps me a lot.
I can also share my process:
Once I gather up some ideas, I make a sketch, including what boxes (divs in css) should approximately go. It is very rough, but shows me exactly what I need to know.
Tumblr media
Next I load up my coding app (Phoenix Code in my case) and "sketch" the layout. Nothing fancy going on here, just putting things where they need to be, and fixing size of boxes and margins if needed. I give my boxes all a background color so I can easily see how big they are and where they are located.
Tumblr media
After some adjustments like moving stuff around and adding assets like backgrounds and images, and changing colors of the boxes, rounding off corners, etc., we get this!
Tumblr media
so recap + additional useful sites I use:
Coding app: Phoenix Code
Site hosted on: Neocities
Video tutorials: HTML and CSS
Sites for learning code: w3schools, also lissa explains is a great site that is written for kids to learn html so it's easy to understand. Finally, sadgrl has a lot of great resources for coding as well!
I recommend looking through these sites AFTER you tried taking a spin at coding - it doesn't have to be anything fancy just follow the HTML video tutorial I linked!
Thanks for the ask, and I hope this helps you and many others out there who are interested in building a site with html/css! Don't be afraid to get things "wrong" or have an "un-fancy" site. This is how you learn to code, and it'll become so easy once you get the hang of it.
Anyone is always more than welcome to reach out for coding help and advice :-]
58 notes · View notes
twst-drabbles · 3 months ago
Text
When I'm not writing,
I can usually be found going down a coding hole for some reason or another. The latest being with me going "I wonder if I can replicate the text box UI from twisted wonderland?"
Check it.
Tumblr media Tumblr media
And here's how it looks on mobile.
Tumblr media Tumblr media
Obviously not perfect but it was fun to do this via CSS. I'll think about adjusting the font size later, I just wanted to show off. And for anyone wondering what engine I used, I used the Tuesday JS Visual Novel Engine, just because it plays to my specific strengths. I love messing around with HTML, CSS and JavaScript.
44 notes · View notes
mrnnki · 4 months ago
Text
very few people are ever gonna actually see my blog page bc of the nature of tumblr but that will not stop me from going wild with my theme
*laughs in making an entire blog theme*
5 notes · View notes
rookschnapps · 2 months ago
Note
Previous anon here! I would love to read how you did it. Im suprised you managed to did it in Google Docs. I thought you used a program similar to InDesign or programs that are more suitable for graphic design ANYWAY i am also curious how many chapters you used. Was it seven? Did you stop there because the length was convinient or because a story arc ended there? I am not really good at identifying where an arc begins and stops. okay bcgjkkcj THANK YOU FOR YOUR TIME
YAYYY I LOVE TALKING ABOUT ARTS AND CRAFTS!!
gonna put this in main tags as well this time so:
Tumblr media
this is my bookbind of trod pt 1 :] by @bamsara which u can and SHOULD read here
ok so this first bit is how I made the pdf and then the next bit is how I turned it into signatures for binding. Then the last bit is splitting up chapters and stuff. If anyone has any advice or tips on what I could do differently (for free or v cheap haha) please let me know!! This is so fun I love learning and discussing and making things
first thing I did was grab a real book so I could take a look at where they put the title page, where they left the pages blank, etc
I then formatted the title and contents and stuff in docs by messing with font and position on the page (etc) until it was to my liking! THEN I realised I wanted an image on the very first page so I went back and put that in. I got to design it it was sooo fun
OH. I ALSO STUCK A SHAMURA QUOTE WHERE THE DEDICATION WOULD BE. HEHE
thennn I went and changed all the heading, title and normal text options for the doc so that they looked nice! I used times new roman size 16 :) but that might be a bit big for most people. I like bigger text
^^ that step was important so that when I started copy-pasting in the text it would all come out the right size automatically. also so that my chapter titles and notes pages looked consistent
next I downloaded trod from ao3 as a html file! I found it works better than pdf bc there aren’t any page breaks
I just copied and pasted trod in one chapter at a time and added in the notes and summary for every chapter where I wanted it and that worked pretty well for me
THEN SPELLCHECK. I didn’t want to do it automatically (docs had some horrible opinions sometimes. Also kept trying to erase bits of the writing style that made perfect sense and sound beautiful???) so I had to confirm every change which took a while but I think was worth it
lastly I added page numbers. They did not want to cooperate with me and I still do not understand the tiny fuckers, but I managed to get them in the middle of the page for book 2 so it looks less weird (hurrah). There’s a button for it
then I saved it as a pdf!
OK NEXT THING : SIGNATURES
this post is my bestest friend (link is to a tumblr post that was really helpful)
and this webpage is how I got a pdf of the signatures (it’s the same one linked in the post)
CHAPTERS:
yeah I split it into chunks of 7 chapters! Book 1 ends on the argument in the field bc a) it was getting wayyy too long and b) I want to lend it to my friends and that’s a delightful emotional cliffhanger. Book 2 (which is actually finished. I’ll try and post photos later today or something) ends after hekets release from purgatory which is I thiiiink another 7 chapters? Book 3 is gonna be a bit longer bc I want to do it up to the most recent chapter, which I was gonna leave out bc of length but then it came out and I went insane haha
OH in book 2 I did drop caps and title decoration which I designed in procreate and then imported into docs and moved around as imported photos. I’ll put a bunch of pictures at the end too
THANK U FOR ASKING!!! If there’s anything else u want to know then let me know!! :]
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
15 notes · View notes
soopiroth · 4 months ago
Text
Tumblr media
super tips with soup #5 - (solo, mostly) playtime!
Tumblr media
Hi everyone! Been a while. Here's a request from @ssunshinebabyy - playtime on your own! Here are lots of activities for regressing and playing on your own, and tips for them!
This one took me a long while after it was requested because to be honest, I don't know how to play on my own, especially not how most kiddos might. But that won't stop me, and play looks different for everyone! With that, let's get started!
Tumblr media
So... How Do I Play? Part 1: Prelude & Pretend
The truth is, it varies from person to person! But if you want to try a certain mode of play, my recommendation is practice. Despite being very imaginative and a storyteller myself, I struggle with pretend play because I'm playing on my own and usually don't have established characters to bounce off of! But I got myself to swing back into it by goofing around on a screenshare voice call with some friends where I streamed a dollhouse game and we picked characters to represent ourselves and we explored and messed around in there.
Since you're regressing, it's possible that your thought processes and the like aren't the exact same as in the past. You might find that making play more complex comes easier to you than making it up on the fly and simplistic. Try writing down parts of your world's stories if you wanna make up a plotline, or think of something you'd want to do and try to come up with how you could pretend it.
Part 2: Toys?
Continuing on, you don't necessarily need things made as toys to play with toys. It might make it easier to assign a personality to them if you're playing pretend, but you can also do plenty of other things with whatever you have on hand! Square erasers and containers can be used to build, a desk chair can be the driver's seat of your pretend car, and a blanket can be a cloak! It all comes down to creativity when you're figuring out how to make toys out of everyday objects.
Of course, there's also another way to play...
Tumblr media
Digital Games
If you're reading this, it's likely that your device that you're on right now can run games! Web browser games exist and so do downloadable games!
For Computers, Sites/Collections:
Flashpoint, a collection of flash games! You'll have to search around by tags or game names to find games suitable for your wants, but it's got just about anything you could want, even more current HTML games. Contains games for all ages, including adult games, so be careful if you want to avoid those.
Coolmathgames, a classic website!
ABCya, which has more educational games than Coolmath (ironically).
Homestar Runner, which has interactive cartoons and games, a whole deep dive's worth. I'm putting it here because I loved it when I was a kid. It built my humor, I swear.
Itch.io has plenty of free games, some of which can be played in browser without downloads, but it's a hosting platform, so it has plenty of other things, not just games, and not just stuff for kids either. Some of these are mobile games, too! Just not many.
JMKit essentially has digital dollhouses and playsets!
For Computers, Specific Games I'd Recommend:
Duck Life series. Raise a duck to race.
Papa's series by Flipline. Make food in a restaurant!
JMKit My Home Makeover. Design a house and play toys!
Any Nick Jr./Noggin, PBS Kids, Disney Jr./Playhouse Disney games on their sites or archived on Flashpoint!
For Mobile Devices, Specific Games:
Pokemon Playhouse, a game where you can play minigames and collect Pokemon. Entirely ad-free!
Cat Tower Nonograms. If you like puzzles and kittycats, this one's good! 2 difficulties available.
Toca World, another freeform dollhouse game like the JMKit ones.
Tumblr media
Play Through Tasks!
If all this choice is overwhelming you, what about doing what you need to do? Maybe you have chores or homework or something of the sort to do, and guess what? You can make these things fun!
I like to implement elements of roleplay into my chores, like having to fold my laundry to save the Clothes Kingdom! But that's not the only way to do it! You can listen to music and try to clean to a rhythm if you're tidying! You can turn homework into a challenge or quest!
Tumblr media
Guided Play and Dancing
There are plenty of videos online of guided play activities, especially "brain break" videos (ie. GoNoodle) and nursery rhymes. I found the Pokemon Kids TV channel to be really cute and it kinda does Cocomelon stuff to me, I swear... But in any case, it got me opening and closing my hands to their Open Them, Shut Them video.
If you're not the sort for those, what about something a little more grown-up? If you like Vocaloid, you can try dancing along to match the moves of a Project DIVA PV, for example! May I suggest PoPiPo? You can follow along to Just Dance videos, too, if that's more your speed!
Tumblr media
Storytime
Depending on your preference, you might want to be read to, read by yourself, or read to someone else! There are plenty of read-along videos on Youtube. Some are even of books that come with tapes, so if you find the book seperately, say, on Internet Archive, you can listen along! I recommend the Internet Archive for finding kids' books in general; they have scans aplenty for all age levels, from picture books to novels!
If you're picking out your own book and you want to make it more fun, why not play Teacher and read to your toys for storytime, or just read to one toy for their bedtime story? (I won't tell anyone if you fall asleep, too...)
Tumblr media
Freeform Play
Of course, these aren't the only ways to play, and neither is anything else! Everyone has their own ways of playing. Maybe drawing pictures or writing stories is how you play. Maybe you just play by holding things and chewing on them. Maybe you want to play by matching cards! You can play in so many ways, and as long as it's not meant to hurt anyone and it isn't dangerous, I say go for it!
If you want any specific tips for a type of play you want to go about, feel free to comment and ask for help! I'm happy to!
Tumblr media
That's All!
Phew! It's been ages since my last Super Tips, huh? I hope this one was a good time! Any questions, comments, or suggestions for the next one? Drop a comment or an ask, and I'd love to consider it!
Happy to be writing again!
Yours truly,
Jade/Soup/@soopiroth
14 notes · View notes
goobernormieomi · 4 months ago
Note
any tips for coding profiles on toyhouse? cause your profile is like WOAH and i’m envious 🫵
HAHA THANK YOUU!! but let me think
I have a bit of a rough idea on how to do basic HTML coding, but if you don't it can be pretty easy with the right resources
This has been an amazing directory for me to find any codes or guides on any specific coding idea I might have!
as well I do recommend looking at other F2U or P2U codes to work with and mess around with, as that is what I mostly do!!
always try to have a rough idea of what you want your characters to be represented by! Including colors, specific shapes, aesthetics, all those sorts of things!
Overall tbh just have fun, its always a progress to get the RIGHTTT mood for characters and tbh to me thats the fun part!
9 notes · View notes
winterrbluess · 1 month ago
Note
can u plz explain (im simple way) how to do gradient text like in your pin post because every time i try it NEVER works and I really don't understand 😭
i know there's like a site and you copy paste the code into it but every time I copy that onto tumblr, it NEVER works 😭 is there like another way to do it?
love your art btwww 🖤❤️
Hiiieeee!!
So I did it in the same way as the explanations that's already given on other blogs. It's definitely tricky at first. So I'll try to explain in detail(i really suck at that sorry🥲)
First you open the Tumblr web and go to your post. Copy the first part of the text (before you change the paras) you want to change. For me I'll choose Winterrbluess only.
Tumblr media Tumblr media
Then go to the settings option and then on the TEXT EDITOR option. Change the Rich Text menu to HTML. Here you'll see the codes of the text something like this.
Tumblr media
Then leaving that as it is. Open another tab and then the text gradient maker of your choice. I personally use this one. Paste the text you had copied earlier and change the colour gradient as you like before hitting generate gradient.
Tumblr media Tumblr media Tumblr media
Below the preview of the gradient changed you'll get the colour codes which you need to copy from there and return back to the post.
Then all you need to do is replace the sentence with the codes. For me I will choose the "winterrbluess" part and then paste the codes in its place.
Tumblr media Tumblr media
To check the changed gradient, go to the settings option again and change the text editor back from HTML to RICH TEXT and you'll get something like this.
Tumblr media
Then continue that with all the other parts you want to change. Just replace the sentences. Make sure to leave the "</p>" before and after sentences as it is. And you'll be all set to go!
Hope it made sense and i didn't confuse you even more. Once you get the gist it's really fun messing around😅😅
Also thank you I really appreciate it!!💓💓
5 notes · View notes
hauntinginprogress · 3 months ago
Text
neocities heracles trials: from a chaotic newbie
okay so i want to actually start posting here and i finally got it through my thick skull that this is LITERALLY A BLOG. i'm supposed to blog. so here's a blog post.
anyways, for context, i've been working on my neocities for a while now, recently started over to make things more original and more me. another thing to note is that i'm using VScode.
the issue here is that i have zero well not exactly zero but i lack any professional/academic background experience with making websites. the html isn't the issue (thankfully) but holy shit dude...css+javascript implementation . basic styling with css is no biggie, right? absolutely, however...may i introduce: smooth transitions + the absolutely tragic fact that the <marquee> tag is deprecated an accessibility issue.
so, my first goal day one was to recreate a marquee animation through css. so i tried to simply implement this incredibly useful bit of code into my site (in which if you're interested i totally think my failure to get it working was user error so please check it out it works great if you're not me) but, lo and behold, despite me getting it to work in my V1 project, i could not, for the life of me, get it to work. so i, not too familiar with css animation and completely lost when it comes to javascript, started grasping at straws. i ended up finding this tutorial and, with some improvisation since the tutorial is for webflow and i'm manually writing everything, managed to make my own css recreation of a marquee effect essentially from scratch, and even learned about the animation-play-state css attribute so i could pause the effect when the marquee is hovered over! victory, basically.
Tumblr media
then, i looked around the many cool and absolutely awesome sites on neocities to get inspiration, and then i was like "hey what if i made a custom button background image" and with some trial and error, made myself a pretty decent base (for now) with aseprite, and learned more about the program in the meantime which is always a plus.
then i decided that i wanted to do more with the buttons. i wanted to make it animate on hover. not too hard right? you'll...you'll see why i struggled...in a moment...
anyways, i settled on a simple shrink animation. which THIS i could do with ease, messed around a bit, got the keyframes, assigned that to the button:hover and all of that and all was good!...until i realized that once i stopped hovering over it, it snapped back to its original scale instead of transitioning smoothly again. THIS is where the "fun" began.
see, although i can wrap my head around things easily when it comes to css, i have to constantly look up what the proper syntax for everything is because otherwise i'll mess everything up. and through my research i had conducted (aka surfing through multiple blogs and reddit posts alongside other things on random forum websites) i had discovered the very neat transition attribute.
but we'll have to return to this because i have adhd, and i ended up getting distracted during this process. see, originally i had decided that the button would change it's visual to appear like it was pressed when the user's mouse hovered over it. then i was like "i don't think this makes sense" so i changed it so that the button wouldn't change its background image unless the user actually clicked on it. so i did that. then i had to make sure that the button wouldn't magically scale up again so i had to transform the styling and blah blah blah those details aren't really that important ANYWAYS the actual important bit about this is that if you use the transition attribute and there's a change in background images that change will also be transitioned unless you set the transition to only apply to a specific change. and i didn't know that originally. so every time i tried to fix things up with a transition so the button wouldn't snap back to it's original size out of nowhere the background would slooowly change as well and i actually got so frustrated with this that i wanted to burn something down because that's a totally normal reaction i guess. anyways, then i started frantically searching for answers on the topic and EVERY. SINGLE. THING. THAT I FOUND. INCLUDED JAVASCRIPT.
i do not know javascript. i have not learned anything about it unlike css and html. it SCARES me and it is FRUSTRATING. but i thought i'd try it anyways. news flash that shit didn't work at all and i almost thought about scrapping the animation entirely especially when it randomly stopped working when i made certain changes, but i ended up eventually figuring out what i mentioned earlier (CSS transitions and the fact that you can assign them to only affect a specific change instead of everything) so with some dabbling here and there i eventually managed to finally figure out how to make everything smooth through pure css and although it still snaps if the element hasn't finished animating i'm happy with it.
Tumblr media
moving on to another thing, i wanted to then make a sound effect play when you click the button. yes, we are still talking about buttons. THIS i could not do with css, like, at all. javascript admittedly is for interactivity and i had already been bending the rules quite a bit with the animations since those teechnically should've been done with javascript as well but this? this was impossible without javascript. so i found a free mp3, and searched up a nice little tutorial on the very basics of javascript.
little did I know that apparently, this would be my own personal little hell.
see, no matter how many times i tried a different script, the sound just would not work like at all. i'd do everything in what i assumed to be the correct way, and no matter what, it would not play. knowing that i'd just have to revisit this, i decided it was best to just sort of put it on the back burner.
and this is where i wish i could say this is the end of my absolutely gobstopping rant. however, i cannot.
see, one thing that i really like that i've seen in a lot of other people's sites is draggable windows. i think they're sick. but this ALSO requires javascript, but i didn't think this could POSSIBLY be that bad since so many people did it.
...right?.......right? guys. right?
MOTHERFUCKER I WAS SO WRONG.
see, it turns out that a lot of people do this sort of thing with jQuery, specifically for user interfaces. but vscode doesn't have a "user friendly" way to get jquery to work with it. and because i don't want to mess with program files, i decided that logically speaking jquery just makes writing things in js scripts less complicated and doesn't introduce things that are impossible in vanilla javascript so i decided i could suffer a little bit and try and do things without jquery.
this led me to looking at many sites with draggable windows to look at their own scripts, in which every single time i tried replicating things i FAILED.
i eventually stumbled upon a nice code that worked. but the issue with it - in which unfortunately i can't find it, else i'd link it - is that it works with not only element classes but also a specific ID. see, this would be fine if i only wanted ONE draggable element. but i want multiple. and i thought that maybe if i just duplicated the script and dedicated it to a different ID and changed function names it would work but nooo life cannot be this easy apparently. so after setting up my webmaster status window, getting that to work, i tried doing the aforementioned method for what will eventually be a guestbook of sorts. it failed.
so i decided, "hey i'll revisit this later!!" and i went on to finding a way to implement a status widget into my site. this honestly was really easy as i ended up stumbling upon status.cafe . so i registered, eventually got my account activated, and i got it working in my live port of vscode just fine!! all is good in the world.
well that's what i thought until i found out that since i had created my neocities account in march of 2024, and i'm unemployed since i'm still in high school hence i have a free account, that i could not. use the widget. in neocities. so i tried finding a work around, found this handy guide (which is genuinely useful by the way) and set up things through a RSS feed instead which is essentially just a work around that complies with the security restrictions of neocities that i'm bound by. anyways, this works great but i literally just can't customize it to how i want so this is another fail. then i find imood.com which, although is NICE, doesn't suit what i want on its own. so i'm at a loss here too.
so, again, another thing to put to the side i suppose.
Tumblr media
so i started working on getting my guestbook, browsed through people's homepages again, and found chattable . and you probably think i have another paragraph complaining about this but honestly i can't write about something when i can't figure out how to even create a chat to implement onto my site in the first place so...y'know.
plus, i honestly have no clue if it'll work on my site either due to security restrictions so this is fun!!
anyways, after dealing with all of this, i finally decided it was about time i ported what i had so far over onto my neocities account. which isn't actually that hard i just had to wipe all of my files, overwrite the content in my index.html file there and paste in what i have now, and then upload my new files. but for some god awful reason after i went through all of this chrome just. kept depending on my old stylesheet??? so i had to clear some of my browsing data and eventually everything was loading properly for me.
and THIS is finally the end of my ridiculous documentation concering my neocities adventure so far.
i have no doubts i'll end up ranting here AGAIN about all of this but for now this is all i have on my plate...besides finally caving and learning javascript for real and continuing to learn more about html and css. hopefully one day i'll stop having such frequent issues but now is not the time and i doubt that'll be anytime soon either.
moral of the story, if you want to start something new and pick up a new hobby, please for the love of all that is of substance in this world don't go in completely blind like i've done if you're going to be making a project of some sorts. it will only lead to many misfortunes.
anyways you can see what i currently have done in my neocities here, make suggestions or give advice in the notes and whatnot i don't know.
6 notes · View notes
burning-academia-if · 1 year ago
Note
Hey, this isn’t related to the story but I was curious how you got started with twine? Your story inspired me and I want to learn the program so I can make my own. I wanted to see if you had any advice or reference points. Perfectly fine if not, much love regardless!
I've messed with Twine on and off for a while now, so I'm not sure when I actually got into it? It was probably when I originally got into IFs back in like 2015 lol
I use Twine Sugarcube specifically, and I pretty much just watched/read through these:
Twine or Treat: a youtube playlist where a guy shows you how to make a game. Focuses more on making an exploration/puzzle game in Twine, but still has some useful/relevant info
Introduction to Twine: another video playlist, although again, I really only watched what I needed
The Twine Grimoire: there's 3, with each one going through more complicated concepts each volume, includes Harlowe as well as Sugarcube
Sugarcube (and Harlowe) also have their own documentation, but it's so Long and Daunting that I honestly just ignored it when I first started LOL. It's obviously useful to have and reference, but I always need to watch people doing the thing first. I really struggle with just reading through things personally. I'm comfortable enough with Twine now that it isn't overwhelming though lol
Also I'd argue you really only need to learn how to set variables to get started with IFs. Once you know how passages work and how variables work, you're almost set to make an IF.
I'd also recommend learning the very basics HTML and CSS just in case. There's plenty of Twine templates available for free on itch.io, but if you want to adjust them in any way, it's helpful to know CSS/HTML. Also just have fun and mess around! From visual novels to this IF, my learning process has honestly just been 'fuck around and find out' and it's been useful so far! I also think it helps with the inherent anxiety of trying something new too
But yeah, hopefully some of this is helpful/useful to you!
28 notes · View notes
circle-bircle · 5 months ago
Text
i think i might try messing around with html on ao3! idk what I'll do, but... i think it would be fun
2 notes · View notes
juney-blues · 2 years ago
Text
god every time i toy around with some new shit for my comic i just internally go "wow you really can just make your own fucking website, it's really that easy"
anyway web templates are parasites you can literally make a neocities rn and toy around with it until you understand html, and then use those skills for whatever you want
hell actually you're on tumblr, you have a tumblr account
start messing with your blog theme, replace the background with this gif tiling forever.
Tumblr media
i'm not asking. go do it right now and see what else you can mess with and have fun with it
if you're a new user remember to go into your blog settings and turn this on
Tumblr media
25 notes · View notes
madwomansapologist · 5 months ago
Note
Hi!! Sorry if this is a weird question and u don’t have to answer it but how did u do the moodboard/visual media thingie on ur office gossip nanami fic? Do u have a tutorial/tips? You’re one of my favourite writers by the way ur nanami fics are so good 😘😘
omg thank you soooo! 🤍 it's not a weird question at all, and i hope i'm able of explaining everything! (@gothsuguru i'll tag you since you mentioned the layout, feel free to ignore!)
so a tip i'll give anyone before starting to edit is just to stop and visualize what you would like to do. this fic is an office au and the main character is a mess, so i just thought her home screen would be painful to look at and things evolved from there.
your best friend is pinterest, ibis paint, photopea and deviantart. you can use any other editors of course, go with what makes you more confortable, but i use photopea a lot for college and i personally think it's pretty easy for everyone to use + it's free.
on deviantart you will look for templates (as in: "playlist template", "instagram feed template", etc.), pngs, textures, all those things that will make the base of your edit.
pinterest you will go for both inspiration and what will give flavor to it. like i used a gallery template, and on my many pinterest board i chose what would fit it better.
on photopea/photoshop you will open the template you downloaded and play with it. you will add photos, text, etc. don't be afraid of making something wrong. all you need to do is ctrl+z and try again. if you're not familiar with it, explore, try to look at some tutorials on yt, have your fun.
then on ibis/color pallete sites you will find the color you want everything to be, use the hex code to edit, and give the final touches.
when it comes to the dividers, i make them on ibis. i just paint it with the two colors i want my gradient then change the pencil to the blur and... well, blur.
for you to get the perfect colors, i mostly just fuck around with rgb until i get the ones i like the most.
and the gradient texts i use those two sites: this one to copy the html code at the end and this one where i replace ; with blank space (literally put nothing on the second box and hit replace text then copy).
my tip is that you go on tumblr, create a post, change the configuration on the post to html, paste the code, save as a draft. then hit on edit to open the draft, copy the text already with the gradient, and add it to the post that it'll actually be on.
i say that because if you change the configuration to html it'll fuck whatever photos you had on it, so for me it's way more practical to have a draft where i just drop any gradient codes and simply copy it.
from the 12 posts on my draft at least five of them look like that:
Tumblr media
6 notes · View notes
theneighborhoodwatch · 2 years ago
Note
Hi! Gonna start off and say that I love the work you're doing with the Welcome Home neocities website! It's perfectly stylized for the project/puppet show and I can see the work you're putting into it.
I'd love to learn how to make my own neocities website (for fun? For a personal project??), so I was wondering if you could provide some tips and/or pointers for a first-timer.
Thank you!
HAHA well first of all i'm flattered that someone would think i'm skilled enough to be giving pointers in the first place. i still consider myself a novice when it comes to web design (for example, if you're wondering why every page on welcome to welcome home has its own CSS, it's because CSS is Way harder for me to wrap my head around than HTML) so i can't give any Super advanced tips, but i can at least write about what's helped me so far:
GUIDES. neocities has its own tutorial and list of HTML/CSS resources, but user-made guides are your best friend when it comes to figuring out where to go from there. a.n. lucas and pauli kohberger both have really good guides for beginners, but for the more advanced stuff, i found myself referencing the resources on solaria's webspace and sadgrl.online the most. w3schools is also very helpful when it comes to answering more specific questions like "how do i use two different fonts on the same page?" (and probably more.) if all else fails, then usually just googling "how to (x) in HTML" or "how to (x) in CSS" will yield at least one useful result. for making your website more accessible, there's the accessible net directory and this masterpost by foxpunk on tumblr.
it sounds obvious, but it helps to have a solid idea of what kind of site you want to build before you actually dive in, and then snoop around on neocities to get an idea of how other users approach the same topic. for example, i got the idea to start a welcome home wiki on neocities after being reminded of the 8:11 wiki on the same site, and then i spent a couple days just looking up stuff like "wiki" or "fansite" on neocities and then clicking on any page that caught my attention to study it.
layouts! there's no shame in using a premade one, and you can even learn more about HTML/CSS in real time just by messing around with the base code before implementing any intentional changes. sadgrl.online's layout builder is a VERY popular choice, since you can already do a lot with the basic options it offers and it's easy to further customize once you have it set up on your page; it's what i used to make welcome to welcome home. sadgrl.online's webmaster links also feature a bunch of other options under the "layouts" tag, and if none of those work for you, then you can even find something just by looking up template/templates/layout/layouts/HTML/CSS on neocities itself.
side note: if you're reading this and you want to make a wiki then you can also use this wikitable code. it came out after i had already established the Look of welcome to welcome home, so i probably won't implement it any time soon, but i TOTALLY WOULD HAVE if it was around when i first set the site up.
you can scale images up or down using percentage, with 100% being the image's default size. i don't know how helpful or acceptable that is, but i use it a lot.
don't feel pressured to get everything done at once, even if you expect people to be visiting your site frequently. usually if you just slap on an "under construction" gif or even just write "hey this site is still under construction" then people will understand. i don't think i've ever seen anyone get super huffy about slow updates on neocities, anyway.
EDIT: OH. GRAPHICS. i mention all of these on welcome to welcome home's front page but i Also wanted to note them here: betty's graphics and websets by lynn both have HUGE collections of background tiles and other graphics that work especially well if you're going for that old web charm. i also like to use this mirror of patterncooler for backgrounds bc of the customization options. you can also make your own background tile and then use a seamless tile maker like this if all else fails.
EDIT 2: ALSO. obviously. do not be like me and use discord or any other chat client as a filehost, no matter how promising it looks, because one day you WILL get a very nasty surprise when the request signature on those urls expire and the images are no longer accessible on other sites. there are a myriad of other filehosts out there, but personally i recommend file garden (and also donating to file garden if you can, even if only for a couple months. i know i said that just yesterday, but if it gets more folks to subscribe then i'm gonna keep saying it.)
20 notes · View notes