Evan X. Merz

Well, the 2023 Oktoberfest season for the Bay Area is as packed as ever. This year I decided I wanted to attend as many Oktoberfest events as I had the stomach for. So I did what any self-respecting beer nerd would do: I made a calendar, then I made a schedule. Here's the result of my labors. If you see me at these events, please come lift a glass with me!

I've been writing up some questions to help some friends prepare for interviews. I thought it might be worthwhile to share them here. I think that most senior fullstack developers should be able to answer these questions, and I think they're worth reviewing before you go into an interview.

20 fullstack engineer review questions

1. What do the HTTP response codes beginning with 1-5 indicate?
2. Name 5 different types of databases. Give examples of each.
3. Name three different Chrome developer tools or extensions that you use for debugging. When do you use each? Why?
4. What is the Big O access time for an array, a linked list, a hashmap, and a binary search tree?
5. How does the schema differ between relational databases and document stores? When does this matter?
6. Name three different types of caching that come into play in any web request.
7. What is database sharding? Why does it matter? How does it differ between relational databases and NoSQL document stores?
8. What is the difference between a traditional row-store database and a columnar database? Why would you choose one over the other?
9. How fast are the fasts sorts we know about in Big O notation? Name one sort that is that fast.
10. What is binary search? Can you walk through an example? When is binary search useful?
11. What is the most complex operation to perform on a binary search tree? Why?
12. What is a database index? When is it appropriate to use one? How are database indexes implemented?
13. What is a DNS?
14. What is a CDN? When is it useful?
15. How does Java scale differently from JavaScript? Why?
16. Name three frameworks for building websites. Which do you prefer? Why?
17. What is vertical scaling? What is horizontal scaling?
18. What are the security concerns that arise when using a package manager like npm?
19. What is a serverless environment? What performance concerns arise when deploying a website using serverless technologies?
20. What are the advantages and disadvantages of a REST API versus a GraphQL API? Why would you choose one over the other?

Bonus questions

Some of these are more about your informed opinion than about being right or wrong, but I still think it's important to review them and have a prepared answer.

1. Name three different cloud service providers. Which do you prefer? Why?
2. What is your preferred IDE? Why?
3. How do you determine when a feature can be used in a given browser?
4. When is a key-value store a good choice?
5. What is your favorite programming language? Why?

This post contains the second assignment in my free web programming course.

Project: Client-side web form

Forms are how users enter data on the web. When you register for a website, you enter your username and email into a web form. When you buy an item from a web store, you send your payment information using a web form.

Generally speaking web forms have input components on them like text boxes and dropdowns and buttons. But this isn't always the case. Web forms can be cleverly hidden using JavaScript and CSS.

Typically a web form submits data to a server, which processes that data and responds to the user with something interesting. For instance, you might submit your username and password and get back an authentication token that allows you to use the private portion of a website.

Requirements

I want you to build a single web page using html and javascript only.

It should have three things on it.

1. A page title in h1 tags.
2. A label that reads "title:".
3. An input text box.
4. A submit button.

When the button is clicked, the title of the page should change to the title entered by the user without reloading the page.

Also, the user input must validated. The user should be prevented from using dirty words like "MacOS" and "iphone". Don't let them use either of those words in any capitalization. If those words occur in the input, then a red error message should be displayed underneath the text box that reads "Please refrain from using dirty words such as 'MacOS' and 'iphone'.".

Extra credit

For extra credit, make the form beautiful using CSS. Be creative, but try to make something that a typical web user might like.

In this post, I'm going to show you several ways to debug javascript in Google Chrome.

TLDR: Shift + ctrl + c

Open the javascript console using the shortcut shift + ctrl + c. That means, press all three at the same time. If you're on a Mac, use cmd rather than ctrl.

Inspecting an element to add new styles

Open the dom example that we wrote in What is the DOM?. In this post, we'll use that page to explore three ways to find out what's going on in a webpage. The code should look something like this.

<!DOCTYPE html>
<html>
  <head>
    <title>How to modify the DOM using JavaScript</title>
  </head>
  <body>
    <div id="post">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <script>
      let blogPost = document.getElementById("post");
      let copyrightNotice = document.createElement("p")
      copyrightNotice.innerHTML = "Copyright " + new Date().getFullYear() + " by the author";
      blogPost.append(copyrightNotice);
    </script>
  </body>
</html>

After opening it in Chrome, right click on the copyright notice, then click "Inspect" in the popup menu. The html for the element you clicked should appear in the "Elements" tab of the browser console. It should look something like this but there are several places where the console can appear.

Any time you are confused about an element, inspecting it is a good place to start. In the browser console, you should be able to see the html for the element, as well as any attached css. In fact, you can actually add new styles using the browser console. Notice in the "Styles" tab where it says "element.style" and there are empty braces. Any CSS you type in there will be applied to the selected element. Styles can also be toggled on and off. This can be exceptionally handy when trying to figure out why your page doesn't look quite right.

Go ahead and try it. Enter "font-weight: 800" into element.style. What happens?

Debugging using console.log

The most basic way to debug JavaScript is to put some console.log statements into your code, then open the console and see what they print. Calling console.log tells the browser to print whatever you pass in in the JavaScript console. You can console.log just about anything, but the web browser will format variables automatically if you put them in an object using curly braces.

So the following console.log call isn't very useful.

console.log('HERE!');

Whereas the following console.log call will allow you to examine the object passed int.

console.log({ confusingVariable });

Add the following line of code to the dom example after it sets the copyrightNotice variable.

console.log({ copyrightNotice });

Then reload the page and use shift + ctrl + c to open the browser console, or shift + cmd + c on a Mac. You may have to expand the window and click over to the tab that says "Console".

You should see something that says "{ copyrightNotice: p }", and if you expand it, then you should be able to see all the properties associated with that variable. It's not particularly useful in this simple example, but I use this technique virtually every day as a web programmer.

Debugging using the Chrome debugger

Keep the dom example open in Chrome. Then press shift + ctrl + c to open the browser console. Navigate over to the "Sources" tab. This tab is the built in debugger provided by Google Chrome. In this debugger, you can add breakpoints to your code, and the browser will stop at the breakpoints and allow you to examine the state of your code. It's okay if this looks very confusing. We don't need to do much with it.

There are three things you need to be able to do. First, you need to be able to navigate to the sources tab. Then you need to find the line numbers, because you need to click them. This is much more difficult in a typical web page that has many files. Finally, you need to know how to continue running the page after it stops at your breakpoints.

After you've opened up the page, click line 12 to set a breakpoint there. In this case, that code has already been run, so reload the page to make it run again. When you do so, you should see something like the following.

Notice the area that I've circled in that screenshot. It's where you can see the state of your code. All of your variables should appear there and you should also see their values. Notice that copyrightNotice is undefined in this case. That's because Chrome pauses before running the code at the line where you placed your breakpoint. If you place a breakpoint on the next line, then press the play/pause button to resume execution, the value for copyrightNotice should be filled in.

The Chrome debugger is a great way to examine the state of your code.

In this post, I'm going to introduce the Document Object Model, which is better known as the DOM.

TLDR: The DOM is the way a webpage is represented within a browser

The DOM is a bit of structured data that holds a representation of a webpage in order to enable programs to be able to manipulate it.

It's a bit like a 3d model that you might use in a 3d printer. The 3d printer is the display device, like a web browser. The 3d model is needed by the 3d printer for it to be able to do anything. You can manipulate the 3d model to make the 3d printer do what you want.

Why should we care about the DOM?

Why does the DOM matter? Can't we go about writing web code without knowing about the DOM?

The DOM matters because it is the representation of a web page that we can work with in JavaScript. It's true that, as a web programmer of over twenty years now, I have probably explicitly thought about the DOM only a handful of times. But I use it every day, and in the dark ages of JavaScript, we had to work with it very directly. These days we use packages like React or jQuery to wrap add a convenient layer of abstraction above the DOM. Still, in this post I'm going to show you how to use the DOM the old fashioned way.

This is still very important to know because occasionally you do have to do it, even when using the modern libraries for interacting with the DOM.

Finding elements in the DOM in JavaScript

In JavaScript, the DOM is stored as a global variable named "document". So when you want to do something with the DOM, you use the document variable.

One of the things you must be able to do is find the HTML element that you want to work with. The document gives us several handy methods to find elements by their id or class attributes. The getElementById method returns the first element found with the matching id attribute. Since id attributes should be unique, this should be the only element with that id in the document.

So to find a document with the id "elephant", you'd use the following line of code.

let elephantElement = document.getElementById("elephant");

This line of code contains a few things that might look unfamiliar to anyone who hasn't used JavaScript before. Here's a diagram that breaks it down.

The word "let" is a reserved word that indicates that the next word is a locally scoped variable. Don't worry if you don't know what "locally scoped" means. In this case, it just means that it's not a global variable, like document. Then the word "elephantElement" is the variable name, and the equals sign indicates that whatever is returned by the expression on the right should be stored in the variable on the left.

The id attribute isn't the only way to find elements. JavaScript also specifies a way to get elements with the same class attribute using the getElementsByClassName method. Notice that "Elements" is plural because the method returns an array, as many elements may share a class.

let elephantElements = document.getElementsByClassName("elephant");

The structure of this line of code is essentially the same as the previous one. The only difference is the name of the method that is called, the name of the variable, and the type of the variable.

How to modify a webpage using JavaScript

You can also use JavaScript to change the content of a webpage. When you've located the element you want to change, you can use the innerHTML method to get or set the content of that element. Like much of the JavaScript in this post, this is considered a bad thing to do these days. Typically you'd use the methods in a UI framework like React to mutate the page.

let elephantElement = document.getElementById("elephant");
elephantElement.innerHTML = "Is this an elephant?"

You can also add elements to the page using the createElement and append methods. This blurb appends a copyright notice to a blog post.

let blogPost = document.getElementById("post");
let copyrightNotice = document.createElement("p")
copyrightNotice.innerHTML = "Copyright " + new Date().getFullYear() + " by the author";
blogPost.append(copyrightNotice);

Let's put that into a real HTML file to see it in action. Here's the full example. If you've typed it in correctly, then you should see a copyright notice at the bottom of a paragraph of latin.

<!DOCTYPE html>
<html>
  <head>
    <title>How to modify the DOM using JavaScript</title>
  </head>
  <body>
    <div id="post">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <script>
      let blogPost = document.getElementById("post");
      let copyrightNotice = document.createElement("p")
      copyrightNotice.innerHTML = "Copyright " + new Date().getFullYear() + " by the author";
      blogPost.append(copyrightNotice);
    </script>
  </body>
</html>

Summary

The DOM is the internal model of a webpage stored in the web browser. It can be manipulated using JavaScript methods such as getElementById, innerHTML, and append.

More

• MDN introduction to the DOM.
• The DOM in 4 minutes by Aaron Jack on Youtube
• Intro to the DOM from turing.edu