#me and html need to talk

[eclipsellium]

my first 24 hour hackathon!

NEVER AGAIN in my life am I building a website from scratch 😭 it’s torture. if only my dumb self knew that frameworks existed…

[teaboot]

Social anxiety level: Chatting with someone experiencing a schizophrenic episode and becoming increasingly self-concious of how I'm just saying "That sounds really stressful", "I've never heard of that but it sounds scary", and "You must be pretty worried about that" over and over again

[sim-jaeyuns]

okay im gonna update about me and stuff on here i think, maybe this is my sign to come back here and post gifs again

[orcelito]

Oh yeah yesterday I went to my C programming professor's office hours to ask about what's being covered in class tomorrow. Since I can't go bc of my PT appointment overlapping with it & I'm apparently the kind of student that cares about attending every single class now.

While I was there, I ended up chatting with him about a few things, including my current standing in the class. He asked what I got on the midterm exam, & I answered it was an 87, and he told me I was one of the top 5 or 6 scores in the Whole Class (this being a like. Maybe 70 or so person class). Top score was a 92 or 93 (idr lol) & the class average was a 72. Apparently there were a few of us in the upper 80s/lower 90s, but most people got 70s or lower. And once he does the curve on the exam, he said I'd probably end up with a 97 or so on the exam. So yay!!!

And then he told me how he's noticed how I come to class every day and am really active with taking notes and answering questions. Bc I also sit up front all the time lmao. Hadn't even realized how much of a damned teacher's pet I've been being, but I've been Trying to be a good student this year. But he said I was the type of student that if I got an 88% or smth in the class, he'd likely bump me up to a 90% so I'd get an A lol. But he also said so long as I keep up with how I have been, I could possibly get a 100% in the class by the end (bc I've been there for all the extra credit questions in class and whatever).

And just. I went there bc I wanted to make sure I didn't miss anything important in class on Wednesday, and I ended up having my ego stroked for Real. Felt good to have my efforts be recognized.

[krillrot]

all these coding classes lately remind me that i gotta work on my website sooner or later...

[millenniumringg]

I see you’re working on a “Cornered” sequel! Will this sequel be following the official good ending or Bakura’s “good” ending?

(Also totally not me asking that if it’s a continuation of Bakura’s ending to include something like this

Ryou: Wha-, why are you here Hid-no, Bakura?!

Bakura: *gesturing at self with knife* I’m here to fight to save our marriage, something you *gestures at Ryou* seem all too willing to forget!)

Indeed I am >:] but Cornered 2 (title pending) is going to be following the official Cornered ending… We’re going to get a closer look Malik and Ryou as well as one new character I will not name drop just yet >:]

Since you asked I will share a snippet of something that will be in Cornered 2. No context. Because I’m evil mwahahahahaha (ok maybe one context: “Asim” is TKB. that was the name I chose for him <333 “Asim Bakari” … Please read into the name he is so important to me and to cornered 2 NDJSND)

Ok ok here’s the snippet

As for “Bakura’s good ending,” … that ending will probably never really “end” because I like adding on to it too much NXJSBDJS the ficlets in the “behind the scenes” (I have no idea why I called it that) are just ramblings that come to my mind and are just for fun and maximum pain EHHEEH but, of course, I will be posting more of those soon… just have to dig them out of my cornered archives, haha

[aro-aizawa]

OKAY blease i am at wits end can anyone help me w this

what i am looking for is a super basic app or tool whatever that tracks when a button was last pushed. that's it. i have recently fallen out of the swing of taking my medication. i work better taking it shortly after i've woken up, but with my spectacularly horrendous memory problems i do not remember if i've taken them already or not.

using a tally system faces the same problem of when i stare at my medication trying to remember if there's less than i remember or not.

using a notepad to write (for example) 11/08/23 10:34am every single time i take my meds is arduous and would not get done consistently meaning it become useless in tracking my last dose

however if it was as simple as loading up an app and pressing a button to log the time, it would go SO FAR in remembering when i last had my meds.

"but danni why don't you just set an alarm and take your meds then—" HI MY SLEEP SCHEDULE FLUXATES SO MUCH THIS IS USELESS. i will only ever be awake at certain times depending on if i'm mid nocturnal cycle or mid regular cycle. any other time is pot luck.

i am literally at a point where i'd commission someone who knows enough code to make this for me. it does not have to look pretty, just to function. if anyone can point me to either something like this that exists or knows someone i can commission from, pls tell me

[unproduciblesmackdown]

similar to the greentext stuff - i was visiting with my neighbors and their grandkids were around, and I said to this eight year old, "Hey, you wanna know something cool? I was playing the game when the Endermen came out." and his eyes went wide, like this kid looked like i told him i landed on the moon. His grandma thought it was really funny, and she said she has no idea what i'm talking about, but her grandbabies do, and that's incredible to her.

oh that's fun lmao, when minecraft & that update's existed for more than your whole life, and yknow being that young and like Next Year fr is this huge time scale away, a couple of years is a quarter of your life thus far and like maybe nigh half of the part of your life you actually have longterm memories for....i was checking out this dev's blog's archives about a:tdd's release in 2010 & in one entry they compared the implicitly Roughly concurrent release of Minecraft and i was like hey whoah. forever primarily being a game i've Heard Of more than any more direct exposure so i had no precise sense of [before minecraft release] [after minecraft release] Year 0 there but it's like for sure back in thee day when minecraft was a new thing, huh

[niennanir]

Listen to your elders

So last week I posted abut the importance of downloading your fic. And then three days later AO3 went down for 24 hours. No one was more weirded out by this than I was. But while y’all were acting like the library at Alexandria was on fire I was reading my download fic and editing chapter eight of Buck, Rogers, and the 21st Century. And also thinking about what I could do to be helpful when the crisis was actually over.

So first off, I’m going to repeat that if you’re going to bookmark a fic, you really need to also download the fic and back it up in a safe place. I just do it automatically now and it’s a good habit to get into.

But let’s talk about some other scenarios. Last October I lost power for over a week after hurricane Ian. Apart from not having internet or A/C I did find plenty to do, I collect books so I had plenty to read, but maybe, unlike me, your favorite comfort reads aren’t sitting on a bookshelf. So let’s do something about that, shall we?

In olden times many long years ago around 1995 we printed off a lot of fic. It was mostly SOP to print a fic you planned to reread and stick it in a three ring binder. And that’s totally valid today too, but you can also make a very nice paperback with a minimum amount of skill and materials.

Let’s start with the download; Go to Ao3 and select your fic, we’ll be working with one of mine. This method works best with one shots, long fic tends to need a more complicated approach. Get yourself an HTML download

Open up the HTML download and select all then copy paste into any word processor. Set the page to landscape and two columns, then change the font to something you find easy to read, this is your book, no judgement. This is all you have to do for layout but I like to play a little bit. I move all the meta, summary, notes to the end and pick out a fun font for the title: 

No time like the present to do a quick proofread. Congratulations, you’ve just created your first typeset. On to the fun part.

Now you’re going to need some materials:  8.5x11in paper ruler one sheet of 12x12 medium card stock (60-80lb) scissors pencil pen or fine tip marker sheet of wax paper white glue two binder clips 2 heavy books or 1 brick butter knife

You’ll also need a printer, if you’re in the US there is almost a 100% chance your local library has a printer you can use if you don’t have your own. None of these materials are expensive and you can literally use cheap copy paper and Elmers glue.

Print your text block, one page per side. Fold the first page in half so that the blank side is inside and the printed side out:

use the butter knife to crease the edge. Repeat on all the sheets. When you’ve finished, stack them up with the raw edge on the left and the folded edge on the right. I used standard copy paper, because you’re only printing on one side there’s no bleed to worry about. Take the text block and line everything up. Use the binder clips to hold the raw edge in place.

Wrap the text block in the wax paper so that the raw edge and binder clips are facing out. I’m going to use my home built book press but you don’t need one, a brick or a couple of books or anything else heavy will work fine.

Once the text block is anchored down, take off he binder clips and get out the glue.

You can use a brush but you don’t need one, smear some glue on that raw edge.

Go make a margarita, watch The Mandalorian, call your mother. Don’t come back for at least an hour

In an hour smear some more glue on there and shift your brick forward so that the whole book is covered. This keeps the paper from warping. While glue part 2 is drying we’ll do the cover. Get out your 12x12 cardstock

Mark the cardstock off at 8.5 inches and cut it. Measure in 5.5 inches from the left and put in a score line with the butter knife (the back edge not the sharp edge)

Carefully fold the score line, this is your front cover. You have some options for the cover title, you can use a cutting machine like a cricut if you have one, you can print out a title on the computer and use carbon paper to transfer the text to the cardstock. I was in a mood so I just freehanded that beoch. Pencil first then in pen.

Take your text block out from under your brick. Line it up against the score mark and mark the second score on the other side of the spine

Fold the score and glue the textblock into the cover at the spine. Once the glue dries up mark the back cover with the pencil and then trim the back cover to fit with your scissors.

Voila:

I’m going to put this baby on the shelf next to the Silmarillion.

The whole process, not counting drying time, took less than an hour.

If you want to make a book of a longer fic, I recommend Renegade Publishing, they have a ton of resources for fan-binders. 

[pitlanepeach]

The Long Way Home I Interlude

Oscar Piastri x Harper Grace (OFC)

Summary — When Harper, a kind girl with a guarded heart, meets rising karting star Oscar Piastri at their English boarding school, sparks fly.

It only takes one silly moment of teenaged love for their lives to change forever.

Warnings — Teenage love, growing up together, falling in love, teen pregnancy, no explicit scenes when the characters are underaged (obviously??), strong language, manipulative parents, past death of a parent, dyscalculia, hardly any angst, slice-of-life basically!

Notes — Tell a friend to tell a friend… she’s backkkkkk. P.S. We’ll pick up Oscar, Harper and baby Clem in the next chapter which will begin our F2 era (forgive me for skipping F3, but we will revisit that era in the future!)

Wattpad Link | Series Masterlist

They started to call it home before they even had the keys.

It was the kind of flat you only ever saw in a glossy magazine or on a Netflix teen drama — all clean lines and warm wood, soft lighting that dimmed with a voice command, floor-to-ceiling windows that turned the city skyline into wallpaper. Two bedrooms, two bathrooms, a concierge who knew them by name, underground parking, and a leafy park nearby with a duck pond.

It was somewhere in Zone 2 — close enough to the centre for Harper to feel like part of something, far enough out for Oscar to breathe. Within easy driving distance of Silverstone, and surrounded by three coffee shops that all knew Harper's name and her usual: an oat flat white, extra hot, one sugar. Coffee had become a staple since becoming a mum. It was either that or total collapse.

They signed the lease two weeks before Clem's second birthday. Moved in one week after. Harper carried the baby through the door on her hip, while Oscar fumbled with the keys and kept asking, "Are we really doing this?" as though the furniture wouldn't show up in four hours and make it permanent.

Oscar had taken a year out of racing after Clementine was born.

It wasn't a planned decision, and it wasn't one many people understood — least of all the people who'd watched him dominate junior karting and expected him to rise like smoke through the open-wheel ranks. But he'd missed too much school. Missed too many nights, too many hours of Harper crying or trying to make Clementine latch, or just needing someone to keep her upright. And when he was asked — really asked — Are you sure you're not throwing it all away? his answer was always simple.

"She's my baby. Of course I'm sure."

So while others trained and raced and pushed for attention, Oscar Piastri vanished. No interviews, no paddock appearances. Just him, and Harper, and a squishy pink newborn who made the ceiling light look like a disco every time she waved her hands.

They stayed at Haileybury, still just fifteen, turning sixteen. They re-sat their missed GCSEs and passed on the second try. Clementine learned to crawl in the boys' dorm common room. She took her first steps in the school library.

Their friends — Jane and Sam and Matt and Alfie and the rest of that oddball, fiercely loyal circle — became her first family. Clementine had more teenaged godparents than anyone could count. She learned to walk holding onto Oscar's physics notes. She learned to talk sitting in Harper's lap as she typed HTML.

Then came the offer — again. F3. A team ready to take him as soon as he was ready to return. It had been a quiet year in the eyes of the motorsport world — but Oscar came back different. Sharper. More grounded. And far more terrifying behind the wheel.

So they moved into the London flat. Nicole helped decorate — soft colours, baby gates, a kitchen with pale blue cabinets and an American fridge.

Mark handled the other side of Oscar's life. The logistics. Contract offers that just kept getting longer.

Clementine's nursery was a vision board of calm: birchwood cot, pastel cloud decals, a plush rug like walking on cake.

Harper coded the baby monitor app herself — it had the ability to learn and distinguish between Clemmy's cries.

Oscar installed blackout blinds and built a mini bookshelf filled with picture books in three different languages.

They weren't struggling — not the way people expected seventeen-year-old parents to be. Not financially, anyway.

But money never softened the sharp edges of responsibility.

There were still nights where Clementine cried for hours and Harper paced in circles, whispering, 'You're okay, you're okay,' like a mantra she needed to believe herself. There were still moments where Oscar stared at the calendar on the fridge — race dates, interview days, booster shot appointments — and felt panic coil in his chest.

Still, they chose it. Every day. And every day it got a little easier.

In the two years after Clementine was born, the world became a blur of trackside hotel rooms and baby bottles tucked into designer handbags. Harper and Clem travelled with Oscar more often than not — Japan, Italy, Austria, France.

Harper made a rule: in every new country, within three days, she had to learn to order a coffee in the local language.

Oscar made a rule: Clementine got to press the elevator button in every hotel.

They were young. Strange. Wildly out of place sometimes — but a family all the same.

Harper built Oscar's official website from scratch — sleek, scalable, clean UX, dark mode toggle because he was picky. Max Verstappen emailed her after seeing it. (Hey — could you build me something similar?) She said she'd think about it.

She sat her A-levels online. She was already starting to specialise in full-stack development. Her dyscalculia made things hell sometimes — numbers swam on the screen — but she learned how to code by pattern and logic, by rhythm and recursion. She learned how to work with her brain, not against it.

Oscar kept racing. And winning. F4 became F3. Then whispers of F2 began. He got sharper in interviews, more polished for sponsors, more careful around cameras. But at night — when it was just them, limbs tangled on a hotel bed, or Clem snoring softly between them in the cot — he was still that awkward, soft-eyed boy.

They celebrated Clementine's second birthday in a hotel suite in Barcelona with balloons Oscar had blown up and a lopsided cake. They FaceTimed the Haileybury crew. Jane cried. Sam tried to teach Clementine to say fuck.

Later that month, they hung a print in the entryway of their flat. Just one word, in soft gold foil.

Our Home.

Because for all the flights and chaos and podiums and late-night feeds — that's what they were building. Slowly. Quietly. Against every odd and every doubt.

They were seventeen and a half. Young. Exhausted. Occasionally terrified.

But they were a family.

And it was messy, and real, and theirs.

[numbpill]

========================================================

[tutorial: build your own neocities/nekoweb page]

========================================================

a beginner's guide for making your very own home on the indie web—retro, personal, weird, and 100% yours.

this ain’t an average wix, squarespace, or tiktok aesthetic.

we’re talking full html/css with soul and attitude.

[ prerequisites ]

------------------

> an idea

> basic text editor (vscode, notepad++, or even notepad)

> account on https://neocities.org or https://nekoweb.org

> some gifs or tiles you love (dig deep or make your own)

> optional: image host or gif repo (or self-host everything)

[ feeling overwhelmed? read this. ]

-----------------------------------

you do *not* need to know everything.

html is not a mountain. it's a garden.

you plant one tag. then another. then a style. then a button.

you can build your site piece by piece.

and every piece is a portal to somewhere personal.

you are allowed to make broken pages.

you are allowed to use templates.

you are allowed to start over as many times as you want.

this is *your* world. you control the weird.

[ step 1: create an account ]

-----------------------------

> neocities: https://neocities.org

> nekoweb: https://nekoweb.org

register a name, log in, and enter your file manager.

this is where you upload your files and see your site live.

[ step 2: your first file - index.html ]

----------------------------------------

make a new file: `index.html`

basic starter:

<html>

<head>

<title>my weird little corner</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>welcome to the void</h1>

<p>this is my page. it’s strange. like me.</p>

<img src="mygif.gif">

</body>

</html>

> upload to the dashboard

> boom. you’re live at

https://yoursite.neocities.org

or https://nekoweb.org/u/yoursite

[ step 3: add a style sheet - style.css ]

-----------------------------------------

create a file called `style.css` and upload it.

here’s some nostalgic magic:

body {

background: url('tile.gif');

color: lime;

font-family: "Courier New", monospace;

text-shadow: 1px 1px 0 black;

}

img {

image-rendering: pixelated;

}

marquee {

font-size: 20px;

color: magenta;

}

link it in your html and the vibes activate.

[ step 4: decorate it like a haunted usb ]

------------------------------------------

> use <marquee> for chaos scrolls

> embed gifs from https://gifcities.org/

> steal buttons from https://cyber.dabamos.de/88x31/

> set up a guestbook at https://www.smartgb.com/

> loop audio with <audio autoplay loop>

> add fake errors, 90s web lore, random link lists

[ step 5: resources, themes, and comfort ]

------------------------------------------

> templates & layouts: https://numbpilled-themes.tumblr.com

> glitchy gifs & buttons: https://glitchcat.neocities.org/resources

> layout builder: https://sadgrl.online/projects/layout-builder/

> free tiled backgrounds: https://backgrounds.neocities.org/

> beginner html intro: https://www.w3schools.com/html/

> pixel fonts & cyber assets: https://fontstruct.com/

remember:

you don't need to know js. you don't need to be a coder.

you just need a mood, a direction, a dream.

the html will follow.

[ bonus concept: shrine pages ]

-------------------------------

> a page just for one character you love

> a room to house digital fragments of your identity

> embed quotes, music, images like altars

> call it shrine.html and link it from your homepage

[ closing mantra ]

------------------

you are not here to be optimized.

you are not a brand.

you are a ghost inside the machine,

carving your initials into the silicon void.

welcome to Your website.

========================================================

[zumek0]

college bf! headcanons; kozume, k.

↪︎ headcanons, gn reader, fluff, a little angst but very mild, mentions of an unspecified argument but it gets resolved, allusions to an anxiety attack, mentions of marriage.

↝ summary: headcanons about your and kenma’s relationship.

College bf! Kenma who can take all his classes remotely but still takes two in-person electives so that you both can walk together to and from campus.

College bf! Kenma who isn’t one to wake up early (the earliest he can wake up is 10 a.m.) but makes an effort to do so when he knows you have an important exam so that he can have breakfast with you and wish you good luck.

College bf! Kenma who doesn’t listen to music that often (maybe sometimes has a video game's OST playing as background noise while finishing assignments) but still listens to every single song you recommend to him.

He always tells you his thoughts on each song (even if he doesn’t particularly like it).

College bf! Kenma, whose anxiety prevents him from openly showing you affection in public, but makes up for it by clinging to you constantly while in private.

College bf! Kenma who, after spending the night, makes sure to leave at least one hoodie at your apartment.

He insists that it’s so that he has clean clothes to wear if he needs them but then gets pouty whenever you wear one of yours instead of his.

College bf! Kenma who loves having you sit on his lap or between his legs while he games.

Usually, he rests his head either on your shoulder or atop your head.

Whenever he gets bored or his wrist starts bothering him (you cannot tell me he wouldn't have carpal tunnel syndrome, lol), he leans back and wraps his arms around you, letting you take control for a while.

College bf! Kenma who cries when you two have the first “big” argument of your relationship.

He prides himself on staying level-headed in stressful situations and looking for solutions instead of panicking and falling into despair.

So then, why does he feel like this? Why does he feel so angry? Why does his skin feel uncomfortable? Why is his mind making up scenarios where you break up with him? Why does he feel like there’s a black hole where his stomach should be? Why does his chest feel like he’s on the verge of a heart attack? Why does he feel so guilty?

The last two hours repeat themselves over and over in his mind. Why did he say all those things? Why did he act that way towards you? Why did he hurt you like that? Why does he keep crying?

Eventually, you both calm down enough to talk and resolve the issue.

He decides that he never wants to go through that experience again.

Especially not if you felt even half as bad as he felt.

College bf! Kenma whose mom asks about you every time he calls her son.

If you happen to be around, she’ll always ask to talk to you for a bit (more like an hour and a half).

He's pretty sure she only calls him as an excuse to talk to you.

Eventually, he sends her your phone number and feels slightly offended that she doesn’t call nearly as often as she used to.

College bf! Kenma who keeps trying to convince you to move in with him as it would be more cost effective and convenient. 

College bf! Kenma who, when you eventually agree to live together, lets you search for a new apartment as you insisted on starting fresh.

College bf! Kenma who, when you move into your new place, you drag out to Walmart at 8 p.m. to buy two cups, insisting that they’re a symbol of this new stage of your relationship.

College bf! Kenma who finds himself wanting to become Fiancè! Kenma more and more everyday.

finally posting this after having it sit in my drafts for half a year 🫠 i also finally learned how to make my html text work for the colored words lol. reblogs and likes are appreciated!

—han

[uzmacchiato]

Hi! How you doing the combination in the titles? Can you do a tutorial please! Thanks!

Hello @elvisbdoll 🫶🏻

~ Firstly, I'll share the link from where I learnt to do that. It is explained in a very easy and short way here.

~ You need to use Tumblr web on your phone or laptop for this idk why it doesn't work on the app.

~ I'll also explain below in my own detailed way, hoping that this becomes easy for anyone who follows my posts and wants to know how I do it😁

• Website for the Gradient Text :

TEXT COLOR FADER

• Detailed process of how I use customised gradient text on Tumblr :

( Pay attention to the colors that I have used in the steps as well as the screenshots to understand better. The markings on the photos are to make it easier to spot what I'm talking about. )

.

1. Create a post on Tumblr by writing the text you want to make a gradient of and save it as a draft. In the draft → Go to the Settings wheel and in the Text Editor section select HTML which is required by Tumblr to read a coded* text.

* ( The colors of the Gradient text are basically coded into text on the Website I shared above. Hence, changing into the HTML type here will help Tumblr recognise that coded text and turn it into a normal Gradient colored text. )

2. You will see a coded version of the text you wrote which is encoded between <h1>...your text...</h1> for my text in the photo below. You can toggle between HTML & Preview to see the coded and uncoded(normal) version of the text. Copy the normal version of the text from the Preview mode that you want to turn into gradient.

3. Visit the Website in the link I've shared above.

.

A: is the part where you paste the text you just copied and want to change into a Gradient.

B: is the number of colors you want to use in the gradient.

C: is the part where you put the color codes (HEX/RGB) or just swipe to get the desired color from the color wheel.

4. I pasted the text in the text box and made the changes that I need to do to get the gradient I want in the next part. I used 4 colors and put the Hex codes for the Teal and Beige colors. Once you're done click on "Generate Color Coded Text"

5. On the next page you'll get to see a preview of the text and the coded text in the box below. Click on Select All and Copy the coded text.

If you want to make any changes you can go back by clicking on "Create a new fade" and you will be taken back to edit the current gradient.

6. Go to the draft and delete the existing text to avoid mixing the coded text with it. Stay on the HTML mode rather than Preview mode.

Paste the coded text while you're on the HTML mode of the draft (the codes are really long depending on the number of colors and length of the text)

After pasting in HTML mode click on Preview and you're DONE.

Other than that you can edit the text style after pasting here into the basic styles provided by Tumblr — bold, italic, Chat, Intended, etc.

Final Result : How to make Gradient Text on Tumblr ?

I hope this was helpful😭 I love editing the text and making it match my dividers, so this is magic for me. You can DM me if you need any more help understanding this.

Thank You❤️

[fir-fireweed]

Ok, I’ve delved into Twine Sugarcube a little and I’ve had some revelations I feel the need to share.

1. Sugarcube is the devil. I mean that in the nicest way possible. I thought I was coding before… nope! I’m going to learn it anyway because the breadth of stuff I can do is amazing and worth it, but holy hells is this hard. Which leads me to number 2…

2. My fellow IF authors who use Sugarcube, you are now like gods to me. Massive respect for you. 👊 Seriously, the time and effort it takes to create a story in this, and to do it so seamlessly as many of you do, is mind boggling.

3. I don’t feel I’ve given enough credit to Chapbook. You’ve seen me talk about the lack of a save system. But for a shorter story like Viatica (currently at 155k words with Rebellion ending and coding) I don’t feel it’s a massive deal breaker. It also has no easy way to display stats or inventory or a codex. I had to jerry rig my own stats passage.

But what it does well, it does exceptionally well. Chapbook is a complete out-of-the-box format and requires no previous CSS or HTML experience. It automatically formats everything for you, headers, footers, the adaptability to be read on any device, it’s all there. There is no style sheet to create, no Java script. The biggest challenge is coding choices and variables, but even then Chapbook comes with an easy to read guide that spells out everything you can possibly need. I would also be happy to answer questions or share screenshots of what I’ve done. If you’ve been wanting to try your hand at IFs but the idea of coding is daunting, you can use Chapbook. If you want to focus on the writing, your craft, and don’t have the time or inclination to heavily code, you can use Chapbook. If you’ve never coded a damn thing in your life and think CSS stands for “can’t style shit”, YOU CAN USE CHAPBOOK!

In conclusion, Sugarcube is evil incarnate, but I’m going to learn it anyway. Hail, Satan. Chapbook is mercy incarnate. Thank you, my lord and savior. And if you’re a newcomer and on the fence at all, I encourage you to give Chapbook a try. Say it with me… you can do it. 🤗

[losergames]

Just found this WIP today. I'm absolutely in awe with the aesthetics and designs of your game, and your blog. If you ever wrote/did any kind of crash course in UI design for Twine, I would pay serious money for it. I feel like it's really hard to get such a professional, clean, and unique look for a game!

thank you so much that is so incredibly kind!!!

honestly my best advice is reference! reference your butt off!!! so much of design is looking at other designs first before attempting your own. chop shop's twine build came from a lot of places. i looked at the need for speed series, forza, GTA, saints row and hitman from the top of my head.

in fact chop shop's main console was inspired by the menu from need for speed underground 2:

i highly recommend checking out Game UI Database - it categorises games by genre, style, themes and more! i'm always looking at stuff on there for ideas to improve my own ui! i 100% recommend looking at the cyberpunk 2077 ui page, it is so incredibly detailed and has so many stills of the different menus.

twine can be intimidating for sure. sugarcube 2 is basically limitless since it's html, css, and javascript. but again i say, use as much reference as you can! the best ideas are not usually your first and it's always easier to build something when you've already got a base to look at y'know?

i hope that's a little helpful! please let me know if you wanna talk more about ui and design! <3

[mogruith]

BG3 Photomode Tutorial #2.5: More Scene Manipulation

Chapter 0: Overview

Chapter 1: Script Extender Debug Console

Chapter 2: Scene Manipulation

Chapter 2.5: More Scene Manipulation

Chapter 3: Otis_Inf Camera Tools

Supplement: Mods and Resources

In continuing from the last tutorial, I wanted to talk about how you find and play cutscenes. There's a couple ways to do this but I will show you my way because I think it is the most thorough way if you need to figure out what flags you may need to edit in order to get this working. It'll also give you the tools you need to troubleshoot flag settings.

In the above screenshot, you can see a cutscene that is meant to be played in the Shadowcursed lands: The cutscene where you play the Lyre to summon Kar'niss. It is a complex scene with tags to resolve and multiple NPCs - some of which aren't humanoid.

I will show you how to find a scene based on a snippet of dialog, how to locate its name and UUID so you can plug it into this command:

Osi.QRY_StartDialogCustom_Fixed("SCL_Drider_Caravan_HalfOrcCaster_865adfae-1b72-1ed2-f961-d55abd4fb7b1","S_GOB_DrowCommander_25721313-0c15-4935-8176-9f134385451b",Osi.DB_Avatars:Get(nil)[1][1],"S_Player_Gale_ad9af97d-75da-406a-ae13-7071c563f604","S_Player_Astarion_c7c13742-bacd-460a-8f65-f864fe41f255", 1,1,-1,1)

Warning: Please keep in mind, this is still a very finicky process. Again, take it slowly. And please don't be afraid to ask for help if you're struggling. Once you get the hang of it, you can pull out scenes and troubleshoot them into playing with ease.

There's also a good chance I'm glossing over something and not explaining it clearly/accurately. Please send me an ask, DM, comment to clarify anything that's confusing!

BG3 Dialog Reader

In order to do this my way, you'll need to download BG3 Dialog Reader and generate HTML files that include all the dialog of the game. There's already a very lovely tutorial on how to do this, so I recommend you follow it. EDIT: Or download their parsed files from their Google Drive: BG3 - parsed dialogue (1.7).zip

You've probably seen posts in this format before:

So you should now have HTML files located somewhere on your system. You need to search for a line that you'll find in the cutscene you want. Now you need to ask yourself: What line can I search for that is unique to that cutscene so that if I search for it I will get exactly what I'm looking for?

In the Drider-Lyre scene I recall an NPC asking "Did you bring the lyre?" so that's what I searched for. I use the Everything search tool because it's awesome and search for the file like so:

You will need to take a look at this file later, but for now, just take note of the name: SCL_Drider_Caravan_HalfOrcCaster. This is the first half of what you need to complete the first parameter in the command at the beginning. And we are going to use this to find the UUID.

Finding the UUID

To find the UUID, you're going to need another tool. The BG3 Modder's Multitool. Go to their GitHub, look along the right column and click on the link in the Releases section.

After that, click on bg3-modders-multitool.zip to download it. Extract the files to a new folder somewhere handy and run bg3-modders-multitool.exe.

In BG3 Modder's Multitool, click on Configuration and set the bg3.exe location to your Baldur's Gate 3 executable (E:\Program Files (x86)\Steam\steamapps\common\Baldurs Gate 3\bin or something along those lines). The Documents folder should auto-populate but you may want to double check it.

Now click in Search Index. It's going to start a process where it searches through the BG3 files. This can take a while the first time, but will be instant after that.

Once it's complete, you can now take the name of the scene and pop it into the new Index Search window that popped up.

In the results on the left, there will be a lot of files that list it, but I generally look for ones that say Assets\Dialogs\[PAK] and end in _merged.lsf and click on it. Then click Convert & Open.

This should open in Notepad or Notepad++. Now search this file for "SCL_Drider_Caravan_HalfOrcCaster" - keep in mind there can be MULTIPLE results. Note that the first instance you will get is SCL_Drider_Caravan_HalfOrcCaster_AtTower. This is the wrong scene.

You are now looking in the code a couple lines above that string for a value that is an ID type and has a value that's a lot of letters and numbers. This is the UUID.

So you have what you need to create this first parameter. Combine SCL_Drider_Caravan_HalfOrcCaster with the string of letters and numbers separated by an underscore. Like so:

SCL_Drider_Caravan_HalfOrcCaster_865adfae-1b72-1ed2-f961-d55abd4fb7b1

Plugging into the StartDialogCustom Command

Note that this copies straight in to this command in the first parameter:

Osi.QRY_StartDialogCustom_Fixed("SCL_Drider_Caravan_HalfOrcCaster_865adfae-1b72-1ed2-f961-d55abd4fb7b1", "S_GOB_DrowCommander_25721313-0c15-4935-8176-9f134385451b", Osi.DB_Avatars:Get(nil)[1][1], "S_Player_Gale_ad9af97d-75da-406a-ae13-7071c563f604", "S_Player_Astarion_c7c13742-bacd-460a-8f65-f864fe41f255" ,1,1,-1,1)

Now on first glance this looks pretty much like other times I've shown you this command, except note that there's FOUR actors. When a cutscene doesn't play at first (after double checking the UUID), this is very often the reason why. This is the minimum because the roles for the half-orc and Karniss need to be filled. First position is Kansif the Half-Orc, second is Tav, third is Brawler Vez, and fourth is Kar'niss.

Note: Kar'niss CAN be played by a non-Drider NPC - they will float angrily around carrying the lantern. It's hilarious. Try it. Here's when I tried it with my Tav:

Setting and Clearing Flags

Now. Depending on where and when you play this scene, the scene may or may not play or it will quit early. There could be a few reasons for that. The UUID could be wrong, the number of actors could be wrong, or a flag could be set that's not supposed to be set.

Let's have a look at the BG3 Dialog Reader file for this scene to see what flags are in use.

By default you should be able to see checkflags (blue) and setflags (orange). Look at the top of the page for a reminder of what the colors mean. The blue check flags are checking to see if the flag is set or not. If SCL_Drider_HasMet_CaravanFirstTime = False then you have met the drider caravan yet and this line will play. You will notice that after that is the orange SCL_Drider_HasMet_CaravanFirstTime setflag. That means the game will NOW set the flag as you have now met the Caravan for the first time. There may be occasions where you need to change the flags to get a cutscene to play. Here's the good news: There's handy commands for that!

print(GetFlag("flag",Osi.DB_Avatars:Get(nil)[1][1]))

Osi.ClearFlag("flag", Osi.DB_Avatars:Get(nil)[1][1])

Osi.SetFlag("flag",Osi.DB_Avatars:Get(nil)[1][1])

The bad news is you will have to find the UUID for each flag! So we gotta go back into BG3 Modders Multitool and search for the flag SCL_Drider_HasMet_CaravanFirstTime

Thankfully, you'll only get one result and the big string of letters and numbers is the UUID you need.

Now you combine them like you did with the cutscene name and UUID before, separated by an underscore: SCL_Drider_HasMet_CaravanFirstTime_39e94029-84f7-418d-ddce-8947bcbb7688

So let's say the cutscene isn't playing because you're on a save where that scene has already played. Clear the flag on your Tav: Osi.ClearFlag("SCL_Drider_HasMet_CaravanFirstTime_39e94029-84f7-418d-ddce-8947bcbb76", Osi.DB_Avatars:Get(nil)[1][1])

And I think we will leave it at that. I realize this was a LOT to cover. Go through this very slowly. It will take time to understand what is happening here.

And as always, if you have something you're trying to do and you're struggling with the directions, I can try to help! Please send me a DM, Ask, whatever else and I'll gladly help you with whatever you're trying to do.

Thanks for reading and sticking through this so far!