DEV Community: Alok Raj

Roadmap to become Web Developer in 2021

Alok Raj — Thu, 15 Jul 2021 15:50:20 +0000

If you are a total beginner to web development and thinking to dive deep into web development then you are at the right place. I am damn sure at the end of this article you will be having a clear picture of **Where *to Start, *What *to study, and *How **to study.

⚠ If you already have some exposure to web development then I will recommend you to visit roadmap.sh. It contains a detailed analysis of stacks to become a web developer. Also, you can read about my ***Story of Transition to the Senior SE role***

Before diving into where and how let’s understand WHAT?

What is Frontend? What is Backend? What is Full-stack? How these are co-related? Find answers to all your questions here.

Hope now, you understand **What **is web development. Let’s understand from where we can get started with these.

Concisely to become a full-stack Javascript developer, You need to accomplish these in the sequence. I will discuss these in detail as we go along in this article.

step 1: learn HTML
step 2: learn CSS
step 3: learn CSS Frameworks (**e.g.: Bootstrap, Tailwind etc.**)
step 4: learn JavaScript
step 5: learn nodejs / expressjs **(or, Hapi, KoaJs, fastify, NestJs etc.)**
step 6: learn sql / nosql **(mongodb, PostgreSQL etc.)**
step 7: learn react / vue / angular
step 8: go back to step 4

🏆 congratulations, you are now a full-stack developer.

Now, let me start to discuss one at a time, what and from where you need to learn to get started in these tech domains. Some may argue, why not React/Vue/Angular first and then Node/Express. My take on this: You are free to do so but since all these front-end frameworks/libraries are dependent on package manager so why not learn Node first.

HTML -> CSS -> CSS FRAMEWORK (e.g.: Bootstrap, Tailwind)

HTML: Hypertext Markup Language is the standard mark-up language for documents designed to be displayed in a web browser.

Must know topics: What is HTML? Anatomy of HTML Tag, HTML Document Structure, Essential HTML Tags, HTML form.

CSS: Cascading Style Sheets is a style sheet language that explains the presentation of a document written in a mark-up language like HTML.

Must-know topics: What is CSS? Anatomy of CSS, CSS Selectors (Element, Class and ID), Combining selectors, Pseudo selectors, CSS Specificity (Conflict Resolution), Box Model and Layout, CSS Grid, CSS Flexbox, Relative vs Absolute element positioning, Box Model, Media Queries (Responsive design using CSS).

CSS FRAMEWORK: It is a CSS framework to ease the design process. These are free and open-source CSS frameworks directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. Eg.: https://getbootstrap.com/, https://tailwindcss.com/

JAVASCRIPT

It is often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. It is high-level, often just in time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object orientation, and first-class functions.

In JavaScript, there is a lot to learn, so instead of mentioning topics, Now, I will recommend you the courses, which you can follow and get comfortable with. You can visit the **javascript.info **website for detailed and well documentation of JavaScript.

Courses you can follow for getting started with HTML, CSS & JS.

https://www.coursera.org/learn/html-css-javascript-for-web-developers

It is one of the brilliant courses available to get started with web development. Here, you will get to learn HTML, CSS, Bootstrap, JavaScript, and AJAX. You can apply for financial aid or you can simply audit the course.

https://www.udemy.com/course/the-web-developer-bootcamp/

Over here, I will suggest you complete until SECTION 20 (To DO Lists Project).

Once you are done with the above-stated course, then now is a good time to dive deep and know all about JavaScript & **its architecture.**

https://www.udemy.com/course/modern-javascript/

The perfect and complete course, which helps you to understand every nuke and corner of JS. This course is a perfect combo of project-based learning as well as a deeper dive into the why and how of JavaScript.

you can refer to this video and playlist for getting started with JS. [FREE]

https://www.youtube.com/playlist?list=PL_c9BZzLwBRLVh9OdCBYFEql6esA6aRsi

https://www.youtube.com/watch?v=qoSksQ4s_hg&list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET&ab_channel=TheNetNinja

JavaScript ES6, ES7, ES8 - https://www.youtube.com/watch?v=nZ1DMMsyVyI&ab_channel=freeCodeCamp.org

also, there is one ongoing course from Akshay Saini which discussed architecture and behind the scene of JavaScript. [**Namaste Javascript**]

**Optional: (Now is the good time to revise whatever you have learned.) I will recommend you to visit freecodecamp and complete the projects of **Responsive web design certification **to get the certificate; if you feel stuck, you can definitely go through the tutorial provided there.

Once you are done with these above, now is a good time to dive into the framework/library.

NODE -> EXPRESS -> MONGO-DB

For Backend, I will recommend a single course. Also, you can study each topic in detail by following a separate tutorial for each.

https://www.udemy.com/course/nodejs-express-mongodb-bootcamp/

This course is a top-rated course on Udemy. This course has beautifully covered all the essentials of the Backend covering NodeJS, Express JS, Mongo, and Mongoose along with Unit Testing.

you can refer to these videos and playlists for getting started with Node.JS [FREE]

https://www.youtube.com/playlist?list=PLillGF-RfqbYRpji8t4SxUkMxfowG4Kqp

FRONTEND LIBRARY/FRAMEWORK (e.g.: React, Vue, Angular):

I will provide the links of course which I found amusing. I, being a MEAN stack developer, have experienced Angular & React courses myself and for Vue, I have taken opinions from my friends working with Vue.

Note: Which frontend framework/lib to choose?

Seeing the current market scenario, React is the first choice but at the same time, Vue JS is rising slowly and is expected to surpass React totally. Earlier Angular was at the top, not anymore. However, it does not matter which framework you know, once you are comfortable with any library or framework then you can easily pick others too. For more analysis on what to choose, you can search and find many helpful articles. The major difference between the different stacks can be found here. And if you just want to know individually what they are, that you can see here.

ANGULAR

Angular — The Complete Guide (2020 Edition) - https://www.udemy.com/course/the-complete-guide-to-angular-2/

It is one of the most comprehensive courses on angular. It is actually a bit too many details sometimes but better be safe than sorry.

Or,

you can follow this to quickly get started with Angular. [FREE]

**Angular Tutorial for Beginners**

Vue JS

**The Complete Guide (incl. Vue Router & Vuex):**

Being one of the highest-rated courses on Udemy taught by Maximilian Schwarzmüller, I can undoubtedly say, Go for it. He is one of the BEST instructors present in the tech industry.

you can refer to these videos and playlists for getting started with VueJs. [FREE]

**VueJs 2 + Vuex**

or,

**VueJs 3 + Vuex**

React JS

**Modern React with Redux**

you can refer to these videos and playlists for getting started with ReactJs. [FREE]

**React + Redux**

or,

**React with Redux**

Whatever front-end library/framework you choose and complete the course then start building projects on top of that.

IDE Suggestion: https://code.visualstudio.com/

If you wish to explore more and find some more relative tutorials. You can follow this link.

Congratulations, now you are ready to dive and become a full-stack JavaScript developer.

Want to know about my journey. Read that here:

Story of Transition to the Senior SE role

You can find me on LinkedIn !!!

Feedback appreciated !!!

YDKJS - UP & GOING, Takeaways for Experienced JavaScript Developer

Alok Raj — Thu, 15 Jul 2021 15:24:16 +0000

These are a few of the important takeaways from Kyle Simpson's YDKJS - UP & GOING book series.

The JavaScript you know right now is probably parts handed down to you by others who've been burned by incomplete understanding. That JavaScript is but a shadow of the true language. You don't really know JavaScript, yet, but if you dig into this series, you will. Read on, my friends. JavaScript awaits you.
It's typically asserted that JavaScript is interpreted because your JavaScript source code is processed each time it's run. But that's not entirely accurate. The JavaScript engine actually compiles the program on the fly and then immediately runs the compiled code.
Comments should explain why not what. They can optionally explain how if that's particularly confusing.
The return value from the typeof operator is always one of six (seven as of ES6! - the "symbol" type) string values. That is, typeof "abc" returns "string", not string.

typeof array; // "object" arrays are special objects

typeof null; // "object" -- weird, bug
The specific list of "falsy" values in JavaScript is as follows:

"" (empty string)
0, -0, NaN (invalid number)
null, undefined
false

Any value that's not on this "falsy" list is "truthy." Here are some examples of those:

"hello"
42
true
[ ], [ 1, "2", 3 ] (arrays)
{ }, { a: 42 } (objects)
function foo() { .. } (functions)

Equality

The difference between == and === is usually characterized that == checks for value equality and === checks for both values and type equality. However, this is inaccurate. The proper way to characterize them is that == checks for value equality with coercion allowed, and === checks for value equality without allowing coercion; === is often called "strict equality" for this reason.

Consider the implicit coercion that's allowed by the == loose-equality comparison and not allowed with the === strict-equality:

var a = "42";
var b = 42;

a == b;         // true
a === b;        // false

In the a == b comparison, JS notices that the types do not match, so it goes through an ordered series of steps to coerce one or both values to a different type until the types match, where then simple value equality can be checked.

If you think about it, there are two possible ways a == b could give true via coercion. Either the comparison could end up as 42 == 42 or it could be "42" == "42". So which is it?

The answer: "42" becomes 42, to make the comparison 42 == 42. In such a simple example, it doesn't really seem to matter which way that process goes, as the end result is the same. There are more complex cases where it matters not just what the end result of the comparison is but how you get there.

The a === b produces false, because the coercion is not allowed, so the simple value comparison obviously fails. Many developers feel that === is more predictable, so they advocate always using that form and staying away from ==. I think this view is very shortsighted. I believe == is a powerful tool that helps your program, if you take the time to learn how it works.

To boil down a whole lot of details to a few simple takeaways, and help you know whether to use == or === in various situations, here are my simple rules:

If either value (aka side) in comparison could be the true or false value, avoid == and use ===.
If either value in comparison could be one of these specific values (0, "", or [] -- empty array), avoid == and use ===.
In all other cases, you're safe to use ==. Not only is it safe, but in many cases, it simplifies your code in a way that improves readability.

You should take special note of the == and === comparison rules if you're comparing two non-primitive values, like objects (including function and array). Because those values are actually held by reference, both == and === comparisons will simply check whether the references match, not anything about the underlying values.

For example, arrays are by default coerced to strings by simply joining all the values with commas (,) in between. You might think that two arrays with the same contents would be == equal, but they're not:

var a = [1,2,3];
var b = [1,2,3];
var c = "1,2,3";

a == c;     // true
b == c;     // true
a == b;     // false

Hoisting

Wherever a var appears inside a scope, that declaration is taken to belong to the entire scope and accessible everywhere throughout.
Metaphorically, this behavior is called hoisting, when a var declaration is conceptually "moved" to the top of its enclosing scope. Technically, this process is more accurately explained by how code is compiled, but we can skip over those details for now.

Consider:

var a = 2;

foo();              // works because `foo()`
                        // declaration is "hoisted"

function foo() {
    a = 3;

    console.log( a );   // 3

    var a;          // declaration is "hoisted"
                        // to the top of `foo()`
}

console.log( a );   // 2

Closure

You can think of closure as a way to "remember" and continue to access a function's scope (its variables) even once the function has finished running.

Consider:

function makeAdder(x) {
    // parameter `x` is an inner variable

    // inner function `add()` uses `x`, so
    // it has a "closure" over it
    function add(y) {
        return y + x;
    };

    return add;
}

The reference to the inner add(..) function that gets returned with each call to the outer makeAdder(..) is able to remember whatever x value was passed in to makeAdder(..).

`this` Identifier

Another very commonly misunderstood concept in JavaScript is the this identifier. Again, there's a couple of chapters on it in the this & Object Prototypes title of this series, so here we'll just briefly introduce the concept.

While it may often seem that this is related to "object-oriented patterns," in JS this is a different mechanism.

If a function has a this reference inside it, that this reference usually points to an object. But which object it points to depends on how the function was called.

It's important to realize that this does not refer to the function itself, as is the most common misconception.

Here's a quick illustration:

function foo() {
    console.log( this.bar );
}

var bar = "global";

var obj1 = {
    bar: "obj1",
    foo: foo
};

var obj2 = {
    bar: "obj2"
};

// --------

foo();              // "global"
obj1.foo();         // "obj1"
foo.call( obj2 );       // "obj2"
new foo();          // undefined

There are four rules for how this gets set, and they're shown in those last four lines of that snippet.

foo() ends up setting this to the global object in non-strict mode -- in strict mode, this would be undefined and you'd get an error in accessing the bar property -- so "global" is the value found for this.bar.
obj1.foo() sets this to the obj1 object.
foo.call(obj2) sets this to the obj2 object.
new foo() sets this to a brand new empty object.

Bottom line: to understand what this points to, you have to examine how the function in question was called. It will be one of those four ways just shown, and that will then answer what this is.

Prototypes

When you reference a property on an object, if that property doesn't exist, JavaScript will automatically use that object's internal prototype reference to find another object to look for the property on. You could think of this almost as a fallback if the property is missing.

The internal prototype reference linkage from one object to its fallback happens at the time the object is created. The simplest way to illustrate it is with a built-in utility called Object.create(..).

Consider:

var foo = {
    a: 42
};

// create `bar` and link it to `foo`
var bar = Object.create( foo );

bar.b = "hello world";

bar.b;      // "hello world"
bar.a;      // 42 <-- delegated to `foo`

The a property doesn't actually exist on the bar object, but because bar is prototype-linked to foo, JavaScript automatically falls back to looking for a on the foo object, where it's found.

This linkage may seem like a strange feature of the language. The most common way this feature is used -- and I would argue, abused -- is to try to emulate/fake a "class" mechanism with "inheritance."

But a more natural way of applying prototypes is a pattern called "behavior delegation," where you intentionally design your linked objects to be able to delegate from one to the other for parts of the needed behavior.

Non-JavaScript

So far, the only things we've covered are in the JS language itself. The reality is that most JS is written to run in and interact with environments like browsers. A good chunk of the stuff that you write in your code is, strictly speaking, not directly controlled by JavaScript. That probably sounds a little strange.

The most common non-JavaScript JavaScript you'll encounter is the DOM API. For example:

var el = document.getElementById( "foo" );

The document variable exists as a global variable when your code is running in a browser. It's not provided by the JS engine, nor is it particularly controlled by the JavaScript specification. It takes the form of something that looks an awful lot like a normal JS object, but it's not really exactly that. It's a special object, often called a "host object."

Moreover, the getElementById(..) method on document looks like a normal JS function, but it's just a thinly exposed interface to a built-in method provided by the DOM from your browser. In some (newer-generation) browsers, this layer may also be in JS, but traditionally the DOM and its behavior are implemented in something more like C/C++.

Another example is input/output (I/O).

Everyone's favorite alert(..) pops up a message box in the user's browser window. alert(..) is provided to your JS program by the browser, not by the JS engine itself. The call you make sends the message to the browser internals and it handles drawing and displaying the message box.

The same goes with console.log(..); your browser provides such mechanisms and hooks them up to the developer tools.

That's all folks for today, Very soon I will be writing another blog for the next book in the series i.e. SCOPE & CLOSURE.

Open to feedback and comments if I missed any concept which was covered in this book.

🙏 Credit:

getify / You-Dont-Know-JS

A book series on JavaScript. @YDKJS on twitter.

You Don't Know JS Yet (book series) - 2nd Edition

This is a series of books diving deep into the core mechanisms of the JavaScript language. This is the second edition of the book series:

...

To read more about the motivations and perspective behind this book series, check out the Preface.

If you're looking for the previous first edition books, they can be found here.

Titles

I recommend reading the second edition books in this order:

Get Started | Buy on Leanpub | Buy on Amazon
Scope & Closures | Buy on Leanpub | Buy on Amazon
Objects & Classes (draft in progress)
Types & Grammar (not yet started)
Sync & Async (not yet started)
ES.Next & Beyond (not yet started)

If you're looking for the previous first edition books, they can be found here.

Publishing

As always, you'll be able to read these books online…

View on GitHub

My Portfolio

Alok Raj — Thu, 04 Feb 2021 09:58:04 +0000

Hello fellow devs & creators 🙋‍♂️
Need some feedback on my portfolio on which I can improve upon.
Also, it would be great if you all can suggest what more can be added.

tech stack 👀: html, css, vanilla JS, js libraries

p.s: if you like it, you can make one for yourself too.
🎯 Source Code : https://github.com/alok722/alokraj.tech
🌍 URL : https://alokraj.tech/

alok722 / alokraj

a webpage to showcase my experience, education, skill-set, projects, certificates, achievements, and recommendations.

welcome to my portfolio 👋

🏠 homepage

install

git clone https://github.com/alok722/alokraj.me.git

usage

open index.html

❓ what is it

a webpage to showcase my experience, education, skill-set, projects, certificates, achievements and recommendations.

👤 author

alok raj (alokr417@gmail.com)

website: https://alokraj.tech/
linkedin: @alok722

🚀 future scope

adding blog section
adding contact me section

show your support

give a ⭐️ if you are using this template for your webpage.

📝 license

This project is MIT licensed.

View on GitHub

Story of Transition to the Senior SE role

Alok Raj — Tue, 05 Jan 2021 04:59:24 +0000

TLDR; This article focuses on my recent transition to the Senior SE role, my experience & learnings from that transition which I am sharing so that this might come in help to someone out there looking for it.

Akshay Saini, you must have heard of him. If not, short intro: He is the creator of Namaste Javascript. Now YOU recalled? No? Then go and check out at least one video from the series. I am sure, you will never forget him. He has simplified the most complex internal architecture of Javascript and served on a plate for us to consume.

Anyways, 21 days back he inspired us to utilize and make the best out of it, and start the new year afresh.
So, I decided to daily solve at least one problem on leetcode and read the “You don’t know Js” book series. But everything doesn’t always go as planned, I was approached by a few recruiters on LinkedIn regarding job opportunity and I thought why don’t I try and utilize these 21 days to get a good job offer.

So, there I was, my quick intro: I am a MEAN stack developer with 1.5 yrs. of professional experience and a total of 2.5 yrs. of experience including internship & freelancing. I am in Love with the JavaScript ecosystem, so I keep exploring different frameworks and libraries in this ever-expanding Javascript world.

Q: Did I get a good job offer?
A: Yes, I did. Not only a good offer but now I am going to be Senior SE with a massive hike.

Q: How I did it even though I am not good at competitive coding?
A: I might not be as good at competitive coding but I am great at building modular, scalable web apps with good coding standards covering unit testing and proper documentation of the same so I focus mainly on that and always try to improve upon my skills.

I would like to break my transition of becoming Senior SE in few modules:

HARD WORK:

Most of us post office hours have a mentality that we are done for the day and then we simply relax or binge watch Netflix but I took a different approach & tried to invest at least 2 hrs. daily on my skill development.
also, if I am traveling, I used to read JS articles or if I have 5–10 minutes before leaving, I watch small Instagram tech-based accounts posts for ex: NamasteDev’s account

PATIENCE:

Have patience, believe in yourself because sooner or later everything is going to be fine. Don’t get de-motivated, your time will come just keep putting in the hard work.
I know it’s easy to say but practically living it is difficult. But we don’t have the option, we have to keep moving and trying if we desire to get good things out of life.

PREPARATION STRATEGY:

Even though I managed to get 3 offers in these 21 days. But for this, I was preparing from the very beginning. Everyday bit by bit.
My preparation strategy was simple & I made sure to make it efficient, I first listed down all the possible topics of my skill-set, then I created To-dos for each topic & started crossing out each topic one by one as soon as I was confident about the same, also making some rough notes (I am organizing it currently and will upload on GitHub Soon).

Please, find below important topics of my skill-set which I listed down:

HTML: What is HTML, What’s new in HTML5, explain DOCTYPE declaration, Semantic elements in HTML & its advantage, commonly used tags, figure tag, field set, srcset attribute, tab index, inline & block level elements, meta tags, iframe & object tags, web workers, graphics - SVG & canvas, Quirks mode in HTML5, HTML5 Web API, image map, marquee, audio, video, geocode, datalist in form, Persistent Local Storage, Microdata, keygen, difference — Semantic Vs. Non-semantic, Application Cache in HTML5, Manifest file & others..

CSS: What is CSS, box model, CSS selectors, pseudo-class & pseudo-element, how does CSS work (under the hood of the browser), the difference between a relative, fixed, absolute and static, CSS Specificity, purpose of clearing floats, media query, CSS for print, selector that will match any links end/start/contains, flexbox, CSS grid, reset CSS, normalize CSS, Sass or Less and or Stylus, !important, concept of Tweening, any CSS framework & others..

JAVASCRIPT: What is Javascript, Call stack, Primitive types, Value Types & Reference Types, Function scope, Execution context, Block scope & Lexical scope, IIFE, Modules, Namespaces, DOM and Layout Trees, this, call apply & bind, prototype inheritance & prototype chain, Object create & assign, Js array functions, Pure/Impure functions, Closures, High order functions, Promises, Callback, Async/Await, OOPs implementation, time/ execution related functions (setTimeout, setInterval), collections and generators, message queues, hoisting, polyfill, currying, debouncing, async vs defer, event bubbling & capturing, Prototype & Prototypal inheritance, Object prototypes, throttling, recursion, local storage vs session storage, CORS, web storage APIs, event loop, web sockets, “use strict”, eval, babel, pass by reference, pass by value, es6+ ex: spread operator, rest operator, destructuring, arrow function, template string, etc., for loop (for-each, for-of, for-in), AJAX & others..

ANGULAR: What is Angular, basic typescript, angular version changes, features of Angular, angular cli, advantage and disadvantage of angular, how angular work, Ivy, JIT & AOT in angular and its advantage & disadvantage, What are the building blocks of Angular, components, What is Data Binding, string interpolation, property binding, event binding, two way binding, data sharing between components, view encapsulation, view child, directive & its type with example, custom directive, pipe, custom pipe, pure pipe & impure pipe, async pipe, pipe chaining, mvc architecture, mvp architecture, angular routing, lazy loading, loadChildren, angular services, dependency injection, life cycle, ng-content, components vs directives, modules, decorators, internationalization, ng-container vs div, angular on server side, MVVM architecture, auth guard, interceptor, rxjs & its most used operators, promise vs observable, cold observable vs hot observable, ngClass & ngStyle, Angular elements, difference among “declarations”, “providers” and “import” in NgModule, form — reactive & template driven, dynamic form, Transpiling, unit-testing related concepts & others..

REACT: What is React, advantages of React, Component Architecture, Hierarchy, Communication between components, State & Props, props validation, SPA (Simple Page Application) vs MPA (Multi-Page Application), Functional vs Class-based component, Controlled Components, Pure Component how React & virtual DOM works, Higher-Order component, JSX, Life-Cycle Methods, render method, constructor, Hooks & Custom hooks, Routing & lazy loading, what is prop drilling & how to avoid it? State Management (Mostly Redux questions are asked but other libraries like Mobx are there), React clone elements, Strict Mode in React, synthetic events & others..

VUE: What is Vue.js, advantages of Vue.js, Component Architecture, Templates, Instances in Vue.js, Life-Cycle Methods, Computed Property, Watcher, Bindings, Events, Custom Events & root events, rendering & render function, transitions & animation, Directives, Refs, Routing & lazy loading, Mixins, Slots, Named Slots, Scoped Slots, Filters in Vue, State Management (Vuex), Reactive Interfaces, Vue Loader, Plugins & others..

NODEJS: What is Node.js, If Node.js is single-threaded then how it handles concurrency, benefits of NodeJS, event loop, event queue, Libuv, thread pool, the downside of the single-threaded concept, What is an error-first callback, event emitter, node environment, LTS release of node, reactor pattern in node, time/ execution related functions (setTimeout/clearTimeout, setInterval/clear interval, setImmediate/clear immediate, process.nextTick) where a node is used, Asynchronous & Synchronous, non-blocking” in node.js, REPL, NPM, semantic versioning, child process, fork & spawn, streams in node, fs module, HTTP module, Zlib module, stream module, util module, v8 engine, event-driven programming, package.json, create a simple server in Node.js, purpose of module exports, buffer class, different types of HTTP requests, put vs patch, cluster, event listeners, Microservice architecture, message queue & Trace, Stream Buffer, Crypto, Security Mechanism & others..

EXPRESSJS: What is express, features of Express JS, steps used to set up an express JS application, arguments available to an Express JS route handler-function, use of next in Express JS, Middleware in Express.js, types of middleware, templating engine, server-side rendered page, error handling & others..

MongoDB & MONGOOSE: what is MongoDB, JSON vs BSON, data types supported by mongo, best features of MongoDB, the difference between SQL or NoSQL, _id Field in MongoDB, create or select a database, collection in mongo, CRUD operation in mongo, upsert, write concern, Storage Engine, replica set, journal, profiler, the concept of foreign key in mongo, sharding, GridFS, update the _id of one MongoDB Document, Does an update fsync to disk immediately, replica set, transactions/locking in MongoDB, ACID property, namespace, Horizontal Scaling & Vertical Scaling, MongoDB aggregation, Indexes in MongoDB, type of index, covered query, rename keys of document, models & schema in mongoose.

Once I am done with listing the topics, I start reading all these topics online either on YouTube or medium or dev or on the documentation itself. I always make sure to understand the topics in a way that I can explain to anyone along with many scenarios and real-life examples.

Q: What about DSA?
A: No one can escape DSA even in a frontend role interview. As Akshay, said in many of his videos you must be aware of basic DSA and its implementation. So, I made sure to learn most of the topics of DSA and its implementation in JavaScript.

This Udemy course came in very handy and boosted my confidence.
JavaScript Algorithms and Data Structures Masterclass

Hold on, few more points:

TIPS TO STAND OUT

FIND A GOOD FRIEND

A friend whose skillset matches with yours. As Akshay always says find your Simran. This is very important because it fastens the process and you both get to learn so many things in less time. In my case my mentor/Simran/friend is Mihir. We collab and work together on side stuff along with on our own adventure that is open devs, a github organization we created to build cool open source projects & teach what we have learnt over the years.

WORK ON SIDE PROJECTS

This always helps as it lets you implement the concept you have learned theoretically and most importantly if you have some good projects then you have a lot to talk about and the interviewer will have a lot to ask about from the project which you are master at.

ALWAYS KEEP LEARNING

There is no ending to learning, you must always keep learning & practicing.

FEW RECENT INTERVIEW JS QUESTIONS:

· closure with example; advantage & disadvantage?

· setInterval, setTimeout with example & how to break setInterval; advantage & disadvantage;

· HTML5 Web API; Local Storage vs session storage

· IIFE and anonymous function;

· Service Workers

· Output of code snippet and their explanation & more..

FEW RESOURCES:

· Interview Questions

· Namaste Javascript

· JavaScript Algorithms and Data Structures Masterclass

· The Beginner’s Guide to MongoDB Aggregation

· MongoDB Interview Questions and Answers

· Node.JS Prep

Great, you have reached the bottom. If you are a Javascript developer then bookmark this because these topics are gonna very helpful in your next interview.

p.s: Thank you Mihir & Ravi for the proof reading and adding more value to this article.
Please give a clap if it is helpful
DONE

DEV Community: Alok Raj

Roadmap to become Web Developer in 2021

HTML -> CSS -> CSS FRAMEWORK (e.g.: Bootstrap, Tailwind)

JAVASCRIPT

NODE -> EXPRESS -> MONGO-DB

FRONTEND LIBRARY/FRAMEWORK (e.g.: React, Vue, Angular):

**ANGULAR**

**Vue JS**

**React JS**

Story of Transition to the Senior SE role

YDKJS - UP & GOING, Takeaways for Experienced JavaScript Developer

Equality

Hoisting

Closure

this Identifier

Prototypes

Non-JavaScript

getify / You-Dont-Know-JS

A book series on JavaScript. @YDKJS on twitter.

You Don't Know JS Yet (book series) - 2nd Edition

Titles

Publishing

My Portfolio

alok722 / alokraj

a webpage to showcase my experience, education, skill-set, projects, certificates, achievements, and recommendations.

welcome to my portfolio 👋

🏠 homepage

install

usage

❓ what is it

👤 author

🚀 future scope

show your support

📝 license

Story of Transition to the Senior SE role

I would like to break my transition of becoming Senior SE in few modules:

HARD WORK:

PATIENCE:

PREPARATION STRATEGY:

TIPS TO STAND OUT

FIND A GOOD FRIEND

WORK ON SIDE PROJECTS

ALWAYS KEEP LEARNING

ANGULAR

Vue JS

React JS

`this` Identifier