Web Development Topics in Interviewing

I thought I’d organize some topics that have come up during job interviews for Python/JavaScript web development positions. This post doesn’t address problem solving exercises, rather just simple questions I’ve been asked to discuss or that have come up when solving algorithmic problems.

Algorithms/Problem Solving


See: https://blog.codinghorror.com/why-cant-programmers-program/.

Yes, I did this in a few minutes.

Simple Arithmetic w/o Calculator

Be able to do it.


Solve a simple problem with recursion

Language Related Specifics

Generating n Iterable


range(start, stop, skip)

start when left out is 0. Stop is non-inclusive. Eg. 1-100 is range(1, 101).


Most likely questions will involve some kind of sorting and slicing either on strings or numbers. So you should be quite familiar with how to do this in your language without looking up API docs.


sort() sorts in-place. Eg.:

>>> l = [1,4,2]
>>> l.sort()
>>> l
[1, 2, 4]

The built-in function,
sorted, returns a new, sorted list:

>>> l = [1,4,2]
>>> sorted(l)
[1, 2, 4]

Sorting on average is O(n log n) complexity.


Simply Array.sort(). O(n log n) complexity.



    • Get the last element:
      >>> [0,1,2,3][-1]
    • Get the second to last element:
      >>> [0,1,2,3][-2]
    • Cut out later elements. Ending specifier is non-inclusive. This means take the first until the second element:
      >>> [0,1,2,3][:2]
      [0, 1]
    • Ending indices are non-inclusive. HOWEVER starting indices are. This means take the element at index 1 until the element at index 2:
      >>> [0,1,2,3][1:3]
      [1, 2]


JavaScript is similar to Python, but use the Array.slice() method. First parameter is inclusive, last is not. E.g.:

> var a = [1,2,3];
> l.slice(0, 2)
< [1, 2]



to slice returns the last element.

To get nth from the end through end pass -1+-n. E.g.to get the last two elements:

> l.slice(-2)
< [2, 3]


In a nutshell…

Angular is a single-page-application client-side framework created by Google.

The “App”

Use <div ng-app="fooApp"> defines an angular app and binds it to a particular DOM node. Then:

var fooApp = angular.module("fooApp", [requiredOtherModules]).run($rootScope => {


Then you can config the app. Maybe adding routes which map hash locations to templates. E.g.:

sanityApp.config(($locationProvider, $routeProvider) => {
  .when("/", {
    templateUrl : "templates/run-list.html",
    controller: "RunListController",
    reloadOnSearch: false,
    ncbi_pdid: 'sanity-list'


Then add controllers:

fooApp.controller("myController", function myController($scope, $http, $location) {
  // Add properties to $scope which can then be accessed from the templates.

Binding variables to elements

E.g.: <ul ng-bind="listOfThings">.. binds the element with a variable on the $scope. In this case you could then use template control structures to loop through listOfThings. It’s one-way data binding.

ng-model is two-way data binding. Often used in form controls.


Props vs. State

from (https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react)…

In short, props are passed from a parent to a child component. Props are like function parameters and should be kept immutable. State, on the other hand represents a component’s internal, or private state over time and is mutable. A parent shouldn’t change its child’s state, rather it should pass data as props.


representational state transfer


We know GET and HEAD, right? So let’s look at the more interesting ones…

  • Use to create when you want the server to create the new address for you. E.g. POST to /items creates a new item (items/1)
  • Not idempotent (sending the same request will create two resources)
  • Use to create a resource when you know the address. Eg. PUT: blog/posts/my-new-blog-post.
  • Replaces resource at that location. Idempotent.

Use to update only partial resource. E.g. one field of a resource…title of a blog.


HTTP Request/Response Paradigm

  1. Request from client to server
  2. Server handles request via a module and sends response message back to client. The message consists of a header with name-value pairs and a body. The first line is the request line, consisting of the HTTP method and the request URI. Eg.
    GET / HTTP/1.1

    The next line is the host:

    Host: www.travisluong.com

    Then come the headers:

    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:34.0) Gecko/20100101 Firefox/34.0
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Language: en-US,en;q=0.5
    Accept-Encoding: gzip, deflate
    Connection: keep-alive
    Cache-Control: max-age=0
  3. The server handles the request and generates a response to the client. It consists of a status line and name-value pairs. E.g.:
    HTTP/1.1 200 OK
    Date: Sat, 20 Dec 2014 08:17:22 GMT
    Server: Apache
    Cache-Control: max-age=3600
    Expires: Sat, 20 Dec 2014 09:17:22 GMT
    Vary: User-Agent,Accept-Encoding
    Content-Type: text/html; charset=UTF-8

    Lastly the body (HTML, JSON) or whatever.

Important Status Codes

Come on. They’re all important, but some are more common than others…

Code Meaning
200 OK
301 Moved permanently
302 Moved temporarily (not usually what we want)
304 Not modified
401 Authentication problem
404 Not found
500 Server error

Request Headers

Name/value pairs sent in the header of an HTTP request or response. We’ll list some of the ones your most likely to encounter. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers for more.

  • Cache-Control: (no-cache)
  • Content-Type: (text/html)
  • Cookie: (cookie string), sent to server with cookies from client
  • Referer (sic)
  • User-Agent

Response Headers

    • Access-Control-Allow-Origin (origin): which servers participate in cross domain origin sharing
    • Allow (GET): what HTTP methods are allowed for this object
    • Cache-Control (max-age=3600)
    •  Content-Disposition (attachment): How a request should be handled..e.g. prompt a download dialogue box.
    • Content-Encoding (gzip): encoding used for compression
    •  Content-Langauge
    •  Content-Type (text/html)
    •  Expires (date): Date/time when content is considered stale.
    •  Last-Modified
    • Set-Cookie (cookie string): Sets a cookie on the server for the client.


HTTP is stateless. Every request is like a new one. E.g. if I put something in my shopping cart I want it to stay there when I leave the page. How is this implemented?


  1. The server creates a session ID when a user logs-in.
  2. The session ID is stored on the client with a cookie. Attributes of the session ID are stored on the server. This introduces state to the app, but session IDs are smaller than a typical token.
  3. The server examines the session ID and looks it up in a hash to send back state to the client.


  1. User logs in
  2. A token (maybe JSON web token) is generated on the server, sent to the client who saves it in local storage (or a cookie).
  3. When the user wants to access a protected route the client sends the JWT in the Authorization request header. The user state is never saved on the server.
  4. The server’s protected routes will check for a valid JWT in the Authorization header, and if it is there, the user will be allowed access.
  5. Data is actually stored on the client. E.g. admin status etc. Bigger payloads than a session ID, but is stateless as far as the server is concerned


The First Normal Form (1NF)


  1. Define data and move into columns. E.g. name, address, position.
  2. Ensure there are no repeating groups of data. E.g. for the above data, position will probably repeat. So break out a new table called position.
  3. Create a key for each table to tie the tables together.

The Second Normal Form

There must be no functional dependencies between the key and another column. E.g. customer_name and customer_id. There’s a relationship between a name and an ID. So they should be in separate tables.

The Third Normal Form

There must be no transitive functional dependencies. E.g. no dependencies between two non-key columns. Eg.. address fields and zip code. The zip code can be deduced from the address.


Three types:

Type Example
One-to-one Employee to cube ID. Each employee has one cube and each cube houses only one employee.
One-to-many Person to favorite websites. The “parent” object is the person. If there is no longer a person, there are no longer any favorite websites. The favorite websites don’t make sense outside the context of a particular person.
Many-to-many Teachers to students. Each teacher can have many students, and each student can have many teachers. (Requires 3 tables).

More: https://www.geeksforgeeks.org/commonly-asked-dbms-interview-questions/

ER Diagrams



A view is a virtual table made from a query involving one or more real tables. They are useful for hiding the complexity of the data and the implementation of the table structure.


Possible Questions

What are some things you can automate?
  • Dev/test/deploy steps
  • Manual functional test scripts. The kind of thing you do manually check before each release.
  • Regression tests. For every bug found, write a test.
  • Testing behind the GUI…API end-points
  • Smoke tests/sanity tests
  • Unit testing, lower level white box testing
How do you identify good candidates for test automation?

ROI. Select a test that is easy to automate, fast to execute and tests an important feature, and is the most likely to fail.

One way:

  1. Identify parameters that will help you consider if automation is worthwhile. E.g. complex business logic, importance, complex test data, dependencies etc.
  2. Break apart app in modules. For each module identify whether each test would be a good candidate for automation.
  3. Estimate time to perform scripts manually and time to write, maintain scripts.
  4. Compare


Leave a Reply

Your email address will not be published. Required fields are marked *