DEV Community: Nasirul Islam

🌟 An Excellent Roadmap to Becoming a Back-End Engineer! 🌟

Nasirul Islam — Tue, 21 Jan 2025 17:10:18 +0000

Are you passionate about Back-End Development? Dreaming of becoming a world-class back-end engineer but unsure where to start or how to structure your learning journey?

I’m thrilled to share an excellent roadmap I’ve prepared that outlines a clear, step-by-step guide to mastering back-end development with C# and ASP.NET Core.

💡 Why is this roadmap special?

This roadmap is designed to guide anyone whether you're just starting or transitioning into back-end development through the essential skills, tools, and concepts needed to thrive in this field. From mastering C# fundamentals to working with databases, designing efficient APIs, and exploring cloud deployment, this plan covers it all.

✨ For those who dream big:

Every expert was once a beginner. If you're motivated to pursue this path, stay consistent, and believe in your ability to grow, there’s no limit to what you can achieve! This roadmap isn’t just a plan. It’s a pathway to fulfilling your goals and making an impact in the world of software engineering.

🤝 Let’s learn and grow together!

If you’re interested in back-end development and want to take your skills to the next level, feel free to connect with me! I’d love to share insights, exchange knowledge, and support you on your journey. Whether you’re starting from scratch or enhancing your expertise, we’re all in this together.

📥 Download the roadmap here.
Share your progress, ask questions, and don’t hesitate to reach out if you need guidance.

Nasirul Islam
nasirulislam866@gmail.com
https://github.com/Nasirul-Islam
https://www.linkedin.com/in/nasirul866/

MongoDB vs MySQL

Nasirul Islam — Thu, 23 Dec 2021 15:28:12 +0000

MongoDB

MongoDB is a cross-platform document-oriented database program. And MongoDB is a NoSQL database program. MongoDB uses documents like JSON with optional schema. MongoDB is developed by MongoDB Inc. and licensed under the Server Side Public License.

NoSQL Database

NoSQL Database is a non-relational Data Management System, that does not require a fixed schema. And NoSQL databases are databases that store data in a format other than relational tables. That's is, A NoSQL database provides a mechanism for storage and retrieval of data that is modeled in means other than the tabular relations used in relational databases. NoSQL database stands for “Not Only SQL” or “Not SQL.

MySQL

MySQL is an open-source relational database management system from the Oracle Corporation. Like other relational systems, MySQL stores data in tables and uses structured query language (SQL) for database access. When MySQL developers need to access data in an application, they merge data from multiple tables together in a process. In MySQL, we predefine our database schema and set up rules to govern the relationships between fields in our tables.

SQL Database

SQL stands for Structured Query Language which is basically a language used by databases. SQL lets you access and store, manipulate, and retrieve data within relational databases. Data in tables is stored in row and column format at the logical level, but physically it stores data in something called data pages. A data page is the fundamental unit of data storage in SQL Server and it is 8KB in size. Using SQL, you are able to interact with the database by writing queries, which when executed, return any results which meet its criteria.

Conclusion

From this tutorial, we have learned about MongoDB vs MySQL

Learned from the internet.

Thanks for reading

Reach out to me on:

React Virtual DOM and diffing- algorithm Simplified

Nasirul Islam — Wed, 22 Dec 2021 09:56:08 +0000

React:

React is JavaScript open-source library. Using which we can make various interactions in the UI.

JSX:

React gives us a markup syntax of its own, with which we can create a react element, called JSX. That is, JavaScript XML. It looks like HTML but not HTML.

React generates HTML code with JSX. Although we write the syntax of JSX inside the JavaScript file, although JavaScript does not understand JSX, we have to use a transpiler. For example Babel. Babel converts JSX codes to JavaScript.

Virtual DOM:

React creates elements for itself using its createsElements () function. By combining all the elements, he creates a separate dom inside himself. This dom is called Virtual Dom. React's virtual dom basically renders as much as the browser's dom has changed.

We can imagine the Virtual Dom as a simple tree. The different notes of which are one component. Whenever we change the state of a component, a tree is created first. Where the modified component and its child components are reconstructed. That is, React has two representations of the virtual dom. One is the state before it, and the other is the state after the change. React compares these two conditions.

Diffing-Algorithm:

React uses the "Diff" algorithm to do this comparison. With that, React can understand which places have changed. React then changes only the part of the dom where the change was made.

Conclusion:

Attempts have been made to simply explain the virtual DOM and diffing-algorithm without any explanation.

Thanks for reading

Reach out to me on:

this keyword and .call(), .apply(), .bind() method

Nasirul Islam — Tue, 21 Dec 2021 17:03:12 +0000

What is this keyword in javascript?

"this" keyword in JavaScript allows a function to be re-used in various execution contexts. That is, once a function is defined, it can be invoked for different objects using the "this" keyword. The current execution contact identifies an object when we invoke a method.

If you want to understand this keyword, you have to know some binding rules. We will discuss these step by step.

Implicit Binding

In the case of common JavaScript functions, if the function is preceded by a (.) Dot notation, then the object before the dot notation is the "this" or object inside the function. If the property of the object is not found then JavaScript takes the window as the object by default.

let blog = {
    name: 'Tapas',
    address: 'freecodecamp',
    message: function() {
        console.log(`${this.name} blogs on ${this.address}`);
    }
};

blog.message();

Explicit Binding:

If the function is not within an object, but if the function is in a global context, then when calling the function, it is necessary to specify which object will be "this" directly. This requires some built-in methods of JavaScript. The methods are:

let getName = function() {
     console.log(this.name);
 }

let user = {
   name: 'Tapas',
   address: 'Freecodecamp'  
 };

getName.call(user);

.call() method:

If the function is in the global context, then when invoked the function you have to specify which object will be "this" directly. This requires using JavaScript's built-in method .call(). .call() method takes an object as the first parameter of the method and many more parameters can be given later.

.apply() method:

In the same case, JavaScript's built-in method .apply() can be used. It works like the .call () method. However, the .apply() method takes an object as its first parameter and an array as its second parameter.

let getName = function(hobby1, hobby2) {
     console.log(this.name + ' likes ' + hobby1 + ' , ' + hobby2);
 }

let user = {
   name: 'Tapas',
   address: 'Bangalore'  
 };

let hobbies = ['Swimming', 'Blogging'];

getName.apply(user, hobbies);

.bind() method:

The .bind() method works just like the .call() method. However, the difference is that the .bind() method returns the instance of the function without directly calling the function and we can store it in a variable and call this variable as a function.

let getName = function(hobby1, hobby2) {
     console.log(this.name + ' likes ' + hobby1 + ' , ' + hobby2);
 }

let user = {
   name: 'Tapas',
   address: 'Bangalore'  
 };

let hobbies = ['Swimming', 'Blogging'];
let newFn = getName.bind(user, hobbies[0], hobbies[1]); 

newFn();

Window Binding:

If "this" is an object within a function, unless it is defined directly or indirectly, JavaScript takes window as the object by default. This is basically window binding.

Conclusion

From this tutorial, we have learned "this" keyword in javascript and .call(), .apply(), .bind() methods.

Reference

Thanks for reading

Reach out to me on:

JavaScript Array Methods

Nasirul Islam — Mon, 20 Dec 2021 07:31:44 +0000

What is the array method in JavaScript?

Array method in JavaScript is some of the built-in functions of JavaScript. Which we can apply to an array. Each method has different functions and features. Using which we can perform various tasks on an array. This saves us from having to write simple functions.

These are the array methods of JavaScript:

concat():

The concat() method is used to add two or more arrays. It does not change the existing array, but creates a new array and returns a copy of that array.

Example:

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

filter():

The filter() method creates a new array with each element of an array, with the elements that meet the conditions inside the function.

Example:

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

find():

The find() method returns the value of the first element of an array by comparing it with each element of an array. The element that meets the conditions inside the function.

Example:

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

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

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

findIndex():

The findIndex() method gives the index number of the first element of an array by comparing it with each element of an array. The component that meets the conditions inside the function. Otherwise, it returns -1, indicating that no element met the condition.

Example:

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

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 4

forEach():

The forEach() method calls a function once for each element of an array, and the function returns one element at a time.

Example:

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

includes():

The includes() method checks an array to see if it contains that specific element. And it returns true or false.

Example:

const array1 = [1, 2, 3];
console.log(array1.includes(2));
// expected output: true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// expected output: true
console.log(pets.includes('at'));
// expected output: false

indexOf():

The indexOf() method returns the first index of the specified element in the array, otherwise returns -1 if it is not found.

Example:

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

console.log(beasts.indexOf('giraffe'));
// expected output: -1

pop():

The pop() method removes the last element from an array and returns that element. And forms a new array with the rest of the elements except the last one. This method changes the length of the array.

Example:

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

shift():

The shift() method removes the first element from an array and returns that removed element. And forms a new array with all the other elements except the first one. This method changes the length of the array.

Example:

const array1 = [1, 2, 3];

console.log(array1.shift());
// expected output: 1

console.log(array1);
// expected output: Array [2, 3]

push():

The push() method adds new elements to the end of an array, forms a new array with the element at the end, and returns a new length. This method changes the length of the array.

Example:

const animals = ['pigs', 'goats', 'sheep'];

console.log(animals);
// expected output: Array ["pigs", "goats", "sheep"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "chickens", "cats", "dogs"]

unshift():

The unshift() method adds one or more new elements to the beginning of an array, forms a new array with the first elements, and returns a new length. This method changes the length of the array.

Example:

const array1 = [1, 2, 3];

console.log(array1);
// expected output: Array [1, 2, 3]

array1.unshift(4, 5)

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

Conclusion

From this tutorial, we have learned some common array methods. Part-2 will come soon with more details of the Array Method.

Reference

Thanks for reading

Reach out to me on:

What is ::before and ::after in CSS?

Nasirul Islam — Sun, 19 Dec 2021 10:24:29 +0000

What is ::before and ::after in CSS?

In CSS ::before and ::after is a type of pseudo-elements. This allows us to add something before or after an element without the use of HTML.

We use these types of pseudo-elements at different times when designing a website. The simplest example to understand, the bullet mark in front of the list. This way you can add text before or after an element if you want using pseudo-elements.

In this tutorial, we will discuss with examples, how to use ::before and ::after pseudo-elements to sort content on a web page. This tutorial will give you a good idea of how to use :: before and :: after pseudo-elements in CSS.

Pseudo Element in CSS

Pseudo-elements are visible elements on a web page that are not "in DOM" or created from HTML but inserted directly from CSS. It plays a helpful role in various web page designs. It beautifully supports different browsers.

A CSS pseudo-element is a keyword added to a CSS selector that lets you style a specific part of the selected element. For example, ::first-line can be used to change the font of the first line of a paragraph. Since, ::first-line, ::first-letter, ::before, and ::after is a pseudo-element. That's why we need to know about pseudo-element first. So, we are discussing about this.

To use pseudo-element you must enter, As a rule, double colons (::) after selector.
Like this syntax -

selector::pseudo-element { 
property: value; 
}

::before Pseudo-Element in CSS

The ::before selector inserts something before the content of each selected element. The ::before pseudo-element adds content that appears before an element on a web page. In most cases, it is used to add text before an element.

The ::before pseudo-element syntax is -

selector::before { 
property: value; 
}

::after Pseudo-Element in CSS

The ::after selector inserts something after the content of each selected element. The ::after pseudo-element adds content that appears after an element on a web page. In most cases, it is used to add text after an element.

The ::after pseudo-element syntax is -

selector::after  { 
property: value; 
}

Conclusion

The ::before and ::after pseudo-elements allow you to add content to a specific part of an element you have selected in a CSS rule. The simplest example, the ::before selector could be used to add text before a link. The ::after selector could be used to add a bullet sign after a paragraph of text.

Reference

Thanks for reading

Reach out to me on: