Tumgik
#how to create html tables
codewithnazam · 2 years
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
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
559 notes · View notes
cthulhubert · 5 months
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.
65 notes · View notes
ghost-bxrd · 1 month
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
manonamora-if · 2 years
Note
How do you do the planning to create an interactive fiction game? I have the general idea for an interactive fiction story but I'm a complete mess when it comes to organizing and planning. Where do I even start?
Hi Anon!
I was waiting for this question to appear at some point, lol :P I spent all day on this....
Create your Interactive Fiction Game
Last February, I detailed my process when working on CRWL. You can read that post here. It is not a perfect (or even good) template to use, since it is specific to that project in particular. I also have a list of programs I am using/have used when creating my projects here!
But, yes, organisation and planning is VERY important when you want to tell a story, no matter if it is in a game or novel. But unlike a novel-like story, you need to add coding on top of it. I would say these are the two big components of IF.
Disclaimer: I am not the Voice of Knowledge when it comes to creating IF, takes this information with a grain of salt and do some research too! :)
Long post, so breaking the post. Here's a Table of Content
1- Gameplay/Visual (aka Choosing your Coding Program) 2- Planning your Story (or Why it is better to start small at first) ~ ~ A- Game Pattern ~ ~ B- From Pattern to Outline ~ ~ C- From Outline to Writing ~ ~ D- Writing Tips 3- Coding the whole thing ~ ~ A- You are stuck ~ ~ B- Test everything ~ ~ C- UI Customisation 4- Publishing and Marketing ~ ~ A- Publishing your game ~ ~ B- Regarding marketing ~ ~ C- Scheduling Updates and expectations
1- Gameplay/Visual (aka Choosing your Coding Program)
Though the story is very important (obviously), it is important to know what kind of gameplay and visual you want for your game because it will dictate what kind of program you should use:
Do you want to make a Visual Novel? Then you might want to look into programs like Ren'Py.
Are you gravitating towards parsers (player entering words/sentences to advance the story)? Inform might be what you need.
Do you just want to give players choices? Twine formats and ChoiceScript seem to be the most popular ones on Tumblr.
Note: There are waaaayyyy more programs that those four, and you may be able push the possibility of what a program can/is supposed to do with enough coding knowledge.
Even in each category, some programs will be more complicated to learn than others. For the Choice-base games for example, ChoiceScript is considered one of the easiest to code in terms of logic and formatting of code. In the same vein, the availability of tutorials/community* to help will make a huge difference in learning the program. And finally, some programs may require some knowledge of other languages (ex: HTML/CSS) for further use/customisation.
Note: While most may be in English, there may be even tutorials/communities in your language! (if you are ESL)
And finally, you may want to think about the visual aspect. Some programs/formats will allow you more customisation than other, whether it be text formatting to complete customisation of the base UI (how the page looks). For example, in Twine (SugarCube/Snowman especially) , you are only limited by your knowledge of HTML, CSS and JavaScript.
P.S.: Some programs, like ChoiceScript, are not open-source.
A good way to know what kind of program you want to use is to look at tutorials online and test it yourself too.
2- Planning your Story (or Why it is better to Start small at first)
Now that you've settled on a coding program, it is time to work on a story.
If it is your first time, the best advice I can give you is to start with a small and contained stories. The learning curve can be daunting when starting, more so if the project is complicate and long. Starting short and easy won't feel too overwhelming, you will learn what works best (or doesn't work) for your creating process AND it makes it easier to learn coding in your chosen program. Starting with a full-blown RPG with extensive Combat Mechanics and hundreds of long-ass quests is not a good idea if you've just begun with the program.
You can even take advantage of Jams to test your skills/ideas or request feedback on IF Discords Communities or in the IF Forum.
But whether your story is large or small, the planning part should be very similar.
A- Game Pattern
So you have an idea for your IF, great! Now let's think about patterns, or how will the story be told. Do you have a linear story in mind leading to one important finally choice? or do you want a lot of branching with many endings? Or even a lot of choices culminating in one final event?
Knowing about pattern will help you plan the story and define important events to happen. It will also make you think of variations to take into account and what kind of action you'd need to reach a certain part of the story. Obviously, you don't have to stick to one pattern (as you work more on the story), but it helps.
I really like this blog post detailing the different patterns of CYOA games. [I used it when creating MtP]
B- From Pattern to Outline
With that general idea of how the story should pan out, we can start fleshing it out a bit more. I often use the "Funnel Technique" when I create my stories (big picture to small details), but it may work more for linear stories rather than very branching ones. It goes something like this:
Start with your general idea: genre, theme, world, time period, etc... But stay general. You don't need to go into too much details at first.
List your big events and make a timeline: what is the conflict to push the story forward? why does it happen? what does character should learn from it? what can they do to resolve it? etc...
Do the same with other smaller plots (if you have them!): every plot needs a reason for it to happen.
Combine the timelines: not only some beats will need to happen before others (especially if they are the catalyst of the next one), this will help you to know when to introduce a certain character/lore/etc...
Delimit your chapters: with your timeline, you can now break it off into smaller chapters (you can include what important action/information each chapter should have).
And here is your outline!
During this process, it is a good idea to keep note of everything you can think of: characters background/personality, important lore of your world, etc...
It is also then where you may want to think of aspects to track (relationship, choices, etc...) and give it a name.
While you don't have to research things at this stage, it may help you if you are working with a topic/setting you are not familiar with.
C- From Outline to Writing
Now that you have your outline and your timeline, you are closer to writing :D You could decide to write away, or you could plan your chapter a bit further.
I usually do the later, as it helps me think of possible places to include choices or variation for the player. [This is also where the graph comes into place] I even go a bit further and plan each passage (text screen), making notes of what the player will see (dialog, action, description...) and if there is variation to include. This last part is very much detailing work, and helps me with writing.
After all this, it's time to write!
D- Writing Tips
Here are some stuff that I do to help me not get overwhelmed when I write and help me to be organised when I code:
The "one page per screen" technique, where you add breaks between each screen/passage, can be helpful to demarcate each part of the chapter/scene you are writing. Headers or links with a table of content can also be helpful !
While it matters little at the beginning, tracking choices and consequences of those choices and important variables will help with continuity and variation. For example, if you give the player the choice to set their height, you should take this into account if the MC goes into tight spaces. Similarly, if the player chooses to confront someone, the next page should probably not have a romantic tone.
Use colour code, comments or formatting when writing to separate choices (link list or cycling options, etc...) or variation for a tracked variable (ex: tone of voice, physical change, etc...) from the rest of the text. This will help when coding.
While writing, if you get ideas to include further into the story (ex: new choice, mechanic, sub plot, etc...), write it down on a separate page and only come back to it when you are do writing the part/passage/scene/chapter. A sudden idea might seem fitting but may push you towards a dead-end.
Edit Edit Edit! 1st drafts are awesome, but it can always be improved [Cough cough, not calling myself out at all, Cough cough]. Using Grammar Checks is immensely helpful (more than one, since none will focus on the same aspect of writing). And Beta/Sensitivity readers are godsent!
3- Coding the whole thing
When your story is ready (or part of it you are ready to release), you will need to code it.
The best advice I have for this is to code your story first and make sure it works. It can be tempting to deep dive into the formatting of the page (especially if the program you chose enables you to customise it extensively). An IF can look amazing, but if it breaks everywhere, it is not going to be fun to play.
A- You are stuck
And don't worry, it happens to every one! Coding can be a difficult puzzle to solve, even with the solution right under your nose.
The most important advice I can give is to always refer to the official documentation or look for tutorials online (other may have come across the same issue before you).
If nothing helps, there are often coding communities (that focuses on the format/program you are using) where you can ask for help (Discord/Forum, etc...). Do not be afraid to ask for help!
B- Test Everything
And when you are done, test again. Testing/Playing (whether by yourself or with Beta Readers) is the only way to catch errors.
Similarly, if you want to add some custom code to your project or use a built-in functionality, but don't know if it works, the best way to find out it to try it out! Read the documentation, play with the code and test it.
C- UI Customisation
This part will be highly dependent on which program/format you are using. While CSS/HTML is the same anywhere, it's implementation can differ greatly. Be sure to check the official documentation about the matter.
If the program allows you for customisation, this can be loads to fun to edit your UI to make it look however you want. Like the previous point, this can need a lot of testing too.
If you are just starting, having the basic UI is just fine :) You can always change it down the road. But if you want to zhuzh it up, here are some elements you can consider when editing:
Colour palette fitting your story. Steer away from bright colours if your story is dark, and vice versa.
Image in the background can make text hard to read. Having a block of colour between the text and the image will make reading much easier.
Colour contrast is IMPORTANT. Readability is easy to mess with when having multiple colours, use this website.
Simple is usually better. A complicated or busy page will be distracting. Stick to simple.
Use a template. This is more of a SugarCube comment, but if a template is available (and you like the vibe), use it. It will make editing your UI easier (tag or link to the creator in your game page/post).
If you can: remember to make your project as accessible as you can (with your knowledge). Colour contrast (maybe dark/light mode), Font change (font, size, etc...), limit or toggle animated text/images, etc...
4- Publishing and Marketing
A- Publishing your game
There are many places on the internet where you can publish your IF projects. Different formats will congregate towards different websites. For example: Dashingdon hosts only ChoiceScript, Itch has anything and everything, Steam will require a fee to publish there. You can also host your projects on other platforms or your personal website (ex: Neocities allows it), though you might want to stick to places where there is an established readership. In any case, follow the selected website's instructions for publication.
If you have a working and published demo (or finished game), I'm nudging you to create a page for it on the IFDB. There, people can leave long reviews and rate your games! You can also Archive your project to preserve it. [SAY NO TO LOST HISTORY]
B - Regarding marketing,
If you are lucky, the algorithm god will pick up your game and show it to everyone. You'll get thousands of readers and hundreds of ratings. You'll always be on everyone's top page and you will go viral.
But if you are not (like most of us), you can start building a readership on social media. Tumblr had a substantial community for IF, Twitter has quite a lot of game developer, Mastodon is a thing I think?, and there are a handful of Discords and Forums dedicated to Interactive Fiction. Having a presence and be reachable is unfortunately important.
Some random points:
Announce your project before you publish it, but be close to be ready to put it online when you do so!
Do not "sell" your project on something you are not sure you can achieve (ex: game mechanic, complicated romance, etc...), just to set expectation.
Have an introductory post with a synopsis and links to the game/demo (if available) and important known aspects (genre/theme/TW). Depending on the genre, you may want to include short intro of some characters.
Make pretty pictures for your posts/game page (Canva is free-ish)
For ChoiceScript: having a CoG Forum page seem to be important for reader interaction and getting feedback.
On Tumblr: submit your project to directories like @interact-if, follow and interact with other IF authors, answer asks, do Tumblr stuff...
On Itch, consider introducing your published project in the Community section, write devlog for updates or discussion, answer comments, review other IF games...
Discord: some IF/Coding discord allows you to promote your projects there, take advantage of that.
Be upfront about your boundaries and keep them! (less marketing, more of a social media interaction thing)
C- Scheduling Updates and expectations
Unfortunately (and I say this as someone who is really bad at it), having a regular update schedule may be the best thing you can have for your project, especially if it is a long WIP. This can help keep your readers engaged with your content. If you have longer breaks between updates, writing prompts can be a nice substitute.
If regular is not possible (which is totes super fine! don't burnout on something fun), have clear communication about the state of the project. Set specific upload dates (ex: 12-Oct-22) when you are close to release it, have vague ones (ex: end of the year) when you are in the early stages. This will help with expectations and disappointment.
Do not promise more than you can do. That's pretty self-explanatory. And fix bugs you receive as soon as you can.
AND! And I can't stress this enough. IRL should always come before updating your WIP/publishing content. You should never force/push yourself to do so if you are not enjoying it. Do not be like me and hurt yourself. No amount of notes/readers is worth the hurt!
TLDR: Do not be like me, be better.
Right. I think that's it.
103 notes · View notes
no-psi-nan · 5 months
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 · 12 days
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
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 · 1 year
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.
22 notes · View notes
lovinglapislazuli · 6 months
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
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
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
scarves-and-coffee · 2 years
Text
Scarves & Coffee Now Has Tags!
New
Tags have been added to the site! Authors can now add tags to entries in the submit/edit form. Tags should be separated by commas. As you type, tag suggestions will come up for existing tags that you can click on to add. Tags that don't already exist will be created when you submit the entry. Some categories were converted to tags and were added to those entries that were in them.
Several pages were added for tags including a tag search page and tag detail pages to sort through tagged posts.
A Community tab has been added. It's currently pretty bare, but will be expanded as time goes on.
We now have a full user search in the Community tab. Previously, you could only search through users marked as Authors or Betas.
The user profile page has been slightly rearranged because you can now add HTML to your biography. This includes things like images, gifs, and as many paragraphs as your heart desires.
Shouts (comments) have been added to user profile pages. Let your favorite author know how much you love and appreciate them!
User site settings have been moved to a separate settings page in the user dashboard (notification and site settings were previously on the same page) to allow for future expansion.
Fixed
There was a huge issue with certain user-related database tables not being created when they should be, causing everyone that made an account since around the middle of September to have issues logging in and updating their profile. This should be resolved now. Thank you very much to Cerriddwen for bringing this to my attention.
The category and character selection in entry forms has been changed from a scroll box to checkboxes as the scroll box was difficult for authors to use. The layout is temporary and will be improved in future updates.
Ongoing
Yes, I'm still working on getting PDF downloads working. Still having an issue getting the required program onto the server.
A user has reported an issue logging into the site on mobile devices, specifically on Android. Currently investigating this.
Upcoming
PDF downloads
Tag filtering and an updated Library search
As always, if I broke anything with this update or you have any suggestions for the site or features, please let me know or send in an ask.
30 notes · View notes
manonamora-if · 2 years
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
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
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