DEV Community: Matt Adil

Mastering Async/Await: Simplifying JavaScript's Async Operations

Matt Adil — Tue, 05 Mar 2024 12:32:43 +0000

Introduction to Async/Await

Dealing with asynchronous operations in web development can be quite challenging. However, The introduction of async/await has revolutionized our approach to handling asynchronous code. With async/await, we no longer need to use promise chains and escape the trap of callback hell. In contrast, it simplifies asynchronous tasks to feel as straightforward as synchronous ones.

Why Async/Await?

Before async/await, developers relied on promises or callbacks to handle asynchronous operations. Here's an example of using promises to make an API request:

function fetchData() {
  fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
}
fetchData();

While async/await doesn't offer obvious advantages over promises and callbacks in handling smaller asynchronous tasks, promises and Callbacks would result in a Promise chaining or callback hell as task difficulty increases

The 'async' Keyword

The async keyword is the beginning of converting a normal function into an asynchronous function. Once the keyword async is added before the function, our function can include one or more await statements and implicitly return a promise. This key feature sets the stage for using await within a function,allowing our code to pause execution until a promise is settled(whether resolved or rejected), without blocking the entire script.

Converting a Regular Function to Asynchronous with async keyword:

async function fetchData(){
  // This function now is a promise
}

Note: The async keyword can be used to declare either a regular function or an arrow function as asynchronous. This versatility allows developers to choose the function syntax that best suits their coding style and project requirements.

The 'await' Keyword

The await keyword plays a crucial role in asynchronous functions. Placed within the body of the function, its purpose is to pause the execution until the promise is settled(whether resolved or rejected). The await keyword gives our asynchronous function a synchronous-like behavior: waiting for a response from the API, the result of a database operation, or any asynchronous task does not freeze the browser.

Simplified Error Handling with try/catch

Async/await offers a more intuitive approach to error handling using try/catch blocks. This approach provides a familiar and straightforward method for managing errors during asynchronous operations. We no longer need to add a catch() after every Promise as before. Instead, we encapsulate the await that may cause errors in the try block, and then use a single catch block to manage all potential errors.

Let's revisit the fetchData function, now rewritten using async/await:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log('Data received:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}
fetchData();

Conclusion

To summarize, async/await transforms asynchronous code in JavaScript, offering a cleaner, more readable, and easier-to-maintain codebase. By embracing these features, developers can streamline their code and enhance overall code quality. It's important to employ async/await effectively and prioritize error handling to ensure robust and user-friendly applications.

Unleash the Power of CSS :has() Selector: A Game-Changer for Styling Your Web Content

Matt Adil — Sun, 03 Mar 2024 12:55:07 +0000

In the ever-evolving landscape of web development, staying ahead of the curve is crucial. Enter the CSS :has() pseudo-class, a revolutionary addition to the developer's toolkit, offering unprecedented control over element selection and styling within the Document Object Model (DOM). Unlike its predecessors, which focused primarily on direct hierarchy or attributes, :has() empowers developers to style elements based on the presence of specific descendants, children, or subsequent siblings. Let's delve into the transformative potential of this remarkable feature.

Understanding the :has() Pseudo-class

Before we dive into practical examples, let's grasp the concept visually. Imagine the DOM as a tree, with elements nested like branches. Traditional CSS selectors allow us to traverse down this tree, selecting child elements based on their parent's characteristics. However, the :has() selector flips the script, enabling us to select parent elements based on the presence or attributes of their descendants. This opens up a world of possibilities for dynamic styling and interaction.

What :has() Unlocks: New Frontiers in CSS Styling

Elevate Design: Styling Parent Elements via Child Presence

Consider a scenario where you have a list of articles. With :has(), you can dynamically style the parent <div> containing each article based on whether it contains an image. Previously achievable only through JavaScript, this feature simplifies the process and enhances user experience.

<!-- html -->
<div class="article-container">
  <h2>Article Title 1</h2>
  <p>Article content...</p>
  <img src="article-image.jpg" alt="Article Image">
</div>

<div class="article-container">
  <h2>Article Title 2</h2>
  <p>Article content...</p>
</div>

/* css */
/* Style the parent container if it contains an image */
.article-container:has(img) {
  background-color: lightblue;
}

/* Style the parent container if it does not contain an image */
.article-container:not(:has(img)) {
  background-color: lightgray;
}

Precision Styling: Targeting Elements by Content Criteria

In another scenario, let's say you have a blog and want to style article titles based on keywords. Using :has(), you can achieve this directly in CSS, enhancing the visual presentation of your content.

<!-- html -->
<div class="article">
  <h2 class="title">Introduction to CSS Grid</h2>
  <p>Article content...</p>
</div>

<div class="article">
  <h2 class="title">10 Tips for Responsive Web Design</h2>
  <p>Article content...</p>
</div>

<div class="article">
  <h2 class="title">Mastering Flexbox for Layouts</h2>
  <p>Article content...</p>
</div>

/* css */
/* Style the title of articles containing specific keywords */
.article:has(.title:contains("CSS Grid")) .title {
  color: #ff5733; /* Orange color for emphasis */
}

Refined Design: Tailoring Styles to Intricate Element Relationships

In a social media scenario, imagine you want to differentiate comment authors based on replies. With :has(), this becomes straightforward, offering visual emphasis to encourage further interaction.

<!-- html -->
<div class="comment">
  <p class="author">John Doe</p>
  <p class="content">This is the main comment.</p>
</div>

<div class="comment">
  <p class="author">Jane Smith</p>
  <p class="content">This is another comment.</p>
  <div class="replies">
    <div class="reply">
      <p class="author">Alex Johnson</p>
      <p class="content">Reply to Jane's comment.</p>
    </div>
    <div class="reply">
      <p class="author">Emily Brown</p>
      <p class="content">Another reply to Jane's comment.</p>
    </div>
  </div>
</div>

/* css */
/* Style the author of comments with replies */
.comment:has(.replies) .author {
  font-weight: bold; /* Bold font weight for authors with replies */
}

Harnessing the Power of :has()

The possibilities with :has() are limitless. Whether enhancing navigation menus, elevating form interactivity, or crafting dynamic grids and galleries, this pseudo-class empowers developers to create immersive web experiences solely through CSS. Embrace its versatility, experiment with its capabilities, and unlock a new realm of creativity in web development.

Accessible Web Design: Ensuring Inclusivity in Front-End Development

Matt Adil — Mon, 26 Feb 2024 09:35:47 +0000

Introduction

Accessibility is a core principle of modern web design, ensuring that websites are usable by all individuals, regardless of their abilities. In this comprehensive guide, we'll explore creating accessible web experiences by prioritizing high color contrast, providing captions and transcripts for multimedia content, embracing responsive design and mobile accessibility, and continuously improving accessibility. By incorporating these elements, we can ensure that our websites are inclusive and welcoming to all users.

Semantic HTML

One of the fundamental principles of accessible web design is using semantic HTML markup. Semantic elements like '<header>', '<nav>', '<main>', '<footer>', and '<section>' provide meaning and structure to the content, making it easier for screen readers and other assistive technologies to interpret and navigate the page.
Example of Semantic HTML:

<header>
  <h1>Accessible Web Design</h1>
</header>
<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
<main>
  <section id="about">
    <h2>About Us</h2>
    <p>...</p>
  </section>
  <!-- More sections -->
</main>
<footer>
  <p>&copy; Matt Adil. All rights reserved.</p>
</footer>

High Color Contrast

High color contrast is essential for ensuring that text and other content are legible and distinguishable, especially for users with visual impairments or color vision deficiencies. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
Example of High Contrast CSS:

/* Example for regular text */
body {
  color: #333333; /* Dark gray text color */
  background-color: #ffffff; /* White background color */
}

/* Example for headings */
h1, h2, h3, h4, h5, h6 {
  color: #000000; /* Black text color */
}

/* Example for links */
a {
  color: #007bff; /* Blue link color */
}

/* Example for buttons */
button {
  color: #ffffff; /* White text color */
  background-color: #007bff; /* Blue background color */
}

/* Example for alert messages */
.alert {
  color: #ffffff; /* White text color */
  background-color: #dc3545; /* Red background color */
}

Providing Captions and Transcripts

Captions and transcripts are essential for making audio and video content accessible to individuals who are deaf or hard of hearing, as well as those who prefer or require text-based content. Captions display spoken dialogue and relevant audio information, while transcripts provide a textual version of the entire audio or video content.
Example of Audio Transcription:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <!-- Captions -->
  <track kind="captions" label="English captions" src="captions.vtt" srclang="en">
</video>

Transcribing Audio Content

For audio-only content, providing a text transcript allows users to access the information without relying on audio playback. Transcripts should include all spoken words, as well as descriptions of any non-verbal sounds or actions that are relevant to understanding the content.
Example of Video Captioning:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<!-- Transcript -->
<p>Transcript: In this audio clip, we discuss the importance of accessibility in web design and explore strategies for creating inclusive web experiences.</p>

Responsive Design and Mobile Accessibility

Responsive design is essential for ensuring that websites adapt fluidly to different screen sizes, including mobile devices. By using CSS media queries, developers can apply specific styles based on the device's screen width, height, and orientation. This allows for optimized layouts and enhanced usability on mobile devices.
Example of Responsive Design with CSS Media Queries:

/* Base styles for desktop */
.container {
  width: 960px;
  margin: 0 auto;
}

/* Responsive styles for tablets */
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 20px;
  }
}

/* Responsive styles for mobile devices */
@media screen and (max-width: 480px) {
  .container {
    padding: 0 10px;
  }
}

In this example, the .container class adjusts its width and padding using media queries to provide an optimal layout for different screen sizes. The website's design is fluid, ensuring that content remains accessible and readable across various devices, including smartphones and tablets. Additionally, by considering mobile accessibility, developers can further improve the user experience for individuals with disabilities or limitations when interacting with the website on mobile devices.

Continuous Accessibility Improvement

Accessibility is an ongoing process that requires continuous evaluation and improvement. By regularly reviewing and addressing accessibility issues, developers can ensure that their websites remain inclusive and accessible to users of all abilities.

Conclusion

Incorporating high color contrast, providing captions and transcripts for multimedia content, embracing responsive design and mobile accessibility, and continuously improving accessibility are essential steps in creating inclusive web experiences. By prioritizing accessibility, we can ensure that our websites are usable and welcoming to users of all abilities, ultimately making the web a more inclusive space for everyone.

Building Interactive Skill Progress Bars with HTML, CSS, and JavaScript

Matt Adil — Fri, 23 Feb 2024 09:45:31 +0000

Introduction:

Skill progress bars are a common feature in portfolios and resumes, allowing users to visually showcase their expertise in various areas. In this article, we'll explore how to create dynamic and interactive skill progress bars using HTML, CSS, and JavaScript.

HTML Structure:

We begin by defining the HTML structure for our skill progress bars. We use semantic HTML elements such as '<section>', '<h3>', '<div>', and '<p>' to organize the content. Each skill is represented by a container with a name, a progress bar, and a percentage indicator.



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">

    <link href="https://fonts.googleapis.com/css2?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&amp;display=swap" rel="stylesheet"> <!-- importing "Poppins" font family from google font -->

    <title>Skill Bar</title>

</head>

<body>

    <section class="skills" id="skills">

        <h3 class="skills-header">My Skills</h3>

        <div class="skills-container">

            <div class="skill-container">

                <p>HTML</p>

                <div class="percentage html-percentage">90%</div>

                <div class="bar">

                    <span class="html"></span>

                </div>

            </div>

        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skill-container"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;p&gt;</span>CSS<span class="nt">&lt;/p&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"percentage css-percentage"</span><span class="nt">&gt;</span>90%<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bar"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"css"</span><span class="nt">&gt;&lt;/span&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>

        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skill-container"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;p&gt;</span>JavaScript<span class="nt">&lt;/p&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"percentage javascript-percentage"</span><span class="nt">&gt;</span>80%<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bar"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"javascript"</span><span class="nt">&gt;&lt;/span&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>

        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skill-container"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;p&gt;</span>React.JS<span class="nt">&lt;/p&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"percentage react-percentage"</span><span class="nt">&gt;</span>70%<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bar"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"react"</span><span class="nt">&gt;&lt;/span&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>

        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skill-container"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;p&gt;</span>Node.JS<span class="nt">&lt;/p&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"percentage node-percentage"</span><span class="nt">&gt;</span>50%<span class="nt">&lt;/div&gt;</span>
            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bar"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"node"</span><span class="nt">&gt;&lt;/span&gt;</span>
            <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"./script.js"</span><span class="nt">&gt;&lt;/script&gt;</span>



</body>

</html>

CSS Styling:

Next, we style our skill progress bars using CSS. We define styles for the overall layout, skill containers, progress bars, and percentage indicators. We also incorporate animations to enhance the visual appeal of the bars.



*,

::before,

::after{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

body{

    width:100%;

    height:100vh;

    background:#111222 ;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding:20px;

}

.skills{

    width: 600px;

    min-width:300px;

    max-width: 100%;

    color:#fff;

    display:flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.skills-header{

    font-family: "Poppins", sans-serif;

    font-size: 30px;

    width:100%;

    text-align: center;

    margin-bottom: 10px;

    box-sizing: border-box;

}

.skills-container{

    max-width: 100%;

    width:100%; 

    display:flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(20px);

    border-radius: 10px;

    padding:20px;

    margin:0;

    box-sizing: border-box;

}

.skill-container{

    width:100%;

    margin:10px 0;

    padding: 10px 0;

    position:relative;

 }

.skill-container p{

    margin: 5px;

    font-family: "Poppins", sans-serif;

    font-size: 16px;

 }

.bar{

    width:100%;

    background: #475472;

    display:block;

    height: 20px;

    border:none;

    border-radius: 100vw;

    overflow: hidden;

    transition: all .3s cubic-bezier(.25, 8, .25, 1);

 }

.bar span{

    height:20px;

    float: left;

    background: #5271ff;

    border:none;

    border-radius: 100vw;

 }

/* adding animation to skill bar */

.html.animate, .css.animate{

    width: 90%;

    animation: html_css 3s;

 }

.javascript.animate{

    width:80%;

    animation: javascript 3s;

 }

.react.animate{

    width:70%;

    animation: react 3s;

 }

.node.animate{

    width:50%;

    animation: node 3s;

 }

@keyframes html_css{

    0%{

        width:0%

    };

<span class="err">100</span><span class="o">%</span><span class="p">{</span>
    <span class="nl">width</span><span class="p">:</span><span class="m">90%</span>
<span class="p">}</span>



}

@keyframes javascript{

    0%{

        width:0%

    };

<span class="err">100</span><span class="o">%</span><span class="p">{</span>
    <span class="nl">width</span><span class="p">:</span><span class="m">80%</span>
<span class="p">}</span>



}

@keyframes react{

    0%{

        width:0%

    };

<span class="err">100</span><span class="o">%</span><span class="p">{</span>
    <span class="nl">width</span><span class="p">:</span><span class="m">70%</span>
<span class="p">}</span>



}

@keyframes node{

    0%{

        width:0%

    };

<span class="err">100</span><span class="o">%</span><span class="p">{</span>
    <span class="nl">width</span><span class="p">:</span><span class="m">50%</span>
<span class="p">}</span>



}

.percentage{

    content: "";

    position: absolute;

    top:12px;

    width:25px;

    height:20px;

    background: #5271ff;

    display:flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    border-radius: 2px;

    z-index: 10;

    transition: all .3s ease-in-out;

 }

.percentage::after{

    content: "";

    position: absolute;

    top:15px;

    left:50%;

    transform: translateX(-50%) rotate(45deg);

    margin: auto;

    width:10px;

    height:10px;

    background: #5271ff;

    z-index:-1;

 }

/* adding animation to .percentage */

.html-percentage.animate,

 .css-percentage.animate{

    left:90%;

    animation: html_css_percentage 3s;

 }

.javascript-percentage.animate{

    left:80%;

    animation: javascript_percentage 3s;

 }

.react-percentage.animate{

    left:70%;

    animation: react_percentage 3s;

 }

.node-percentage.animate{

    left:70%;

    animation: react_percentage 3s;

 }

@keyframes html_css_percentage{

    0%{

        left:0

    };

    100%{

        left:90%;

    }

 }

@keyframes javascript_percentage{

    0%{

        left:0

    };

    100%{

        left:80%;

    }

 }

@keyframes react_percentage{

    0%{

        left:0

    };

    100%{

        left:70%;

    }

 }

@keyframes node_percentage{

    0%{

        left:0

    };

    100%{

        left:50%;

    }

 }

JavaScript Interaction:

To make our skill progress bars interactive, we use JavaScript. We employ the Intersection Observer API to trigger animations when the bars come into view. Additionally, we dynamically calculate and set the position of the percentage indicators based on the width of the bars.



const observer = new IntersectionObserver(entries => {

    entries.forEach(entry => {

        spans.forEach((span, index) => {

            const percentage = percentages[index];

            if (entry.isIntersecting) {

                span.classList.add('animate');

                percentage.classList.add('animate');

            } else {

                span.classList.remove('animate');

                percentage.classList.remove('animate');

            }

        });

    });

});

const skillContainer = document.querySelector('.skills-container');

const spans = document.querySelectorAll('.bar span');

const percentages = document.querySelectorAll('.percentage');

observer.observe(skillContainer);

function updatePercentagePositions() {

    const barWidth = document.querySelector('.bar').clientWidth;

    percentages.forEach(percentage => {

        const widthPercentage = parseFloat(percentage.textContent) / 100;

        percentage.style.left = </span><span class="p">${</span><span class="nx">barWidth</span> <span class="o">*</span> <span class="nx">widthPercentage</span> <span class="o">-</span> <span class="mf">12.5</span><span class="p">}</span><span class="s2">px;

    });

}

updatePercentagePositions(); // Call initially

Conclusion:

In this tutorial, we've learned how to create interactive skill progress bars using HTML, CSS, and JavaScript. By combining these technologies, we can build visually appealing and engaging elements for showcasing our skills on websites and portfolios.

Check out the live demo and code:

CodePen: Link to CodePen

GitHub Repo: Link to GitHub Repo

Unlocking Interactivity: Crafting a Hamburger Menu with HTML, CSS, and JavaScript

Matt Adil — Thu, 22 Feb 2024 08:09:57 +0000

In the world of web development, interactivity is key to engaging users and enhancing navigation experiences. One popular element that adds both functionality and visual appeal to websites is the hamburger menu. In this article, we'll delve into the process of creating a dynamic hamburger menu from scratch using HTML, CSS, and JavaScript.

The Ingredients: HTML Structure

Our journey begins with the foundational structure of our hamburger menu. We start by setting up a basic HTML document and defining the essential components:



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">

    <title>Hamburger Menu</title>

</head>

<body>

    <div class="hamburger_menu">

        <div class="hamburger_bar"></div>

    </div>

    <script src="./script.js"></script>

</body>

</html>

The Flavors: Adding Style with CSS

Next, we infuse our hamburger menu with style and personality using CSS. Here's how we spice things up visually:



*,

::before,

::after{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

body{

    width:100%;

    height:100vh;

    background:#475472 ;

    position: relative;

}

.hamburger_menu{

    width:40px;

    height:30px;

    position: absolute;

    top:50%;

    left: 50%;

    transform: translate(-50%, -50%);

    cursor: pointer;

}

.hamburger_bar{

    height:5px;

    width:100%;

    background: #fff;

    border-radius: 100vh;

    position: absolute;

    transition: all .3s ease-in-out;

}

.hamburger_bar::before{

    content: "";

    width:100%;

    height:5px;

    background: #fff;

    border-radius: 100vh;

    position: absolute;

    top:-8px;

    transition: all .3s ease-in-out;

}

.hamburger_bar::after{

    content: "";

    width:100%;

    height:5px;

    background: #fff;

    border-radius: 100vh;

    position: absolute;

    bottom: -8px;

    transition: all .3s ease-in-out;

}

/* Animation for the hamburger menu */

.open .hamburger_bar {

    background: transparent;

}

.open .hamburger_bar::before {

    transform: rotate(-45deg);

    top: 0;

}

.open .hamburger_bar::after {

    transform: rotate(45deg);

    bottom: 0;

}

The Magic Touch: Adding Behavior with JavaScript

Finally, we bring our hamburger menu to life by adding interactivity with JavaScript. With a sprinkle of JavaScript magic, our menu responds to user clicks:



const hamburgerMenu = document.querySelector('.hamburger_menu')

hamburgerMenu.addEventListener('click', (e) => {

    e.currentTarget.classList.toggle('open')

    console.log(e.target.classList)

})

Conclusion

Voila! With a blend of HTML, CSS, and JavaScript, we've whipped up a delightful hamburger menu that's both stylish and functional. Experiment with different flavors, animations, and interactions to create a menu that suits your website's taste. Happy coding!

Check out the live demo and code:

CodePen: Link to CodePen
GitHub Repo: Link to GitHub Repo

Useful CSS Shorthands

Matt Adil — Tue, 20 Feb 2024 07:52:01 +0000

Introduction

In the world of web development, CSS shorthands are powerful tools that allow developers to write cleaner, more concise code without sacrificing functionality. Understanding and mastering CSS shorthands can greatly improve your workflow and efficiency as a front-end developer. In this article, we'll explore various CSS shorthands with examples and code snippets to help you harness their full potential.

1. Font Shorthand:

Original:

p{
  font-size: 16px;
  font-family: Arial, sans-serif;
  font-style: italic;
  font-weight: bold;
  line-height: 1.5;
  font-variant: small-caps;
}

Shorthand:

p {
  font: italic small-caps bold 16px/1.5 Arial, sans-serif;
}

2. Margin and Padding Shorthands:

Original:

.box{
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;

  padding-top: 15px;
  padding-right: 25px;
  padding-bottom: 15px;
  padding-left: 25px;
}

Shorthand:

.box {
  margin: 10px 20px 30px 40px; /* top, right, bottom, left */
  padding: 15px 25px; /* top/bottom, right/left */
}

3. Background Shorthand:

Original:

.container{
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #f0f0f0;
}

Shorthand:

.container {
  background: url('background.jpg') no-repeat center/cover #f0f0f0;
}

4. Border Shorthand:

Original:

.element{
  border-width: 2px;
  border-style: solid;
  border-color: #000;
}

Shorthand:

.element {
  border: 2px solid #000;
}

5. Animation Shorthand:

Original:

.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

Shorthand:

.box {
  animation: slide 2s ease-in-out infinite alternate;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

Conclusion:

Mastering CSS shorthands is essential for any front-end developer looking to streamline their code and improve productivity. By leveraging these powerful shortcuts, you can write cleaner, more efficient CSS while still achieving the desired visual effects. Experiment with different shorthands and incorporate them into your workflow to become a more proficient web developer.

Additional Resources:

MDN Web Docs: CSS Shorthand Properties

Building a Stylish Footer Using HTML and CSS

Matt Adil — Mon, 19 Feb 2024 06:59:49 +0000

Footers are an essential component of any website, providing important information and navigation links to users. In this tutorial, we'll explore how to create a modern and visually appealing footer using only HTML and CSS.

HTML Structure

Let's begin by understanding the HTML structure of our footer. We'll use semantic HTML tags to organize our content effectively. Here's a simplified version of our HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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=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">
    <link rel="stylesheet" href="./styles.css">
    <script src="https://unpkg.com/@phosphor-icons/web"></script>
    <title>Footer</title>
</head>
<body>
    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="footer-col">
                    <h4>Company</h4>
                    <ul>
                        <li><a href = '#'>about us</a></li>
                        <li><a href = '#'>our services</a></li>
                        <li><a href = '#'>privacy policy</a></li>
                        <li><a href = '#'>affiliate program</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Get Help</h4>
                    <ul>
                        <li><a href = '#'>FAQ</a></li>
                        <li><a href = '#'>shipping</a></li>
                        <li><a href = '#'>returns</a></li>
                        <li><a href = '#'>order status</a></li>
                        <li><a href = '#'>payment options</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Online Shop</h4>
                    <ul>
                        <li><a href = '#'>dresses</a></li>
                        <li><a href = '#'>jumpers & hoodies</a></li>
                        <li><a href = '#'>trousers</a></li>
                        <li><a href = '#'>sports & active wear</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Follow Us</h4>
                    <div class='social-icons'>
                        <a href = '#'><i class="ph ph-instagram-logo" style="font-size: 20px"></i></a>
                        <a href = '#'><i class="ph ph-pinterest-logo" style="font-size: 20px"></i></a>
                        <a href = '#'><i class="ph ph-linkedin-logo" style="font-size: 20px"></i></a>
                        <a href = '#'><i class="ph ph-youtube-logo" style="font-size: 20px"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS Styling
Now, let's add some CSS styles to make our footer visually appealing. We'll focus on creating a clean layout, applying colors, and adding some spacing. Here's the CSS code:

*,
::before,
::after{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: #24262b;
    font-family: "Poppins", sans-serif;
    padding:0;
    margin:0;
}

.footer{
    padding: 70px 0;
}

.container{
    max-width: 1170px;
    margin: 50px auto 0;
}

.row{
    width:100%;
    display:flex;
    flex-wrap: wrap;
}

.footer-col{
    width:25%;
    padding: 0 15px;
}

.footer-col h4{
    font-size: 18px;
    color:#fff;
    font-weight: 500;
    margin-bottom: 35px;
    position: relative;
}

.footer-col h4::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    height: 2px;
    width:50px;
    background: #088178;
    box-sizing: border-box;
}

.footer-col ul{
    list-style: none;
}

.footer-col ul li:not(:last-child){
    margin-bottom: 10px;
}

.footer-col ul li > a{
    font-size: 16px;
    font-weight:300;
    color:#fff;
    text-transform: capitalize;
    text-decoration: none;
    color:#bbb;
    display: block;
    transition: .3s ease;
}

.footer-col ul li > a:hover{
    color:#fff;
    padding-left: 8px;
}

.footer-col .social-icons{
    font-size:16px;
}

.footer-col .social-icons > a{
    display:inline-block;
    width:40px;
    height:40px;
    text-align: center;
    margin:0 10px 10px 0;
    color:#bbb;
    transition: all .3s ease;
    text-decoration: none;
}


.footer-col .social-icons > a:hover{
    transform: translateY(-5px);
    color:#fff;
}

@media (max-width:768px){
    .footer-col{
        margin-bottom: 30px;
        width:50%;
    }
}

@media (max-width:539px){
    .footer-col{
        width:100%;
    }
}

With these HTML and CSS codes, you can create a stylish and functional footer for your website. Feel free to customize the styles according to your website's design requirements.

That's it! You now have a fully functional footer created using HTML and CSS. Experiment with different styles and layouts to match your website's design aesthetic.

On Large Screens

On Small Screens

Check out the live demo and code:

CodePen: Link to CodePen
GitHub Repo: Link to GitHub Repo

Create a Dropdown Menu Using HTML, CSS and JavaScript

Matt Adil — Thu, 08 Feb 2024 09:52:25 +0000

Hey there, fellow coders! Today, we're embarking on a journey to create a fully responsive dropdown menu using HTML, CSS, and JavaScript. Our goal? To showcase a sleek and versatile dropdown menu that adapts seamlessly to different screen sizes, enhancing user experience without the need for extensive tutorials.

Overview:

In this project showcase, we'll dive into the creation of a dropdown menu that's not just visually appealing but also functional across various devices. By leveraging HTML for structure, CSS for styling, and JavaScript for interactivity, we'll craft a dynamic menu that reflects modern web design principles.

Key Highlights:

HTML Structure: We'll lay the groundwork with HTML, structuring our navbar and dropdown menu components to create a solid foundation for our project.
CSS Styling: With CSS, we'll add style and finesse to our dropdown menu, ensuring it looks polished and professional on any screen.
JavaScript Functionality: Using JavaScript, we'll inject interactivity into our dropdown menu, allowing users to seamlessly navigate their way through our site.

Let's Dive In:

From its humble beginnings in HTML to its stylish makeover with CSS and JavaScript magic, we'll showcase the evolution of our menu in action.

Dropdown Menu Html Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drop Down Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="logo">
            <img src="./navbar-icon.png" alt="">
        </div>
        <div class="toggle-btn">
            <div class="icon"></div>
        </div>
        <ul class="menu">
            <li><a href="#">home</a></li>
            <li><a href="#">About</a></li>
            <li class="submenu-wrapper">
                <a href="#">Skills<span> > </span>
                </a>
                <ul class="submenu">
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">React.js</a></li>
                    <li><a href="#">Node.js</a></li>
                </ul>
            </li>
            <li><a href="#">Background</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    <script src="./script.js"></script>
</body>
</html>

Dropdown Menu CSS Code:

@import url('https://fonts.googleapis.com/css2?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');

*,
::before,
::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size:13px;
}

body{
    font-family: "Poppins", sans-serif;
    font-size:1rem;
    background: #222f37;
    color:#d6e0f9;
}

.navbar{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    background: #101d23;
    padding:0 5%;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.logo{
    width:5rem
}

.logo img{
    width:100%;
}

.menu{
    list-style: none;
}

.menu li{
    position: relative;
    float:left;
}

.menu li a{
    font-family: "Poppins", sans-serif;
    font-size:1.2rem;
    color:#d6e0f9;
    display:block;
    text-decoration: none;
    padding:1rem 1.5rem;
}

.menu li a:hover{
    background: #495ca8;
}

.submenu{
    position: absolute;
    left:0;
    background: #101d23;
    display:none;
    transition: all .3s ease-in-out;
}

.submenu-wrapper:hover .submenu,
.submenu-wrapper:focus-within .submenu{
    display: initial;
}

.submenu li{
    width:100%;
    border-top:.1rem solid #222f37;
    list-style: none;
}

.toggle-btn {
    display: none; /* Initially hide the toggle button */
    z-index:1000;
}

.icon {
    position: relative;
    width: 1.5rem;
    height: .8rem;
    cursor: pointer;
    z-index:100;
}

.icon::before {
    top: 0;
    right:0;
    content: '';
    position: absolute;
    width: 2rem;
    height: .2rem;
    background-color: #d6e0f9;
    transition: all 0.3s ease-in-out;
}

.icon::after {
    bottom: 0;
    right:0;
    content: '';
    position: absolute;
    width: 1.5rem;
    height: .2rem;
    background-color: #d6e0f9;
    transition: transform 0.3s ease-in-out;
}

/* Rotate the before and after lines to create the close icon effect */
.icon.active::before {
    width:1.5rem;
    transform: rotate(-45deg) translate(-0.21rem, 0.21rem);
}

.icon.active::after {
    transform: rotate(45deg) translate(-0.21rem, -0.21rem);
}


@media (max-width: 991px){
    .toggle-btn{
        display: block;
    }

    .menu{
        width:100%;
        position:absolute;
        top:100%;
        left:0;
        background: #101d23;
        border-top: .1rem solid #222f37;
        display:none;
    }

    .menu.active{
        display:initial
    }

    .menu li{
        width:100%;
        border-top: .1rem solid #222f37;
    }

    .submenu{
        position: relative;
        width:100%;
    }

    .submenu li{
        background: #222f37;
        border-top: .1rem solid #101d23;
    }

    .submenu li a{
        padding-left:2rem;
    }
}

Dropdown Menu JavaScript Code:


    const icon = document.querySelector('.icon');
    const menu = document.querySelector('.menu');
    const span = document.querySelector('.span')

    function toggleNavbar() {
        menu.classList.toggle('active');
        icon.classList.toggle('active');
    }

    document.querySelector('.toggle-btn').addEventListener('click', function () {
        toggleNavbar();
    });

On Large Screens

On Small Screens

Check out the live demo and code:

CodePen: Link to CodePen
GitHub Repo: Link to GitHub Repo

Useful JavaScript Array Methods

Matt Adil — Wed, 17 Jan 2024 10:26:08 +0000

JavaScript arrays are powerful data structures that come with a variety of built-in methods, allowing developers to perform complex operations with ease. In this article, we'll explore some of the most useful array methods along with clear explanations and practical code examples.

11 most useful array methods are discussed in this blog:

map() Method
forEach() Method
filter() Method
reduce() Method
find() Method
indexOf() Method
includes() Method
some() Method
every() Method
slice() Method
splice() Method

1. map() Method

The map() method creates a new array by applying a provided function to each element in the original array. It is especially handy when you need to transform or modify elements:

const originalArray = [1, 2, 3, 4, 5];

const newArray = originalArray.map(item => item * 2);

console.log(newArray); // Output: [2, 4, 6, 8, 10]

2. forEach() Method

The forEach() method executes a provided function once for each array element:

const originalArray = [1, 2, 3, 4, 5];

originalArray.forEach(item => console.log(item * 2));
// Output:
// 2
// 4
// 6
// 8
// 10

Note:

Difference between map() method and forEach() method:

While both map() and forEach() iterate over each element, map() is specifically designed for transforming elements and creating a new array based on the applied function. On the other hand, forEach() is used for executing a provided function for each array element without creating a new array.

3. filter() Method

The filter() method creates a new array containing elements that pass a certain condition defined by the provided function:

const originalArray = [10, 15, 20, 25, 30];

const filteredArray = originalArray.filter(item => item > 20);

console.log(filteredArray); // Output: [25, 30]

4. reduce() Method

The reduce() method is used to reduce an array to a single value, applying a function for each element:

const originalArray = [1, 2, 3, 4, 5];

const sum = originalArray.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

accumulator: The accumulated result of the previous iterations. It starts with the value of initialValue on the first iteration.
currentValue: The current element being processed in the array.
initialValue: (Optional) A value to use as the initial value of the accumulator. If not provided, the first element of the array is used as the initial accumulator value. In the example above, the initialValue was set to 0.

5. find() Method

The find() method returns the first element in the array that satisfies a provided testing function:

const originalArray = [10, 20, 30, 40, 50];

const foundItem = originalArray.find(item => item > 30);

console.log(foundItem); // Output: 40

6. indexOf() Method

The indexOf() method returns the first index at which a given element can be found in the array:

const originalArray = [10, 20, 30, 40, 50, 30];

const index = originalArray.indexOf(30);

console.log(index); // Output: 2

7. includes() Method

The includes() method checks if an array includes a certain element:

const originalArray = [10, 20, 30, 40, 50];

const includesItem = originalArray.includes(30);

console.log(includesItem); // Output: true

8. some() Method

The some() method checks if at least one element in the array satisfies a provided condition:

const originalArray = [5, 10, 15, 20, 25];

const hasEvenNumber = originalArray.some(item => item % 2 === 0);

console.log(hasEvenNumber); // Output: true

9. every() Method

The every() method checks if all elements in the array satisfy a provided condition:

const originalArray = [2, 4, 6, 8, 10];

const allEvenNumbers = originalArray.every(item => item % 2 === 0);

console.log(allEvenNumbers); // Output: true

10. slice() Method

The slice() method returns a shallow copy of a portion of an array, starting from the specified beginning index to the specified ending index (excluding the element at the ending index). The original array is not modified.

const originalArray = [1, 2, 3, 4, 5];

const slicedArray = originalArray.slice(1, 4);

console.log(slicedArray); // Output: [2, 3, 4]
console.log(originalArray); // Original array remains unchanged: [1, 2, 3, 4, 5]

11. splice() Method

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. It modifies the original array.

const originalArray = [1, 2, 3, 4, 5];

const removedElements = originalArray.splice(1, 3, 6, 7);

console.log(removedElements); // Output: [2, 3, 4] (elements removed from index 1 to 3)
console.log(originalArray); // Original array is modified: [1, 6, 7, 5] (new elements added)

Note

Use slice() when you want to create a new array containing a portion of the original array without modifying the original.
Use splice() when you want to modify the original array by removing, replacing, or adding elements in place.

Mastering these array methods will significantly enhance your ability to manipulate and process data efficiently in JavaScript. Whether you are a beginner or an experienced developer, these methods are fundamental tools in your JavaScript toolkit. Start incorporating them into your projects and witness the power they bring to your code!

Mastering Responsive Design: Tips and Tricks for Mobile-First Development

Matt Adil — Tue, 16 Jan 2024 15:13:29 +0000

Responsive design is not merely a design choice; it's a necessity in today's digital landscape where users access websites on various devices. Mastering responsive design, particularly with a mobile-first approach, is crucial for delivering an optimal user experience.

What is Mobile-First Development?

Mobile-First Development is a design strategy that emphasizes starting the development process with a focus on mobile devices before expanding to larger screens. This approach recognizes the prevalence of mobile usage and aims to ensure a seamless and efficient experience for users on smartphones and tablets.

Responsive Design Techniques

Seven techniques are discussed in this blog that are used for Mobile-First Development:

Embrace the Viewport Meta Tag
Use Flexible Grids with CSS Grid or Flexbox
Media Queries for Breakpoints
Optimize Images for Mobile Devices
Touch-Friendly Design
Progressive Enhancement for Cross-Device Consistency
Using Relative Units for Better Scalability and Accessibility

1. Embrace the Viewport Meta Tag

The viewport meta tag is a key player in mobile-first development. It helps control the width and scaling of the viewport. Here's an example of how to set up the viewport meta tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website Title</title>
</head>
<body>
  <!-- Your website content goes here -->
</body>
</html>

width=device-width: sets the width of the screen to the width of the device.
initial-scale=1.0: sets the initial zoom/ scale to 1.

2. Use Flexible Grids with CSS Grid or Flexbox

Flexible grids are the backbone of responsive design. CSS Grid and Flexbox are powerful tools to create fluid layouts. Here's an example of a simple Flexbox layout:

CSS Grid: CSS Grid is a layout system that allows you to create two-dimensional grid-based layouts. It's particularly beneficial for building complex structures. Consider the following example of a basic grid layout:

/* Example: CSS Grid Layout */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.item {
  background-color: #3498db;
  padding: 20px;
  text-align: center;
  color: #ffffff;
}

In this example, the .container class creates a grid with three equal columns. The repeat(3, 1fr) specifies three columns, each taking up one fraction of the available space. The gap property adds a 20px gap between grid items. The .item class represents the individual grid items with specific styling.

CSS Flexbox: Flexbox, or the Flexible Box Layout, is designed for one-dimensional layouts, making it ideal for arranging items in a single row or column. Here's a simple example of a Flexbox layout:

/* Example: Flexbox Layout */
.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  background-color: #e74c3c;
  padding: 20px;
  text-align: center;
  color: #ffffff;
  margin-right: 10px;
}

.item:last-child {
  margin-right: 0; /* Remove margin from the last item */
}

In this Flexbox example, the .container class establishes a flex container, and justify-content: space-between evenly distributes the items along the main axis with space between them. Each .item class represents a flex item with specific styling. The flex: 1 property ensures that each item takes up an equal portion of the available space.

3. Media Queries for Breakpoints

Media queries allow you to apply specific styles based on the characteristics of the device, such as screen width. Here's an example of a media query for adjusting styles on smaller screens:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Extra Small (xs) - Targeted at devices with small screens like smartphones */

 @media (max-width: 575.98px) {
      body {
        background-color: lightcoral;
      }
    }

    /* Small (sm) - Targeted at small devices like tablets */
    @media (min-width: 576px) and (max-width: 767.98px) {
      body {
        background-color: lightblue;
      }
    }

    /* Medium (md) - Targeted at medium-sized devices like small laptops */
    @media (min-width: 768px) and (max-width: 991.98px) {
      body {
        background-color: lightgreen;
      }
    }

    /* Large (lg) - Targeted at larger devices like desktops */
    @media (min-width: 992px) and (max-width: 1199.98px) {
      body {
        background-color: lightgoldenrodyellow;
      }
    }

    /* Extra Large (xl) - Targeted at extra-large devices */
    @media (min-width: 1200px) {
      body {
        background-color: lightpink;
      }
    }
  </style>
  <title>Custom Responsive Breakpoints Example</title>
</head>
<body>

<div class="container">
  <h1 class="text-center">Custom Responsive Breakpoints Example</h1>
  <p class="text-center">Resize the browser window to see background color changes.</p>
</div>

</body>
</html>

4. Optimize Images for Mobile Devices

Large images can slow down page load times on mobile devices. Use responsive images and the srcset attribute to provide different image sizes based on screen resolution:

<img src="large-image.jpg" alt="Description" srcset="small-image.jpg 600w, medium-image.jpg 900w, large-image.jpg 1200w">

5. Touch-Friendly Design

Consider touch interactions when designing for mobile. Increase tap target sizes and use CSS properties like cursor: pointer for better touch responsiveness.

Increase Tap Target Sizes: Users interact with mobile interfaces using their fingers, which vary in size. Enlarge tap target sizes to accommodate different finger sizes and reduce the chance of misclicks or frustration.
Use cursor: pointer: Enhance touch responsiveness by providing visual feedback. Applying the CSS property cursor: pointer; to interactive elements gives users a clear indication that these elements are clickable. Here's an example:

/* Example: Touch-Friendly CSS */
.button {
  padding: 15px 20px;
  font-size: 16px;
  cursor: pointer;
}

6. Progressive Enhancement for Cross-Device Consistency

Adopting a progressive enhancement approach ensures a consistent and functional experience across all devices. Here's how to implement it:

Start with a Basic Design: Begin with a basic and functional design that caters to the core functionalities on all screen sizes. This ensures a solid foundation for users on various devices.
Progressively Enhance for Larger Screens: As you scale up to larger screens, enhance the user experience by adding features and refining the design. Use media queries to selectively apply styles for larger screens. Consider this example:

<!-- Example: Progressive Enhancement HTML -->
<div class="basic-design">
  <!-- Core content and functionality for all devices -->
</div>

<!-- Additional features and refined design for larger screens -->
@media only screen and (min-width: 768px) {
  .basic-design {
    /* Styles for larger screens */
  }
}

7.Using Relative Units for Better Scalability and Accessibility

When it comes to sizing in your CSS, opt for relative units instead of absolute ones for improved scalability and accessibility. Here's a quick guide:

Avoid Absolute Units: Absolute units like 'cm,' 'mm,' 'in,' 'pc,' 'px,' and 'pt' tie your layout to fixed physical measurements. This can lead to challenges in adapting your design to different screen sizes and accessibility needs.
Embrace Relative Units: Relative units provide a more flexible and scalable approach. Consider using the following relative units in your styles:

1. 'em' for Font Size: The 'em' unit is relative to the font-size of its parent or the element itself. It allows for more flexible and scalable font sizes. Example:

/* Example: Using 'em' for Font Size */
body {
  font-size: 16px;
}

.paragraph {
  font-size: 1.2em; /* Equivalent to 19.2px (16px * 1.2) */
}

2. 'rem' for Root-Relative Sizing: The 'rem' unit is relative to the font-size of the root element (usually the element). It provides a consistent base for sizing across the entire document. Example:

/* Example: Using 'rem' for Font Size */
html {
  font-size: 16px;
}

.paragraph {
  font-size: 1.2rem; /* Equivalent to 19.2px (16px * 1.2) */
}

3. 'vw' and 'vh' for Viewport Units: Viewport units, 'vw' (viewport width) and 'vh' (viewport height), allow you to size elements relative to the dimensions of the viewport. These units are particularly useful for responsive layouts. Example:

/* Example: Using 'vw' for Width */
.container {
  width: 50vw; /* 50% of the viewport width */
}

4. 'lh' for Line Height: The 'lh' unit is relative to the line height of the element. It provides a flexible way to set the spacing between lines of text. Example:

/* Example: Using 'lh' for Line Height */
.text-block {
  line-height: 1.5lh; /* 1.5 times the line height of the element */
}

By adopting these relative units and avoiding absolute units, you ensure your layouts are more adaptable, accommodating different screen sizes and improving accessibility for a diverse range of users.

Conclusion

Mastering responsive design through mobile-first development is essential for creating websites that cater to the diverse range of devices used by audiences today. By implementing these tips and tricks with practical code examples, you'll be well on your way to delivering a seamless and enjoyable user experience across all screen sizes. Embrace the mobile-first approach, and your websites will thrive in the ever-evolving landscape of digital accessibility.

Demystifying JavaScript Hoisting: What You Need to Know

Matt Adil — Wed, 10 Jan 2024 09:57:09 +0000

JavaScript, a versatile and dynamic language, often surprises developers with its unique behaviors. One such behavior that frequently catches newcomers off guard is "hoisting." In this post, we'll demystify hoisting, providing a comprehensive understanding of how it works and why it's crucial for writing effective JavaScript code.

1. What is Hoisting?

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during the compilation phase. This allows you to use variables and functions even before they are declared in the code.

2. Variables and Hoisting

Let's start by examining how hoisting works with variable declarations:

console.log(myVar);  // undefined
var myVar = 10;
console.log(myVar);  // 10

Surprisingly, the first console.log doesn't throw an error, even though myVar is logged before its declaration. This is due to hoisting. During compilation, the declaration var myVar; is moved to the top, making it accessible throughout the scope.

However, it's important to note that only the declaration is hoisted, not the initialization. In the example above, myVar is assigned the value 10 after the first console.log, so the initial value is undefined.

3. Function Declarations and Hoisting

Hoisting also applies to function declarations:

sayHello();  // Hello, hoisting!
function sayHello() {
  console.log('Hello, hoisting!');
}

Even though sayHello() is called before its declaration, there's no error. The function declaration is hoisted to the top of the scope, allowing it to be invoked anywhere within that scope.

4. Var vs. let and const

While var declarations are hoisted, the same doesn't apply to let and const. They are hoisted as well but are not initialized until the actual code execution:

console.log(myVar);  // ReferenceError: Cannot access 'myVar' before initialization
let myVar = 10;

---
console.log(yourVar);  // ReferenceError: Cannot access 'yourVar' before initialization
const yourVar = 20;

Here, using let and const results in a ReferenceError because the variable is not initialized until the line where it's declared.

5. Best Practices and Avoiding Pitfalls

1. Declare Variables at the Top of the Scope:
Always declare variables at the top of their containing scope to avoid unexpected behavior.

2. Be Mindful of Initialization:
Understand that only declarations are hoisted, not initializations. Be cautious when using variables before assigning values.

3. Use let and const for Block Scoping:
Embrace block-scoped variables (let and const) to minimize unintended side effects caused by hoisting.

By mastering hoisting, you'll gain a deeper understanding of JavaScript's behavior, enabling you to write more robust and maintainable code.

In conclusion, hoisting is a fundamental aspect of JavaScript that, once understood, empowers developers to write code with confidence. Embrace this behavior, be mindful of its nuances, and leverage it to your advantage when crafting elegant and efficient JavaScript applications. Happy coding!