Forem: imsabir

Alert!! Operators are Functions in Javascript ??

imsabir — Fri, 02 Dec 2022 05:37:46 +0000

An operator is actually a special function that are written in your code.

Generally, operators take two parameters and return one result.

Let's look at an example.

var a = 3 + 4;
console.log(a); //7

Quite easy to guess what you will see on screen
Seven i.e. 3+4 = 7

No rocket science in this.

But
** How did the JavaScript engine do that? **

How did it know that this was my intent to add three and four?

Well, code, saw the plus sign and added these two numbers.

This plus sign is an operator.

It's the addition operator and it's actually a function under the hood.

It would be as if I declared a function and instead of giving it the name add and instead, simply gave it the name plus.
Gave it two number and then returned.

function +(3,4){
   //
}

If this was a function name, I would then put parentheses and pass three and four to it, and that would have been a normal function call like +(3,4) instead of 3+4.

But this as other programming languages follow the process so does javascript. This notation is known as 'Infix Notation'.

Infix means that the function name, the operator, sits between the two parameters.

So, instead of +(3,4), calling the function this way.

Say, we remove the parentheses, and the comma so, it will become +3 4.This is called prefix notation.

And if I put the plus sign at the end. This is called postfix notation.

There are other operators.
Like - minus,* multiplication,>, <.
console.log this value.

In 4>3 or 3<4, this is a function, a special one, because the greater than function, it accepts two numbers and returns a Boolean.

That these parameters are being passed to those functions and

a value is being returned.

And inside those functions, there is pre-written code, essentially, for you that the JavaScript language, the engine provides to do, or run, or to invoke these functions.

So, we saw that operators are functions.

Keep Coding until I next Camp !!

Cheers

Method vs Function in Javascript

imsabir — Tue, 08 Mar 2022 06:56:12 +0000

In Javascript every function is an object (A).
An Object is collection of {key:value} pair.

As per MDN:

A method is a function which is a property of an object. There are two kind of methods: Instance Methods which are built-in tasks performed by an object instance, or Static Methods which are tasks that are called directly on an object constructor.

Values can be

*-> Primative: * Primative implies to data type such as number, string,boolean or can be another pair of object.

-> Function: Since its property of an object, so function is called as Method .

So, does it means that every function is a method but every method is not a function ? No

-> If a function is within the lexical environment / environment of an object, then that function is termed as method, we can invoke that by OurObject.OurMethod() (B)

var OurObject= {
name : "John snow",
OurMethod: function someFun(paramA, paramB) {
    // some code..
}

-> A pure function is, a function which have no object associated with it.

function func(param1, ...args){
 // some code...
}

As per Point A, we are saying every function is an object in Javascript, so, a function within within a function will be termed as method of that function.

From the book ** JavaScript Patterns by Stoyan Stefanov** covers your questions in detail. Here's a quote from the book on this subject:

So it could happen that a function A, being an object, has properties and methods, one of which happens to be another function B. Then B can accept a function C as an argument and, when executed, can return another function D.

Lastly, I would like to give very basic example. Everyone knows that arrays have different methods.

EXACTLY, different METHODS not FUNCTIONS. Like push(), pop(),slice(),splice()`.

Why they are methods?

They are methods because this functions are an part of an object, so as per point B, There environment is object, so they are termed as METHODS.

Cheers!!

For more such update follow @msabir

{} - Object Literals in Javascript

imsabir — Mon, 07 Mar 2022 05:08:58 +0000

{} is object literal syntax.
let say
const circle = {};

Above circle is returning an object.

Object in Javascript is essentially collection of key-value pair.

const circle = {
    radius: 1,
    location: {
       x: 1,
       y: 1
    },
    draw: function() {
     console.log('draw');
    }
 };

This circle object have 3 members: radius, location and draw

If a member is

function then it refers as method(), so draw is method.
Other members are called as properties.

Now, you can access the method or property using the . notation like:
circle.draw() and it will output, draw in console.

So, this is most commonly used method of defining an object.
You, can also define an object using factories and constructors.

How factories and constructors works and what is the other way of accessing the object will be explained in next blog.

Follow @msabir to keep yourself updated.

Cheers.

MDN New Design with new contents

imsabir — Thu, 03 Mar 2022 05:38:29 +0000

So, this year MDN Web Doc revamps there website designs and contents.
Here you can see MDN Web Docs
Also find the Reference link at the bottom of this article.

Lets quickly go through what's new there:

Brand new logo. M monogram using underscore to convey the
process of writing code.
Trending and favorite dark mode is added.
Completely new homepage with search in center and blog articles
below that.
Soon, MDN will come up with MDN Plus. MDN Plus is subscription
based module, which will include more content. As per MDN Docs,
notifications, article collections and an offline experience
might be the part of this plan.

Some important links:

And much more are there, Go and explore it.

Add the links in comment which you found to be new in MDN.

Cheers!!

Javascript: Spread Operators CheetSheet

imsabir — Wed, 02 Mar 2022 06:36:08 +0000

You might have heard about this Spread Operators and be are using it too in everyday Developement.

Syntax: (...)

Definition: According to MDN Web Docs

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Use case scenario: We will see this with comparing normal arrays method, so this can be helpful to everyone including who didn't used it as well as who is also familiar with it.

1. String to Array with Spread:

const myName = "Jhon Doe";
const convertMyNameToArray = [...myName];
console.log(convertMyNameToArray);
//Output: Array (8)[ J,h,o,n, ,D,o,e ]

2. Spread for Merging Array:


const array1 = [50,150,250];
const array2 = [100,200,300];
const mergedArray = [
  ...array1,
  ...array2
]
console.log(mergedArray);
//Output: Array(6)[ 50,150,250,100,200,300 ]

3. Cloning Array using Spread:

//Without Spread Operator:
const animals = ['lion','tiger','zebra'];
const wildAnimals = animals;

wildAnimals.push('elephant')
console.log(animals);
//Output: Array (4)[ lion,tiger,zebra,elephant ]
//Here original array is affected although we pushed in cloned array.


//With Spread Operator:
const animals = ['lion','tiger','zebra'];
const wildAnimals = [...animals];
wildAnimals.push('elephant');
console.log(animals)
//Output: Array (3)[ lion,tiger,zebra ]
//Here original array is NOT affected

Do you know why it behave like this? Stay tune I am brining another blog for explaining this. Why seprate blog? because required to understand the concepts of data types and its right now out of context of this blog.

4. Set Object to Array

//Creating a new Set Object
const flowersSet = new Set(['rose','lotus','lilly']);
console.log(flowersSet);
//Output: Set (3) { rose=> rose,lotus=> lotus,lilly=> lilly }


//Converting the Set Object to Array
const newFlowerArray = [...flowersSet];
console.log(newFlowerArray);
//Output: Array (3)[ rose,lotus,lilly ]

5. Nodelist to Array:

//create nodelist object
const h1s = document.querySelectorAll('h1');

//convert nodelist to an array
const h1sArray = [...h1s];

5. Min or Max value from an array:

//USING APPLY
const ages = [21,52,55]
const elderPerson = Math.min.apply(Math,ages); //21
const younderPerson = Math.max.apply(Math,ages); //55

//USING Spread
const elderPerson = Math.min(...ages); //21
const younderPerson = Math.max(...ages); //55

Spread Operator for Objects:

const user1 = {
    name: 'Jhon',
    age: 21,
};

const user2 = {
    name: "Doe",
    dob: "5th Jan 1990" 
};

const mergedUsers = {...user1, ...user2};
console.log(mergedUsers)
//Output: {name: 'Doe', age: 21, dob: '5th Jan 1990'}

Follow @msabir for more such updates.

Cheers!

What is connect()() function in redux or reactjs ?

imsabir — Tue, 01 Mar 2022 06:19:48 +0000

In redux, we usually comes across connect()() syntax.

Everyone knows that, connect()() function in redux is used for connecting the component with store.

But under the hood, what it exactly means? What can we call such functions ? Is this are normal function like foo() thing ?

Lets see whats its exactly:

What it is knowns as ?
Currying: This methodology or syntax signature of function which takes multiple arguments one at a time is known as 'Curried function' or in short 'Currying'

Is it same as normal / partial function foo()?
Curry: lets you call a function, splitting it in multiple calls, providing one argument per-call.

Partial: lets you call a function, splitting it in multiple calls, providing multiple arguments per-call.

Basically both are same, Currying function helps you to manage code better than partial function and that's the reason on architecture level, usually you will come across curry functions.

Example: Lets do a sum using both partial and curry function:

Partial function:

function sum_partial(a,b,c){
    return a+b+c;
}

Curried Function:

function sum_curried(a) {
    return function (b) {
        return function (c)  {
            return a + b + c
        }
    }
}

Calling partial function:

let res = sum_partial(1, 2, 3);
console.log(res); //6

Calling Curried function:

//Method ONE
let sc1 = sum_curried(1);
let sc2 = sc1(2);
let res2 = sc2(3);
console.log(res2); //6

Short METHOD OR Similar to connect()() in redux

let res3 = sum_curried(1)(2)(3);
console.log(res3); //6

Working JS Fiddle here

For in deep working of connect go here
For more such contents follow @msabir

Cheers!!

Javascript: [] ==![] is true ???

imsabir — Mon, 28 Feb 2022 17:31:41 +0000

Array is equal not array:

[] == ![]; // -> true

Explanation:

The abstract equality operator converts both sides to numbers to compare them, and both sides become the number 0 for different reasons.

Arrays are truthy, so on the right, the opposite of a truthy value is false, which is then coerced to 0.

On the left, however, an empty array is coerced to a number without becoming a Boolean first, and empty arrays are coerced to 0, despite being truthy.

Here is how this expression simplifies:

+[] == +![];
0 == +false;
0 == 0;
true;

Follow @msabir for more such contents

ES2022 brings at() method for array

imsabir — Fri, 25 Feb 2022 14:54:59 +0000

What is ES2022?
For those who dont know, ES2022 OR EcmaScript 2022 is standard for scripting developed with the cooperation of Netscape ** and **Microsoft **and mainly derived from Netscape's **JavaScript, the widely-used scripting language that is used in Web pages to affect how they look or behave for the user.

Its abbreviated to ES1, ES2, ES3, ES5, and ES6. Since 2016 new versions are named by year (ECMAScript 2016 / 2017 / 2018).

const fruits = ['apple','banana','mango','custard'];

Now, let say we want to access last element of fruits array, but what if you don't know length of array.

How will you do that?
Well, there are different approaches to achieve this:

Using length property of array:

let lastElement = fruits[fruits.length - 1]; console.log(lastElement );

Using the slice() method:

let lastElement = fruits.slice(-1);console.log(lastElement );

Using the pop() method:

let lastElement = fruits.pop();console.log(lastElement);

But if you look into this methods, this methods main objective is not to output the last element of array but we are manipulating in such a way that its gives last element of array. Also, somewere they have performance issue see here

So, ECMA2022 brings new method for us i.e., at(index).
With at(index), you can get the element at the provided index.
See example below


 console.log(fruits.at(1));  // apple
 console.log(fruits.at(-1)); // custard
 console.log(fruits.at(2)); // mango

Working jsfiddle is here :

Interestingly if you do fruits.at(-0) it gives you apple. So, merry go round.

Cheers!
Follow @msabir for more such contents.

Weird JavaScript - Part 2 🧑‍💻

imsabir — Fri, 25 Feb 2022 07:21:29 +0000

Heyy!! I am JavaScript 👋.
Instead Weird Javascript!!
I am back with new chapter, a new weridness.

Programming is usually taught by Examples!
- Niklaus Wirth (creator of the **PASCAL **Language)

Normally, we use to follow the principle technique of development as

👉 Wireframing
👉 UI/UX Design
👉 HTML / CSS Development
👉 JS with Test case Developement
👉 All Good -> We are good to deliver ✔️ .

🤪 Not exactly same but something like this.

After 2 days: page taking long time to load.

OMG!😨😨 What happened?
Till yesterday everything was okay.😨😯

Jhon investigating that and he found there are 2 functions in code and one of the function taking long time to execute.
❓❓❓
But he also struck❓❓
How to find which function is taking long time to execute?

Here is JavaScript for your help
💡💡💡💡💡 💯💯💯💯
According MDN Web Docs there is console.time(),console.timeLog() and console.timeEnd() methods.
Step:

Start the timer by writing console.time('some-label') with some label.
console.timeLog('label for start timer') will logs the current value of timer.
console.timeEnd('label for stop timer') will stop the timer and logs the time particular execution runs.

Just implement like below and get your leaky function. Cheers!!
💯💯💯

console.time("answer time");
// answer timer
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");

This way Jhon can check the which function taking how much time for executing the respective task and Jhon resolved the issue.

Ongoing quiz: can you solve this javascript basic (part 1 of this series)

Don't forget to follow @msabir for more such Weird JavaScript and understanding its under the hood concepts.

Till then take care.

Weird JavaScript - Part 1 🧑‍💻

imsabir — Thu, 24 Feb 2022 08:29:41 +0000

Hey I am Javascript!!
Instead Weird Javascript.

Its look simple but its not !!

As being said, lets move straight to see some Weird parts:

Note: You can comment your answers

WJS - 1

function bark() {
  console.log('🐕 barkk barkk!🐕 ');
}

bark.animal = 'dog';

🔥🔥 What you think it will output 👨‍💻 ?
Answer:
with bark.animal=dog, one more element is get added to function bark(), don't be surprise, Everthing is Object in JavaScript and thats why its wired

One more
WJS - 2

let number = 0;
console.log(number++);
console.log(++number);
console.log(number);

🔥🔥 What you think it will output 👨‍💻 ?
Answer:

let number = 0;
console.log(number++); // Output : 0 and then increment it by 1 its known as return then increment
console.log(++number); // Output: 2 AND its increment then return
console.log(number); // it will log latest value of number i.e. 2
0 2 2

Follow @msabir for more

4 Steps to be a Good Developer

imsabir — Wed, 23 Feb 2022 05:37:01 +0000

Always Chaulk outs the flow:

Before starting work or task you must write down the flow of your work even if its small thing like CRUD i.e. Create Read Update Delete functionality. Its should be your must rule. It helps you a lot for your time management. Also, with the help of this flow, you will come to know many loopholes which might be missed by you while developing the same.

Always take a break when you get stressed :

When you get stuck while coding. Remember to take a small break. It's not only important but it's one the best activity one developer must follow. The stressed developer takes more time to complete the task while on the other hand, free-minded developers complete the same task in a small time.
Refreshments like helping the other teammates in there developing issues, small chitchat or mostly follow COFFEE With Code thing.

Follow and Read the online blogs:

Internet is vast and everyone has access to it. Make proper use of your time and internet. Follow the technical websites, blogs, articles of your interest. Things are changing really fast in today's world and it's very important for one to keep updated ourself. Following are some of the links to get started with:

Dev.to
David Walsh
Smashing Magazine Many more are there, just google it.

Always be flexible to grab any opportunity

Being tech-savvy, you should always be ready to catch any opportunity that came between your way. With changing tech stack you should be flexible to jump on required stack according to your project.
It not only helps you to grow as a developer but also it makes you energetic to go through the new technologies. Learn new things. We have many online tutorials to kick start this like Udemy and many more out there. Also at the same time, you need to keep your USP (the main domain of work) strong.

Grow with technology with keeping mastery in your domain.

9 Ways to Pass Drupal Acquia Site Studio Certification

imsabir — Tue, 22 Feb 2022 16:41:38 +0000

One of the most popular Drupal developer examinations is the Site Studio 6.x Exam. This exam verifies that your Site Studio Drupal concepts are clear and that you are qualified to work on Drupal projects. This exam also validates that you are professionally expert to work and deliver the project as well as you have good understanding of Acquia and Drupal Platform.

Acquia has a number of different levels and examination modules. In this article, we'll look at how to pass the Acquia Site Studio 6.x Exam. What are the resources available for preparation, how can we apply for exam, types of question can be asked in examination, how its certification is useful and some of the important links for reference as well as the Pro tips which can help you at the time of examination?

Examination Syllabus:
Site Studio examination divided into 5 sections with every section having its own percentage criterion as
mentioned below:

1. Website Settings and Configuration - 20%
2. Using the Style Builder - 15%
3. Building the Structure of a Site - 20%
4. Using and Creating Components - 30%
5. Miscellaneous Concepts - 15%

visit: Study Guide

Exam specific information:

✓ The exam is one hour long (60 minutes) and has 40 questions.
✓ Multiple-choice questions will be asked (Multiple Choice Question).
✓ A question can have a single valid answer or numerous correct responses.
✓ There may be scenario-based inquiries, such as "How will XYZ be done if the client wants to undertake XYZ?"
✓ You may be asked to select steps to build varied functions, etc., in questions based on steps with multiple choice correct answers.
✓ For questions, there are no negative marks.
✓ A minimum passing score of 65 percent is required. In other words, you must properly answer 26 of the 40 questions.
✓ You have a second chance if you failed the first time.

Exam Pro Tip:

- There's a good probability that the question will be based on the data and statistics presented. You will have an advantage if you have some basic Drupal understanding.
- One of the most important things is time management. Spend no more than 1.5 minutes on a question.
- A good or intermediate command of the English language is required. A good command of the English language is required. Because the exam is being conducted in the United States, the
paper language is at that level. The majority of questions are not straightforward, but having a good command of the English language might assist you in understanding the technique behind the question and determining the proper alternative.
- Arrive at the examination hall at least an hour or half an hour ahead of time. Alternatively, if you're only having one. If you're taking an online exam, be sure you have a webcam set up on
your computer.
- Listen to music and relax instead of studying or preparing for the exam 2-4 hours before the exam.
- There are also two exam retakes available.

Exam Preparation:

There is no other mantra for passing such an exam except Practice! Practice! And then there's Practice!

According to this link: https://cohesiondocs.acquia.com/6.1/user-guide/getting-started, which contains the course specifics and documentation, you must study all of the documents thoroughly without skipping any minor details. Even Pro Tips, such as Green Background Color Tips, or Alerts, such as Yellow Background Color Tips, are crucial.

You may ensure that you will not fail the exam by thoroughly reading the documentation and comprehending it. Understanding the question is very crucial, because even a simple question can be
complicated, and all alternatives appear to be correct at first glance.

As the saying goes, theory teaches us nothing, but real >experiences help us comprehend things better.

Acquia has followed this principle, and unexpectedly, Acquia has provided us with a sample account to practice the things listed in the literature, and it's pretty simple to set up. We'll go over how to do so later, but first remember that

> Not only should you read the documentation, but you should also
practice on a demo account.

While practicing in the sandbox or on a sample account, make sure you master the cohesion menus and their step-by-step process. There's a chance they'll inquire about where you can get X module. Where can you view the Y functionality, for example? It doesn't matter what X and Y are.

How to Plan for Preparation:

1. First, focus on the area of the syllabus that has the lowest percentage of students. Follow the steps in the practical technique, study the documentation, and test in a sandbox account. The steps to create a sandbox account are outlined below.
2. Then, one by one, work your way through the syllabus, starting with the lowest percentage syllabus and working your way up to the highest percentage syllabus.
3. If you follow practical technique and devote at least 4–5 hours to studying this module, you should be able to prepare for the exam in around 15–30 days.
4. When you've finished with everything, practice configuring components and templates with Drupal View, as most scenarios-based questions come from this module.

How to setup demo Site Studio?

1. Visit Request Demo Sandbox account to sign up.
2. Validate the email address and follow the email's instructions.
3. After that, your demo account will be set up, and you'll be good to go.
4. You will be given a link to a demo account, which you will be able to access from any system by
logging in with the credentials provided by Acquia through email.

How to apply for examination:

1. Visit Create Account for Acquia Examination to new account.
2. Then go to https://www.webassessor.com/wa.do?page=enterCatalog&tabs=7 and register.
3. Choose a Module and then a test.
4. Choose the type of exam after you've chosen an exam. Exams can be conducted both online and in person.
5. Then make your payment.
6. The hall ticket for the same will now be sent to you through email as well as in your webassessor.com account.
7. That set has been reserved for you.

What to do after exam completion?

1. After you've completed the examination, you'll be notified of the results right away.
2. If you passed, your record will be updated here after 24 hours:
Acquia certification Registry. Simply apply the filter, and your name, along with other pertinent information, will appear.
3. You will also receive a certificate if you pass the exam. Along with the certificate, you will receive the Acquia Badge, which you can proudly display wherever.

Learning Reference Link:

1. Acquia's main site is located at https://www.acquia.com/products/drupal-cloud/site-studio.
2. Site Studio documentation is available at https://sitestudiodocs.acquia.com/6.6. After logging in,
you'll be able to access a number of video tutorials on the subject.

Important Reference Link:

1. Study Guide: https://docs.acquia.com/certification/study-guides/acquia-site-studio-6.x-sitebuilder/#study-guide
2. Complete Documentation: https://cohesiondocs.acquia.com/6.1/user-guide/getting-started
3. Demo Site: https://www.acquia.com/about-us/contact/request-a-demo. OR https://sitestudiodocs.acquia.com/6.4/user-guide/try-uikit-get-sandbox.
4. Exam Registration: https://www.webassessor.com/wa.do?page=createAccount&branding=ACQUIA
5. Certification Registry: https://certification.acquia.com/registry

Conclusion (9 WAYS):

1. Read the entire manual without skipping a beat.
2. Practical experience is required; without it, passing this exam would be difficult.
3. In a sandbox account, create a Demo blog section, header template, menu templates, components, and play around with settings; the more you experiment, the better you understand.
4. Remember that the exam questions are the trickier portion, therefore having a good grasp of the English language will be beneficial.
5. Never do any studying the night before an exam. Simply relax and take it all in.
6. There will be multiple choice and single choice questions, with a total exam time of 60 minutes and 40 questions. There will be no negative marking.
7. Always read the question twice before choosing an answer, because most of the time all of the answers appear to be correct.
8. Never underestimate a two-word sentence; you never know when it will become a question, and you will need to respond.
9. Finally, repeat step 1 on a daily basis. Point 1 will assist you in a case where you are stuck and have no idea what to do; it is the most basic portion of the module.