Skip to main content

Web Development

Interview Questions​

Web Development-Related Topics to be Familiar With:

  • JavaScript, Typescript
    • Understanding of JavaScript syntax and data structures
    • Knowledge of asynchronous programming, event handling, and callbacks
  • ECMAScript 2020 (latest) https://www.w3schools.com/js/js_versions.asp
  • CSS, LESS, SCSS, browser prefixing
  • Version Control
  • Write Modular Code
    • Easier to understand, test, maintain
  • Testing and Debugging
  • CMS Platforms
  • SEO (Search Engine Optimization) Best Practices
  • Performance optimization
  • Caching
  • Database management
  • Data manipulation
  • API integration (OpenAPI, YAML)
  • Responsive UI
  • Interactive UI
  • Asynchronous Operations
  • Form Validation and Handling User Input
  • Progressive Web App (PWA)
  • Real-time Features with WebSockets
  • Accessibility
  • Internationalization and Localization
  • SQL, Python, C#, MySQL, MongoDB, AWS PostgreSQL

From Toptal.com​

Questions and answers in this section are from Toptal.

Tell us about your experience with browser-based development.

Topics:

  • Cross-browser anomalies
  • Cross-browser compatibility issues (webkit, Safari, Firefox)
  • Sandbox limitations

How have you handled a situation with previous clients where the client was not satisfied with the final result?

Topics:

  • Talk about providing mockups of 2-3 different alternative layouts

Discuss at least three areas of focus on the client side to help reduce page load time.

  • Postpone initial load of page data until the main UI of the page renders
  • Introduce lazy loading or pagination for large data sets
  • Introduce data filtering and don't call for large data sets until filter selections are made.
  • Check for complex data bindings and look for opportunities to do one-way binding if available
  • Review page template and CSS for configurations that could cause expensive layout calculations.

How do you approach responsive design?

  • flexible grid layouts
  • media queries
  • flexible images
  • mobile-first layout approach (e.g. Bootstrap)
  • How can wide components be adjusted when the browser width becomes narrow?
    • Talk about working with alternative layouts with designers and product owners.

Compare and contrast SASS, LESS, and CSS, including their advantages and disadvantages.

  • CSS: Cascading Style Sheets
  • SASS: Syntactically Awesome Style Sheets
  • LESS: Leaner Cascading Style Sheets

What kind of relevant experience do you have with server-side development?

Topics to consider:

  • caching
  • API
  • sessions
  • web service development
  • cloud server setup
  • specialized services such as the implementation of a content management system
  • implement appropriate security measures for clients’ data
  • safe authorization and authentication and API development

Describe some approaches, techniques, and considerations to be considered for server-side caching.

Server-side caching can help improve performance by avoiding wasted use of server-side resources to perform the same operations redundantly.

Caching Strategy Considerations:

  • Cache size – Although RAM is generally cheap these days, consideration needs to be given to capacity (i.e., the amount of memory available) when setting your cache size. Allocating too high a percentage of total memory to the cache can have an overall impact on performance that is actually more detrimental than beneficial.

  • Expiration of cache entries – Setting appropriate expiry on your cache elements and invalidating key-value stores when your data changes can help with capacity as well.

  • Cache contents – Of course, deciding what to cache is perhaps the biggest challenge when designing a caching strategy. You might be inclined to cache data that is expensive to generate or compute, but depending how rarely it is used, this could be a waste of precious cache space.

  • Granularity of cache entries – Data objects are often composed of multiple “sub-objects.” Should the object be stored in the cache, including all its sub-objects, or should it be cached separately (or perhaps even not at all)? There’s no one-size-fits-all answer here; it all depends on the structure of your database and the nature and frequency of the client queries against that data store.

Explain what sessions are and provide a general description of how they are tracked on the server side.

A session is a mechanism for persisting user data across multiple related requests. The process takes an identifying key as part of the incoming request, which in browser-based interactions typically comes in the form of a client cookie.

An application will instantiate a session object into memory. It can then add data to that object about how the current user is interacting with the application. When the application completes its execution cycle, it will close the session, and as such, the data gets serialized and written to some tier that can store the data for use in the next request from that user. The technology need only be able to fulfill that storage requirement, and so it can be a database, file, or some caching technology.

What is REST, and what is a RESTful Web Service? Describe its characteristics.

REST (REpresentational State Transfer) is a client/server architecture in which data and functionality are considered resources and are accessed using Uniform Resource Identifiers (URIs). The resources are acted upon by using a set of simple, well-defined operations. REST is designed to use a stateless communication protocol, typically HTTP.

Give a brief description of each of the following HTTP request methods: TRACE, OPTIONS, CONNECT, and HEAD.

  • 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 (or for the server where the service resides by using a * wildcard in the URI). The relevant response header is Allow and it simply lists the supported methods.

  • HEAD – Same as a 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.

Describe a hash index and a B-tree index. What are some of their relative advantages and disadvantages?

In any tree-based index, records are stored in locations called leaves. The starting point is called the root. The maximum number of children per node is called the order of the tree. The maximum number of access operations required to reach the desired leaf (data stored on the leaf) is called the depth (level). The general tree structure orders these ranges left to right. A key in a node can lead to a node where all the keys are less than its value to its left or to a node where all the keys are greater than its value to its right.

The B-tree is a generalization of a binary search tree in that a node in a B-tree is allowed to have more than two children. B-tree indexes help find information quickly by successively narrowing down data by assessing ranges of values stored in the node keys (nodes in the index contain keys and pointers to their child nodes). A B-tree search starts at the root node and compares the range of keys in each child node against the key value being sought. When it finds the node whose range contains the desired key value, that node is selected and then its child nodes are assessed. This occurs until the process reaches the leaf pages where there are pointers to the actual data.

In a hash index, the values of the indexed column are run through a hash function to generate a location identifier for each key in the hash table. The table is divided into “buckets” and, depending on the technology employed, these buckets contain either the data values themselves or pointers to those values. Hash indexes are fast because the exact location of the bucket is known, and the hash keys are ordered sequentially. Once a key location is found, the pre-hashed value (the one we are searching for) is compared with the one we’ve just found in the index to make sure it’s valid.

Hash indexes work well, but only for purposes of equality comparisons. As such, hash indexes can’t support queries of the form SELECT FROM table WHERE key LIKE 'valu%' or SELECT FROM table WHERE key < 'value'. In contrast, B-tree indexes allow for much more flexibility in terms of what you can search for. Partial values and ranges of values are easily handled, all with roughly the same speed in a non-join search. In scenarios where either type of index will suit your purposes, there is no consistently best choice since there are scenarios where hash indexes outperform B-trees, and vice versa. It largely depends on the nature and structure of your data.

See related diagrams at Toptal

Briefly describe and compare relational, document, and graph databases.

  • Relational databases organize data into two-dimensional tables and support the notion of linking their contents based on known relationships. These relationships facilitate and simplify the integration and retrieval of data from multiple tables with a single query.

  • Document databases, or NoSQL databases, treat each record and its associated data as a document. In a document database, everything related to a database object is encapsulated together. Document databases generally have powerful query engines and indexing features that make it easy and fast to execute many different optimized queries. The strength of a document database’s query language is an important differentiator.

  • Graph databases, a recent advance in database modeling based on graph theory, use graph structures with nodes, edges, and properties to represent and store data. In a graph database, every element contains a direct pointer to its adjacent elements and no index lookups are necessary.

    Compared with relational databases, graph databases are often faster for associative datasets and map more directly to the structure of object-oriented applications. They can also scale more naturally to large datasets as they do not typically require expensive join operations. They depend less on a rigid schema, so they are more suitable to manage ad-hoc and changing data with evolving schemas. Graph databases are an especially powerful tool for graph-like queries (e.g., computing the shortest path between two nodes in the graph). Conversely, relational databases are typically faster at performing the same operation on large numbers of data elements.

CSS​

How can you draw a polygon using CSS?

You can provide coordinate points to the polygon() shape function. Values may be specified using various extenstions such as %, px, rem, etc.

https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/polygon

/* A block arrow shape */
div {
  clip-path: polygon(0% 20%,
                  60% 20%,
                  60% 0%,
                 100% 50%,
                  60% 100%,
                  60% 80%,
                   0% 80%);
}

What are some examples of using scroll effects?

/* This will cause the div to appear to fade in when it is scrolled into view. */
div {
  animation: fadeIn;
  animation-timeline: view();
  animation-range: entry;
}

@keyframes {
  from { opacity: 0; }
  to { opactiy: 1; }
}