DEV Community: Mike Shine

Vanilla JavaScript Tutorial – Part Two: CSS Styling with JavaScript

Mike Shine — Tue, 11 May 2021 17:56:22 +0000

Welcome to part two of the vanilla JavaScript adventure!

If you missed part one and would like to give it a try, click here.

Click here for the starter code to part two, if you didn't complete part one or don't have the code anymore.

Why CSS?

HTML and CSS are the peanut butter and jelly of the web development world; they always go hand in hand.

Since the basis of part one was using JavaScript in lieu of HTML, learning how to use JavaScript in lieu of CSS seems like a logical next step.

If you know basic HTML and basic JavaScript, chances are you have come in contact with CSS as well. CSS (short for Cascading Style Sheets) essentially controls the stylistic/visual component of the elements on the webpage: colors, fonts, text decoration, animations (sometimes), and more. If you need a more thorough explanation of CSS check out this MDN article.

Let's continue where we left off with our part one code, and take a look at how to use CSS within JavaScript.

Using CSS in your JavaScript file

As explained in previous articles, having separate files for HTML and CSS as well as many different files for different JavaScript components of your project is standard practice, and for good reason. Adhering to the principle of separation of concerns allows for clearer organization of code, as well as reducing the chances of breaking changes occurring in the whole project because of a single faulty edit in one module. As in part one, we will still be using our index.js file for all of our CSS, to immerse fully into the JavaScript experience. However, please remember that 99% of projects you work on will not follow this practice, we are only doing it for the sake of learning how!

The general principle of styling in JavaScript is actually quite simple. The majority of this part of the tutorial will just be learning the most essential style features that you will probably need.

The basic pattern of styling in JavaScript is:

<element to be styled>.style.<style property> = "desired outcome";

That wasn't very well-explained. Let me give you a more concrete example to demonstrate; the next line of code will result in my header turning green:

header.style.color = "green";

That looks better. In that example, header is the element being acted upon, style is usually the keyword for accessing style properties, color is the style property that is being accessed, and green is the new desired color.

With our basic pattern of styling elements in mind, let's segue into our first CSS essential: color.

CSS Essential #1: Color

Color is one of the most important style elements in visual design. As such, there is substantial functionality built into CSS to support color; however, covering every aspect of using color in your styling could be an entire tutorial series by itself, so we will only be exploring a few basics.

Let's start by taking the example from the previous section and applying it here: change the color of your header. Use my code above, but instead of green you can select any basic color you like. Think color wheel/kindergarten colors, not the wackiest color you remember from the crayon box you used to have. For example:

header.style.color = "orange";

Your display should now look something like this, depending on what color you chose:

Nicely done. The color property can be applied to text, backgrounds, borders, and pretty much any element on your webpage that you can think of.

Before we move on, go ahead and apply that same color you chose to your text1 and text2 elements.

Cool, now let's think about background color. White background is cool and all, but let's decide on something a little more exciting.

Use this code to modify your background color (you can substitute my color for a color of your choosing), then read on for an explanation:

document.body.style.backgroundColor = "red";

Good! Although this might seem quite different from changing the color of our header, it still follows our same basic pattern:

<element to be styled>.style.<style property> = "desired outcome";

For our background color styling, document.body is the element to be styled, the style keyword is still used, backgroundColor is the style attribute we are modifying, and red is my desired outcome.

One important distinction between CSS and JavaScript styling becomes relevant when modifying styling attributes that are more than one word (such as background color). In CSS, the syntax for such attributes is kebab-case (i.e. background-color). For JavaScript, the syntax is camelCase (i.e. backgroundColor).

Now then, with my choice of orange text and red background, my example looks like this:

Bleh. That is not an attractive color combination, but more importantly it is quite difficult to read, even for users with standard vision. For users with vision impairments, this would be extremely difficult if not impossible to read. Always keep web accessibility standards in mind when selecting color combinations! There are several tools (like this one) that help web developers/designers select color combinations that are appropriate for users of all vision levels.

With that in mind, I'm going to change my background color to something that will contrast the bright orange a little better.

document.body.style.backgroundColor = "black";

Much better! We can use more colors than just the primary ones, however. To be precise, we have 16,777,216 color options (although some may argue that because of transparency options, we actually have a great deal more than that).

There are three ways to specify color in web design:

In the interest of brevity, click on any of the three items above to learn more. The "Keyword" link leads to a list of all keywords that can be used in your color styling. The "RGB value" and "Hex code" links lead to respective explanations of the concepts, if you are unfamiliar.

Here are a couple examples of how each approach would look syntactically.

Keyword:

header.style.color = "cornflowerblue";
text1.style.color = "chartreuse";
text2.style.color = "lightsalmon";
document.body.style.backgroundColor = "dimgray";

RGB:

header.style.color = "rgb(100, 149, 237)";
text1.style.color = "rgb(127, 255, 0)";
text2.style.color = "rgb(255, 160, 122)";
document.body.style.backgroundColor = "rgb(105, 105, 105)";

Hex code:

header.style.color = "#6495ed";
text1.style.color = "#7fff00";
text2.style.color = "#ffa07a";
document.body.style.backgroundColor = "#696969";

These three examples are visually identical, and should all display like this:

This wraps up our color section, but you will continue to get practice with it along with other style elements.

CSS Essential #2: Backgrounds

`background-color`

In the previous section, we learned that we can modify the background color of the page with document.body.style.backgroundColor = "color_goes_here";. There is another important tidbit to know about the background color property, which is that it can be applied to individual elements as well. For example:

const header = document.createElement('h1');
header.textContent = 'Vanilla JS practice';
header.style.backgroundColor = "red";
document.body.appendChild(header);

const text1 = document.createElement('p');
text1.textContent = 'Go hang a salami, I\'m a lasagna hog.';
text1.style.backgroundColor = "yellow";
document.body.appendChild(text1);

const text2 = document.createElement('p');
text2.textContent = 'Read the previous sentence backwards.';
text2.style.backgroundColor = "green";
document.body.appendChild(text2);

`background-image`

In addition to a solid color, we can use images as backgrounds as well. Say, for example, we wanted to use this yummy-looking lasagna as a background image:

We can use this image as our background one of two ways.

Image file saved to local filesystem

document.body.style.backgroundImage = 'url("lasagna.jpg")';

Image file is online

document.body.style.backgroundImage = 'url("https://imgur.com/TUQLNdi.jpg")';

`background-repeat` and `background-size`

Oftentimes our background image does not perfectly match the size of the display. Therefore, we often have to stretch or repeat the image to make the background look complete.

The two main style properties that affect this are background-repeat and background-size.

background-repeat has four options:

no-repeat (image renders one time, default location is top left corner)

document.body.style.backgroundImage = "url('https://biologydictionary.net/wp-content/uploads/2020/09/Walrus-1.jpg')";
document.body.style.backgroundRepeat = "no-repeat";

repeat-x (image repeats horizontally across the screen)

document.body.style.backgroundImage = "url('https://biologydictionary.net/wp-content/uploads/2020/09/Walrus-1.jpg')";
document.body.style.backgroundRepeat = "repeat-x";

repeat-y (image repeats vertically across the screen)

document.body.style.backgroundImage = "url('https://biologydictionary.net/wp-content/uploads/2020/09/Walrus-1.jpg')";
document.body.style.backgroundRepeat = "repeat-y";

repeat (default behavior; image repeats horizontally and vertically to fill the entire screen)

document.body.style.backgroundImage = "url('https://biologydictionary.net/wp-content/uploads/2020/09/Walrus-1.jpg')";
document.body.style.backgroundRepeat = "repeat";

background-size has two main options:

auto (default behavior; image renders at its original size)

document.body.style.backgroundImage = "url('https://biologydictionary.net/wp-content/uploads/2020/09/Walrus-1.jpg')";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "auto";

cover (a single image stretches to cover the entire screen)

document.body.style.backgroundImage = "url('https://biologydictionary.net/wp-content/uploads/2020/09/Walrus-1.jpg')";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "cover";

CSS Essential #3: Text emphasis

The main types of text/typographical emphasis include bold, italic, and underline.

Bold text

To make text bold, set the font-weight property to the value "bold".

text1.style.fontWeight = "bold";

Italic text

To make text italic, set the font-style property to the value "italic".

text2.style.fontStyle = "italic";

Underlined text

To make text underlined, set the text-decoration property to the value "underline".

header.style.textDecoration = "underline";

In addition to underlined text, the text-decoration property can also overline and line-through/strikethough text.

header.textContent = 'Vanilla JS practice';
header.style.textDecoration = "underline";

text1.textContent = 'Go hang a salami, I\'m a lasagna hog.';
text1.style.fontWeight = "bold";
text1.style.textDecoration = "overline";

text2.textContent = 'Read the previous sentence backwards.';
text2.style.fontStyle = "italic";
text2.style.textDecoration = "line-through";

CSS Essential #4: Borders

Borders have several properties, which can be set and modified individually. However, in my experience most developers use the shorthand border property, which combines the border-width, border-style, and border-color properties. Instead of writing three lines of code...

header.style.borderWidth = "5px";
header.style.borderStyle = "dotted";
header.style.borderColor = "salmon";

...one could write one line of code:

header.style.border = "5px dotted salmon";

When using the border property, the only parameter that is required is border-style. border-width and border-color are optional, and default to 3px and black respectively.

As with color, borders are big topic with lots of different options for customization and specification. Rather than explain and show all the options in this tutorial, click here if you wish to learn more about CSS border properties and options.

Try it yourself – Task

Congrats on getting this far! To try to synthesize the information presented in this tutorial, try this task on your own. Of course, if you need to refer back to earlier parts of this article for information, you are encouraged to do so!

Your task: Make a square on the screen, below your text. This is very open-ended, and there are nearly limitless ways to do this.

Extra Credit: If you complete this task, try to complete it one or two MORE times using different approaches.

Before you get started, you should do some independent Google research on CSS height and width properties. I didn't cover those properties in this tutorial, but you may need them now.

If you get stuck, scroll down for a few hints, and down to the next section for a couple sample answers. Good luck!

.

.

.

.

.

.

.

.

.

.

Hint #1: The first step to completing this task is to create a new element, likely a <div>. From there, you can use a combination of the style properties you learned in this tutorial to make a square.

.

.

.

.

.

.

.

.

.

.

Hint #2: Have you looked up the height and width properties yet? You may need to set those properties on your new element to give it a defined area.

.

.

.

.

.

.

.

.

.

.

Hint #3: If you can't get a square to appear on the screen, re-check the basic stuff:

Have you used document.body.appendChild(YOUR_SQUARE_HERE)?
Have you given your square some sort of style feature that makes it visible? Double check your syntax for every line.

Try it yourself – Example solutions

I hope you were able to make a square! If you were not, or if you want to see some more ways to do it, check out some example solutions:

Using the border property:

const newSquare = document.createElement('div');
newSquare.style.border = "solid";
newSquare.style.height = "200px";
newSquare.style.width = "200px";
document.body.appendChild(newSquare);

Using the background-color property:

const newSquare = document.createElement('div');
newSquare.style.backgroundColor = "red";
newSquare.style.height = "200px";
newSquare.style.width = "200px";
document.body.appendChild(newSquare);

Using the background-image property:

const newSquare = document.createElement('div');
newSquare.style.backgroundImage = "url('purple-square.png')"
newSquare.style.height = "200px";
newSquare.style.width = "200px";
document.body.appendChild(newSquare);

Conclusion

That was but a brief introduction to all that CSS has to offer, and how to implement it in JavaScript. I hope you learned a lot that you can apply in your own projects! Be sure to check out the third part of this tutorial, which will (I think) cover modals in JavaScript.

Attributions:

Peanut butter and jelly image by Freddy G, linked from Unsplash
Colorful festival image by Robert Katzki, linked from Unsplash
Lasagna image by sunorwind, linked from Unsplash
Horseback rider image by Mikayla Storms, linked from Unsplash
Patrick Star gif is the property of ViacomCBS, Inc. Linked from GIPHY

In Defense of Light Mode

Mike Shine — Sat, 17 Apr 2021 22:27:47 +0000

Chances are, the words you are reading right now are white, and the background behind them is black.

It's not like you don't have a choice in the matter. There are all manner of tools that allow you to view webpages in dark mode as a default (like this one). If you are reading this article on my website, the sun/moon icon up in the top navigation bar allows you to toggle between light and dark mode with a single click. You probably just switched over to light mode out of curiosity, and then immediately switched it back to dark mode.

How am I doing so far? Am I way off base? Or am I so uncannily on point that you're nervously glancing over your shoulder?

Survey says...

Predicting that you prefer dark mode over light mode is hardly much of a party trick, although I'm happy to take credit for any amazement you might have felt. An overwhelming majority of survey respondents expressed a preference for dark mode over light mode. Jimmy Westenberg with Android Authority reported that of the 2,514 Android Authority users who responded to a survey, over 80% use dark mode on their phones, apps, and wherever it is available. Developer Thomas Steiner conducted an informal survey of contrast polarity preference through Twitter, and the results are very similar to the Android Authority poll referenced above.

According to these results and others, the consensus seems to be a preference for dark mode, although one could argue that respondents of an internet survey tend to skew younger, wealthier, and more educated than a general sample of the population.

So dark mode wins, right?

Not so fast. One of the oft-cited reasons for preferring dark mode over light mode is that dark mode is easier on your eyes. However, even a cursory Google search should be enough to cast doubt on this assertion. Everyone is entitled to their opinion, but UX/UI designers know better than to base their designs on what users say. I think Jakob Nielsen said it best when he opined that good user design is in no way predicated on what users say – observing what they do is much more reliable and accurate.

As someone who spends a majority of my working hours in front of a computer screen (not to mention a fair amount of leisure time in front of other screens), the health and wellness aspect of this issue of screen contrast polarity is of particular interest to me. Although I have recently found dark themes to be my aesthetic preference, my even more recent realization that dark mode provides nearly no research-backed benefit to the reading comfort and eye health of average users was surprising to me, and provided the motivation to write this article.

The case for light mode

Opinions aside, the majority of actual evidence-based, rigorous research seems to point to light mode being more advantageous for both eye health and legibility. Researchers with the Journal of the Human Factors and Ergonomics Society published a study in 2013 that found that use of positive polarity (light mode) led to an improved perception of detail. Another study in 2017 found that readers reading with positive polarity could read accurately with greater speed and ease than they could with negative polarity (dark mode). Interestingly, the same study found that these results were even more pronounced under dark ambient illumination, meaning that reading dark mode legibly in low-light situations is even harder than in high-light situations.

Raluca Budiu wrote a thorough summary of research findings on this issue. The results seem to indicate light mode leading to superior results in tasks across the board, both for visual acuity and proofreading. However, her summary did contain some points in favor of dark that are worth considering as well.

Few things in life are absolute

Although Budiu's summary indicates that light mode wins across the board in terms of legibility and efficiency in reading, and that contrast polarity had no significant impact on eye fatigue, there are still [a couple] reasons to consider sticking with dark mode. A 2018 study found that the way that the eye behaves when reading positive polarity may lead to myopia (nearsightedness) in the long term. The suggested remedy to offset this effect is, naturally, to use dark mode.

As far as I can tell, this study is the only published academic study that supports this conclusion. One of the core tenets of proper research is replicability, so although I cannot dismiss this study's findings, more research supporting this conclusion is needed to affirm the findings (in my opinion).

Conclusion

Although I will keep checking the research to see if any more published studies corroborate the 2018 myopia study's findings, I feel that the great majority of research into the effect of contrast polarity on eyes indicates that light mode is the way to go. So, although dark themes are cool and trendy, I'm switching back to light all the way (I'm typing this article in a light-theme VSC. It is so weird...).

What will you do? Join the dark side or turn towards the light? Whatever you choose, make sure you understand the risks and benefits of your options.

Attributions:

Baby Yoda at window image by Victor Serban (UnSplash)
Stormtrooper Batman image by Daniel Cheung (UnSplash)
Red lightsaber in cave image by Cade Roberts (UnSplash)
Darth Vader image by Tommy van Kessel (UnSplash)
Obi Wan gif linked from Giphy
Black and white coffee image by Alex (UnSplash)

Vanilla JS Tutorial - Part One Building blocks of the DOM

Mike Shine — Sun, 11 Apr 2021 17:01:06 +0000

This post is the first part of a code-along tutorial, where you'll learn some rudimentary skills in vanilla JS DOM manipulation. If you missed my previous entry, where I discussed what vanilla JS is and why it's important, check it out here.

Let's get started!

Setup

1) Make a folder/directory on your computer. Name it something appropriate, like "vanilla-js-practice."
2) Create two files within this folder, index.html and index.js.
3) Next, let's add some boilerplate code to our new index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Vanilla JS Practice </title>
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

Normally, in the <body> section of an HTML file, we would see all sorts of elements, like <h1>, <h2>, <div>, and <p>, to name a few. However, in our HTML file, the <body> section contains only a <script> tag and nothing else. This <script> tag essentially tells the web browser to read the index.js file for valid code to run.

This is the last time we will touch our index.html file; every other line of code you see in this article will be in our index.js file.

Building Blocks #1 & 2 - `document.createElement()` and `.textContent`

All right, now that we are in our index.js file, type the following code block into your editor, and then read on for an explanation of what you just typed.

const header = document.createElement('h1');
header.textContent = 'Vanilla JS practice';

Perhaps the most important snippet of code to remember when using vanilla JS for DOM manipulation is document.createElement(). Put simply, this is the code you use to create an HTML element. The HTML element you want to create goes inside the parentheses in quotation marks. In our example, we used document.createElement('h1') to create an <h1> element, which we then stored in header.

Another very important building block is .textContent. As you may have deduced, this is the property that allows us to set or change the text of an element. In the second line of our example, we take the element that we created in the previous line (header) and set its text to Vanilla JS practice.

Whew! That was kind of a lot of explanation for something that simple. Using vanilla JS to write HTML code ends up being quite a bit lengthier than just writing the HTML itself. The HTML equivalent of our two lines of vanilla JS above would be:

<h1>Vanilla JS Practice</h1>

You would be hard-pressed to find a web developer who says that using vanilla JS is the most quick and concise way to write code. However, remember that you're learning this not because it's the quickest or most elegant way to code. You're learning this because it is a great way to remove layers of abstraction and really understand the mechanics of the language and the DOM. So, on we go!

Okay, time to see what we've got so far. Open up your index.html file in your web browser to see our new header:

...Where is it? Why has it not appeared?? 😱😱😱

The short answer: It isn't there because you haven't told it to be there.

Building Blocks #3, 4, and 5 - `.appendChild()`, `.removeChild()`, and `.remove()`

Don't worry, you haven't made a mistake! This is an important distinction between HTML and vanilla JS. In HTML, under normal circumstances, any elements with proper syntax in between the <body> tags will render to the DOM. When using vanilla JS, this is not the case; we have to intentionally add each element we create to the DOM. Kind of a pain, don't you think? It's one of the reasons why using vanilla JS for an entire project isn't generally advisable unless you are doing it for the sake of practice, like we are.

Anyway, this is where .appendChild() comes in.

Here's how we will add header to the DOM:

document.body.appendChild(header)

Document.body references the <body> section of our index.html file, and appendChild is a native method we can use to add the specified element (in this case, header) to the DOM. Please note that appendChild adds the specified element to the DOM below any previously appended elements.

Now then, the three lines of code we should have typed out in our code editor so far are as follows:

const header = document.createElement('h1');
header.textContent = 'Vanilla JS practice';
document.body.appendChild(header);

Open up your index.html file in your browser once more and you should see:

Good job! You have created your first element in vanilla JS, an <h1> header.

Let’s try to create a little bit more. Use the steps we took to create and append the header to create some text below your header. Try this on your own, and then scroll below if you need some guidance or to compare your efforts to mine. Good luck, you can do this!

How did you do? Hopefully you were able to add some text below your header. More importantly, I hope you are at least a little more solid now in your understanding of JS, HTML, and the DOM, compared to where you were before you scrolled all the way down here.

Here’s what I did as my text addition:

const header = document.createElement('h1');
header.textContent = 'Vanilla JS practice';
document.body.appendChild(header);

const text1 = document.createElement('p');
text1.textContent = 'Go hang a salami, I\'m a lasagna hog.';
document.body.appendChild(text1);

const text2 = document.createElement('p');
text2.textContent = 'Read the previous sentence backwards.';
document.body.appendChild(text2);

Nicely done!

Just as we can add elements to the DOM with appendChild, we can take them away with removeChild.

For example, if I wanted to to remove my text2 variable that I created above, I could do so one of two ways:

1) document.body.removeChild(text2);
2) text2.remove();

The first way would be using removeChild to remove an element in exactly the same way that we used appendChild to add an element; we invoke a method at the parent level (document.body is the parent of text2) to add or remove a child element (text2).

Don't cry, child. Your parents won't remove you using vanilla JS!

The second way is different; it utilizes the remove method instead of removeChild. Since we aren't referencing parent or child elements with this method, it can be called directly on the element to be removed, thus text2.remove() would be our syntax.

Building Blocks #6 & 7 - `.setAttribute()` and `.removeAttribute()`

The process of labeling elements in certain ways and then using those labels to access or modify those elements is essential in web development. In HTML, the three "label types" that we have are types, classes, and ids. If you are just hearing about this for the first time, click here and take a few minutes to learn about these labels (more accurately called selectors).

We can use vanilla JS to set and remove these attributes. .setAttribute() requires two arguments; the attribute to be set and the name of the attribute.

Let's look at some examples.

1) Adding the class "palindrome" to text1:

text1.setAttribute("class", "palindrome");

2) Adding the id "giantWalrus" to text2:

text2.setAttribute("id", "giantWalrus");

Removing attributes with .removeAttribute() works in almost the same way, except when removing the value of the selector doesn't need to be specified. For example, to remove the id "giantWalrus" from text2:

text2.removeAttribute("id");

Building Blocks #8 & 9 - `.querySelector()` and `.querySelectorAll()`

Now that we have learned how to use vanilla JS to set attributes onto our elements, we probably ought to know how to access them through their attributes too.

The methods we use for accessing elements by attribute are .querySelector() and .querySelectorAll(). .querySelector() returns the first element in the document that matches the provided selector, while .querySelectorAll() returns all matching elements, in the form of a NodeList. A NodeList is similar to an array, but with fewer available methods.

For either of these methods, more than one attribute can be provided as a criteria; additional attributes are separated by commas.

Let's look at some examples. The answers to #1 and #2 are provided below the prompt. The answers for #3 and #4 are down a couple lines; try them yourself first and then check your work!

1) Create a variable firstElem that contains the first element of class sampleClass:

const firstElem = document.querySelector(".myClass");

2) Create a variable allElems that contains all elements of the class classDismissed:

const allElems = document.querySelectorAll(".classDismissed");

3) Create a variable greatId that contains the element with the id thisIsAGreatExampleIdName;

4) Create a variable divsAndPs that contains all <div> and <p> elements in the document:

Answer to #3 - const greatId = document.querySelector("#thisIsAGreatExampleIdName");

Answer to #4 - const divsAndPs = document.querySelectorAll("div", "p");

Conclusion

Great work, you made it to the end of part 1! You learned about vanilla JS, why it is worth spending time on, and got some hands-on practice. In this tutorial, you:

Created HTML elements with vanilla JS
Appended and removed those elements to and from the DOM
Selected elements by attributes

I hope you found this helpful! Check out part 2 soon, where we take on using vanilla JS to style content.

Attributions:

Jenga photo by Nathan Dumlao (Unsplash)
Vanilla ice cream cone image by Dana DeVolk (Unsplash)
Blue blocks image by Iker Urteaga (Unsplash)
Psyduck gif credited to The Pokémon Company International, Inc.
Surprised pikachu face image credited to The Pokémon Company International, Inc.
Cat mashing keyboard gif by @AaronsAnimals (Giphy)
Crying toddler image by Arwan Sutanto (Unsplash)

Let's Talk About Vanilla JavaScript

Mike Shine — Wed, 07 Apr 2021 19:06:31 +0000

You: “May I use a framework such as React or Vue for this prompt?”

Interviewer: “No, please complete the prompt in vanilla JavaScript.”

You:

Ahh, vanilla JavaScript… it makes even seasoned web developers break out into a cold sweat. But, with a little practice in the fundamentals, you might learn that vanilla JavaScript (JS) can be your friend! :)

This article serves as an introduction to a multi-part tutorial on vanilla JavaScript. The tutorial begins in the next article.

What is vanilla JS, and why should I spend any time on it?

“Vanilla JS” is a casual nickname the programming language JavaScript in its pure form, without the benefit of any added frameworks or libraries (such as React or Vue, as mentioned above). Such frameworks and libraries are not only helpful in a professional setting, they are imperative! However, most veteran programmers would recommend that beginning programmers not start with such tools, as they can sometimes impair your underlying conceptual understanding of web development. Starting with the no-frills version of JS will lead to more concrete understanding of how the code interacts with the browser, which is a core component of web development.

This tongue-in-cheek website is a humorous repackaging of vanilla JS into a sleek new framework. Developers love shiny new frameworks, and truthfully if vanilla JS was sentient and had any interest in "rebranding itself" this would be an excellent strategy.

Sometimes the term vanilla JS sometimes implies that some of the HTML and CSS coding for a project that might otherwise occur in separate HTML/CSS files will be handled in the JS file. So, rather than using vanilla JS only for the JavaScript portion of your project, you might do some of the styling or DOM manipulation in the .js file as well.

Some Disclaimers

If you have coding experience, especially web development experience, odds are the following tutorial will be way too slow for you. No quick tricks here; this is more of a methodical walkthrough for absolute beginners to DOM manipulation trying to learn basics.

Now, the tutorial that follows this article does presuppose a basic knowledge of HTML and JS. Try a couple of these toy problems; if they seem easy or at least doable, you should be good to go. If they seemed a little (or a lot) beyond you, I recommend spending some time here completing some of the Basic Javascript section. Then, head back here when you feel ready.

You also need to have a code editor installed or some sort of development environment that you have some competence with; my weapon of choice is VSC (Visual Studio Code), but any code editor will do the trick.

What should I expect from one of your tutorials?

The focus in this tutorial will be JS (obviously), so we will be doing all of our coding in a SINGLE JS file; no HTML or CSS at all!*

*…Except for a boilerplate HTML with a script tag linking to our JS file.

I know, I lied, but this HTML file is really only to make the browser happy. Browsers like HTML code, and even though we humans are reading this article to learn to make HTML with JS, web browsers don’t have the same willingness to learn as you do. So, kudos to you for being a better student than your browser!

There will be opportunities throughout the tutorial for you to code along. You really should do this; have a file open in your text editor of choice and code along. It will help reinforce the knowledge, trust me (or don’t trust me and code along anyway).

Thanks for bearing with me through the [admittedly somewhat boring] details and background. It is important to make sure you are at the right starting point so you will understand the content. Not understanding this stuff now will lead to you having a bad time when things get more complex (and they will DEFINITELY get more complex).

In the following article, our vanilla JS tutorial begins!

Attributions: Panic reaction (sweating) GIF by Billy Budgen, linked from giphy.com

DEV Community: Mike Shine

Vanilla JavaScript Tutorial – Part Two: CSS Styling with JavaScript

Why CSS?

Using CSS in your JavaScript file

CSS Essential #1: Color

CSS Essential #2: Backgrounds

background-color

background-image

background-repeat and background-size

CSS Essential #3: Text emphasis

Bold text

Italic text

Underlined text

CSS Essential #4: Borders

Try it yourself – Task

Try it yourself – Example solutions

Conclusion

In Defense of Light Mode

Survey says...

So dark mode wins, right?

The case for light mode

Few things in life are absolute

Conclusion

Vanilla JS Tutorial - Part One Building blocks of the DOM

Setup

Building Blocks #1 & 2 - document.createElement() and .textContent

Building Blocks #3, 4, and 5 - .appendChild(), .removeChild(), and .remove()

Building Blocks #6 & 7 - .setAttribute() and .removeAttribute()

Building Blocks #8 & 9 - .querySelector() and .querySelectorAll()

Conclusion

Let's Talk About Vanilla JavaScript

What is vanilla JS, and why should I spend any time on it?

Some Disclaimers

What should I expect from one of your tutorials?

`background-color`

`background-image`

`background-repeat` and `background-size`

Building Blocks #1 & 2 - `document.createElement()` and `.textContent`

Building Blocks #3, 4, and 5 - `.appendChild()`, `.removeChild()`, and `.remove()`

Building Blocks #6 & 7 - `.setAttribute()` and `.removeAttribute()`

Building Blocks #8 & 9 - `.querySelector()` and `.querySelectorAll()`