DEV Community: AlexDunia

Using Vue.js Directives to build a Cryptocurrency (web3, DEfi) Interface.

AlexDunia — Sun, 07 Sep 2025 17:07:43 +0000

TL;DR

In this article, you'll discover the power of Vue.js bind directives and its use cases in a cryptocurrency app. It is perfectly suited for all Vue Js and Javascript developers at every level.

Prerequisites

To fully understand this tutorial, you need to have at minimum:
A very basic knowledge of Vue.js.
A good understanding of Css and Descendant Selectors in Css.
If you have these, then by the end of this article, you will be able to write simple, interactive, and functional conditions using the Vue.js bind directive; and most importantly, how to use Vue.js bind directive for reactivity on application.

Introduction to Vue.Js Directives

In Vue.Js, directives are shortcuts used to add functionality to DOM elements. They specifically target, change, and make elements do more within the DOM.
While several directives improve the general functionality of a Vue web application, this tutorial will focus on a type of directive called the v-bind directive.

What is the Vue Bind directive?

When building web applications, certain HTML attributes (like src, href, class, etc.) can load by default, or they could be as a result of the conditions set by the developer.

Little user interactions, like clicking, can dynamically change some parts of the HTML to show different content, and these are crucial for improving User Experience(UX) in web and mobile applications, whether in a Social networking application, Web3 application, AI powered application, and many others.

For more context on these little interactions, let’s consider two instances using a man we’ll call "Dan":

The first is Dan getting into a social app and searching for a profile. If the profile is online, he sees a green dot next to the name to show the profile is “active”; otherwise, he sees a red one(inactive).

The second is Dan in the process of ordering a shoe online. On the product description page, he finds two available sizes for the shoes he's interested in. If sizes 14 and 18 are available, and he clicks on one, there would be an indication on the website that the size was selected, for this, by changing the button color to green (or another noticeable color).

Actions like these during development, would require a large chunk of code mostly composed of several CSS styles and traditional vanilla JavaScript or other framework conditions. This already seems like a stretch, especially considering how simple the functionality sounds.

Luckily, when building this reactivity, developers can use Vue.js to make the code easier to read, write, and understand with the v-bind directive.

To ‘bind’ in general terms, means to connect or attach two things together. This is a solid foundation to understanding what the V-bind directive does. It is a type of Vue.js directive that is attached to our HTML via a special token for the purpose of adding styling and functionality to DOM elements.

Its goal is not to change how the code works but to simplify the expression, and make it more readable and easier to manage, especially for larger projects.

They are specifically used for binding styles, classes, attributes, props etc.

There are two commonly used v-bind directives. They Include:

The v-bind:style directive, and
The v-bind:class directive.

Since this is the first part of a two-part article, our only focus here will be breaking down the v-bind:style directive.

We will take it step by step, from very basic and static syntax to more complex syntax and in every example of this first part article, we will be using iterations of the cryptocurrency application I’ve prebuilt as a reference.

This approach is intended to make it easier for you to understand, no matter what level you are.

If you happen to be more interested in the codes, then you can head to my github repository here:
Alex Dunia's github repository

What is the V-bind:style directive ?

V-bind:style directives are special tokens that are used to add styles directly on the html.
It’s as easy as it sounds, they are simply written directly on our HTML, and can be done in three ways:

The String Syntax
The Object Syntax
The Array Syntax.

The String Syntax

If you’ve written CSS, then you should be used to this syntax:

<span style="color: #00ff00"> +$400 </span>
// The outcome of the code would be a red color on our page.

This pattern of CSS is known as inline css styles, and they allow us to create styles directly within the HTML tag.

As simple as it is, It is not far off from the work the string syntax does.

The v-bind:style string syntax allows you to apply styles as a single string, just like inline CSS.

Here is the app we will be working with, along with a link to view the project live:

(https://alexdunia.github.io/spendcryptai/)

There are two key things to note here:

The Balance
The Transaction History.

The balance is $400, and it’s colored green. We can write this with the v-bind:style string syntax.

But first, we will start by declaring a ref that contains the actual value of the account balance:

<script setup>
import { ref } from 'vue';
const accountBalance = ref(400)
</script>

Next, we will add the style using the v-bind:style string syntax.

 <p class="income-amount">
 <span v-bind:style=""> ${{ accountBalance }}
           </span>
              </p>

In the code above, we have a span where our directive sits.

syntax allows us to bind a dynamic value to an HTML attribute. In simpler terms, it allows us to change the CSS styles of an HTML element based on data inside our Vue component (in our case, the accountBalance). We are attaching (binding) dynamic styles (CSS) to the element, and after the connection is made, we can then manipulate the HTML styling however we choose.

Since we are using the string syntax, we will add a string inside our quotes, and write our styling inside it, just like we did with the inline css:

<p class="income-amount">
 <span v-bind:style="'color: green'"> ${{ accountBalance }}
           </span>
              </p>

With this, our application is set, and our $400 balance is now coloured Green.

This look great, but we want some styling reactivity based on the wallet balance,

That is:

If the wallet balance is $1, or more than $1, the text will be Green (Sufficient Balance).

If the wallet balance is less than $1, then the text will be Red (Insufficient Balance):

These will serve as clear visual cues that will help users (Like Dan from earlier) be more intuitive about the status of their account. Hence, if Dan is the owner of the wallet, he can easily know if his balance is sufficient or insufficient without necessarily paying too much attention to the actual figures.

Traditionally, to achieve this with Vue.JS, it has to be written in an if-else statement in the script section of our Vue Js code, followed by a mount, for when the app is loaded.

This already seems hectic, and would lead to a chunk of code.
The string syntax will serve as the syntactic sugar that will allow us to achieve this with fewer lines of code.

The first step is to not make any changes to the accountBalance.

const accountBalance = ref(400)

Note: This balance can either be Positive values (e.g., 400) or negative values (e.g., -400).

Next, we want to be able to monitor the number.
At the moment, it is $400, but if it drops below $0, we need the app to change the color accordingly. This can be achieved with a condition created using a ternary operator.

The Vue.JS bind directive allows us to write a ternary operator inside our v-bind:style directive so we can set our conditions inside the string in our markup:

 <p class="income-amount">
                <span v-bind:style="accountBalance > 0 ? 'color: #00ff00' : 'color: #ff0000'"> ${{ accountBalance }} </span>
              </p>

Note: If it was the array syntax, we would have an array replacing the strings and If it was the Object syntax, we would have an object.

As seen inside the string:

accountBalance > 0 ? 'color: #00ff00' : 'color: #ff0000'

What this condition set with a ternary operator means is If the accountBalance is greater than zero (written in the code as accountBalance > 0), then (written on the code as a question mark ‘?’), we set the CSS styling to green*(with the color code of ‘#00ff00’); otherwise (on the code as a colon ‘:’), we set the color to red(with the color code of ‘#ff0000’*).

With this implementation, the account balance will be displayed in green. However, if the balance is manually changed to a value below zero, the text will automatically update to red.

It’s important to note that any CSS style properties (such as background-color, font-size, font-weight, etc.) can be applied directly using Vue.js’s v-bind:style directive, Not just the color property used in our example. The same way we added one style property, we can also update multiple styles in response to data changes.
In situations like this where you need to add multiple CSS styles at once, you write them in a single string inside the v-bind:style directive and separate each styling with a semicolon.
Like this:

 <span
                  v-bind:style="accountBalance > 0 ? 'color: #00ff00; background-color: #e0ffe0; font-size: 20px; padding: 5px; border-radius: 5px; font-weight: bold; border: 1px solid #00ff00' : 'color: #ff0000; background-color: #ffe0e0; font-size: 20px; padding: 5px; border-radius: 5px; font-weight: bold; border: 1px solid #ff0000'">
                  ${{ accountBalance }}
                </span>

Note: The Object syntax and Array Syntax for the style directives are better alternatives to go around situations like this, and the v-bind:class directive can be used to make the aforementioned more readable.

Next, we want to build the transaction history section of our web application.

Our credit notification features a green line on the left side, while our debit notification has a red line on the left side.
In order to achieve this we must first store the transactions in an array. ]

<script setup>
const transactions = ref([
  { id: "xy8723ougihk8o7ii", amount: 10 },
  { id: "ww9732ougihk8wdvk", amount: -10 },
  { id: "xy8723ougihk8o7ii", amount: 10 },
]);
</script>

Note: In a real-life scenario, we would fetch transactions from the backend using a GET request. If you intend to do this, simply add a GET request and store the response in the transactions array to achieve the same results.

In the amount field of the transactions array, we have positive and negative values.
Positive amount values (e.g., 10) represent credits.
Negative amount values (e.g., -10) represent debits.
This is how we would be able to monitor our application to tell if a transaction is debit or credit, and in the same way, give us the needed color.
Following this, we will add some lines of code:

        <div v-for="transaction in transactions" :key="transaction.id">
            <div class="tracker-item"
              v-bind:style="transaction.amount > 0 ? 'border-left: 4px solid #00ff00' : 'border-left: 4px solid #ff0000'">
              <p>{{ transaction.amount > 0 ? 'Account Credited from ' : 'Account Debited for ' }} {{ transaction.id }}
              </p>
          </div>

Here, we first make a class and a transaction history heading, then, we loop through the transactions array to display all transaction values on our web page.

Then for our class called ‘tracker-item’, we access the transaction amount using transaction.amount, check if it is greater than zero, and use the style directive to apply the styling directly on our markup.
Based on the same condition, we also add the text "Account credited from" or "Account debited from." on our P tag.
Now, you should get the appropriate colors that indicate the credit and debit section.

It only gets better from here because Vue.JS makes the code cleaner and easier to write with their shorthand.
Rather than writing v-bind:style, you just write :style, and it performs the same function:

 <div class="tracker-item"
     :style="transaction.amount > 0 ? 'border-left: 4px solid #00ff00' : 'border-left: 4px solid #ff0000'">
    <p>{{ '{{' }} transaction.amount > 0 ? 'Account Credited from ' : 'Account Debited for ' {{ '}}' }} {{ '{{' }} transaction.id {{ '}}' }}</p>
</div>

With simple and very little code, we have been able to achieve a lot compared to vanilla Javascript and other Javascript frameworks.

As mentioned earlier, the v-bind:style also supports Object Syntax and the Array Syntax.

V-bind:style Object Syntax

The v-bind:style Object Syntax allows you to apply styles as Javascript objects.
It serves the same purpose of styling, but compared to the string syntax, is better for cases where we add multiple style properties dynamically.
Like every object in traditional programming, it is wrapped in curly braces, and contains key-value pairs.
For instance, in Javascript, an object will look like this:

let family = {
  father: "David",
  mother: "Esther",
  fathersAge: 40
};

father, mother, and fathersAge are keys.
"David", "Esther", and 40 are the values associated with each key.
The object syntax follows this template, especially in terms of key-value pairs. The major difference however, is the keys are CSS properties and the values will be the value associated with the CSS property.
Here’s a very basic example of the v-bind:Style Object Syntax that gives more context to our explanation:
Note: To properly follow along, you will have to indent the previous string syntax and copy or write this on your code editor.

<span :style="{ color: '#00ff00' }">
  ${{ accountBalance }}
</span>

Inside the curly braces {}, we define a JavaScript object where the key value pairs follow CSS rules;
The key is the CSS property called ‘color’.
The value is the value of the associated CSS property. The value could either be the hex value, RGB values, or named colors.
We should see a green balance now.

Next, we want the styles to change depending on the wallet balance, so, our object syntax would look like this:

<span :style="{ color: accountBalance > 0 ? '#00ff00' : '#ff0000'}">
  ${{ accountBalance }}
</span>

The major difference between setting conditions here, and with the string syntax, is how we set our conditions.
In the object syntax, conditions are defined directly within the key-value pairs, where the key represents the CSS property (such as color), and the value is dynamically assigned based on the condition.
If the accountBalance is greater than 0, the color will be green (#00ff00). Otherwise, it will be red (#ff0000).
For cases where we want to add multiple styling, we would easily separate it via a comma:

<span
  :style="{ color: accountBalance > 0 ? '#00ff00' : '#ff0000', fontSize: accountBalance > 0 ? '20px' : '15px' }">
  ${{ accountBalance }}
</span>

Where the newly added style is the font size, and it’s set on the same condition.

$# V-bind Array Syntax.

In the V-bind Array Syntax, we can pass in arrays directly on our markup, and inside the arrays would have the styles we need for our web application.
Let's go back to our application, and assume we do not want to place a condition on the account balance. We just want a green color; this is how we would achieve that using the array syntax,
We would declare a REF, and inside it an object, where we want some static colors:

const accountBalanceColor = ref({
  color: '#00ff00',
  fontSize: '20px',
})

Note: To follow along with this, you would again need to remove all styles for the account balance, along with the conditions previously set.
Next, we want to add this to our markup, and It’s as simple as writing the array directly inside the style directive:

<span :style="[accountBalanceColor]">
  ${{ accountBalance}}
</span>

With that, we have a green color.

In cases where we need to have a condition, then we place the ternary operator inside the array, and create a ref that houses the color of the insufficient balance.

<span :style="[accountBalance > 0 ? accountBalanceColor : insufficientBalance]">
  ${{ accountBalance }}
</span>

This code follows the same logic as previous examples, where we conditionally apply styles based on the accountBalance. The difference here is that we are using an array syntax to apply styles, and the outcome of our condition (accountBalance > 0) determines which style object (either accountBalanceColor or insufficientBalance) is used. These style objects are defined in the block.<br> </p> <div class="highlight"><pre class="highlight plaintext"><code>const insufficientBalance = ref({ color: '#ff0000', fontSize: '20px', }) </code></pre></div> <p></p> <p>Then, if we need to add another condition, we simply add a comma after the first like this:<br> </p> <div class="highlight"><pre class="highlight plaintext"><code><span :style="[ accountBalance > 0 ? accountBalanceColor : insufficientBalance, accountBalance > 1000 ? highBalanceColor : {} ]"> ${{ accountBalance }} </span> </code></pre></div> <p></p> <p>And that’s all it takes. </p> <h2> <a name="conclusion" href="#conclusion" class="anchor"> </a> Conclusion </h2> <p>In this guide, we have walked through the steps of using Vue.js Directives to add functionality to DOM elements, and how faster it is. <br> While we’ve explored a couple of features, we have barely scratched the surface of the countless use cases for using Vue.Js Directives, ranging from building interactive AI interfaces, to building interfaces across other niches. <br> Hopefully, this guide gives you a general overview of the possibilities of the bind directives.</p>

Implement a Light and Dark Mode Toggle with JavaScript and Local Storage.

AlexDunia — Sat, 10 Feb 2024 11:26:12 +0000

Introduction

If you want to learn how to toggle between light and dark modes on HTML, CSS, and JAVASCRIPT, then this practical tutorial is for you.

Live project: https://jstogglemode.netlify.app/
Source code: https://github.com/AlexDunia/Js-Toggle-Tech-Writing-source-code-

What is a Toggle/Switcher in this context?

A toggle is a button or icon on a website or app that lets you switch between two options, like showing or hiding a menu, selecting filters, or changing between light and dark mode (Like in our case).

Setting up our Font Awesome Icons to toggle.

To set up this toggle, we need to get the icons for the buttons we want to use.

Here's how the toggle button looks on our website.

Clicking the icons circled red toggles between light and dark modes. We'll import two icons accordingly.

For this project, we will be using Font Awesome.

Once this is done, we will visit our profile.

We want to make use of our kits, so we click on 'Your kits'.

and we click on the alphanumeric string on our profile:

We will then see the code we need to copy and paste for the icons we will use to toggle to be displayed.

Copy on our HTML

After this, we go back to the Font Awesome website to search for "Toggle".

We need two icons, toggle on and toggle off.

Copy and paste that into your HTML too.

Take note of the IDhere, we would be storing them in separate variables and using them as event listeners.

What is Local Storage?

Local Storage is a global object in the browser that lets websites store key/value pairs on a user's device.

What this means on a basic level is that a user can do something on a website, leave that website, restart their computer and that particular thing would remain the same when they get back to it. That's the power of the local storage.

In doing its work, it provides a set of methods (getItem, setItem, removeItem, clear, etc.) to interact with the stored data. You can find out more about local storage here.

In our use case, local storage will be useful in toggling dark and light mode and we begin by storing it inside a variable.

`let mode = localStorage.getItem("mode");`

We're creating a variable to hold our local storage value, ensuring we have a default when the page loads.

We are using let so that its value can be reassigned later in the code.

This 'mode' variable will also help us track the current mode, making it easy to switch between light and dark modes.

If you knew how local storage works before this moment, then the question pops up: why are we using getItem, not setItem? aren't we supposed to initialize it first?

Yes. Either way is right, but in our use case, the trick here is that we are using let mode = localStorage.getItem("mode") to retrieve the value of "mode" from local storage when the page loads.

Setting up our variables

For this project, we need four more variables, making the total 5.

Remember, mode was a variable itself.

  let toggleoff = document.querySelector("#toggleoff");
  let toggleon = document.querySelector("#toggleon");
  let herolarge = document.querySelector("#htx");
  let herosub = document.querySelector("#htxtwo");
  let mode = localStorage.getItem("mode");

Now when we need a function.

I assume you already have the basics of function covered, however, here is a link that explains functions in JavaScript.

Setting up our function.

_Note: For now, we don't have an event listener to listen to the click, and this is intentional.
_

Moving forward, we will create a function called updateMode and pass in a parameter of "mode".

'Mode' is the same name we gave to the first variable we created.

Copy and paste this code into your editor. I will explain each line now.

 function updateMode(mode) {
  if (mode === 'darkmode') {
    localStorage.setItem('mode', 'darkmode');
    toggle.style.display = 'none';
    toggleon.style.display = 'block';
    herolarge.style.color = "white";
    herosub.style.color = "white";
    document.body.classList.add("darkmode");
    document.body.classList.remove('lightmode');
  } else {
    localStorage.setItem('mode', 'lightmode');
    toggle.style.display = 'block';
    toggleon.style.display = 'none';
    herolarge.style.color = "#000039";
    herosub.style.color = "black";
    document.body.classList.remove("darkmode");
    document.body.classList.add('lightmode');
    console.log('light mode');
  }
}

Breaking down our Function.

First, we have a function with a parameter of mode.

This function is used to monitor and change the state of our toggle.

The 'mode' parameter corresponds to the name of our variable that gets the value of the local storage (the first variable we created) because we use the variable as an argument when calling the function.

What you need to understand here is that with the "mode" parameter, the function is aware of the current state stored in local storage.

Then, we have a condition:

if (mode === 'darkmode')

When we check if (mode === 'darkmode'), it means we are verifying whether our variable (mode), which is getting its value from local storage, is equal to 'darkmode'.

So what happens if it is equal to darkmode?

Remember, in the first instance we haven't explicitly set any local storage values yet, we used a getItem instead.

Now, Inside this condition, we'll be setting up our local storage for the first time:

 localStorage.setItem('mode', 'darkmode');

This sets our value to "darkmode".

Our function has a condition that if our mode is darkmode, then we set a local storage called 'darkmode'.

After that, we move to these lines:

toggle.style.display = 'none';
toggleon.style.display = 'block';

These are the variables that control our Font Awesome icons.

When it is dark mode, our toggle button or toggle icon activates and needs to be 'on'.

Let's take a step back to properly understand.

Note: We are trying to control the dark mode here.

By default, our toggle is 'off.'

It is 'off' because our dark mode is off.

The toggle controls our dark mode.

When we click the button, the dark mode comes 'on', and so does our button.

This works vice versa because when the toggle is off, then our dark mode also goes off.

Turning on the night mode means showing the Font Awesome icon that displays the toggle "on."

In essence, the objective is to set the default state of the button as 'OFF.' When clicked, it toggles to 'ON,' activating the night mode and displaying the corresponding Font Awesome icon for the 'ON' state

If that is clear then we move to the next two lines:

 document.body.classList.add("darkmode");
 document.body.classList.remove('lightmode');

If we refer back to our CSS, specifically lines 38-44, we have two classes: one sets the background color to light mode (white), and the other sets it to dark mode (ash).

.lightmode{
    background-color: white;
}

.darkmode{
    background:#1b1b1b;
}

On our CSS, we also have the body:

body{
    font-family:Montserrat;
    overflow-x: hidden;
    position: relative;
}

On the hero text and subtext, we have default colors(lines 49 and 54 specifically), this shows we can do it however we want to, provided there is a color.

 #htx {
        animation: fadeIn 1s ease-in-out 1.5s forwards;
        line-height:1.1em;
        color:#000039;
    }

    #htxtwo {
        animation: fadeIn 1s ease-in-out 2.5s forwards;
        color: black;
        margin-top:15px;
        font-weight:500;
    }

The JavaScript code adds the appropriate background color and text color based on the selected mode.

The first half of our updateMode condition checks if the mode set in our local storage is darkmode.

If our stored mode is set to darkmode, we do the following:

Save dark mode in the storage,
Switch the icon from 'off' to 'on'.
Make the page dark.
Remove any light styles.

The terms 'dark mode' and 'light mode' here correspond to the CSS classes we have defined. The function updates the styles and adds them to the body of our website based on the selected mode.

Note: darkmode and lightmode are not prefixed names. You can name them anything you choose.

 function updateMode(mode) {
  if (mode === 'darkmode') {
    localStorage.setItem('mode', 'darkmode');
    toggleoff.style.display = 'none';
    toggleon.style.display = 'block';
    document.body.classList.add("darkmode");
    herolarge.style.color = "white";
    herosub.style.color = "white";
    document.body.classList.remove('lightmode');
    console.log('dark mode');
  } else {
    localStorage.setItem('mode', 'lightmode');
    toggleoff.style.display = 'block';
    toggleon.style.display = 'none';
    herolarge.style.color = "#000039";
    herosub.style.color = "black";
    document.body.classList.remove("darkmode");
    document.body.classList.add('lightmode');
    console.log('light mode');
  }
}

For the else condition, we reverse everything.

else{ 
    localStorage.setItem('mode', 'lightmode');
    toggleoff.style.display = 'block';
    toggleon.style.display = 'none';
    herolarge.style.color = "#000039";
    herosub.style.color = "black";
    document.body.classList.remove("darkmode");
    document.body.classList.add('lightmode');
    console.log('light mode');
}

If the mode is not darkmode, then we do the opposite: show the 'off' icon, hide the 'on' icon, switch the page to light mode, and remove any darkmode styles.

Now our function is ready to go, but it's not done yet.

We need two event listeners that listen for a click event outside the function.

This will be the toggle on and toggle off event.

Without these, our well-written function won't do anything.

That listener calls the function.

toggleon.addEventListener('click', function () {
  updateMode('lightmode');
});

toggleoff.addEventListener('click', function () {
  updateMode('darkmode');
});

When we click on the toggleon, it triggers the updateMode function with a parameter of lightmode.

This implies that whenever we click on either the 'toggleon' or 'toggleoff' icon, we invoke the function to perform different actions.

and for the final piece of the puzzle:

if (mode === 'darkmode') {
  updateMode('darkmode');
} else if (mode === 'lightmode'){
  updateMode('lightmode');
} else {
  updateMode('lightmode');
}

If the local storage mode is 'darkmode,' update to dark mode.

If the mode is 'lightmode,' update to light mode.

The additional condition is our DEFAULT STATE, and it handles situations where no mode is stored in local storage, which often occurs on page load. In such cases, the default action is to set the mode to 'lightmode,' ensuring the page loads in light mode by default.

This code helps maintain the user's preferred mode across page loads.

CONCLUSION

Adding beauty to the user interface (UI) via interaction is crucial because users find it visually appealing. Also, it is a good trick to learn as it gives beginners a friendly approach to logic in JavaScript and DOM manipulation.

Thanks for stopping by! If you found this helpful, consider giving it a like, dropping a comment, and hitting that follow button.

Mastering CSS Custom Properties: The Senior Developer's Approach to CSS Custom Properties.

AlexDunia — Sun, 21 Jan 2024 20:54:42 +0000

Introduction

Working with CSS (Cascading Style Sheets) is a very important part of our application as it allows us to change the colors, fonts, and layouts of all our HTML elements.

It usually involves _Class selectors _ that Target elements with a specific class, ID Selectors that target elements with a specific ID, and Element Selectors that target specific HTML elements.

Note: I'll assume you already have basic knowledge of CSS before delving into this project.

Also, I made sure that the words colored blue on this article are links. You can click on it to learn more.

Now back to our work 👇 :

For our project, we will be making use of this code with Internal CSS.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>

    body {
      font-family: "Poppins", sans-serif;
      background-color: #e8d300;
      color: #333;
      margin: 20px;
    }

    h1 {
      color: white;
      text-align:center;
      padding-top:30px;
      font-size:80px;
      line-height:1.1em;
    }

    p {
      font-size: 25px;
      font-weight:600;
      text-align:center;
      color:rgb(53, 53, 53);
    }

    .custprop{
        color:rgb(61, 61, 61);
    }
  </style>
</head>
<body>

<h1>CSS <br/> <span class="custprop"> Custom Properties </span>
 </br/> Project</h1>
<p> If you have reached here, then you got it right</p>

</body>
</html>

If we copy and paste this into our code editor and then save it, we'll end up with a page that looks like this:

Notice I wrote "CSS CUSTOM PROPERTIES". Good! thats what we will be learning today. Let us start with a definition.

What are Css properties?

CSS properties are key-value pairs that define a specific styling applied to an HTML element.

Here is what I mean 👇

 p {
      font-size: 25px;
    }

In the example above, "font-size" is a property, and its value is set to "25px."

While this approach works, it has some limitations.

For instance,

If there is another font-size somewhere in the application and it's consistent with 25px, when we want to make changes to one, we have to find the other to make changes all over again. If there are 10 of these, we have to make changes in all 10 places it appears on the website. We cannot effortlessly update it across entire codebases.
We cannot create User-defined variable names. We are limited to built-in properties.

I know you have seen something that may sound strange to you "User defined variables". We will get to that shortly.

So it has been established that doing iot the traditional way comes with limitations. Because of this, in cases where our websites have a lot of content that will also mean a lot of styling, we can employ a better approach called CSS Custom properties or Custom variables.

The term "Custom" is used because these properties are defined by the developer rather than being built-in or predefined by the browser.

CSS custom properties, or CSS variables, are user-defined values in CSS that hold specific values.

Take note of these key statements in its definition:

User-defined values.
Custom variables.

Let's try to progressively break them down.

User-defined Values

In our previous code, font-size cannot be altered by the developer, because it is built-in. If it is altered, then the code won't run. 👇

p {
      myfontsize: 25px;
      front-size:10px;
      fontsize:10px;
      front-size:10px;
    }

None of the codes defined above will run.

What Custom Properties allows us to do is to break these rules.

With Custom properties, we can give it any name we want. If a color is yellow, we can name the property Spongebob and give it a yellow color, and it will run.

Giving it any name we want is the feature that makes it a User-defined value.

If the user (you and I as developers) can customise it to any type of name we want, then it is a user-defined value.

CUSTOMISED VARIABLE

Surprisingly, that same control you and I have is also what makes it a Customised Variable.

We store information inside, and in the context of programming, a variable is a way to store and use to data in a program.

The custom properties are the user-defined variables.

If that has been understood, then we need to now understand CSS pseudo-class selector.

What is a Pseudo-Class Selector?

A pseudo-class is a keyword added to a selector to indicate a special state or condition of the selected elements.

For instance, we have the :hover, :roots.

If this is gibberish to you, then you must read this to know more about the pseudo-class.

In our case, we'll be making use of the :root.

The :root is the highest-level parent element in an HTML document. In simple terms, it is the styling with the most authority.

:root{
background-color:red;
}

When you apply the code above, it overshadows the rest of the stying because it the highest level parent element.

html {
  background-color: red;
  color: white;
}

body{
background-color:red;

:root{
background-color:red;
}

In the code above, The styles defined for :root would apply globally to the entire HTML document. Yes, it is more powerful and global than the html and the body selector.

How can the Custom Variables be used?

To declare a CSS custom variable, use the -- prefix followed by your preferred name for the variable.

 :root{
        --yellow-background:#e8d300;
        --dark-color:#333;
        --white-color:white;
        --heading-font-size:80px;
        --paragraph-font-size:25px;
    }

Here, -- is our prefix, and --yellow-background --dark-color --white-color --heading-font --paragraph-font-size are our custom variables/properties defined within the*:root* pseudo-class, which represents the highest-level parent element in the document.

If you noticed all the names of the properties are user-defined.

We can name it anything we want and use them globally.

The only condition in which we are allowed to break the rule of built-in or predefined by the browser is when we use the -- prefix followed by our preferred name for the variable.

Note: Just to see if it works, you can name it whatever you wish.

Now that we have declared it, how do we use it?

 :root{
        --yellow-background:#e8d300;
        --dark-color:#333;
        --white-color:white;
        --heading-font-size:80px;
        --paragraph-font-size:25px;
    }

    body {
      font-family: "Poppins", sans-serif;
      background-color: var(--yellow-background);
      color: var(--dark-color);
    }

    h1 {
      color: var(--white-color);
      text-align:center;
      padding-top:50px;
      font-size:var(--heading-font-size);
      line-height:1.1em;
    }

    p {
      font-size: var(--paragraph-font-size);
      font-weight:600;
      text-align:center;
      color:var(--dark-color);
    }

    .custprop{
        color:var(--dark-color);
    }

If you notice, anytime we want to use what we declared in the : root, we have to include a var().

The var() function in CSS is used to insert the value of a custom property/variable wherever it is called. That is exactly what we did above.

With this, our styling should work on your browser, and you should be getting the same result as the original code. 👇

CSS custom properties/variables make it simple to change values globally. If we want to change the heading font size, we only need to update it in one place:

:root{
        --heading-font-size:40px;
    }

Notice it was 80px earlier.

With that single adjustment, it changes to 👇

If we had more classes with more headings, we only need to change the --heading -font-size value once and it updates the rest of the application.

I hope this is clear.

Now we can effortlessly update our website across our entire codebases, Provide enhanced readability through user-defined variable names, and ensure reusable style components.

Understanding the Basics: Data Engineering, Data Analytics, and Data Science.

AlexDunia — Thu, 04 Jan 2024 23:52:16 +0000

Artificial Intelligence has had more buzz than ever since Open AI released chat GTP to the public, Alexander Wang, Ceo of Scale AI called it a “Four year overnight success”. This gives an overview of the difficulties involved in building it.

ChatGPT and other AI tools reveal a fundamental truth: they heavily rely on data. This reliance explains the sudden popularity of fields such as data engineering, data science, and data analysis. It can be said that the influence and popularity of ChatGPT has extended to these domains.

However, this newfound fame has raised questions about the roles of individuals in related fields. While they all contribute to world-class technologies through their work with data, understanding their individual roles is crucial—especially for people with the desire to get into the fields. This article aims to discuss these roles in concise terms.

Firstly, let's define data—it's the collection of facts and statistics used for reference or analysis. Not clear enough? Well, let's simplify: Data is the collection of activities, engagements, or actions taken and studied to aid future actions.

In the business realm, data is a powerful tool. The top players in business recognize that delving deep into data gives them a competitive edge. This awareness further drives the demand for roles we'll explore in this article. Now, let's dive into understanding these crucial roles.

Data engineering is a field that focuses on designing and building data infrastructure. It involves building and optimizing systems for data analysis.

If this does not make sense to you, then think of it like this: before anything can be done with data, the data actually needs to exist, and it needs to exist in a way that can be used in the most expandable way possible. Data engineers are responsible for building the foundational infrastructure of data.

Consider them the architects of data—after constructing the data pipelines, they ensure it is collected, stored, and positioned for future analysis.

They use tools like SQL (for databases like MySQL, PostgreSQL) and NoSQL databases (like MongoDB, Cassandra) to get and work with data. They also use tools like Hadoop, Oracle Data Integrator, and IBM DataStage to organize, clean, and change data. These tools help them manage and change data for different purposes. The Data engineer ensures that data is available in a structured and usable format for analysis.

Data engineering is about creating data systems, which can include the development of software systems and applications. Therefore, if you're a software engineer with a good background and strong programming skills, you're in a great position to move into data engineering roles.

Now, let's shift our focus. We've talked about data engineering, the foundation builders.

The infrastructure is established, and data is at our fingertips. This is where data analysts step into the scene.

From the infrastructure built and the data obtained, data analysts can then take the reins by building dashboards, understandable reports, and visuals to provide insights for informed decision-making.

Notice the distinction now? While the former builds the foundation, the latter builds on the foundation.

Once the data infrastructure is in place, the data analysts work with the available data to generate reports, visualizations, and meaningful conclusions. They clean and organize data, analyze it to find important patterns, and explore the data to understand its main characteristics. Afterward, they create easy-to-understand reports and dashboards to help with future work and decision-making.

Data engineers set up the data infrastructure, and data analysts use it to create reports and visualizations. Engineers build the foundation, and analysts build on it by cleaning and organizing data, finding patterns, and creating easy-to-understand reports and dashboards for decision-making.

Data analysts employ various tools like Excel for data cleaning, filtering, and charting. They also use advanced visualization tools such as Power BI and Tableau to present data in a clear manner accessible to everyone. This is important because data analysts often engage in soft skills, including presentation in fields like sales, marketing, and finance, requiring effective communication and ensuring understanding to both technical and non-technical audiences.

If all this doesn't make sense, then let me tell you a story...

_**Steve Nutjobs sells fashion items online. He's been doing it for a year now and has good data on what he sold. Enter his cousin, Bill, who knows a thing or two about being a data analyst. While helping out, Bill dives into the year's data using tools like Excel.

As he works, Bill discovers that certain products sell better during specific times or with promotions on social media. Armed with this info, Bill plans targeted promotions and tweaks Steve's inventory to match what customers like. He also analyzes customer feedback and reviews, learning what features and styles shoppers prefer.

Using these insights, Bill brings in more of the popular products, making customers happier and boosting sales. Steve's online store thrives, all thanks to Bill's data analytics skills.

Bill has just played his role as a Data Analyst in Steve's eCommerce venture. I hope this story has given you a better understanding, especially in the context of differentiating between the role of a Data Engineer. Although, he would have a more rigorous experience executing his role in bigger organizations, but you get this gist.**_

Beyond these fundamental tasks, Data Analysts delve into more sophisticated and analytical roles. They use languages like Python and R, write database queries—essentially, guiding instructions for data—and apply math concepts like statistics and probability. Understanding algebra and calculus helps them stand out.

So, data analysts do all these? Shouldn’t this be everything? What else could possibly exist? I'm glad you have these in mind. This is where the data scientist comes in.

While data analysts focus on organizing and presenting data, data scientists take it a step further. They delve deep into data mines, utilizing advanced algorithms to shape the future of data. Data scientists develop models that predict outcomes and optimize decision-making processes.

Take note of a keyword here: 'Model.' This is new, and we haven't seen this before.

So, what then is a model?

A 'Model' refers to a mathematical representation or framework created using algorithms and trained on data. The purpose of a model is to make predictions or decisions based on new, unseen data.

Now, let's utilize the data we already have, we can term them as historical data (training data). We can teach the model patterns and relationships within the data. Why is this useful? Simply because the model learns from this data to make predictions or classifications when exposed to new, unseen data. This officially brings into light the concept of automation and less human input, although in a preliminary way.

Once trained, the model can be applied to new data to make predictions, classifications, or decisions. And that is what differentiates the Data Analyst from the Data Scientist. Data Science is the extension of Data Analytics. It revolves around more math (a computational degree would be more plausible for job titles around Data Science, although not mandatory if you have enough fieldwork), more analytical thinking, and more programming.

We can now say that Data science extends beyond descriptive analytics, incorporating more advanced mathematical concepts, analytical thinking, and programming skills.

The integration of data science with data analytics amplifies the impact of insights gained from data.

A data scientist utilizes a range of tools and skills, including Python, Power BI, machine learning algorithms, SQL, and mathematical concepts such as statistics and probability.

Once a model is trained, it can be then deployed in various real-world scenarios to make predictions, classifications, or decisions on their own. Yes, now we are talking about Artificial Intelligence. I'm sure you have heard about this already. :)

Data scientists may come from fields such as computer science, statistics, physics, and engineering as some mathematical concepts are commonly used in data science (e.g., linear algebra, calculus) and programming languages (e.g., Python, R).

It's essential to note that, theoretically, the roles of a data scientist, engineer, and analyst differ. In practice, though, these roles often overlap, with blurry lines between them in many organizations, Team members may find themselves wearing multiple hats.

This situation is particularly common in small companies or startups aiming to minimize spending to meet their goals. At this stage, these organizations carefully manage their resources, leading to a blending of roles. So, Despite officially designating the position as a 'Data Scientist,' in practice, it extends to encompass the day-to-day or occasional implementation of both data engineers and analysts.

In Big companies, however, the division of labor tends to be more specialized, and roles may be more clearly defined, that is, the data scientist will do the job of the Data Scientist, the Data Analyst will do the job of the analyst, etc. This is most likely because, unlike a startup, their number one priority may not be to manage their resources and use fewer people.

Now you know the difference between a Data Engineer, Data Analyst, and Data Scientist, And if there's any part you do not fully comprehend, you can always go back to read as it has been written in an easy and digestible way.

And for the people wanting to get into any of these spaces, its very important to consider the things that interest you.

If you are good at advanced mathematical concepts, analytical thinking, and programming, then pursuing a career in data science is the right move for you.

If you prefer storytelling, analyzing businesses, or Maths (Average level but the higher the better), Data Analytics is the right choice for you.

And lastly, if you enjoy building infrastructures or have a background in software engineering already, then pushing it further in a way that compliments your already existing skills is you opting for Data Engineering.

Ultimately, your success depends on picking what works for you and becoming a consistent doer.

If you like this content, kindly give it a like and share, it would go a long way :).

See you soon.

Good luck :)