#coding tips

TUT FOR GRADIENT COLORS .ᐟ.ᐟ

i've been meaning to make this post for a while, i hope this helps all of you aspiring tumblr writers and bloggers for your aesthetic posts!

divider creds to @angeliicide

hey, so you know that annoying thing that happens when you're coding, and you need to run/test the same program 100 times in a row, so you end up typing "python3 testScriptWithASuperLongName.py" into the terminal about 80,000 times?

well, there's a better way! it's called aliasing :D

in your bash shell (or zsh, or whatever shell you use, but bash is the default on VSCode and most people on tumblr use VSCode, so I'm using bash as the default to explain this concept) you can set an alias, essentially a shortcut command, that runs longer commands.

(yes you can just use the up arrow key to re-run the same command, but sometimes you're typing other things into the terminal too and you don't feel like hitting the up arrow key four times in a row, and also this is just a cool and useful tip to get comfortable with aliasing so shhhh)

so, in your terminal shell, just type this:

alias run="python3 testScriptWithASuperLongName.py"

now, you can run that entire super long command, just by typing the word "run" into your terminal. Here's a screenshot of an example on my computer to make it make more sense:

in this example, i just created a simple python file that contains one line of code: print("it works!")

then, as you can see, by setting the alias to run, i can now run that file, runningatestscript.py, simply with the command 'run'.

the best part is, this alias is temporary - it only lasts as long as your shell session is open. so once you close the terminal, the run alias is cleared and you can set it again next time to any file or task you're currently working on, to save yourself a lot of typing, typos, and time.

so if you want to, you can get in the habit of always setting a run alias in the VSCode terminal for whichever file you're working with as soon as you get everything open. that way, when you need to run the same file 50 million times, you have a super easy way of doing it! you can even set it to a single letter if you want to go for maximum speed, but i prefer to use whole short words, because they're easy for me to remember.

note: if you do want to set an alias to work for all sessions, you can simply add it to your ./bashrc file. this is a common way to automate repeatable tasks, and simply to set easier-to-remember commands for terminal commands that are really complicated/confusing/hard to remember.

for example, i saved the alias checkboot="[ -d /sys/firmware/efi ] && echo 'UEFI mode' || 'BIOS mode'" into my zshrc file (zsh equivalent of bashrc file). this way, no matter how many times i rebooted my machine, i would always be able to quickly check which boot mode was running by simply typing 'checkboot'.

yesterday i was updating my boot mode from BIOS to UEFI on my very old machine that is technically compatible with UEFI, but not configured for it by default. So it was extremely helpful and saved me the time and headache of having to remember and type that long-ass command a thousand times in between many different reboots and new shells.

if you have any tasks like that, or terminal commands that you know would be useful to you, but you can never remember them when you need them, i highly recommend getting comfortable with aliasing! it can be super useful to simply set custom aliases for all the commands you don't want to remember, so that you can automate things away and not have to worry about so much linux syntax all the time when you're tring to focus on programming.

Ah okay! I use Twine Sugarcube to code, so this won't work for any other story format. You can easily add a background image to the UI bar by adding something like this in the stylesheet:

Here, the background-image is where I'll add the source for the background image I want to include in my UI bar. You'll need to figure out media queries because different screens will display the image differently depending on the size of the image you're using.

I cheated because I didn't want to go through learning about media queries and just used a huge background image (think desktop wallpaper size) and because it was an image that I didn't really care how it appeared on different screens, it worked out fine for me.

In this example, I'm using a local folder/location for my images because I didn't want to rely on an image hosting site to do that, you'll just have a folder within your game folder named images (or whatever you want it called) and that's where you will add your background image for your UI bar.

So if your images folder is called pics and your background image is called bg_image.png, you will add something like this within your stylesheet:

#ui-bar: { background-image: [img[pics/bg_image.png]] }

In my example, I've added a background colour as well, in case the image fails for whatever reason and I've also added other properties to style the way I wanted the image to look. You'll need to fiddle around with it a bit to see what works best for you, but there is a high chance if you're looking for a specific format for your picture, you're going to need to use media queries especially if the game is going to be played on different devices such as phones and desktops.

One valuable thing I have learned when starting any project is to include comments on your pages to provide a more structured layout.

For example, in HTML files, comments can be made with <!-- --->; anything within that space won’t appear on the page or be read by the browser.

A good way to use this in a page is to outline your areas, like in the image below.

Anywhere on your pages where you have a new section, you should use comments to outline what they are. This helps in a few ways. First, it increases readability for yourself and anyone else reading your code. Second, as your projects grow, doing this helps keep them organized. 

It’s easier to add to and edit when you can find the area where you want to make changes or add classes based on the comment tags rather than trying to narrow it down through many <div> tags. Third, it helps with remembering what you were doing.

The same principles apply to CSS files, although comments are left in a CSS file type with /*     */.

Heyy ~

It's just a stylised <<link>> macro. The icons are from Font Awesome (make sure you import the icons in your Javascript file) so you can directly use the icons in html on the StoryInterface passage or wherever your UI is. I'm using cerberus' template and I have a separate passage for the menu. You'd write it like this for example :

<<link '<i class="fa-solid fa-gear"></i>'>><<script>>UI.settings()<</script>><</link>>

You have to write your Html inside the single quote, inside the link macro. You can add multiple html tags and classes to style the links however you want in CSS. After closing the first <<link>>, you can write what script that button is supposed to trigger. You can use <<script>> for something like UI.settings() or UI.saves(). If you want, instead of a script, to have a link to another passage or a website, you can write it just like you would with a normal <<link>> :

<<link '<a href="https://gthiah-if.tumblr.com/" target="_blank"><i class="fa-brands fa-tumblr"></i>tumblr</a>'>><</link>> <<link '<i class="fa-solid fa-heart"></i>credits' 'credits'>><</link>>

It is time! My tutorial has been live since this morning but i have finally crawled out of bed for coffee and am now functioning.

once again i am just so proud and excited to show this tutorial to you. it is based off of just one function i have built in my personal tarot bot named grimalkin. if this tutorial is any fun to you, let me know and i’ll write more on the other commands grimalkin-bot has!

it'll look like this

and it should show up on your blog! (also, yes, that's my age/petre blog lmao it's agenpetre)

the only downside to this is that if you wanna quickly edit your bio you'll HAVE to go through the settings > edit blog > change bio because it'll default back to plain txt if you don't!