Building a css tooltip

on January 16, 2023 with No comments

Building a css tooltip takes two parts

1. Building the tooltip container

2. Building the tooltip arrow

for starters like me, the tooltip arrow was the hardest part. i didnt know how to make a triangle in css. The trick is to create a element with zero height, zero width , then create a border of lets say 10 pixels with color set to transparent. The element wont be visible, but it will create a square with four triangles. Then you set a solid color to a single border. This will make it appear like a triangle.

    .tooltip:before {

        right: 100%;
        position: absolute;
        border: 10px solid transparent;
        border-right-color: rgba(0,0,0,0.8);
        content: "";
    }

You can find the code below to build the tooltip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tooltip</title>
</head>
<body>

<div class="container">

    <button id="target">My button</button>
    <div class="tooltip">I am a tooltip</div>
</div>

</body>
<style>

    .container {
        display: flex;
        height: 100vh;
        width: 100vw;
        align-items: center;
        justify-content: center;
    }


    #target:hover + .tooltip {
        display: block;
    }

    #target {
        height: 100px;
        width: 100px;
    }

    .tooltip {
        margin: 10px;
        text-align: center;
        display: none;
        padding: 10px;
        background-color: rgba(0,0,0,0.8);
        color: white;
        position: relative;

    }
    .tooltip:before {

        right: 100%;
        position: absolute;
        border: 10px solid transparent;
        border-right-color: rgba(0,0,0,0.8);
        content: "";
    }
</style>
</html>

Enable dark mode with just one click using this css trick

on January 14, 2023 with No comments

Using the color-scheme property or background you can enabled the dark mode.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dark Mode</title>
</head>
<input type="checkbox"/> Enable dark mode
<div class="document">

</div>
<style>
    html,body {
        margin: 0;
    }
    .document {
        height: 100vh;
        width: 100%;
        background-color: #888;
    }
    input:checked + .document {
        border: none;
        background-color: black;
        color-scheme: dark;

    }

</style>
</html>

here is the link to the codepen

https://codepen.io/naveen17797/pen/zYLzeyK

CSS3 stepper without js

on January 12, 2023 with No comments

I created a stepper with pure css, this is the result

This can be created with the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stepper</title>

    <ol class="stepper">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>

</head>
<body>

<style>

    .stepper {
      list-style: none;
    }

    .stepper > li {
        display: flex;
        flex-direction: column;
        counter-increment: stepper;
        align-items: center;
        content: "";
    }
    .stepper> li:before {
        display: flex;
        justify-content: center;
        align-items: center;
        content: counter(stepper);
        height: 50px;
        width: 50px;
        border-radius: 50%;
        background-color: #eee;
    }

     .stepper > li:after  {
        height: 20px;
        width: 2px;
        display: block;
        content: '';
        background-color: #888;
    }

     /* dont show last step line */
     .stepper > li:last-child:after {
         display: none;
     }





</style>

</body>
</html>

here you can find the codepen

https://codepen.io/naveen17797/pen/RwBVeZy

css moving box across the border animation

on January 10, 2023 with No comments

I was always curious about how css animation worked and i was afraid to try it. So i decided to give it a try. its nothing fancy , it just moves a box across the page border.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div id="box"></div>
</head>
<body>

</body>
<style>




    #box {
        height: 100px;
        width: 100px;
        background-color: red;
        top: 0;
        left: 0;
        animation-name: myanimation;
        animation-duration: 2s;
        transform: translateX(0%);
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }

    @keyframes myanimation {
        0% {

            transform: translateX(0%);
            background-color: azure;

        }

        25% {
            transform: translateX(calc(100vw - 100px));
            background-color: green;
        }

        50% {
            transform: translate(calc(100vw - 100px), calc(100vh - 100px));
        }

        75% {
            transform: translate(calc(0vw), calc(100vh - 100px));
        }

        100% {
            transform: translate(0%);
        }
    }
    body, html {
        margin: 0;
        padding: 0;
    }

</style>

</html>

you can find the codepen here

https://codepen.io/naveen17797/pen/abjJLeG

Changing the ui state without using js

on January 07, 2023 with No comments

Lets say you have a button which sets the dark mode, how do you react to the change without using js ?

<!DOCTYPE html>
<html lang="en">
<style>
.trigger:checked +  .area {
    background-color: red;
}

.area {
    height: 300px;
    width: 300px;
    background-color: black;
}
</style>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<input type="checkbox" class="trigger" />
<div class="area">
</div>
</html>

The above code does the same. It uses the :checked state to modify the other classes.

Validating the field with just css

on January 05, 2023 with No comments

I just learned that i could display the field validation without the use of js.

This is made possible with the use of selectors :valid and :invalid

HTML:

CSS:

input {
position: relative;
}

input:before {
position: absolute;
left: -20px;
}

input:invalid + span:before {
content: "✖";
color: red;
}

input:valid + span:before {
content: "✓";
color: green;
}

Helpful array methods in javascript

on January 03, 2023 with No comments

Lets just say you have an array of arrays and you wanted to get them as a list, the imperative way would be to allocate a new array, then recursively iterate through the array.

But the flat operator just does the same, it also provides us the ability to specify the nested level.

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

You can checkout the examples in mdn

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

When you want to find some element inside the array, i have seen most use the filter operator, but the right one would be find() operator

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Part 2 - Static methods vs static variables vs class constants benchmarking

on January 02, 2023 with No comments

In the part 1 we did a performance test on static methods and found that even though the method is not invoked it was using 182 MB of memory. The array was hardcoded in to the class. In this part we will benchmark the usage of static variables and see if it makes any difference in terms of performance.

So i placed the big data inside the static variable, so i got these results

<?php
echo memory_get_usage(true) ."\n";
require_once "static_variable.php";
echo memory_get_usage(true) ."\n";

2097152 <- before loading the file
182452224 <- after loading the file ( ~182 MB)

As you can see these are the same values as the static method. So we can safely conclude that both static methods and variables dont have any difference in terms of memory usage.

Now lets go to the other case, class constants. i created the file with large data for class constants.

<?php
echo memory_get_usage(true) ."\n";
require_once "class_constant.php";
echo memory_get_usage(true) ."\n";

This gave the same result.

2097152 <- before loading the file
182452224 <- after loading the file ( ~182 MB)

I was curious to know what will happen if i create multiple objects from the class.so i did these

<?php
echo memory_get_usage(true) ."\n";
require_once "class_constant.php";
$f1 = new Foo();
$f2 = new Foo();
$f3 = new Foo();
echo memory_get_usage(true) ."\n";

This gave the same result.

2097152 <- before loading the file
182452224 <- after loading the file ( ~182 MB)

To conclude if you have large data it doesnt make any difference to static method, static variable or class constant. But conceptually its correct to use class constants unless you are performing mutations on the data in the program.

i have added my code to this repo, so that you can perform these tests yourself

https://github.com/naveen17797/php-performance-benchmark

Part 1 - Static methods vs static variables vs class constants in php

on January 01, 2023 with No comments

Lets say you have an array of data which is static, where do you put it ?

There are several places you can put it

1. Static variables ( which can be altered at run time )

2. Class constants ( which cant be altered at run time )

3. Static methods ( array constructed at run time )

so i decided to benchmark these stuff. At the moment i didnt knew about initialization cost of the array ( static method). I chose a json data of 25 MB which will be converted to array.

Static Method

echo memory_get_usage(true) ."\n";
require_once "foo1.php";
echo memory_get_usage(true) ."\n";

Foo::benchmark(array('Foo', 'bar'));
Foo::benchmark(array('Foo', 'bar'));
Foo::benchmark(array('Foo', 'bar'));
Foo::benchmark(array('Foo', 'bar'));
Foo::benchmark(array('Foo', 'bar'));

echo memory_get_usage(true) ."\n";

The time required to initialize the 25 mb json array.

1.9073486328125E-6
0
0
0
0

Notice there is no initialization cost after first call. The memory usage details are

2097152 <- at first list before everything is loaded
182452224 <- After class file loaded
182452224 <- After 5 calls

I will check the static variables and class constants in next few days

I got this domain

on January 01, 2023 with No comments

I got this domain on new year, when i started writing i said to myself if i was able to write constantly for 7 days i would get myself a custom domain. Today i ported my blog from wordpress.com to blogger. I lost the front page customization's, but rest seems to be ok.

Very excited to see what awaits in 2023 :-)