What it means to be an developer?

Neel Dedhia — Fri, 11 Feb 2022 07:31:32 +0000

Hey folks, welcome to the first post of #DevInit_withNeel!
We all want to be a developer, but do we really know who a developer really is, what it means to be one? 🤔

It's quite easy & simple to just learn some programming language and name yourself as a developer since it's not being given by any examined authority. But you will surely be judged among the professionals when don't meet up to the level of expectations.

Let's figure out the roadmap to becoming a developer and where are you on this journey:

Typist: A person who just types the code but does not produce any relevant output to solve the problem. One might type code already written up somewhere, either for the purpose of copy-pasting or for language migration.

Programmer: This level of folks are expected to have a proficiency over language/s. Also, they are well known at Data Structures, Algorithms, Version Controls and produce valuable and optimized outputs.
Here you might think that this is what a developer does, but the hard truth is there's a lot more and this is just a small part of it.

Developer: Apart from writing valuable and optimized solutions their professionalism lies in building versatile and scalable software architecture, refactoring the solutions, providing efficiency at computational & storage resources, etc.

Intermediate Developer: Someone, who is one the way and in-between programmer & developer. Since this journey is long with loads of stuff to master at. This is where I am currently and growing ahead 🚀

In developer, I have mentioned "etc" at the end since I am on my way to it so I mentioned what all so far I have figured it out. Let me know in the comments what are the other things a developer should be known of 💭

That's all folks for today, I hope this read would help you to know where you are and where have to go towards.

See you all soon again!

Find me on internet at https://neeldedhia.bio.link/

Console in JS other than console.log()

Neel Dedhia — Wed, 29 Dec 2021 17:09:01 +0000

Hey JS folks, we all have been using a very popular method console.log() for things apart from genuine logging. Most of us, once in a lifetime would have come across all the methods console object has to offer apart from console.log(), despite these we still tend to use .log() at times!

Today, once again when I went through the console object docs on MDN, a thought crossed my mind, what could be the reason we aren't adaptable to the other method in normal scenarios?

To get a better insight on this, I had initiated a poll on LinkedIn to ask my connections their thought and here are the results.

From the results, it is seen that majority of people have found console.log() easy and quick to use. But, all these votes indirectly hint at one answer that is Unawareness. How? let me explain to you…

One uses any method which is either well known or has seen them the most while learning (this makes us easy & quick to re-use in real scenarios) the best example for this could be "variable i in loops".
If one is unaware of the ability of a function and how can it make your code robust and look good, then one may never find it needful in using.

The console.log() is only to put a message which is not strongly bound to the logical part of the code, it can be used as an affirmation to something. Eg: "User landed homepage from google-search". The other methods offered by the console are bound to specific usage under special scenarios. Using them increases our code & console readability.

Let me show you a few methods which have real meaning and application and I hope it would help you to switch from console.log() then onwards.

1. console.count() & console.countReset()

Let's assume you want to keep a count of how many click the user makes on the button. The code with .log() might look like this 👇

let userClickCounter = 0;
function watchUserClicks(){
  userClickCounter++;
  console.log(`User Clicked ${userClickCounter}`);
}
function resetCounter(){
  userClickCounter = 0;
  console.log("User Clicked reset");
}
</script>
<button onclick="watchUserClicks()">Click Me to without pause</button>
<button onclick="resetCounter()">Reset me if you pause</button>

Now. let me show you the other way 👇

function watchUserClicks(){
  console.count(`User Clicked`);
}
function resetCounter(){
  console.log("User Clicked");
}
</script>

Here the need for variable and its related code is eliminated thereby, making the code optimal and readable.

2. console.dir()

This method shows all the properties of the JS Object. The console.log() prints out toString representation whereas console.dir() prints out a navigatable tree. Check out the difference below 👇

This method comes to the real help when you want to show a single Dom Element like this 👇

3. console.trace()

If you are working on a very complex code architecture wherein the function you are writing has multiple call sources(it can be called from various methods directly or indirectly). You're function isn't working for some scenario and you don't who is the one calling and how is it called at caller's end. The trace() method will come to the rescue and help you getting to know trace of origin of this function call. This would save your tones of time about getting to know the code architecture just for one single call messing up. Let's see this with the example below👇

const myTask = (task) => youDoIt(task);
const youDoIt = (task) => letJuniorDoIt(task);
const letJuniorDoIt = (task) => forwardToFriend(task);
const forwardToFriend = (task) => forwardToLoyalFriend(task);
const forwardToLoyalFriend = (task) => {
 if(!!task){
  console.log('Worked on task: ' + task);
 }
 else{
  // !! will convert undefined, null, false, 0, '',  into false
  console.trace('Invalid task to work on'); 
 } 
}
// You aren't aware of where these lines are written in the project
myTask('Priority Task');
forwardToFriend('Bug in the code');
letJuniorDoIt('Easy Task');
forwardToLoyalFriend('Job Saver task');
youDoIt('');

Let's see how trace() method helps you here:

4. console.time() and console.timeEnd()

When you are working on a complex algorithm, time is one of the main factor you need to look on simultaneously. This is where you can use these console methods to know how much time your algorithm is taking to execute.

function Factorial(n) {
    let fact=1;
    console.time('Calculate Factorial');
for (let i = 2; i <= n; i++){
        fact = fact * i;
    }
console.timeEnd('Calculate Factorial');
    return fact;
}

5. console.table()

The best method vs console.log() to show an object in JS. This method is used to represent complex objects or arrays in tabular format. This method takes away all the hard work of inspecting at an object that console.log gives. With .table() you can easily view the objects sort them based on columns and traverse through.

const teamData = {
    Lead: {
        id: 'L01',
        firstname: "John",
        email: "john@gmail.com"
    },
    manager: {
        id: 'M01',
        firstname: "Alice",
        email: "aliceInwander@gmail.com"
    },
    developer: {
        id: 'D01',
        firstname: "Bob",
        email: "bobthebuilder@gmail.com"
    },
    tester: {
        id: 'T01',
        firstname: 'Dexter',
        email: 'dexterLab@gmail.com'
    }
}
console.table(teamData);

This method also gives a cherry for the cake. You can print selective columns from an object like below 👇

console.table(teamData, ['id', 'email']);

There are other methods too and I would like to get to know from you which other methods you find are insightful and better than using console.log. Let me know if you need part 2 of this article discussing the rest of the methods console object has to offer.

I hope this read was fruitful and now you won't fall in any of the voting options that I had mentioned at the beginning. Share this article with your friends and colleagues at work, to make them aware of the hidden gems JS console has and make their life easier too.

Lastly, introducing myself

Hey 👋 I'm Neel Dedhia, a full-stack web developer I like to write articles about concepts that are odds but yet important towards growth in knowledge in tech. Also, I like to give and share my knowledge with my connections to mutually grow here with updated resources. If you like reading this article and looking forward to seeing more or to discuss with me on such topics, you can follow me here or connect me from the below sources:
Portfolio - http://neeldedhia.bio.link/
Linkedin - https://www.linkedin.com/in/neel-dedhia/
Twitter - https://twitter.com/neel_dedhia
Dev.to - https://dev.to/neel_dedhia
Instagram - https://instagram.com/arsictography

Thank you! for reading till this end, wish you all a Merry Christmas and Happy New Year!

CSS Perspective WHW(What? How? When?)

Neel Dedhia — Sat, 12 Sep 2020 10:47:14 +0000

Hey Folks! join me to discuss WHW(what? how? when?) about CSS Perspective along with creative examples and some hidden secrets.

https://medium.com/@neeldedhia/css-perspective-whw-286262a505d8

Click the claps if you like it and let me know your thoughts in the comments section.

DEV Community: Neel Dedhia