DEV Community: Alwar G

OR VS Array Includes

Alwar G — Wed, 17 Jan 2024 13:13:58 +0000

Hi,

Recently, I came across a case involving the comparison of multiple names, where I needed to check each name against my list of available names before proceeding with further actions. Consider the following example code:
Example code

function handleContactOperation(name) {
   if (name === 'person1' || name === 'person2') {
      // My stuff
   } else {
      // Other stuff
   }
}

Alternatively, the same logic can be implemented using the Array.includes method:

function handleContactOperation(name) {
   if (['person1', 'person2'].includes(name)) {
      //My stuff
   } else {
      // other stuff
   }
}

You may wonder, Which approach should I choose? The answer is that both approaches are correct.

Let's analyze the OR approach. Consider the following code:

function handleOR(name) {
  console.time('OR');
  console.log(name === 'person1' || name === 'person2');
  console.timeEnd('OR');
}
handleOR('person1');

Here, the output for the OR approach is approximately 0.084 ms (individual results may vary).
Now, let's implement the same logic using the Array.includes approach:

function handleIncludes(name) {
  console.time('Includes');
  console.log(['person1', 'person2'].includes(name));
  console.timeEnd('Includes');
}
handleIncludes('person1');

In this case, the output for the Array.includes approach is approximately 0.221 ms. The OR approach performs better in this scenario.

However, let's consider a more complex case where you need to compare a name against 10 available names:

function handleContactOperation(name) {
   if (name === 'person1' || name === 'person2'|| name === 'person3'|| name === 'person4'|| name === 'person5'|| name === 'person6'|| name === 'person7'|| name === 'person8'|| name === 'person9'|| name === 'person10') {
      // My stuff
   } else {
      // Other stuff
   }
}

In my opinion, the readability of this code is not optimal. Now, let's implement the same logic using the Array.includes method:

 function handleContactOperation(name) {
  let namesArr = [
    "person1",
    "person2",
    "person3",
    "person4",
    "person5",
    "person6",
    "person7",
    "person8",
    "person9",
    "person10"
  ];
  if (namesArr.includes(name)) {
      // My stuff
   } else {
      // Other stuff
   }
}

In this case, the Array.includes approach is more readable.

Conclusion:

If performance is a priority, the OR approach may be preferable. However, for improved readability, the Array.includes approach is recommended.

Example use cases:

For less than 5 strings, the OR approach may be readable.
If used in complex logic, especially inside a loop, the OR condition might be more suitable.

My thoughts

Consider using a one-by-one condition format for better readability: Example code

   let isValid = name === 'person1' || 
                 name === 'person2' || 
                 name === 'person3' || 
                 name === 'person4' || 
                 name === 'person5' || 
                 name === 'person6' || 
                 name === 'person7' || 
                 name === 'person8' ||
                 name === 'person9' ||
                 name === 'person10'

Explore other data structures such as Map or Set, which may have better performance than the Array includes method. However, keep in mind that they may consume more memory and execution time compared to the OR condition.

The choice is yours. Depending on your application's design, choose the approach that best suits your needs.

I hope you find this post helpful. Thank you.

CSS Viewer

Alwar G — Tue, 31 Jan 2023 13:35:43 +0000

Hi,

Before I start, I acknowledge that this tool is an inspiration by CSS Stats. Ok, let's jump on it.

What is CSS Viewer?

The tool used to view the CSS Styles.

Wait a minute. We already have CSS Stats, right?

How it differs from CSS stats? 🤔

As I mentioned above, I used CSS Stats to run this tool.
If we give the CSS path in CSS Stats, we can get the stats of the particular CSS file. Here we can give the JSON path of the assetsMap of your application. It will list down all the CSS paths. While clicking the particular CSS path you can view the CSS Styles as you want.

Ok, what is the exact use case to use this application?🧐

Consider this scenario of your application using fingerprinting technology to build the application.

Example:

https://my-domain/my-css-{fingerprinted-hash}

For every build, the fingerprinted hash will vary.
For example, it may vary from 737jsb77sd236 to dsvyd623t3bdc.
So, in this case, you have to replace the old hash with the new hash to view the recent changes in the CSS Stats. To avoid this confusion, we can use this tool for the requirement of updated CSS stats.

working:

1. Paste your JSON path:

2. Click the particular CSS Path:

My Use case:

My mentors taught me that don't use too many colours in any application for a better user experience. So, Before I introduce new colours in the design phase, I should check the available colours to reuse them. So I used CSS stats to check the available colours. But, sometimes I missed giving the updated fingerprinted hash. So I decided to create this. I hope it will fit your use case also.
If it doesn't fit, Please raise an issue here

Thank you for reading this post 🙏. Feel free to post your comments if you want to share something. Contributions to this project are also welcome.

Application: https://css-viewer.vercel.app/
Github: https://github.com/AlwarG/css-viewer

Git Branch Files

Alwar G — Tue, 06 Jul 2021 05:33:15 +0000

As a developer, we need to open the files in the VS code editor while switching the branch. But it creates too much frustration if we are doing this continuously. Each time we have to give 'cmd+p' and type the file name to open the particular file.

So I thought something like, 'why can't we open our files for the current branch in a single click instead of opening the files one by one?'.

For that, I have created the extension named 'Git Branch Files' to achieve this requirement.
It has two functionalities.

1. Open the files for the current branch.

It will open the files for the current branch.

2. Close the current and open the files for the current branch.

It will close all active files(For example, files from the previous branch) and open the files for the current branch.

For more information kindly refer to this.

Repo Link: https://github.com/AlwarG/git-branch-files
Extension Link: https://marketplace.visualstudio.com/items?itemName=AlwarG.git-branch-files

Thank you for reading this post 🙏. I Just tried what I know. Feel free to post your comments if you want to share something.

CSS class builder

Alwar G — Fri, 02 Jul 2021 07:23:31 +0000

As a web developers, we need to write the styles for the given classes.

But for lazy people like me, it creates too much frustration. So I decided to make the VS code extension to solve this problem and finally, I succeed in it.

My extension name is CSS class builder. It will generate the styles from your given classes in the HTML.

For example, we have the following code

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Web Page</title>
</head>
<body>
    <section class="w_40px">
      <div class="mR_auto mL_auto">
        red
      </div>
      <button class="display_block">test</button>
    </section>
</body>

After running this extension, the above file changed into

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Web Page</title>
   <style is-from-builder>
      .w_40px {
         width: 40px;
      }

      .mL_auto {
         margin-left: auto;
      }

      .mR_auto {
         margin-right: auto;
      }

      .display_block {
         display: block;
      }

   </style>
</head>
<body>
   <section class="w_40px">
      <div class="mR_auto mL_auto">
        red
      </div>
      <button class="display_block">test</button>
    </section>
</body>

For more information kindly refer to this.

PS: I know we have a lot of good CSS frameworks like bootstrap. But it will be helpful for the people who are in the process of learning CSS styles.

Repo Link: https://github.com/AlwarG/css-class-builder
Extension Link: https://marketplace.visualstudio.com/items?itemName=AlwarG.css-class-builder

Thank you for reading this post 🙏. I Just tried what I know. Feel free to post your comments if you want to share something.

Transpiling your boolean payload

Alwar G — Thu, 01 Apr 2021 11:52:44 +0000

Hi,

Suddenly I got thinking of why we have to send the boolean values in our response?🤔 You can ask something like what? Are you mad?
I am also thought the same 😂.
Consider the below javascript codes

code 1:

let isPassed = true;
if (isPassed) {
    console.log('Passed');
}

Code 2:

let isPassed = 1;
if (isPassed) {
    console.log('Passed');
}

As a web developer, we know that both will give the same output.
My know programming languages parse the 0 as false and 1 as true.
So, I thought no need to give your payload with the boolean values instead of 0s and 1s.
Consider the below the network call

Request:

https://x8nq67.deta.dev/superheroes

Response:

[{
    name: 'Iron Man',
    is_male: true,
    is_idiot: false,
    is_millionaire: true,
    is_inventor: true,
    is_from_avengers: true,
    has_parent: false,
    has_disease: false,
    has_children: true,
    is_best: true,
    has_passion: true
  }, {
    name: 'Super Man',
    is_male: true,
    is_idiot: false,
    is_millionaire: false,
    is_inventor: false,
    is_from_avengers: false,
    has_parent: true,
    has_disease: false,
    has_children: false,
    is_best: true,
    has_passion: false
  }, {
    name: 'Bat Man',
    is_male: true,
    is_idiot: false,
    is_millionaire: false,
    is_inventor: true,
    is_from_avengers: false,
    has_parent: true,
    has_disease: false,
    has_children: false,
    is_best: true,
    has_passion: true
  }]

In the above response, we have multiple boolean values. Let's think of the above network call as below

Request:

https://x8nq67.deta.dev/noboolean/superheroes

Response:

[{
    name: 'Iron Man',
    is_male: 1,
    is_idiot: 0,
    is_millionaire: 1,
    is_inventor: 1,
    is_from_avengers: 1,
    has_parent: 0,
    has_disease: 0,
    has_children: 1,
    is_best: 1,
    has_passion: 1
  }, {
    name: 'Super Man',
    is_male: 1,
    is_idiot: 0,
    is_millionaire: 0,
    is_inventor: 0,
    is_from_avengers: 0,
    has_parent: 1,
    has_disease: 0,
    has_children: 0,
    is_best: 1,
    has_passion: 0
  }, {
    name: 'Bat Man',
    is_male: 1,
    is_idiot: 0,
    is_millionaire: 0,
    is_inventor: 1,
    is_from_avengers: 0,
    has_parent: 1,
    has_disease: 0,
    has_children: 0,
    is_best: 1,
    has_passion: 1
  }]

Here we can replace boolean values with 0s and 1s.

Why we have to give the values like this?

The size of the first response(without 0s and 1s) is 637 Bytes. The size of the second response(with 0s and 1s) is 532 Bytes. So we can reduce the size of the payload to 105(637-532) Bytes. If the payload size is less, then the speed of response is also good.

Output Comparision:

As we see, the second response is 0.05 seconds faster than the first response. This is a small example. But If the application has more requests, it will give a good impact.
For example, consider your application has 100 requests like above. If we follow the above method, then each response will be 0.05 seconds faster than the previous one. That means your application will be 5 seconds(100 requests * 0.05 seconds) faster than the previous one 🔥.

Here I expressed my thoughts. Kindly post your comments if you want to share something. Thanks for reading the post 😍.

Local Task Manager

Alwar G — Thu, 25 Feb 2021 05:37:31 +0000

As a working person, we always have multiple tasks, sometimes tracking those turns out to be a tedious task. For example, Every Friday we need to read some code tricks tutorial and one Friday we will forget this thing and also this is not an important task because it will not affect your working process.
So we want to track these kinds of work items.
We probably use notes to track these items. But it makes it harder to search the local tasks. Because we also tracking important tasks here.
So everything will be mixed((local + work) Tasks).
In my point of view, why can't we divide both? For this question, some of them may say we can use notes or something else in an efficient way to overcome this. That is one solution.

The other solution is using LTM(Local Task Manager) for local tasks and using notes or something else for your other tasks.

What is LTM(Local Task Manager)?

The tool which can be used for managing your local tasks. If you want to try click here.

Functionalities:

1.Task Addition
2.Task status changing
3.Task Deletion

1.Task Addition

2.Task status changing

Finished Status

Unfinished Status

3. Task Deletion

Pros:

It will store your data locally(Browser local storage). so that your privacy has been ensured.

cons:

If it uses the browser local storage, the data which has been added by you will not be available in the other browser.
Github link: https://github.com/AlwarG/local-task-manager
Application link: https://alwarg.github.io/local-task-manager/

Thank you for reading this post 🙏. I Just tried what I know. Feel free to post your comments if you want to share something.

Introducing ember-mirage-gen

Alwar G — Wed, 18 Nov 2020 09:51:22 +0000

As an ember developer, I always frustrated while writing the test cases. Because we should copy the sample response as well as a sample request. Particularly in factories, it will make the frustration because of faker data. So what should we do? 🤔
I have created the ember addon of ember-mirage-gen to solve this requirement.
It will list the requests as shown in the below image.

After clicking the specific request, we can have the three sections
1. config file - response of the initiated request
2. DB section - factories and fixtures
3. Test file - factory and fixture creation

The above three sections are editable. So you can change data as you want.

Here we can choose the type of database for the particular node from the object tree as shown in the above image. The database options are

fixture
factory
Normal(Added to the config file response)

Now you can click the Generate DB button to get the mocked data.

How to use it?

The answer is simple. You should do the following two things.

1. In template file

  <MirageGen />

2.In config file

let ENV = {
  'ember-mirage-gen': {
    isEnabled: environment === 'development',
  }
};

NPM link: https://www.npmjs.com/package/ember-mirage-gen
Github link: https://github.com/AlwarG/ember-mirage-gen

Thank you for reading this post 🙏. I hope you learned something. Feel free to post your comments if you want to share something.

Fun with Javascript tricks

Alwar G — Thu, 17 Sep 2020 08:34:13 +0000

In this post, we are going to learn about some fashionable javascript tricks. I was excited by these tricks. I believe that you will also be excited by the end of this post

1) Optional Catch Binding

As a web developer, we should handle errors in our application. For instance, while making the API request with async/await we can come across the case of errors. Consider the below code

async function getDetails() {
   try {
      let result = await fetch('/getdetails');
      console.log(result);
   } catch (e) {
      console.error('Error:', e);
   }
}

In this code, if the API fails it will throw an error and we are catching that error. Though, while think about the common error, we don't need to catch the error.

async function getDetails() {
   try {
      let result = await fetch('/getdetails');
      console.log(result);
   } catch {
      console.error('Seems we got an issue in our end. Can you try after sometime?');
   }
}

Before optional catch binding(ES10/2019), it's not possible. we should catch the error even though it's not used.
Browser supported versions are here.

2) JSON stringify format

We all know that JSON.stringify will convert the JS object into the JSON string. But the question is can you able to read the given JSON string? consider the below code

    let obj = {
      Name: 'Alwar',
      Age: 23,
      Degree: 'B.E(ECE)',
      Hobbies: 'Working in Web Apps, Drawing, Playing cricket,'
      Country: 'India'
    };
    JSON.stringify(obj);

It will give the output as

"{"Name":"Alwar","Age":23,"Degree":"B.E(ECE)","Hobbies":"Working in Web Apps, Drawing, Playing cricket","Country":"India"}"

The above string is hard to read right? What should we do to improve readability? 🤔. Don't worry we have the option in JSON.stringify method. That is we can write the above code as

JSON.stringify(obj, null, 2);

Now we can get the output as

"{
  "Name": "Alwar",
  "Age": 23,
  "Degree": "B.E(ECE)",
  "Hobbies": "Working in Web Apps, Drawing, Playing cricket",
  "Country": "India"
}"

For more information about JSON.stringify kindly refer this

3) event.currentTarget

I hope most of us working with events. While getting the element from the event object we can use event.target to make the modifications to that particular element. But if we have cases like below, then what should we do?

Here we have outer-div(red), intermediate-div(green), and the inner-div(blue). I want to change the color of the outer-div as gray. For that, I am using an event.target method. But if we click on the intermediate-div(green), and the inner-div(blue), then it will change into the gray color instead of the outer-div(red) to be in gray. Here event.currentTarget comes into play 😎.

Now if we click on the intermediate-div(green) and the inner-div(value), then it will not change into the gray color. Against, it will change the outer-div(red) as gray. That indicates it will give the element to which the event handler has been attached.

4) Promise.any()

This method will return a single promise that resolves with the value from that promise as soon as one of the promises in the iterable fulfills. You can understand this by one practical use case. consider, we should load any one of the below information while opening the web app index page

family information
education information
nativity information

So we should make three API calls for getting these informations.

   let familyInfo = fetch('/getfamilyinfo').then((val) => return val);
   let educationInfo= fetch('/educationinfo').then((val) => return val);
   let nativityInfo = fetch('/nativityinfo').then((val) => return val);
   Promise.any([familyInfo, educationInfo, nativityInfo ]).then((value) => console.log(value));

It will load the first resolved promise information 💪. Note that I am making three requests. These will be used later in my application. To improve the user experience I display at least one information.
Kindly check the browser supported versions before using this method.

5) Quick number conversion

In javascript, we have a Number method for converting the string into a number.

console.log(Number('5')) // 5

However, we can convert the string into a number by adding the + symbol in front of the given string.

console.log(+'5') // 5

6)Object.seal()

This method prevents the new properties to be added and allows the editing of the existing properties unlike in object.freeze method.

let detailsInfo = {
  name: 'Alwar',
  age: 23
};
Object.seal(detailsInfo);
detailsInfo.education = 'B.E';
console.log(detailsInfo);

The above code will produce the output as

{
  name: 'Alwar',
  age: 23
}

Here I don't want to add any other properties. That's why I sealed this object. Also, remember that sealed object properties are editable.

let detailsInfo = {
  name: 'Alwar',
  age: 23
};
Object.seal(detailsInfo);
detailsInfo.name = 'Alwar G'
console.log(detailsInfo);

Now we got the output as

{
  name: 'Alwar G',
  age: 23
}

If you don't want to edit the existing properties, then you can try the object.freeze method.
Thank you for reading this post 🙏. Feel free to post your comments if you want to share something.

console clarification 🔍

Alwar G — Wed, 19 Aug 2020 14:07:31 +0000

The most web developers(including me) are using console object for debugging. In my point of view, the console object is one of the best ways for the debugging process. Here we are going to see some interesting uses of the console object.

console.log

Most of them are using console.log. It prints the output for what we are giving.

let number = 10;
let str = 'alwar';
console.log(number, str) // 10, alwar

console.assert

It prints the given message only when the given assertion is false. This is really useful for printing the error message with some conditions 😎. For example, I want to check the number based on the following conditions

Greater than 10
Less than 100
Is it Even number

function checkNumber(num) {
   console.assert(num > 10, 'Number is less than or equal to 10');
   console.assert(num < 100, 'Number is greater than or equal to 100');
   console.assert(num%2 === 0, "It's an odd number");
}

If we give 24 as the number it will print nothing, because it satisfies all of the above conditions. But if we give 13, we will get the output as

 Assertion failed: It's an odd number

It doesn't print the other two assertions. Because it satisfies the other two assertion's conditions.

console.clear

It clears the console panel.Let's see one interesting scenario about this method. Let's consider we have two functions. Function 2 executes based on some condtion in function 1.

  funtion func1(num) {
    let isEven = num%2 === 0;
    let isBigNumber = num > 10;
    let isNotVeryBigNumber = num < 100;

    console.assert(isBigNumber, 'Number is less than or equal to 10');
    console.assert(isNotVeryBigNumber, 'Number is greater than or equal to 100');
    console.assert(isEven, "It's an odd number");

   if(isEven) {
      func2(num)
   }
  }
  function func2(num) {
   console.clear();
   console.assert([44, 68].includes(num), "It's not present in the list");
  }

Here we are printing some assertions in function 1 and call the function 2 only when the number is even. While calling function 2 I don't want to see other details. That's why I am using the console.clear method to clear the previous assertions

console.count

It logs the number of times that this particular call to count() has been called. Suppose, if you are working on a big project with many collaborators, then you may need this feature 💪. In that project, you are working on one function and you want to know how many times this function has been called with the same value. That time console.count will help.

let sum = 0;
function getSum(num) {
  console.count(`number: ${num} occurence`);
  sum += num;
}
let arr = [2, 4, 1, 4, 2];
arr.forEach((num) => getSum(num));

Here we got the output as

   number: 2 occurence: 1
   number: 4 occurence: 1
   number: 1 occurence: 1
   number: 4 occurence: 2
   number: 2 occurence: 2

Here numbers 2, 4 have two occurrences.

console.countReset

Now we know what is count. In some cases, we want to reset the count of the particular value. For example, We want to compute the sum from two arrays. And we know occurrences of one array but we don't know occurrences of another array. We want to know occurrences of another array. Here console.countReset comes into play.

let sum = 0;
function getSum(num) {
  console.count(`number: ${num} occurence`);
  sum += num;
}

let arr1 = [1, 2];
arr1.forEach((num) => getSum(num));
console.countReset(`number: 1 occurence`);
console.countReset(`number: 2 occurence`);

// Some other location
let arr2 = [2, 4, 1, 4, 2];
arr2.forEach((num) => getSum(num));

It will print the output as

number: 1 occurence: 1
number: 2 occurence: 1
number: 2 occurence: 1
number: 4 occurence: 1
number: 1 occurence: 1
number: 4 occurence: 2
number: 2 occurence: 2

Here the arr2 starts from the third line. Even though we already printed the occurrences of similar arr1 values, while start the printing for arr2 values it will print from the initial occurrence. Because we give countReset for the values of 1 and 2.

Note:

count and countReset labels should be same

console.dir

It displays the interactive list of properties of the given object. The most common scenario is the DOM object. Like we want to know the values like class names, parent element, child element, etc.. while viewing the particular webpage. You can copy the below code with available element Id and paste it to some website console, you can see get the directory structure of the distinct element.

 let ele = document.getElementById('MyEle');
 console.dir(ele);

console.err

It shows the error message to the Web Console.

 function isEven(num) {
   let isEven = num%2 === 0;
   if(!isEven) {
      console.err('Wrong number');
   }
  return isEven;
 }

In this code, it will print the error as the Wrong number.

console.info

It shows an informational message to the Web Console. This is really useful for mentioning which part of the code is currently executed. Consider the below code

function getOutput(num) {
let res = num;
res = res + 10;

if (res > 50) {
  res = res -10;
  console.info('Subraction is done');
}
return res;
}

Here it will print the message only when the result is greater than 50.

console.warn

It outputs a warning message to the Web Console. This is really useful for writting the code in the node js environment. Let's say you are upgrading your npm package from version 1 to version 2. Here you are implementing new methods that are faster than the previous methods and next update you want to remove those slow performance methods. So you should warn your users to change your old methods. Here console.warn will do the important task 🔥

Version 1:

function getIndex(number) {
  let output;
  for(let i = 0; i< arr.length; i++) {
     if(number === arr[i]) {
       output = i;
     }
  }
  return output;
}

Version 2:

function getIndex(number) {
  console.warn('Use getFasterIndex instead of getIndex. In the next update this function will be removed');
  let output;
  for(let i = 0; i< arr.length; i++) {
     if(number === arr[i]) {
       output = i;
     }
  }
  return output;
}

function getFasterIndex(number) {
  return arr.findIndex((ele) => ele === number);
}

In version 2 we are warning the user to use getFasterIndex instead of getIndex.

How error, info, warn differs from console.log?

These are almost equal to console.log. But the point is we can write the code with more semantical meaning 🔥.

console.group, console.groupCollapsed and console.groupend

Grouping the messages under some section is really useful for segregating the console messages 💡. console.group creates the new group, console.groupEnd ends the current group. console.groupCollapsed is same as console.group, except the group is initially closed when it's logged to the Console.

console.group('Errors');
console.error('this method is not defined');
console.error('Browser will not support this feature');
console.groupEnd();
console.groupCollapsed('Warnings')
console.warn('You Should update your package');
console.warn('More info will give more result');
console.groupEnd();

It will give the output as

console.table

It displays the tabular data as table(array or object). Suppose you have a situation like you want to see the properties with values quickly instead of logging the object and opening it to view the properties with the values 😜. for these situations, you can use this feature.

let infoObj = {
  name: 'Alwar', 
  age: 23,
  'marital-status': 'single', 
  education: 'B.E(ECE)', 
  skills: 'HTML, CSS, JS',
  country: 'India'
};
console.table(infoObj);

It will give the output as

console.trace

It displays the stack trace to the Web Console. I personally loved this feature, because we can able to track the flow of the code with the help of this feature ✨.

  function func1() {
    func2();
  }

  function func2() {
    func3();
  }

  function func3() {
    console.trace();
  }

  func1();

Here we are getting the output as

console.time and console.timeEnd

Actually this is the coolest feature in the console API. Because we can able to monitor the performance(how much time will it take to complete the task) with the help of these features 🔥. For example, we have the following two codes. I want to check which code gives the good performance.

code 1:

console.time('variable scope test');
let a = 10;
function getElement() {
  console.log(a);
}
console.timeEnd('variable scope test');

code 2:

console.time('variable scope test');

function getElement() {
  let a = 10;
  console.log(a);
}
console.timeEnd('variable scope test');

code 1 gives the output as variable scope test: 0.86181640625ms and code 2 gives the output as variable scope test: 0.005126953125ms. Therefore we can conclude the code 2 is faster than code 1. If you want to know how code 2 deserves a good performance, then read the below post.

How variable scoping affects the performance

Alwar G ・ Jun 26 '20

#html #javascript #beginners #node

I hope you enjoyed this post 🙏. I personally believe that better code comes from better debugging. Here I have consolidated the console debugging process. Maybe you are from a different debugging process. Feel free to post your commands if you want to share something and also remember that reading the post without reaction is injurious to writers 😜.

Dazzling Form CSS Pseudo-classes 🤩

Alwar G — Wed, 29 Jul 2020 08:24:02 +0000

As a web developer, we all should work on forms. I always curious about form styles while working on the form.

Here I am going to tell you about some CSS Pseudo-classes that will help to improve the usability of the form.

1) placeholder-shown

We are aware about placeholder pseudo-class to style the placeholder text. But if we want to style the input element during the presence of placeholder text, then what should we do? Here placeholder-shown will comes into play 🔥 .

In this example we are changing the border color based on the placeholder text presence

2) focus-within

We know focus pseudo-class. However, If we have cases like changing the background color of the form while focusing the input element,
should we use javascript? I don't think so 🤫

Because we have wonderful focus-within Pseudo-class for changing the styles of the parent element.

Here we are changing the styles of the form if the input element is focussed.

3) required

As the name implies this pseudo-class apply the styles only on the element which are having the required attribute. By using this pseudo-class, we can highlight which elements should be filled.

In the above example, we are highlighting the required input border-color

4) disabled

The most common use case of disabled state is the styling cursor to not-allowed for telling the the user which element is disabled.

Let's see the below example

5) in-range and out-of-range

While working with number fields, we can come across the cases like given number should be in the particular region.
I wrote the post about the number range. Kindly refer this

Ranged Input notification without Javascript

Alwar G ・ Jul 7 '20

#html #css #codenewbie #beginners

Thanks for reading this post 😍. I hope you learned something interesting. If You want to share something, kindly post your comments, and also don't forget to give your reactions to this post.

Powerful @property 🔥

Alwar G — Fri, 24 Jul 2020 09:00:31 +0000

After reading the wonderful post by @una, I know what is @property in CSS?

First of all, it's a CSS Houdini custom property. If you don't know what is CSS Houdini, then read this first.

ok, let's start.

CSS syntax:

// For Chromium 85 and above
  @property --MyColor {
    syntax: '<color>';
    initial-value: red;
    inherits: false;
  }

If your Chromium browser is from 78 and above and below 85, then you should include some javascript code to make this functionality to work.

Fallback JS code:

CSS.registerProperty({
  name: '--MyColor',
  syntax: '<color>',
  initialValue: 'red',
  inherits: false
});

structure:

name - name of the property(eg: myColor, columnPercentage, etc...).
syntax - syntax of the property.
Allowable values are

1). length

2). number

3). percentage

4). length-percentage

5). color

6). image

7). url

8). integer

9). angle

10). time

11). resolution

12). transform-list

13). transform-function

14). custom-ident
initial-value - Begining value of the property
inherits - Defines whether inherit the value from the parent or not

After knowing this thing as a web developer, you might have the following question.

How it defers from normal CSS variables?🤔

In the CSS variable, we can only give value. But using the @property, we can define the syntax like value should be in color.

So, we can write the code with a more semantical meaning 🔥.

Let's explore this property with the following Example

Note:

We can able to overwrite the values in the particular block like below.

  @property --Mycolor {
  syntax: '<color>';
  initial-value: red;
  inherits: false;
}
.text {
  --Mycolor: blue;
  color: var(--Mycolor); // blue
}

If we give invalid value, then it will back off to the initial value. for example, if we give some number value(67) in the color property, then it will back off to the initial value(red).

.text {
  --Mycolor: 67;
  color: var(--Mycolor); // red
}

I hope you enjoyed this post 😍. Thanks for reading.

Source Url: https://web.dev/at-property/

First chrome Extension

Alwar G — Fri, 24 Jul 2020 05:44:45 +0000

I published my first chrome extension for minifying/expanding the blocks({...}) at the files in the GitLab

While Minifying

While Expanding

Source Link:

https://chrome.google.com/webstore/detail/gitlab-fold/ieghndfegpckpaipimgihlojdjpcppmh/related?hl=en