protips

Logo

This site lists the protips that we shared with students during our courses

View the Project on GitHub appliedtechnology/protips

Technical interview FAQ … and responses

Introduction and disclaimer

This document describes some of the questions that you might get asked during an interview or on a test. And a potential responses, for some of these the jury is a bit out on how to answer them “correctly”.

Very often an interview just wants to see that you know what you talk about around a topic, and a good way to do so is to reason a bit about what technology is, why I want to use it and how it compares to other technologies.

It’s not enough to just regurgitate the answer below, but it should give you an idea about what kind of answer and knowledge that you might need to acquire to feel comfortable.

There’s no particular order in these questions and also the answers are just the ones that I, Marcus, wrote - with my limited knowledge about the topic.

Some answers are long, but that is just for you to get some background and understand, rather than to study the letter. In those cases, I’ve written an “In short”-section that would be the thing that I answered on a direct question.

Contents

Basic technologies Architecture Programming paradigms
- Node
- NPM and NPMJS.com
- TypeScript
- JavaScript
- HTML
- CSS		 - Backend
- Frontend
- Client / server
- HTTP
- API
- REST		 - Functional programming (FP)
- Object oriented programming (OOP)
Building and transpiling Databases Front-end frameworks
- Babel and transpiling
- WebPack and building		 - Relational databases and SQL
- Document databases		 - React
- Vue- Angular
Working as a programmer Programming paradigms Other tools
- TDD
- Refactoring
- Mob programming		 - Functional programming (FP)
- Object oriented programming (OOP)		 - Docker

The questions - What is ___?

For each question below, imagine an interview asking you:

Can you tell me what X is and what is that for?

For example:

What is Node and what do I use that for?

Node

In short: Node is a platform that allows you to write scalable JavaScript backend services.

Node is a JavaScript runtime that allows you to write scalable backend applications in JavaScript. It’s built on Chromes V8 engine and uses an asynchronous, non-blocking, event-driven architecture, that allows you to write very scalable applications.

NPM and NPMJS.com

In short: npm is a package manager for Node applications. With it, we can download packages from the millions that are found on npmjs.com, and also customize and simplify our development environment and experience.

npm (Node package manager) is a tool to download packages and manage Node applications. One of the main reasons that Node has been so successful is that there are millions of package for you to freely download and use in your application. This can be used to both assist your development but also to make your applications more powerful.

npm installs with the Node installation on your computer and is a terminal command.

Many of the tools that are mentioned below can be downloaded from npmjs.com for free.

npm is also a tool that you manage your applications with and you can use it to build, run and test applications that we write, by writing scripts in the package.json file - a manifest file that every Node application has.

TypeScript

In short: Typescript is a language that makes JavaScript development easier and tooling better. It compiles to ordinary JavaScript and hence is not visible at run-time.

TypeScript is a language that wraps JavaScript and adds things like types, classes, and interfaces to make your development experience easier. The code is easier to navigate and refactor as types make it easier to reason about and tools like Visual Studio Code can give better support for the developer too.

Interesting enough; you don’t run TypeScript (normally) but it compiles to idiomatic JavaScript that is then run in your application.

TypeScript is a “superset” of JavaScript which means that all thing in JavaScript exists in TypeScript too. But TypeScript has additional features and often moves faster than JavaScript in its development, which means that new JavaScript features first are available in TypeScript. Classes were such a thing.

JavaScript: Vanilla, Es5, Es6, EsNext

In short: JavaScript’s official name is ECMAScript and has come in many versions over the years. The one with the broadest support in browsers and platforms is called ECMAScript 5 or ES5. Most applications are written using ES6 or later. There are many compilers and transpilers between versions to support more browsers and platforms.

The language that we know and love as JavaScript is standardized as ECMAScript, abbreviated as ES. ECMAScript have come in many versions over the years.

For a long time, JavaScript 5 (or more correctly ECMAScript 5) was the only version that we had. This is what many people refer to as vanilla (ordinary) JavaScript and is also the safest version to support all or most browsers. Hence many other languages, such as TypeScript or CoffeeScript compiles to ECMAScript 5.

ECMAScript 6 (ES6 or ES2015) introduced many new features that made JavaScript much more pleasant to work with. For example arrow functions (=>), collections, for/of loops and native support for promises. This is the version that most applications are relying on today.

ECMAScript 7 and 8 (ES2016 and ES2017) contains minor upgrades.

ESNext is a term that is often heard and refer to the next version of ECMAScript / JavaScript at the time of writing.

Many tools, such as Babel and WebPack, that compiles between different versions of JavaScript. Most commonly from ES6 to ES5. This is done so that the code can run on places that only support ES5.

HTML - Hypertext markup langauge

In short: HTML is how we structure information on a web page. It is built using tags (such as <h1> or <article>) to semantically describe the content of a page, without describing too much about how it should look

A web page is most commonly actually a HTML document that containing a lot of HTML elements / tags that structures the information on the page. The browser then decides how to display that document to the end user.

HTML contains all the elements that we need to built applications using web pages. First it can display text and images but with HTML we can also display forms and inputs of different kind, so that the user can interact with the information on the page.

HTML is an old technology (first specification written 1989) but has undergone many updates. The current version we are using is called HTML 5 and adds the notition of semantic HTML, which means that we describe what the item are (<article> or <footer> for example) and let the browser decide how to display this information to the user.

W3Schools has a good and probably the most complete documentation of HTML

CSS - Cascading Style Sheets

In short: CSS is a way to describe how HTML should be presented to the user. Where HTML describe what the page contains, CSS will rather describe how the content should be presented. CSS is interpreted a bit different for different browsers leading to a lot of quirks and work-arounds needed to be applied in order to get the layout we want.

CSS (Cascading Style Sheets) helps us to separate the concern of content and presentation, which means that we can keep the style in one place (typically a separate .css file) and the content of the page is not concerned with how to be presented.

With CSS we can define classes (aka selectors) to describe how certain elements should be presented and then apply these classes to different elements in our presentation

.warning {
  color: red;
}

<div class="warning">This will be displayed in red.</div>

CSS is a functional langauge is so far that we describe what should happen but not so much about how it should be done. The repercussions of applying a style can sometimes be a bit tricky to follow and understand, leading to design-bugs that are tricky to trace.

CSS Frameworks

There are many examples of CSS frameworks that basically are a set of predefined styles that we can apply to our application to make much of the grunt work of design go away. The most well-known are Bootstrap, Materialize CSS or Semantic UI

CSS Preprocessors

Other tools that are commonly used for CSS are so called preprocessors which basically means that we can write our CSS code in another langauge that then compiles to proper CSS. Common examples of these are:

Babel and polyfill

In short: Babel is a tool that transpiles (translates) from one version of JavaScript to another. In this way we can write code in a later version of ECMAScript (ES2017 for example) and then run the code through Babel to get it in, for example, ES5 so that many more browsers and platforms can run our code.

This very handy because it means that we can use later features of JavaScript long before it’s being standardized (firstly) and then adopted in all major browsers.

Babel can be said to be a polyfill for JavaScript.

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively

Remy Sharp

WebPack

In short: WebPack is a tool that bundles our applications for use by real users. It might do many different things that are handled by using one of the numerous plug-ins.

WebPack is a tool that helps us prepare our code for the production environment. It might contain many different steps, such as:

WebPack is the tool that ties all of these steps together.

Backend

In short: backend is one part of an application that is run on a server. The clients of the application send commands to a common backend that often are responsible for storing and retrieving data from one or more data sources.

Backend refers to the type of applications that runs on a server. Other common names are services, server or APIs (Application Programming Interfaces).

Often an application consists of two parts: one or more clients that communicate with a server. The server is a common gateway for data storage and retrieval. It often contains logic to ensure that data is correctly formatted and validated before stored but also can aggregate data from different data sources to one common format that is returned to the client.

Most backend services for web applications communicates with HTTP using a REST-style architecture.

We write our backend services in JavaScript using Node.

Frontend

In short: frontend is the part of the application that the user sees and interacts with. It presents the data of the application to the user and communicates with the backend (or server) to store and retrieve the data of the application.

Front-end refers to the part of the application that is shown to a user. In a client-server architecture, the frontend is the client, that communicates with the backend (or server), often via HTTP requests.

In a web application world, it is what is presented in a browser, but it can also be an application in a mobile phone or on a computer.

Frontend application is often done in a mix of languages such as:

Client Server architecture

The client-server architecture is a very simple way to divide your application into two parts; one client that the user interacts with and one server that is in charge of retrieving, updating and storing data.

A web application is a client-server application where the client is often referred to as the frontend - a webpage or an app on your phone. The server (or backend) is often an HTTP API that stores and retrieves the data of the application.

HTTP

In short: HTTP is the HyperTextTransfer Protocol and is the basic communication structure for the web. It’s a way to format messages with requests and responses and communicate data over the web.**

HTTPS (S = secure) refers to encrypted HTTP, to make the exchanging of information harder for someone to steal and tamper with.

HTTP stands for HyperText Transfer Protocol and is the way data is most commonly passed across the internet. It’s the protocol that drives and lies behind the success of the world wide web.

HTTP is very simple at its core, built around a request/response pattern. A client and a server communicate are through request and response. That means client issues a request (for some information, to update some data or store some new data) and the client responds with a response.

The request has

The response in turn has

API / Web API / Web Services

API stands for Application Programming Interface and is a way for one program to interact with another program.

A Web API (or web services) refers to an API that is reachable across the internet. Often these APIs are called using HTTP/HTTPS.

REST

In short: REST (Representational State Transfer) is a software architectural style, that helps you write better web services. Better in that there are many constraints in how you will interact between the client and the server making the style of the application easy to understand.

REST applications are defined around the core concept of a resource that is the things that our application handles, for example, Users or Tweets. We then define the application, in the REST-style, to show how we interact with the resources.

The rules are, very shortly:

Something that follows these rules is said to be RESTful, i.e. defined according to the REST style.

It is often implemented using HTTP but that is no requirement for something to be REST.

REST is very often misunderstood and misused and quite often is, erroneous, just equated with APIs using HTTP.

SQL, Postgres and relational databases

In short: Postgresql is a relational database that is easy to use with Node and JavaScript. Being a relational database PostgreSQL is built around the concept of tables and their relationships. We communicate with PostgreSQL through SQL queries that help us to insert, read, update and delete data.

Postgresql is a relational database, that is open source and very easy to interact with from JavaScript and Node. It has been around for a very long time (30+ years) and has a wide adoption around the web development community.

A relational database stores information in tables and defines indexes and keys to keep track of the relationship between the tables. This is done to minimize the duplication of data and store as little data as possible.

For example, we might have a table called ORDERS that holds order information. But since each order might have many order lines, we don’t want to duplicate the common order information such as an address, etc. So we create an ORDERLINE table with a foreign key to the ORDER table (OrderId). The tables are no related through this key.

When we want to get the data back from the database we utilize a special language called SQL (Structured Query Language) and write a query that returns all the data, both the order but also the order lines. It might look something like this:

SELECT
    ORDERS.*,
    ORDERLINES.*
FROM
    ORDERLINES
    INNER JOIN ORDERS ON ORDERLINES.OrderID=ORDER.OrderId

This way our query (in SQL) can be defined not only what data to get (or update) but also how the result will look.

Document databases and MongoDb

In short: Mongo (or MongoDB) is a document database that is written using JavaScript. It has got wide adoption since it’s very easy to interact with while at the same time supports storing huge amounts of data and get it back fast.

Document databases are different from a traditional, relational database since they are oriented around documents, or entities, or information. The main idea is that we store all the information around the entities that we want to get back together, as opposed of relational databases where we would store data in only one spot and then join the data together with queries as we need them.

The upside with document databases is that it’s closer to the models we are using while programming; a user is stored as a user document with all it’s information in one spot, for example with its address. In a relational database, you can easily find user data spread over many tables.

The drawback is that data gets duplicated and different versions of the documents might contain a lot of the same data. In smaller application, this not a big issue but this can potentially become troublesome.

The name MongoDB comes from Humongous database and is a play on the amount of data it easily handles.

Mongo is fun itself as it’s written in JavaScript making the stack complete; JavaScript on the client, server and database.

React

In short: React is a library that helps you build component-oriented user interfaces. It has very wide adoption and loads of ready-made components. Its design and structure can help you write well-designed code that is easy to maintain and support.

React is a JavaScript library for building user interfaces that are oriented around the notion of components.

React let’s you program against a virtual DOM (Document Object Model) meaning that React takes care of updating the actual DOM for you. This makes React both easy to program against and the applications very fast, as React can update only parts of the web page rather than reloading the whole page every time.

We write React components in JavaScript but there is a syntactical sugar called JSX (JavaScript XML (Extended markup language)) that lets you intermingle JavaScript and HTML. This sounds like it will create a mess but works well as it focuses on one single component. Here is one example:

class App extends React.Component {
  render() {
    const i = 1;
    return (
      <div>
        <h1>{ i === 1 ? 'true' : 'false' }</h1>
      </div>
    );
  }
}

Which will output

<div>
  <h1>true</h1>
</div>

React will compile to ES5 JavaScript that is then executed in the browser. This JavaScript will then dynamically render HTML and update the DOM as needed.

React is written by Facebook and comes with a HUGE ecosystem of plugins and ready-made components that speeds up development significantly. With React you will also probably use yarn which is a package manager like npm and also Jest that is a testing tool that works great with React.

React can be used to write many kinds of applications, not only web applications. With the help of React Native we can, for example, write applications for phones (Android and IPhone using the same code-base). Using React a tool like Proton-Native React can be used to build applications for Windows of Mac.

React has a firm foothold as the number one frontend framework right now.

Angular

Vue.js

In short: Vue.js is another frontend framework for JavaScript that not only solves the same problem as React but also shares many ideas and principles as React. However; Vue.js is not backed by a big company but is rather an open-source initiative. It also uses templates and does not mix JSX and JavaScript, as React does.

Vue.js is a progressive framework for building user interfaces with JavaScript. Vue solves the same problem as React but is designed to be adopted incrementally where React rather is all or nothing.

The core of Vue is very easy to adapt and get started with. It also has a huge ecosystem of plugins that help you progressively write more and more advanced applications.

React and Vue have much in common; they are both oriented around components, they are both using a virtual DOM to do updates of parts of the application.

The main differences are that where React intermingles HTML and JavaScript with JSX - Vue uses templates that can be written in separate files to keep layout and data apart.

Vue is not backed by a big company but is rather a “traditional” open source project maintained by many people.

Vue is growing faster than React and will soon take over as the de facto standard of frontend frameworks for JavaScript.

Docker

In short: Docker is a computer virtualization tools. It means that we can create virtual computers called containers. You can think about it as a computer as a file. This means that we can not only script how our server should be configured but also that we can send these containers to a third party (like Azure, Google Cloud or AWS) to run (“host”) them for us.

Docker is a way to define computers as a file. This is often referred to as virtualization, i.e. make a virtual computer. These virtual computers are called containers or images.

The main benefit of doing this is first that we can run many virtual computers on one physical computer. Having a computer as a file means that we can send our computer to someone to run it for us, like Google or Amazon for example.

Secondly, we can treat infrastructure as code which means that we can write scripts that “creates” our the computers we are running our application on. This means that we can test and run our application locally. It’s not “like the production server” - it is the same server. No more stuff that breaks but “works on my machine”.

docker is a terminal command but there are many excellent graphical user interfaces to manage your Docker images.

With the help of the tool docker-compose we can also set up more than one server and decide how they interact, like a virtual network even.

At Docker Hub many ready-made images help you quickly get up and running with a new tool or platform. We can, for example, download a readily configured computer that has PostgreSQL or MongoDB installed and correctly configured.

Refactoring

In short: Refactoring means to improve code by changing how it’s written without changing how it behaves. We do this constantly to ensure that our systems are easy to understand, to maintain and to extend.

A key programmer skill is to make our code easier to read and understand. This more important than to make the code fast, terse and easy for the computer to interpret. Or easy to write.

“Indeed, the ratio of time spent reading versus writing is well over 10 to 1. We are constantly reading old code as part of the effort to write new code. …[Therefore,] making it easy to read makes it easier to write.”

— Robert C. Martin (Uncle Bob Martin), Clean Code: A Handbook of Agile Software Craftsmanship

By continuously improving the design of code, we make it easier and easier to work with. This is in sharp contrast to what typically happens: little refactoring and a great deal of attention paid to expediently adding new features. If you get into the hygienic habit of refactoring continuously, you’ll find that it is easier to extend and maintain code.

— Joshua Kerievsky, Refactoring to Pattern

The way that we make our code easier to read is through Refactoring.

Quite simply refactoring means that we write the same code in another (hopefully) better way.

Formally it’s defined as:

Code refactoring is the process of restructuring existing computer code—changing the factoring—without changing its external behavior.

And the best way to describe what it is is to dive in doing it. Read this blog post for more examples

TDD - Test driven development

In short: Test-driven development (TDD) means that we write our code by first writing a test that will test the code we are about to write. This helps us to take smaller steps through a problem and generates better (easier to understand and better structured) code, as well as gives us documentation and tests for all the code we write.

Test-driven development means that we write code that tests our code. Not only that but we write the test code before we write our (production) code.

By doing this we gain many Good Things ™:

Writing tests is not that hard, but gets hard the longer you wait. The time to write the test is just before you write the code.

Common JavaScript test frameworks are mocha and jest. These frameworks are used both to write the test and to run them.

When we work test-driven we follow the Red-Green-Refactor-loop.

Read more here

Mob programming

In short: Mob programming is a way to cooperate while programming. A team of 3-5 people cooperates at the same time around one screen, one keyboard, one problem.

Mob programming is a very simple idea that has a huge impact on how we learn, the quality of our code and how fast we complete work.

I’ll let the discoverer of mob programming, Woody Zuill, introduce the idea:

All the brilliant people solving a problem In the same room At the same time Working at the same computer

Or in other words: a group of people programming together with one keyboard.

For an idea to go into the computer it needs to go through someone else’s hands. Therefore we rotate positions in the mob very frequently, preferably not longer than 8-10 minutes per position.

Mob programming leads to many good things:

Read more here and get good tips here

Functional programming (FP)

In short: Functional programming is a programming paradigm where programs are made up of functions that operate on data that we send to these. By combining functions we build up more and more advanced programs. Main paradigms and ideas are around immutable (unchangeable) data structures and higher-order functions (functions that returns functions).

Functional programming (FP) is oriented around functions that you pass data too. We strive to write immutable (once defined, unchangeable) data and pure (stateless) functions. Program is made up by composing many small functions into a larger whole.

FP is much older than OOP and dates back to the childhood of computer science (1950-is). Commonly used functional programming languages are JavaScript, Haskell and Erlang (or Elixir).

In FP our function operates on data (objects) and we seldom describe the template (classes) for such data. Function themselves are first-class citizens and very often is passed as parameters to other functions, building so-called high-order functions (functions that take functions as parameters).

FP and JavaScript

JavaScript is a multiparadigm language and you can do some functional programming in JavaScript. Especially since EcmaScript 6, there are a lot of concepts (arrow functions, implicit returns and const / let etc.) which makes programming in a functional way a very feasible approach.

There are a few quirks (not immutable by default and pattern matching for example) that don’t make JavaScript a fully functional language but you can do FP with it. FP has much a better fit than OOP in JavaScript.

Read more here

Object-oriented programming (OOP)

In short: Object-oriented programming languages build programs around the concept of classes which we use to make objects of. These objects describe the concepts in the program, and encapsulates the data and functionality of the program in discrete chunks.

Object-oriented languages (OOP - object-oriented programming) is based around the concept of objects. These objects contain data and operations to work on that data.

Famous OOP languages are C#, Java, and Smalltalk. OOP was made popular in the 80-is with the rise of the graphical user interface, that has a good fit for object orientation.

When writing OOP programs we represent our code as classes. Classes are templates for creating objects. Classes describe how the objects should be structured and behave. We describe the problem we are working with as structures of these classes. Classes can inherit functionality from other classes.

OOP and JavaScript

JavaScript is a multiparadigm language and support some features of OOP, but not all. There are classes where data can be encapsulated and certain functionality can be exposed to ensure that we protect the data. We can also inherit functionality from one class to another using the extends keyword. But other, vital parts, of object orientation is missing, such as interfaces and access protection.

Also, worth noticing is that the class keyword and other OOP concepts in JavaScript is just syntactical sugar that turns into ordinary JavaScript when we run it. It might look a little bit like this (This is TypeScript though)

In short, you could say that you could fake OOP with JavaScript but not do it 100% proper.

Read more here