#create html document

[infotechlearner]

How to create and save html document is the article we have explained the concept of create and save html document. To create the html document we have to click on the notepad in the by searching in the windows menu then write the code of html and save it in the .html extension file format.

[im-still-a-robot]

i think...you should make a neocities for your dnd character >:)

I am hanging this ask above my desk like homer simpson. By god I am going to struggle through the back pain and headaches to make this neocities for you my dear friend. Thank you.

[manonamora-if]

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.

[codemerything]

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!

[reelmegabyte]

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

[prokopetz]

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!

[greenhorn-art]

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!

[izicodes]

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! 💖🐼

[codingquill]

JavaScript Fundamentals

I have recently completed a course that extensively covered the foundational principles of JavaScript, and I'm here to provide you with a concise overview. This post will enable you to grasp the fundamental concepts without the need to enroll in the course.

Prerequisites: Fundamental HTML Comprehension

Before delving into JavaScript, it is imperative to possess a basic understanding of HTML. Knowledge of CSS, while beneficial, is not mandatory, as it primarily pertains to the visual aspects of web pages.

Manipulating HTML Text with JavaScript

When it comes to modifying text using JavaScript, the innerHTML function is the go-to tool. Let's break down the process step by step:

Initiate the process by selecting the HTML element whose text you intend to modify. This selection can be accomplished by employing various DOM (Document Object Model) element selection methods offered by JavaScript ( I'll talk about them in a second )

Optionally, you can store the selected element in a variable (we'll get into variables shortly).

Employ the innerHTML function to substitute the existing text with your desired content.

Element Selection: IDs or Classes

You have the opportunity to enhance your element selection by assigning either an ID or a class:

Assigning an ID:

To uniquely identify an element, the .getElementById() function is your go-to choice. Here's an example in HTML and JavaScript:

HTML:

<button id="btnSearch">Search</button>

JavaScript:

document.getElementById("btnSearch").innerHTML = "Not working";

This code snippet will alter the text within the button from "Search" to "Not working."

Assigning a Class:

For broader selections of elements, you can assign a class and use the .querySelector() function. Keep in mind that this method can select multiple elements, in contrast to .getElementById(), which typically focuses on a single element and is more commonly used.

Variables

Let's keep it simple: What's a variable? Well, think of it as a container where you can put different things—these things could be numbers, words, characters, or even true/false values. These various types of stuff that you can store in a variable are called DATA TYPES.

Now, some programming languages are pretty strict about mentioning these data types. Take C and C++, for instance; they're what we call "Typed" languages, and they really care about knowing the data type.

But here's where JavaScript stands out: When you create a variable in JavaScript, you don't have to specify its data type or anything like that. JavaScript is pretty laid-back when it comes to data types.

So, how do you make a variable in JavaScript?

There are three main keywords you need to know: var, let, and const.

But if you're just starting out, here's what you need to know :

const: Use this when you want your variable to stay the same, not change. It's like a constant, as the name suggests.

var and let: These are the ones you use when you're planning to change the value stored in the variable as your program runs.

Note that var is rarely used nowadays

Check this out:

let Variable1 = 3; var Variable2 = "This is a string"; const Variable3 = true;

Notice how we can store all sorts of stuff without worrying about declaring their types in JavaScript. It's one of the reasons JavaScript is a popular choice for beginners.

Arrays

Arrays are a basically just a group of variables stored in one container ( A container is what ? a variable , So an array is also just a variable ) , now again since JavaScript is easy with datatypes it is not considered an error to store variables of different datatypeslet

for example :

myArray = [1 , 2, 4 , "Name"];

Objects in JavaScript

Objects play a significant role, especially in the world of OOP : object-oriented programming (which we'll talk about in another post). For now, let's focus on understanding what objects are and how they mirror real-world objects.

In our everyday world, objects possess characteristics or properties. Take a car, for instance; it boasts attributes like its color, speed rate, and make.

So, how do we represent a car in JavaScript? A regular variable won't quite cut it, and neither will an array. The answer lies in using an object.

const Car = { color: "red", speedRate: "200km", make: "Range Rover" };

In this example, we've encapsulated the car's properties within an object called Car. This structure is not only intuitive but also aligns with how real-world objects are conceptualized and represented in JavaScript.

Variable Scope

There are three variable scopes : global scope, local scope, and function scope. Let's break it down in plain terms.

Global Scope: Think of global scope as the wild west of variables. When you declare a variable here, it's like planting a flag that says, "I'm available everywhere in the code!" No need for any special enclosures or curly braces.

Local Scope: Picture local scope as a cozy room with its own rules. When you create a variable inside a pair of curly braces, like this:

//Not here { const Variable1 = true; //Variable1 can only be used here } //Neither here

Variable1 becomes a room-bound secret. You can't use it anywhere else in the code

Function Scope: When you declare a variable inside a function (don't worry, we'll cover functions soon), it's a member of an exclusive group. This means you can only name-drop it within that function. .

So, variable scope is all about where you place your variables and where they're allowed to be used.

Adding in user input

To capture user input in JavaScript, you can use various methods and techniques depending on the context, such as web forms, text fields, or command-line interfaces.We’ll only talk for now about HTML forms

HTML Forms:

You can create HTML forms using the &lt;;form> element and capture user input using various input elements like text fields, radio buttons, checkboxes, and more.

JavaScript can then be used to access and process the user's input.

Functions in JavaScript

Think of a function as a helpful individual with a specific task. Whenever you need that task performed in your code, you simply call upon this capable "person" to get the job done.

Declaring a Function: Declaring a function is straightforward. You define it like this:

function functionName() { // The code that defines what the function does goes here }

Then, when you need the function to carry out its task, you call it by name:

functionName();

Using Functions in HTML: Functions are often used in HTML to handle events. But what exactly is an event? It's when a user interacts with something on a web page, like clicking a button, following a link, or interacting with an image.

Event Handling: JavaScript helps us determine what should happen when a user interacts with elements on a webpage. Here's how you might use it:

HTML:

<button onclick="FunctionName()" id="btnEvent">Click me</button>

JavaScript:

function FunctionName() { var toHandle = document.getElementById("btnEvent"); // Once I've identified my button, I can specify how to handle the click event here }

In this example, when the user clicks the "Click me" button, the JavaScript function FunctionName() is called, and you can specify how to handle that event within the function.

Arrow functions : is a type of functions that was introduced in ES6, you can read more about it in the link below

If Statements

These simple constructs come into play in your code, no matter how advanced your projects become.

If Statements Demystified: Let's break it down. "If" is precisely what it sounds like: if something holds true, then do something. You define a condition within parentheses, and if that condition evaluates to true, the code enclosed in curly braces executes.

If statements are your go-to tool for handling various scenarios, including error management, addressing specific cases, and more.

Writing an If Statement:

if (Variable === "help") { console.log("Send help"); // The console.log() function outputs information to the console }

In this example, if the condition inside the parentheses (in this case, checking if the Variable is equal to "help") is true, the code within the curly braces gets executed.

Else and Else If Statements

Else: When the "if" condition is not met, the "else" part kicks in. It serves as a safety net, ensuring your program doesn't break and allowing you to specify what should happen in such cases.

Else If: Now, what if you need to check for a particular condition within a series of possibilities? That's where "else if" steps in. It allows you to examine and handle specific cases that require unique treatment.

Styling Elements with JavaScript

This is the beginner-friendly approach to changing the style of elements in JavaScript. It involves selecting an element using its ID or class, then making use of the .style.property method to set the desired styling property.

Example:

Let's say you have an HTML button with the ID "myButton," and you want to change its background color to red using JavaScript. Here's how you can do it:

HTML: <button id="myButton">Click me</button>

JavaScript:

// Select the button element by its ID const buttonElement = document.getElementById("myButton"); // Change the background color property buttonElement.style.backgroundColor = "red";

In this example, we first select the button element by its ID using document.getElementById("myButton"). Then, we use .style.backgroundColor to set the background color property of the button to "red." This straightforward approach allows you to dynamically change the style of HTML elements using JavaScript.

[nianeyna]

Ever wanted to print and bind your own customized bullet journal, but then inevitably discovered that finding or making a suitable dot grid pdf file is weirdly hard? Like, maybe you find one, but it's never the right scale, it looks crappy, you can't edit it, it includes some junk you don't want... and then you go to try and make your own and it's like, ok get a png of one page of dots and copy-paste it into a document 200 times - what! nightmare! I'm not doing that! ...uhhhhh, not that I have any personal bullet journal typesetting related trauma or anything. haha.

But I mean, it's just dots, right? you should be able to go, ok I want 200 pages of dots 5mm apart on half-letter sized pages, make it so. Why is that so hard?

Well, now it's easy!

Click the link, follow the instructions, get your journal, print that sucker out and bind it using your preferred method. I promise it's that easy. Please don't be daunted by the command-line stuff - you do NOT need any coding experience to use this template (although if you can figure out a bit of html and css, you'll be able to do even more customization than what I've already built in).

Also, I've dedicated this code to the public domain, so you are free to do just about anything with it including modify, redistribute with or without credit, use for commercial purposes, etc etc. But, if you like it, feel free to tell me how cool and pretty I am in the notes. ⤵

[su-codes]

Hi, I'm Su! 💫

I've been on tumblr for ages, but I decided to create this blog to document my progress with learning web dev!

About me:

I'm 25, mexican-american, and I have an orange cat 🐱 (hence the avi, although I'm well aware it looks more like a fox lol)

I really struggle with undiagnosed adhd, so sometimes I'll get in ruts that last anywhere from a couple of days to a couple of months :(

I have a biochemistry degree but never used it because I thought I wanted to be a pharmacist lmao

Used to be a teacher but fuck that fr (me and the US dept. of education have beef)

I'm currently enrolled part time in a full-stack coding bootcamp

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

Goals for this blog:

❤️‍🔥 keep me motivated and inspired

🖊 post updates on things i've worked on/accomplished

📚 reblog resources for future reference

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

Languages I'm learning:

HTML

CSS

Javascript

node.js/express.js/handlebars.js

MySQL

[parafiles]

Our main team member Art is retiring, our applications are open.

The creator of the toonimal document and the admin if this tumblr as well as the creator of the "critterkiddo" parody tumblr is now going into retirement. We are searching for members who have experience with 'the hunt', stings, etc.

Art will be answering questions here on Tumblr until October 1st, so if you have any questions regarding the pediverse do reach out.

Application is Below.

Required:

MUST be at least 18

MUST have a strong stomach. You will see fucked up shit on an almost daily basis. This is not for those who are sensitive or easily triggered.

MUST be able to keep level headed and remain professional. Must be able to keep a calm demeanor even in situations that may be extreme.

MUST be able to create documents, articles or posts in a professional manner.

MUST be LGBTQIA. Our team is lgbt and furry led and we intend to keep it this way.

MUST be able to make phone calls to law enforcement.

A STRONG STOMACH CANNOT BE UNDERSTATED.

Preferences:

Experience in getting predators arrested, sting operations, etc.

Connected to other predator poachers.

Experience or interest in journalism.

HTML / Coding experience

Knowledge of "Tools" for "Digging"

If these apply to you and you are interested, shoot us a DM. We will need to go through vetting for each applicant in order to preserve safety.

Fill out this and send to dms:

Name:

Alias for the group:

Age:

Why you're interested:

Strengths:

Experience:

Any additional information we should know:

Applications Close October 2nd

[sophia--studies]

100 days of code - days 13-14

October 27th, 2023

Well, usually making my daily post is the last thing I do in a day, but yesterday I was so tired that I just went to bed 😴. So today is two days in one post.

Day 13 🪨📜✂️

Yesterday I practice JavaScript by making a classic rock, paper, scissors game. It's very simple, just take a user's input and plays against a randomly generated choice by the computer. For now, it's only a terminal game, but I'll use this logic to implement a game with graphic interface in the browser.

Day 14 🛒

Today I read about DOM manipulation and events.

DOM (document object model) is a JavaScript object that allow us to modify the HTML of a web page. With this feature, we can create dynamic websites that the content can vary.

Events in JS and HTML let us handle some event, like mouse clicks, when the mouse is over something, key press, and others.

I did a little "app" to use this features that you can add and remove items from a shopping list.

Clicking the button is the event that calls a function that insert the text into HTML.

That's it ✂️✂️, I'm enjoying doing this web dev stuff 🤓

Also, two weeks!! 😯😊

[manonamora-if]

Please share this post instead.

The 100% Good Twine SugarCube Guide!

NOTE: while the Guide is in its complete form, it will be updated when SugarCube 2 updates (or if I spot a typo/error).

This SugarCube Guide was create as an alternative to the official documentation, providing a comprehensive and wide look over the use of Twine, particularly the SugarCube format.

The Guide is compartmentalised in 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 Use: adding more customisation and complex code Will probably require some CSS knowledge, and maybe some JavaScript

Advanced More (incomplete): the most complex macros and APIs Will surely require some JavaScript/jQuery knowledge

Each category explains a multitude of 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.36.1*), 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. *In case of format update, this Guide will make relevant edits.

The Guides also provides a list of further resources, for the different coding languages (SugarCube, HTML, CSS, JavaScript, jQuery).

VIEW OR DOWNLOAD THE GUIDE!!!!

[thefcdproject]

Welcome to the Faceclaim Directory Project! The FCD project has been a massive project undertaken by myself in an attempt to create one large database of all varieties of faceclaims for writers of all kinds to use. This project has been in the works for well over a year and a half now, and it’s finally ready to be available to the world! This is something that is an eternal WIP. What I have available is the culmination of over 7000 faceclaims, and there is so much more I hope to add in the future. I have put countless hours into this project. I’m well aware it’s not perfect, and due to the sheer size alone I have no doubt there are errors that I was unable to catch. Please feel free to submit any and all errors you find! You can click anywhere in this sentence to be directed to my FAQ page in order to answer questions I anticipated people asking. Due to tumblr’s size limit on html documents, I’ve had to split up the directory into six different pages.

Click here to view the directory!