#are html and javascript the same | Explore Tumblr posts and blogs

thunderlina · 5 months ago

Text

In the wake of the TikTok ban and revival as a mouthpiece for fascist propaganda, as well as the downfall of Twitter and Facebook/Facebook-owned platforms to the same evils, I think now is a better time than ever to say LEARN HTML!!! FREE YOURSELVES FROM THE SHACKLES OF MAJOR SOCIAL MEDIA PLATFORMS AND EMBRACE THE INDIE WEB!!!

You can host a website on Neocities for free as long as it's under 1GB (which is a LOT more than it sounds like let me tell you) but if that's not enough you can get 50GB of space (and a variety of other perks) for only $5 a month.

And if you can't/don't want to pay for the extra space, sites like File Garden and Catbox let you host files for free that you can easily link into NeoCities pages (I do this to host videos on mine!) (It also lets you share files NeoCities wouldn't let you upload for free anyways, this is how I upload the .zip files for my 3DS themes on my site.)

Don't know how to write HTML/CSS? No problem. W3schools is an invaluable resource with free lessons on HTML, CSS, JavaScript, PHP, and a whole slew of other programming languages, both for web development and otherwise.

Want a more traditional social media experience? SpaceHey is a platform that mimics the experience of 2000s MySpace

Struggling to find independent web pages that cater to your interests via major search engines? I've got you covered. Marginalia and Wiby are search engines that specifically prioritize non-commercial content. Marginalia also has filters that let you search for more specific categories of website, like wikis, blogs, academia, forums, and vintage sites.

Maybe you wanna log off the modern internet landscape altogether and step back into the pre-social media web altogether, well, Protoweb lets you do just that. It's a proxy service for older browsers (or really just any browser that supports HTTP, but that's mostly old browsers now anyways) that lets you visit restored snapshots of vintage websites.

Protoweb has a lot of Geocities content archived, but if you're interested in that you can find even more old Geocities sites over on the Geocities Gallery

And really this is just general tip-of-the-iceberg stuff. If you dig a little deeper you can find loads more interesting stuff out there. The internet doesn't have to be a miserable place full of nothing but doomposting and targeted ads. The first step to making it less miserable is for YOU, yes YOU, to quit spending all your time on it looking at the handful of miserable websites big tech wants you to spend all your time on.

#this is a side point so it's going here but I really think tech literacy should be a requirement in schools like math grammar history etc.#we live in a world so dominated by the stuff and yet a majority of the population does not understand it at even the most fundamental level #tiktok #tiktok ban #indie web #neocities #web development #current events #twitter #facebook #meta #amazon

11K notes · View notes

liquidcrystalsky · 2 months ago

Text

hey you, make your own website.

sure you can use neocities or carrd or strawpage or whatever whatever but also. make your own from scratch!

there's plenty of free website hosters, github(owned by microsoft), gitlab, and cloudflare have "pages" services which are all free and you can just host whatever html pages even use things like static site generators as well to help yourself from copying and pasting.

if you have your own domains you can also use those, and other than digging deep into web requests or stupid shit there's no way to know you're not hosting it yourself.

i use cloudflare pages, but github/gitlab pages is probably much easier, and if you dont like it, you can just pick it up and move it somewhere else. if you have a custom domain as well you dont even have to tell people "move to the new website". you're not tied down to any service and the site is what you have

It's very flexible too! for beginners you can just put raw html and css and upload it and it'll show, if you need more than this, you can just add more.

my website, ranid.space, also uses cloudflare pages (it can be easily done on the other two), and it's generated using Astro with templates i've created, it has a [shitty] blog Content Management System with an Atom feed, there's pages with javascript, and i even have SEO optimizations (i was really bored okay i really dont care if i show up on google).

it is as simple or as complex as you want it to be.

it is literally JUST hosting your own website you have full and entire control over. note it's a static website so you cant really do things like live updates without connecting it to another server, however for posting to a blog once in a while it's perfectly fine

i've not used gitlab pages, it seems to be a bit more manual setup than github pages, but i think beyond that first setup it's the same

329 notes · View notes

codemerything · 2 years ago

Text

A structured way to learn JavaScript.

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

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

EASY

What is JavaScript and its role in web development?

Brief history and evolution of JavaScript.

Basic syntax and structure of JavaScript code.

Understanding variables, constants, and their declaration.

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

Arithmetic, assignment, comparison, and logical operators.

Combining operators to create expressions.

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

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

MEDIUM

Defining functions, including parameters and return values.

Function scope, closures, and their practical applications.

Creating and manipulating arrays.

Working with objects, properties, and methods.

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

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

Using try-catch blocks to handle exceptions.

Common error types and debugging techniques.

HARD

Callback functions and their limitations.

Dealing with asynchronous operations, such as AJAX requests.

Promises for handling asynchronous operations.

Async/await for cleaner asynchronous code.

Arrow functions for concise function syntax.

Template literals for flexible string interpolation.

Destructuring for unpacking values from arrays and objects.

Spread/rest operators.

Design Patterns.

Writing unit tests with testing frameworks.

Code optimization techniques.

That's it I guess!

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

872 notes · View notes

dervampireprince · 5 months ago

Text

so i've been coding a website

home of: the dervampireprince fanart museum, prince's art gallery, a masterlist of resources for making websites and list of web communities, and more!

[18+, minors dni (this blog is 18+ and the art gallery and art museum pages on my site have some 18+ only artworks)]

littlevampire . neocities . org (clickable link in pinned post labelled 'website')

if you don't follow me on twitch or aren't in my discord, you might not know i've been coding my own website via neocities since june 2024. it's been a big labour of love, the only coding i'd done before is a little html to customize old tumblr themes, so i've learnt a lot and i've been having so much fun. i do link to it on my carrds but not everyone will know that the icon of a little cat with a wrench and paintbrush is the neocities logo, or even what neocities is.

neocities is a free website builder, but not like squarespace or wix that let you build a website from a template with things you can drag in, it's all done with html and css code (and you can throw in javascript if you wanna try hurting your brain /hj). i love the passion people have for coding websites, for making their own websites again in defiance of social medias becoming less customisable and websites looking boring and the same as each other. people's neocities sites are so fun to look through, looking at how they express themselves, their art galleries, shrines to their pets or favourite characters or shows or toys or places they've been.

why have i been making a website this way?

well i used to love customising my tumblr theme back when clicking on someone's username here took you to their tumblr website, their username . tumblr . com link that you could edit and customise with html code. now clicking a username takes you to their mobile page view, a lot of users don't even know you can have a website with tumblr, the feature to have a site became turned off by default, and i've heard from some users that they might have to pay to unlock that feature.

i've always loved the look of old geocities and angelfire websites, personalised sites, and i've grown tired of every social media trying to look the same as each other, remove features that let users customise their profiles and pages more. and then i found out about neocities.

are you interested in making a site too?

neocities is free, though you can pay to support them. there is no ads, no popups, they have no ai tool scraping their sites, no tos that will change to suddenly stop allow 18+ art. unlike other website hosters, neocities does have a sort of social media side where you do have a profile and people can follow you and leave comments on your site and like your updates, but you can ignore this if you want, or use it to get to know other webmasters.

to quote neocities "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."

i'd so encourage anyone interested to try making a website with neocities. w3schools is an excellent place to start learning coding, and there are free website templates you can copy and paste and use (my site is built off two different free codes, one from fujoshi . nekoweb . org and the other from sadgrl's free layout builder tool).

your site can be for anything:

a more fun and interactive online business card (rather than using carrd.co or linktree)

a gallery of your art/photos/cosplays/etc

a blog

webshrines to your a character, film, song, game, toy, hobby, your pet - anything can be a shrine!

a catalogue/database/log of every film you've watched, every place you've visited, birds you've seen, plushies you own, every blinkie gif you have saved, your ocs and stories, etc

hosting a webcomic

a fanwiki/fansite that doesn't have endless ads like fandom . com does (i found a cool neocities fansite for rhythm game series pop'n music and it's so thorough, it even lists all the sprites and official art for every character)

i follow a website that just reviews every video game based on whether or not it has a frog in it, if the frog is playable, if you can be friends with it. ( frogreview . neocities . org )

the only html i knew how to write before starting is how to paragraph and bold text. and now i have a whole site! and i'm still working on new stuff for it all the time.

i just finished making a page on my website called 'explore the web'. this page lists everything you might need to know when wanting to make or decorate your website. it lists:

other neocities sites i think are cool and i'm inspired by, check them out for more ideas of what your site could look like and contain!

website building resources

coding help and tutorials

free website html code layouts you can use if you don't want too start coding from scratch

places to find graphics and decorative images for your site (transparent background pngs, pixels, favicons, stamps, blinkies, buttons, userboxes, etc)

image generators for different types of buttons and gifs (88x31 buttons, tiny identity buttons, heart locket open gifs, headpat gifs)

widgets and games and interactive elements you can add to your site (music players, interactive pets like gifypet and tamanotchi, hit counters, games like pacman and crosswords, guestbooks and chatboxes, etc)

web manifestos, guides, introductions and explanations of webmastering and neocities (some posts made by other tumblr users here are what made me finally want to make my own site and discover how too)

art tools, resources and free drawing programs

web communities! webrings, cliques, fanlistings, pixel clubs (pixel art trades) and more!

other fun sites that didn't fit in the other categories like free sheet music sites, archives, egotistical.goat (see a tumblr users audio posts/reblogs as a music playlist), soul void (a wonderful free to play video game i adore), an online omnichord you can play, and more.

i really hope the 'explore the web' page is helpful, it took three days to track down every link and find resources to add.

and if you want to check out my site there's more than just these pages. like i said in the beginning, i recently finished making:

the dervampireprince fanart museum

every piece of fanart i've received (unless the sender asked me to keep it private) has been added to this museum and where possible links back to the original artists post of that art (a lot the art was sent to me via discord so i can't link to the original post). every piece of fanart sent to me now will be added on their unless you specifically say you don't want it going on there. there's also links to my fanworks guide on there and how to send me fanart.

other pages on my site

about me (including favourite media, quizzes, comfort characters, kins, and more)

art gallery (art i've made, sorted by month)

graphics (so far it's just stamps i've made but plan to remake this section of my site)

media log (haven't started the 2025 one yet, but a log of all films, tv, writing, music, theatre, fandoms, characters and ships i got into in 2024)

silly web pets

shrines

site map

update log

my shrines so far:

i have ones for lucifer from supernatural, sam winchester from supernatural, charuca minifigures (arcade prizes i wanted as a kid that i'm trying to finish collecting as an adult), my waifuroulette discord tcg collection. my masterlist of every lgbt+ marvel character is a wip. i love making each shrine look different and suit the character/fandom/thing the shrine is about. and then there's also:

the european musical section

i ramble about them a lot and it's no surprise there's multiple shrines for them. i fell in love with german musical theatre in 2020 and that expanded in being interested in all non-english language musical theatre and trying to spread the word of it and how they deserve to be as known as english-language musicals. one musical in particular, elisabeth das musical, is my biggest special interest so expect a very detailed shrine about that one day.

so far this part of the site includes

'enter the theatre' an interactive web theatre where you choose a ticket and that musical will play on the stage (click a ticket and the embedded youtube video for that musical will appear on the stage and play. i dealt with javascript for the first time to bring the vision i had for this page alive, it might be slow but i hope enjoyable)

elisabeth das musical webshrine [not made yet]

tanz der vampire webshrine [not made yet, might abandon the idea]

my favourite european musicals [not made yet]

a masterlist of european musicals [a wip, only two musicals listed so far, i am listing every musical and every production they've had, this was a word document i kept for a long time that i always wanted to share somehow and this page is how i'll do it. there's no other list for european musicals out there so i guess it's up to me as always /lh]

the future for my site

i will update my art gallery, the fanart museum, my media log and other collections as often as i can. there's so many more pages i want to add including:

profiles for my ocs

finish my european musical masterlist

finish my 'every marvel lgbt+ character' masterlist (i have no love for marvel or disney's lgbt+ representation nor are all of these characters good representation and a lot are very minor characters, but for some reason i have gotten hyperfixated on this topic a few times so here comes a masterlist)

make shrines for loki (marvel), ares (hades), my sylvanian families collection, vocaloid (and/or vocaloid medleys), my plushie collection, pullip dolls

make a 'page not found' page

and i have one big plan to essentially make a site within a site, and make a website for my monster boy band ocs. but make it as if it was a real band, an unfiction project (think like how welcome home's website portrays welcome home as if it was a real show). this site would have pages for the band members, their albums, merch and maybe a pretend shop, and a fake forum where you could see other characters in the story talking and click on their profiles to find out more about them. and then once that's all done i want to start posting audios about the characters and then people can go to the website to find out more about them. that's my big plan anyway. i hope that sounds interesting.

i also want to make an effort to try and join some website communities. be brave and apply for some webrings and fanlistings, and make some pixel art and join some of the amazing pixel clubs out there.

but yeah, that's my site, that's neocities. i hope that was interesting. i hope it encourages people to make their own site, or at least look at other's small websites and explore this part of the internet. and if you go and check out mine feel free to drop a message in the guestbook on the homepage, or follow me on neocities if you have/make an account.

#the vampire rambles #neocities #the vampire codes #indie web #web revival

66 notes · View notes

otherkinnews · 5 months ago

Text

Mississippi and Oklahoma propose laws against students who identify as nonhuman animals

This article was originally written by Orion Scribner @frameacloud on January 18, 2025 on the Otherkin News blog on DreamWidth: https://otherkinnews.dreamwidth.org/95979.html

For the third year running, Republicans in the US have once again continued to write "anti-furry bills." On January 17, Republicans introduced Mississippi House Bill 1060 (MS HB 1060), which you can see for yourself on the state government's site, though you may need to enable Javascript if your web browser doesn't display it properly: https://billstatus.ls.state.ms.us/2025/pdf/history/HB/HB1060.xml Currently, this is the bill's official description, as written by its sponsors:

"Gender dysphoria; require school personnel to notify parents of student who request to be referred to as different gender or nonhuman."

Emphasis added. Furthermore, the sponsors wrote it with this summary:

"An Act To Require School Administrators, Teachers, Counselors Or Other Personnel Of The School To Provide Written Notification To The Parent Or Legal Guardian Of Any Student Identifying At School As A Gender Or Pronoun That Does Not Align With The Child's Sex On Their Birth Certificate, Sex Assigned At Birth Or Using Sex-segregated School Programs And Activities Or School Facilities That Do Not Align With The Child's Sex Assignment At Birth, Within Three Days Of Becoming Aware Of Such Conduct Or Request By The Affected Student; To Provide That No School Personnel Shall Be Disciplined Or Suffer Any Unlawful Reprisal For Refusing To Acknowledge A Student By A Preferred Gender, Pronoun Or Animal Species That Is Inconsistent With The Child's Sex Assignment At Birth; To Prescribe The Legislative Intent; And For Related Purposes."

Emphasis added. Despite what the description and summary says, the bill text itself doesn't mention either of the topics that I emphasized here. This leaves it an ordinary example of legislature proposed to discriminate against transgender students in public schools. This is a common pattern in anti-furry bills, where an early version of the bill mentions students who identify as nonhuman animal species, to try to attract attention, and then the sponsors delete that part later so that the bill can focus on their real intentions against transgender students. Republicans mean for the temporary inclusion of that topic to satirize transgender students and make a comparison that they see as absurd. It's a reference to an urban legend that Republicans circulate, where supposedly schools that let transgender students use the restrooms they want are also providing litter boxes in classrooms for students who are furries. That urban legend has been debunked by the fact-checking sites Snopes and Reuters.

The bill was sponsored by these eleven Republican Representatives: Charles Blackwell, William Arnold, Randy Boyd, Larry Byrd, Carolyn Crawford, Jim Estrada, Greg Haney, Stacey Hobgood-Wilkes, Donnie Scoggin, Joseph Tubb, and Beth Waldo. These are some of the same authors as a similar anti-furry bill from last year, Mississippi House Bill 176, which was also written by the same Blackwell, Arnold, Boyd, Byrd, and Scoggin, plus Dan Eubanks and Jimmy Fondren.

[Edited to add] Another new one is Oklahoma House Bill 1327, by sole sponsor Justin Humphrey. This is basically the same as his bill from last year, Oklahoma House Bill 3084, still proposing that students who identify as animals should get picked up from school by animal control. He specializes in introducing bills that sound bizarre to attract attention, and later he cleans them up so they'll pass into law. He prefiled it on December 30th so that it will be introduced on February 3.

Anti-furry bills similar to this one began in 2023 with North Dakota House Bill 1522, Oklahoma Senate Bill 943, Indiana Statehouse Bill 380, and a proposed amendment to Montana Senate Bill 544. 2024 had Oklahoma House Bill 3084, Mississippi House Bill 176, and Missouri House Bill 2678. No anti-furry bills have yet passed into law as such. Fellow volunteers and I have been reporting on these in the Otherkin News blog all along, which you can read in the tag for that purpose. Don't like this bill? If you're a US citizen, voting is only one of your powers to shape the laws that you live under. In the recording of my polycule's panel about anti-furry bills, skip to the timestamp 23:44 to hear what ordinary citizens can do. In the written script of our lecture, see Slides 21 through 25.

#Mississippi #Mississippi House Bill 1060 #MS HB 1060 #Mississippi HB 1060 #HB 1060 #HB1060 #Oklahoma #US politics #Otherkin News #anti-furry bill #Dreamwidth #Oklahoma House Bill 1327 #OK HB 1327 #Oklahoma House Bill 3084 #OK HB 3084

95 notes · View notes

izicodes · 1 year ago

Text

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

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

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

This is an old tutorial I made 🐼

💛 Set your environment

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

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

Your page should resemble the following:

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

💛 Using the html2canvas JavaScript Library

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

The steps to put the library in your project:

Visit the html2canvas website for more information.

Copy the CDN link from here

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

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

💛 JavaScript Functionality

Here's the JavaScript code to handle the conversion:

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

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

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

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

What is happening here is:

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

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

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

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

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

And that's it!

💛 The End

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

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

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

155 notes · View notes

qrowscant · 2 months ago

Note

hi! sorry if this is a question you get a lot but i looked at your tags and i didn’t quite see the answer - i was wondering what software you use to code link rot? i’ve been trying to figure out what to use for my own project that i want to be multimedia/be able to click links and such and hosted probably on neocities and i just can’t figure out what program - if any - these sorts of projects use. (i would assume it’s html and css at the least, but is js needed too?) like can you still use twine for this kind of thing or rarebit or? if it’s a personal program/code i completely get if you don’t want to share it!! thank you either way :)

i use html, CSS, and javascript/jquery! you can absolutely use twine if you so choose, that's just a different language to learn to accomplish the same thing. most people code in visual studio code (its free!) and upload to their website, but if you're sick in the head (me) you can just code on the website directly

#inquiries #sudokufriend #dusts off this blog... hello all.........

16 notes · View notes

codingquill · 2 years ago

Text

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

400 notes · View notes

kremlin · 1 year ago

Text

- tumblr has removed the ability to directly upload a video to a reblog (puzzling as to what this accomplished for them)

- must embed external video via html post

- html5 <video>: no

- <embed>: no

- fine what does youtube give you?

- fucking <iframe> wtf, but it works

- replace source with url to self-hosted video: no

- what the fuck maybe it only takes exactly the same container/codec as youtube

- ffmpeg (ffmpreg lol) matched codec: NO

- fine i’ll just fake the fucking headers: nope it’s tls-only

- FINE ILL JUST KILL MYSELF UPLOAD IT TO FUCKING YOUTUBE

- result is a “youtube short”, gay, how to change

- “vertical videos under 60 seconds are always youtube shorts”

- equip dynamite vest

- try one more thing that works for a direct embed from my domain

- works

- wtf

- try above with<script> javascript instead of <video> mp4

- also works

- use tumblr.com js url that you can still upload for extremely outdated theme editor

- alert(session_token)

- yep that’s my session key alright

- alt account following blog loads dashboard and my post

- YEP THATS ITS SESSION KEY ALRIGHT

some of you guys are alright. don’t allow any other javascript than what’s loaded for a safe text post at school tomorrow.

#pls2check your inbox support team

76 notes · View notes

beedesigns · 1 year ago

Text

My Favourite VS Code Extensions

This actually started with a conversation about favourite VS Code themes which got me to thinking. But as always I had to be that little bit extra. So, here are a few of my favourite VS Code extensions that I think would be particularly helpful for new coders or folks just starting with VS Code.

These are in no particular order! I've tried to keep the list to extensions that help read your code and make thinsg pretty. There are hundreds of extensions for almost every type of code, but I wanted focus on ones for beginners. Ones that won't encourage you to become too lazy relying on shortcuts. So, with no further ado, here we go:

Colorize

This extension will highlight any colours (hex, rgb, hsl etc) in your code.

Auto Rename Tag

Okay, this one might make you a little bit lazy. Sometimes you need to switch things up, and that can start to get complicated if you're working on a lot of code. This extension will change the opening or closing tag name paired with the one you manually change. It prevents mispellings that will break your code and makes life easier.

Spellcheck

Ever typed heder instead of header? Or justfy-content instead of justify-content? Well, this extension will help pick up on those typos and keep your code clean (and working!).

Indent Rainbow

This is such a small thing, but possibly one of my favourites on the list. Indent rainbow does pretty much what it says on the tin, adding a coloured line down the lefthand side along the indent of your code. It looks pretty and helps easily keep track of where you are.

Color Picker

Who doesn't love beautiful colours? Colour Picker lets you choose all the beautiful colours you could want without having to leave VS Code.

HTML Checker

This extension helps prevent errors by checking your code against the W3C Markup Validation Service searching for errors. Great of avoiding issues further down the line. Useful for beginners and pros alike to be honest.

Rainbow Brackets

I tend to find this one more useful in javascript, but it's good for everything. I used to use another, also called Rainbow Brackets but that's been depricated, and I like the default colours in this one. There are a few, so shop around.

Prettier

This extension forces a set format on your code, keeping things neat and tidy. It can take a little getting used to but the documentation is pretty good. Helps build good habits, keeping things uniform and easy to read.

These are just a few of the ones I've personally got installed. As I mentioned, there are hundreds of different extensions. Many of which will do the same thing. So, make sure you have a look around and find what works best for you!

Which extension would you recommend for a beginner?

#vscode #vscode extensions #codeblr #coding resources #things i like

80 notes · View notes