DEV Community: JavaScript Designer

What are CSS Variables and How to Use Them

JavaScript Designer — Thu, 10 Feb 2022 17:39:07 +0000

CSS variables give you the opportunity to declare variables in your CSS code. Currently, the support is around 96%, which means you should be able to use it without worrying. Of course to be at 100% confidence, you can always check Can I use to make sure that you are not trying to target a browser that is not capable.

Using the :root psuedo-class

Custom properties or CSS variables allow us to re-use a variable property to substitute inside of a CSS property. Let's take a look at an example.

:root {
 --my-bg-color: blue;
}

.my-class {
 font-size: 16px;
 background-color: var(--my-bg-color);
}

.my-other-class {
 font-size: 20px;
 background-color: var(--my-bg-color);
}

In our example above, we are declaring a variable name under :root psuedo-class. When we define our variable --my-bg-color under this psuedo-class, we are able to use this anywhere globally in our code. We call the variable in our code using the var() function provided. This injects the property value of --my-bg-color inside our property value so the output would replace the statement with the color blue in this case.

Using the var() function

The var() function can accept a default or fallback value to the property value if our custom variable name is not defined or available.

.my-other-class {
 font-size: 16px;
 background-color: var(--my-bg-color-value, red);
}

In the scenario above, if the value of --my-bg-color-value is not available, then the default value of red will be called in this case and used. We can also add more variables to the check if needed.

.my-other-class {
 font-size: 16px;
 background-color: var(--my-bg-color, (--my-bg-color-value, red));
}

Here we are checking for two variables, and if neither are found then we default the value to be red. Do note that doing this may cause performance issues as it takes more time to parse through the variables.

Quick Takeaways

CSS variables are great to use in your CSS to declare custom values
We declare our variables inside the :root psuedo-class
Using the var() function we can call our custom property inside of a property
You can chain multiple calls as the second argument to var(), but there may be performance implications

Var, Let, Const Variable Declaration

JavaScript Designer — Wed, 12 Jan 2022 04:16:44 +0000

What is a variable?

In every programming language, we have something called a variable. Let's look at a definition of a variable to understand what it means, I just googled this btw:

not consistent or having a fixed pattern; liable to change.

a data item that may take on more than one value during the runtime of a program.

So taking this into consideration, we can say that a variable is an item of data that may change over time. I like to think of a variable as a bucket which is empty and can be filled in with any value that is allowed. There are two parts in using a variable in JavaScript, declaring the variable and assigning it a value.

To use a variable, we use a reserved keyword followed by a variable name, and optionally assign it a value.

Using Var in JavaScript

Originally, using the keyword var followed by a variable name was the only way we were allowed to declare a variable.

var variableName = "hello world"

In the example statement above, we are declaring a variable with the keyword var and assigning it a value of hello world, which is of the data type string. Now that we have a variable, by definition, we can change the value of that variable. Which means we can do this:

var variableName = "hello world"
var variableName = "something else"
// or we can assign it any other acceptable data type in JavaScript
var variableName = 99
var variableName = true

Using var declares the variable either using a functional-scope or a global-scope. A functionally-scoped variable is a variable inside of a function. A function is basically a small program with statements.

// here we have var in a global-scope, as it is not inside any function thus living "globally"
var variableName = "hello world"

function newFunction() {
// here we have var in a functional-scope
var variableName = "hello world"
 return variableName
}

The initial variableName variable is living in a "global" scope, while the one inside the function keyword is living inside of the "function" scope.

JavaScript has the concept of hoisting, which means to "raise up" or "pull up", and so before any code is executed, it will hoist the declaration part of any function, variable, or class to the top of its respective scope.

// we are calling the function before we are declaring it
console.log(newFunction())
function newFunction() {
var variableName = "hello world"
 return variableName
}

This will work fine, however if we try this:

console.log(newVariable)
var variableName = "hello world"

We will get an error, as the value of variableName would be undefined. The reason for this is that the declaration of the variable has been hoisted, not the assignment. The default assignment var receives is undefined.

// this will be undefined
console.log(newVariable)
var variableName
variableName = "hello world"
// at this point we have assigned it a value, so it will give us the value
console.log(newVariable)

Using Let in JavaScript

The keyword let will "let" us (see what I did there) declare a variable which only lives in a block-scope. The block-scope is a statement used to group statements. It is bound within a pair of opening and closing curly braces ({ }). Assignment using let is optional, and as with var, it will have a default assignment of undefined.

// this function is using a block statement
function newVariable() {
 let textVariable = "hello world"
 return textVariable
}

In the example above, textVariable lives inside the scope of the newVariable function and it cannot be references outside of it. The keyword let is used for updating a variable after it has been defined.

let textVariable = "hello world"
if (textVariable) {
 textVariable = "something else"
}
console.log(textVariable)

Using Const in JavaScript

The third type of variable declaration we have in JavaScript is const. With this keyword, we can declare a variable, but we cannot reassign the variable as we can with var and let.

const VARIABLE_NAME = "hello world"
// this will give us an error
VARIABLE_NAME = "something else"

By convention, constant variables are usually all uppercase characters. Of course that is not always the case. One thing to note though, is that even though you cannot reassign another value to a variable declared with const, you can update an object or an item in the array if it is declared with a const.

const newObject = {
 name: "Sam",
 age: 29
}
// you can do this
newObject.name = "John"
// but you cannot do this
newObject = {
 name: "John"
 age: 33
}
// you can also do this
const newArray = ["Sam", "James"]
newArray.push("Jones")

Quick Takeaways

You may still see variables declared in the wild using var
Use let if you have a variable which will change its value during the course of the program
Use const to declare variables which will hold values which may not change, but remember it does not provide a safety for changing properties in an object or items in an array

Hello World

JavaScript Designer — Fri, 07 Jan 2022 04:35:49 +0000

Howdy!

My name is Asif Kabani and I am a Front End Developer.

I have been a developer for quite some time now, and I wanted to start this blog to help myself, and if the world wide web is willing, to be able to help others.

My Starting Experience

It started around some time, I believe it was the year 1999. I took a class called HTML and CSS in high school. I was instantly addicted at what I could do. Of course this was the era of the dancing gifs all over the web, so my class project page was just that.

I tried taking another course in high school after that introduced computer science. I dropped that class as it seemed difficult for me to understand programming and also the teacher was no help. This was unfortunately the times we were living in.

I was never a studious or a "smart" kid in school. I was always around the "C" averages. Growing up was tough trying to figure out what I wanted to do in life. I went to community college and took some basic academic courses, until I ultimately found The Art Institute of Houston. There I enrolled myself in a program called Interactive Media Design, which was an associates degree plan.

We were taught a plethora of different technologies and classes which included audio, video, graphic design, and web design. The only web design class they taught was basic HTML/CSS and PhotoShop with ImageReady. ImageReady was an extension to PhotoShop which let you slice up your graphics and you could export out a HTML website from it.

The one programming class I did have was called Macromedia Director. This is where I actually got a first taste in some logical programming. The language which it used was called Lingo. I loved what I could do using this programming language and created a cool portfolio piece.

Into the Workplace

Coming out of school, I was working in a mom and pop company called Meyer Instruments, which was a company which sold Leica Microscopes and products. My work involved using Dreamweaver to code and update their website using the GUI mostly along with jQuery snippets for functionalities. I was so relaxed and on auto-drive that I told myself this was the best I could do with what I had learned.

Eventually, I moved on but I gave many years of my life to that company. I moved on to other projects and was mostly always using HTML/CSS and jQuery snippets for functionalities. I did not know what I was actually doing but I knew enough to modify jQuery snippets and make it functional as to how I want it to work.

After this, I got into WordPress for many years. Again, as I was afraid and told myself "I am no programmer," I always opted to the easy way out of programming. WordPress had so many ready to go templates and plugins I just relied on that. It was not until around the year 2013 or so when I finally decided I needed to do more. React was prevalent in the industry and everyone I saw, it required at the least JavaScript and React.

The Want to Learn

I decided to go to a bootcamp to learn some JavaScript and React. I was amazed at how much fun I was having coding using vanilla JS and React. I realized that I just had low to no self-confidence when it came to programming, which stemmed from my bad experience in high school. I wish I had done this much sooner.

Anyways, this was a short introduction about me and my small journey from nothing to a developer. As of this post, I am 39 years old and I will be 40 coming in March 2022. I told myself a long time ago I would write a blog. But I always have been a pessimist so it was hard to not negate what I thought, like I am not good enough. I am finally starting a blog and hope to keep doing this going forward. I would love to even have just one impact on someone.

As I am getting older, I am trying to teach this old dog some new tricks.