#create html document | Explore Tumblr posts and blogs

manonamora-if · 11 months ago

Text

The 100% Good Twine SugarCube Guide!

The 100% Good Twine SugarCube Guide is a coding guide for the SugarCube format of Twine. It is meant as an alternative to the SugarCube documentation, with further explanations, interactive examples, and organised by difficulty. The goal of this guide is to make the learning curve for new SugarCube user less steep, and provide a comprehensive and wide look over the format.

VIEW / DOWNLOAD THE GUIDE!!!!

The Guide is compartmentalised in (currently) four categories:

THE BASICS or the absolute basics to start with SugarCube. No need for extra knowledge. Just the base needed to make something.

THE BASICS + adding interactivity, and creating a fully rounded IF game May require a bit of CSS knowledge (formatting rules)

INTERMEDIATE MODE adding more customisation and complex code Will probably require some CSS knowledge, and maybe some JavaScript

ADVANCE USE the most complex macros and APIs Will surely require some JavaScript/jQuery knowledge

Note: The Advanced Use includes all the APIs, macros, and methods not covered by the previous categories. This includes code requiring very advance knowledge of JavaScript/jQuery to be used properly.

Each category explains many aspects of the format, tailored to a specific level of the user. More simpler explanations and examples are available in earlier chapters, compared to the later ones.

If something is unclear, you found a mistake, you would like more examples in the guide, or would like a feature covered, let me know!

The Guide currently covers all macros (as of SugarCube v.2.37.3), all functions and methods, and APIs. It touches upon the use of HTML, CSS, JavaScript and jQuery, when relevant. It also discusses aspects of accessibility.

The Guides also provides a list of further resources, for the different coding languages.

The Guide is available in a downloadable form for offline view:

HTML file that can be opened in Twine

.tw file that can be opened in Twine

source code, separating the chapters, .js and .css files

GITHUB REPO | RAISE AN ISSUE | TWINE RESOURCES TWEEGO | TEMPLATES | CSCRIPT 2 SG GUIDE

Twine® is an “an open-source tool for telling interactive, non-linear stories” originally created by Chris Klimas maintained in several different repositories (Twinery.org). Twine is also a registered trademark of the Interactive Fiction Technology Foundation.

SugarCube is a free (gratis and libre) coding format for Twine/Twee created and maintained by TME.

VIEW / DOWNLOAD THE GUIDE!!!!

As of this release (v2.0.0), it is up to date with the version 2.37.3. If you are looking for the guide covering SugarCube 2.36.1, you can find it on my GitHub.

Note: the Guide is now complete. There won't be further substantial updates.

#the 100% Good Twine SugarCube Guide #template #templates #guide #coding in twine #twine #coding #HTML #JavaScript #CSS #macros #interactive fiction #sugarcube #interactive games #k thanks. i don't need any more reminders that sugarcube update and that I NEED TO UPDATE MY RESOURCES #i KNOW #manonamora

555 notes · View notes

study-diaries · 2 months ago

Text

Introduction To HTML

[Note: You need a text editor to do this. You can use Notepad or Text Edit. But it's so much better to download VS Code / Visual Studio Code. Save it with an extension of .html]

HTML stands for Hyper Text Markup Language

It is used to create webpages/websites.

It has a bunch of tags within angular brackets <....>

There are opening and closing tags for every element.

Opening tags look like this <......>

Closing tags look like this

The HTML code is within HTML tags. ( // code)

Here's the basic HTML code:

<!DOCTYPE html> <html> <head> <title> My First Webpage </title> </head> <body> <h1> Hello World </h1> <p> Sometimes even I have no idea <br> what in the world I am doing </p> </body> </html>

Line By Line Explanation :

<!DOCTYPE html> : Tells the browser it's an HTML document.

<html> </html> : All code resides inside these brackets.

<head> </head> : The tags within these don't appear on the webpage. It provides the information about the webpage.

<title> </title> : The title of webpage (It's not seen on the webpage. It will be seen on the address bar)

<body> </body> : Everything that appears on the webpage lies within these tags.

<h1> </h1> : It's basically a heading tag. It's the biggest heading.

Heading Tags are from <h1> to <h6>. H1 are the biggest. H6 are the smallest.

<p> </p> : This is the paragraph tag and everything that you want to write goes between this.

<br> : This is used for line breaks. There is no closing tag for this.

-------

Now, we'll cover some <Meta> tags.

Meta tags = Notes to the browser and search engines.

They don’t appear on the page.

They reside within the head tag

Line By Line Explanation:

_____

This is my first post in this topic. I'll be focusing on the practical side more than the actual theory, really. You will just have some short bullet points for most of these posts. The first 10 posts would be fully HTML. I'll continue with CSS later. And by 20th post, we'll build the first website. So, I hope it will be helpful :)

If I keep a coding post spree for like 2 weeks, would anyone be interested? o-o

154 notes · View notes

frownyalfred · 2 months ago

Note

ao3 has a Google docs posting script?

Yes! You can find it here.

If you use Google Drive to work on text-based fanworks, you might have run into formatting issues when copying from Google Drive to our Rich Text Editor. In particular, italics and bold text do not carry over correctly when copy-pasting text. To solve this problem, Min has created a script for Google Drive that will take your finished work and convert all basic formatting into HTML for you. You can find it in this example document for posting to AO3.

#asks #anon #ao3 #writing #archive of our own

107 notes · View notes

sofia-d-asb · 9 months ago

Text

Twine/SugarCube ressources

Some/most of you must know that Arcadie: Second-Born was coded in ChoiceScript before I converted it to Twine for self-publishing (for various reasons).

I have switched to Ren'Py for Cold Lands, but I thought I would share the resources that helped me when I was working with Twine. This is basically an organized dump of nearly all the bookmarks I collected. Hope this is helpful!

Guides

Creating Interactive Fiction: A Guide to Using Twine by Aidan Doyle

A Total Beginner’s Guide to Twine

Introduction to Twine By Conor Walsh (covers Harlowe and not SugarCube)

Twine Grimoire I

Twine Grimoire II

Twine and CSS

Documentation

SugarCube v2 Documentation

Custom Macros

Chapel's Custom Macro Collection, particularly Fairmath function to emulate CS operations if converting your CS game to Twine

Cycy's custom macros

Clickable Images with HTML Maps

Character pages

Character Profile Card Tutorial

Twine 2 / SugarCube 2 Sample Code by HiEv

Templates

Some may be outdated following Twine/SugarCube updates

Twine/Sugarcube 2 Template

Twine SugarCube template

Twine Template II

Twine Template by Vahnya

Sample Code and more resources

A post from 2 years ago where I share sample code

TwineLab

nyehilism Twine masterpost

How to have greyed out choices

idrellegames's tutorials

Interactive Fiction Design, Coding in Twine & Other IF Resources by idrellegames (idrellegames has shared many tutorials and tips for Twine, browse their #twine tag)

How to print variables inside links

How do I create a passage link via clicking on a picture

App Builder

Convert your Twine game into a Windows and macOS executable (free)

Convert your Twine game into a mobile app for Android and iPhone (90$ one-time fee if memory serves me right) // Warning: the Android app it creates is outdated for Google Play, you'll need to update the source code yourself

#switching to twine #twine #sugarcube #twine resources #interactive fiction

269 notes · View notes

hemi-demi · 3 months ago

Text

Hey! So I mentioned a while ago that I have a custom workskin to make my Magnus Archives fics with transcripts look more like the transcripts at The Magnus Archives Transcripts Archive, and never got around to showing how. So now I am!

With this workskin, you'll turn transcript fics that look like this:

Into this!

Link to my fic "Just a Rumour" to see the live example, no content warnings in these first two chapters, but rating may eventually change.

Here's how you can apply this to your own fic. Steps are listed below the cut:

1. Make a workskin.

For this step, I'll refer you to the ao3 guide on how to create workskins. Make a new one, or add the following code between the dashes below to your existing skins.

---

#workskin .transcript {

font-family: "Libre Baskerville", Baskerville, "Book Antiqua", Georgia, Times, serif;

color: #586e75;

background: #fdf6e3;

padding: 1em;

width: fit-content;

margin: 0 auto 35px;

font-size: 120%;

}

---

Once you've made your workskin, follow the steps in the included link to add that workskin to the fic you want to apply this style to.

2. Tell the fic where to apply the style

The document above also explains this, but just so you can see the actual steps here:

In your fic, under the html editor view, add

To the front of the text that will be in this format (it may not be the entire fic! You can have it in the middle of regular prose if you like).

At the end of the section that will be in the format, close it off with

</div>

Now just save your draft and confirm that it's working! If it looks off, double check your html, make sure it took and didn't delete itself or isn't misspelled.

And btw, readers who may not like this format can turn it off themselves with the Hide Creator's Style button, so this is optional for readers! It also works well with screen readers as-is.

Enjoy!

#the magnus archives #tma #fanfic #workskin #ao3 workskin #ao3 #transcripts #transcript fic #tutorial

66 notes · View notes

laika290 · 2 years ago

Text

ever wonder why spotify/discord/teams desktop apps kind of suck?

i don't do a lot of long form posts but. I realized that so many people aren't aware that a lot of the enshittification of using computers in the past decade or so has a lot to do with embedded webapps becoming so frequently used instead of creating native programs. and boy do i have some thoughts about this.

for those who are not blessed/cursed with computers knowledge Basically most (graphical) programs used to be native programs (ever since we started widely using a graphical interface instead of just a text-based terminal). these are apps that feel like when you open up the settings on your computer, and one of the factors that make windows and mac programs look different (bc they use a different design language!) this was the standard for a long long time - your emails were served to you in a special email application like thunderbird or outlook, your documents were processed in something like microsoft word (again. On your own computer!). same goes for calendars, calculators, spreadsheets, and a whole bunch more - crucially, your computer didn't depend on the internet to do basic things, but being connected to the web was very much an appreciated luxury!

that leads us to the eventual rise of webapps that we are all so painfully familiar with today - gmail dot com/outlook, google docs, google/microsoft calendar, and so on. as html/css/js technology grew beyond just displaying text images and such, it became clear that it could be a lot more convenient to just run programs on some server somewhere, and serve the front end on a web interface for anyone to use. this is really very convenient!!!! it Also means a huge concentration of power (notice how suddenly google is one company providing you the SERVICE) - you're renting instead of owning. which means google is your landlord - the services you use every day are first and foremost means of hitting the year over year profit quota. its a pretty sweet deal to have a free email account in exchange for ads! email accounts used to be paid (simply because the provider had to store your emails somewhere. which takes up storage space which is physical hard drives), but now the standard as of hotmail/yahoo/gmail is to just provide a free service and shove ads in as much as you need to.

webapps can do a lot of things, but they didn't immediately replace software like skype or code editors or music players - software that requires more heavy system interaction or snappy audio/visual responses. in 2013, the electron framework came out - a way of packaging up a bundle of html/css/js into a neat little crossplatform application that could be downloaded and run like any other native application. there were significant upsides to this - web developers could suddenly use their webapp skills to build desktop applications that ran on any computer as long as it could support chrome*! the first applications to be built on electron were the late code editor atom (rest in peace), but soon a whole lot of companies took note! some notable contemporary applications that use electron, or a similar webapp-embedded-in-a-little-chrome as a base are:

microsoft teams

notion

vscode

discord

spotify

anyone! who has paid even a little bit of attention to their computer - especially when using older/budget computers - know just how much having chrome open can slow down your computer (firefox as well to a lesser extent. because its just built better <3)

whenever you have one of these programs open on your computer, it's running in a one-tab chrome browser. there is a whole extra chrome open just to run your discord. if you have discord, spotify, and notion open all at once, along with chrome itself, that's four chromes. needless to say, this uses a LOT of resources to deliver applications that are often much less polished and less integrated with the rest of the operating system. it also means that if you have no internet connection, sometimes the apps straight up do not work, since much of them rely heavily on being connected to their servers, where the heavy lifting is done.

taking this idea to the very furthest is the concept of chromebooks - dinky little laptops that were created to only run a web browser and webapps - simply a vessel to access the google dot com mothership. they have gotten better at running offline android/linux applications, but often the $200 chromebooks that are bought in bulk have almost no processing power of their own - why would you even need it? you have everything you could possibly need in the warm embrace of google!

all in all the average person in the modern age, using computers in the mainstream way, owns very little of their means of computing.

i started this post as a rant about the electron/webapp framework because i think that it sucks and it displaces proper programs. and now ive swiveled into getting pissed off at software services which is in honestly the core issue. and i think things can be better!!!!!!!!!!! but to think about better computing culture one has to imagine living outside of capitalism.

i'm not the one to try to explain permacomputing specifically because there's already wonderful literature ^ but if anything here interested you, read this!!!!!!!!!! there is a beautiful world where computers live for decades and do less but do it well. and you just own it. come frolic with me Okay ? :]

*when i say chrome i technically mean chromium. but functionally it's same thing

#txt #long post #permacomputing #sustainability

461 notes · View notes

mostlysignssomeportents · 4 months ago

Text

Twinkump Linkdump

I'm on a 20+ city book tour for my new novel PICKS AND SHOVELS. Catch me in SAN DIEGO at MYSTERIOUS GALAXY next MONDAY (Mar 24), and in CHICAGO with PETER SAGAL on Apr 2. More tour dates here.

I have an excellent excuse for this week's linkdump: I'm in Germany, but I'm supposed to be in LA, and I'm not, because London Heathrow shut down due to a power-station fire, which meant I spent all day yesterday running around like a headless chicken, trying to get home in time for my gig in San Diego on Monday (don't worry, I sorted it):

https://www.mystgalaxy.com/32425Doctorow

Therefore, this is 30th linkdump, in which I collect the assorted links that didn't make it into this week's newsletters. Here are the other 29:

https://pluralistic.net/tag/linkdump/

I always like to start and end these 'dumps with some good news, which isn't easy in these absolutely terrifying times. But there is some good news: Wil Wheaton has announced his new podcast, a successor of sorts to the LeVar Burton Reads podcast. It's called "It's Storytime" and it features Wil reading his favorite stories handpicked from science fiction magazines, including On Spec, the magazine that bought my very first published story (I was 16, it ran in their special youth issue, it wasn't very good, but boy did it mean a lot to me):

https://wilwheaton.net/podcast/

Here's some more good news: a court has found (again!) that works created by AI are not eligible for copyright. This is the very best possible outcome for people worried about creators' rights in the age of AI, because if our bosses can't copyright the botshit that comes out of the "AI" systems trained on our work, then they will pay us:

https://www.yahoo.com/news/us-appeals-court-rejects-copyrights-171203999.html

Our bosses hate paying us, but they hate the idea of not being able to stop people from copying their entertainment products so! much! more! It's that simple:

https://pluralistic.net/2023/08/20/everything-made-by-an-ai-is-in-the-public-domain/

This outcome is so much better than the idea that AI training isn't fair use – an idea that threatens the existence of search engines, archiving, computational linguistics, and other clearly beneficial activities. Worse than that, though: if we create a new copyright that allows creators to prevent others from scraping and analyzing their works, our bosses will immediately alter their non-negotiable boilerplate contracts to demand that we assign them this right. That will allow them to warehouse huge troves of copyrighted material that they will sell to AI companies who will train models designed to put us on the breadline (see above, re: our bosses hate paying us):

https://pluralistic.net/2024/03/13/hey-look-over-there/#lets-you-and-he-fight

The rights of archivists grow more urgent by the day, as the Trump regime lays waste to billions of dollars worth of government materials that were produced at public expense, deleting decades of scientific, scholarly, historical and technical materials. This is the kind of thing you might expect the National Archive or the Library of Congress to take care of, but they're being chucked into the meat-grinder as well.

To make things even worse, Trump and Musk have laid waste to the Institute of Museum and Library Services, a tiny, vital agency that provides funding to libraries, archives and museums across the country. Evan Robb writes about all the ways the IMLS supports the public in his state of Washington:

Technology support. Last-mile broadband connection, network support, hardware, etc. Assistance with the confusing e-rate program for reduced Internet pricing for libraries.

Coordinated group purchase of e-books, e-audiobooks, scholarly research databases, etc.

Library services for the blind and print-disabled.

Libraries in state prisons, juvenile detention centers, and psychiatric institutions.

Digitization of, and access to, historical resources (e.g., newspapers, government records, documents, photos, film, audio, etc.).

Literacy programming and support for youth services at libraries.

The entire IMLS budget over the next 10 years rounds to zero when compared to the US federal budget – and yet, by gutting it, DOGE is amputating significant parts of the country's systems that promote literacy; critical thinking; and universal access to networks, media and ideas. Put it that way, and it's not hard to see why they hate it so.

Trying to figure out what Trump is up to is (deliberately) confusing, because Trump and Musk are pursuing a chaotic agenda that is designed to keep their foes off-balance:

https://www.wired.com/story/elon-musk-donald-trump-chaos/

But as Hamilton Nolan writes, there's a way to cut through the chaos and make sense of it all. The problem is that there are a handful of billionaires who have so much money that when they choose chaos, we all have to live with it:

The significant thing about the way that Elon Musk is presently dismantling our government is not the existence of his own political delusions, or his own self-interested quest to privatize public functions, or his own misreading of economics; it is the fact that he is able to do it. And he is able to do it because he has several hundred billion dollars. If he did not have several hundred billion dollars he would just be another idiot with bad opinions. Because he has several hundred billion dollars his bad opinions are now our collective lived experience.

https://www.hamiltonnolan.com/p/the-underlying-problem

We actually have a body of law designed to prevent this from happening. It's called "antitrust" and 40 years ago, Jimmy Carter decided to follow the advice of some of history's dumbest economists who said that fighting monopolies made the economy "inefficient." Every president since, up to – but not including – Biden, did even more to encourage monopolization and the immense riches it creates for a tiny number of greedy bastards.

But Biden changed that. Thanks to the "Unity Taskforce" that divided up the presidential appointments between the Democrats' corporate wing and the Warren/Sanders wing, Biden appointed some of the most committed, effective trustbusters we'd seen for generations:

https://pluralistic.net/2022/10/18/administrative-competence/#i-know-stuff

After Trump's election, there was some room for hope that Trump's FTC would continue to pursue at least some of the anti-monopoly work of the Biden years. After all, there's a sizable faction within the MAGA movement that hates (some) monopolies:

https://pluralistic.net/2025/01/24/enforcement-priorities/#enemies-lists

But last week, Trump claimed to have illegally fired the two Democratic commissioners on the FTC: Alvaro Bedoya and Rebecca Slaughter. I stan both of these commissioners, hard. When they were at the height of their powers in the Biden years, I had the incredible, disorienting experience of getting out of bed, checking the headlines, and feeling very good about what the government had just done.

Trump isn't legally allowed to fire Bedoya and Slaughter. Perhaps he's just picking this fight as part of his chaos agenda (see above). But there are some other pretty good theories about what this is setting up. In his BIG newsletter, Matt Stoller proposes that Trump is using this case as a wedge, trying to set a precedent that would let him fire Federal Reserve Chair Jerome Powell:

https://www.thebignewsletter.com/p/why-trump-tried-to-fire-federal-trade

But perhaps there's more to it. Stoller just had Commissioner Bedoya on Organized Money, the podcast he co-hosts with David Dayen, and Bedoya pointed out that if Trump can fire Democratic commissioners, he can also fire Republican commissioners. That means that if he cuts a shady deal with, say, Jeff Bezos, he can order the FTC to drop its case against Amazon and fire the Republicans on the commission if they don't frog when he jumps:

https://www.organizedmoney.fm/p/trumps-showdown-at-the-ftc-with-commissioner

(By the way, Organized Money is a fantastic podcast, notwithstanding the fact that they put me on the show last week:)

https://audio.buzzsprout.com/6f5ly01qcx6ijokbvoamr794ht81

The future that our plutocrat overlords are grasping for is indeed a terrible one. You can see its shape in the fantasies of "liberatarian exit" – the seasteads, free states, and other assorted attempts to build anarcho-capitalist lawless lands where you can sell yourself into slavery, or just sell your kidneys. The best nonfiction book on libertarian exit is Raymond Criab's 2022 "Adventure Capitalism," a brilliant, darkly hilarious and chilling history of every time a group of people have tried to found a nation based on elevating selfishness to a virtue:

https://pluralistic.net/2022/06/14/this-way-to-the-egress/#terra-nullius

If Craib's book is the best nonfiction volume on the subject of libertarian exit, then Naomi Kritzer's super 2023 novel Liberty's Daughter is the best novel about life in a libertopia – a young adult novel about a girl growing up in the hell that would be life with a Heinlein-type dad:

https://pluralistic.net/2023/11/21/podkaynes-dad-was-a-dick/#age-of-consent

But now this canon has a third volume, a piece of design fiction from Atelier Van Lieshout called "Slave City," which specs out an arcology populated with 200,000 inhabitants whose "very rational, efficient and profitable" arrangements produce €7b/year in profit:

https://www.archdaily.com/30114/slave-city-atelier-van-lieshout

This economic miracle is created by the residents' "voluntary" opt-in to a day consisting of 7h in an office, 7h toiling in the fields, 7h of sleep, and 3h for "leisure" (e.g. hanging out at "The Mall," a 24/7, 26-storey " boundless consumer paradise"). Slaves who wish to better themselves can attend either Female Slave University or Male Slave University (no gender controversy in Slave City!), which run 24/7, with 7 hours of study, 7 hours of upkeep and maintenance on the facility, 7h of sleep, and, of course, 3h of "leisure."

The field of design fiction is a weird and fertile one. In his traditional closing keynote for this year's SXSW Interactive festival, Bruce Sterling opens with a little potted history of the field since it was coined by Julian Bleeker:

https://bruces.medium.com/how-to-rebuild-an-imaginary-future-2025-0b14e511e7b6

Then Bruce moves on to his own latest design fiction project, an automated poetry machine called the Versificatore first described by Primo Levi in an odd piece of science fiction written for a newspaper. The Versificatore was then adapted to the screen in 1971, for an episode of an Italian sf TV show based on Levi's fiction:

https://www.youtube.com/watch?v=tva-D_8b8-E

And now Sterling has built a Versificatore. The keynote is a sterlingian delight – as all of his SXSW closers are. It's a hymn to the value of "imaginary futures" and an instruction manual for recovering them. It could not be more timely.

Sterling's imaginary futures would be a good upbeat note to end this 'dump with, but I've got a real future that's just as inspiring to close us out with: the EU has found Apple guilty of monopolizing the interfaces to its devices and have ordered the company to open them up for interoperability, so that other manufacturers – European manufacturers! – can make fully interoperable gadgets that are first-class citizens of Apple's "ecosystem":

https://www.reuters.com/technology/apple-ordered-by-eu-antitrust-regulators-open-up-rivals-2025-03-19/

It's a good reminder that as America crumbles, there are still places left in the world with competent governments that want to help the people they represent thrive and prosper. As the Prophet Gibson tells us, "the future is here, it's just not evenly distributed." Let's hope that the EU is living in America's future, and not the other way around.

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/2025/03/22/omnium-gatherum/#storytime

Image: TDelCoro https://www.flickr.com/photos/tomasdelcoro/48116604516/

CC BY-SA 2.0 https://creativecommons.org/licenses/by-sa/2.0/

86 notes · View notes

codemerything · 2 years ago

Text

A structured way to learn JavaScript.

I came across a post on Twitter that I thought would be helpful to share with those who are struggling to find a structured way to learn Javascript on their own. Personally, I wish I had access to this information when I first started learning in January. However, I am grateful for my learning journey so far, as I have covered most topics, albeit in a less structured manner.

N/B: Not everyone learns in the same way; it's important to find what works for you. This is a guide, not a rulebook.

EASY

What is JavaScript and its role in web development?

Brief history and evolution of JavaScript.

Basic syntax and structure of JavaScript code.

Understanding variables, constants, and their declaration.

Data types: numbers, strings, boolean, and null/undefined.

Arithmetic, assignment, comparison, and logical operators.

Combining operators to create expressions.

Conditional statements (if, else if, else) for decision making.

Loops (for, while) for repetitive tasks. - Switch statements for multiple conditional cases.

MEDIUM

Defining functions, including parameters and return values.

Function scope, closures, and their practical applications.

Creating and manipulating arrays.

Working with objects, properties, and methods.

Iterating through arrays and objects.Understanding the Document Object Model (DOM).

Selecting and modifying HTML elements with JavaScript.Handling events (click, submit, etc.) with event listeners.

Using try-catch blocks to handle exceptions.

Common error types and debugging techniques.

HARD

Callback functions and their limitations.

Dealing with asynchronous operations, such as AJAX requests.

Promises for handling asynchronous operations.

Async/await for cleaner asynchronous code.

Arrow functions for concise function syntax.

Template literals for flexible string interpolation.

Destructuring for unpacking values from arrays and objects.

Spread/rest operators.

Design Patterns.

Writing unit tests with testing frameworks.

Code optimization techniques.

That's it I guess!

#codeblr #coding #programming #roadmap #coding community #progblr #web development #javascript

873 notes · View notes

mysteryshoptls · 6 months ago

Note

Not a request, but how were you able to gain special colored text on tumblr? Cause I saw the Silver Chef Story translation and I saw a darker red color for Riddle’s name and a warm gray for Silver.

Sure, here's a quick tutorial on the colors! When you create a new post on desktop, there's a gear icon in the top right corner. You'll want to go to the Text Editor option and change it to HTML

You'll see your document change into HTML formatting, with all the notations that come with whatever you've already typed up. You'll want to add

Using Apprentice Chef Silver's vignette as an example:

(p indicates a paragraph and b indicates bold) This gave me:

You can find many sites online that'll list Hex colors to use here, and many drawing programs will also give you the colors you want. For example, the colors I've chosen for each of the students were color picked from one of their Birthday Boy ribbon colors!

#ras replies

83 notes · View notes

hikakaomybeloveds · 14 days ago

Text

FELLOW TUMBLR USERS WHO ARE ALSO WRITERS WHO HATE GENERATIVE AI BUT USE GOOGLE DOCS DESPITE ITS AI SCRAPING AND CONSTANT PUSHING OF GEMINI BECAUSE THEY DON'T KNOW A GOOD, FREE ALTERNATIVE

I NEED TO PUT Y'ALL ON SOMETHING

MEET ELLIPSUS.

IF U WANT AN ALL-AROUND FANTASTIC, COMPLETELY FREE, WEB-BASED GDOCS ALTERNATIVE. USE ELLIPSUS.

SERIOUSLY, IT IS BETTER THAN GOOGLE DOCS IN LITERALLY EVERY WAY.

PROS:

-DRAFTS FEATURE CAN BE USED TO STORE NECESSARY INFORMATION SUCH AS EXCERPTS U PLAN ON PUTTING LATER ON IN WHATEVER UR WRITING, CHARACTER NAMES AND BACKSTORIES, ETC. EVEN IF U AREN'T USING THEM FOR COLLABORATION PURPOSES. I HAVE A DRAFT TO PUT ALL MY AO3 TAGS IN FOR EVERY FIC I WRITE

-THERE'S A TIMER BUILT-IN. WANT TO START CREATING A HABIT OF WRITING FOR A CERTAIN AMOUNT OF TIME EACH DAY? OPEN UP ELLIPSUS, CREATE A NEW DOC, START THE TIMER, AND GO.

-FOCUS MODE. OH MY GOD FOCUS MODE. I USE IT EVERY TIME I PROOFREAD ANYTHING. GETS RID OF THE WHOLE MENU, LEAVING YOU JUST THE TEXT. ICONIC

-THERE'S SO MANY THEMES. LIGHT, DARK, ULTRA DARK (MY PERSONAL FAVORITE), SEPIA, NATURE, THERE'S EVEN PRIDE THEMES CURRENTLY (LIGHT AND DARK). LIFESAVER FOR PEOPLE LIKE ME WHO HAVE SENSORY ISSUES AND HATE WHEN SHIT IS TOO BRIGHT

-WAY BETTER DEFAULT FONT THAN GOOGLE DOCS. I'M SORRY I AM FRANKLY SICK OF ACTING LIKE ARIEL IS NOT ONE OF THE WORST FONTS EVER. ELLIPSUS USES THE GENUINELY GORGEOUS "LITERATA" AS ITS DEFAULT FONT

-COLLABORATION! U CAN COLLABORATE! U CAN SHARE DOCUMENTS, U CAN COLLABORATE IN REAL-TIME JUST LIKE IN GOOGLE DOCS, EVERYTHING.

-GUYS. GUYS THERE'S AN EXPORT TO AO3 OPTION. U CAN CONNECT UR AO3, AND WHEN U'RE FINISHED WRITING, CLICK THAT "EXPORT TO AO3" BUTTON, AND ELLIPSUS WILL COPY UR ENTIRE WORK IN HTML AND OPEN AO3 IN ANOTHER TAB. A FUCKING LIFESAVER

-THERE'S A FOLDER SYSTEM. U CAN CREATE FOLDERS, AND THEN SUB-FOLDERS WITHIN THOSE FOLDERS. GENUINELY AMAZING FOR PEOPLE LIKE ME WHO WRITE A LOT BUT HATE HAVING A CLUTTERED WORKSPACE. I LITERALLY HAVE 140 WORKS ON ELLIPSUS BUT YOU KNOW WHAT MY DASHBOARD SHOWS? MY 8 FOLDERS.

-IT AUTOMATICALLY SHOWS YOUR WORD COUNT. U DON'T HAVE TO DO ANYTHING TO SEE IT EXCEPT SCROLL UP. AMAZING.

-AUTOMATICALLY CREATES AN OUTLINE WHEN U PUT HEADINGS ON YOUR DOCUMENT, ALLOWING FOR EASY NAVIGATION BETWEEN SECTIONS.

-NO GENERATIVE AI. EVER. NO AI SCRAPING, NO AI ASSISTANT SHOVED IN YOUR FACE, NOTHING.

CONS:

-IT'S WEB-BASED, SO NO APP ON MOBILE (ALTHOUGH IT DOES RUN INCREDIBLY WELL ON MOBILE) AND NO DESKTOP APPLICATION. THAT'S IT. THAT'S LITERALLY THE ONLY CON.

MAKE AN ACCOUNT. TRANSFER YOUR STUFF OVER FROM GOOGLE DOCS. USE IT INSTEAD. U WILL NOT REGRET IT

#angel rambles #yes this whole post is in all caps because I LOVE ELLIPSUS SO MUCH #i need everyone to use it i'm not even kidding #anti ai #anti generative ai #ao3 writer #writers of tumblr #writers on tumblr

23 notes · View notes

prokopetz · 2 years ago

Note

Hi, Mr Prokopetz, I'm a big fan. Apologies if you've answered this before, but I was wondering what software you use to create the pdf and epub layouts of your ttrpgs, and whether you'd recommend it to a hobbyist who wants to try putting together something more professional than a gdoc for their own ttrpg?

My workflow is unfortunately not terribly accessible unless you have a fair amount of technical know-how.

In brief, I write all of my games in Notepad++ as HTML documents, taking care to use only the subset of HTML5 tags which are supported by most popular EPUB readers. I then use Calibre (or, more, precisely, the command-line utility that comes with Calibre, though you can get mostly the same results via the GUI) to bundle the HTML document as an EPUB3 file. I typically distribute both the HTML and EPUB versions (the former in a zipfile with all of the fonts and images and such) because web browsers tend to have much better screen-reader support than EPUB apps do.

The PDF, meanwhile, is generated from the same master HTML document using CSS paged media extensions – the layout is all generated automatically based on rules specified in a big, gnarly CSS file, and is never touched by human hands. There are a number of software packages which can do this sort of CSS-driven HTML-to-PDF conversion, some of them free or open source; I use a commercial product called Prince because, to the best of my knowledge, it's the only such software which has out-of-the-box support for PDF/UA semantic tagging (i.e., the stuff you need to do in order to make your PDFs screen-reader friendly), but you have more options if you're willing to tag your PDFs manually. (I am not.)

As for whether I'd recommend doing it this way? Like I said, unless you're a proper gearhead, not really; it's super efficient once you get it all set up – the only version of the game I actually maintain is the master HTML document, and generating updated versions of all the other formats is a one-click affair – but it's really only feasible for me because I already knew how to all that workflow automation stuff for unrelated reasons. I can't imagine teaching yourself all that from scratch just to write elfgames!

#gaming #tabletop roleplaying #tabletop rpgs #game design #computers #technology

349 notes · View notes

izzycodes · 1 year ago

Text

Convert HTML to Image: A Step-by-Step Guide ✨

Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?

Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discovered the solution~!

This is an old tutorial I made 🐼

💛 Set your environment

Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:

We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of the body element is where we'll add the functionality for the conversion.

Your page should resemble the following:

As you can see, the "Click me" button will handle the conversion. We aim to convert everything within the div.info-div into an image.

💛 Using the html2canvas JavaScript Library

The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:

The steps to put the library in your project:

Visit the html2canvas website for more information.

Copy the CDN link from here

and include it in a script tag in your project's head tag in the HTML file:

That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.

💛 JavaScript Functionality

Here's the JavaScript code to handle the conversion:

In this code, I want to turn the whole div.info-div into an image, I put it into a variable in const div = document.querySelector(".info-div");.

I also put the button into a variable in const button = document.querySelector("button");

I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!

You can find similar code like this in the documentation of the html2canvas library:

What is happening here is:

We add the div (or what the element we want to take an image of) into the html2canvas([element]).then((canvas)

Added the image file type url to a variable = const imageDataURL = canvas.toDataURL("image/png"); - You can replace the png to other image file types such as jpg, jpeg etc

Created an anchor/link tag, added the href attribute to imageDataURL

The download attribute is where we will give the default name to the image file, I added "dog.png"

Perform the click() function to the anchor tag so it starts to download the image we created

And that's it!

💛 The End

And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.

If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! 💖🐼

#my resources #coding #codeblr #programming #progblr #studying #studyblr #programmer #html #html css #javascript #neocities #coding tips #html5 tutorial #html tutorial

157 notes · View notes

cdelphiki · 10 months ago

Text

In my class this week I have to create a document using html formatting “for the first time.”

Thanks ao3 it took like 5 minutes.

67 notes · View notes

greenhorn-art · 1 year ago

Text

All The King's Horses | As You Are Now, So Once Was I by @samwpmarleau (grumkinsnark)

All The King's Horses [LiveJournal ch1] [Fanfiction.net ch1]

As You Are Now, So Once Was I [LiveJournal ch1] [Fanfiction.net ch1]

Fandom: Supernatural, Criminal Minds

Rating: Teen | PG-13

Category: Gen

Words: ~36,192

All The King's Horses: Protect and Serve. Fidelity, Bravery, Integrity. To what lengths would you go to uphold those oaths? When it comes to a particularly brutal and unsolvable case, the BAU just may have to resort to some more unorthodox methods. SPN/Criminal Minds crossover.

As You Are Now, So Once Was I: Sequel to "All the King's Horses." When Dean catches J.J.'s press conference on the news about a current case and notices a few...inconsistencies, he realizes the BAU is definitely going to need his help. Again. ON HIATUS

About the Book

FORMAT: Letter quarto, flatback bradel binding, french link stitch, no tapes

FONTS: EB Garamond [via Google Fonts], Supernatural Knight [via DaFont], D-Din [via Font Squirrel], Daniel [via DaFont], Permanent Marker [via Google Fonts], Arial

IMAGES: Seal of the FBI [via Wikipedia], Dean's handprint scar [by greenhorn-art]

MATERIALS: 24lb Xerox Bold Digital paper (8.5"x11"), 80pt binder's board (~2mm), 30/3 size waxed linen thread, embroidery floss (DMC #721), 1.9mm cording, brown cardstock, black Cialux bookcloth, gold foil transfer sheet (came with We R Memory Keepers hot foil pen)

PROGRAMS USED: Fic exported with FicHub, word doc compiled in LibreOffice Writer, Typeset in Affinity Publisher, imposed with Bookbinder-JS, title pages designed in Affinity Designer/Photo

I first read these stories on LiveJournal back in 2013, some time after I first encountered Tumblr, Supernatural, and the wider world of online fandom. Once I discovered SPNxCriminal Minds crossovers I devoured so many of them. Something about POV Outsider on the Winchesters, the existing connections with investigating monster vs human-crazy cases, and run-ins with the FBI... it's just works so well.

Of all the SPNxCM fics I read and enjoyed, All The King's Horses is among those that bookmarked themselves in my brain. Since it's been living there all these years, I thought it deserved a place on my bookshelf too.

(Rambling below)

Sourcing the Fic

I used FicHub to download the fics off of Fanfiction.net as HTML. Then I pasted them into LibreOffice Writer and created rich text documents of each fic, so I could Place them into Affinity Publisher.

The stories were crossposted, first on LiveJournal and then Fanfiction. I included the metadata from both sites in the appendices.

(It's fascinating to see the differences in the same work between platforms. FFN requires genres, so if the author doesn't add them on LJ then by default there's more info on FFN. But FFN limits listed characters to 2, so authors have to pick and choose the most important. Then there's the author's amusing disclaimers and spoiler warnings for these fics, which are only included in the LJ version)

Shoutout to the author for how they linked/listed their accounts on other platforms! Thanks to that I was easily able to track down all the tags/metadata for the fics, and find them here to express my appreciation for their stories!

Typesetting

Fonts

EB Garamond is my new favourite body font, 11pt as per my usual.

The title page is entirely Arial: 1) it was the closest match I have to the case file prop I was copying, and 2) if it was a government doc they wouldn't be using anything but the most basic fonts.

Headings and the the bullets bracketing the page numbers are set it Supernatural Knight, a free font in the style of Supernatural's title.

The location segments are in D-DIN, the closest free match to the font Criminal Minds uses (which is probably DIN).

Daniel is used for Dean's 'rushed but legible' note.

Permanent Marker for the 'thick black Sharpie' case file labels.

Artwork

Title pages designed as FBI case files, copied from a prop found online (specifically Etsy's propfictionstudios', but it's all over the web so no idea who actually created it). I had fun plugging in all the fanfic/bookbinding meta!

The ID# above the author's name is the FFN story ID, and the date is the date originally posted on LJ.

The handprint used in the headings of ATKH is Dean's scar. I traced off of a screenshot from s4e01 Lazarus Rising. I chose to use the handprint instead of the anti-possession tattoo or a Devil's Trap as my SPN art element because 1) it's specific to Dean, and 2) indicates/reminds that the story is not set during the season 3 Agent Henriksen/FBI arc.

Grabbed the FBI seal off of Wikipedia.

Construction

Both fics typeset and printed separately, then sewn together into one book. Title page for the sequel was tipped in like an endpaper prior to sewing.

Endbands sewn with orange embroidery floss (DMC 721) around 1.9mm cording. I chose orange because Dean's being in jail brought to mind the orange prison jumpsuits Sam and Dean wore in s1e19 Folsom Prison Blues.

Black bookcloth for the cover, like the Winchesters' beloved black '67 Chevy Impala. (I'd wanted a Supernatural reference to balance out the Criminal Minds-ness of the FBI case files).

I'd originally planned to make lineart of the front of the car, and have it stretch across the bottom of the cover (maybe even wrap around to the back). Even found a useful reference to trace [from here], but it didn't look as good as I'd hoped. Instead I reused the FBI seal and swapped out its text with the titles.

(The effect of shiny foiled FBI symbol on small black book reminds me of one of those FBI badge wallets!)

The foiling process was an unnecessarily long and gruelling affair. My laptop served as a massive power bank for the hot foil pen as I spent 2hrs ever so slowly tracing the image, and then 15mins on the author name and touch-ups. Did it need to take so long? Moving slowly, pushing down hard, going over everything at least three times? I'm sure it didn't. BUT I did not want to chance peeling up the foil to check how I was doing and risk shifting it. It was worth it in my books (haha) ‒ I feel giddy and kick my feet like a schoolgirl whenever I see it!

New Things

Used 24lb paper for the first time, and I love it! It's a little thicker and heavier then regular 20lb printer paper, feels more substantial.

The page numbers & running/section headers are along the outer margin, instead of in the header/footer. This was my way around Affinity's buggy-ness regarding pinning things inline in master pages. (More about that below). If I had been thinking, I could have formatted them like the tabs on a file folder and cut the textblock to match. Oh well, the things you notice once it's printed 😔

This time I also started new chapters/sections using text flow & paragraph spacing settings, instead of using a master. As always, there are pros and cons.

Pro: much faster and less involved. (find chapter start, apply paragraph style VS working from the end cutting text, inserting a frame break, unlinking frames, inserting new pages with master, relinking, pasting, and adding chapter title to a different text box)

Con: images need to be added manually (whether by adding image directly, or by applying a master with the image). I forgot to do this for the second fic, so only ATKH have Dean's handprint scar.

Difficulties Encountered

Affinity Publisher is fighting me on pinning things inline on master pages. They like to disappear on regular pages I've applied the master to. Sometimes it works, sometimes it doesn't, sometimes it only works on some of the pages. Idk what's up. (The bullet character only faces one way so I had use textboxes, flip/mirror one, and pin them inline to the page number).

So instead of having page numbers in the footer, bookended left and right by text boxes with Supernatural Knight's bullet, I put it vertically down the side.

Updated Publisher and all my paragraph styles' fonts changed/went funny. Something to do with the update's variable font support, I think. What was previously 'EB Garamond' regular, was now something along the lines of 'EBGaramond-Regular' which isn't a font. Issue seems to have ironed itself out in my original (near-complete) doc while I was busy remaking it. 😐

On the bright side, the update brought QR code generation to Affinity!

#All The King's Horses #As You Are Now So Once Was I #grumkinsnark #samwpmarleau #fanfiction #bookbinding #fanbinding #supernatural #criminal minds

109 notes · View notes