06 February, 2022

5 HTML and CSS Good Practices

It is quite easy to find good practices for any technology, but unfortunately, the same cannot be said about HTML and CSS. I've made my list of 5 cases when you can create a user-friendly, or clumsy, interface using only HTML and CSS.

1) alt-text Is Not a Duplicate Title

The alt attribute is quite useful. It helps screen reader users understand what is shown in the picture. Unfortunately, many developers don’t use it efficiently. They either duplicate the text around the picture or don’t add it at all.

But we can use alt differently. For example, use the title text as a basis and add more details about the image. For example, if you have a product card with a title and an image, you can use alt to describe the external characteristics of the product.

Don’t do this:

                                
<header>
    <h3>Nike Originals</h3>
    <img src="picture.jpg" alt="Nike Originals">
</header>

You can do this:

                                
<header>
  <h3>Nike Originals</h3>
  <img src="picture.jpg" alt="shoes with Nike logo, classic reinforced toe and thin sole">
</header>

2) button type=button Is Better Than an href=“#”

You can often see an anchor link when developers try to mark up an interactive element. They do this thinking that if they override the default link behavior using JS, they will get the button behavior.

At first glance, this makes sense. But there is a problem. Browsers still think it’s a link. If you click the right mouse button to open the context menu of such an element, you will see the options: “Open in a new tab”, “Open in a new window”, and “Open in a private window”.

When users see those items, they think that it is a link and they can open it, for example, in a new tab. When they do this, they get an unexpected result – they see the top of the page. Therefore, it is better to use the button element. In this case, you get an interactive element that has no link options, and the user won’t be confused when calling the context menu.

Don’t do this:

                                
<a href="#">Show my order</a>

You can do this:

                                
<button type="button">Show my order</button>

3) justify-content: space-between Causes Unexpected Markup

When Flexbox first appeared, many people liked the justify-content property, which allowed them to evenly distribute grid items using space-between or space-around. And of course, they began to use it. But there is one problem.

When we use these values, we don’t think that the number of items may change. For example, if I use space-between to add 2 more items to a 4-column grid, they will appear on each side of the parent and not at the beginning of the line as the user expects.

Therefore, in this situation, it is better to use margin if you need IE11 support, or column-gap to set space between items.

Don’t do this:

                                
.grid {
    display: flex;
    justify-content: space-between; /* or space-around */
}
.item {
    width: 30%;
}

You can do this:

                                    
.grid {
    display: flex;
    column-gap: 5%;
}
.item {
    width: 30%;
}

4) justify-content and align-items Lose Items

We often use the justify-content and align-items properties to position items. I know that this is a convenient and easy way of positioning. But there is a problem that is especially common with vertical positioning.

This is due to the way these properties work. The fact is that the justify-content and align-items properties ignore the size of flex items. Accordingly, if flex items are larger than the flex container, they will go beyond its borders and may not be displayed correctly.

For example, I often stumble upon a modal window with a cross button beyond the window, which makes it unavailable. You need to zoom out of the page to close it.

This problem can be solved by using the margin property set to auto. Inside a flex container, the auto value will be calculated based on the size of the container and its flex items. If the flex items are smaller than the flex container, the browser will set the padding automatically. If the flex items are larger, they will be pushed towards the flex container’s borders.

Don’t do this:

                                    
<!-- HTML -->
<div class="modal">
    <div class="modal__main">
       <!-- modal content -->
    </div>
</div>


/*--CSS--*/
.modal {
    display: flex;
    justify-content: center;
    align-items: center;
}

You can do this:

                                     
<!-- HTML -->
<div class="modal">
    <div class="modal__main">
        <!-- modal content -->
    </div>
</div>


/*--CSS--*/
.modal {
    display: flex;
}
.modal__main {
    margin: auto;
}

5) justify-content: space-between Causes Unexpected Markup

When Flexbox first appeared, many people liked the justify-content property, which allowed them to evenly distribute grid items using space-between or space-around. And of course, they began to use it. But there is one problem.

When we use these values, we don’t think that the number of items may change. For example, if I use space-between to add 2 more items to a 4-column grid, they will appear on each side of the parent and not at the beginning of the line as the user expects.

Therefore, in this situation, it is better to use margin if you need IE11 support, or column-gap to set space between items.

Don’t do this:

.grid {
    display: flex;
    justify-content: space-between; /* or space-around */
}

.item {
    width: 30%; 
}

You can do this:

.grid {
    display: flex;
    column-gap: 5%;
}

.item {
    width: 30%;
}

“The purpose of this article is to draw attention to the problems people may face. My choice is not at all dogmatic. You are free to solve these problems in your own way"

06 March, 2022

5 javascript concept that every developer should know

JavaScript is used on millions of websites and will not be phased out anytime soon. On the one hand, HTML and CSS provide style for websites, but the magic of JavaScript brings your website to life. A single language can serve both functions, so there are so many JavaScript developer job openings in the computer industry. Whether it's a small startup or a large corporation, most of them are developing a website or app that necessitates a thorough understanding of this language.

JavaScript has several frameworks and libraries available. But first, let's go over some fundamental JavaScript concepts that every developer should understand.

1) IIFE

The IIFE function is a JavaScript function that is called and executed. Variables defined within the IIFE are not accessible to the outside world, preventing contamination of the global scope. So the main reason for using IIFE is to run code quickly while maintaining data privacy.

2) Callbacks

n JavaScript, a callback is essentially a function that is passed as a parameter to another function and then called or run within that function. A function must wait for another function to run or return a value in this case, forming a functional chain. As a result, callback is frequently used in JavaScript's asynchronous operations to provide synchronous functionality.

3) Scope

The scope, which is simply a box with a border, contains variables, functions, and objects. These constraints impose restrictions on variables and influence whether or not you have access to them. It limits the visibility or availability of a variable to other parts of the code.

4) Closures

A closure is a function that runs inside another function and has access to the outer function's variables. While this definition appears straightforward, the scope is where the real magic happens. All variables defined in its scope, the scope of its parent function, and the global variables are accessible to the inner function. It is important to note that the outer function cannot access the inner function variable at this time.

5) Hoisting

When developers are unfamiliar with the concept of hoisting in JavaScript, they may encounter unexpected results. You can call a function before it is declared in JavaScript and not get the 'Uncaught ReferenceError' error. The reason for this is that the JavaScript interpreter automatically moves variables and function declarations to the top of the current scope before executing the code.

06 April, 2022

PHP trim() function: Remove characters from string

In this tutorial, we look at the PHP trim function. We look at how you can remove whitespaces and characters from a string using the trim function in PHP.

Table of Contents - PHP Trim:

• What does trim do?
• Code and Explanation
• Closing thoughts

What does the PHP trim() function do?

The trim() function in PHP removes whitespace or any other predefined character from both the left and right sides of a string.

ltrim() and rtrim() are used to remove these whitespaces or other characters from the left and right sides of the string. However, making use of just the trim() function without specifying ‘l’ or ‘r’ removes characters from both sides.

Code & Explanation:

In this section, we look at the various syntax, parameters, and return values used in the trim() function. Post that we look at a code snippet using the trim() function.

Syntax:

trim($string, $charlist)

Parameters:

• $string - Required. This is the string or the variable containing the string from which you want to remove whitespaces or characters.
• $charlist - Optional. This parameter specifies the character that needs to be removed from the string. If left empty, all the characters mentioned below would be removed.
• “\0” – NULL
• “\t” – tab
• “\n” – newline
• “\x0B” – vertical tab
• “\r” – carriage return
• ” ” – ordinary white space

Code using PHP Trim:

                                
<?php

    // PHP program using trim() 

    $str = "  Hire freelance developer ";

    // Since a second parameter was not passed
    // leading and trailing whitespaces are removed
    echo trim($str);
              
?>

The output for the above code snippet would be as follows:

Hire freelance developer

Now let’s look at a case where we pass a second argument.

                                    
<?php
    // removing the predefined character 
    $str = "Hire freelance developer";
    echo trim($str, "Hir");
?>
            
        

The output for this code snippet would be the following:

e freelance develope

As you can see the “hir” from “Hire” and the “r” from “developer” were removed.

Closing thoughts - PHP trim():

There are no caveats as such while using the PHP trim() function. I would recommend practicing the trim() method as it can get tricky at times. Also, try using the ltrim() and rtrim() both these functions have very specific use cases.