Prepare Your Skill Set for Web Developer Interviews - Part 1

This article originally appeared on dormoshe.io

Either you are currently a job seeker or not, as a web developer there are basic and advanced topics that you need to know. You need to know them in order to develop products of high quality that have a good performance and that use the fittest technologies.

In this article, we will go through my experience as a job seeker and we will review the most important things to learn in order to prepare our skill set and maximize the chances to get our dream job.

Before we start

Either if you are currently in a job seeking period or being in the past, you sure remember this or those periods. A lot of fears, emotions, desires, hopes, and dilemmas. You can like it or not, but in any case, you need to pay attention to some concerns and be ready for such a period.

In my last article, we talked about some things that really matter for us as job seekers, got tips for maximizing the chances to a good match and learned how to prepare to the process of getting our dream job. If you didn’t read it yet, I recommend starting from there.

• Prepare Yourself for the Mental Phase of Searching Your Dream Job

Back to the basics

The preparation process’ complexity depends on how much you deal with JavaScript, HTML, and CSS nowadays and what is the position requirements. It is very important to understand the basics and the internals. Most of the time, in a short talk, it’s easy to understand that you don’t understand something. CSS can be so weird sometimes when things do not work. JavaScript can be weird also, even when things are working. The interviewer’s purpose is to see how do you think, how do you cope with hard questions and to understand how far along your knowledge of the technology according to the job requirements.

Let’s see an example. In a lot of interviews you can be asked about closures — what is the output of this code:

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1000);
}

The output is 5 5 5 5 5 and not 0 1 2 3 4. If we will use let instead of var or will use ((j) => { return () => console.log(j); })(i) — the value of i will be saved by the IIFE in the new function’s scope argument j. This small question is so relevant because it gather some important concepts of the language - closure, context, scope, IIFE and let vs var.

When this question is widely used, there are a lot of continued-questions like why it happened. In some of your explanations, you can remind the Event Loop -  oooh it’s really a good point to drill down to the important mechanism of ‘how javascript works’.

Another question can be ‘how to solve this problem’. Maybe you know how to solve it, but the interviewer can ask you for more different solutions to this question. For Example, the bind function is one of the solutions which fix this problem, but there are also the apply and call functions. What are the differences between these functions? So, we can go on to various ways to the internals of JavaScript.

How it works

A good developer needs to know how the language/technology works. It’s matter in order to take a decision, keep on performance and other metrics good as we can and for many more reasons. You need to know why to use the technology or maybe what is the other options. It’s a practical knowledge that needs to be in your arsenal — it’s worth it.

How the web works

What happened when you hit the ‘Go’ button in the address bar of your browser? Do you think about it sometimes? DNS and so on… Yes but it’s not only. It’s true that the DNS servers work in this process by their mechanism, but there are more parts. This process contains check of 4 caches to find the map to the right IP. Then, the TCP handshake and the Ack messages that you remember from the lecturer in your BSc degree period.

The page is not fetched, loaded and rendered by the stork. As a web developer, you need to ‘know how’

And after the HTML returned to the browser, what the browser will do? There is a big process of parsing and rendering the resources including the elements, external and internal scripts and styles. There are blocking operations and there is served words like defer and async in the process. It matters for performance and time to an interaction where you put the external resources tags and script. There is a priority and the browser really works hard to do that.

JavaScript is single threaded

Ok, and then what? You can think about it and understand why it’s so important factor that we have only one thread. What is the pros and cons of using it? NodeJS is fit developments that have a lot of I/O and asynchronous event. It’s event-driven. So heavy synchronic calculations like in Machine Learning is probably not the best match for NodeJS. Besides, there are other known languages like Java or C#. Here you have a new thread for each connection. This is really important to know which of them to use. And this depends on the use cases of the product.

Event Loop, Call Stack, Queue, Heap

Another part of ‘how it’s work’ is the internal flow and processes of the language — the mechanism. What is the order of execution, where is each variable saved, what is the differences between the Call Stack and the Queue and what’s happened when you use setTimeout. What is the mechanism that leads the world and how it’s done? When you will answer these questions, you understand the JavaScript flow. Don’t go to a JavaScript position’s interview when you don’t understand this mechanism. It’s CRITICAL.

Another buzz words and things that mostly asked in interviews are scope, context, hoisting, how to implement encapsulation in ES5 and prototype. Be sure that you are under control when someone will chat with you about them.

Asynchronous — Callbacks, Promises, Async\Await and Generators

JavaScript developers use asynchronous operations heavily. HTTP request, schedulers, timers and I/O operations are only parts of the asynchronous operations. It’s not another property of the language — it’s its bread butter. We can be impressed by the last developments of new features and see the evolution of them. From callbacks with callback hell to promises with promise hell to generators and async\await features. You need to be knowledgeable about this evolution and know how to explain it.

ES6/7/8

JavaScript is in production, but it is always getting renewed. The process of adopting new features to the specification is very arranged and poised. ECMAScript is the specipication that forms the basis of JavaScript. ECMAScript is standardized by the ECMA International standards organization in the ECMA-262 and ECMA-402 specifications.

ECMAScript 2017 was officially released in the mid of 2017 by TC39. It seems that we are talking a lot about ECMAScript in the last year. It’s not for nothing. ES6 is one of the freshest things in the JavaScript world. It is everywhere. ES6 is popular in these days because of its improvements which make the developer’s experience more convenient by new syntax and innovations. The latest things in the ES zone are the async\await, the arrow function, the spread operator, the class structure and a lot of more.

Semantic HTML

Even if you don’t see visual differences between div, footer, main and article, there is a whole babel behind them. The semantic HTML is matter. It matters for many reasons. People with disabilities use screen readers that the semantic influence on the order of reading and the operations that can take. For you as a developer, it’s part of the standard. It’s easy to handle an HTML block that is semantic instead of div inside div. It’s help for uniformity and to the feelings that you give to the visitor — for example, h2 in each page will have the same look and feel.

You can find yourself sometimes asks the following questions

• Is it correct to put div in a paragraph?
• When do I need to use the article tag?
• Is it okay to nest a main tag inside a main tag?
• What is the best selection for back and next links - a tag or button tag?

An answer to a lot of question like those and many recommendations can be found in the formal HTML specification or in the W3C website.

Cookies vs Local Storage vs Session Storage

Cookies, local storage and session storage are widely used. Almost every website you visit uses part of them. It can be used to save local preferences like table columns size and order and favorite items. Local data (local and session storage) affect the specific browser that they saved on it. If you want to affect the user in all the browsers and machines that he used, you need to save it in the server.

Cookies can be used to authenticate and to ensure that the request’s source is reliable. Cookies will be added to the requests automatically, unless the expiration date will pass. Local and session storage will not be added to the requests to the server and they are accessed only at the client side. Session storage will be saved until the website tab in the browser will be closed. Local storage will be saved in the browser for the next times.

Local storage can save only string keys and values, whereas cookies can save complex objects. There are size limits to these three. Local and session storage can contain up to 5MB, whereas cookies up to 4KB. There are more restrictions and differences between the three. This is an interviews’ common topic and it can be appeared as a solution to some questions or as a direct question.

Conclusion

Interviews are something that you can prepare yourself for them. The preparation helps you for your self-confidence and reminds you topics that you unusually use. It’s recommended to take some time to do it, but you need to be focused. In the next part, we will continue to see more relevant and important topics, like Architecture, and I will give you some action items and some sources to make the preparation easiest as we can.

You can follow me on dormoshe.io or Twitter to read more about Angular, JavaScript and web development.