Web Development Interview Questions

Web Development Interview Questions

memorize.aimemorize.ai (lvl 286)
Section 1

Preview this deck

Explain MIME multipart message when used to transfer different types. Give an example.

Front

Star 0%
Star 0%
Star 0%
Star 0%
Star 0%

0.0

0 reviews

5
0
4
0
3
0
2
0
1
0

Active users

5

All-time users

5

Favorites

0

Last updated

1 year ago

Date created

Mar 1, 2020

Cards (138)

Section 1

(50 cards)

Explain MIME multipart message when used to transfer different types. Give an example.

Front

It's used to send more than piece of content of different types within the body of an HTTP request. It contains a header describing the content types and then a series of boundaries with the content inside.

Back

How do you find a performance bug?

Front

In more recent .NET projects I used visual studios built in diagnostic tools in combination with jetbrains .netTrace tools. Python also has some very good built in libraries for diagnosing performance problems, cprofile and profile to see how long each part of your application takes to execute and highlight areas that need improvement. I also have a list of constructs and patterns in each language to look for to do an overall speeding up of code. (go to list)

Back

What are the pros and cons of monolithic vs microservice architectures?

Front

.Microservices are small services that do one thing well (for example an of the command line tools in bioinformatics are microservices), monolithic is a single application or API that does everything. It really depends on what your building.

Back

How to empty an array in JavaScript?

Front

There are a few different ways 1. array = [ ] (use this when you don't have other references to this array variable) 2. array.length = 0 (when there are other reference variables pointing to the array) 3. array.splice(0,array.length) 4. while(arrayList.length){ arrayList.pop(); } // not recommended

Back

Tell me about a project that disappointed you. What would you change?

Front

CIHA, let the client define unrealistic goals, said yes to everything and ended up working 60-70 hour weeks for several weeks in order to execute. Some of the features that we promised were not possible in the amount of time we gave. I would change this by setting realistic goals and estimating more accurately. Spending a good amount of time up front, working out the hard details to make sure they are possible.

Back

Explain HTTP.

Front

It's the protocol by which hypertext is exchanged across the web in a requeset/response pattern. Hypertext includes data and links to other data. An HTTP session includes the client request to server for data, the server processing the request and a response from the server with a status code and the data requested if requirements are and the data exists. This may or may not include several different types of authentication.

Back

What is the drawback of creating true private methods in JavaScript?

Front

private methods are very inefficient, because a copy of them is made each time the object is instantiated. Public methods are instantiated by the this keyword.

Back

How would you store a user's password for an online portal?

Front

M (minimum), MF (multifactor), SSO (single-sign on), S and H (salting and hashing). You should definitely setup a set of minimum password requirements, so that users start out with a good password. Multi-factor authentication is important, so users should at least have to supply one additional piece of information in order to identify themselves, like an answer to a question, in order to initially authenticate. (This makes it harder for a hacker to login, and discourages brute force attacks). You can also implement single-sign on in an enterprise situtation, so if the user an log into the network and use the security features of the network to logon to all applications on the server. Finally, you want to obviously store passwords securely, so I usually at a minimum hash the passwords with a one direction hashing algorithm like SHA-2, but salting a password before hashing it makes it a lot more difficult to reverse. Python has a good built in package called hashlib that I like.

Back

What projects are you currently working on? What side projects are you working on?

Front

Traildock API and trails app, APCCB final project, graphql server for chado database, recipe api (node.js)

Back

Explain advantages of HTTP2 over 1.1.

Front

Http2 was designed to improve page responsiveness by compressing http requests, loading page elements in parallel, and prioritization of requests. Http1.1 had an issue called head-of-line blocking which limited performance by allowing a single packet of data to block the rest from getting through because it used a FIFO system instead of prioritization.

Back

Explain the difference between stateless and stateful protocols. Give examples of each.

Front

In a stateless system, each request is independent of the next. The server is not required to keep track of any session or request information. Each request does not know about previous requests made. In a stateful system, the server must maintain response data across multiple requests. Http requests are meant to be stateless. Browsers maintain state information in a variety of ways. Cookies or local storage are two examples.

Back

What is a "closure" in JavaScript? Provide an example

Front

A function defined inside another function (parent function). It has access to variables in three different scopes (in its own scope, the parent scope and the global namespace). To give an example write a function within a function and variable at each level.

Back

What new tools are you excited about?

Front

I've been playing around with GraphQL a lot lately. (Describe project - see above) I also am interested in learning more about creating containers with Docker. Having come from a .NET background where you need to have a number of tools and packages already installed on a server and having to get everything just right before you can deploy your application or service, and then spending so much time troubleshooting the application on different servers (the whole "it works on my machine" thing, and "dll hell" - are you guys old enough to remember that before nuget?). It really appeals to me the idea of having these portable applications that have everything they need to run inside their own container.

Back

Python and multi-threading. Is it a good idea? List some ways to get some Python code to run in a parallel way.

Front

Back

How do you organize your JavaScript code?

Front

separate from html of course, modules based on functionality, webpack to bundle

Back

What technologies, programming languages, and frameworks would you use if you had to develop a project from scratch in only one month?

Front

Python/Django/API (for a bioinformatics project) or a Node.js API for a simple RESTful API with simple data. If a lot of different queries are needed I would add a graphql server for easy and quick retrieval of data. And I would probably use relay and react.js to quickly build a good looking front end. I might use Bulma.io instead of Bootstrap because whilc it does have limitations, it's easier to create good looking design (without being a designer). I might use a NosQL database, depending on the data that needed to be stored in order to build something quickly and not have to design a relational database, but I would build it with a good ORM so that it would be easy to switch out the database later if needed.

Back

Read the rest of these problems.

Front

https://www.codementor.io/nihantanu/21-essential-javascript-tech-interview-practice-questions-answers-du107p62z?icn=post-3ey8yl7epg&ici=post-du107p62z

Back

Tell me about a time you've struggled to implement or debug something on the back end.

Front

Last year I built a fairly complicated a API for a client. The web application they were building was used by a large design company who sold and installed fans into factories, warehouse, and restaurants. They had clients like Target, Toyota, etc. The web app was to be used to design fan installations so they needed a feature where users could upload an existing blueprint in CAD format (DWG, Revit file) and display and manipulate it in the browser using Three.js. My API took the upload CAD file and converted it to format that could be displayed in Three.js. That turned out to be the easy part. In order for the front-end to be able to recognize rooms in the CAD drawings, they wanted me to take individual segments that represented walls and try to connect them into a continuous polyline. I had recently taken an algorithm design class for graduate school so I ended up using graph theory and a bread-first search approach to connect the segments. It was really a difficult problem, but when I broke it down and consulted my algorithms professor and some fellow students, I was able to work it out. I would consider it to be a heuristic algorithm because there was no way to get it perfect everytime, without some user input, so you just have to create an algorithm to get it to a good spot and then let the user finish it.

Back

Can you name two programming paradigms important for JavaScript app developers?

Front

JavaScript supports both functional programming and object-oriented programming with prototypal inheritance.

Back

What does "favor object composition over class inheritance" mean?

Front

Back

How do you take into account SEO, maintainability, UX, performance, and security when you're building a web application?

Front

Back

Tell me about a project you're particularly proud of. What did you do that worked out well?

Front

Fan Facility Tool API.

Back

What is variable hoisting in JavaScript? What are the issues that can arise with this?

Front

Variables and functions may be available before they are declared. The javascript interpreter looks ahead to all variables that are to be declared in a function and hoists them to the top. Problems occur when you have variables of the same name inside and outside of a function.

Back

Provide an example of when you found an inefficiency in someone else's code, and how you addressed it.

Front

I've recently been working on this API called Traildock, you can find it at traildock.com if you want to look at it. I inherited it from another developer who built it in is free time on the side of his real job. He's a super smart programmer, and built a very restful api, you can see if you take a look. However, like all projects with tight deadlines and large codebases, sometimes the code can get away from you and get a little messy. So it's good to have a set of fresh eyes look at your code from time to time. I noticed when I stepped through the code, there was a lot of code redundancy and often in one API call, the same code would get called several times. So, I refactored the code so that it would be more efficient and so that the same code did not appear in multiple places.

Back

What is the difference between classical inheritance and prototypal inheritance?

Front

Prototypal inheritance is objects without classes, and the ability to link two objects.

Back

How many concurrent HTTP requests can happen at one time in a browser?

Front

That is limited in each browser. Most modern browsers allow 6 connections, it used to be 2 but modern responsive applications require more than that.

Back

What is your familiarity with design patterns?

Front

To me there are two types of patterns developers need to think about. Overall architectural patterns need to be decided first, and then individual design patterns for specific functions next. As for architectural patterns, these days you are generally using some sort of MVC or MTV (model view controller or model template view) pattern on the front end and a RESTful API or query server on the back-end.

Back

What is functional programming?

Front

Functional programming is a programing paradigm that allows for pure functions and allows you to avoid the common side effects from typical object oriented programming. It makes coding more simple but using set of small reusable and predictable pure functions.

Back

How do you check if an object is an array or not?

Front

Array.isArray( x ) if using jQuery otherwise if( Object.prototype.toString.call( arrayList ) === '[object Array]' ) { console.log('Array!'); }

Back

How do you stay aware of new technologies related to full stack web development?

Front

I read a lot of articles online and do a lot of courses on sites like Pluralsight and Coursera. I love playing with new tools by building my own projects. I have an ongoing side project that is an API and front-end for managing my recipes. I've tried writing the API in many different languages and with different frameworks in order to learn to use new tools. I have grand plans to write a mobile app that pulls from my recipe api and submitting it to the App store some day, but I need to find time to do that.

Back

What are the pros and cons of functional programming vs object-oriented programming?

Front

Back

What is javascript? When would you use it?

Front

Back

Describe Python's garbage collection mechanism in brief.

Front

There are two aspects to memory management in python programs. The reference counter and the garbage collector (gc module). Reference counting can't be turned off and works like most garbage collectors, deallocating objects when there are no references to them. You can use sys.getrefcount() to check the reference count to any object. The gc module, is supplemental and can be disabled and enabled programatically. This is needed for circular references, which the reference counter cannot handle.

Back

How does an ETAG work?

Front

An etag is a string that is attached to a response from the server that allows the client to keep track if something changed. The client can cache the etag and send it with the next request along with the header attribute if-none-match. If the etag has changed, the data has changed and the new data is sent to the client. Otherwise the server tells the client the data hasn't changed.

Back

What are the pros and cons of monolithic vs microservice architectures?

Front

Back

What is MIME type and what is it used for?

Front

Multipurpose internet mail extensions. This type is used for classifying data that is passed over the web, like application/json or text/html.

Back

What's your favorite language, and why?

Front

I wouldn't say I have a favorite language. I like to choose a language based on how it fits into a project. C++ - Good for mathmatical and statistical calculations because of speed R - For scripting and parallel processing, combined with Apache Spark this is great for manipulating large datasets and creating visualizations. Python - Is great for manipulating scientific data, and probably the easiest, most readable language. C# - Historically I've used it because I worked for many companies that were purely windows, but I've been moving away from it. .NET has been great for buidling enterprise software and I love Visual Studio. JavaScript - Is obviously great for quick manipulation of the front-end, but I've built Node.js APIs pretty quickly with it using Express. If you need a quick prototype API, this is my goto because it's fast developement on the back-end. I don't have a lot of experience with JavaScript on back-end in a production situtaion, but I know of developers who are successfully doing this.

Back

What is Python? When would you use it?

Front

https://www.codementor.io/sheena/essential-python-interview-questions-du107ozr6?icn=post-3ey8yl7epg&ici=post-du107ozr6

Back

What is Long Polling and how does it work, why would you use it? Drawbacks? HTML5 alternative?

Front

Long polling is used to simulate pushing data back to the client from the server, so when a request is made to the server, the connection between client and server remains open until the server is ready to send data back to the client. The connection is closed only after the data is returned. The problem with this is two-fold, the server has certain resources locked up while it is processing the data and the client browser generally only allows a certain number of connections at a time, so there is the potential for the application to lock up and lose responsiveness. An alternative to this is a web socket (HTML5) which provides a persistent connection between client and server, used in streaming applications or social network feeds where the client can listen to the server to get updates as soon as changes occur. Pretty much any application where you need realtime data updates.

Back

If you have 5 different stylesheets, how would you best integrate them into the site?

Front

Well you definitely want to minimize the number of files being requested from your hosting server, so combining files into one in some way is always a good idea, if possible. That is not always possible so using some file bundling package like webpack to bundle all of your javascript, image, css, etc files into one bundle is way to do this.

Back

Explain RESTful APIs. Explain each HTTP types.

Front

REST is a combination of things. A RESTful API should allow a client to get, post, put and delete any number of resources while following a set of constraints. The request usually contains a resource id, and the response should give enough information for the client to take the next step and update the resource (like a link to a put post). The client and server are obviously separated and the server is not aware of the client other than waiting for requests and returning the appropriate response. Responses that are served are stateless, so they are independent of each other, and as long as the data has not change, will always send the same response. The server has no memory of the requests made. The server should give information about whether or not the data is cachable and when it expires, s the client does not need to keep requesting the same data. GET: Retrieves data from the server (should only retrieve data and should have no other effect). POST: Sends data to the server for a new entity. It is often used when uploading a file or submitting a completed web form. PUT: Similar to POST, but used to replace an existing entity. PATCH: Similar to PUT, but used to update only certain fields within an existing entity. DELETE: Removes data from the server. TRACE: Provides a means to test what a machine along the network path receives when a request is made. As such, it simply returns what was sent. OPTIONS: Allows a client to request information about the request methods supported by a service. The relevant response header is Allow and it simply lists the supported methods. (It can also be used to request information about the request methods supported for the server where the service resides by using a * wildcard in the URI.) HEAD: Same as the GET method for a resource, but returns only the response headers (i.e., with no entity-body). CONNECT: Primarily used to establish a network connection to a resource (usually via some proxy that can be requested to forward an HTTP request as TCP and maintain the connection). Once established, the response sends a 200 status code and a "Connection Established" message.

Back

What is the instanceof operator in JavaScript? When would you use this instead of typeof?

Front

Checks to see if an object is an instanceof a certain type, generally you would use this for custom types and typeof for built in types.

Back

When is classical inheritance an appropriate choice?

Front

Back

What do these mean to you: @classmethod, @staticmethod, @property?

Front

classmethod is a decorator that can be used on a method that will modify or access the class properties in some way, so it requires instantiation. The staticmethod does not require instantiation and will not change the or access the properties of a class. The property decorator can be used to encapsulate properties of a class and obscure the details of how the getter and setters work. You can also change how they work and never change the interface to the class.

Back

What's hard about coding?

Front

So many different ways of doing things, and sometimes you can be hesitant to start because you want to get it exactly right the first time, but I've learned that picking what you believe to be the best option now and make sure it is easily changable and testable later. Realize that you can refactor and always make things better if you keep your code loosely coupled and testable. Loosely coupled code ensures that you can swap out pieces of it later if something isn't working.

Back

Provide an example of a web application that you've built and what technologies were used to build it. What considerations did you make when deciding on the tech stack to use?

Front

I've recently been using the CHADO database schema in projects for graduate school. Have you used it? It's a highly normalized database schema that is a standard for databases holding genomic, transcriptomic and proteomic data. Because of how normalized it is, the queries against it can be very complex. Normally developers create complex views and reuse those, or build APIs around it. But I thought, this would be a good candidate for a GraphQL server. So I have been working on building an API that exposes each type of feature (genes, polypeptides, exons, etc) and on top of that I built a GraphQL server for the front-end to create custom queries. I chose GraphQL not only for speed, but so that from the client on the front-end you can pull only the data you need from the server by creating custom queries. To demonstrate this I wanted to build a quick clean web front-end so I used React.js with Redux. The API is written in Python, because of it's extensive built-in scientific packages. It's the best choice for manipulating scientific data. The database is in MySQL right now, because that's mainly what we use at Hopkins on the shared servers. But if I reimplemented it on my own, I would probably use PostgresSQL. The API and GraphQL server are setup with Django's built-in ORM, so you can easily switch between any SQL database.

Back

What are two-way data binding and one-way data flow, and how are they different?

Front

Back

What is the difference between undefined and not defined in JavaScript?

Front

Not defined means it has never been declared. Undefined means it was declared but not set to value so it has no type.

Back

When is classical inheritance an appropriate choice?

Front

Back

What is CORS and how does it work?

Front

Cross-origin resource sharing is a specification that allows resources hosted in your web application (images, css, javascript files) to be shared across another domain. If you want your client and server to be able to talk and share resources, you have to setup CORS support on the server and the client. For example in ASP.NET you have to configure a setting to enable CORS either globally or on an individual controller. The django rest framework has a similar capability that basically adds a middleware piece of software that listens in on http requests and determines if they have the correct headers and tokens to access the data.

Back

Section 2

(50 cards)

What is a Promise?

Front

https://thebittheories.com/nodejs-interview-questions-935498510d46

Back

What is a proxy server?

Front

Back

What are the problems with classical inheritance?

Front

They generally only allow you to inherit from one object (interfaces changed this in C#) and that is not realistic to how things work in the real world. Inheriting from one parent to one child is very tight coupling (small changes create rippling side effects). So you try to create new classes, but it's too hard to refactor so you have to duplicate code.

Back

When would you want to use an anonymous function over a named function?

Front

When sending it as a paramater to another function or if the function definition is conditional.

Back

https://medium.freecodecamp.org/3-questions-to-watch-out-for-in-a-javascript-interview-725012834ccb

Front

Back

How do you make sure your web applications are mobile friendly?

Front

Use a CSS framework like Bootstrap that is mobile first and test!

Back

What is idempotence and when is it important?

Front

Given the same inputs a function will always produce the same outputs. Necessary for parallel programming and one of the RESTful principles. Allows you to scale horizontally.

Back

What is inversion of control?

Front

A way to decouple layers of a system.

Back

What is the difference between local storage and cookies? When should you use them?

Front

Back

What is event bubbling, event capturing and event delegation? How do you force your application to use event capturing?

Front

Back

What is function hoisting in javascript?

Front

The javascript interpreter allows you to use a javascript function before it's declared and defined. Unlike variable hoisting which moves only the declaration, but not the definition. Great for expression high level logic at the beginning and not having to keep track of order of functions like you did in other languages like fortran.

Back

Explain a use case for Docker

Front

https://medium.com/fullstack-caf%C3%A9/8-ultimate-full-stack-interview-questions-and-answers-925b6ad4487f

Back

What does the delete keyword in javascript do?

Front

It deletes properties from an object, if used on a local variable nothing will happen. If the property is a prototype property, nothing will happen because you can't delete prototype properties.

Back

Explain the main difference between REST and GraphQL

Front

Back

What are the causes of memory leakage in a javascript application? How do you measure memory leakage?

Front

Back

How to you make sure you have consistency across browsers?

Front

Use something like Reboot which corrects deficiencies in browser adaptation or use Bootstrap which uses Reboot

Back

What is Currying in javascript?

Front

https://medium.com/@soumyasunny/ui-developer-interview-questions-354ae489065c

Back

What is Currying in javascript?

Front

It's creating the ability to chain a number of functions together by piping the output of one into the input of another.

Back

https://www.coderbyte.com/algorithm/3-common-javascript-closure-questions

Front

Back

var bar = true; console.log(bar + 0); console.log(bar + "xyz"); console.log(bar + true); console.log(bar + false);

Front

1, "truexyz", 2, 1

Back

What is the difference between forEach, for-of and for-in loops? In which scenarios will you use each of these?

Front

Back

What is callback hell? How do you overcome this?

Front

Back

When do you use null instead of undefined?

Front

Back

What are ACID properties wrt to a database?

Front

Back

Are there any disadvantages to GraphQL?

Front

Back

What is an anonymous function in javascript?

Front

var foo = function () {} ( A function without a name assigned to a variable or passed to another function)

Back

What are the characteristics of a pure function?

Front

Idempotence, no side-effects (they aren't mutable, and there is no shared state), no observable output or triggered events (i/o), so they won't conflict with other parts of your code or cause hidden bugs. They produce pure encapsulation, which makes them loosely coupled from the rest of the application.

Back

What is jsonp?

Front

Back

var z = 1, y = z = typeof y; console.log(y);

Front

undefined

Back

What are the most important steps you would recommend for securing a new web server? Web application?

Front

Web Server Security:Update/Patch the web server software, Minimize the server functionality disable extra modules, Delete default data/scripts, Increase logging verboseness, Update Permissions/Ownership of files, Web Application Security: Make sure Input Validation is enforced within the code - Security QA testing, Configured to display generic error messages, Implement a software security policy, Remove or protect hidden files and directories

Back

What are success factors for continuous integration?

Front

Maintain a code repository, Automate the build, Make the build self-testing, Everyone commits to the baseline every day, Every commit (to baseline) should be built, Keep the build fast, Test in a clone of the production environment, Make it easy to get the latest deliverables, Everyone can see the results of the latest build, Automate deployment

Back

What is the difference between instanceOf and typeOf operators?

Front

InstanceOf is used with complex objects, typeof is used with built in variable types.

Back

What does 'use strict' do in javascript?

Front

In ECMAScript 5 it is a line that forces you use certain javascript constructs in a certain way.

Back

What is the difference between an anonymous function and a named function in javascript?

Front

An anonymous function is defined at run-time and the other at parse time. You can only call an anonymous function after it is declared and assigned to a variable (below it in the code), while a named function can be called above it.

Back

Functions are first class objects. Can you validate this statement?

Front

Back

What is the difference between JSONP and CORS?

Front

Back

What are the types of design patterns in javascript?

Front

Back

What exactly is a container?

Front

It is launched by running an image. An image is an executable package that has everything it needs to run inside. A container is a runtime instance of an image (when you run an image in memory it becomes a container - or an image with state).

Back

https://medium.com/coderbyte/a-tricky-javascript-interview-question-asked-by-google-and-amazon-48d212890703

Front

Back

What are the approaches to create an object in JS?

Front

Back

What is Event Loop?

Front

Back

How do you secure a RESTful API?

Front

Back

What do you see as the most critical and current threats effecting Internet accessible websites?

Front

Topics such as Denial of Service, Brute Force, Buffer Overflows, and Input Validation are all relevant topics. Hopefully they will mention information provided by web security organizations such as the Web Application Security Consortium (WASC) or the Open Web Application Security Project (OWASP).

Back

What are factory functions in javascript?

Front

Basically a way to create a constructor without the new requirement, danger of polluting the global namespace and awkward limitations (capital letter naming).

Back

What does the delete keyword do to the element of an array? (delete array[3])

Front

Sets that element to undefined rather than removing it. Use splice to remove elements.

Back

Where and why should you not use NodeJS?

Front

Back

What is CSRF and how is it different from CORS and how do you handle it?

Front

Back

What is your definition of the term "Cross-Site Scripting"? What is the potential impact to servers and clients?

Front

Cross-Site Scripting: (Acronym XSS) An attack technique that forces a web site to echo client-supplied data, which execute in a users web browser. When a user is Cross-Site Scripted, the attacker will have access to all web browser content (cookies, history, application version, etc). XSS attacks do not typically directly target the web server or application, but are rather aimed at the client. The web server is merely used as a conduit for the XSS data to be presented to the end client. See also "Client-Side Scripting".

Back

What is the difference between Object.create() and calling new()?

Front

Back

What is the difference between map, filter and reduce methods of array?

Front

Back

Section 3

(38 cards)

What is the difference between a Virtual Machine and a Container?

Front

A VM contains an installed operating system and any extra software and data that you need to run your applications. It can contain several different applications that use the same OS and middleware (think Windows Server with IIS installed). VMs provide an application with more resources than it will ever need, making it heavy. A container is a fully contained application with all of its dependencies. It does not contain the operating system and theoretically can be ported to any OS. There is significantly less overhead associated with Containers, they are very lightweight. Several containers can run on one OS.

Back

What is Oauth?

Front

Back

When should you use webpack? when not?

Front

If you have a complex front-end to your application with lots of css, images, and javascript files. If you have a simple application with one javascript file and one css file it might provide more overhead than benefit.

Back

What do media attributes do?

Front

They specify conditions to be met before styles load.

Back

What is webpack?

Front

Back

How do you optimize your JavaScript files?

Front

Use the "async" attribute on your script tags for JavaScript that doesn't manipulate the DOM right away, Or use "defer" for scripts that will not act on the RenderTree and are not vital to loading of content,

Back

What are DNS lookups?

Front

Back

Why use webpack instead of just browserify?

Front

Browserify allows you to use require for javascript dependencies and puts all of your javascript files in the correct order and bundles them. Webpack allows you to use require for any different kind of file type as long as you supply it a loader to tell it how to load the files. It can copy the files to an output directory (/dist) to make for easy deployment. Webpack bundles all the files and creates new Javascript code that instructs the browser how to load it. You also get hot page reloading, and is used by some pretty big teams, so there is a lot of support.

Back

Explain the virutal DOM and what frameworks use this for.

Front

Most JavaScript frameworks update the DOM to often. This inefficient updating of the DOM can hurt the responsiveness of an application. The React team at Facebook addressed this problem with the virtual DOM. This is a lightweight copy of each DOM, which is manipulated in memory everytime a JSX object is changed. Then React does a diff with the actual DOM, it then only updates those objects. This is what makes React so fast.

Back

What is a proxy?

Front

Back

What are some new Oauth alternatives?

Front

Back

What makes a container so lightweight?

Front

It runs as a single process in the kernel, taking up no more resources than a single application.

Back

How do you setup gzip on the front and backend?

Front

The browser determines whether or not it accepts gzip files, most modern browsers do, old ones don't. On the server you can set enable compression (

Back

What are the four HTML attributes that are used for loading resources and what do each of them do?

Front

Preload - load resources needed for page navigation, Prefetch - prefetch requests and network connections that will be needed, Prerender - fully renders the page in the background, Preconnect - anticipates future requests and conducts DNS lookups, TLS negotiations, TCP handshakes

Back

How do you make CSS files lightweight?

Front

Use media attributes (especially for mobile viewing), defer styles that won't be seen right away (like below the fold), keep your files in check (regularly delete unused attributes - package uncss)

Back

What is VirtualBox?

Front

A tool that allows you to run a different operating system on an image within your computer. For example running Windows on Mac OSX or Ubuntu on Windows.

Back

What is JWT? How does it work?

Front

Back

What is the difference between a kernel and an OS?

Front

The OS is a software package that communicates with the hardware on a computer. The kernel is the lowest level of the operating system. It translates commands into something the computer can understand.

Back

What is the maximum amount of data that can be served across HTTP at one time? Why does the TCP specification limit this? How do you deal with this?

Front

14-16kb, prevents network congestion and packet loss, keep files as small as possible

Back

What does minification do?

Front

It removes all whitespace, redundant charaters, semi-colons, etc. and compresses scripts for faster loading.

Back

What are the problems with the singleton pattern?

Front

It's hard to maintain when you have different processes and threads. You should think about why you are doing it and avoid it if possible.

Back

What are TLS negotiations?

Front

Back

What are the 3 metrics that determine browser performance?

Front

Number of critical bytes (size of files), number of critical files (number of files), number of critical paths (how many trips to the server)

Back

What are three forms of web application authentication, when should they be used and what are the problems with each?

Front

1. Http basic authentication - username and password provided, easily open to attacks by middle man, but good inside an internal network (behind a firewall) 2. API keys - first time users of the aPI receive a key that they send via http calls when they make requests to the API, requires a secure network or they can be picked up. 3. OAuth - User logs in, system requests token which is forwarded to the authentication server (access is granted or denied), token is returned and can be used to call API.

Back

How can you speed up the responsiveness of the front-end of your application?

Front

1. Styles at top, scripts at bottom 2. Minification of all assets 3. CSS loading blocks rendering of DOM, so load them early, make lightweight in external files, defer loading when necessary 4. Put JavaScript files at the bottom 5. Optimize JavaScript files 6.

Back

Why use a docker container?

Front

Flexibility, portability, no system dependencies, scalable, updatable, minimize resources used, lightweight.

Back

What are the steps that the browser takes to load the page? (6)

Front

1. Use HTML to create the DOM. 2. Use the CSS to create the CSS object model CSSOM 3. Execute scripts on the DOM and CSSOM 4. Combine the DOM and CSSOM to form the Render Tree 5. Use Render Tree to Layout the size and position of all elements 6. Paint in all of the pixels

Back

What is a dependency graph?

Front

Back

What is the difference between authentication and authorization?

Front

Authentication is proving your identity. Authorization uses your proven identity to grant you access to resources.

Back

Why is CSS called "Render Blocking"?

Front

During page loads, if the browser comes across a style or CSS block, it stops rendering HTML and creates CSSOM first. This is why you should load all of the CSS at the top of the page.

Back

What are TCP handshakes?

Front

Back

What is the DOM?

Front

Back

What happens in the browser when JavaScript changes the DOM?

Front

It forces a rebuild of the RenderTree, then the Layout and Paint stages are repeated. This is very inefficient.

Back

How would you ensure your API is scalable?

Front

Back

How do you secure the back end (APIs)? I generally use JWT

Front

Back

Explain how you'd implement caching in a web app, client and server.

Front

Back

What is "Parser Blocking"?

Front

The browser will load HTML until it comes across JavaScript scripts, and then it will stop loading. To avoid this, put all scripts at the bottom of the page.

Back

How do you secure the front-end of your application?

Front

See password security questions (force password rules, use multi-factor, hash and salt password, use trusted hashing algorithm like SHA-2). Also, I've used Oauth and passport.js for authentication. For enterprise software you can set up single sign-on and use the capabilities of the network for security. Are most of your applications behind a firewall?

Back