The following document includes a list of tips, common interview questions and external resources that might be helpful when applying to job positions in the Web Development field. It covers both front-end and backend topics.
The document is targeted at Ironhack Web Development Bootcamp graduates who aim to enter the job market working as Junior Front-end or Backend Developers.
The subjects it touches upon are, for the most part, entirely covered in the bootcamp. Those which are only partially or not at all covered during the bootcamp are signaled.
The following tips are based on generalizations, and repeated experimentation with interviewing processes. Each interview process will have its own quirks and will be conducted differently from the others.
Interview processes are normally conducted in two to four steps, and will rarely be entirely overseen by the same company employee.
The first interview is often designed to filter through the candidate pool. It is usually conducted by a recruiter; that is, someone with a non-technical background.
The second interview is normally a technical interview. The interviewer might be a developer who works as technical lead in the project you aim to work on, or a technical employee whose sole responsibility is to interview potential job candidates.
After a technical interview, some companies will ask a candidate to complete a technical challenge. This technical challenge might be sent as "homework" to be completed in a time frame ranging from 2 to 7 days. It might also be administered in person with the duration of 1 to 2 hours.
A third and last interview might be conducted by other company stakeholders, such as the company's CEO, a general manager, HR personnel, or development team members to ensure a cultural fit.
Each of the steps outlined above might be conducted separately or in conjunction with another step, so you should always be ready to sit at an interview for up to 4 hours.
Don’t eat or drink too much before the interview. You don't want to feel unwell during the length of the interview.
Wear fresh clothing. Some people will get nervous and sweat.
Take a water bottle with you. It might make you more comfortable to have something to hold on to.
If the interview lasts more than two hours, don't feel bad about asking to get up and go to the bathroom, get a glass of water or a coffee.
- Technical interviews may vary widely between companies/interviewers.
- Some might last 15 minutes, others might last 1 hour.
- Questions could be more open ended or more exercise driven.
- They can be conducted by one or two people.
- There can be more than one technical interview during an entire recruitment process.
- If you’re getting into consulting, you might get a technical interview at the consulting firm and later at the client.
This question is often asked by people with a misinformed view of JavaScript.
JavaScript is a multi-paradigm language, meaning that it supports multiple different programming styles, including event-driven, functional and object-oriented.
Object-Oriented Programming (OOP) is based around the concept of objects. These are data structures that contain data fields, known in JavaScript as properties, and procedures, known as methods.
Whenever you rely on in-built methods, prototypes or classes, you are essentially using Object-Oriented Programming.
Functional Programming is a form of programming in which you can pass functions as parameters to other functions and also return them as values. In functional programming, we think and code in terms of functions.
JavaScript, Haskell, Clojure, Scala, and Erlang are some of the languages that implement functional programming.
FP is based around the concept of pure functions, which avoid shared state, mutable data and side-effects.
External Resource: Basics of functional programming
A pure function satisfies two conditions:
-
Referential transparency: Given the same inputs, a pure function should always return the same output. In other words, for any set of given arguments, a pure function will always return the same value.
-
Side-effect free: The function cannot cause any side effects. Side effects may include I/O (e.g., writing to the console or a log file), modifying a mutable object, reassigning a variable, among others.
As a consequence of both conditions, we can also extrapolate that a pure function cannot depend on any mutable state, that is, it can only receive immutable values as arguments.
A higher-order function accepts a different function as an argument or returns a function as a return value.
A factory function is any function which is not a class or constructor that returns a (presumably new) object. In JavaScript, any function can return an object. When it does so without the new keyword, it’s a factory function.
We can also think about the difference between OOP and FP in terms of the difference between imperative and declarative programming.
These are umbrella terms that describe shared characteristics between multiple different programming paradigms. FP is an example of declarative programming, while OOP is an example of imperative programming.
In a basic sense, imperative programming is concerned with how you do something. It spells out the steps in the most essential way, and is characterized by for and while loops, if and switch statements, and so on.
const sumArray = array => {
let result = 0;
for (let i = 0; i < array.length; i++) result += array[i];
return result;
};By contrast, declarative programming is concerned with what to do, and it abstracts away the how by relying on expressions. This often results in more concise code, but at scale, it can become more difficult to debug because it’s that much less transparent.
Here’s a declarative approach to our sumArray() function, above.
const sumArray = array => {
return array.reduce((x, y) => x + y);
};Classes are at the core of object-oriented programming. They generalize a type of object, allowing you to instantiate multiple objects that share the same basic properties and methods.
Classes can be extended.
External Resource: Digital Ocean's guide on JS OOP
It’s an object instantiated from a class.
A class can extend another class, and therefore inherit its constructor, properties, methods, statics.
As one of the tenets of Object Oriented Programming, it is the practice of designing objects to share behaviors and to be able to override shared behaviors with specific ones. Polymorphism takes advantage of inheritance in order to make this happen.
It refers to a programming language's ability to process objects differently depending on their data type or class. More specifically, it is the ability to redefine methods for derived classes. For example, given a base class shape, polymorphism enables the programmer to define different area methods for any number of derived classes, such as circles, rectangles and triangles. No matter what shape an object is, applying the area method to it will return the correct results.
Composition gives you more flexibility by composing functionality to create a new object, while inheritance forces you to extend entities in an inheritance tree.
External Resource: Composition vs. Inheritance
No, JavaScript is a single-threaded language.
External Resource: Single-threaded and asynchronous
Something mutable is, by definition, liable or subject to change or alteration. We use the word to refer to objects whose state is allowed to change over time. An immutable value is the exact opposite: after it has been created, it can never change.
Values in JavaScript are immutable. Declared variables, objects are, by default, mutable.
var statement = "I am an immutable value";
var otherStr = statement.slice(8, 17);
console.log(statement); // "I am an immutable value"
console.log(otherStr); // "immutable"
statement = otherStr;
console.log(statement); // "immutable"In the example above, the value for the original string stays unchanged. The variable, on the other hand, can be re-assigned.
Regular Expressions (RegEX) are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects.
These patterns are used with the exec and test methods of RegExp, and with the match, matchAll, replace, search, and split methods of String.
External Resource: Short explanation of RegEx
External Resource: MDN Reference for Regular Expressions
Synchronous operations might block the main thread. Asynchronous operations should be built in a way that doesn’t block the main thread.
External Resource: node.js
fsmodule documentation
Function declarations are hoisted, while function expressions are not. That means function declarations are moved to the top of their scope by the JavaScript interpreter, and so you can define a function declaration and call it anywhere in your code.
By contrast, you can only call a function expression in linear sequence: you have to define it before you call it.
// Function Declaration
sum(1,2);
function sum(x, y) {
return x + y;
};
// Function Expression: ES5
const sumES5 = function(x, y) {
return x + y;
};
// Function Expression: ES6+
const sumES6 = (x, y) => x + y;There are several data types defined in JavaScript:
- Primitive type:
Boolean,Number,String,Null,Undefined. - Non-primitive type:
Object,Array(Which is actually a specific object).
A closure encapsulates a portion of code.
A closure is an inner function that has access to the outer (enclosing) function’s variables — scope chain.
The closure has access to three scope chains:
- Access to its own scope (variables defined between its curly brackets).
- Access to the outer function’s variables.
- Access to the global variables.
A callback is a pattern, while promises have been specified into the language.
A Promise is an object that wraps an asynchronous operation and resolves when it’s done.
Promises can also be used in conjunction with async/await in order to write asynchronous code in a more synchronous-looking manner.
External Resource: Medium article on callbacks vs. promises
== in JavaScript is used for comparing two variables, but it ignores the datatype of variable. === is used for comparing two variables, but this operator also checks datatype and compares two values.
Null is an assigned value. It means nothing. undefined means a variable has been declared but not defined yet.
It has different values depending on where it is used:
The first and most important question you need to ask yourself when you’re trying to answer this question is “Where is this function being invoked?”. The only way you can tell what the this keyword is referencing is by looking at where the function using the this keyword was invoked.
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it.
display: inline means that the element is displayed inline, inside the current block on the same line.
display: inline-blocl Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Q: What is the difference between display none and visibility hidden
visibility:hidden - It is not visible but gets up it’s original space whereas,
display:none - It is hidden and takes no space.
Q: We have 2 divs, the top one has a margin-bottom of 20px and the bottom div has a margin-top of 20px as well, whats the size of the space between them?
Collapsing margins happen when two vertical margins come in contact with one another. If one margin is greater than the other, then that margin overrides the other, leaving one margin, answer 20px.
justify-content: Horizontal Alignment & Spacing along primary axis (X-axis)
align-items: Vertical Alignment only along secondary axis (Y-axis)
The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
Concretely, a higher-order component is a function that takes a component and returns a new component.
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM.
Is the name for the process that syncs the virtual DOM with the "real" DOM
The microservice architecture is an architectural style that structures an application as a collection of small services that are loosely coupled, independently deployable, highly maintainable and testable.
The microservice architecture enables the rapid, frequent and reliable delivery of large, complex applications.
REST (Representational State Transfer) is an architectural pattern that separates content by resources and methods.
SOAP (Simple Object Access Protocol) is a protocol that transfers strictly defined data, structured in the XML format. It was first defined in 1999 and is used in a lot of legacy applications.
GraphQL is a data query and manipulation language that offers great flexibility when loading and modifying data. It allows you to load only the data you require. It was developed internally by Facebook in 2012 but released as an open-source standard in 2015. Many think it’s the future of web-service APIs, but it’s still an incomplete spec, with some poor implementations.
GET: Retrieve data. Should not have consequences in terms of mutating state or side effects on the server.
POST: Used to submit an entity to the specified resource, often causing a change in state or side effects on the server.
PUT: Replaces all current representations of the target resource with the request payload.
PATCH: Partially updates the target resource.
DELETE: Deletes the specified resource.
In unit testing, we test each piece of functionality at the smallest practical level and ensure it is working as desired, not relying on external state, services, and not mutating external state or invoking external services.
In integration testing, we test how two or more separate pieces of functionality work together.
In end-to-end (or e2e) we test an application in its entirety, including the integration with external services.
Google’s engineering guidelines suggests a 70/20/10 split: 70% unit tests, 20% integration tests, and 10% end-to-end tests.
Q: What is test-driven development (TDD)? How does it differ from behavior-driven development (BDD)?
Test-driven development (TDD) is a software development process that relies on the repetition of a very short development cycle: first the developer writes an (initially failing) automated test case that defines a desired improvement or new function, then produces the minimum amount of code to pass that test, and finally refactors the new code to acceptable standards.
Behavior-driven development (BDD) aims to address the shortcomings of TDD, by trying to abstract away implementation details and instead focusing in the behavior of the functionality.
In both TDD and BDD approaches, tests are written upfront before the actual code is written. Writing tests first helps predict the course of the development, which will ultimately prevent any cases being missed from the code or functionality.
Design patterns are typical solutions to common problems in software design. Each pattern is like a blueprint that you can customize to solve a particular design problem in your code.
The MVC pattern separates application logic between “Models”, “Views” and “Controllers”.
Controllers handle a request, process it, retrieve data from the Model, format it and pass it to the View.
Models are responsible for shaping, storing and retrieving the data.
Views display the data and receive user input.
HTTP vs. HTTPS
We should use HTTPS instead of HTTP, since HTTPS is encrypted using public/private key encryption.
External Resource: Google Developer's article on the usage of https.
Cross-Site Scripting (XSS)
With Cross-Site Scripting, a malicious third party will find a way to inject arbitrary code on your page, and will use it to perform actions in name of the user.
The way we mitigate XSS is by
For example, if Twitter didn't escape special characters in user publications before displaying them on a page, someone with bad intentions would have the ability to inject custom JavaScript that would create spam posts in name of the user. This has happened in the past.
External Resource: Cross-site Scripting (XSS).
Waterfall is a sequential, linear process of project management. It consists of several discrete phases. No phase begins until the prior phase is complete, and each phase's completion is terminal.
Waterfall management does not allow you to return to a previous phase.
The Agile methodology helps continuous iteration of development and testing by breaking the product into smaller builds.
In this methodology, development and testing activities are concurrent, unlike other software development methodologies (such as Waterfall). It also encourages teamwork and face-to-face communication. Business, stakeholders, and developers and clients must work together to develop a product.
Scrum is an agile process that allows us to focus on delivering value in the shortest time. It rapidly and repeatedly inspects actual working software. It emphasizes accountability, teamwork, and iterative progress toward a well-defined goal.
The Scrum Framework usually deals with the fact that the requirements are likely to change or most of the time not known at the start of the project.
External Resource: Agile vs. SCRUM
Principles we should strive for when developing.
S: Single Responsibility Each piece of your code should address a single purpose and not get entangled with other code.
O: Open/closed Your code should be open to extension (think inheritance) and closed to modification.
L: Liskov Substitution Principle Your code should be substitutable for a different code implementation without breaking your application.
I: Interface Segregation Principle Many highly specific smaller interfaces should be better than a few general purpose interfaces.
D: Dependency Inversion Principle One should "depend upon abstractions, [not] concretions."
DRY stands for Don't Repeat Yourself.
- Typescript
- Redux
- Vue.js
- U; - https://ui.dev - Courses provided by Tyler McGinnis (Paid courses, free newsletter)
- Egghead - https://egghead.io - Multiple tutorials within the JavaScript ecosystem (Paid)
- https://www.freecodecamp.org/ - (Free)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent