<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Eftykhar Rahman</title>
    <description>The latest articles on DEV Community by Eftykhar Rahman (@iamraufu).</description>
    <link>https://dev.to/iamraufu</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F630259%2F5f381538-d697-47d5-825a-8fb2245de0e7.jpg</url>
      <title>DEV Community: Eftykhar Rahman</title>
      <link>https://dev.to/iamraufu</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/iamraufu"/>
    <language>en</language>
    <item>
      <title>Top IT Company of Bangladesh</title>
      <dc:creator>Eftykhar Rahman</dc:creator>
      <pubDate>Wed, 06 Jul 2022 16:02:33 +0000</pubDate>
      <link>https://dev.to/iamraufu/top-it-company-of-bangladesh-1opf</link>
      <guid>https://dev.to/iamraufu/top-it-company-of-bangladesh-1opf</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feubck09unm8y3rvrc3ar.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feubck09unm8y3rvrc3ar.png" alt="Image description"&gt;&lt;/a&gt;&lt;a href="https://iamraufu.github.io/Top-IT-Company-of-Bangladesh" rel="noopener noreferrer"&gt;https://iamraufu.github.io/Top-IT-Company-of-Bangladesh&lt;/a&gt;&lt;br&gt;
You should work at startups in your early days 🚀&lt;/p&gt;

&lt;p&gt;I have heard the line several times from friends and seniors around. But, I have never found the startups to which I should apply. What are the startups which don't have a toxic culture and rather focus on the development of the employees? ✨&lt;/p&gt;

&lt;p&gt;Without the list of startups, I applied to almost any startup I found on the internet during my sophomore year. As a result, I was frustrated with the long working hours, work timing, lack of proper planning, and 50% of the promised payouts 🤯&lt;/p&gt;

&lt;p&gt;I have worked with a lot of organizations starting from early-age startups to tech giants. The reason I believe you should work in a startup is you work closely with the founders, you work in small teams consisting of people who are highly enthusiastic, build on top of the latest technology and ultimately you get a chance to work in a production environment. If you are applying for tech giants not pretty sure if you would get an interview call or even a test link. Even after you get the interview call it would most probably be a Data Structure Algorithm round so if you are into just dev, cracking those might be a bit difficult 😢&lt;/p&gt;

&lt;p&gt;Adding the names of 58 startups that are actively hiring 🔥&lt;/p&gt;

&lt;p&gt;10 Minute School    &lt;a href="https://10minuteschool.com/" rel="noopener noreferrer"&gt;https://10minuteschool.com/&lt;/a&gt;&lt;br&gt;
Alice Labs  &lt;a href="https://www.myalice.ai/" rel="noopener noreferrer"&gt;https://www.myalice.ai/&lt;/a&gt;&lt;br&gt;
Amagroup.io &lt;a href="https://amagroup.io/" rel="noopener noreferrer"&gt;https://amagroup.io/&lt;/a&gt;&lt;br&gt;
Appnap Technologies Limited &lt;a href="https://appnap.io/" rel="noopener noreferrer"&gt;https://appnap.io/&lt;/a&gt;&lt;br&gt;
APSIS   &lt;a href="https://apsissolutions.com/" rel="noopener noreferrer"&gt;https://apsissolutions.com/&lt;/a&gt;&lt;br&gt;
BJIT    &lt;a href="https://bjitgroup.com/" rel="noopener noreferrer"&gt;https://bjitgroup.com/&lt;/a&gt;&lt;br&gt;
bKash Limited   &lt;a href="https://www.bkash.com/" rel="noopener noreferrer"&gt;https://www.bkash.com/&lt;/a&gt;&lt;br&gt;
Brain Station 23    &lt;a href="https://brainstation-23.com/?ba" rel="noopener noreferrer"&gt;https://brainstation-23.com/?ba&lt;/a&gt;&lt;br&gt;
Cefalo Bangladesh Ltd.  &lt;a href="https://www.cefalo.com/en/" rel="noopener noreferrer"&gt;https://www.cefalo.com/en/&lt;/a&gt;&lt;br&gt;
CHEQ Life Style &lt;a href="https://www.cheqplease.com/" rel="noopener noreferrer"&gt;https://www.cheqplease.com/&lt;/a&gt;&lt;br&gt;
Circle Fintech  &lt;a href="https://www.circlefintech.com/" rel="noopener noreferrer"&gt;https://www.circlefintech.com/&lt;/a&gt;&lt;br&gt;
Craftsmen   &lt;a href="https://craftsmenltd.com/" rel="noopener noreferrer"&gt;https://craftsmenltd.com/&lt;/a&gt;&lt;br&gt;
Dynamic Solution Innovators Ltd.    &lt;a href="https://www.dsinnovators.com/" rel="noopener noreferrer"&gt;https://www.dsinnovators.com/&lt;/a&gt;&lt;br&gt;
Echologyx   &lt;a href="https://echologyx.com/" rel="noopener noreferrer"&gt;https://echologyx.com/&lt;/a&gt;&lt;br&gt;
Enosis Solutions    &lt;a href="https://www.enosisbd.com/" rel="noopener noreferrer"&gt;https://www.enosisbd.com/&lt;/a&gt;&lt;br&gt;
Eskimi DSP  &lt;a href="https://www.eskimi.com/" rel="noopener noreferrer"&gt;https://www.eskimi.com/&lt;/a&gt;&lt;br&gt;
Field Nation    &lt;a href="https://www.fieldnation.com/" rel="noopener noreferrer"&gt;https://www.fieldnation.com/&lt;/a&gt;&lt;br&gt;
Freeconvert &lt;a href="https://www.freeconvert.com/" rel="noopener noreferrer"&gt;https://www.freeconvert.com/&lt;/a&gt;&lt;br&gt;
Genesys &lt;a href="https://www.genesys.com/" rel="noopener noreferrer"&gt;https://www.genesys.com/&lt;/a&gt;&lt;br&gt;
iBOS Limited    &lt;a href="https://ibos.io/" rel="noopener noreferrer"&gt;https://ibos.io/&lt;/a&gt;&lt;br&gt;
Imum.io &lt;a href="https://imum.io/" rel="noopener noreferrer"&gt;https://imum.io/&lt;/a&gt;&lt;br&gt;
Infolytx    &lt;a href="https://www.infolytx.com/" rel="noopener noreferrer"&gt;https://www.infolytx.com/&lt;/a&gt;&lt;br&gt;
InsideMaps  &lt;a href="https://www.insidemaps.com/" rel="noopener noreferrer"&gt;https://www.insidemaps.com/&lt;/a&gt;&lt;br&gt;
Insightin Technology Bangladesh Ltd.    &lt;a href="https://insightintechnology.com/" rel="noopener noreferrer"&gt;https://insightintechnology.com/&lt;/a&gt;&lt;br&gt;
JobXprss (Job searching platform)   &lt;a href="https://www.jobxprss.com/" rel="noopener noreferrer"&gt;https://www.jobxprss.com/&lt;/a&gt;&lt;br&gt;
Kaz Software    &lt;a href="https://kaz.com.bd/" rel="noopener noreferrer"&gt;https://kaz.com.bd/&lt;/a&gt;&lt;br&gt;
MarketMuse  &lt;a href="https://www.marketmuse.com/" rel="noopener noreferrer"&gt;https://www.marketmuse.com/&lt;/a&gt;&lt;br&gt;
Momos.io    &lt;a href="https://www.momos.com/" rel="noopener noreferrer"&gt;https://www.momos.com/&lt;/a&gt;&lt;br&gt;
Monstarlab Bangladesh   &lt;a href="https://monstar-lab.com/bd/" rel="noopener noreferrer"&gt;https://monstar-lab.com/bd/&lt;/a&gt;&lt;br&gt;
Neovotech   &lt;a href="https://www.neovotech.com/" rel="noopener noreferrer"&gt;https://www.neovotech.com/&lt;/a&gt;&lt;br&gt;
NeuralEdge  &lt;a href="https://neuraledge.digital/" rel="noopener noreferrer"&gt;https://neuraledge.digital/&lt;/a&gt;&lt;br&gt;
NPXteraArk  &lt;a href="https://www.npxteraark.com/" rel="noopener noreferrer"&gt;https://www.npxteraark.com/&lt;/a&gt;&lt;br&gt;
Optimizely  &lt;a href="https://www.optimizely.com/" rel="noopener noreferrer"&gt;https://www.optimizely.com/&lt;/a&gt;&lt;br&gt;
Pathao  &lt;a href="https://pathao.com/bn/" rel="noopener noreferrer"&gt;https://pathao.com/bn/&lt;/a&gt;&lt;br&gt;
Portonics Limited   &lt;a href="https://portonics.com/" rel="noopener noreferrer"&gt;https://portonics.com/&lt;/a&gt;&lt;br&gt;
ReformedTech    &lt;a href="https://reformedtech.org/" rel="noopener noreferrer"&gt;https://reformedtech.org/&lt;/a&gt;&lt;br&gt;
ReliSource  &lt;a href="https://www.relisource.com/" rel="noopener noreferrer"&gt;https://www.relisource.com/&lt;/a&gt;&lt;br&gt;
Seedrs  &lt;a href="https://www.seedrs.com/" rel="noopener noreferrer"&gt;https://www.seedrs.com/&lt;/a&gt;&lt;br&gt;
SELISE Digital Platforms    &lt;a href="https://swiss.selise.ch/" rel="noopener noreferrer"&gt;https://swiss.selise.ch/&lt;/a&gt;&lt;br&gt;
Shellbehaken    &lt;a href="https://shellbeehaken.com/" rel="noopener noreferrer"&gt;https://shellbeehaken.com/&lt;/a&gt;&lt;br&gt;
ShopUp  &lt;a href="https://shopup.com.bd/" rel="noopener noreferrer"&gt;https://shopup.com.bd/&lt;/a&gt;&lt;br&gt;
SJ Innovation LLC   &lt;a href="https://www.sjinnovation.com/" rel="noopener noreferrer"&gt;https://www.sjinnovation.com/&lt;/a&gt;&lt;br&gt;
Softwrd &lt;a href="https://www.softwrd.ai/" rel="noopener noreferrer"&gt;https://www.softwrd.ai/&lt;/a&gt;&lt;br&gt;
Spring Rain Pvt Ltd &lt;a href="https://springrain.io/" rel="noopener noreferrer"&gt;https://springrain.io/&lt;/a&gt;&lt;br&gt;
Stibo DX    &lt;a href="https://www.stibodx.com/" rel="noopener noreferrer"&gt;https://www.stibodx.com/&lt;/a&gt;&lt;br&gt;
Strativ AB  &lt;a href="https://strativ.se/en/" rel="noopener noreferrer"&gt;https://strativ.se/en/&lt;/a&gt;&lt;br&gt;
Synesis IT Ltd. &lt;a href="https://synesisit.com.bd/" rel="noopener noreferrer"&gt;https://synesisit.com.bd/&lt;/a&gt;&lt;br&gt;
TestReach   &lt;a href="https://www.testreach.com/" rel="noopener noreferrer"&gt;https://www.testreach.com/&lt;/a&gt;&lt;br&gt;
ThemeXpert  &lt;a href="https://www.themexpert.com/" rel="noopener noreferrer"&gt;https://www.themexpert.com/&lt;/a&gt;&lt;br&gt;
Therap (BD) Ltd.    &lt;a href="https://therapbd.com/" rel="noopener noreferrer"&gt;https://therapbd.com/&lt;/a&gt;&lt;br&gt;
TigerIT Bangladesh Ltd. &lt;a href="https://www.tigerit.com/" rel="noopener noreferrer"&gt;https://www.tigerit.com/&lt;/a&gt;&lt;br&gt;
VISI/ONE    &lt;a href="https://www.visi-one.com/en" rel="noopener noreferrer"&gt;https://www.visi-one.com/en&lt;/a&gt;&lt;br&gt;
Vivasoft    &lt;a href="https://www.vivasoftltd.com/" rel="noopener noreferrer"&gt;https://www.vivasoftltd.com/&lt;/a&gt;&lt;br&gt;
weDevs  &lt;a href="https://wedevs.com/" rel="noopener noreferrer"&gt;https://wedevs.com/&lt;/a&gt;&lt;br&gt;
wellDev &lt;a href="https://www.welldev.io/" rel="noopener noreferrer"&gt;https://www.welldev.io/&lt;/a&gt;&lt;br&gt;
Xpeedstudio &lt;a href="https://xpeedstudio.com/" rel="noopener noreferrer"&gt;https://xpeedstudio.com/&lt;/a&gt;&lt;br&gt;
Zelf    &lt;a href="https://zelf.co/" rel="noopener noreferrer"&gt;https://zelf.co/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>topitcompany</category>
      <category>banglades</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>How to Become a Full Stack Web Developer | Practical Step by Step Frontend and Backend Guideline</title>
      <dc:creator>Eftykhar Rahman</dc:creator>
      <pubDate>Fri, 06 May 2022 21:20:13 +0000</pubDate>
      <link>https://dev.to/iamraufu/how-to-become-a-full-stack-web-developer-practical-step-by-step-frontend-and-backend-guideline-hme</link>
      <guid>https://dev.to/iamraufu/how-to-become-a-full-stack-web-developer-practical-step-by-step-frontend-and-backend-guideline-hme</guid>
      <description>&lt;p&gt;With countless job openings and promising new technologies, web development will continue growing in popularity absolutely everything is moving to the web. Web 3.0 is connecting the web to the blockchain which is never been a more exciting time to dive into the beautiful world of web development.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Become a Full Stack Web Developer | Practical Step by Step Frontend and Backend Guide</title>
      <dc:creator>Eftykhar Rahman</dc:creator>
      <pubDate>Tue, 22 Feb 2022 23:07:17 +0000</pubDate>
      <link>https://dev.to/iamraufu/become-a-full-stack-web-developer-practical-step-by-step-frontend-and-backend-guide-34af</link>
      <guid>https://dev.to/iamraufu/become-a-full-stack-web-developer-practical-step-by-step-frontend-and-backend-guide-34af</guid>
      <description>&lt;p&gt;With countless job openings and promising new technologies, web development will continue growing in popularity absolutely everything is moving to the web.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Web 3.0&lt;/strong&gt; is connecting the web to the blockchain which is never been a more exciting time to dive into the beautiful world of web development.&lt;/p&gt;

&lt;p&gt;When I was starting with web development, I wish that I could find an experienced developer who would tell me what they had to do to become a professional web developer. Unfortunately, I couldn’t find anyone. Now, I worked in the industry for many years and I want to share how I would learn web development If I was starting in 2022.&lt;/p&gt;

&lt;p&gt;Starting with web development can be overwhelming, I know this &lt;strong&gt;Full-Stack Developer roadmap&lt;/strong&gt; will guide you from bare beginnings to complete mastery. We will cover everything from the essential building blocks of the web to the most modern web development technologies so make sure to stick around even if you’re an experienced developer. By the end of this article, you’ll know precisely what you need to do to become an outstanding developer. Alongside this article, I’ve also prepared complete &lt;strong&gt;front-end&lt;/strong&gt; and &lt;strong&gt;back-end developer roadmaps&lt;/strong&gt; that cover absolutely everything. The guides will provide you with knowledge in step-by-step instructions and even include project ideas that you can build deploy and put in your portfolio to get a job.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;You can &lt;strong&gt;download&lt;/strong&gt; the ultimate guide and use it as a reference on your development journey whenever you’re unsure what to learn next. The link to these comprehensive guides is below the article and best of all it is completely free so make sure to scroll down and download the guides. After you download them, I would still strongly encourage you that you read this article until the end because although the guides are great as quick reference points. This article will provide you with &lt;strong&gt;absolutely everything&lt;/strong&gt; you need to &lt;strong&gt;become a professional web developer&lt;/strong&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Let’s start with the &lt;strong&gt;web developer roadmap&lt;/strong&gt;. To start with your web development journey, you’ll need &lt;strong&gt;two things&lt;/strong&gt;. The first one is a web browser either chrome or firefox that you most likely already have and the second one is a code editor. There are plenty of options to choose from. Still, the most popular one is &lt;strong&gt;Visual Studio Code&lt;/strong&gt;. It’s free easy to use and has amazing plugins, excellent community support and it’s the most widely used editor. Other options are Sublime Text, Atom, and then of course my recommendation would be Visual Studio Code. That’s it to start your entire Web Development career. You only need these two tools. No expensive hardware or software is required. That’s amazing!&lt;/p&gt;

&lt;p&gt;Now let’s dive into what you need to learn to become a web developer. The &lt;strong&gt;three main building blocks&lt;/strong&gt; of the Web that you need to learn are HTML which provides the structure, CSS which provides the looks, and JavaScript which provides functionality.&lt;br&gt;
Let’s start with HTML. The first thing you have to learn when starting web development. HTML is the fundamental technology used to define the structure of a web page. Learn the basics of HTML like syntax, different HTML tags, forms, learn about semantics, HTML SEO best practices. After you learn all of the basics of HTML.&lt;/p&gt;

&lt;p&gt;That is where CSS comes to play. CSS stands for Cascading Style Sheets. It’s a way to style your HTML elements. It’s a stylesheet language used to describe a document’s presentation. For example, you use CSS to position things, to change the color, size, spacing of your elements. You can also animate stuff with CSS. So whenever you see some cool animations on a website that must be done using CSS. There is a lot to learn regarding CSS.&lt;/p&gt;

&lt;p&gt;So let’s start with the basics. First of all, the CSS syntax, then you need to learn about CSS selectors; different ways to select HTML elements with class names, ids, tags names, etc. Then you need to learn how to position HTML elements across the page. Difference between relative, absolute, fixed, and sticky positions. Then you’ll need to learn about the CSS box model how paddings, margins, and borders on specific elements work. Another thing that you can learn about is CSS specificity. If two or more CSS rules point to the same element the selector with the highest specificity value will let’s say win and only its styles are going to be applied to that HTML element. Think of specificity as a score or a rank determining which styles are going to be applied to an element. Once you learn these basics, you should keep practicing your CSS skills by building small components like navigation bars and cards and of course style them to make them look better. You can learn and practice both HTML and CSS simultaneously. When you’re done with CSS basics, learn about more valuable and complex things like flexbox, grid, and responsive designs. Learn what pseudo-elements are, pseudo-classes, learn to create animations, transitions and more practice your skills by building landing pages and websites and making them responsive. It’s not a problem if you fail at first. Try again and you’ll succeed.&lt;/p&gt;

&lt;p&gt;We’ve just gone through quite a lot of things and of course, this article is just an informational guide to provide you structure in your learning but we cannot cover absolutely how to learn everything in just this article. So again make sure to scroll down to the article and download the ultimate step-by-step guide so that you can reference to it later on. For example, I was talking about CSS specificity, box model, positioning elements, and selectors. All of that is going to be listed in the guide. So even after you’re done with this video you won’t be able to forget it . You’ll always be able to reference and learn one step at a time.&lt;/p&gt;

&lt;p&gt;When you’re confident with HTML and CSS then it’s time to jump into learning JavaScript. JavaScript is the logical part or the brain of a web page. Learn the basic syntax, learn about manipulation, selecting elements, creating elements, and appending them. You’ll also want to learn about event listeners. Alongside learning JavaScript basics, you can also learn a popular CSS framework like Tailwind CSS, BootStrap, or Materialize. You don’t need to learn multiple CSS frameworks if you know one of them. You’ll get the hang of it. These CSS frameworks help you more easily create professional and consistent CSS designs without writing a lot of CSS on your own but of course, you first have to learn the basics of CSS to be able to fully understand what’s happening behind the scenes and speaking of CSS frameworks it’s also helpful to learn CSS pre-processors such as SASS or SCSS, A CSS preprocessor adds additional features that don’t exist in pure CSS such as mixin, nesting selectors, inheritance selectors and so much more. These features make your CSS structure more readable and easier to maintain. Once you’re comfortable in JavaScript basics, you can learn how to work with APIs and fetch data using the fetch API. This is where the fun begins. Fetching data from APIs is going to allow you to create so many different applications. You can create an application for anything you want to do. Do you like watching sports? Well fetch the Sports data from the Sports API and build an application around it. Do you like playing games? Take all the most popular game titles and create a table. Are you into movies? Well, create a movie library. You can do absolutely everything you’re passionate about. After that learn about asynchronous JavaScript, promises, async-await and similar. You can also dive into more complex topics like classes, string, array methods, scoping, hoisting, closures, ES6 plus features. There are a lot of new and complex things to learn at this point. You might start taking some javascript courses but many courses don’t teach you how to understand javascript fully and they don’t make you feel confident to code your real-world apps.&lt;/p&gt;

&lt;p&gt;Once you’re comfortable with JavaScript basics and some more advanced things like asynchronous JavaScript, you might want to jump straight into a JavaScript framework or a library such as React or Angular. But don’t jump straight into them without understanding the topics I’ve mentioned in detail and I repeat do not go into JavaScript frameworks if you’re not fully comfortable with JavaScript basics. If you jump into frameworks too early, you won’t be able to differentiate what is syntax coming from the framework itself and what is just some basic JavaScript syntax. So take your time later in this article I’ll explain what you need to know before you start learning a Javascript framework.&lt;br&gt;
Inmy opinion, you’ll learn the best while building projects. So to enhance your knowledge build some javascript projects such as a weather application that fetches weather from an external API. Build a notes application that uses local storage to save notes or a food recipe app that shows you recipes by search, a quiz application, and all of the similar projects.&lt;/p&gt;

&lt;p&gt;By the way, if you want to have the ultimate JavaScript cheat sheet containing JavaScript basics string and array methods, math and date objects, the window object methods and so much more. You can get it completely for free again in the link down in the article. The link is going to say JavaScript cheat sheet and if you’re new to JavaScript I would strongly recommend you to save that as well just to have it on your PC if you need to reference it in the future.&lt;/p&gt;

&lt;p&gt;At this time you’ll start building some projects and you need to consider learning version control system version control is essential because it allows you to keep track of your codebase. Version control software keeps track of every modification to the code in a special kind of database. Developers can turn back the clock and compare earlier versions if they make a mistake. There are many version control systems but the most popular and most widely used one is a git. In my opinion, you should consider learning git as it’s the best and only version control tool that most people use using. Git also becomes incredibly helpful when working with themes. The version control keeps tracking every individual change by each contributor and helps you from making conflicts if you’re working with teams. Alongside Git, you have to learn about GitHub. GitHub is a code hosting platform. It lets you and others work together on projects from anywhere in the world. Now, if you know all of the things I have mentioned so far, you’ll feel comfortable and create unique projects.&lt;/p&gt;

&lt;p&gt;So the next thing you should learn is how to deploy your projects and websites. There are tons of free services that teach you how to deploy a static website such as Netlify, Vercel, and GitHub pages Congratulations if you know everything we’ve mentioned so far you are a FRONTEND DEVELOPER!&lt;/p&gt;

&lt;p&gt;But there are still some important things that you can add to your repertoire. One of these tools is a package manager. Package managers are tools that automatically handle dependencies and plugins for you. For example, a package manager can install new or update existing packages with a single command because everything is automated and there is no chance for human error. The most popular package managers are npm and yarn. If you’re just starting you should consider learning npm. Npm is also an online database of mostly free packages called the npm registry. Think of it as a store of already created code where you can download codes written by others. But why would you use that can’t we code ourselves. Of course, we can but why ran went the wheel when it’s already been invented? Why solve a problem that has already been solved?&lt;/p&gt;

&lt;p&gt;And finally, we’ve come to the middle of the article which maybe some of you have been waiting for Javascript frontend frameworks and libraries. Now that you know the fundamentals of the web. You can start learning frameworks but before learning any JS framework you should be confident with JavaScript because JavaScript is the main thing you’ll be working with. You must know the core fundamentals and advanced features of JavaScript, most importantly you must understand JavaScript ES6 plus features, array methods, some object tricks like property shorthand destructuring, spread operator, promises async await syntax, and import and export syntax. Once you know these things you can proceed.&lt;/p&gt;

&lt;p&gt;So why would you even use a JavaScript framework? The frameworks are used to make building and working with programming languages easier. Frameworks typically take all the complex and repetitive tasks in setting up a new web application and they either do the boring stuff for you or make it very easy for you to do. &lt;/p&gt;

&lt;p&gt;JavaScript frameworks allow you to build powerful single-page applications with organized and interactive user interfaces.&lt;br&gt;
Javascript frameworks have many advantages over vanilla or plain JavaScript. Like code maintainability, you can make single-page applications incredibly quickly. It saves time in building an application from scratch and so much more.&lt;/p&gt;

&lt;p&gt;There are many JavaScript frameworks and libraries available. But the most popular ones are React, Vue, and Angular. My recommendation of course is to learn React JS. Technically React JS is a library, not a framework. Library opposed to a framework simply provides you with a bit more freedom in how you want to get things done while frameworks have stricter code practices. React JS is a great library that is easy to understand and the most popular amongst all has excellent cross-platform support and an amazing community. It’s the most loved library out there. Vue and Angular are also great options to learn. Vue is a bit easier to understand compared to angular but once you know any of these JavaScript frameworks it will be easy for you to adapt to other ones.&lt;/p&gt;

&lt;p&gt;Finally, you are ready to dive into React JS. When you first start learning React JS firstly, you need to know about the following things:&lt;/p&gt;

&lt;p&gt;File structure; how everything works with React DOM and a single HTML div, react components, the difference between functional components and class components. Here’s a pro tip from now on you should always use function-based components rather than class-based components. They are old and nowadays functional components are most widely used. To be able to write react code you need to learn JSX syntax, props, state, events, and conditional rendering.&lt;br&gt;
Once you know react basics, you should start learning about react.js hooks. The essential hooks are usestate, useeffect, useref, usecontext, usereducer, usememo, and usecallback and once you’re comfortable with all of these topics try building some cool projects. Alongside building projects learn a React UI kit. The most popular ones are Material UI and design and Chakra UI. UI frameworks allow you to import and use different components to create a user interface in your react applications. That’s incredibly useful because it allows you to focus on the logic of your projects while still having consistent and professional designs to make. The most out of react you’ll need to use some popular react packages as well the most popular ones are React Router DOM, Styled Components, and Axios. These are nothing more than simple npm packages we’ve discussed before.&lt;/p&gt;

&lt;p&gt;Once you get familiar with React JS and start creating bigger projects you’ll naturally start doing everything with props that’s called props drilling. Are you sending props from a parent component to every other component in the application? We’ve all been there but soon you’ll notice that your apps get bigger and bigger and they also start getting a lot messier and a lot less organized prop drilling refers to sending props from a higher-level component to a lower-level component. So it would be best if you considered using a state management tool. The most popular one is Redux. State management is simply a way to improve communication and data sharing across your react components. State management libraries are used to pass the props to children components without prop drilling making your code a lot simpler and much easier to understand and now you are a proficient React Developer!&lt;/p&gt;

&lt;p&gt;What should you learn next well? Conveniently, Next JS is a framework built on top of react.js which allows you to do many more things that are simply not available using react straight out of the box. But don’t worry! You don’t have to relearn everything because next.js is just a framework built on top of React. So all the knowledge from JavaScript, HTML, CSS, and React is still incredibly useful. You’ll just keep adding more to build better and better projects.&lt;/p&gt;

&lt;p&gt;Another thing that you’ll find incredibly useful when working with massive projects or companies is testing there are some great libraries and frameworks out there that you can use to test your web applications. Here are a few of them Jest, Cypress, Enzyme, Jasmine, and Mocha.&lt;/p&gt;

&lt;p&gt;Some other topics you can learn while learning react are PWA or Progressive Web Applications. These are applications that seem more like native mobile applications. They can work offline believe it or not and they can also receive notifications.&lt;br&gt;
Then you can learn how to work with WebSockets. WebSockets will allow you to send data in real-time. This is great for applications that need to update something instantly or for things like messaging applications, social media networks, and streaming services.&lt;/p&gt;

&lt;p&gt;Finally, about web accessibility I’ve mentioned so many things right now but here is a gentle reminder don’t get overwhelmed. You don’t have to learn all of these things at once. You don’t have to become a pro or a senior developer in days or weeks. It takes months and for some people years to become a great developer. So don’t get overwhelmed keep learning at your own pace and you’ll eventually become a GREAT DEVELOPER!&lt;/p&gt;

&lt;p&gt;Backend is for people who are not that into visual things. For example, if you don’t have an eye for design and you wouldn’t like moving the elements around the page but rather you would want to implement the logic of what those elements do that is where the back-end comes in. To become a back-end developer firstly, you’ll need to know a programming language and you already know one JavaScript. So you can learn Node JS. Node JS is not a programming language nor a framework it’s a runtime environment for javascript which means that you can use javascript on the server-side.&lt;br&gt;
If you don’t want to learn node.js. You can try some other programming languages like Python, PHP, Ruby, Java, and so on. There are plenty of options once you decide on your programming language. You can choose the framework according to that language for Node JS. You need to learn Express JS and like react as for the frontend, express is going to allow you to create better applications more quickly. If you want to find the frameworks for all other programming languages they are listed in the roadmap guide.&lt;/p&gt;

&lt;p&gt;Before diving into other parts of the backend, you should at least know about these concepts you don’t have to implement them for now but you should know what they are and how they work and the concepts are HTTP or HTTPS, APIs, REST APIs versus GraphQL APIs, WebSockets, MVC architecture CI/CD and serverless. That’s quite a lot of new words that I’ve given you right now.&lt;/p&gt;

&lt;p&gt;But one thing about being a great developer is that you need to learn how to google. So alongside the roadmap below, I would strongly suggest that you take each one of these things and copy then paste them into google and start your own research about them. Then create notes and actively learn what’s happening.&lt;br&gt;
Now it’s time that you learn how to use a database. As the name suggests a database is a place where you store data. There are two types of databases. SQL and NoSQL. SQL stands for Structured Query Language. The popular SQL databases are MySQL, Postgres, and SQLite and the most popular NoSQL database is MongoDB. The MongoDB database is also a part of the most popular programming stack which is MERN MongoDB, Express.js, React, and Node.&lt;/p&gt;

&lt;p&gt;These are all of the technologies that we’ve already mentioned so far but as you can see now we’re combining both the front end and the back end to create something exceptional by using these four technologies you can create absolutely any application that you can think of everything that exists in this world today. There are some more tools you’ll need when working with databases such as ODMS or ORMS which are object document mappings and you need those to interact with the databases more easily for MongoDB. The most popular ODM is Mongoose and I’ll just mention a few more essential things that you should learn authentication which allows your user to log in and register OAuth which is a simpler way of registration using some popular platforms like google login. Then you’ll need to learn about hashing or bcrypt which is going to allow you to encrypt your users' passwords so that they don’t get leaked out to public.&lt;/p&gt;

&lt;p&gt;I know that I’ve mentioned quite a lot of stuff in this article and it’s impossible to get everything right now but just keep a list and start learning things one by one. Once you feel comfortable with one thing then you can move to the next one and that’s going to be it for this article. Let me know if you are or if you’d like to become a frontend developer or are you more into the backend. Again let me know down in the comments.&lt;/p&gt;

&lt;p&gt;Thank you so much for coming to the end of this article. If you liked it feel free to give claps and if you like more of these articles let me know in the comment section down below, of course, follow me and that’s it. I'll catch you in the next article.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Don’t have a good day, have a wonderful life!&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>frontend</category>
      <category>backend</category>
      <category>beginners</category>
    </item>
    <item>
      <title>React 18 - What's New! </title>
      <dc:creator>Eftykhar Rahman</dc:creator>
      <pubDate>Tue, 15 Jun 2021 07:31:42 +0000</pubDate>
      <link>https://dev.to/iamraufu/react-18-what-s-new-2jam</link>
      <guid>https://dev.to/iamraufu/react-18-what-s-new-2jam</guid>
      <description>&lt;p&gt;React 17 was a bit of a bore for developers. There really wasn't a lot added but it's definitely not the case with react 18. In this article I am going to tell you some of the top updates and I'll show you how to get started using react 18 alpha today. Links to everything mentioned will be in the below.&lt;/p&gt;

&lt;p&gt;With React 18 there's a new Root API. Here's what you're used to seeing. We pass react &lt;em&gt;dom.render&lt;/em&gt; our app component and then &lt;em&gt;document.getElementById&lt;/em&gt; and our root element. So we're rendering our app component into our root element on the page. Pretty Simple!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fosjw14odqtt942mh4a4r.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fosjw14odqtt942mh4a4r.PNG" alt="Image 1"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here's the new way. We have a root variable which is equal to a new method called create root. This is being passed our root element and then we call &lt;em&gt;root.render&lt;/em&gt; and pass our app component. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flj7ox115ivzoqohk5zom.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flj7ox115ivzoqohk5zom.PNG" alt="Image 2"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It's accomplishing the same thing but in a different way. The old way is now called the Legacy Root API and It's still going to work in React 18 but will be deprecated at some point by using the new Root API. You're going to get access to all of the React 18 improvements including the concurrent features that we're going to talk about in this article.&lt;/p&gt;

&lt;h2&gt;
  
  
  Suspense
&lt;/h2&gt;

&lt;p&gt;The suspense is finally over in this update we're going to get full support for suspense. Now what is suspense? As the name implies it suspends something until it's ready to be rendered. &lt;/p&gt;

&lt;p&gt;In this example, we have a component that needs time to fetch data before it's ready to be rendered. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk1ktrwt6luc2mz1li4n2.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk1ktrwt6luc2mz1li4n2.PNG" alt="Image 3"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Suspense will use the fallback until the data is returned and the components are rendered. It's important to note here that the random component here is not waiting on data but it's still going to be suspended until everything inside the suspense is ready to be rendered. And now suspense is going to be extremely useful with SSR or Server Side Rendering. Currently, with SSR you're going to get fully rendered HTML but your browser still has to load the JavaScript and hydrate the entire page before it can become interactive. Suspense could speed up this load time dramatically. &lt;/p&gt;

&lt;p&gt;Using the example from the React 18 working group repo here we have a page loading a navbar, a sidebar, a post and a comment. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe0g2lttu9cdf1mx44lch.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe0g2lttu9cdf1mx44lch.PNG" alt="Image 4"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we really don't need the comments to load before the site becomes interactive. So we're going to suspend the comments. So that the viewer can start reading the article&lt;br&gt;
and then we'll load the comments in the background. &lt;/p&gt;

&lt;p&gt;Another cool thing about suspense is selective hydration.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8d7sqjzrc7sl9xzglrpz.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8d7sqjzrc7sl9xzglrpz.PNG" alt="Image 5"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this example., we're suspending the sidebar and the comments. Hydration will begin on the first suspended component in the tree. So the sidebar will hydrate first but if the user tries to interact with the comments section, React will prioritize hydrating the comments instead of the sidebar.&lt;/p&gt;

&lt;h2&gt;
  
  
  Automatic Batching
&lt;/h2&gt;

&lt;p&gt;In React 17 and earlier react with batch re-render updates during a browser event like a click. Here's an example from the docs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7px6m1ir5qhbdzwhbl27.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7px6m1ir5qhbdzwhbl27.PNG" alt="Image 6"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So in this handle click react will batch these two state updates into one single re-render.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fec0oi7k06ejr5pgpuoxj.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fec0oi7k06ejr5pgpuoxj.PNG" alt="Image 7"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But if you need to fetch data and then update the state these re-renders will not be batched.&lt;/p&gt;

&lt;p&gt;With react 18, If you're using the new Create Root API, all state updates will automatically be batched no matter when they happen. If you do have a critical component that you don't want to be batched. You can opt out of this by using &lt;em&gt;reactdom.flushsync&lt;/em&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Concurrent Features
&lt;/h2&gt;

&lt;p&gt;There's some other concurrent features that are interesting but I haven't fully dug into them yet. One is &lt;em&gt;startTransition&lt;/em&gt;. This will tell React which updates are urgent and which can wait this will help the UI remain responsive. &lt;/p&gt;

&lt;p&gt;Then there's &lt;em&gt;useDeferredValue&lt;/em&gt;. This allows you to defer updates that are less important.&lt;/p&gt;

&lt;p&gt;And then &lt;strong&gt;&lt;/strong&gt; This coordinates the order of loading indicators.&lt;/p&gt;

&lt;p&gt;Obviously don't use React 18 in production yet. It's just an alpha status but start learning about these new features now. React 18 will go into public beta in a few months and then several weeks after that so get ready. It's really exciting.&lt;/p&gt;

&lt;p&gt;React 18 Resources Mentioned:&lt;br&gt;
The Plan for React 18 - &lt;a href="https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html" rel="noopener noreferrer"&gt;https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html&lt;/a&gt;&lt;br&gt;
React 18 Working Group - &lt;a href="https://github.com/reactwg/react-18" rel="noopener noreferrer"&gt;https://github.com/reactwg/react-18&lt;/a&gt;&lt;br&gt;
React 18 Discussions - &lt;a href="https://github.com/reactwg/react-18/discussions" rel="noopener noreferrer"&gt;https://github.com/reactwg/react-18/discussions&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>react</category>
    </item>
    <item>
      <title>Top 10 JavaScript Interview Questions</title>
      <dc:creator>Eftykhar Rahman</dc:creator>
      <pubDate>Sat, 15 May 2021 22:55:27 +0000</pubDate>
      <link>https://dev.to/iamraufu/top-10-javascript-interview-questions-393l</link>
      <guid>https://dev.to/iamraufu/top-10-javascript-interview-questions-393l</guid>
      <description>&lt;h1&gt;
  
  
  1 What are the data types?
&lt;/h1&gt;

&lt;p&gt;Supported by JavaScript we have primitive data types like &lt;strong&gt;string&lt;/strong&gt;, &lt;strong&gt;boolean&lt;/strong&gt;, &lt;strong&gt;number&lt;/strong&gt;, &lt;strong&gt;bigint&lt;/strong&gt;, &lt;strong&gt;null&lt;/strong&gt; and &lt;strong&gt;undefined&lt;/strong&gt; which can represent &lt;em&gt;integers&lt;/em&gt; with arbitrary precision and define null symbols we also have &lt;strong&gt;objects&lt;/strong&gt; and &lt;strong&gt;functions&lt;/strong&gt;. &lt;/p&gt;

&lt;h1&gt;
  
  
  2 Is JavaScript a case-sensitive language?
&lt;/h1&gt;

&lt;p&gt;Yes, JavaScript is a &lt;strong&gt;case-sensitive&lt;/strong&gt; language. The &lt;em&gt;keywords&lt;/em&gt;, &lt;em&gt;variables&lt;/em&gt;, &lt;em&gt;function names&lt;/em&gt;, and any other &lt;em&gt;identifiers&lt;/em&gt; must always be typed with a consistent capitalization of letters. &lt;/p&gt;

&lt;h1&gt;
  
  
  3 How can you create an object?
&lt;/h1&gt;

&lt;p&gt;JavaScript supports object concepts very well. You can create an object using the object literal as follows in order to create an object use &lt;strong&gt;curly braces&lt;/strong&gt;.&lt;/p&gt;

&lt;h1&gt;
  
  
  4 How can you create an array in JavaScript?
&lt;/h1&gt;

&lt;p&gt;In order to create an array use &lt;strong&gt;square brackets&lt;/strong&gt;. &lt;/p&gt;

&lt;h1&gt;
  
  
  5 What's the difference between anonymous and name functions in javascript?
&lt;/h1&gt;

&lt;p&gt;We can define function declaration by using the function keyword and provide the name of the function. When we assign the function to a variable using function keyword and anonymous function where we do not provide the name of the function which makes it a little bit more difficult to call them from other places. &lt;strong&gt;The name function can be accessed before the declaration, but the anonymous function is not&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Below the name function code will work
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;hello();
function hello(){
console.log("Hello , will work");
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But below the anonymous function assigned to the variable will not work.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;hello2();
var hello2 = function (){
console.log("Will not work");
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Reason&lt;/strong&gt;: &lt;em&gt;Hoisting&lt;/em&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  6 How does the type of operator work?
&lt;/h1&gt;

&lt;p&gt;The type of operator is used to get the data type of its operand, the operand can be either a litterer or a data structure such as a variable, a function, or an object. An arrow operator that is placed before its single operand which can be of any type its value is a string indicating the type of the operand.&lt;/p&gt;

&lt;h1&gt;
  
  
  7 How to create a cookie using JavaScript?
&lt;/h1&gt;

&lt;p&gt;The simplest way to create a cookie is to assign a string value to a document.cookie object. &lt;/p&gt;

&lt;h1&gt;
  
  
  8 what's the difference between double and triple equal operators?
&lt;/h1&gt;

&lt;p&gt;JavaScript has two visually similar yet very different ways to test equality. You can test equality with double or triple. Equal sign here is the difference. When using a triple equals in javascript we are testing for strict equality which means that both type and the value we are comparing have to be the same. When we use a double equal sign javascript will try to convert values to a like type and then compare the values for that reason usually you would rather use a triple equal sign.&lt;/p&gt;

&lt;h1&gt;
  
  
  9 What are the different kinds of browser storage?
&lt;/h1&gt;

&lt;p&gt;If you open developer tools and navigate to the application tab you can see which storages are available in a chrome web browser. So except for the cookies which you already know you can use local storage or session storage and some browsers but not all of them support internal databases like &lt;em&gt;index database&lt;/em&gt; and &lt;em&gt;Web SQL&lt;/em&gt;.&lt;/p&gt;

&lt;h1&gt;
  
  
  10 what is the difference between null and undefined?
&lt;/h1&gt;

&lt;p&gt;In a nutshell, undefined typical means that the variable has been declared but not defined where null is assigned value and it means nothing other than that. Both null and undefined are primitives and they are both falsely values.&lt;/p&gt;

&lt;p&gt;So these were the top 10 interview questions that you might hear on your very first interview for a junior developer role.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Core Fundamentals of JavaScript</title>
      <dc:creator>Eftykhar Rahman</dc:creator>
      <pubDate>Wed, 12 May 2021 19:00:07 +0000</pubDate>
      <link>https://dev.to/iamraufu/core-fundamentals-of-javascript-jpa</link>
      <guid>https://dev.to/iamraufu/core-fundamentals-of-javascript-jpa</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvs75re4jw4f1mqj9gm7j.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvs75re4jw4f1mqj9gm7j.gif" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;JavaScript is the most hated programming language in the world. Do you know what’s the most loved language in the world? It’s JavaScript.&lt;/p&gt;

&lt;p&gt;And do you know what’s the most popular programming language in the world? It’s again JavaScript. Then why do so many people hate JavaScript?&lt;/p&gt;

&lt;p&gt;Because they don’t understand JavaScript. So understanding the core fundamentals of JavaScript is really very important.&lt;/p&gt;

&lt;p&gt;Closures, Prototype, Event Loop, Async Await 90% of the developers don’t understand this concept properly. And that's the main reason why they even fail in the job interviews. But don’t worry I am here with you. Just tail on me with this article and realize JavaScript is really easy. In fact, it’s the most beautiful programming language in the world.&lt;/p&gt;

&lt;p&gt;You know the main mission of this article is to make you fall in love with JavaScript. I’ll put all my efforts to make everything absolute easy on this article. So as you move ahead I’ll be sharing how JavScript works and how exactly code is executed behind the scenes inside the javascript engine. So what are you waiting for? Let’s get started.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxgvt2yaqz1lzryzlowyj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxgvt2yaqz1lzryzlowyj.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;JavaScript types are Number, bigInt, String, Boolean, Function, Object, Symbol(basically an ES2015 feature, we’ll talk about that later), Object, Function, Array, Date, RegExp, null, undefined. Moreover, there are some built-in error types as well.&lt;/p&gt;

&lt;h2&gt;
  
  
  Number
&lt;/h2&gt;

&lt;p&gt;This is a built-in numeric type. There are an enormous amount of methods we can use with the number. I am listing something mostly used and important number methods:&lt;br&gt;
If we start from the very beginning and most used debug tool which is the console.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(5/2); 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;// which is equal to 2 which gives the value of 2, not 2.5. &lt;/p&gt;

&lt;p&gt;Therefore, if we want to get the upper closest or the lower closest value we’ll use Math.ceil and Math. floor respectfully. &lt;/p&gt;

&lt;p&gt;For example,&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(Math.floor(5/2)); 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;// which is equal to 2&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(Math.ceil(5/2)); 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;// which is equal to 3&lt;/p&gt;

&lt;h2&gt;
  
  
  Strings
&lt;/h2&gt;

&lt;p&gt;This is used to manipulate a queue of characters. Useful for holding data that can be represented in text format.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(‘raufu’.charAt(1)); 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;// which give the output ‘a’ as it starts the count from 0 and in 1st index position there is ‘a’&lt;/p&gt;

&lt;p&gt;Apart from this .toUpperCase() and .toLowerCase() methods give output in all characters of string in upper case and lower case respectfully.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(‘raufu’.toUpperCase()); 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;// which gives the value ‘RAUFU’&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(‘RaUFu’.toLowerCase()); 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;// which gives the value “raufu”&lt;/p&gt;

&lt;h2&gt;
  
  
  Array
&lt;/h2&gt;

&lt;p&gt;This is used to keep elements of any type-together.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const names = [‘Raufu’, ‘Prezens’]

console.log(names.length); 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;// which gives the value 2 that is basically the total number of elements in the array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(names[0]); 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;// which gives the value Raufu as it is in the first position.&lt;/p&gt;

&lt;h2&gt;
  
  
  Math
&lt;/h2&gt;

&lt;p&gt;This is built and has methods for mathematical functions. It basically works with the Number type.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Math.abs(a); returns the value of a in absolute form
Math.random(); returns random value everytime it is called
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I will try to update the article later and thank you for reading this article.  &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
