#Basic HTML elements

[webtutorsblog]

Want to upgrade your coding skill to create animations and interactive graphics? This blog covers everything about HTML animation including the Canvas API.

[orcelito]

Working on my javascript for my web page. Turns out I have the perfect kind of setup to accomplish some of the project requirements, specifically with even handlers and user interactions

My website, conceptually, will load a different employee details page depending on what employee name is clicked on. But I need to load it dynamically (instead of hard-coding it) so that the user can add or delete employees & it'll be able to still load the relevant shit.

So! Only one employee details page, but depending on how it's loaded, it'll load a different employee's information. Still working on getting down Exactly how to do it (I'm thinking using URL parameters that'll read a different object depending on what ID is used)

It's entirely doable. In fact, it's probably extremely common to do in web pages. No one wants to hard-code information for every new object. Of course not. And thus the usefulness of dynamic javascript stuff.

I can do this. I can very much do this.

[quillusquillus]

absolutely devastated to learn today that 123guestbook, staple of the early internet, is shutting down on July 1st (locking guestbooks on June 1st, unclear if they'll be deleted a month after that but presumably so)

If you have a 123guestbook embedded in your site, now is the time to start archiving it, if you want to keep those old guest posts! (please note that the Wayback Machine will almost certainly not preserve 123guestbooks on old archived sites, since they are externally hosted)

if anyone has a recommendation for another guestbook btw (or shoutbox I guess) I'm all ears, my criteria are basically custom colours, not shady af, and allows me to moderate it personally instead of some kind of automation. I'm also looking for a secondary one that allows nsfw in their TOS, which seems to be a big ask these days :/

[rapidreptile]

I have successfully killed the clown

[agentromanoffsir]

neocities guide - why you should build your own html website

do you miss the charm of the 90s/00s web where sites had actual personality instead of the same minimalistic theme? are you feeling drained by social media and the constant corporate monopoly of your data and time? do you want to be excited about the internet again? try neocities!!

what is neocities?

neocities is a free hosting website that lets you build your own html website from scratch, with total creative control. in their own words: "we are tired of living in an online world where people are isolated from each other on boring, generic social networks that don't let us truly express ourselves. it's time we took back our personalities from these sterilized, lifeless, monetized, data mined, monitored addiction machines and let our creativity flourish again."

why should I make my own website?

web3 has been overtaken by capitalism & conformity. websites that once were meant to be fun online social spaces now exist solely to steal your data and sell you things. it sucks!! building a personal site is a great way to express yourself and take control of your online experience.

what would I even put on a website?

the best part about making your own site is that you can do literally whatever the hell you want! focus on a specific subject or make it a wild collection of all your interests. share your art! make a shrine for one of your interests! post a picture of every bird you see when you step outside! make a collection of your favorite blinkies! the world is your oyster !! here are some cool example sites to inspire you: recently updated neocities sites | it can be fun to just look through these and browse people's content! space bar | local interstellar dive bar creature feature | halloween & monsters big gulp supreme peanutbuttaz | personal site dragodiluna linwood | personal site patho grove | personal site

getting started: neocities/html guide

sound interesting? here are some guides to help you get started, especially if you aren't familiar with html/css sadgrl.online webmastery | a fantastic resource for getting started with html & web revival. also has a layout builder that you can use to start with in case starting from scratch is too intimidating web design in 4 minutes | good for learning coding basics w3schools | html tutorials templaterr | demo & html for basic web elements eggramen test pages | css page templates to get started with sadgrl background tiles | bg tiles rivendell background tiles | more free bg tiles

fun stuff to add to your site

want your site to be cool? here's some fun stuff that i've found blinkies-cafe | fantastic blinkie maker! (run by @transbro & @graphics-cafe) gificities | internet archive of 90s/00s web gifs internet bumper stickers | web bumper stickers momg | gif gallery 99 gif shop | 3d gifs 123 guestbook | add a guestbook for people to leave messages cbox | add a live chat box moon phases | track the phases of the moon gifypet | a little clickable page pet adopt a shroom | mushroom page pet tamaNOTchi | virtual pet crossword puzzle | daily crossword imood | track your mood neko | cute cat that chases your mouse pollcode | custom poll maker website hit counter | track how many visitors you have

web revival manifestos & communities

also, there's actually a pretty cool community of people out there who want to bring joy back to the web! melonland project | web project/community celebrating individual & joyful online experiences. Also has an online forum melonland intro to web revival | what is web revival? melonking manifesto | status cafe | share your current status nightfall city | online community onio.cafe | leave a message and enjoy the ambiance sadgrl internet manifesto | yesterweb internet manifesto | sadly defunct, still a great resource reclaiming online social spaces | great manifesto on cultivating your online experience

in conclusion

i want everyone to make a neocities site because it's fun af and i love seeing everyone's weird personal sites that they made outside of the control of capitalism :) say hi to me on neocities

EDIT: part 2!!

[phantomrose96]

Honestly I recommend everyone learn just a littttle bit of CSS because it really is powerful and just makes bits and pieces of your internet experience more convenient.

Right now I'm cataloguing recipes I've really enjoyed, just trying to get them all in one place. Many of these are instagram recipes and, because I don't trust link rot (aka the possibility that the instagram link goes dead one day), I'm including a screenshot of the recipe along with the link.

But instagram on desktop... looks like this

(Link, for credit. It's a good recipe)

I obviously could just copy-paste the recipe out of there. But a screenshot would be cleaner for how I'm cataloguing these.

And as-is, I'd have to scroll the whole height of that small right-side window about 4 times to fit it all.

But actually... I can just resize that div holding that whole right-side content

Basically I

hit f12 to open the dev tools

clicked the element finder

clicked on an element inside the recipe side

followed it up the tree until I found the element holding the whole recipe side (do this by hovering the div in the dev tools panel way on the right, then hovering upward and up until I find the element which is the highest up that still only contains the recipe-side content)

in the element.style part, set "width: 1000px" and "height: 1500px"

(I notice the width seems to still be less than 1000px, even though it got bigger)

likely suggests there's an element above it with a max-width set

go up the tree higher until I find the element with the max-width and uncheck that style

screenshot ready

Maybe that sounded complicated but it took me probably 20-30 seconds

And this isn't just about screenshotting recipes like.

website with an annoying gif? select gif, delete gif

do you want a clean screenshot of a digital receipt for record-keeping without a large company banner or irrelevant information? delete unnecessary elements, adjust widths, screenshot

SOMETIMES, you can bypass paywalls if they're relying on something like overflow: hidden, or an overlay in the way, or some JS that runs (you can disable JS in the dev tools)

lost the jpg/png file you used for your profile picture and size doesn't totally matter? grab it from the img src while logged in. (you might even be able to find it in a bigger size by changing the url query parameters)

color contrast on an article really bad? find and change background color. find and change font color

want to make a funny fake screenshot without learning photoshop? just edit the page content in the dev tools

This isn't about like being good enough to write scripts or browser extensions. Really if you just have some basic HTML/CSS understanding a hat worth of tricks, you can make so many little adjustments in your favor.

[all-the-fish]

Oh, you know, just the usual internet browsing experience in the year of 2024

Some links and explanations since I figured it might be useful to some people, and writing down stuff is nice.

First of all, get Firefox. Yes, it has apps for Android/iOS too. It allows more extensions and customization (except the iOS version), it tracks less, the company has a less shitty attitude about things. Currently all the other alternatives are variations of Chromium, which means no matter how degoogled they supposedly are, Google has almost a monopoly on web browsing and that's not great. Basically they can introduce extremely user unfriendly updates and there's nothing forcing them to not do it, and nowhere for people to escape to. Current examples of their suggested updates are disabling/severly limiting adblocks in June 2024, and this great suggestion to force sites to verify "web environment integrity" ("oh you don't run a version of chromium we approve, such as the one that runs working adblocks? no web for you.").

uBlockOrigin - barely needs any explanation but yes, it works. You can whitelist whatever you want to support through displaying ads. You can also easily "adblock" site elements that annoy you. "Please log in" notice that won't go away? Important news tm sidebar that gives you sensory overload? Bye.

Dark Reader - a site you use has no dark mode? Now it has. Fairly customizable, also has some basic options for visually impaired people.

SponsorBlock for YouTube - highlights/skips (you choose) sponsored bits in the videos based on user submissions, and a few other things people often skip ("pls like and subscribe!"). A bit more controversial than normal adblock since the creators get some decent money from this, but also a lot of the big sponsors are kinda scummy and offer inferior product for superior price (or try to sell you a star jpg land ownership in Scotland to become a lord), so hearing an ad for that for the 20th time is kinda annoying. But also some creators make their sponsored segments hilarious.

Privacy Badger (and Ghostery I suppose) - I'm not actually sure how needed these are with uBlock and Firefox set to block any tracking it can, but that's basically what it does. Find someone more educated on this topic than me for more info.

Https Everywhere - I... can't actually find the extension anymore, also Firefox has this as an option in its settings now, so this is probably obsolete, whoops.

Facebook Container - also comes with Firefox by default I think. Keeps FB from snooping around outside of FB. It does that a lot, even if you don't have an account.

WebP / Avif image converter - have you ever saved an image and then discovered you can't view it, because it's WebP/Avif? You can now save it as a jpg.

YouTube Search Fixer - have you noticed that youtube search has been even worse than usual lately, with inserting all those unrelated videos into your search results? This fixes that. Also has an option to force shorts to play in the normal video window.

Consent-O-Matic - automatically rejects cookies/gdpr consent forms. While automated, you might still get a second or two of flashing popups being yeeted.

XKit Rewritten - current most up to date "variation "fork" of XKit I think? Has settings in extension settings instead of an extra tumblr button. As long as you get over the new dash layout current tumblr is kinda fine tbh, so this isn't as important as in the past, but still nice. I mostly use it to hide some visual bloat and mark posts on the dash I've already seen.

YouTube NonStop - do you want to punch youtube every time it pauses a video to check if you're still there? This saves your fists.

uBlacklist - blacklists sites from your search results. Obviously has a lot of different uses, but I use it to hide ai generated stuff from image search results. Here's a site list for that.

Redirect AMP to HTML - redirects links from their amp version to the normal version. Amp link is a version of a site made faster and more accessible for phones by Bing/Google. Good in theory, but lets search engines prefer some pages to others (that don't have an amp version), and afaik takes traffic from the original page too. Here's some more reading about why it's an issue, I don't think I can make a good tl;dr on this.

Also since I used this in the tags, here's some reading about enshittification and why the current mainstream internet/services kinda suck.

[spiders-around]

YOU MUST MAKE A WEBSITE

Oh wow, look at that! YET ANOTHER post urging you to make a webbed site! What a completely new thing that people haven't made a thousand masterposts for already!!

• Making a website might look scary. It is Not.

At first, I too thought making a website was too much work. It really isn't! It turns out that all you need is

an HTML file,

a web hosting service and

w3schools tutorials,

and that's about it!

This post will point you towards these resources, and others I found useful while figuring out how to make a website.

• VERY QUICK EXPLANATIONS:

What's HTML and CSS?

HTML is the content of your webpage, the skeleton of it. What shows up in a webpage is what's written in the HTML file!

CSS is the way the HTML is styled; the colour of the background and the letters, the size of elements, the font, all that!

Do I absolutely NEED JavaScript for a website?

Not at all! You don't need to worry about learning it before getting started.

• What do I make a website for? What do I put in there?

ANYTHING AND ALMOST EVERYTHING. Here's some ideas for pages from a post of mine were I was very normal about websites:

You can make a page that's only pictures of your pets.

You can make an interactive adventure.

You can make your own academic blog full of your own essays or articles.

You can just post a ton of art or make a full music page.

You can make a blog and infodump eternally, give book reccs and reviews. You can host a thousand virtual pets and nothing else.

Upload entire books in a single html file. Make a wikipedia for your ocs. Make a fake site for a random fictional place (restaurant, hotel, whatever). You can make a thousand fanpages/shrines about your favorite media. You can upload your own webcomic and make it all like a fancy website and shit.

I could keep going but, for the sake of "brevity", I won't.

• WEBSITE EXAMPLES!

If I started listing the websites I know, this post would be bottomless. Here's only seven:

https://publictransit.neocities.org/ - A webbed site, for sure

https://ribo.zone/ - A personal site

https://leusyth.neocities.org/ - An art archive

https://solaria.neocities.org/ - Personal website with A Lot of stuff (it'll come up in a bit, because it offers web making resources)

https://hog.neocities.org/ - The Hogsite

https://thegardenofmadeline.neocities.org/ - Another personal site! It also has a web resources page and has made another masterpost like this one (but better)

https://spiders.neocities.org/ - My own website, which must be weird to see in mobile . sorry

• You've convinced me. I want a webbed site. Where do I start?

https://neocities.org/

FIRST OF ALL: Neocities. It is a free web hosting service, and it's the one I and the sites I linked use!

When I first started, my website was a black page with red letters and a drawing, and nothing else! It was like that for a month, till i started picking up on how to do things.

Here's what helped me get an idea of how to make things work:

https://sadgrl.online/learn/articles/beginners-guide-neocities

An absolute beginners guide to neocities -- while when you make an account there you get a tutorial page from the site, this one's extra support for that.

https://www.w3schools.com/

Learn HTML, CSS, JavaScript and MANY other coding things for free. All the tutorial/reference pages have live testing windows for you to mess with!! helped me a LOT while figuring this stuff out!

https://htmlcheatsheet.com/

https://htmlcheatsheet.com/css/

Cheatsheets for HTML and CSS, respectively. It includes a JavaScript one too!

https://sadgrl.online/webmastery/

Sadgrl's webmastery resources! Also includes the next resource listed here:

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

Sadgrl's layout builder; not a lot of customization at a first glance, but I've seen wildly different websites all using it as a base, plus it works using CSS Flexbox, so it generates a responsive layout!

(basically, a responsive layout is one that translates well in different sized screens)

https://www.tumblr.com/fysa/728086939730919424/wikitable-code?source=share

Tumblr user fysa made this layout imitating a wiki page!

https://brackets.io/

At some point, you might want to do things outside the Neocities code editor and get one outside the site. I recommend Brackets, because my old as fuck computer can run that and absolutely nothing else apparently, and it works wonderfully! Though I recommend either turning off the code autocomplete or using it after a good while of already using the Neocities code editor, so you get used to coding on your own.

http://www.unit-conversion.info/texttools/text-to-html/

Turn your text into HTML code! i use this kind of pages for my lengthy blog entries that I don't feel like formatting myself.

https://imagecompressor.com/

COMPRESS YOUR IMAGES.

The heavier an image is, the more your site weighs and the more time your page will spend loading. You don't want that, specially if your site is heavy on graphics. This might help!

https://solaria.neocities.org/guides

Some CSS, JavaScript and Accessibility guides! Worth checking out!

https://eloquentjavascript.net/

This is a free, interactive book for learning JavaScript! NOTE: It is very intuitive, but JavaScript is HARD!! I still haven't learned much of it, and my website does fine without so don't worry if you end up not doing much with it. It's still useful + the exercises are fun.

And now, accessories!

• Silly stuff for your page :]

https://gifypet.neocities.org/

Make a virtual pet, copy the code and paste it in your HTML file! You'll get a little guy in your webbed site :]

https://www.wikplayer.com/

Music player for your website!

http://www.mf2fm.com/rv/

JavaScript silly effects for your site :]

https://blinkies.neocities.org/geoblinkies

Blinkie search engine!

https://www.cbox.ws/

Add a chatbox to your site!!

https://momg.neocities.org/

Infinite gallery of gifs. i've spent hours in there looking at moving pictures and out of them all, the ONLY gif i actually ended up using on my site was a rotating tomato slice. it is still there. trapped.

https://wrender.neocities.org/tarotinstructions

A widget that gives you a random tarot card!

https://www.websudoku.com/widget.php

Sudoku widget!

That's about it for now! I don't know how to end this!!! Remember to have fun and google everything you don't know :]

[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!

[adapertiones]

(Alt Text: Tragibox Lore Resource Masterpost. Archives, official links, fan docs, etc...)

Guess who accidentally deleted it when they were going to edit something... yeah.

LAST UPDATED; 30/03/25

Thought this would be treasured by others as much as it is by me. Wherever my hyperfixation takes me to learn is for me to share!!!

If you have any additions, feel free to send them to me so I can add them! Also don't doubt about telling me if any of the links happen to be broken or if anything is incorrectly linked!

⚠️ Some things to keep in mind:

Tragibox Lore is currently being rewritten by the new owner of the project, Ruby Waters. Some things might get changed!

Breakthrough bonuses are fanmade.

Ruby has kindly asked to not ship characters within Tragibox, this includes Neester x Lilac. Screenshots of this boundary can be found on the Lore Archive Masterdoc linked below. DaveMack is excepted from this since it's a canon ship! Canon ships are allowed.

Official Orin Ayo Lore Doc (Wayback Machine Link): Might be a bit laggy on phone. Try not to touch the text too much because it sends you to refresh the page (HAPPENED MANY TIMES...). There's a missing picture of Acheture Blunt's appearance before death but I managed to dig around a little and find it! It's currently on the lore archive below.

Tragibox Lore Archive Masterdoc: A document by me. Archives the official lore doc, in-game profiles (in progress), discord lore questions answered and some other things. My directory basically!!! Don't request editing access. Note: When opening in a mobile browser, check "desktop size/browser view" to be able to see the images better, otherwise they will look blurry.

Official Tragibox Discord Server: Activity varies a lot but very fun! There is interesting lore material around and you can ask lore questions. Might serve to track the progress of the project in the future! Also good to interact with other Tragibox fans. Special shout-out to whoever sent me the invite link through strawpage when I asked for it, you're a real one sob sob...

Tragibox Archive by Smugg/Pk Freeze: HTML version of Tragibox games saved plus a bit of lore information screenshoted~

Orin Ayo Wiki: Take some of the things here as a grain of salt, information tends to be changed by users and is usually not backed by sources. Lore related note; don't take the info in character profiles in Orin Ayo as the 100% truth, as most of that information can be manipulated by cultists~

Extra to Orin Ayo Wiki: Paige's Wiki Page

Breakthrough Wiki: Same thing as the Orin Ayo Wiki. This time, character info can be trusted a little more, most of it is written directly by Sol but there are some cases of unknown characters or Dave writting them (Dave's logs have his signature)

Using this little space to add that I'm currently working on a document analysing some elements on Tragibox from a more scientific point of view~ For now it is just a very rough WIP bit will be added to this list once it is done.

[shehimin]

Edgaring time!

Tutorial on how to make your own responsive Edgar :D I will try to explain it in really basic terms, like you’ve never touched a puter (which if you’re making this… I’m sure you’ve touched plenty of computers amirite??? EL APLAUSO SEÑOOOREEES).

If you have some experience I tried to highlight the most important things so you won’t have to read everything, this is literally building a website but easier.

I will only show how to make him move like this:

Disclaimer: I’m a yapper.

Choosing an engine First of all you’ll need something that will allow you to display a responsive background, I used LivelyWallpaper since it’s free and open-source (we love open-source).

Choosing an IDE Next is having any IDE to make some silly code! (Unless you can rawdog code��� Which would be honestly impressive and you need to slide in my DMs and we will make out) I use Visual Studio!!!

So now that we have those two things we just need to set up the structure we will use.

Project structure

We will now create our project, which I will call “Edgar”, we will include some things inside as follows:

Edgar

img (folder that will contain images) - thumbnail.png (I literally just have a png of his face :]) - [some svgs…]

face.js (script that will make him interactive)

index.html (script that structures his face!)

LivelyInfo,json (script that LivelyWallpaper uses to display your new wallpaper)

style.css (script we will use to paint him!)

All of those scripts are just literally like a “.txt” file but instead of “.txt” we use “.js”, “.html”, etc… You know? We just write stuff and tell the puter it’s in “.{language}”, nothing fancy.

index.html

Basically the way you build his silly little face! Here’s the code:

<!doctype html> <html>     <head>         <meta charset="utf-8">         <title>Face!</title>         <link rel = "stylesheet" type = "text/css" href = "style.css">     </head>     <body>         <div class="area">             <div class="face">                 <div class="eyes">                     <div class="eyeR"></div>                     <div class="eyeL"></div>                 </div>                 <div class="mouth"></div>             </div>         </div>         <script src="face.js"></script>     </body> </html>

Ok so now some of you will be thinking “Why would you use eyeR and eyeL? Just use eye!“ and you’d be right but I’m a dummy who couldn’t handle making two different instances of the same object and altering it… It’s scary but if you can do it, please please please teach me ;0;!!!

Area comes in handy to the caress function we will implement in the next module (script)! It encapsulates face.

Face just contains the elements inside, trust me it made sense but i can’t remember why…

Eyes contains each different eye, probably here because I wanted to reuse code and it did not work out and when I kept going I was too scared to restructure it.

EyeR/EyeL are the eyes! We will paint them in the “.css”.

Mouth, like the eyeR/eyeL, will be used in the “.css”.

face.js

Here I will only show how to make it so he feels you mouse on top of him! Too ashamed of how I coded the kisses… Believe me, it’s not pretty at all and so sooo repetitive…

// ######################### // ##      CONSTANTS      ## // ######################### const area = document.querySelector('.area'); const face = document.querySelector('.face'); const mouth = document.querySelector('.mouth'); const eyeL = document.querySelector('.eyeL'); const eyeR = document.querySelector('.eyeR'); // ######################### // ##     CARESS HIM      ## // ######################### // When the mouse enters the area the face will follow the mouse area.addEventListener('mousemove', (event) => {     const rect = area.getBoundingClientRect();     const x = event.clientX - rect.left;     const y = event.clientY - rect.top;     face.style.left = `${x}px`;     face.style.top = `${y}px`; }); // When the mouse leaves the area the face will return to the original position area.addEventListener('mouseout', () => {     face.style.left = '50%';     face.style.top = '50%'; });

God bless my past self for explaining it so well, but tbf it’s really simple,,

style.css

body {     padding: 0;     margin: 0;     background: #c9c368;     overflow: hidden; } .area {     width: 55vh;     height: 55vh;     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%);     background: transparent;     display: flex; } .face {     width: 55vh;     height: 55vh;     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%);     background: transparent;     display: flex;     justify-content: center;     align-items: center;     transition: 0.5s ease-out; } .mouth {     width: 75vh;     height: 70vh;     position: absolute;     bottom: 5vh;     background: transparent;     border-radius: 100%;     border: 1vh solid #000;     border-color: transparent transparent black transparent;     pointer-events: none;     animation: mouth-sad 3s 420s  forwards step-end; } .face:hover .mouth {     animation: mouth-happy 0.5s forwards; } .eyes {     position: relative;     bottom: 27%;     display: flex;   } .eyes .eyeR {     position: relative;     width: 13vh;     height: 13vh;     display: block;     background: black;     margin-right: 11vh;     border-radius: 50%;     transition: 1s ease } .face:hover .eyeR {     transform: translateY(10vh);      border-radius: 20px 100% 20px 100%; } .eyes .eyeL {     position: relative;     width: 13vh;     height: 13vh;     display: block;     background: black;     margin-left: 11vh;     border-radius: 50%;     transition: 1s ease; } .face:hover .eyeL {     transform: translateY(10vh);     border-radius: 100% 20px 100% 20px; } @keyframes mouth-happy {     0% {         background-color: transparent;         height: 70vh;         width: 75vh;     }     100% {         border-radius: 0 0 25% 25%;         transform: translateY(-10vh);     } } @keyframes mouth-sad {     12.5%{         height: 35vh;         width: 67vh;     }     25% {         height: 10vh;         width: 60vh;     }     37.5% {         width: 53vh;         border-radius: 0%;         border-bottom-color: black;     }     50% {         width: 60vh;         height: 10vh;         transform: translateY(11vh);         border-radius: 100%;         border-color: black transparent transparent transparent;     }     62.5% {         width: 64vh;         height: 20vh;         transform: translateY(21vh);     }     75% {         width: 69vh;         height: 40vh;         transform: translateY(41vh);     }     87.5% {         width: 75vh;         height: 70vh;         transform: translateY(71vh);     }     100% {         width: 77vh;         height: 90vh;         border-color: black transparent transparent transparent;         transform: translateY(91vh);     } }

I didn’t show it but this also makes it so if you don’t pay attention to him he will get sad (mouth-sad, tried to make it as accurate to the movie as possible, that’s why it’s choppy!)

The .hover is what makes him go like a creature when you hover over him, if you want to change it just… Change it! If you’d rather him always have the same expression, delete it!

Anyway, lots of easy stuff, lots of code that I didn’t reuse and I probably should’ve (the eyes!!! Can someone please tell me a way I can just… Mirror the other or something…? There must be a way!!!) So now this is when we do a thinking exercise in which you think about me as like someone who is kind of dumb and take some pity on me.

LivelyInfo.json

{   "AppVersion": "1.0.0.0",   "Title": "Edgar",   "Thumbnail": "img/thumbnail.png",   "Preview": "thumbnail.png",   "Desc": "It's me!.",   "Author": "Champagne?",   "License": "",   "Type": 1,   "FileName": "index.html" }

Easy stuff!!! 

Conclusion

This could've been a project on git but i'm not ready and we're already finished. I'm curious about how this will be seen on mobile and PC,,, i'm not one to post here.

Sorry if I rambled too much or if i didn't explain something good enough! If you have any doubts please don't hesitate to ask.

And if you add any functionality to my code or see improvements please please please tell me, or make your own post!

[webtutorsblog]

Looking to master the basics of HTML? WebTutor offers a comprehensive guide to help you navigate the world of HTML with ease. From understanding tags to building web pages, this tutorial is perfect for beginners. Start your journey to becoming an HTML pro today at WebTutor!

[sadmailman-02]

Is privacy important to you?

So recently, I've seen an uptick of people interested in privacy regarding electronics (phones, pc, what have you). When I say people, I'm referring to non-techy people, like myself. I know my way around my computer and can do some basic troubleshooting for hardware/software, but beyond that, I'm sort of helpless. I don't know anything about hacking or cybersecurity and the only coding I can do is some html. I'm below a novice haha. So, if you're that sort of person, then maybe this could be of interest to you. What I am about to discuss involves no coding or really any in depth knowledge regarding technology. You don't have to be Elliot Alderson for this.

>Why does privacy even matter?

The answer to this question will vary from person to person. I, for one, do not like the idea of any corporation hoarding my data to sell or store or do fuck all with. If this does not bother you, I'd consider asking yourself if you're comfortable with, let's say, something like Google knowing everything about you. And I mean everything. Suppose that doesn't bother you, then okay. Maybe think about how it would feel if your classmates or coworkers knew what Google knows about you. Corporations also extend to governments because they're jerking each other off, so something to keep in mind. And individuals, people like you and I, work for these entities. And these people can abuse your data. For any reason.

Your data is a tool for them to control you. You might not realize it until it's too late. I'm being a little vague here because this point alone could be an entire wall of posts.

Additionally, something to consider is the level of privacy that you may require. If you are someone who attends public protests or is part of some sort of organization that criticizes your government, you are at risk of potential scrutiny or harassment. Obviously, but I mean specifically from a lack of privacy practices. Maybe from your government or somebody who opposes your views, etc. And depending on how you've been communicating about these gatherings or communities, you're potentially putting others at risk as well. If you're one of the people who's in charge of organizing or playing a large role, some of the methods I will be going over will likely not be enough to protect you. Activists and journalists need a different level of privacy that I can't begin to match.

Listed below are some videos that I watched that really helped me to understand why this is important.

“I Have Nothing to Hide” – The Dangerous Myth About Privacy

Is it impossible to be private online? (Eric's channel has been very helpful for me personally because his explanations do not alienate the tech illiterate)

>So...Where do I start?

Luckily, there are small steps you can take to prevent some information about you from being hoarded. And I say some, not all. Unfortunately, the only way to completely avoid all of this is to live out in a cabin in the middle of nowhere and never use the internet ever. Which I can assume you don't want because you're reading this on a website right now! You will have to make some compromises for some of these options, and if you can't replace all of these and only some, that's fine. Most of these can be adjusted in just a few minutes, if that.

General

Oh my god, stop using chrome. I'm serious, please stop. If you are using chrome to read this, close out of this and download firefox. or brave or chromium or whatever. I use firefox, and the second you download firefox, download ublock origin. Ads on the internet are completely out of control. Firefox is not foolproof either, other add-ons can provide not just a more private experience, but also a much smoother one. ClearURLs removes tracking elements from urls. And it's open source. There are a few others, but I don't know everything lol. There are VPNs you can use, but I only ever use one if I'm away from home and using the Wi-Fi at work or something.

Stop using google search engine. In firefox, you can set something else by default. I just use duckduckgo, but there are alternatives. You can also turn off the ai bullshit. Find one that works best for you and your needs.

Email. So this is one I have not moved yet. I still have gmail for my youtube account. I also have to use gmail for my university. I do have a protonmail, though, that I've been slowly moving over to. This could be an easy fix for some people, while impossible for others. This is something that I am willing to compromise on. Again, you can't have it all with how things are set up. I'm sure there are some ways to circumvent this, but I am not aware of it. For things like drive and docs there are also some alternatives, but I don't use drive all that much, so finding an alternative isn't that pressing for me. There's proton drive, which functions similarly, and several paid options, but I'm trying to keep this process free for people just starting to be privacy-conscious.

Signal is a good messenger especially if you're moving from something like facebook messenger, instagram, whatsapp, whatever. It's end to end encrypted and pretty modern (so stuff like emojis, reactions, voice messages) You do need a phone number though, but again, better than just whatsapp. More people are moving to it now, so you might have an easier time introducing friends to it.

Cellphone

Alright, so this is going to depend on a few factors, mainly whether you have Android or iOS. I had an iPhone for a long time, up until last year. I was never an Apple fanboy, it's just what I had, but I wasn't deep in the ecosystem by any means. I've always used a Windows computer, so I didn't have a Mac or apple watch or whatever. I had an ipad but sold it to a friend last year because I transitioned to using my Wacom full time on my PC. I only say that because if you like your apple products just keep in mind that while you are secure (apple does have great security), you may not be private. iOS is closed source, so it's more difficult for third parties or hackers to get your data, but apple has it. And apple can do whatever. Also, you are limited to the ways you can customize your phone.

I will link a video on someone who discusses privacy on iphone but aside from the few things I listed above I can't really help you much further than a few other points. Sorry.

A brief guide to privacy for iPhone

If you have an Android based phone you are in luck. Most Android phones allow you to put a different os on your cellphone since you can access the bootloader (unlike iphones) BUT your phone in most cases has to be OEM unlockable. Phones from carriers like Verizon aren't able to be unlocked because Verizon is weird and kinda treats their consumers like shit lol. I own a Google pixel 9 and I will admit I splurged on this phone by buying it brand new. It was on sale, I got a bonus at work and hey what can I say... Also my iphone 12mini was shitting itself so it was time for a new phone. The money must have been burning a damn hole in my pocket. In retrospect though, the smarter thing would have been to buy used or an older model. Which I will be doing in the future. Back on track though.

You're probably scratching your head here: if he was just complaining about google why the hell does he have a Google phone?

I'm glad you asked, hypothetical voice in my head.

Grapheneos is a os that is only available on Google pixels (I believe from 6 onward). What it does is basically degoogles your phone. So removes google services. And the thing is, you can redownload these services but refuse network permissions and limit what they can and cannot do or have access to. Or tweak settings that you would not otherwise have access to. You have control over your device and it actually somewhat feels like your device. It's easy to install...like, modding a ds takes longer than installing graphene on your phone. Here is a video that I watched that goes over specifics and installation.

Here is the grapheneos website

For non google phones there's calyxOS but I have no personal experience with it. But both of these OS give you back some ownership on your device by letting the user control how their cellphone functions and not a company. Also, it can help your phone feel a little smoother because it removes a lot of proprietary apps that companies like Samsung add to android. If your phone can't be unlocked, then start by switching to alternative apps and delete as many proprietary apps as possible. Watch this video on fdroid.

Remove face ID if you're able and remove fingerprints as well. It might be a bit inconvenient but it's much safer. I understand that these may be great accessibility tools for some so just do what you can. Turn off location when you're not using it. With graphene, you can give map applications your approximate location, not your exact location. There are also map options that can be disconnected from network, and you can save routes, but I use public transportation and really need to see when my bus is going to arrive. My cities bus app is so shit sometimes. Again, another example of compromising that is going make you ask what's important to you, and if you're willing to risk your privacy for it.

If you watch most of these videos, you'll hear a lot of these points are going to overlap.

I was considering discussing what you can do for your PC, but I'm a complete noob. I've been using Linux mint for a little bit now, and I avoid the terminal most of the time because I'm a little baby. Even still, I recommend getting away from windows if you're able. Especially if you have a windows 10 computer since Microsoft is dropping support this fall iirc. Linux mint is super beginner friendly and much lighter on your computer, so even better if your PC is older.

Some videos that might help you decide if Linux could be a good alternative for you.

Switching to Linux: A Beginner’s Guide

Why Linux is Better Than Windows 11

Linux Mint 22: Excellent Distro for Windows Users

Linux Mint for Gaming (2025) | Linux Gaming Setup (for Beginners) Pt. 1

This privacy stuff can go so deep and you'll feel kinda crazy lol. Once you learn about what people can do with this data, and read about how people's lives have been ruined by it getting into the wrong hands, it'll never leave your head. But it's important to start small. And start sooner rather than later.

Social media was something I considered discussing but I think it could be added to a later post since this is kinda long already. I hope this is somewhat helpful, I tend to ramble a lot of the time. If you're someone who is a bit more savvy than I, then please reply with any info that you think could be important. But remember that this post is for basic beginners who are just now learning about this stuff so keep it simple. Thanks for reading!

[wolfes]

NEW EDITOR 101: A GUIDE FOR GIFMAKERS by v @shangs

Hi friends! I know I said I would do this way back in April/May when this change was announced but I've been massively busy lately so thank you all for being patient with me :)

Based on the results of this poll, I will be trying my level best to help make a guide for gifmakers to best deal with any problems that have been present with the new editor. However, it's worth noting that I have personally not experienced any of these problems myself and I have no record of any problems from other people that I could send to staff and get guidance on, so for some of these issues I will unfortunately be a broken record.

That being said, I have been using the new editor for a few months now and it hasn't been too bad. So don't be discouraged by the new editor if you still love to make gifs and share them. You may need to adapt a bit, but it's doable!

This is meant to be comprehensive and will be explanation and image heavy. Full guide under the cut.

CONTENTS:

What is the new editor?

Steps to take before posting

Making a post

Troubleshooting

01. WHAT IS THE NEW EDITOR?

Some of you may be asking yourselves what the point of the new editor even is and why it's being implemented in the first place when we already had a (mostly) functional editor. My very limited understanding of it as a CS student is app compatibility and flexibility. I'm not totally clear on the details nor am I 100% certain this is the case, but NPF posts (basically, posts made with the "new editor") first started with the mobile app. I'm unsure if the different post types were simply too unwieldy to transfer to the app - having to make a whole bunch of post types when with the new editor you can now have posts with any elements you want without the rigidity of a set post type - or if it was simply not able to be implemented, but the apps have always used NPF. The majority of Tumblr users are coming from the mobile apps. Then it became a case of having the legacy editor for the web users (which were fewer in number) and the new NPF editor for everyone else. That takes resources to keep around and it's pretty inefficient. Naturally the older editor that was used by less people was going to get the axe, especially since you couldn't tell on mobile that there was even a difference between NPF or legacy posts.

So now here we are and the posts are NPF. This means they're in "Neue Post Format." Basically, every post you make is by default a text post, containing "blocks" of other media - as gifmakers we will primarily be dealing with photos.

I understand that it's frustrating to many to see "our gifs are now rendered as text posts" and ask WHY it's happening when photos should logically be rendered as photo posts - but the fact is, there's now no real delineation between a "text post" and a "photo post." The reason NPF posts are now "text posts" is because that's how they are rendered for desktop themes, not because everyone is going to see your post as text and your gifs are going to be compressed into the quality of a potato (though I know some have seen this issue - more on that later.)

02. STEPS TO TAKE BEFORE POSTING

The long and short of it is that you may have to update your theme. More detail here for those who are interested, but check that your theme supports "new editor posts" or "NPF posts" AND that this is true for original posts (you can read more about why in this ask and, although this may be a bit time-consuming, test it out on your blog). I can say with certainty that my second theme Cygnus supports original NPF posts. This is NOT true of my first theme, though.

You can try to add the NPF Fix by @glenthemes to your own theme (beware if you don't know HTML/CSS) or try this tip by @burningblake for original posts.

Feel free to add theme makers with fully NPF-compatible themes in the notes! I have been happily using my own theme so I can't say to what degree others' themes are NPF-friendly.

03. MAKING A POST

If you're sticking around to post on the new editor and you have trouble ordering your gifs around, here's a little guide on how to post.

If I click on "Photo" from web and open up the editor, here's how it looks:

I went ahead and added three full-width gifs and the editor put them in like so:

You'll most likely also have to order your gifs around in the way you want them. You can go ahead and hover over your gifs to see the button to orient them (the four dots in the top left corner) and the button for an image description (the three dots in the bottom right corner). I've attached images of all three below:

If you hold the orientation button, move your gif around until you see the blue line that shows where your gif will end up in the spot that you want it. For example, I wanted to move the second gif below the first one, so I oriented it so that the blue line would show the marker between the two gifs:

Now my gifs are oriented nicely! Of course, this is a simpler layout, but the principles still hold.

If you save your gifs as a draft and reopen them or you just notice a large gap like this in between your gifs when you're in the editor, don't worry.

This will not show up in dash view or on a desktop theme that supports original NPF posts. For example, this is how the gifs' gap (without modification) looked in my desktop theme:

With your gifs ordered, the final step is to add alt text. You can read more about alt text and why you should use it here. (Feel free to ignore the sections about the captions on the legacy editor since it is no longer relevant. It's also unnecessary to clearly mark descriptions if they're not in the caption of your post because they will clearly show up under "ALT" on Tumblr.)

If you click the three dots in the bottom right corner as seen above, and click "update image description:"

You can add the description you like and click "update." Your photos' alt text will show up under the "ALT" bubble on Tumblr. This is generally a good practice to get into to make your content more accessible, so I hope you guys will consider using alt text regularly :)

Also, I've noticed that in the editor, if you go back and edit something it will take some time to show up. You may have to refresh the page or load it again after some time, but your edits should be there. I would not go back and edit posts again if you see your posts haven't shown up. I also advise against editing your posts on mobile because it's easier to make a mistake.

And there you go, you've successfully made a post with the new editor!

04. TROUBLESHOOTING

I'm sure you've all been waiting for this. Unfortunately I am probably going to be extremely unhelpful if the editor hasn't been refined in the last few months for those experiencing issues. I'm going to go in the categories that I listed out in my original poll, but keep in mind that I haven't personally seen any of these issues on my end so I haven't been able to contact staff with any evidence that this happened other than my poll.

Dashboard view quality issues: I haven't noticed this issue. I'm not sure if this has been fixed since the original poll was posted. If you're experiencing this issue, this is not something I know how to fix so I would contact staff with screenshots of the issue.

Desktop theme side padding: As noted before, this is a theme issue. If you change themes to something that is NPF-compatible with original posts, there shouldn't be any more issues here.

Small gifs on mobile: In my experience this was happening regardless of what editor was used; it's a bug that seems to have been fixed since this poll was created. If you're still experiencing it, at the risk of sounding like a broken record, I would advise contacting staff.

New editor doesn't accept gifs of size 9.8MB < x < 10MB: I haven't experienced this issue so I would say the only workaround would be to either trim the size of your gif so that it is under 9.8MB or whatever threshold seems to be the cutoff or contact staff (I am so sorry for constantly having to suggest this 😭 unfortunately there's no trick I can offer because the new editor has been taking all my gifs just fine)

Logistical issues ordering gifsets: I hope this guide has been able to answer the majority of questions and shed some light on some of the more buggy behaviors of the new editor, but if you have any more specific questions you can feel free to shoot me an ask!

HTML issues / colored text: Unfortunately it seems colored text may be deprecated entirely? This could be for accessibility purposes because I believe screen readers would read out every single letter of gradient text in captions which I imagine can get quite frustrating for users of this technology. I recommend just using the normal rich text editor. If you want small text, you can highlight and click the <s> button!

Other: If it seems like something I may be able to answer, please feel free to ask me. Otherwise... hound staff 😭

Here's where you can hound staff, btw. If you're having major issues I would advise you guys to submit support tickets. That way if there are any widespread bugs, staff will hopefully be able to fix them.

I hope this guide was helpful to you guys in dealing with the new editor, and happy giffing <3

[eri-lessthan3]

Hey you

all of you complaining about tumblr live

Seethe and cope 😎

Okay but seriously

Get yourself the Stylus extension For Firefox users: https://addons.mozilla.org/en-GB/firefox/addon/styl-us/ and for everyone else: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

Get the Old Tumblr Dashboard Style: https://userstyles.world/style/11286/old-tumblr-dashboard-2023

You should get this stuff even if you don't plan to remove tumblr live :3 Now here is where the magic comes from:

Stylus allows you to add custom css styles to websites, and you can edit themes made by other people to fit your needs!

See that little fucker? How about we fuckin g kill it?

Press f12 to open the Developer Tools (or however it is called lmao)

Click on this little guy

Now you can select an element on the website, and it will show where it is in the html!

3. Point

Click on it, and now we will see something like this in the inspector!

Collapse a bunch of this stuff, since here we only care about the list items, or <li>

These are the different buttons in the banner

Now, how do we fucking kill that guy?

There are a number of ways to do this, so let's start with the simplest one

Delete

Just select the list item that has the title "Live" and press delete!

So it is gone now, right?

Well... not really. If you refresh the page, it is back. Which makes sense, since the only thing we did is remove that part of the "code" (if you can call html "code"), but when we refreshed it, the server gave us a version of the site that obviously had the button still there.

So what is a smarter way to get rid of it?

While you can't really delete a specific part of the site with just css, you can hide it! To do that, all you have to do is apply the style display: none;

Like that! While it doesn't fix the problem with the refresh, it brings us closer to the solution.

Remember when we got Stylus? yeah!

Go inside of it (😳), and inside the Old tumblr dashboard theme (😳😳), and now we just need to apply the css style of "remove that fucker" to the specific list item. How do we do that, since we can't add it directly into html? We use the attribute selector, and we look for title="Live"!

Where do I write this????

Well, css applies the styles from top to bottom of the style sheet (usually, this post is already too long), and you see how the list item has a few classes assigned to it? It so happens that they also modify the display property, so we have to override it by putting our selector after those in the css sheet... so basically you can just write the thingie at the end 😅

Here is how the attribute selector works!

the .IYr09 part is that specific class, so that if there is ever something on this page that has the title="Live" but isn't what we are looking for, it won't apply there (You don't need to do this, but whatever). The attribute selector is written in the square brackets, and you just... write the attribute that you are looking for there ;P

(I also did the same for the Explore button, but that can be an exercise for the interested ;P)

And now, BEHOLD

(How am I so popular that I got dms during the making of this >.&lt;)

And it will stay like this, forever*

*except if something happens to the addon, theme, css of it or whatever, but you get the point!

[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.