#how to create html tables
Explore tagged Tumblr posts
codewithnazam Ā· 2 years ago
Text
HTML Tables with examples: A Comprehensive Guide for Web Developers on Creating, Formatting, and Displaying Data
I. Introduction In this article, we will explore the world of HTML tables and their importance in web design. HTML tables are an essential part of building websites, as they allow developers to organize data and information in a structured and visually appealing way. They enable users to present information in a tabular format, making it easier to read and understand. HTML tables are used in aā€¦
Tumblr media
View On WordPress
0 notes
mostlysignssomeportents Ā· 1 year ago
Text
The moral injury of having your work enshittified
Tumblr media
This Monday (November 27), I'm appearing at the Toronto Metro Reference Library with Facebook whistleblower Frances Haugen.
On November 29, I'm at NYC's Strand Books with my novel The Lost Cause, a solarpunk tale of hope and danger that Rebecca Solnit called "completely delightful."
Tumblr media
This week, I wrote about how the Great Enshittening ā€“ in which all the digital services we rely on become unusable, extractive piles of shit ā€“ did not result from the decay of the morals of tech company leadership, but rather, from the collapse of the forces that discipline corporate wrongdoing:
https://locusmag.com/2023/11/commentary-by-cory-doctorow-dont-be-evil/
The failure to enforce competition law allowed a few companies to buy out their rivals, or sell goods below cost until their rivals collapsed, or bribe key parts of their supply chain not to allow rivals to participate:
https://www.engadget.com/google-reportedly-pays-apple-36-percent-of-ad-search-revenues-from-safari-191730783.html
The resulting concentration of the tech sector meant that the surviving firms were stupendously wealthy, and cozy enough that they could agree on a common legislative agenda. That regulatory capture has allowed tech companies to violate labor, privacy and consumer protection laws by arguing that the law doesn't apply when you use an app to violate it:
https://pluralistic.net/2023/04/12/algorithmic-wage-discrimination/#fishers-of-men
But the regulatory capture isn't just about preventing regulation: it's also about creating regulation ā€“ laws that make it illegal to reverse-engineer, scrape, and otherwise mod, hack or reconfigure existing services to claw back value that has been taken away from users and business customers. This gives rise to Jay Freeman's perfectly named doctrine of "felony contempt of business-model," in which it is illegal to use your own property in ways that anger the shareholders of the company that sold it to you:
https://pluralistic.net/2023/11/09/lead-me-not-into-temptation/#chamberlain
Undisciplined by the threat of competition, regulation, or unilateral modification by users, companies are free to enshittify their products. But what does that actually look like? I say that enshittification is always precipitated by a lost argument.
It starts when someone around a board-room table proposes doing something that's bad for users but good for the company. If the company faces the discipline of competition, regulation or self-help measures, then the workers who are disgusted by this course of action can say, "I think doing this would be gross, and what's more, it's going to make the company poorer," and so they win the argument.
But when you take away that discipline, the argument gets reduced to, "Don't do this because it would make me ashamed to work here, even though it will make the company richer." Money talks, bullshit walks. Let the enshittification begin!
https://pluralistic.net/2023/11/22/who-wins-the-argument/#corporations-are-people-my-friend
But why do workers care at all? That's where phrases like "don't be evil" come into the picture. Until very recently, tech workers participated in one of history's tightest labor markets, in which multiple companies with gigantic war-chests bid on their labor. Even low-level employees routinely fielded calls from recruiters who dangled offers of higher salaries and larger stock grants if they would jump ship for a company's rival.
Employers built "campuses" filled with lavish perks: massages, sports facilities, daycare, gourmet cafeterias. They offered workers generous benefit packages, including exotic health benefits like having your eggs frozen so you could delay fertility while offsetting the risks normally associated with conceiving at a later age.
But all of this was a transparent ruse: the business-case for free meals, gyms, dry-cleaning, catering and massages was to keep workers at their laptops for 10, 12, or even 16 hours per day. That egg-freezing perk wasn't about helping workers plan their families: it was about thumbing the scales in favor of working through your entire twenties and thirties without taking any parental leave.
In other words, tech employers valued their employees as a means to an end: they wanted to get the best geeks on the payroll and then work them like government mules. The perks and pay weren't the result of comradeship between management and labor: they were the result of the discipline of competition for labor.
This wasn't really a secret, of course. Big Tech workers are split into two camps: blue badges (salaried employees) and green badges (contractors). Whenever there is a slack labor market for a specific job or skill, it is converted from a blue badge job to a green badge job. Green badges don't get the food or the massages or the kombucha. They don't get stock or daycare. They don't get to freeze their eggs. They also work long hours, but they are incentivized by the fear of poverty.
Tech giants went to great lengths to shield blue badges from green badges ā€“ at some Google campuses, these workforces actually used different entrances and worked in different facilities or on different floors. Sometimes, green badge working hours would be staggered so that the armies of ragged clickworkers would not be lined up to badge in when their social betters swanned off the luxury bus and into their airy adult kindergartens.
But Big Tech worked hard to convince those blue badges that they were truly valued. Companies hosted regular town halls where employees could ask impertinent questions of their CEOs. They maintained freewheeling internal social media sites where techies could rail against corporate foolishness and make Dilbert references.
And they came up with mottoes.
Apple told its employees it was a sound environmental steward that cared about privacy. Apple also deliberately turned old devices into e-waste by shredding them to ensure that they wouldn't be repaired and compete with new devices:
https://pluralistic.net/2023/09/22/vin-locking/#thought-differently
And even as they were blocking Facebook's surveillance tools, they quietly built their own nonconsensual mass surveillance program and lied to customers about it:
https://pluralistic.net/2022/11/14/luxury-surveillance/#liar-liar
Facebook told employees they were on a "mission to connect every person in the world," but instead deliberately sowed discontent among its users and trapped them in silos that meant that anyone who left Facebook lost all their friends:
https://www.eff.org/deeplinks/2021/08/facebooks-secret-war-switching-costs
And Google promised its employees that they would not "be evil" if they worked at Google. For many googlers, that mattered. They wanted to do something good with their lives, and they had a choice about who they would work for. What's more, they did make things that were good. At their high points, Google Maps, Google Mail, and of course, Google Search were incredible.
My own life was totally transformed by Maps: I have very poor spatial sense, need to actually stop and think to tell my right from my left, and I spent more of my life at least a little lost and often very lost. Google Maps is the cognitive prosthesis I needed to become someone who can go anywhere. I'm profoundly grateful to the people who built that service.
There's a name for phenomenon in which you care so much about your job that you endure poor conditions and abuse: it's called "vocational awe," as coined by Fobazi Ettarh:
https://www.inthelibrarywiththeleadpipe.org/2018/vocational-awe/
Ettarh uses the term to apply to traditionally low-waged workers like librarians, teachers and nurses. In our book Chokepoint Capitalism, Rebecca Giblin and I talked about how it applies to artists and other creative workers, too:
https://chokepointcapitalism.com/
But vocational awe is also omnipresent in tech. The grandiose claims to be on a mission to make the world a better place are not just puffery ā€“ they're a vital means of motivating workers who can easily quit their jobs and find a new one to put in 16-hour days. The massages and kombucha and egg-freezing are not framed as perks, but as logistical supports, provided so that techies on an important mission can pursue a shared social goal without being distracted by their balky, inconvenient meatsuits.
Steve Jobs was a master of instilling vocational awe. He was full of aphorisms like "we're here to make a dent in the universe, otherwise why even be here?" Or his infamous line to John Sculley, whom he lured away from Pepsi: "Do you want to sell sugar water for the rest of your life or come with me and change the world?"
Vocational awe cuts both ways. If your workforce actually believes in all that high-minded stuff, if they actually sacrifice their health, family lives and self-care to further the mission, they will defend it. That brings me back to enshittification, and the argument: "If we do this bad thing to the product I work on, it will make me hate myself."
The decline in market discipline for large tech companies has been accompanied by a decline in labor discipline, as the market for technical work grew less and less competitive. Since the dotcom collapse, the ability of tech giants to starve new entrants of market oxygen has shrunk techies' dreams.
Tech workers once dreamed of working for a big, unwieldy firm for a few years before setting out on their own to topple it with a startup. Then, the dream shrank: work for that big, clumsy firm for a few years, then do a fake startup that makes a fake product that is acquihired by your old employer, as an incredibly inefficient and roundabout way to get a raise and a bonus.
Then the dream shrank again: work for a big, ugly firm for life, but get those perks, the massages and the kombucha and the stock options and the gourmet cafeteria and the egg-freezing. Then it shrank again: work for Google for a while, but then get laid off along with 12,000 co-workers, just months after the company does a stock buyback that would cover all those salaries for the next 27 years:
https://pluralistic.net/2023/09/10/the-proletarianization-of-tech-workers/
Tech workers' power was fundamentally individual. In a tight labor market, tech workers could personally stand up to their bosses. They got "workplace democracy" by mouthing off at town hall meetings. They didn't have a union, and they thought they didn't need one. Of course, they did need one, because there were limits to individual power, even for the most in-demand workers, especially when it came to ghastly, long-running sexual abuse from high-ranking executives:
https://www.nytimes.com/2018/10/25/technology/google-sexual-harassment-andy-rubin.html
Today, atomized tech workers who are ordered to enshittify the products they take pride in are losing the argument. Workers who put in long hours, missed funerals and school plays and little league games and anniversaries and family vacations are being ordered to flush that sacrifice down the toilet to grind out a few basis points towards a KPI.
It's a form of moral injury, and it's palpable in the first-person accounts of former workers who've exited these large firms or the entire field. The viral "Reflecting on 18 years at Google," written by Ian Hixie, vibrates with it:
https://ln.hixie.ch/?start=1700627373
Hixie describes the sense of mission he brought to his job, the workplace democracy he experienced as employees' views were both solicited and heeded. He describes the positive contributions he was able to make to a commons of technical standards that rippled out beyond Google ā€“ and then, he says, "Google's culture eroded":
Decisions went from being made for the benefit of users, to the benefit of Google, to the benefit of whoever was making the decision.
In other words, techies started losing the argument. Layoffs weakened worker power ā€“ not just to defend their own interest, but to defend the users interests. Worker power is always about more than workers ā€“ think of how the 2019 LA teachers' strike won greenspace for every school, a ban on immigration sweeps of students' parents at the school gates and other community benefits:
https://pluralistic.net/2023/04/23/a-collective-bargain/
Hixie attributes the changes to a change in leadership, but I respectfully disagree. Hixie points to the original shareholder letter from the Google founders, in which they informed investors contemplating their IPO that they were retaining a controlling interest in the company's governance so that they could ignore their shareholders' priorities in favor of a vision of Google as a positive force in the world:
https://abc.xyz/investor/founders-letters/ipo-letter/
Hixie says that the leadership that succeeded the founders lost sight of this vision ā€“ but the whole point of that letter is that the founders never fully ceded control to subsequent executive teams. Yes, those executive teams were accountable to the shareholders, but the largest block of voting shares were retained by the founders.
I don't think the enshittification of Google was due to a change in leadership ā€“ I think it was due to a change in discipline, the discipline imposed by competition, regulation and the threat of self-help measures. Take ads: when Google had to contend with one-click adblocker installation, it had to constantly balance the risk of making users so fed up that they googled "how do I block ads?" and then never saw another ad ever again.
But once Google seized the majority of the mobile market, it was able to funnel users into apps, and reverse-engineering an app is a felony (felony contempt of business-model) under Section 1201 of the Digital Millennium Copyright Act. An app is just a web-page wrapped in enough IP to make it a crime to install an ad-blocker.
And as Google acquired control over the browser market, it was likewise able to reduce the self-help measures available to browser users who found ads sufficiently obnoxious to trigger googling "how do I block ads?" The apotheosis of this is the yearslong campaign to block adblockers in Chrome, which the company has sworn it will finally do this coming June:
https://www.tumblr.com/tevruden/734352367416410112/you-have-until-june-to-dump-chrome
My contention here is not that Google's enshittification was precipitated by a change in personnel via the promotion of managers who have shitty ideas. Google's enshittification was precipitated by a change in discipline, as the negative consequences of heeding those shitty ideas were abolished thanks to monopoly.
This is bad news for people like me, who rely on services like Google Maps as cognitive prostheses. Elizabeth Laraki, one of the original Google Maps designers, has published a scorching critique of the latest GMaps design:
https://twitter.com/elizlaraki/status/1727351922254852182
Laraki calls out numerous enshittificatory design-choices that have left Maps screens covered in "crud" ā€“ multiple revenue-maximizing elements that come at the expense of usability, shifting value from users to Google.
What Laraki doesn't say is that these UI elements are auctioned off to merchants, which means that the business that gives Google the most money gets the greatest prominence in Maps, even if it's not the best merchant. That's a recurring motif in enshittified tech platforms, most notoriously Amazon, which makes $31b/year auctioning off top search placement to companies whose products aren't relevant enough to your query to command that position on their own:
https://pluralistic.net/2023/04/25/greedflation/#commissar-bezos
Enshittification begets enshittification. To succeed on Amazon, you must divert funds from product quality to auction placement, which means that the top results are the worst products:
https://pluralistic.net/2023/11/06/attention-rents/#consumer-welfare-queens
The exception is searches for Apple products: Apple and Amazon have a cozy arrangement that means that searches for Apple products are a timewarp back to the pre-enshittification Amazon, when the company worried enough about losing your business to heed the employees who objected to sacrificing search quality as part of a merchant extortion racket:
https://www.businessinsider.com/amazon-gives-apple-special-treatment-while-others-suffer-junk-ads-2023-11
Not every tech worker is a tech bro, in other words. Many workers care deeply about making your life better. But the microeconomics of the boardroom in a monopolized tech sector rewards the worst people and continuously promotes them. Forget the Peter Principle: tech is ruled by the Sam Principle.
As OpenAI went through four CEOs in a single week, lots of commentators remarked on Sam Altman's rise and fall and rise, but I only found one commentator who really had Altman's number. Writing in Today in Tabs, Rusty Foster nailed Altman to the wall:
https://www.todayintabs.com/p/defective-accelerationism
Altman's history goes like this: first, he founded a useless startup that raised $30m, only to be acquired and shuttered. Then Altman got a job running Y Combinator, where he somehow failed at taking huge tranches of equity from "every Stanford dropout with an idea for software to replace something Mommy used to do." After that, he founded OpenAI, a company that he claims to believe presents an existential risk to the entire human risk ā€“ which he structured so incompetently that he was then forced out of it.
His reward for this string of farcical, mounting failures? He was put back in charge of the company he mis-structured despite his claimed belief that it will destroy the human race if not properly managed.
Altman's been around for a long time. He founded his startup in 2005. There've always been Sams ā€“ of both the Bankman-Fried varietal and the Altman genus ā€“ in tech. But they didn't get to run amok. They were disciplined by their competitors, regulators, users and workers. The collapse of competition led to an across-the-board collapse in all of those forms of discipline, revealing the executives for the mediocre sociopaths they always were, and exposing tech workers' vocational awe for the shabby trick it was from the start.
Tumblr media
If you'd like an essay-formatted version of this post to read or share, here's a link to it on pluralistic.net, my surveillance-free, ad-free, tracker-free blog:
https://pluralistic.net/2023/11/25/moral-injury/#enshittification
560 notes Ā· View notes
cthulhubert Ā· 7 months ago
Text
Alright, so bear with me.
Humans have three cone cells in our eyes that are how we perceive color in the world. I often think red, green, and blue, but apparently people studying them use Long, Medium, and Short to be unambiguous (just for one example, if you activate M really strongly and not L or S, the color people report seeing is yellow-green). Each type activates at different strengths to different wavelengths of light. Here's a lovely graphic from Wikipedia showing response levels of each cone type to different wavelengths:
Tumblr media
So you can see that if some light activates L some, but not M, we'll perceive deep red, activates them both a bit, we see orange or yellow, depending on the specific amount.
It's interesting that some effect (a specific mix of pigments, or some structural coloration) could be producing some mostly 495nm light, or a blend of some slightly higher and slightly lower wavelengths, and either way we see cyan. (And a good thing, too, otherwise our display technology would be extremely unconvincing.)
Of course, then there's what happens when we get activation of L and S at once, but not M, our eye-brain systems don't infer "yellow-green", because green is specifically what's missing from there: we generate magenta, a non-spectral color. (And when all three activate we get white, of course.)
I found myself thinking about birds, with their four cones.
Tumblr media
They're more evenly spaced too, the bastards. (These bastards are specifically finches but I'm under the impression that most birds are similar.)
Tumblr media
(Of course, "violet" actually means ultra-violet here. Look at the graphic, their UV cone stops responding where our S cone starts. I would edit this, but spent like half an hour discovering that tumblr doesn't support table under html or code/"preserve formatting" under markdown anymore; so you get a screencap of what I sent on discord.)
Birds could see "vio-green" (accepting name suggestions) as a color region as distinct from blue/indigo as green is from purple/magenta.
Look at that. Two whole ass independent spectral color divisions we don't have, and six non-spectral inferences. Eight whole categories of visual perception more than us. Decadent.
The heart quails to imagine what the 16 color receptors of a mantis shrimp would create. I mean, okay, it doesn't because we've studied their eyes and brains and they don't blend colors the way we do, smooshing them down to a much simpler set of perceptions.
But imagine if we rebuilt our eyes and brains for it! Color indicates chemistry, with that level of subtle blending of characteristics, would vision become like tasting everything we look at?
Please pet the bear that is with me on your way out.
66 notes Ā· View notes
ghost-bxrd Ā· 3 months ago
Note
GIRL CODED JASON !!!!! HI HELLO OMG TUMBLR USER AND AMAZING AO3 WRITER GHOST BIRD YOUR POSTS AND STORIES JUST ACTIVATE BRAINWORMS IN MY HEAD šŸ˜­šŸ˜­šŸ˜­šŸ˜­ holy fuck hi I'm too shy to come off anon but I love the discussions you've been having, so just chipping in !!!
I love the many many looks on how people interpret him being girl-coded, exploring his feelings towards domestic violence, towards victims, women etc, extremely good points that you brought up ! And I'd like to bring up that on a more meta level, the way his character is treated by DC and by people in canon as a whole is also so... girl-coded ? Going to try my best to articulate since eng is my 3rd language šŸ˜”šŸ˜” Sorry if it's not consise šŸ˜­šŸ˜­ I have FEELINGS AAAAAAAAAAAA
I think the core of this "girl-codedness" stems from a few things, two things I can point to currently are how he's treated as a victim and fridging. Fridging is the easier one to see imo, it's something that's usually associated with female characters but fits Jason a lot. It's not about him and his trauma/pain being feminine inherently (nothing can be categorised in that way honestly) but how it's dealt with by people and the narrative.
Let's take a look at its counterpart which is 'Dead Men Defrosting' trope coined by John Barton. Here's the source for that: https://www.lby3.com/wir/r-jbartol2.html, and a quote from the Women in Refridgerators website I feel is really encapsulates this whole situation.
"...women heroes are altered again and never allowed, as male heroes usually are, the chance to return to their original heroic states. And that's where we begin to see the difference."
Sounds familiar, doesn't it? Additionally, the grief that his death bought is made to be even more objectifying than it should have been. It's made to be Bruce's and everyone else's more than it is Jason's. The image of the dead character is, by necessity, distorted and is served as fuel towards a different character. He's reduced to his death and the pain associated with it is milked for like... 16 yearsish??? A perverted memorial, a perverted memory, an altered legacy. He was just 15. A boy. (Still, I wouldn't say Jason was fridged per say, as the term is created in reference to female characters and they have little to no agency in their stories there, but that 'feel' is there. So I understand where the girl-codedness comes from!)
Itā€™s that the way a lot of characters treat him and a lot of the tropes used on him are things that are typically associated with feminine characters. It's also about how he's treated since he's not a perfect victim. Every attempt Jason has made to express his pain and his anger just gets him labelled as emotional, unreasonable and hysterical (which are again, unfortunately terms associated with women.)
There's many different points people have brought up about Jason, such as his bleeding compassion as Robin, the tears at the end of UTRH, and so on. Nonetheless, I think there's a lot of nuance that comes with gender discussions, since these things are deeply personal to people, and there's disagreements to be had. And that's cool !! There's many points loads of other people also being to the table that I love !! Contradictions too !!
Anyhow, so many cool PPL and analysis these days,,, ILY ANON WHO BROUGHT UP TITANS TOWER (anonanonanon pls chip in again and my life will be URS) Also ILY TUMBLR USER MAGIC-CRAZY-AS-THIS FOR PUTTING THE WEDDING DRESS IMAGERY IN MY HEAD, ALSO ILY GHOSTBIRD FOR THAT AMAZING REPLY AND ANALYSIS,, I LOVE THIS LITTLE POCKET OF COMMUNITY U HAVE CREATED this is so beloved šŸ„ŗšŸ„ŗšŸ„ŗšŸ’žšŸ’žšŸ’žšŸ’ž
All very good points!
I donā€™t have much to add here except perhaps the argument with the memorial case. Youā€™re absolutely right. I never realized how similar it is to the classic hero trope of protagonist mourning their dead love interest/family and dedicating their entire life to a memory of them, citing the actions they take to be in honor of the dead person.
On one hand, I tend to enjoy that trope. On the other hand with Jason, it all became horribly twisted so very quickly and lead to a hard downward spiral of Bruce having a real assholish phase.
But yeah thatā€™s a whole other can of worms better left unopened for now ksksks.
Iā€™m very happy youā€™re enjoying this blog šŸ’š itā€™s honestly super rewarding to hear people say that when it was one of the main goals to have this be a safe and harmonious space for everyone šŸ’ššŸ’šāœØ
31 notes Ā· View notes
fruitdragon1a Ā· 2 months ago
Text
YAML Files and Dialogue
Tumblr media
First post! Let's go!
Navigation links: masterpost | next post
In this post, I'll be going over the basics of writing dialogue for Omori. There's a lot in terms of formatting, so I'll link to a website that goes over all those things in depth.
Table of Contents:
Location
Syntax
Syntax - Examples
Comments
In-Game Formatting
Names
Faceset
Faceindex
Dialogue Examples
Location
A good way to start is by looking at the existing .yaml files in the vanilla game. Those can be located in the playtest folder provided by OneLoader, with the following filepath:
playtest_folder > languages > en > (all yaml files here)
Tumblr media
In this folder is all of the dialogue in the game. This folder is also where you will have to put any new .yaml files that you create.
Syntax
When we open the 00_template.yaml, weā€™re shown the following code:
Tumblr media
(source: 00_template.yaml, base game)
The meaning of this is pretty basic. Each message without a face attached (so all dialogues not involving Sunny, Basil, Hero, Aubrey, Kel, Omori, Mari, or Hector the Pet Rock) is defined as a single line of text following ā€œmessage_XXā€ (where XX is some number) and messages with a face get two additional values that must be definedā€” the faceset, aka the file in which the face you want belongs, and the faceindex, aka which of the faces on the file. More on that later.
(Note: message_XX is convention, not requirement. Any string of text could work in this place. And in some cases, it could make it easier to remember certain dialogue choices if you give it a name other than convention. An example of a mod that uses this feature is Reverie.)
Syntax - Examples
Tumblr media
(source: 01_cutscenes_neighbors.yaml, base game)
Tumblr media
(source: fa_map_flavor.yaml, base game)
As you can see here, flavor text (text that pops up when you interact with objects) is defined in much the same way as cutscene dialogue, shown in the first example.
Comments
Also, comments! As in any normal coding language, the green lines of text known as comments (denoted with a ā€˜#ā€™ symbol at the beginning of the line) are ignored by the file and are a great way of making your .yaml file easier to read.Ā 
Without these comments, you will end up with something like this:
Tumblr media
(source: parallels, courtesy of FruitDragon)
Itā€™s a lot more difficult to tell what anything is for if youā€™re looking at the files and arenā€™t the one who wrote the dialogues. Even for the one who wrote them, it can be harder to find anything.
Now look at the same .yaml file with comments added in:
Tumblr media
(source: parallels, courtesy of FruitDragon)
Itā€™s now much easier to tell what every line of dialogue is intended for in the game.
In-Game Formatting
ā€œBut, FruitDragon,ā€ you may be saying, ā€œwhat are all of these random backslashes and dots and lines in between the text for? And how does formatting like the really wavy text from Sweetheartā€™s iconic laugh happen?ā€
ā€œWell, dear aspiring mod maker,ā€ I say in return, ā€œthose random backslashes and dots and lines in between the text are exactly what causes that formatting to happen.ā€
(Almost. Technically, the wavy text is caused by the \sinv function. But I digress.) Hereā€™s a quick guide to super basic formatting (for a more comprehensive guide, I highly recommend visiting this link.)
All formatting commands start with a backslash (ā€˜\ā€™) except for oneā€” that's <br> and, much like the HTML version, causes a line break.
<br> = line break
\. = Pause 15 frames (approx. 1/4 of a second)
\| = Pause 60 frames (approx. 1 second)
\! = Wait for user input before progressing (basically means you have to press z to continue)
\^ = Automatically closes a text window once it's done writing itself (like if you want someone to be interrupted)
\sinv[2] = Wavy text (for less intense waving use \sinv[1])
\fr = Clear all text formatting
\quake[2] = Shakes text (for less intense quaking use \quake[1]
\v[#] = Passes in the value of the variable number given (ex: \v[143] passes in the saveā€™s WTF value)
\c[#] = Changes text color! For a guide to which numbers mean which colors, visit the link above.
Again, itā€™s a good idea to look at already existing .yaml files for certain types of formatting, like if you want to mimic Sweetheartā€™s iconic laugh. No better way than to learn by example!
ā€¦
Okay, now Iā€™ve made myself curious.
Tumblr media
(source: 15_cutscenes_herothebachelor.yaml, base game)
We have here Sweetheartā€™s iconic entrance with Sweetheartā€™s iconic laugh. Repeated a grand total of three times, each time with slightly different formatting.
What exactly is going on with this dialogue?
Hereā€™s what I see in terms of formatting:
\Com[2]
\sinv[1]
\sinv[2]
\{
\!
\|
\smm
\swh
We already know most of these. As I mentioned, \sinv[1] and \sinv[2] are the thing that caused Sweetheartā€™s dialogue to get all wavy. \| is pause 60 frames, and \! is wait for user input before progressing. And <br>, of course, is line break. So what are \{, \Com[2], \smm, and \swh?
\{ is what increases the text size. Similarly, \} is what decreases the text size.
\Com[x] runs the Common Event from the game that has the same number as the number passed in to the command in place of x. In this case, Common Event #2 is Shake Screen, which means that every time \Com[2] is run, itā€™ll shake the screen. (Wow, thatā€™s a lot of screen shaking in that last Sweetheart laugh.)
Now what are \smm and \swh?
Itā€™s simple, really. But it involves getting into a topic that we havenā€™t really gotten into yet.
Itā€™s time to talk about:
Names
Thatā€™s right, names. That little box that pops up on top of dialogue boxes to tell you whoā€™s speaking.
Now that I think about itā€¦ we havenā€™t really seen how names are defined, yet. Only the dialogue itself. How does the game know whoā€™s talking?
Tumblr media
(source: farawaytown_extras_dailydialogue.yaml, base game)
After scouring through the files, weā€™ve figured it out. Itā€™s just the following line tacked on to the beginning of the text:
\n<NAME OF PERSON HERE>
But where is that for the other dialogues weā€™ve encountered so far?
Hereā€™s the thing. Writing \n<NAME> over and over and over again can get tiring, especially when the name is super long. So there are a few shortcuts we can use for commonly recurring character names. While they can technically be placed on the beginning of the line, too, theyā€™re typically added to the end of a text line. Hereā€™s a short guide:
\aub = AUBREY
\her = HERO
\bas = BASIL
\kel = KEL
\mar = MARI
\omo = OMORI
\swh = SWEETHEART
\smm = SPROUT MOLE MIKE
\who = ???
\sbf = SPACE BOYFRIEND
\cap = CAPT. SPACEBOY
\spxh = SPACE EX-HUSBAND
Recognize any?
Thatā€™s right. \smm and \swh were used to denote that SPROUT MOLE MIKE and SWEETHEART were talking! That makes a lot of sense.
Of course, thereā€™s definitely more. For a full list of shortcuts/macros, visit this link.
Also, important note! For a renameable character like Sunny (ignoring the examples earlier; parallels wonā€™t have renameable Sunny) youā€™ll have to use \n[8] for the characterā€™s name. 8 is the actor ID for Sunny. If thereā€™s a different character that you want to get the name for like that, just use \n[ACTOR ID].
Now, itā€™s time to go over the things I said I would go over earlier. Faceset and faceindex.
Faceset
Tumblr media
(source: 01_cutscenes_neighbors.yaml, base game)
What is faceset? What are these random filename type things that are inputted in faceset?
Theyā€™re filenames. More specifically, for files in the img > faces folder, shown here:
Tumblr media
The files in specific that weā€™ll be referring to for yaml files are the ones at the bottom of the image, denoted with the MainCharacter_ or MainCharacters_ prefix.
Here are options provided with the base game:
MainCharacter_Basil_dark ā€” for all your nighttime FARAWAY TOWN character needs!
MainCharacter_Basil ā€” All of the faces for BASIL and Dreamworld BASIL! With STRANGER, nighttime AUBREYs, and a few nighttime HEROs thrown in for good measure!
MainCharacter_Mari ā€” Dreamworld MARI and unused GHOST MARI! Plus a few faces belonging to our faceless mannequins in Blackspace and our FARAWAY TOWN twelve-year-old friends!
MainCharacters_Dreamworld ā€” Dreamworld HERO, AUBREY, and KEL. Plus HECTOR.
MainCharacters_Faraway ā€” FARAWAY TOWN HERO, AUBREY, and KEL.
The file formatting for one of these facesets is pretty specific. 106 pixels by 106 pixels per face, 4 faces per row. You can have as many rows as you need.
Tumblr media
(source: FruitDragon)
How does the game know which face in each faceset to use, though?
Well, thatā€™s where the next topic comes in.
Faceindex
This number tells the game which face to fetch from the given faceset.
Hereā€™s a numbering example using a darkened monochrome version of MainCharacters_Faraway:
Tumblr media
(source: FruitDragon)
As you can see, the count starts from 0 (because computers) and goes up by one, wrapping around to the next row each time. So calling MainCharacters_Faraway and assigning the faceindex value to 2 would show the face with the value 2, or AUBREY with her eyes closed, when that dialogue is printed.
Now it's time to put our new knowledge to use!
Dialogue Examples
Tumblr media
(source: FruitDragon)
I wrote up some dialogues using what we talked about. Let's see how they turn out when implemented in-game!
Tumblr media Tumblr media Tumblr media
(source: @biggiecheese406)
I used pretty basic formatting, since a lot of the text moving ones like \sinv canā€™t translate well to screenshots. \!, \., \|, and any other wait/player input commands also donā€™t translate to screenshots, though I still used them.
One of the others that I used, which I didn't go over in much detail, is \fr, which resets all font changes. This is used because at the beginning of KELā€™s dialogue, the font size is increased, but we donā€™t want the font size to stay large for the entirety of the line.
Something to note: YAML files are extremely picky. Formatting one wrong can lead to a game crash. It's suggested that you use a yaml checker like https://www.yamllint.com/ to verify that you have all the syntaxes correct. It's laughably easy to make a mistake with these.
Now, you may be wondering, how do you add these dialogues to the game?
Well, Iā€™ll go over that in the next general topic:
Events
That'll be in the next post, though. Thanks so much for reading, and lmk if you have any questions!
2 notes Ā· View notes
no-psi-nan Ā· 6 months ago
Text
Tumblr media
4) Where do you find inspiration for new ideas?
hsfjdlshfks I generally don't go looking for new ideas, they just break into my house and start squatting there lol. Aside from the spontaneously generated ones, I actually take a lot of inspiration from other fans! Blorbo discussions especially tend to spark interesting thoughts that lead to headcanons and stories. Sometimes fanart (all kinds) causes me to go down a different thought path than before - like, I recently saw some truly banger torisai art that changed the planned ending of a WIP lol. It's never direct inspiration though, like I genuinely wouldn't bother making something that already exists unless I thought I could bring something radically different to the table. I'm making the stuff that I wish existed but doesn't!
20) Have you noticed any patterns in your fics? Words/expressions that appear a lot, themes, common settings, etc?
Lol. Yeah all my romantic stuff is sweet and cozy and heartfelt because I'm cheesy and love that stuff. Even my most deranged lemons are super affectionate <3 I'll leave it as an exercise for the reader to call me out on other patterns lol.
27) What is your most and least favorite part of writing?
The best parts are the initial concept & brainstorming, plus writing blorbo dialogue. I'm sure it's extremely obvious that I love writing Akechi dialogue in particular ā€“ the less hinged, the better!
Worst part is the post-posting creative slump, where I've gone through all the effort of creation & posting and then there's no feedback and it just feels bad. Hate having to wait out stupid human feelings to get back to creating. It doesn't always happen (I was actually really pleasantly surprised by the reception of the toilet blog lol) but it's just a real bummer when it does!
29) Whatā€™s your revision or editing process like?
Not too intensive for me since I kinda edit as I go along. Before I get started writing, I always go over the last part (sometimes all of it), to get back in my groove, and I'll tweak it if it needs it. Once I'm done writing, if I have a beta I'll send it over, and either way I'll wait a few days before giving a final read-through and posting. Naturally a few months later I'll be reading the fic on AO3 and find typos or grammatically weird sentences, but that shit happens to professional authors too so whatever lol. Update it and carry on...
40) If someone were to make fanart of your work, what fic or scene would you hope to see?
All fanart is definitely welcome lol, but generally the romantic fics are nearer and dearer to my heart so shippy drawings inspired by my fics would have a same-type-attack-bonus on my heart!
74) Youā€™ve posted a fic anonymously. How would someone be able to guess that youā€™d written it?
The CSS/HTML probably lmfaoooo.
Otherwise, probably the pairing if it's one of my captained ships, and the way I write my dialogue and don't spend any time describing shit like settings or clothing lmao.
Thanks for the ask @hillbilly---man!! šŸ’œšŸ’œšŸ’œ
[Context] <- still open for these!
6 notes Ā· View notes
sophia-sol Ā· 2 months ago
Text
The progression of my work on my website over the last week or so, as documented on mastodon:
one
heeheehee I get to learn JAVASCRIPT now via the method of just diving right in there! (aka. downloading the zonelets starter pack to use for formatting my website, and digging into the script to see what I want to change!)
awww opening the zonelets css stylesheet and it feels so comfortably familiar! I love how much work I put into understanding css, via creating an ao3 personal theme!
also, seeing how these files all work together, the javascript and css and html, I understand the relationship between what you do with each of them far more. It makes sense to me now! the structure of building a site!
two
I'm learning things about filezillaā€¦I'm learning things about website structuresā€¦.I'm learning how bad ao3's html download files are.
three
I have one entire fic posted to my website! YESSSS!
I'm doing my best to divorce from ao3 my sense of what structure and language I should be using in the various preamble that goes with a given fic. I don't need to use the same categories of data, and I don't need to call things the same thing! and I don't even need to have the same sections on every fic if I don't want to, if something isn't relevant for that fic!!
four
I made one entire change to the javascript for my site, and it WORKED, I am so powerful šŸ’Ŗ
five
I'm just so emotional about the people of the smallweb who code their little projects and then give them away freely - with instructions! - so that others of us can build our own little projects! My website, the main site and the linkding instance, couldn't be what it is without the help of many people, friends and strangers! šŸ„¹
six
I keep going to my website and shrieking a bit internally. it looks like a website!!!
seven
for most programs, there's not enough customization, I can't make it behave in ways that are useful to me, and it's endlessly irritating
visual studio code: I got u bro
I'm actually intimidated by the notion of scrolling through all the customization options of vsc, damn!
eight
look how many fics I have posted on my website now!
this listing page still has some tweaking to do for maximum clarity of reading/skimming over the info, but this is still great progress!
I am a firm believer of the web design principle of "if people have to focus to figure out how to find the info they're looking for, the problem is with the design rather than the user" and I'm not out of the woods yet
nine
OKAY I think I've got my fandom list page looking a lot more clear now, via tweaking my use of whitespace! hooray!
ten
oh my god. I just realized. the "zap colours" and "zap stylesheets" bookmarklets I use semiregularly areā€¦..snippets of code. that I now know approximately how to read! and could edit to get slightly different results, if I wanted to!!
the world opens up to you, when you learn things about coding!
eleven
things I want to add to my website:
theme-picker, so people who do better with dark mode etc can still comfortably browse my site
comments on fanwork pages and blog pages
table of contents on fic pages so you can easily jump down to the section you want to
all the rest of my fanworks - 12 fics are up but that's not nearly everything!
BIRD SHRINE.
and all of this is very doable! so exciting.
twelve
omg I submitted a feature request to linkding and LATER THE SAME DAY a fix is committed:
between this and the default guest profile stuff I am soooo excited for the next linkding release
thirteen
I've started to write up a podcast recs page for my website because I figured that would be cool content to have. but I forgot. how wordy I can be. and HOW many podcasts I listen to.
my original plan was just a list of podcasts. my second plan was to include a sentence or two about each one, as context.
my current document has multiple paragraphs per podcast. most podcast descriptions are between 150-200 words each. and I have so many podcasts to go!
fourteen
my list of fanworks by vibe is now posted to my site!
also posted: just my faves of my fanfics!
and a history of the fandoms I've been in!
fifteen
ā€¦and the next linkding release is OUT NOW. today! hot damn. ok. ok. I am not prepared, it's usually not this quick between releases!
I hope I have time soon to dig into this and get my instance updated!!
5 notes Ā· View notes
secularbakedgoods Ā· 2 years ago
Text
How to Prevent Amazon from Ruining Your Life
(a.k.a. how to sell ebooks on places that arenā€™t Kindle)
Letā€™s face it, Amazon has a history of screwing people over. Especially those people who depend on Amazon to make a living. If you sell ebooks on Kindle and you want to insulate yourself from whatever raw deal those maniacs come up with next, you should make sure your ebook is also being sold elsewhere. And by ā€œelsewhereā€ I mean ā€œeverywhere.ā€
Please note: following this guide will make you ineligible for KDP Select. If youā€™re mostly dependent on revenue from KDP Select, this guide will not be helpful to you. But Amazon will ruin your life someday.
Step 1: Make an EPUB
KDP, and certain other services like it, allow you to upload a Word document and automatically convert it to an eBook. If you really want to sell your ebook everywhere, though, youā€™ll need an EPUB file.
EPUB is a near-universal ebook file standard. Most ebook apps and eReaders can read EPUBs, and every vendor will accept an EPUB file for upload. You can even use an EPUB instead of a Word document on KDP.
You can create an EPUB file for your ebook using Sigil, which is a free and open-source ebook editor with extensive documentation. EPUB files are formatted in XHTML, so a quick education on HTML basics from W3C would serve you well here.
Donā€™t forget to include a cover and table of contents within your EPUB, as well as metadata tags for your bookā€™s title and your name. Most vendors require them.
Optional: Convert to MOBI and PDF
Newer Kindles can apparently read EPUBs. Older Kindles might not. In the event someone with a Kindle wants to buy your book from a vendor that isnā€™t Amazon, you can package your EPUB with a MOBI file.
You can convert your EPUB to MOBI using Calibre. Calibre can also help you convert your ebook to a PDF, although I wouldnā€™t recommend using a Calibre-generated PDF for any print-on-demand services.
Step 2: Upload Everywhere
Hereā€™s a list of vendors I upload my ebooks to:
DriveThruFiction (also does print-on-demand)
Gumroad
itch.io
Ko-fi (using the Shop feature)
Payhip
Smashwords (will, if you meet certain formatting standards, automatically distribute your book to Apple, Barnes & Noble, and Kobo, among others)
None of these sites have exclusivity agreements, meaning you can upload your ebook to all of them at once. Remember to check whether a vendor has submission guidelines for ebooks, and make sure yours fits those guidelines.
Once your ebook is uploaded to these other vendors, you can use Books2Readā€™s Universal Link feature to centralize most of your bookā€™s URLs into one link.
And now, the next time Amazon nukes an entire department or shadowbans an entire genre, you can send your readers elsewhere to buy your books.
53 notes Ā· View notes
enigmalea Ā· 2 years ago
Text
Why I Contributed to FujoGuide
If you follow me here or mastodon you may have noticed that I've been reblogging/boosting a lot of posts for something called The Fujoshi Guide to Web Development (@fujowebdev). There's a good chance you followed me or know me from the Dragon Age fandom where I run communities, events, and zines and write fanfic, and you might be wondering why the sudden and drastic departure from my normal content. Why would a writer contribute to something related to webdev? Why have you stopped seeing thirst for Dragon Age characters and started seeingā€¦ whatever a FujoGuide is?
The answers to those questions (and more!) are below the cut.
My Coding Journey
I wrote my first lines of code in 1996 (yes, I'm old AF). It was the early days of the internet and tutorials for how to make your own websites were literally everywhere. You couldn't go more than two clicks without finding a how-to written in plain language. But it was painstaking and tedious. CSS didn't exist yet (literally, I started coding about six months before it was released) and even when it appeared it wasn't widely adopted or supported.
It was the "glory days" of Geocities, Myspace themes, Neopets, and Livejournal. If there was a cool site, you could use HTML and/or CSS to customize it. I honed my skills by coding so many tables character profiles for RPs, creating themes, painstakingly laying out user info pages, and building my own site.
Gradually, things changed. Web 2.0 showed up with locked down profiles and feeds you couldn't customize, free website hosts became more difficult to find, and point and click page builders became the way of the web. Shortly after, I took a long break from fandom; frustrated and disappointed with site closures, lost communities, and general fandom wankā€¦ it felt like it just wasn't worth it anymore.
I eventually came back, and when I did it meant customizing themes, figuring out how to create tools for my communities, coding tumblr pages (and learning they're not really supported on mobile), and looking at automations for my common tasks. One day, I woke up and thought, "I'm going to make a Discord botā€¦ it can't be that hard."
So, I did it.
An Unexpected Friendship
About a month after I launched my bot to the public, I received a random Discord message from @essential-randomness. A friend had told her about my bot, and she was working on BobaBoard which needed volunteers. I was shocked. First, people were talking about my bot. Second, I wasn't a real coder. I didn't know anything! I just googled a bunch of stuff and got something working. I had no idea what I was doing.
She assured me it was okay. She was willing to teach me what I didn't know - and most of all, that she wanted my help. I took a day or two to think it over, and fatefully filled out the volunteer form. I didn't know if I could be useful or how I could be useful, but I wanted to try.
Programming Is Awful
In the years months that followed, I spent a lot of time in @essential-randomness' DMs complaining about programmingā€¦ at least once I realized she wouldn't judge me. I was still very much doing things the hard way, taking hours to update a site to add a single link on all the pages. I knew there were easier methods, but I either couldn't find them or once I found them, they were filled with dense jargon which was terrifying.
"An all-in-one zero-javascript frontend architecture framework!" Is that even English? "A headless open-source CMS." Cool. Sounds good. "A full-stack SSG based on Jamstack extending React and integrating Rust-based JS." Those sure are words. With meanings. That someone knows. Not me, though.
I spent so much time looking at what sites claimed was documentation and losing my mind because I had no idea where to even start most of the time. With @essential-randomness' encouragement, I kept at it, experimenting with new things, and jumping in headfirst even when I had no idea what I was doing. And I was so glad. Where I used to struggle keeping one website updated, last year I managed to deploy and update 7 websites. Yeah, you read that right. It was amazing.
The new stuff made it all much, much easier.
An Idea Is Born
Meanwhile, we spent hours discussing why it was difficult to get fandom to try coding. Part of the barrier was the belief you must be some sort of genius or know math or that creative/humanities people can't do it. It is also partially coding communities being unfriendly to newbies and hobbyists; a culture which often thrives on debasing people's choices, deriding them for not understanding, and shouting rtfm (read the fucking manual) and lmgtfy (let me google that for you)- all of which are unhelpful at best and humiliating and abusive at worst. The tech dudebro culture can be unforgiving and mean.
The number of coding-based Discords I've left far outnumbers the ones I've stayed in.
We determined what fandom needed was a place for coders of all skill levels to come together to help and support one another; where they could learn to code and how to join open-source projects they love, and where they could make friends and connections and show off their projects whether they were new or experienced programmers.
And thusā€¦ Fandom Coders was born.
What About FujoGuide?
Of course, running a coding group and working on BobaBoard together means we spent a lot of time talking about the state of the web. We both lamented over poor documentation, jargon-rich tutorials, and guides which assume a baseline of knowledge most people don't have. What we needed to do was provide tutorials which start at the beginningā€¦ from the ground up (what is a terminal and how do I open it?) without skipping steps. What we needed to do was make those tutorials fun and appealing.
I don't remember exactly the journey it took to get us here if I'm honest. I have no clue who said it first. But I do remember I first started thinking about anthropomorphizing programming languages when we attempted to cast the languages as the Ouran High School boysā€¦ and again when I suggested we do a [TOP SECRET IN CASE WE DO IT] group project in Fandom Coders to help people learn about programming.
What I do know is that as last year ended, @essential-randomness became laser-focused on creating our gijinka and moving forward with FujoGuideā€¦ and I couldn't say no.
Okay, Butā€¦ Why Contribute?
To be honest, it's not just that I was around for the birth of the idea. It's ALL of the things in this post - the culmination of three years of frustration trying to figure out what I'm doing with coding, of wading through dense documentation, of wanting to give up before I even start. It's three years of dipping my toes into toxic techbro culture before running away. All added to decades of watching the web become corporate-sanitized, frustratingly difficult to customize, increasingly less fun, and overtly hostile to fans who dare enjoy sexual content.
To sum all of this up, it's the firm belief that we desperately need a resource like this. Something that's for us, by us. Something that builds fans up, instead of tears them down; that empowers them to create for themselves and their communities what no one is creating for them. It is a project I'm deeply passionate about.
And I can't wait until we can bring it to life for you all.
23 notes Ā· View notes
lovinglapislazuli Ā· 8 months ago
Text
How do you publish a comic on ComicFury? A beginner's overview
Tumblr media
So, you're on ComicFury, see all these cool comics and think you want to make one of your own? Worry not, it's actually pretty easy :D When you have signed up, got accostumed, even subscribed to a few comics, you can go to the "new webcomic site" page to get started
Tumblr media Tumblr media
The screenshots cover the whole page, but I will summarize for you: you can chose title, description, slogan, language, style & genre, tags, content warnings and moderation settings (such as allowing comments and ratings)
Tumblr media Tumblr media
Additionally, you have five different domain options to pick from: .thecomicseries.com, .the-comic.org, .thecomicstrip.org, .webcomic.ws, and .cfw.me
Tumblr media
Akin to tumblr's range of default themes to pick from, here you have to pick one default layout you will be able to customize later on (you can also work on the html if you're crafty enough)
Tumblr media Tumblr media Tumblr media
I personally picked "Rainbow Tables" because it already fits well enough the vibes of Wacky Races XD
Tumblr media
Once you're done, you will find your webcomic or webcomics (there's no limit on how many webcomic sites you can open as far as I know) in the "My Webcomics" page. Your webcomic will have, in addition, a profile page which will be the first thing people will see when they browse on comicfury
Tumblr media
By clicking on "manage webcomic", you can do many things ranging from uploading/editing/scheduling pages to changing the website's layout
Tumblr media Tumblr media
So now you want to upload some pages, right? Here we goooo
Tumblr media
You have to pick a title for the page (could even be just Utd 01, 02 and so on), you can chose a chapter it will belong to (if you want to create chapters) then you can upload up to 12 images in the same page! But remember there's size limits: for multiple images it's maximum 2MB each, for a single image it's maxmimum 5MB. It supports png, gif, jpg and jpeg formats. After putting it some keywords that will make your comic easier to find and adding a transcript of the page if you want, you can upload your page!
Tumblr media Tumblr media
Here's how you can create chapters by clicking on "manage chapters", you pick a name and you can add a description and a cover (that's optional though) As you can see, I have five chapters on my comic for example
Tumblr media
Now that you know the basis you can try it out yourself!! Mind you, it doesn't even have to be a comic, I've seen people create websites to host illustrations made for monthly challenges as well, or other webcomics can be made by photographing action figures, it can really be whatever you want! Have fun out there :D
Tumblr media
4 notes Ā· View notes
izicodes Ā· 2 years ago
Text
Tumblr media
āœ¦* Ėš Wednesday 16th November 2022 * Ėš āœ¦
For the second project of my #10HTMLPagesChallenge, I decided to create a Wiki-inspired article page of my favourite animal: The Snow Leopard! I wanted to make an article page but I still wanted inspiration from how Wikipedia set out their pages. The information did of course come from the actual Wikipedia because I donā€™t know that information myself unfortunately, but I did code the page itself from scratch.
Main components of the page:
Header
Headings and subheadingsĀ 
Images
Paragraphs of text
Hyperlinks
Table of content
Tumblr media
āœ¦* Ėš Links * Ėš āœ¦
The GitHub Repo | The page live | Software I used to screen record
The page consists of: 84.3% HTML and 15.7% CSS
Have a nice day/night and happy programming! āœ¦
>> Below the ā€˜keep readingā€™ link, I added screenshots of the project throughout coding it!
Tumblr media Tumblr media Tumblr media
36 notes Ā· View notes
blogpreetikatiyar Ā· 2 years ago
Text
WhatsApp Clone Using HTML and CSS
What does cloning a website means?
To make a copy
Cloning a website means copying or modifying the design or script of an existing website to create a new website. Website cloning allows a designer to create a website without writing scripts from scratch.
Any website can be cloned. You are also free to integrate some additional new features while cloning your website.
Cloning a website is one of the proven methods you can use to learn web development faster. It provides basic to advanced ideas about how websites work and work, and how to integrate them.
Letā€™s learn how to clone a website just using HTML5 and CSS in a simple way.Ā 
Will take an example of WhatsApp Website and will clone it.Ā 
WhatsApp is a free cross-platform messaging service. iPhone and Android smartphone, Mac and Windows PC users can call or exchange text, photo, voice and video messages with anyone in the world for free, regardless of the recipient's device. WhatsApp uses Wi-Fi connections to communicate across platforms. This differs from Apple iMessage and Messages by Google, which require a cellular network and Short Message Service (SMS).
Key WhatsApp TerminologyĀ 
Cross Platform
Messaging apps
End-to-end encryption
Video & Audio Calls
WhatsApp Business
HTML (Hyper Text Markup Language) ā€“
HTML stands for Hyper Text Markup Language that is standard markup language to create web pages and web-based applications
It represents the structure of a web page
It comprises of series of elements which tells the browser how to display the content
Basic Structure of a HTML Document ā€“
<!DOCTYPE html>
<html>
<head>
Ā  Ā  <title>WhatsApp Clone</title>
</head>
<body>
Ā  Ā  <h1>let's learn Web Development</h1>
Ā  Ā  <p>My first project - WhatsApp Cloning</p>
</body>
</html>
Letā€™s Explain the above code ā€“
- It is used to defines that the document is HTML5 document
- It is the root elements on an HTML Page
- It contains all the meta information about the HTML Page
- This element contains all the visible content of the page, such as paragraph, headlines, tables, list, etc.Ā 
- It defines the largest heading for any topic, it ranges from -
- It defines a paragraph in the HTML page
Elements ā€“Ā 
It is the collection of start and end tag, and in between content is inserted between them.Ā 
It major components areā€“Ā 
Opening Tag ā€“ Used to tell the browser where the content starts.Ā 
Closing Tag ā€“ Used to tell the browser where the content material ends.Ā 
Content ā€“ Whatever written inside the opening and closing tag is content.Ā 
Some Most Commonly used tags are ā€“Ā 
ā€“ Used to define a document or section, as it contains information related to titles and heading of related content.Ā 
ā€“ The navigation tag is used to declare navigation sections in HTML documents. Websites typically have a section dedicated to navigation links that allows users to move around the site
ā€“ Anchor tag is used for creating hyperlink on the webpage. It is used to link one web page from another.Ā 
ā€“ It is used to define a paragraph. Content written inside tag always starts from a new line.Ā 
ā€“ It is used to define heading of a web page. There are 6 different heading h1, h2, h3, h4, h5 and h6. H1 is the main heading and the biggest followed by h2, h3, h4, h5 and h6.
- It is used to group multiple elements together. It helps in applying CSS.Ā 
- Image tag is used to embed an image in a web page.Ā 
CSS (Cascading Style Sheet) ā€“Ā 
CSS stands for Cascading Style Sheets, that describes HTML elements that appear on screen, paper, or other media.Ā 
It used for designing web pages, in order to make web pages presentable.Ā 
It is standardized across Web Browsers and is one of the core languages of the open web system/technology.
CSS Selector ā€“Ā 
CSS Selectors are used to select or target the element that you want to style. Selectors are part of the CSS ruleset. CSS selectors select HTML elements by ID, class, type, attributes, etc.Ā 
Types of CSS Selectors ā€“Ā 
Element Selector ā€“ It selects the HTML elements directly using nameĀ 
ID Selector ā€“ It selects the id attribute of an element. ID is always unique, in the code. So, it is used to target and apply design to a specific or a unique element.Ā 
Class Selector - It selects the class attribute of an element. Unlike ID selector class selectors can be same of many elements.Ā 
Universal Selector ā€“ It selects all the elements of the webpage, and apply changes to it.Ā 
Group Selector ā€“ It is used when same style is to be applied on many elements. It helps in non-duplication of code.Ā 
Different ways of applying CSS -Ā 
CSS can be applied in different ways ā€“Ā 
Inline CSS ā€“Ā 
Styling is done using different attributed inside an element itself. It can be used to apply unique style for a single element.
<h1 style="color:blue;">Let's learn Web Development</h1>
Internal CSS ā€“
It is defined or written within the <style> element, nested instead <head> section of HTML document.Ā 
It is mainly used when need to apply CSS on a particular page.Ā 
<style type="text/css">
Ā  Ā  h1 {
Ā  Ā  Ā  color:blue;
Ā  Ā  }
</style>
External CSS ā€“
It is used to apply CSS on multiple pages. As all the styling is written in a different file with an extension ā€œ.cssā€ Example style.css.
<link rel="stylesheet" type="text/css" href="style.css">Ā 
It is written instead head tag.Ā 
For more detailed guide ā€“ Click hereĀ 
Letā€™s implement the above learnt concepts ā€“Ā 
In this example will clone a static page of WhatsApp using Internal CSS-Ā 
<!DOCTYPE html>
<html lang="en">
<head>
Ā  <style type="text/css">
Ā  Ā  :root {
Ā  Ā  Ā  font-size: 15px;
Ā  Ā  Ā  --primaryColor: #075e54;
Ā  Ā  Ā  --secondaryColor: #aaa9a8;
Ā  Ā  Ā  --tertierColor: #25d366;
Ā  Ā  }
Ā  Ā  * {
Ā  Ā  Ā  margin: 0;
Ā  Ā  Ā  padding: 0;
Ā  Ā  Ā  font-family: inherit;
Ā  Ā  Ā  font-size: inherit;
Ā  Ā  }
Ā  Ā  body {
Ā  Ā  Ā  font-family: Helvetica;
Ā  Ā  Ā  font-weight: 300;
Ā  Ā  }
Ā  Ā  img {
Ā  Ā  Ā  object-fit: cover;
Ā  Ā  Ā  width: 100%;
Ā  Ā  }
Ā  Ā  .container {
Ā  Ā  Ā  margin: 0 1.2em;
Ā  Ā  }
Ā  Ā  header {
Ā  Ā  Ā  background-color: var(--primaryColor);
Ā  Ā  Ā  padding: 1.4em 0;
Ā  Ā  }
Ā  Ā  header .container {
Ā  Ā  Ā  display: flex;
Ā  Ā  Ā  justify-content: space-between;
Ā  Ā  Ā  align-items: center;
Ā  Ā  Ā  color: white;
Ā  Ā  }
Ā  Ā  header .logo {
Ā  Ā  Ā  font-size: 1.5rem;
Ā  Ā  Ā  font-weight: 300;
Ā  Ā  }
Ā  Ā  header .menu {
Ā  Ā  Ā  margin-left: 18px;
Ā  Ā  }
Ā  Ā  .nav-bar {
Ā  Ā  Ā  background-color: var(--primaryColor);
Ā  Ā  Ā  margin-bottom: 8px;
Ā  Ā  Ā  display: grid;
Ā  Ā  Ā  grid-template-columns: 16% 28% 28% 28%;
Ā  Ā  Ā  justify-items: space-between;
Ā  Ā  Ā  align-items: center;
Ā  Ā  Ā  text-align: center;
Ā  Ā  Ā  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
Ā  Ā  Ā  Ā  rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
Ā  Ā  }
Ā  Ā  .nav {
Ā  Ā  Ā  color: var(--secondaryColor);
Ā  Ā  Ā  text-transform: uppercase;
Ā  Ā  Ā  padding: 1em 0;
Ā  Ā  }
Ā  Ā  .nav.active {
Ā  Ā  Ā  border-bottom: 3px solid white;
Ā  Ā  Ā  color: white;
Ā  Ā  }
Ā  Ā  .chat {
Ā  Ā  Ā  padding: 1em 0;
Ā  Ā  Ā  display: flex;
Ā  Ā  Ā  justify-content: space-between;
Ā  Ā  }
Ā  Ā  .chat .info {
Ā  Ā  Ā  display: flex;
Ā  Ā  }
Ā  Ā  .chat .username {
Ā  Ā  Ā  font-size: 1.2rem;
Ā  Ā  Ā  margin-bottom: 5px;
Ā  Ā  Ā  font-weight: 300;
Ā  Ā  }
Ā  Ā  .chat .recent-chat {
Ā  Ā  Ā  color: gray;
Ā  Ā  Ā  max-width: 200px;
Ā  Ā  Ā  text-overflow: ellipsis;
Ā  Ā  Ā  overflow: hidden;
Ā  Ā  Ā  white-space: nowrap;
Ā  Ā  }
Ā  Ā  .chat .recent-chat .read {
Ā  Ā  Ā  color: #34b7f1;
Ā  Ā  }
Ā  Ā  .chat .photo {
Ā  Ā  Ā  width: 55px;
Ā  Ā  Ā  height: 55px;
Ā  Ā  Ā  border-radius: 50%;
Ā  Ā  Ā  margin-right: 18px;
Ā  Ā  }
Ā  Ā  .chat .recent-chat-time {
Ā  Ā  Ā  font-size: 12px;
Ā  Ā  Ā  color: gray;
Ā  Ā  }
Ā  Ā  .contact-button {
Ā  Ā  Ā  padding: 1em;
Ā  Ā  Ā  border: 0;
Ā  Ā  Ā  border-radius: 50%;
Ā  Ā  Ā  color: white;
Ā  Ā  Ā  transform: rotate(0deg);
Ā  Ā  Ā  font-size: 1.3rem;
Ā  Ā  Ā  position: fixed;
Ā  Ā  Ā  bottom: 20px;
Ā  Ā  Ā  right: 1.2em;
Ā  Ā  Ā  background-color: var(--tertierColor);
Ā  Ā  }
Ā  </style>
Ā  <title>WhatsApp</title>
Ā  <link rel="icon" type="image/x-icon" href="wp.png" />
Ā  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
</head>
<!-- Body section starte here -->
<body>
Ā  <header>
Ā  Ā  <div class="container">
Ā  Ā  Ā  <h1 class="logo">WhatsApp</h1>
Ā  Ā  Ā  <div>
Ā  Ā  Ā  Ā  <a role="button" class="bi bi-search icon"></a>
Ā  Ā  Ā  Ā  <a role="button" class="bi bi-three-dots-vertical icon menu"></a>
Ā  Ā  Ā  </div>
Ā  Ā  </div>
Ā  </header>
Ā  <nav class="nav-bar">
Ā  Ā  <span class="bi bi-camera-fill nav"></span>
Ā  Ā  <a role="button" class="nav active">Chats</a>
Ā  Ā  <a role="button" class="nav">Status</a>
Ā  Ā  <a role="button" class="nav">Calls</a>
Ā  </nav>
Ā  <!-- Chat section starts here -->
Ā  <!-- chat 1 -->
Ā  <section class="chats">
Ā  Ā  <div class="container">
Ā  Ā  Ā  <div class="chat">
Ā  Ā  Ā  Ā  <div class="info">
Ā  Ā  Ā  Ā  Ā  <!-- <img class="photo" src="user-2.png" alt="User" /> -->
Ā  Ā  Ā  Ā  Ā  <img class="photo" src="user-2.png" alt="User" />
Ā  Ā  Ā  Ā  Ā  <div>
Ā  Ā  Ā  Ā  Ā  Ā  <h6 class="username">Anurag</h6>
Ā  Ā  Ā  Ā  Ā  Ā  <p class="recent-chat">
Ā  Ā  Ā  Ā  Ā  Ā  Ā  <i class="bi bi-check2-all"></i> Yes, i remembered that! šŸ˜„
Ā  Ā  Ā  Ā  Ā  Ā  </p>
Ā  Ā  Ā  Ā  Ā  </div>
Ā  Ā  Ā  Ā  </div>
Ā  Ā  Ā  Ā  <small class="recent-chat-time"> 04:20 PM </small>
Ā  Ā  Ā  </div>
Ā  Ā  Ā  <!-- chat 2 -->
Ā  Ā  Ā  <div class="chat">
Ā  Ā  Ā  Ā  <div class="info">
Ā  Ā  Ā  Ā  Ā  <img class="photo" src="user-2.png" alt="User" />
Ā  Ā  Ā  Ā  Ā  <div>
Ā  Ā  Ā  Ā  Ā  Ā  <h6 class="username">Cipher</h6>
Ā  Ā  Ā  Ā  Ā  Ā  <p class="recent-chat">Do you wanna hangout?</p>
Ā  Ā  Ā  Ā  Ā  </div>
Ā  Ā  Ā  Ā  </div>
Ā  Ā  Ā  Ā  <small class="recent-chat-time"> 10:20 AM </small>
Ā  Ā  Ā  </div>
Ā  Ā  Ā  <!-- chat 3 -->
Ā  Ā  Ā  <div class="chat">
Ā  Ā  Ā  Ā  <div class="info">
Ā  Ā  Ā  Ā  Ā  <img class="photo" src="user-2.png" alt="User" />
Ā  Ā  Ā  Ā  Ā  <div>
Ā  Ā  Ā  Ā  Ā  Ā  <h6 class="username">CipherSchools</h6>
Ā  Ā  Ā  Ā  Ā  Ā  <p class="recent-chat">
Ā  Ā  Ā  Ā  Ā  Ā  Ā  <i class="bi bi-check2-all read"></i> Hey bro, time to band!
Ā  Ā  Ā  Ā  Ā  Ā  Ā  šŸ„šŸŽø
Ā  Ā  Ā  Ā  Ā  Ā  </p>
Ā  Ā  Ā  Ā  Ā  </div>
Ā  Ā  Ā  Ā  </div>
Ā  Ā  Ā  Ā  <small class="recent-chat-time"> Yesterday </small>
Ā  Ā  Ā  </div>
Ā  Ā  Ā  <!-- chat 4 -->
Ā  Ā  Ā  <div class="chat">
Ā  Ā  Ā  Ā  <div class="info">
Ā  Ā  Ā  Ā  Ā  <img class="photo" src="user-2.png" alt="User" />
Ā  Ā  Ā  Ā  Ā  <div>
Ā  Ā  Ā  Ā  Ā  Ā  <h6 class="username">Schools</h6>
Ā  Ā  Ā  Ā  Ā  Ā  <p class="recent-chat">Hey, where are you now? šŸ™„</p>
Ā  Ā  Ā  Ā  Ā  </div>
Ā  Ā  Ā  Ā  </div>
Ā  Ā  Ā  Ā  <small class="recent-chat-time"> 7/22/21 </small>
Ā  Ā  Ā  </div>
Ā  Ā  Ā  <!-- chat 5 -->
Ā  Ā  Ā  <div class="chat">
Ā  Ā  Ā  Ā  <div class="info">
Ā  Ā  Ā  Ā  Ā  <img class="photo" src="user-2.png" alt="User" />
Ā  Ā  Ā  Ā  Ā  <div>
Ā  Ā  Ā  Ā  Ā  Ā  <h6 class="username">Anurag CS</h6>
Ā  Ā  Ā  Ā  Ā  Ā  <p class="recent-chat">
Ā  Ā  Ā  Ā  Ā  Ā  Ā  <i class="bi bi-check2-all read"></i> May i borrow your games
Ā  Ā  Ā  Ā  Ā  Ā  Ā  for 2 weeks?
Ā  Ā  Ā  Ā  Ā  Ā  </p>
Ā  Ā  Ā  Ā  Ā  </div>
Ā  Ā  Ā  Ā  </div>
Ā  Ā  Ā  Ā  <small class="recent-chat-time"> 7/22/21 </small>
Ā  Ā  Ā  </div>
Ā  Ā  Ā  <!-- Contact button on the whatsapp -->
Ā  Ā  Ā  <button type="button" class="bi bi-chat-right-text-fill contact-button"></button>
Ā  Ā  </div>
Ā  </section>
</body>
</html>
23 notes Ā· View notes
manonamora-if Ā· 2 years ago
Text
Post-comp-mortem
Tumblr media
I was debating on whether to publish this post before or after the voting ended. I was wondering if it would influence the player's opinion of the game too much/at all. Even after seeing a few popping up on the Forum, I still felt a bit weird about releasing mine. I was also hoping to get a few more reviews/comments as well :P
If you haven't checked the IF Comp entries this year, I really recommend it!
This post will be hella long too. I am not kidding here, don't click Keep Reading/scroll further if you don't have a drink and are seated, it is almost a novella below. Also, it is a mix of very dry summary/emotional reaction. Like my entry, it might look like a mess. There is a TLDR on the Forum.
Table of Content:
1- Some Points about creation and process 2- So, did I manage to do what I wanted? 3- And what was the verdict? _ _ a. The Reviews _ _ b. Result and Further comments 4- What's the future for TTTT? 5- Some fun tit bits... 6- In Conclusion,
For people who don't follow me here (or only started following me recently), I've only been in the IF Community for about a year and a half by now, with my first game (Meeting the Parents) published in early June 2021. I have only created things with Twine (and mainly on SugarCube) and had not had any coding knowledge before starting my own project.
I- Some points about creation and process.
The Thick Table Tavern was actually conceptualised back in 2021, when I wanted to dip my toes into a bigger competition after completing Exquisite Cadaver. Since I had created MtP and EC (and the first part of CRWL) pretty quickly, I thought the two months ahead of me would be plenty enough to create a whole new game and submit it.
I've always loved Fantasy settings and RPGs, but often wondered why there were very little games centred around less heroic occupations or what would be the life of an NPC, like a bartender in a tavern (probably because it might be pretty boring). I also have very fond memories of those Flash games where you would build meals/drinks (RIP Flash).
I knew from the get-go that two components where going to be central to the game: the drink mixing aspect and your interactions with the NPCs. Instead of having random customers dropping in, I thought of 5 fleshed-out NPCs which would come, talk a bit with you about their story and order drinks. You might have been able to influence them a bit. But that would be it. Above all, I wanted a chill and light vibe, with Trope-y characters (ex: a coward but flirty bard, a pirate always in trouble, etc). I wanted people to relax and have some light fun, and enjoy themselves.
I worked on the project for about 2 weeks, having submitted my intent, started testing some code for the bartending side and written the introduction of the game and 2 characters (give or take 3k words).
Then I kind of... burned out.
Fast forward this summer, and I am back working on the project. Granted, I was not fully into the game at that point, since I was working on the re-writes of EC at the same time too. But I had sketched out the UI and was thinking about the code during writing EC. And I was talking my friends ears off about it too. What I knew for sure, is that the Bartending experience would be the core gameplay/interactivity of the game, with the story wrapped around it (giving you a reason to mix drinks).
Tumblr media Tumblr media Tumblr media
Here are some pictures of my very pretty handwriting about the UI and how the story/bartending should be formatted/coded.
Throughout July, I would take breaks from writing EC to set up the UI for this game (or create a SugarCube template because I have not self-control), learn more about grids, flex boxes and class hierarchy. [No joke, I learned A LOT about CSS/HTML with this game!]
August came around and my other projects were put on hold so I could focus on TTTT (I still did other stuffs, because again, no self-control). I probably didn't start writing until the last third of August, as I researched drinks recipe (I still have a form for future drinks addition, you can add your favourite), made lil' bottles and set the bar. Even then, the amount written was pretty marginal compared to September.
September was wild. I wrote about 45k words total during that month, averaging 2.5k/days by the latter half of the month. Not all that I wrote ended up being included in the entry, as I had to cut some NPCs since I didn't feel they were ready (which included a travelling salesman monk). Being oh so lucky, I caught Covid just as the last week of the comp started. And since I hate following my/sound advice, I kept writing and coding through that and insomnia until the last hours of the deadline. This was obviously reeeeaaaaallly dumb, it made me super exhausted after the whole thing, but I still pushed myself and even with the whole hazy brain I managed to submit the game with... a bunch of bugs (and a lot more typos). In retrospect, that should have been my sign to pause the project and submit next year.
All and all, I don't think I spent more than 3 months on the game, during which half of that time was being shared with other projects (old and new ones). Still, my goal was to submit a working game... and to rank in the top-half of the ranking overall.
II- So, did I manage to do what I wanted?
Short answer: definitely not. But I gave it my best shot...
Long answer: I managed to do more than I thought I would, especially as the deadline crept closer. My plan from the beginning (of this year's try, not the original beginning) was to build the game in 3 stages:
The basic create/serve drinks with no interaction with customers.
The NPCs you only meet once and appear randomly, with choices that have little repercussion on that NPC and story overall.
The Big NPCs who come back multiple times (4/5 times, depending on their story) with choices that impact both the player and the NPC. And you build a bit of relationship with those.
The first stage took a while mainly because I had to create a whole bar from scratch. I could have chosen to stick with a simple design/asset for the bottles (like the one you could see in my first attempts of the bar), but damn, this is the IF Comp, not some basic Jam... Go big or go home! While I didn't struggle too much with the mixing part, it was the serving/check the ingredients and optimisation of the code that gave me a few headaches. {And still does...}
The second step was thwarted almost as soon as I started, when I realised TTTT needed a lot more fluff parts to link each game block (morning, between drinks, end of day) to make the experience smoother. Like the randomness of the drinks I didn't want players becoming bored with starting/ending each days. So there's a lot there that took priority for a while. __Still, I managed to include some NPCs. Out of the 11-ish NPC ideas I had, one was fully included (the oldie couple), one was a re-hash of the last year's version of the Adventurer (Dylan), and one was added last minute out of frustration (the 4th Wall break). The Fortune Teller doesn't really count in my book, as she was always part of the Introduction (and written almost completely last year).
And the last one... *throw hands in the air*
I knew it was going to be very hard to include this one, especially since it required a bit more planning for the day (and work around the randomisation) and having to take into account the different variations. Not being able to include this one ended up not bothering me as much as I thought it would be. I get to keep it for an after-comp update... :D
What I manage to include which was not planned was, like I mentioned, the random linking bits and the long-form Endings. None of them were really interactive (nor had much choice aside from knocking the sign or setting the tip jar), and may have thrown the player off when everything gets randomised by Day 2. There is only the Setting Up/Cleaning the Tavern where you can get the same/similar enough text.
Ezabell and Brom were also not planned at all. In last's year's version, out of the tavern's employees, you'd only interact with your Boss (and Filessandro as one of the recurrent NPCs). I was really happy with Ez especially, and how much colour she brought to the tavern (and writing banter with her was so fun!). She was probably one of my favourite character to write (along with the Oldies).
There were also a lot more things I had to cut for time, whether it was writing or coding. This is a non-exhaustive list: the Tip Jar getting stolen event, The Watcher coming half-way through the game to check on your progress, having more options/choices when talking to people (patrons and employees), having an Ending Recap for the NPCs, having a choice at the End on whether to buy/pursue your original background choice...
So at the end, the agency stayed quite low (where most consequences happen when you create drinks). After the first day, there is very little new choices.
There were many things with the final version that made me frustrated, among others:
Misusing my time, forcing me to cut back on what I wanted to include, just because something new and shiny took over my brain (it's not new, I can have the attention of a toddler sometimes).
Definitely not realising early how much I was trying to include from the get go, in terms of words and code, and how much time I would need to manage it all (lol at me thinking the summer would be enough for this chunky of a game).
The Watcher and Fortune Teller's spiel heavily relied on the player having choices with consequences talking to the recurrent patrons (Step 3) and proposing activities/giving advice to the one-time NPCs (Step 2). Since 3 was scraped, and 2 was not finished... I ended up setting some mystery for pretty much nothing...
Not having a more rigorous proofreading period. A lot of what was written was done so very late into the process, and while I did use some proofreading programs, I should have taken more time to re-read my text, edit it more and correct it all. It is obvious where I put more effort/love... (yes, it's the Oldies)
Have beta testers a bit earlier to catch all the bugs I corrected on Day 1/2 of the voting period (that's related to the time management points above).
Not being able to have more NPC's during the day (adding 3-4 one-timers to the game more would have been great!)
Not having time to include music :(
Getting Covid... (not that I could do much about that :P)
I could have chosen to fix a lot of those issues/add more content half-way through the Comp, but it felt a bit like cheating... And honestly, I was too tired after that.
Still, there are many things I am very proud of achieving:
Actually submit an entry to the Comp (even with the bugs/typos still there...) !
I created a completely new UI all by myself from scratch, which has completely different designs depending on which passage the player is in (Title page, Main Story, Bar, The Notebook/Frenzy List).
Have I talked everyone's ears off about the Bar yet? Definitely not. Because it is hella cool. I spend a lot (maybe too much time) on it, editing each bottle/box so they would feel distinct enough from each other. My first attempt last year was... a whole mess with list points... ew...
I started dabbling more with CSS animations (the menu button in the Main Story, the text shaking, the starting page, etc...), all of which required A LOT of tweaking to get right (and including an accessible option too).
Creating more complicated widgets and learning how to optimise my code (I managed to remove over 500 lines of TwineScript code at once...) which was a fun puzzle to be honest.
Adding very last-minute addition with the Arcade Mode and the Restocking (which taught me about messing with CSS classes at random), which I think was a pretty good addition.
Adding as much accessibility tools as I could (key binding, toggles for animation, text formatting, etc...).
Look at this Passage Map! There's a lot of text/code in those...
Finally... Not submitting the game with only the Bar mixing as the whole game. The mixing mechanic without any text would probably not have gone over well.
Overall, a lot of frustration but also a lot of pride (I definitely felt that last one mixed with anxiety when I pressed the Upload button the first time). I was really impressed with myself for being able to do this much in such short amount of time (considering everything).
Would the game have benefitted from a bit more time, attention and love? Definitely (especially, the writing). Do I regret submitting it like this? Not even one bit! There were a lot of new things I hadn't done before or even came across with my other projects until now. I've gone even deeper into Sugarcube, CSS and even some JavaScript (my nemesis)!
III- And what was the verdict?
Before going into the reviews/comments I got publicly/privately or the ranking/votes (apart from 3B, I wrote this post before the results), I won in the eyes of some important people (to me). Of course the ranking/votes matter to a certain extent, but I feel like I already had a little victory even before the reveal of the ranking. My biggest offline supporters, some of whom never played any IF before (nor knew it existed), absolutely adored the game, especially the bartending bits. My folks were so amazed about what I done (especially as their view of the gaming world was pretty... narrow/negative to say the least). And I was so happy they tried something they never done before too! I'm glad I got to introduce IF to new peeps :P
There was even a small contest with my family on who could get the most drinks done in the Timed Arcade Mode (the 38 cocktail highscore has yet to be broken)! Also, bless my sister for spamming her friends to play the games... They even sent her messages back about what they played and how cool IF is :)
A- The Reviews
[Again, this was written before the results] According to the Review Spreadsheet, I have gotten 13 reviews on the Forum/IFDB: 7 on the Forum (?), 5 on IFDB (9 ratings). This is about the average amount of reviews games got this year. I received a few more messages through Tumblr and Discord about my entry as well. (Note: one review disappeared from IFDB during the voting period)
First of all, I want to thank again every one of you who not only tried the game, left a vote, and for some of you even a review. Everyone who took their time to share what they thought of my little bartender simulation and to answer some question when they stumbled upon some bugs too.
Here are some cute titles of reviews I got: Innovative Bartending Simulator, A lengthy and somewhat heartwarming game about running a tavern, Bar game of my dreams, Lots to like with this one, Beautiful Gameplay, Fun Mixing Minigames...
A few reviewers "played the game" and included drink puns in their reviews, which I absolutely adored. One was really nice and pushed through their first impression of the game to give it a fair shot (I put a nauseating gif in the starting screen, which couldn't be turned off until the next passage...), when they didn't have to.
I should probably mention the elephant in the room before getting into the comments: out of the reviewers on the Forum, only one or two did not run into what we called the Groundhog Day bug (the Brom event repeating itself for no reason), while on Tumblr, only one person ran into it (and even then it was with only one of their playthrough) AS FAR AS I KNOW since I didn't get more reports. Sooo... that really sucked so see :/ Fun fact: Covid was kicking my ass while I was writing that event. Maybe it was a sign...
That bug was something I could not recreate for the life of me, nor did it appear on any savefile I was able to get my hands on (thank you again!). Unluckily for me too, this looked like it was a cache bug: yay for the code not being the culprit (Thanks Twine Discord), booo because this was something that could not really be fixed because it was not browser/extension specific (emptying the cache helped). This obviously/probably affected more people's rating of the game to no fault of my own nor theirs. Just bad luck. The only common denominator here seem to be the IFComp website. Maybe it was the source of the issue? But at the same time I didn't get anymore reports after that... I can't say for sure until I upload the game on itch and more people raise the same issue. Also it worked meh on tablets, my mom showed me... Impossible to click on the garnishes...
SO! I rounded all the comments I got from everywhere (save for the offline one, because they are more than bias and just said I was the best; they swore they were fair in the ratings tho) on a spreadsheet and made two columns: what worked and what didn't. I wanted to address the comments in a Post-Mortem rather than answering them on the Forum too much, partly to avoid writing in an emotional state. I will be paraphrasing below, since quite a few aspects were shared by multiple people. Overall, the reviews were quite positive, ranging from very neutral to overly positive.
The Bartending Mini-Game
Let's start with the Bartending Mixing-bit. From the reviews, it was a bit of a coin flipper. Some REALLY enjoyed the mixing aspect, and how relaxing and fun it felt; others found it too grind-y and monotonous. This is not surprising, game mechanics are very much a personal preference. Though having a randomiser during Frenzy giving you up to 9 drinks meant that someone could end up with making 20 drinks during one day... which is a lot considering the size of story.
The difficulty settings were not as challenging as it appeared, nor did it give any sense of progression in skills. While the latter was partly explained in the story (you've been a bartender for a while, you should know your stuff), it was mainly because I did not think about that at all (or how to implement it). Similarly with the Difficulty Settings, I thought the differences would be large/annoying enough between each of them, but it wasn't really [I did get some interesting ideas from the reviews tho!].
When it came to combining ingredients and serving drinks, some thought it was great fun, other felt some responses were missing. The random colours appearing can be confusing (it's just because it's fantasy ~magic~). And outside of serving drinks to named NPCs, you do not know whether you've done well when serving the drink until the end of the day (that'll be easily fixed with some notifications).
There was a little hitch with the UI, with the longer recipes requiring a bit of scrolling to find the last ingredients (I knew about that, and thought it would still be ok to be left as is, turns out not really :/ ) and some notifications not appearing (known issue with the macro used when clicking too much in a short span). Still the overall visual was really well received, and people really liked the names of drinks and how diverse they were (there were 29 when I submitted). I also forgot cherries were not berries... I should rename the pot Red Fruits instead later...
Shoutout to the Arcade Mode being a bit of an MVP here, making people compete for highscores! (And people sending me good points to make it more fun)
The Writing
This was where I lost a lot of peeps (and for fair reasons). The biggest gripe people had was related to the writing needed a lot more proofreading/edits, as it made reading distracting at best, confusing and boring at worst. This is not new to me, I've had comments about typos on other projects too (there's even a special section to report typos in my usual bug forms...), but it was worse here because of the time constraint (inflicted on myself, having written most of the game in September). Blaming it on English being my second language is not even fair, I could have asked other people to take a look at the text {Some users in the Forum do that!}. Honestly, compared to when I started or where I was even at the start of this year... I've progressed a lot (ahem... current version of MtP still online being a whole mess and a half). I still have a lot to learn and grow in my style, but I'm getting there!
Quite a few reviews advised to cut 25% of text in each passage, as the prose was either awkward, too long, threw the pacing off, or was unnecessary. Again, not really news to me. I am a very descriptive writer, I like to go on and on about small details. [Look at this review...] Still, while I will definitely edit the text (since it is necessary), I don't think the amount of text will be cut this drastically (I like my descriptions, thank you very much :P).
On the plus side, people enjoyed the snarky and humorous tone of the story, making for a fun experience overall. Yay for keeping a consistent funny tone :D
I've had lovely compliments about the dialogue, which is amazing, because it's a thing I struggle with the most (aside from proofreading, lol). It's so hard to be sure to have distinct voices between characters (and keep that up), have a good pace/back and forth between them, etc... I think working on the EC re-writes just before (which is 95% dialogue) helped me a lot there.
The Story
I've also had positive return on the story itself, as it was playful and chill. Some even found the story immersive with cute and fun storylets. Honestly, I tried to have fun while writing. Each tit bit was framed to bring a laugh or a smile in mind. This was the tone I wanted throughout the whole game anyway, and I am glad people vibed with it. Some also found the worldbuilding intriguing (I got quite a handful of asks about it after the release).
On the other hand, some found the story having nothing to say, with a lot of missed opportunity in the theme and concepts introduced leading to nothing or being brushed off quickly. A large part of it has to do with me cutting a lot of the story to make the deadline, removing a lot of choices (because variations would require more writing and time). The rest of it being just... life. The game's story is essentially a slice-of-life. Life doesn't always make sense and is often just random. There's not point to it.
Still the replayability of the game was noted, with the amount of randomisation of the fluff text. I made sure there was enough variation for players who needed the full 14 days to complete the game (sooo much writing šŸ˜­).
Another issue related to the pacing, was with the introductions. Because I did not just do one, I made two of them. It made sense in my head, since I was probably thinking wayyyy to ahead (with all the planned aspects of the game included) and thought it would be the best way to introduce, well, everything. But it made the first day needing more than 30min to complete (which is already 1/4 of the allocated voting play per game). The first intro felt very long and required a lot of clicking (or space-bar pressing with the keybinds). Both were very disjointed with the other. And fair... after the first day, it's pretty much thought of being a bad dream (even when you meet the 4th wall character).
With how the story was written, it left very little choice for the players to have (if you disregard choosing to serve a good drink or not), with most having little consequences on the story as a whole. The only thing driving your end result was either running into a bug (fixed) or getting the required amount of gold. This was not always noted positively. Again, understandable, I had to cut a lot more than planed to make the deadline, turning the MC's agency into a very minimal state. Still, some reviewers did not mind or realised how little choice you actually have (thank you Mixing section and Characters for the distraction!).
The Characters
My pride and joy. And also more positive comments there. Almost everyone had something nice to say about the characters, whether it was finding them overall quite fun or well-constructed. There were so many lovely adjectives used about the NPCs, I was so so so so happy people liked them as much as I did.
From the storylets, the Oldie Adventurers seemed to be everyone's favourite (they were mine as well) and the 4th Wall Character got a good laugh (yay for self-deprecating humour). Getting this kind of response was SO validating.
Aside from it, the tavern's employees/boss were also well received, even if they were quite the stereotypical kinds. Hey... If it works, it works!
Some found the camaraderie between the tavern peeps touching (which works even more if you get a "good" ending). A few notes were given on the confusing appearance of Brom, which is fair because depending on the randomisation of the text you'd get introduced to him as the cook or you'd just think he'd be a weirdo doing strange things in the tavern. Similarly, the characterisation of the boss felt confusing for some, going from incompetent hardass to loving "uncle" for no reason.
At least one point in this section should be taken for the character of the Watcher. A character you only see at the start and end of the story, does not have any impact on the game aside from introducing you and asking you how you liked your run. Understandably, it was a let down. I used the character a bit as an introduction of the character (I had more MC characterisation choices in mind), with the plan of commenting more on your choices in the ending... which doesn't really happen because there are very few choices to talk about. Still, I stand by my choice of keeping the Watcher. It gives it a bit of a mystical air you'd have in a fantasy setting :P My first idea with the Watcher was to make it a Dungeon Master and the player is a TTRPG character... but after writing it it felt way too weird, so I scrapped it.
The Interface
I don't think I've had anything but compliments about the UI and visuals of the games. From the Bar and its bottles, to the different pages, it was praised for the polish and care I gave the game. Considering I spent a lot of time on it, it was nice to hear about this. People found the interface welcoming and colourful. The UI was consistent throughout the game, and little was left to be desired. Someone even said it was the prettiest Twine game they had ever seen, while another found it having the most accomplished visual designed by pushing the rules of CSS this much.
šŸ˜Š
I've had good return about the accessibility points: especially the keybinding (you technically don't need a mouse to play the game), which is not often present in Choice-Based games, and the font options for ease of reading.
Aside from an obvious accessibility mistake I need to fix (the already mentioned nauseating intro gif), there was not much to add about it. It was crisp and high-production and definitely took too much time making it look the way it did.
OH: the Tarot Cards. Even if it amounted to nothing (because why would it... :P ), people liked the Tarot Cards :D
Miscellaneous Comments
Here is the part where I discuss comments I didn't know where to file.
The randomised encounters added to the bartending experience for some (since this is what would happen in real life...), but it also meant that some players did not get to see some characters. While the randomisation helped the replayability aspect, if the player did not enjoy the introduction it would have been unlikely they would press the restart button (I didn't put a fast play link for that...).
Similarly, some enjoyed the structure of each day, while others found the repetitiveness of the tasks boring. Like with the Mixing part, this might be more of a personal preference, it did not really seem to skew one way or another.
Having the Restoking event or the Tip Jar amounting to nothing was also disappointing (latter cut for time, the former only realised after I submitted the game -would need to re-edit the whole bar code to make it work as intended).
There were a few other frustrating bugs (the raised ones were taken care of as soon as I got them, but it included the gold not tracking properly, which always gave the player a bad ending), but with a game this large and complex (in the coding part), I am sure there are still some here and there. I am still dedicated to polish this game (see the final section) but some things will take a while to implement/write. The gold tracker was set one line too high on the code page.... sigh
A last point I wanted to address here was about TTTT not knowing what kind of game it wants to be. To me it is obviously clear, since I made it, but I think I now understand why players might feel that way (I didn't when the review dropped, it even made me a bit angry, even if the comment held some truth). The game starts with a mysterious character never seen until the end, and the mystery amounts to nothing as the player is left in the dark (pun). Then, we move to a more slice-of-life-y fantasy setting with a bartending sim. Then you serve a Fortune Teller that pushes the idea of agency, which goes nowhere because there are virtually no real choices in the game. Aside from getting little to no tips, the Bartending section does not change nor indicate how you are doing. Then you flip between light-hearted storylets and others with more dark undertone. Repeat until you reach an ending. When experienced that way, yeah... what's that game about? What does it want to do? What's the point of it? __Frankly, there's no point to the game, aside from chilling at a bar, making drinks and talk to people. Winning or losing does not mean life/death, you don't hurt anyone really (unless you make terrible drinks, but even then). It's about the vibe more than anything else. Relax and enjoy and mix some ingredients.
So, what, then?
While a very reductive and deprecating conclusion would be that my entry was all show and no substance, it would be misrepresenting a lot of positive aspects of the game. It is definitely very Show but the Substance is lacking in some part (duh, since I cut a lot) or need some extra care for it to reach what it should have been.
I kinda shot myself in the foot by focusing so much time/effort on making sure the bartending experience and UI was not only working fine but that it was visually pleasing, since it meant rushing through writing a whole game in such short amount of time. It might have given quite a few player too high of an expectation on what the game would be (though I tried to warn it in my blurb that it was more of a chill type of game). I was too ambitious with what I wanted to do with this game, especially more in the time frame. It happened in other Jams (for EC and SPS IH). Unfortunately, it didn't pay off here.
A huge saving grace, it seemed, was found in the characters (outside of the Watcher and maybe the Fortune Teller). Had they not be charming or interesting, TTTT would have done much worse than it did.
Overall, it worked for some people and not for others. Even if it didn't work for some, they were kind enough to leave me extensive reviews about what didn't work for them and what they would have done to enhance the gameplay (thk u šŸ’š). And even when it worked, I got some lovely suggestions to make the game even better.
But how did I handle it all?
I did not, because I never do :P
With this edition of the IFComp being my first, it was honestly nerve-wracking. The IFComp is considered the SuperBowl/Olympics of IF and amazing pieces of IF have been released during the previous editions. Before I submitted mine, I knew a few other participants who had submitted before were planning on having an entry (and I really like their works). It was also going to be my first time getting reviews outside of essentially the "chill" Tumblr/Itch crowd. I had seen those long reviews on IFDB around Comp season and honestly it scared me a bit (even if everyone were so very lovely).
As the reviews were dropping in, I was wondering if maybe I should have forgone submitting (or even withdrawing), spent more time on the game (I really should have) and submitted at the SpringThing instead. My entry had nothing to say, it was just there, sipping on a cocktail and enjoying the vibes. This feeling got increasingly worse when I played other entries and compared my work to theirs (so many amazing ones).
My goal was to reach the top-half of the ranking (this year, the lowest ranking for half would have been 35?). Half-way through October, I was dead-sure that I wouldn't even reach that rank. Now that we are hours away from the Voting Deadline, I think it will be just fine. It won't be so good that I will reach top 10, but that reasonable starting goal will be doable. Though I might be a tad disappointed if I don't...
B- Results and Further Comments
It is now Sunday 20th. The results dropped yesterday... 37th out of 70. Honestly, I can't hide I was disappointed a tad. I was this close to reach my goal (by 2 spots). I think I am more disappointed I was so close to this goal and didn't reach it more than I didn't rank high.
For anyone interested (though I already posted it yesterday, this is a screenshot of how the voting went:
Tumblr media
I was kinda surprised to see 1s and 2s in there. Though, sure if judges played during the first days, when I was still ironing out some bugs, it's understandable. There was even someone in the anonymous comments who encountered that Ground-hog Day bug (I wonder if they left a review, because I didn't receive anything about this one outside of the reviews/one ask on Tumblr). Someone else had ran into a strange bug with the Fortune teller has well (again never heard about this one either...). Of course, everyone has their metrics... but 1 is pretty much unplayable/doesn't belong in the Comp... and I don't know. It's not sitting right with me because TTTT doesn't feel like either? _ _ At the end, everyone has an opinion. If they really hated the experience, so be it. You can't please everyone... *shrug* Looking at the curve, I was a tinsy disappointed there were not 10s, it would have made the curve so much more satisfying to watch... I think my family's votes looked too much like spam as well (or they didn't fill in their form correctly), cause they ranted their score was not there after I sent them the result. Bless them, they tried.
Regarding the anonymous comments, there wasn't much that stood out that hadn't been spelt out for me in the reviews/direct feedback: UI great, story meh, atmosphere is nice, needs more proofreading/pruning of the text, bartending is fun/tedious (this is really a coin toss damn). My favourite comment: as-is it's borderline unreadable.
The most interesting comment I got out of it was whether my entry should be considered a point-and-click rather than interactive fiction. I think I understand where that reviewer is coming from: you lack interactivity/choice during the story bits, and that is compensated by the bar mini-game being, well, point to the bottle and click to serve. Still, I would love to discuss more about this with that reviewer (or anyone really). Is point-and-click IF?
So how did I handle that?
Meh. Again, disappointed. Can't lie about feelings. I thought I had done a better of a job than I did (according to the judging scores). Even looking at the reviews/feedback I had gotten on IFDB/Forum, I thought I had done better. My gut feeling half-way through the voting period was correct, after all (damn it! it always is...).
But having written 95% of this post just before the results dropped was surprisingly cathartic and brought a lot of perspective on the whole experience. It was obvious where my entry lacked and where it shined. At the end, you get a overall mediocre entry (as in of only moderate quality). It made sense for it to end up where it did. Like I said previously, I was over-ambitious, and that really didn't work in my favour, because I didn't have the stuff to back it up.
Sure it was disappointing to see my entry scoring so low/not be a favourite, but weirdly... it didn't last long? I checked the voting pattern, the anonymous feedback, talked with a few peeps, had some some food, a nice hot drink, and went back to business as usual.
Maybe it will hit me later...
Anyway, I'll just finish this part with saying that my family was more mad about the ranking than I was. Not because I didn't do better than I did, but because they couldn't believe other people didn't have the same opinion about the game than they did. Quote from my mom: This is the first time I've liked a game. That's one of my wins right there (that and the stickers we are getting :P).
IV- What's the future for TTTT?
Like I mentioned above, the reviews and interaction I had on Tumblr gave be a bunch of ideas/suggestions for the next step of this game. I don't know the timeline for the intended update or how I will update the game (in one go or in chunks - probably the latter) or how the code may need to change (it definitely will need some sort of overhaul). There is A LOT of work ahead of me.
So now, I have multiple To-Do lists: one created while I was working on TTTT before I submitted it and one after the Comp deadline. The first included ideas I would have while writing or coding and items that I could not include in the game because of time. The second were ideas I would get while getting returns/impressions, suggestions sent/in reviews, and stemming from discussions I've had with players. {Not every comment I've received in the reviews will make me change that particular aspect, but even those gave me ideas.}
Here's a non exhaustive list** of the first one:
Obviously adding the missing NPCs (both the one-timers and recurring ones).
Adding more choices while talking to those NPCs (eg: stopping them from doing something, giving unsolicited advice, etc...) and giving each of them an Ending.
More drinks! {would require a few new bottles and merging the Soda ones together}
Reloop the Restart to the Story Screen as a NewGame+ Function.
Adding Music for the ~ vibes ~
Creating an Achievement list and have more stats trackers.
Creating a Highscore page for the Arcade Mode.
More MC Customisation (as an option to do, it won't have any consequence/effect on the story, just for the lolz of it all).
Redesign the Menu to look more like a Bar Menu (and includes the name/link to the real drink).
Adding a Codex Page for NPC's encountered (maybe an achievement too).
More fluff text!
Adding the missing Events (Stolen Tip Jar/Knock on the sign combo among others)
Maybe try to scale it for mobile (v unlikely with the size of the bar)
And here's the non exhaustive list** of the second one:
Have a more detailed tutorial explaining the combined bottles and where to find/what to find in the Guarnish box.
The Restocking Mini-Game to include penalties (bottle not available until restock/next day), except on Easy Difficulty.
Re-work on the Difficulty Setting: make the Hard Time harder, Recipe not available on Hard (only in the Menu list), Hard Mode could have measurements instead of one click-bottle.
Adding a Setting for a fixed amount of drinks during Frenzy/Rush time.
The bottles in the Bar appear randomly (time/space).
Look into substitution of ingredients {the code would need to change drastically, depending on the recipes might not even be possible...}
Make the Umbrella do something (extra tips?)
Arcade Mode-TIMED: perfect drinks add time to the timer, really bad ones removes time.
Proofread and edit the text (obviously, but no cuts!).
Give a choice to play all 14 days (which will be fixed to 14 days when I introduce the Recurring NPCs)
After finding the Tip Jar, only give one choice: display or hide it, rather than leave the option to change your mind (that confused people)
Have something to do with the coins if you get too much (this started from a bug where the gold wasn't tracked properly)
**It's mainly non-exhaustive because I have a bunch of post-its with ideas and it's not organised yet. If you are reading this and thought of an interesting thing I could add to the game, do shoot me a message! I welcome it all!
V- Some fun tit bits...
Here are some random thing about the game/process that didn't make the cut in the novel above.
95% of the drinks are actual drinks, and as close to the recipe I could get them. I spent hours looking at recipes, and I even made a few while making the game.
Renaud's Nightmare is named after a disgusting concoction mentioned in Exquisite Cadaver (referencing my own work :P).
For a few weeks, I went back and forth between keeping the bar as is (one click on a bottle) or making it more like VA-11-HALL-4 (5 ingredients, different measurements). It was worse when I was fighting my code.
MelS (my writer for TTATEH) helped me name half of the drinks and of the characters (including NPCs not in the game currently). He also had to suffer through my various attempts at making the page look good (his go-to responses: I don't know what looks good or not, it's fine and both versions look good, why do I have to choose? You know this stuff better than me.).
I've been on a Terry Pratchett binge since May-ish, and it inspired the humour of TTTT to be a bit more over the top than I would have probably done otherwise. The Last Continent was one of the reasons I gave the MC an Australian accent.
All bottle ingredients had at least 2 versions: plain colours and the current 3D-looking version with shading and a cap/cork.
There are over 120 assets/images in this game, 3/4 of them being the glasses.
VI- In Conclusion
You've reached the end of this post. Thank you for playing reading! I hope you enjoyed the ride and I hope to see you again when progress on the new version finally starts. Like during the making of TTTT's Comp version, it will be well documented on this blog. In the meantime, you can find the game on itch now!
Thank you to everyone who played my entry, voted for it, left a review or a comment, and interacted with me on this long/short journey!
I don't think I'll participate next year tho... I am exhausted. Well... unless I get a good idea until then... I should try to make a smaller game this time...
16 notes Ā· View notes
aliennooboo Ā· 2 years ago
Note
hello! this might sound strange, but how did u format your resources page to have ā€œcolumnsā€ or side-by-side lists? thank u in advance!
Hi! Not strange at all. So we're talking about this:
Tumblr media
I used divs to create a table with two columns, I've uploaded the basic coding for it here and the password is aliennooboo. You need some basic understanding of HTML to use it. (The actual styling of the list, meaning the font, the background, etc. will depend on what theme you're using on your blog.)
I'm not an expert in coding, so the code might not be completely up to par, but it works for me! Sometimes custom blog themes have coding that override certain features in HTML, so if something looks wonky, you could try a different blog theme and see if that's the issue.
8 notes Ā· View notes
mmainulhasan Ā· 1 year ago
Text
Prompt Examples for Learning Web Development
Tumblr media
Coding is both an art and a science. Itā€™s about creatively solving problems, bringing ideas to life, and constantly learning and adapting.
Because technology advances at such a rapid pace, it is essential to be fluent in a variety of languages, tools, and domains.
Sometimes itā€™s difficult to pick up the right resources from the ocean of tutorials, demos, and resources.
And on top of that, sometimes we have to learn and apply so fast due to tight deadlines of the projects. In this case, we need a friend who can help us learn and work faster and better. And thanks to AI by this, our learning becomes faster and more fun.
Today, weā€™ll look at how learning prompts that AI drives can change the way you learn web development.
How you can craft prompt engineering forĀ web development, the difference between a generic prompt and a bit tweaked prompt can eventually change your desired results and make your learning journey more smooth and more enjoyable.
You can also use this knowledge to learn other fields more quickly and interactively.
Table of Contents
Learning Prompts
HTML Prompt Examples
CSS Prompt Examples
Debugging Prompts
Testing Prompts
Crafting Better Prompts
Further Reading and Resources
šŸŽÆLearning Prompts
Prompts are at the heart of AI-powered learning. Prompts are questions or commands that guideĀ AI modelsĀ like GPT-3 or GPT-4 to generate the desired responses. They act as a springboard for the AI to dive into the knowledge itā€™s been trained on and come up with relevant outputs.
You can use AIā€™s capabilities in a variety of scenarios in web development, including debugging, code generation, and even learning new web development concepts.
Now, weā€™ll go through some basic prompts and their outputs, as well as a little tweaking of the prompt commands to see how the output is becoming more result oriented, giving you a sense of how you may build your prompt commands for better results.
Prompt Commands for Learning HTML Basics
Learning the basics of web development involves understanding the structure and syntax of HTML, CSS, and JavaScript. Here are some prompt examples you can use:
Create a simple HTML structure with a header, main content section, and footer.
This prompt returns a simple HTML skeleton. But if you want a more detailed structure, you could modify the prompt to include specific HTML elements. For example:
Create a simple HTML structure with a header containing a navigation bar, a main content section with a paragraph and an image, and a footer with copyright information.
Tumblr media
Curious to know more? Visit our blog for the complete post and dive deeper into Learning Web Development with AI Prompts.
3 notes Ā· View notes
webtutorsblog Ā· 1 year ago
Text
HTML 101: The Ultimate Beginner's Guide to Writing, Learning & Using HTML
Tumblr media
HTML serves as the backbone of every web page, allowing us to structure content with paragraphs, headings, images, links, forms, and more. If you're eager to delve into web development or explore the world of coding, mastering HTML is a fantastic starting point.
Join us on webtutor.dev as we unveil the ultimate guide to HTML for beginners. In this comprehensive tutorial, we'll demystify HTML, explore its diverse applications, and equip you with the skills to write your own HTML code. From essential elements to crucial attributes, we'll cover it all.
Get ready to embark on your HTML journey with webtutor.dev ā€“ your go-to resource for empowering web development education. Let us dive in and unlock the potential of HTML together.
Join us now on webtutor.dev!
What is HTML?
First published by Tim Berners-Lee in 1989, HTML is now used by 94% of all websites, and probably all the ones you visit. But what is it, exactly?
HTML, short for HyperText Markup Language, is the backbone of the web. It is a markup language that structures the content of web pages. HTML utilizes tags to define the elements and their attributes, such as headings, paragraphs, images, links, lists, forms, and more. These tags instruct web browsers on how to display and render the content to users. With HTML, developers can create interactive and visually appealing web pages. It plays a vital role in creating a seamless browsing experience by allowing users to navigate through hyperlinks and access information across different websites. HTML is the foundation upon which websites are built, providing the structure and organization for displaying text, multimedia, and interactive elements. By learning HTML, individuals can gain the skills to create and customize web pages, making their mark in the digital landscape.
Is HTML a programming language?
No, HTML (Hypertext Markup Language) is not considered a programming language. It is a markup language used for structuring the content and presenting information on web pages. HTML provides a set of tags that define the structure and semantics of the content, such as headings, paragraphs, links, images, and more.
While HTML is essential for web development, it primarily focuses on the presentation and organization of data rather than the logic and functionality found in programming languages. To add interactivity and dynamic behavior to web pages, programming languages like JavaScript are commonly used in conjunction with HTML.
What is HTML Used for?
HTML (Hypertext Markup Language) is used for creating and structuring the content of web pages. It provides a set of tags that define the elements and their layout within a web page. Here are some of the key uses of HTML:
Web page structure: HTML is used to define the structure of a web page, including headings, paragraphs, lists, tables, forms, and other elements. It allows you to organize and present content in a hierarchical manner.
Text formatting: HTML provides tags for formatting text, such as bold, italic, underline, headings of different levels, and more. These tags help in emphasizing and styling specific parts of the content.
HTML Hyperlinks: HTML enables the creation of hyperlinks, allowing you to connect different web pages together or link to external resources. Links are defined using the <a> tag and provide navigation within a website or to other websites.
Images and media: HTML allows you to embed images, videos, audio files, and other media elements into web pages. It provides tags like <img>, <video>, and <audio> for adding visual and multimedia content.
Forms and user input: HTML provides form elements, such as text fields, checkboxes, radio buttons, dropdown menus, and buttons, allowing users to enter and submit data. Form data can be processed using server-side technologies.
Semantic markup: HTML includes semantic elements that provide meaning and structure to the content. Examples of semantic elements are <header>, <nav>, <article>, <section>, <footer>, which help define the purpose and role of specific parts of a web page.
Accessibility: HTML supports accessibility features, such as providing alternative text for images, using proper heading structure, using semantic elements, and other attributes that make web content more accessible to users with disabilities.
Overall, HTML serves as the foundation of web development, providing the structure and presentation of content on the World Wide Web. It is often complemented by other technologies like CSS (Cascading Style Sheets) for styling and JavaScript for interactivity and dynamic behavior.
How to Write HTML?
<!DOCTYPE html><html><head><title>My Page</title></head><body><h1>Hello, World!</h1></body></html>
Explanation:
<!DOCTYPE html>: Specifies the HTML version.
<html>: Opening tag for the HTML document.
<head>: Contains metadata about the page.
<title>: Sets the title of the page displayed in the browser's title bar or tab.
<body>: Contains the visible content of the page.
<h1>: Defines a heading level 1.
Hello, World!: The actual content to be displayed.
Please note that this example is a very basic HTML structure, and for more complex pages, additional tags and attributes would be required.
How to Create an HTML File
To create an HTML file, you can follow these steps:
Open a text editor: Open a text editor of your choice, such as Notepad (Windows), TextEdit (Mac), Sublime Text, Visual Studio Code, or any other editor that allows you to create plain text files.
Start with the HTML doctype: At the beginning of your file, add the HTML doctype declaration, which tells the browser that the file is an HTML document. Use the following line:
<!DOCTYPE html>
Create the HTML structure: After the doctype declaration, add the opening and closing <html> tags to enclose the entire HTML document.
Add the head section: Inside the <html> tags, include the <head> section. This is where you define metadata and include any external resources like stylesheets or scripts. For now, let's add a <title> element to set the title of your page:
<head>
Ā  <title>My First HTML Page</title>
</head>
Create the body: Within the <html> tags, include the <body> section. This is where you place the visible content of your web page. You can add various HTML tags here to structure and format your content. For example, let's add a heading and a paragraph:
<body>
Ā  <h1>Welcome to My Page</h1>
Ā  <p>This is my first HTML file.</p>
</body>
Save the file: Save the file with an .html extension, such as myfile.html. Choose a suitable location on your computer to save the file.
Open the HTML file in a browser: Double-click on the HTML file you just saved. It will open in your default web browser, and you will see the content displayed according to the HTML tags you added.
Congratulations! You have created an HTML file. You can now edit the file in your text editor, add more HTML elements, styles, scripts, and save the changes to see them reflected in the browser.
Common HTML Attributes
<input type="text" name="username" placeholder="Enter your username" required>
<img src="image.jpg" alt="Image description">
<a href="https://example.com" target="_blank">Link to Example</a>
<div id="container" class="box">
<button onclick="myFunction()">Click me</button>
<table border="1">
<form action="submit.php" method="POST">
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
Explanation:
<input>: Attributes like type define the input type (text, checkbox, etc.), name sets the input's name for form submission, placeholder provides a hint to the user, and required specifies that the input is mandatory.
<img>: src specifies the image source URL, and alt provides alternative text for the image (useful for accessibility).
<a>: href sets the hyperlink URL, and target="_blank" opens the link in a new tab or window.
<div>: id assigns an identifier to the element, and class adds a CSS class for styling or JavaScript targeting.
<button>: onclick triggers a JavaScript function when the button is clicked.
<table>: border adds a border to the table.
<form>: action specifies the form submission URL, and method sets the HTTP method (GET or POST).
<select>: name assigns the name for the selection input, and <option> defines the selectable options within the dropdown menu.
These are just a few examples, and there are many more HTML attributes available for different elements, each serving specific purposes.
4 notes Ā· View notes