@@ -52,9 +59,9 @@ Here's an improved version of Teik Jun's resume which I feel which better highli
In my opinion, this improved resume is sure to capture the eyes of any recruiter in the world!
-
+
-
+
Teik Jun's improved resume
diff --git a/website/blog/2021-08-30-a-glimpse-into-front-end-interviews.md b/website/blog/2021-08-30-a-glimpse-into-front-end-interviews.md
index 4c188967e6..268c7100d2 100644
--- a/website/blog/2021-08-30-a-glimpse-into-front-end-interviews.md
+++ b/website/blog/2021-08-30-a-glimpse-into-front-end-interviews.md
@@ -2,21 +2,21 @@
title: A Glimpse into Front End Interviews
slug: a-glimpse-into-front-end-interviews
author: Kai Li
-author_title: Software Engineer at Quora
+author_title: Software Engineer at Stripe, ex-Quora
author_url: https://github.com/li-kai
author_image_url: https://github.com/li-kai.png
tags: [front end, leetcode]
hide_table_of_contents: true
---
-
-
-
-
A glimpse into the front end interview process and questions that frequently come up.
+
+
+
+
## Interview Process
Applying for front end engineer roles is very similar to software engineer roles, but the interviews can be quite different. In my experience, for each company, there tend to be between 3 to 4 sessions. Most of them will be testing on JavaScript and discussion around web development technologies, and the rest on algorithms or behavioral.
@@ -144,7 +144,7 @@ Implementation rounds feel very similar to algorithms, as you need to actively f
## Algorithm Rounds
-As software engineers, we are not unfamiliar with algorithm questions. Leetcode and Hackerrank are common resources used for practicing such questions.
+As software engineers, we are not unfamiliar with algorithm questions. LeetCode and Hackerrank are common resources used for practicing such questions.
As I knew this was my weakness, this was where I spent the most time. It may be a little ironic that I chose Python over JavaScript as my language of choice for tackling algorithms. JavaScript's lack of a native minheap and binary search implementation made it a slightly worse choice.
diff --git a/website/blog/2021-10-30-my-experience-working-as-a-meta-engineer.md b/website/blog/2021-10-30-my-experience-working-as-a-meta-engineer.md
index 271330c9b9..7b49b28400 100644
--- a/website/blog/2021-10-30-my-experience-working-as-a-meta-engineer.md
+++ b/website/blog/2021-10-30-my-experience-working-as-a-meta-engineer.md
@@ -14,41 +14,55 @@ A number of the folks I referred have completed their interviews and are in the

+**Disclaimer: Opinions are my own and do not represent the views of my employer (Meta)**
+
## Products
-Meta is a huge company and has teams working on all sorts of products. For big tech companies, common products include ads networks, chat, enterprise offerings, video watching, payments, hardware products, industry-leading AI tools, internal tools, etc. the other big tech companies Microsoft, Amazon, Apple and ByteDance have products in some of these areas as well. For many big companies, they are large enough that they build their our own infra and internal tools for most technologies they use because most existing technologies on the market can't meet their scale. Hence, not only will you get the chance to work on consumer products, you might also get to work on some of the lower level infrastructure work that is used by your fellow software engineers - our internal database systems, our internal Docker, our open source projects like React, React Native, GraphQL, PyTorch, Docusaurus, etc.
+Meta is a huge company and has teams working on all sorts of products. For big tech companies, common products include ads networks, chat, enterprise offerings, video watching, payments, hardware products, industry-leading AI tools, internal tools, etc. the other big tech companies Microsoft, Amazon, Apple and ByteDance have products in some of these areas as well. For many big companies, they are large enough that they build their our own infra and internal tools for most technologies they use because most existing technologies on the market can't meet their scale. Hence, not only will you get the chance to work on consumer products, you might also get to work on some of the lower level infrastructure work that is used by your fellow software engineers - our internal database systems, our internal Docker, our open source projects like React, React Native, GraphQL, Jest, PyTorch, Docusaurus, etc.
The impact is huge - every line of code you write has the potential to impact millions (sometimes even billions) of users due to the widespread nature of Meta's products. There was an intern who on their second day of work, changed the placeholder text of facebook.com's search bar by accident to "Hi I'm a Search Bar!" as part of a ramp up task and it was shipped to public for a brief moment before the change got reverted. With great power comes great responsibility!
### Teams in Meta Singapore
-Let's talk about some of the teams in Meta Singapore since I currently work in Singapore and many of the readers are based in Singapore.
+Let's talk about some of the teams in Meta Singapore since I currently work in Singapore and many of the readers are based in Singapore. **Note that this section will go out of date as priorities shift. Last update: 2022/05/12.**
+
+In Meta SG we have two teams belonging to two organizations - Commerce Engineering and Ads & Business Platform. Both organizations, like most organizations in Meta, have global impact where the number of users is in the order of millions or more.
+
+Commerce Engineering (hardware sales) is Meta's next up and coming revenue stream and is also the organization which I work in. Commerce Engineering primarily deals with bringing Meta's hardware products to market - from building immersive digital storefronts and highly optimized checkout flows to delivering great post-sales experiences to platforms that manage the demand, production, testing and shipping of Meta hardware products across the entire supply chain. If you have heard of the Quest headset device, which is Meta's flagship VR device, my team spent the entire of 2021 building the Meta Store website to sell them (https://store.facebook.com/quest/ and https://store.facebook.com/portal/). I led the organization's migration from our existing separate Meta Quest and Portal websites to the unified Meta Store website, by building the web infrastructure, the React components for the web version of the Meta Store Design System, and developed migration guides + new APIs to help teams quickly migrate their products onto the Meta Store website. In April 2022, Meta announced the [Meta Store in Burlingame, California](https://about.fb.com/news/2022/04/meta-retail-store/) and the Meta Store website, which is one of the most visible products from the Singapore engineering office. It's definitely one of the highlights of my career to be building a product that contributed to Meta's 2nd highest revenue stream (and still growing)! We have even bigger plans for the Meta Store website. Stay tuned.
+
+Some stories from engineers in Commerce Engineering:
+
+- [Help 10 People—or Billions? Engineering Impact on a Global Scale](https://www.metacareers.com/life/help-10-peopleor-billions/), Nishita A., Software Engineering Manager, Commerce Engineering
+- [Embracing Change to Evolve Her Engineering Journey](https://www.metacareers.com/life/embracing-change-to-evolve-her-engineering-journey), Michelle T., Software Engineer, Commerce Engineering
-In Meta SG we have two huge organizations - Commerce Engineering and Ads & Business Growth. Both organizations, like most organizations in Meta, have global impact where the number of users are in the order of millions or more.
+On the Ads and Business organization, there are these teams:
-Commerce Engineering (hardware sales) is Meta's next up and coming revenue stream and is also the team I work in. Commerce Engineering primarily deals with sale of Meta's hardware devices, from discovery to purchase to warranties, returns and support. If you heard of the Oculus Quest device, which is Meta's flagship VR device, my team is in-charge of building the web storefronts to sell them (currently https://www.oculus.com). In my team, I built the web infrastructure for the Oculus website which tens of other Oculus teams build on top of, built the React components for the web version of the Oculus Design System and also rearchitected the Content Management Platform to be compatible with React. It's definitely one of the highlights of my career to be building a product that contributed to Meta's 2nd highest revenue stream (and still growing)!
+- **Business Integrity**: They work on building tools to catch bad advertisers (advertisers who create ads which violate our policies). They want to maximize Business Integrity outcomes by building a human review system for ads & commerce on Meta, driving end-to-end improvements in the workflows, and providing best-in-class tools to IP rights holders, etc.
+ - [Software Engineering in APAC: Building for Rapid Growth](https://www.metacareers.com/life/software-engineering-in-apac)
+ - [Curiosity and Passion: Software Engineering at Facebook](https://www.metacareers.com/life/curiosity-and-passion-software-engineering-at-facebook), Henry B., Software Engineer, Business Integrity
+- **Business Support Platform**: They redefine the support experience across all Meta business products, making it available, effective and effortless for all businesses. They make sure businesses can identify the help resources available to them when they need assistance in accomplishing their goals across Meta's suite of business tools. Their tools will also effortlessly help marketers diagnose their issues and connect them to the best solution to solve their problem. They have also some investment into the machine learning space.
+- **Business Messaging Commerce**: They build products that enable the Business Messaging ecosystem across Messenger, Instagram, and WhatsApp.
-On the Ads and Business side, there are multiple teams:
+Enterprise Engineering has a sizable presence in Singapore as well:
-- Business Integrity Review - They work on building tools to catch bad advertisers (advertisers who create ads which violate our policies). They want to maximize Business Integrity outcomes by building a human review system for ads & commerce on Meta, driving end-to-end improvements in the workflows, and providing best-in-class tools to IP rights holders, etc.
-- Business Support Platform - They redefine the support experience across all Meta business products, making it available, effective and effortless for all businesses. They make sure businesses can identify the help resources available to them when they need assistance in accomplishing their goals across Meta's suite of business tools. Their tools will also effortlessly help marketers diagnose their issues and connect them to the best solution to solve their problem. They have also some investment into the machine learning space.
-- Small Businesses and Growth - They have Multiple sub-projects. There's a system for managing the delivery of communications to businesses, advertisers and creators across Meta's products. The system is used by hundreds of internal teams, manages few hundred million communications a day and supports delivery to hundred over channels on Facebook, Instagram, Email, Push notifications and out-of-app surfaces such as Ads Manager, Meta Business Suite, Commerce Manager, etc. There's also a team working on adding an appointment booking system and restaurant menus to relevant businesses on Meta.
+- [Enterprise Engineering in APAC: Building Products That Scale](https://www.metacareers.com/life/enterprise-engineering-in-apac)
+- [Opportunity and Trust: Growing an Engineering Career at Meta](https://www.metacareers.com/life/opportunity-and-trust-growing-an-engineering-career-at-facebook), Shuhong W., Enterprise Engineering Manager
-## Career Progression/Compensation
+## Career progression/compensation
-Meta is one of the best companies for ambitious people who want to grow their careers quickly. At Meta, promotions come sooner and we encourage employees to be at their top form. At Meta, our terminal level (level at which there is no pressure to promote) is E5 and most people get from E3 to E4 within 1-1.5 years and from E4 to E5 within 2-2.5 years (this is a pessimistic estimate, I've seen people go from E3 to E5 in under 2 years). As an E5 in Meta SG your annual compensation will be at least 300k annually, which is on par, if not higher than most director-level roles in non-tech industries in SG. Imagine getting to that level of pay within 5 years of your career!
+Meta is one of the best companies for ambitious people who want to grow their careers quickly. At Meta, promotions come sooner and we encourage employees to be at their top form. At Meta, our terminal level (level at which there is no pressure to promote) is E5 and most people get from E3 to E4 within 1-1.5 years and from E4 to E5 within 2-2.5 years (this is a conservative estimate - I've seen top performers go from E3 to E5 in under 2 years). As an E5 in Meta SG your annual compensation will be at least 300k annually, which is on par, if not higher than most director-level roles in non-tech industries in SG. Imagine getting to that level of pay within 5 years of your career!
For comparison, Google, which is a similar company to Meta in many ways, has a slower promotion cycle - the average engineer at Google takes more than 2 years to get from L3 to L4, more than 3 years to get from L4 to L5 and more than 4 years to get from L5 to L6. At Google the terminal level is L4 so there's no pressure to promote. None of my peers are L6 at Google but a few are already E6 at Meta and it is quite achievable.
Faster promotions also lead to better pay, so in most cases, Meta pays more than most other companies. Meta is one of the top companies in terms of reputation and prestige especially for engineers.
-## Company Prospects
+## Company prospects
-Meta is a tech giant products have over 3 billion active monthly users and Meta relies on ads as their primary source of revenue. Whether you like it or not, Meta products are around to stay for the next couple of years. Even if they are going to die off, it won't be that soon. Stock growth has been relatively strong over the past few years (doubled since I joined in Nov 2017), especially since 2020.
+Meta is a tech giant and their products have over 3 billion active monthly users. The company relies on ads as their primary source of revenue. Whether you like it or not, Meta products are around to stay for the next couple of years. Even if they are going to die off, it won't be that soon. Stock growth has been relatively strong over the past few years (doubled since I joined in Nov 2017), especially since 2020.
-Mark Zuckerberg is also betting on the [metaverse](https://about.fb.com/news/2021/10/founders-letter/). Personally I'm undecided on whether the metaverse is the future.
+Mark Zuckerberg is also betting on the [Metaverse](https://about.fb.com/news/2021/10/founders-letter/), which is obvious from the decision to change the company name from Facebook to Meta. Personally I'm undecided on whether the Metaverse is the future.
## Culture
@@ -62,9 +76,9 @@ There's so much to say about a company's culture, but hopefully you can infer so
- Building cool internal tools - At Meta scale, it sometimes make sense for us to build our own internal tooling that has tight integration with our internal ecosystem as opposed to using an external service which might incur significant expenses and also pose security risks. We have teams building and maintaining our own tasks tool, code browsing and reviewing tool, a Q&A tool similar to Stack Overflow, a customized version of VS Code, an interview question bank, interview feedback tool, data visualization and querying tool, and a workflow automation tool similar to IFTTT/Zapier! Someone built a Pokedex app where you can catch a random Pokemon every time you close a task (I'm at 807/899 now!). I also have to mention that we have an internal meme maker which we can use to add customized internal memes to use in our comments in diff reviews and group posts
- Code wins arguments - It's not gender, race or your background that wins debates, it's the work that you produce. Instead of spending time arguing over technical decisions, it is more convincing to write some code to demonstrate the point.
- Beyond coding - We are also expected to contribute to the company beyond our coding, as in our perf evaluation we have a People axis, which measures how much you help and grow the people around you. People give talks, organize events, summits, do interviews, to score in this axis.
-- Fun Social Groups - Workplace is Meta's enterprise offering, it's essentially Facebook for companies. We have various interest groups where we can find colleagues to play board games, share cat photos, memes when we want to procrastinate on writing performance reviews, interesting puns, investing tips, and more!
+- Fun social groups - Workplace is Meta's enterprise offering, it's essentially Facebook for companies. We have various interest groups where we can find colleagues to play board games, share cat photos, memes when we want to procrastinate on writing performance reviews, interesting puns, investing tips, and more!
-## Mentorship and Growth
+## Mentorship and growth
Mentorship is readily available at Meta all the way from interns to senior executives. One thing that stood out to me when I first joined Meta was the focus on mentorship. When I first joined the company and was in the Bootcamp program, I had a Bootcamp mentor. After joining a team, I was assigned a senior engineer as my mentor who was also my tech lead. Employees will have weekly 1:1s with their mentor and manager. For interns, each intern at Meta is assigned an intern manager, who will act as their mentor and is usually the person who came up with their internship project. The intern manager will be the main person evaluating the intern's work and they ultimately determine the intern's performance and if they receive a return offer at the end of their internship.
@@ -72,13 +86,13 @@ These days, as a tech lead myself, I have around 4 1:1s weekly with mentees and
There are also specialized mentorship programs for those who need it, technical mentorship, career growth mentorship, managerial role transition mentorship, etc.
-## Work-Life Balance
+## Work-life balance
At Meta, you get to choose how fast you want to accelerate your career. Some people choose to take up more responsibilities, work more and ship more impact, usually resulting in faster professional growth, higher ratings and pay, while others work at their own comfortable pace; it's really up to the individual. The top performer on my team now is nearly getting to E5 with just around 2 years of working experience. They don't work beyond working hours, they're doing well because they're working smart and working on the most impactful and challenging problems.
Every Meta employee has 21 days of leave/paid time off every year and this year the company gave everyone three company-wide paid holidays on Friday in the summer and also two Meta choice days - effectively more paid time off but they cannot be accrued.
-## Transfers and Mobility
+## Transfers and mobility
It is extremely easy to move around in Meta because Meta understands that mobility is important to the happiness and welfare of employees. People move around quite often and people are eligible to consider team changes from their second year at the company onwards. Meta is a large company comprising of many organizations and each organization has their own unique culture. It can be refreshing to move to another part of the company, working on different domains, different products, experiencing a slightly different engineering culture, yet still be productive because you are using the same engineering tools as before. When engineers move around the company, positive things can happen - they bring the good practices from their previous organizations to the new organizations, networks are strengthened and new connections are formed. Because Meta has offices around the globe, it is also possible to transfer to different countries as long as there are no work authorization issues. Personally I relocated back to Meta Singapore office after working for 2 years in Meta Menlo Park and my manager has worked in **4 different offices** (Menlo Park, London, New York, Singapore) throughout her 9 years at Meta!
diff --git a/website/blog/2021-12-23-front-end-vs-back-end-system-design-interviews.md b/website/blog/2021-12-23-front-end-vs-back-end-system-design-interviews.md
new file mode 100644
index 0000000000..aef0d3503b
--- /dev/null
+++ b/website/blog/2021-12-23-front-end-vs-back-end-system-design-interviews.md
@@ -0,0 +1,107 @@
+---
+title: Front End vs. Back End System Design Interviews
+slug: front-end-vs-back-end-system-design-interviews
+author: Zhenghao He
+author_title: Senior Software Engineer at Instacart, ex-Amazon
+author_url: https://twitter.com/he_zhenghao
+author_image_url: https://pbs.twimg.com/profile_images/1489749168767660032/M_us3Mu2_400x400.jpg
+tags: [front end, back end, system design, interview]
+hide_table_of_contents: true
+---
+
+Walkthrough of similarities and differences between front end vs. back end system design interviews and my thoughts on a front end career ceiling.
+
+
+
+
+
+
+
+## Context
+
+As I mentioned in my post on [coding interviews frameworks](https://www.zhenghao.io/posts/framework-for-coding-interview), I have been interviewing a lot for the past year - not conducting interviews, I was the candidate being interviewed. Most of the interview processes I had with big tech companies consisted of 1-2 system design rounds depending on the level of the role. Unlike traditional back end-focused system design questions, for which you can find lots of prep resources online such as the famous Grokking System Design Interview or System Design Primer, I didn't know what to expect for a front end-focused system design interview as there are very few resources out there talking about this type of interviews.
+
+Now that I have done a fair amount of system design interviews of both types, I want to give you a summary of what to expect, especially for the front end ones since I have been mostly working on the front end side.
+
+## Similarities
+
+Both front end-focused and back end-focused system design interviews share a lot of similarities in terms of the methodology you can adopt to solve the design questions:
+
+- Starting with gathering system requirements
+- Laying out a clear plan and identifying major distinguishable components of the system
+- Proceeding to end to end api design
+- Talking about optimization
+
+Other kinds of similarities include:
+
+- The interviewer is relying on you to drive the presentation. You can't rely on the interviewer to have your back.
+- While the topics can be either micro or macro, you probably won't need to actually write code - it is rare to jam some portion of coding in the middle of a system design interview
+- Unlike scantron school exams, both types will consist of mainly open ended questions. There probably isn't a checklist of things for you to cover one by one. Nor are you expected to drill deep into all of those. When you realize your interviewer is biased toward a particular part of the system, which they usually do, pivot your focus to that area. Other times you focus on your strengths and lead the conversation.
+
+## Differences
+
+During the back end-focused system design interviews, you would spend most of the time talking about things like:
+
+- Back end/server side architecture, hand waving various back end services/components
+- Discussing which type of database to use and how to aggregate data across different shards
+- Designing SQL table schema
+- Choosing the right the cross-region strategy if your service has a global user base
+- Any other kinds of system characteristics like latency, availability, fault tolerance, etc
+
+For front end-focused system design interviews, you would spend most of the time talking about stuff like:
+
+- Front end/client side architecture, such as the appropriate rendering pattern to choose - client side rendering, or server side rendering or static generation or something in between?
+- What kind of data fetching mechanism to use - REST vs. GRAPHQL vs. gRPC and what should the APIs look like?
+- Specifics about UI components
+ - A news feed which has an infinite scroll behavior with all the images lazily loaded while ensuring the client side has the aspect ratio of the images upfront to prevent layout shift.
+ - An autocomplete UI component which fetches search result data incrementally in batches while receiving images from server pushes in parallel.
+ - a gallery page which pulls images and displays them in the correct order despite the asynchrony that comes with the network requests that might cause them to arrive out of order.
+- How do you leverage different layers of cache to decrease latency or support offline mode.
+- If they want to get framework-specific, which is totally possible, they might even ask you to define a particular React components's props or manage complex state in a React app.
+
+A lot times having one type of system design interviews means you can over simplify the opposite side:
+
+- In a back end system design interview, the client-side/front end is reduced to an API layer - you don't need to consider all the intricacies of the browser or the pesky rerenders your real-time updates would cause.
+- In a front end system design interview, you can treat the back end as a black box and you don't need to worry about how things like how to scale a database, or how your choice of using web sockets might affect the load balancers because of the need for sticky sessions support.
+
+But again, this is a summary of my experience and depending on who your interviewers are (are they front end, back end and/or fullstack developers), the scope of the role and which team it is (are you going to be on a front end team or are you expected to work across the stack and stretch into the back end?) your front end system design interview might be a bit of a hybrid where some aspects of back end system design interviews might come up.
+
+Outside of the differences with the technical topics I needed to dig deep into during the interviews, I found there are two other interesting differences that stand out between the two types:
+
+- For front end system design interviews I was often encouraged to treat the interviewer as the **product manager** and we spent some time just fleshing out the brief solution for each user story. For the back end system design interviews, we didn't really get to talk about any user interaction (I am aware that the definition of users of your system might vary, depending on whether it is customer-facing vs. developer-facing)
+- These two types of system design interviews also differ a lot in terms of estimating certain system's needs based on the potential scale of the system. The system needs can be storage needs or throughput needs or any other types of requirements.
+ - It is common and expected to do these estimation during back end system design interviews since your design decision is only feasible when all of the system needs can realistically be met.
+ - But for the front end system design interview, I rarely needed to do any **quantitative estimation** - for example, when I was designing some live feed during a front end system design interview, I didn't need to do estimations like "So let's say each message was roughly 140 characters long and it is utf8 so that's 140 bytes and an average user gets 10000 messages over a certain period of time so we ended up allocating 1.4mb memory on user devices". Again, I am not saying that this would never come up during a front end system design interview. in my experience It is just much, much more rare compared to back end ones.
+
+## Career ceiling
+
+I am going to talk about something that is a little tangential. I don't think this is going to be a hot take but if you just want to pass the upcoming interviews, then you are welcome to skip this part.
+
+I have done interviews for both front end focused roles and general software engineer roles. As I went through the preparation process for the system designs interviews, it just occurred to me that there is indeed a career ceiling for a pure front end focused software engineer role.
+
+Ok so let's first get this out of the way - you can be extremely successful as either a front end developer or a back end developer.
+
+Also it is hard to discuss any topic intelligently when we cannot agree on definitions. By saying front end developers I meant developers/engineers who solely work on the UI of a software system. And by saying career ceiling I meant the potential terminal title and the highest level such a developer/engineer can achieve in the technical individual contributor track.
+
+This is an unspoken thing and a very impolite conversation. And [there are exceptions](https://twitter.com/swyx/status/1236023548227072000) to this but just statistically speaking there seems to be a career ceiling for front end-only developers.
+
+## Fighting the inertia
+
+Part of the ceiling comes from some traditional baggage:
+
+- modern front end development is fairly new compared to the back end counterpart. I have seen some bias in the industry that front end is not real engineering compared to the back end and that needs absolutely to be combated.
+- power structure persists for a very long time and that's partially why most of VP Eng and CTOs out there are back end/infra developers.
+
+## Economic reasoning
+
+I had this realization that when I was going through the back end system design interviews vs. the front end system design interviews - the technical topics those interviews tend to cover let me think about some economic reasoning leading to the perception of a "Front end ceiling" as well. Your value to the company really depends on how many machines/compute/storage run through you. As a developer/engineer, that means much money you control and front end-only developers just don't take as much. Of course front end is just as hard and as important especially for consumer facing products but at the end of the day your compute is being run on someone else's machine or device and the company just don't value that as much as the compute that they themselves need to pay for and to scale.
+
+## Short-lived vs. long-running
+
+On top of that, normally the front end/web apps are short-lived on the client side - the user opens the browser tab that loads your app and after 20 minutes they might just close the tab, and all the memory allocated by your app is on their devices from that point onward. On the other hand, the back end servers/services behind probably keep running for months or even years. One implication resulting from this difference is that you can generally get away with bad code that leads to performance problems down the road in front end apps because they are short-lived and the scale of the data they are dealing with is probably small, but you cannot ignore that in a long-running back end service.
+
+Good luck with your interviews.
+
+---
+
+_Follow me on [Twitter](https://twitter.com/he_zhenghao)_
diff --git a/website/blog/2022-04-20-take-control-over-your-coding-interview copy.md b/website/blog/2022-04-20-take-control-over-your-coding-interview copy.md
new file mode 100644
index 0000000000..68e715b7f4
--- /dev/null
+++ b/website/blog/2022-04-20-take-control-over-your-coding-interview copy.md
@@ -0,0 +1,197 @@
+---
+title: Take Control Over Your Coding Interview
+slug: take-control-over-your-coding-interview
+author: Zhenghao He
+author_title: Senior Software Engineer at Instacart, ex-Amazon
+author_url: https://twitter.com/he_zhenghao
+author_image_url: https://pbs.twimg.com/profile_images/1489749168767660032/M_us3Mu2_400x400.jpg
+tags: [interview]
+---
+
+## The interview question
+
+Imagine you were a university student looking to land an entry-level software engineer job and you were having this technical coding interview. The interview question starts with a table showing amount of units of a product sold at the shop and the corresponding price per unit. The idea here is that there is an incentive for customers to buy in bulk – the more we can sell the lower the price:
+
+```
+purchase quantity price per unit
+ 1-5 5 dollars
+ 6-10 4 dollars
+ 11-20 3 dollars
+ 20+ 2.5 dollars
+```
+
+
+
+
+
+
+
+The task the interviewer asks you to do is to write out a function that takes the amount of the times being purchased as the input and output the price per unit according the table. So if the input is 5, the function returns 5, and if the input is 6, the function returns 4... you get the idea.
+
+That's it. That is the whole question. "This is even simpler than [Fizz Buzz](https://leetcode.com/problems/fizz-buzz/)," you think to yourself, "but it might lead to more difficult follow-up questions, like it might get tweaked into a binary search problem or something". So you start to write the following simple solution, expecting more in-depth follow-up questions to come.
+
+```js
+function getPrice(amount) {
+ if (amount >= 1 && amount <= 5) return '5';
+ if (amount >= 6 && amount <= 10) return '4';
+ if (amount >= 11 && amount <= 20) return '3';
+ if (amount > 21) return '2.5';
+ return 'unknown price';
+}
+```
+
+However, to your surprise, after you came up with this solution, the interviewer just stops there, moves on to the next question or discusss something completely unrelated.
+
+The next day, you get a rejection letter from the company.
+
+## The Tweet
+
+This is based off of a true story. It was a real interview question and the solution I wrote above was considered **unacceptable** by the interviewer, i.e. the tweet author.
+
+
+
+A while ago this tweet went viral in the Chinese programming circle. The tweet author used this exact question to screen new grads for an entry-level software engineer position. The tweet and the question were written in Chinese so I translated this question into English.
+
+In the tweet, he complained that he was having a hard time understanding (很难理解) why many students came up with the solution that we came up with above. Instead of a straightforward solution with a bunch of `if` statements, he said he was expecting an answer like this:
+
+
+
+Compared to the first solution with a bunch of `if` statements, this solution, in his opinion, is more **modular, extensible, and maintainable**. That was the answer he had in mind and failing to arrive at this solution means you are weeded out in the interview process.
+
+I am not sure how you feel about this, but in my opinion, this is a pretty pointless interview question to ask new grads. The first solution is totally fine. Under the right circumstances, the second solution is closer to what you would want in production code, even though it is still not quite the [table-driven development](#table-driven-development) you'd want.
+
+There are so many things I want to unpack, so here is the tl;dr:
+
+1. Different types/styles of interviews call for different answers and that should be clearly communicated during the interview. The first solution is totally fine as the answer to an algorithmic question.
+2. Take control of your interview so you don't have to guess what the interviewer has in mind. You do this by asking clarifying questions. **Keep asking until everything the interviewer is looking for is clear to you**.
+3. The table-driven method (what the second solution tries to achieve) **optimizes for changes** and that's why the interviewer (the tweet author) failed students who didn't come up with that answer.
+
+The overarching theme in this post is that you should take control of your coding interview so you don't have to guess the answer your interviewer is thinking of.
+
+## Different styles of interviews calls for different answers
+
+Generally, there are two types of coding interviews:
+
+1. Interviews that focus on **algorithms & data structures**
+2. Interviews that focus on **practical app/feature-building** and test your hands-on engineering chops
+
+Normally it should be easy to distinguish between these two types of interviews by merely looking at the question: [Inverting a Binary Tree](https://leetcode.com/problems/invert-binary-tree/) is a typical algorithmic question, while designing and implementing an auto-complete search feature is more about practical app-building. Although sometimes the two types of interview questions would blend. For example, you might be asked to (partially) implement a [trie](https://en.wikipedia.org/wiki/Trie) when you are talking about the design of an auto-complete search feature/service/component. But these two different types of interviews are meant to test different competences.
+
+In a pure algorithmic, LeetCode-type of interviews, your **main goal** is to leverage the right data structures and come up with an efficient algorithm to solve the problem with the right set of memory/runtime complexity trade-offs **as fast as you can**. How readable, maintainable and extensible your code is, or whether it conforms to the current best practice in the the community/industry are _not_ that important, or at least secondary to the main goal. You can go ahead and name your variables `i`, `n`, `p`, `q` and mutate that input array in-place without being judged as long as your solution passes the test cases under the time and memory limits.
+
+> As [Joel Spolsky](https://www.joelonsoftware.com/) wrote in his [blog post](https://www.joelonsoftware.com/2006/10/25/the-guerrilla-guide-to-interviewing-version-30/): with the algorithmic interview questions, he wants to see if the candidate is smart enough to "rip through a recursive algorithm in seconds, or implement linked-list manipulation functions using pointers as fast as you can write on the whiteboard".
+
+For more experienced engineers/developers, the coding interview tends to lean into the practical app-building category, where **readable, maintainable code and extensible program structure** are what they look for, and all aspects of the full software development life cycle, even including error handling, are fair game to be asked, as they are important in real-world software building.
+
+Here I don't make any value judgment about which type of interviews are good or better. I just pointed out that they exist and interviewers look for different things by conducting different types of interviews.
+
+### Take control over the interview
+
+As an interviewee, you want to make sure you understand **which category the question falls into** because the underlying core criteria on which you are assessed are different – you don't want to overload the capacity of the working memory of your brain with tasks that are secondary before you reach the main goal. You want to take control over the interview so you are not left in the dark.
+
+One way to take control over the interview is to **narrate your thoughts** as you go and **articulate any assumptions** you have to make sure you get confirmation from your interviewer on your way forward or they should help you correct course.
+
+If I were the candidate receiving this exact question, I would ask this upfront: "should I write production-grade code with good engineering practices or you are more interested in how I'd tackle the algorithm & data structure part?". That is probably one of the highest ROI questions we can ask during an interview. The interviewer would either tell me to write a workable solution under the constraints of the runtime or space characteristics or treat this as a real-world engineering problem with real-world tradeoffs.
+
+### With all that being said, it is a bad question to ask new grads
+
+The question itself doesn't test any of the core competencies that distinguish between brilliant programmers and mediocre ones. What's really being tested here, based on the (ideal) answer the interviewer (the author of the tweet) had in mind, is the whether the candidate – **new CS grads** without any significant experience working in the software industry – knows how to use the table-driven method to implement such a function.
+
+I don't believe that any smart college student who can breeze through a graph traversal problem in an interview can't understand and pick up patterns like the table-driven method in just a couple of hours. On the other hand, any mediocre programmers who happened to read _[Code Complete](https://en.wikipedia.org/wiki/Code_Complete)_ can write a table-driven solution and pass the interview. Not to say that knowing good engineering practices is not a good thing; it is just that using that as the **only** hiring criteria to hire new grads is pointless and it doesn't help you find the smart kids.
+
+
+So what are the ideal interview quetsions to ask new grads?
+
+Joel pointed it out [in his post](https://www.joelonsoftware.com/2006/10/25/the-guerrilla-guide-to-interviewing-version-30/) that the ideal interview questions should cover at least one of these two Computer Science concepts: 1. recursion 2. pointers
+
+I actually agree with him on this. You want to ask questions about these two concepts not because they are ubiquitous in your average codebase and you have to use them every day. It is because they are a great tool to test the ability to reason and think in abstractions, the kind of mental aptitude a brilliant programmer would have.
+
+
+
+Anyway, the moral of the story is don't be afraid to ask clarifying questions so you don't have to guess what the interviewer looks for and cares about if they are not being explicit about their expectations.
+
+> You can stop here if you don't care about technical discussions about this simple interview question.
+
+## Table-driven development
+
+Solution 2 resembles a form of table-driven development described in a classic programming book called _[Code Complete](https://en.wikipedia.org/wiki/Code_Complete)_. But even if you have never read the book, you probably know this pattern from your experience working as a software developer/engineer.
+
+At its core, it tries to separate **data** from **logic**: instead of having all the information about pricing strategy (the data) hardcoded in the function (the logic) as literal values, it separates them.
+
+The pricing strategy is a business rule, and business rules tend to be the source of frequent changes. By encoding that in an external data structure (i.e. the array `priceMap` in this case), we make our program easier to accommodate future changes. Whenever the pricing strategy changes, we can just modify the entries in the array without touching the logic of the function. In other words, we isolate the unstable part, so the effect of a change will be limited.
+
+However, I said it only resembles table-driven development that you'd use in production code but it is not quite there yet:
+
+1. The pricing data is not fully separated from the logic as the array `priceMap` is still defined within the function
+2. Magic numbers are still there
+
+Depending on where the pricing data comes from, one possible variation of the table-driven method for this particular question is as follows:
+
+```javascript
+// config.js
+export const priceByRanges = [
+ { min: 1, max: 5, price: '5' },
+ { min: 6, max: 10, price: '4' },
+ { min: 11, max: 20, price: '3' },
+ { min: 21, max: Number.MAX_SAFE_INTEGER, price: '2.5' },
+];
+
+// app.js
+import { priceByRanges } from './config.js';
+
+function getPrice(amount) {
+ // error handling for amount outside the range
+ return priceByRanges.find(
+ (priceByRange) => amount >= priceByRange.min && amount <= priceByRange.max,
+ ).price;
+}
+```
+
+Now the pricing data is stored in `config.js` seperately and `priceByRanges` is resolved at load time.
+
+### Further optimization
+
+If the array `priceByRanges` is always sorted in terms of the price ranges, we can further optimize Solution 2 by leveraging binary search.
+
+```javascript
+const priceByRanges = [
+ { min: 1, max: 5, price: '5' },
+ { min: 6, max: 10, price: '4' },
+ { min: 11, max: 20, price: '3' },
+ { min: 21, max: Number.MAX_SAFE_INTEGER, price: '2.5' },
+];
+
+function getPrice(amount) {
+ if (amount < priceByRanges[0].min) {
+ return 'unknown price';
+ }
+
+ let start = 0,
+ end = priceByRanges.length - 1;
+
+ while (start <= end) {
+ const mid = (start + end) >>> 1;
+ if (priceByRanges[mid].max < amount) {
+ start = mid + 1;
+ } else {
+ end = mid - 1;
+ }
+ }
+
+ return priceByRanges[start].price;
+}
+```
+
+
What is this >>>
?
+
+`>>>` is binary right shift by 1 position, which is effectively just a division by 2 followed with a `Math.floor`. e.g. for 11: 1011 -> 101 results to 5.
+
+
+
+### Notes on performance and Big O
+
+It might feel that the first clumsy solution with a bunch of `if` blocks is better in terms of the performance than the second table-driven approach that _loops_ through the array.
+
+Actually for the Big O analysis, both approaches have the **same constant time complexity**, as the number of operations (i.e. comparision between `amount` and the price range), doesn't grow no matter how big the input is (i.e. `amount`).
+
+What's more interesting, in my opinion, is the performance implications between using a loop vs. "unrolling" the loop. By unrolling I mean discretely writing line-by-line of the loop body. [A quick google search](https://stackoverflow.com/questions/38111355/javascript-are-loops-faster-than-discretely-writing-line-by-line) suggests that popular JavaScript engines such as V8 heavily optimize loops. But getting any accurate results from such a micro-benchmarking is really hard as the performance varies a lot depending on different factors like the engine and the code in the loop body.
diff --git a/website/blog/2022-04-21-why-you-should-include-debugging-in-the-interview-process.md b/website/blog/2022-04-21-why-you-should-include-debugging-in-the-interview-process.md
new file mode 100644
index 0000000000..475954e8ae
--- /dev/null
+++ b/website/blog/2022-04-21-why-you-should-include-debugging-in-the-interview-process.md
@@ -0,0 +1,72 @@
+---
+title: Why You Should Include Debugging In The Interview Process
+slug: why-you-should-include-debugging-in-the-interview-process
+author: Zhenghao He
+author_title: Senior Software Engineer at Instacart, ex-Amazon
+author_url: https://twitter.com/he_zhenghao
+author_image_url: https://pbs.twimg.com/profile_images/1489749168767660032/M_us3Mu2_400x400.jpg
+tags: [interview, debugging]
+---
+
+
+
+:::tip
+
+See discussions on [Hacker News](https://news.ycombinator.com/item?id=31125269)
+
+:::
+
+## Most technical interviews are over-indexing on coding
+
+Over the past two years, I have interviewed with over 10 different tech companies ranging from hot startups like Coinbase, Stripe, and Instacart to FAANG companies like Amazon and Meta, for Software Engineer positions of various levels.
+
+The technical interview processes I have had all consisted of at least two rounds of coding interviews, where I either had to solve an **algorithmic, LeetCode-type** question or build a **practical app/feature**. During those coding interviews, I always started with an _empty slate_: if it was an algorithm-heavy interview question, there would be a literally empty file in the editor for me to start writing code; if it was a practical app building exercise, there might be some boilerplate code or some utilities/helper functions available but still I was expected to build the app/feature from scratch.
+
+
+
+I do think they did a good job at assessing my coding ability. But the issue I see here is that the standard interview process in our industry has over-indexed on coding ability along. As a software engineer, apart from meetings and writing design docs, I’d say at least half of my programming work isn’t just coding – the other half largely involves searching through a codebase and reading existing code or code-adjacent artifacts like error messages, tests, and logs. And oftentimes, coding isn’t the hardest part.
+
+## What is programming exactly
+
+Programming is a complex task so it makes sense to dissect it so we can study the different phases, dimensions and components of it individually.
+
+I have been reading [_The Programmer's Brain_](https://www.manning.com/books/the-programmers-brain) by Felienne Hermans. It is a book about the cognitive process involved in programming. Felienne divides programming into five more concrete activities: **searching, comprehension, transcribing, incrementation, and exploration**.
+
+Searching is the activity where a programmer is looking for a specific piece of information in a codebase, such as the precise location of a bug you need to fix in the code.
+
+Comprehension is reading the code to understand its functionality and the way it is intended to work. It also involves executing the code and observing the results.
+
+Transcribing is about converting your thoughts or solutions to executable code. This is what we usually refer to as **"coding"** and is what the current standard coding interview process only focuses on.
+
+Incrementation is about incrementing (iterating) on an existing codebase, such as adding a new feature. It is a mix of the previous activities, where a programmer has to search, comprehend and transcribe their thoughts to code.
+
+Exploration is sketching and prototyping with code. Try things and use code as a means of thought. It is also a mix of the previous activities.
+
+With this newfound knowledge, it is not hard to tell what exactly the current standard interview process lacks. Activities such as searching and comprehension are completely left out and you have no way to prove your competencies needed for a big part of a software engineer job.
+
+It begs the question of what we can do to complement the interview process to cover all these activities. And the answer is to add a **debugging interview** in the process.
+
+## Debugging is all-encompassing
+
+When one is debugging, they engage in **all five activities**. It entails a sequence of searching, comprehension, exploration and writing code. And it is incredibly revealing to watch one debug:
+
+1. Are they debugging with a plan, iteratively bisecting the code or just randomly tweaking the code?
+2. How are they navigating their way through an unfamiliar codebase, forming different hypotheses about the bug?
+3. Do they try to write a test that reliably reproduces the issue?
+4. Are they able to find where things are diverging and trace to the root cause?
+5. Are they familiar with the IDE or editor they are using and know how to use tools like breakpoints and watches to step through the code?
+6. Do they understand how to read error messages and leverage stack traces?
+7. Are they able to implement a fix at the end?
+8. ...the list goes on and on
+
+On top of its comprehensiveness, debugging is what software engineers do on a regular basis. It is relevant to the actual work.
+
+Out of all the companies I have interviewed for, _only_ Stripe conducted a debugging interview. They call it Bug Squash, where you’d dive into a large, well-written library codebase to fix real-world open-source bugs. I had a blast going through that interview which I can’t say about boring LeetCode questions.
+
+Granted, preparing such a debugging interview involves more work for the company than just throwing a LeetCode question at the candidate. Still, having that in the process gives you more signals for selecting capable, experienced engineers. I hope more companies start to embrace that in their hiring process.
+
+## Further reading that can make you better at debugging
+
+- [_Debugging: The 9 Indispensable Rules for Finding Even the Most Elusive Software and Hardware Problems_](https://www.goodreads.com/book/show/3938178-debugging) by Dave Agans
+- [_Debugging Software_](https://blog.isquaredsoftware.com/2021/06/presentations-debugging-software/) by Mark Erikson
+- [_How I got better at debugging_](https://jvns.ca/blog/2015/11/22/how-i-got-better-at-debugging/) by Julia Evans
diff --git a/website/blog/2022-07-09-getting-a-tech-job-as-an-undergraduate.md b/website/blog/2022-07-09-getting-a-tech-job-as-an-undergraduate.md
new file mode 100644
index 0000000000..3c8541ce75
--- /dev/null
+++ b/website/blog/2022-07-09-getting-a-tech-job-as-an-undergraduate.md
@@ -0,0 +1,89 @@
+---
+title: Getting a Tech Job as an Undergraduate
+slug: getting-a-tech-job-as-an-undergraduate
+author: Melody Yun
+author_title: RCG Software Engineer at PayPal
+author_url: https://github.com/caramelmelmel
+author_image_url: https://github.com/caramelmelmel.png
+tags: [undergraduate, career, job search]
+hide_table_of_contents: true
+---
+
+Recently, I have met many juniors and peers especially from non-computer Science related backgrounds asking me about securing a job as a fresh graduate especially in this area of software engineering. Here's my take and some tips and tricks to get started.
+
+
+
+Before I share my resources and how to get a gentle start on this handbook, let me warn you that you would need to allocate a minimum of 6 months to get really good and confident with some of the LeetCode questions. Do not neglect the behavioral questions too! I am not going to repeat some of the things that are mentioned in this handbook but rather help everyone with some useful shortcuts of mine to navigate this resource to ease your preparations.
+
+## Crafting your resume
+
+In most companies, the resume stage is the most important as it is the first stage that you will need to clear! For undergraduates, most hiring managers would only look at resumes that are within one page. The moment the second page is seen, they will not tend to consider. Hence, here are some tips that can help you to prepare your resume in under an hour to reduce your agony.
+
+1. Use a
career hiring tool like [Kinobi](https://app.kinobi.asia/resume). Kinobi saves you time in having to fix alignments unlike word as this career tool formats everything for you. Furthermore, they help you to score your resume so that you know where you stand when applying for a job.
+
+2. As far as possible,
attend career talks by your favorite companies because hiring managers are there and you can get some feedback about your resume. It is indeed helpful because you know what to look out for when applying.
+
+3. Keep your sentences short and sweet, else you are out of the game.
+
+ -
Good example: "Developed a full-stack website that garnered positive responses from faculty and administration about course visualization." You need not provide tech stacks and let alone, links here. The sentence here is short and sweet and all in past tense.
+
+ -
Bad example: "Was a project manager for two projects- AI_ducation as well as the lift project for ALEF. Helped day-to-day operations by communicating with clients in Mandarin to map business requirements to technical requirements.". Over here, the sentence is long and things can be
separated out into points . Furthermore, it does not describe the outcome of the project enough to say
"Why should you be hired?" .
+
+4. To save time, while building your projects, apply good practices and also think of various optimizations in terms of algorithmic design, not forgetting system design. You can also show this off and this saved me a lot of time especially when it comes to grinding LeetCode.
+
+5. Your LinkedIn stands out the most and less of your personal website unless it's design related or frontend related. Write more things that are still succinct on your LinkedIn. Show your work there and let recruiters interact with your work.
+
+6. ATS-friendly resumes are the most important ones as recruiters screen high volumes of candidates everyday so they have less than even 5 seconds to look at your resume. Some companies use ATS to scan for good keywords.
+
+## How to use the Tech Interview Handbook easily
+
+I am about to recommend relevant sections to go in sequentially and how to systematically use them to your advantage especially in being real productive. This stage is normally faced when the resume stage has passed. Even then, months of prior preparation has to be done. However if you only have one month to prepare, I suggest the following tips:
+
+1. Know your interview process. Ask your recruiter about the interview process.
+
+2. Go to your Glassdoor page and pick out some of the past relevant interview questions that your company has done to get a gauge of what to expect. If you are unable to do those past questions, I suggest revising a good amount about the common topics. One common topic is array and hash table design. You can refer to the [coding interview rubrics section](/coding-interview-rubrics/) get to know your interview rubrics. It helps and you know what to do.
+
+3. Know and try various techniques for each LeetCode question. It's not purely about variety but more about if you were to even come back to the same question, will you be able to give a more optimal solution? If you don't know where to get started especially when solving problems in general refer to this [coding interview techniques section](/coding-interview-techniques/).
+
+ - Start with a whiteboard or pen and paper. Show your thought process.
+ - In most companies, if you were to show your thought process while doing, interviewers tend to favour candidates who do this. If you are not confident, start thinking that you are explaining and teaching a 12 year old child about how to solve this question.
+ - Code it out and write your own test cases. Get used to the HackerRank or LeetCode IDEs.
+ - Now with virtual interviews, some companies tend to use HackerRank live to conduct whiteboard interviews. Prepare a pen and paper beside you as you work along. Prepare to remote desktop protocol (RDP) into your computer to show step-by-step workings.
+ - Do not blurt out the solution straightaway as interviewers can tell that you memorize.
+
+4. Last but not least for algorithms heavy interviews, you might really want to save your time looking at [Grind 75](https://techinterviewhandbook.org/grind75). It's a useful curated source of questions to note how much you can prepare for your interview.
+
+5. Always be prepared for even system design questions! You will never know what comes your way and this is where your projects come in and how much of good practices you apply in them and what do you learn. The [System Design Primer](https://github.com/donnemartin/system-design-primer) is a good start.
+
+## Do not neglect behavioral interview questions
+
+Most candidates at least from what I know, tend to neglect this section. As a result, they pass up good opportunities because of this section.
+
+I suggest reading Cracking the Coding Interview, which explains this section very well in detail. Here are some preparations that you can do before the interview.
+
+1. Draw up a table in this format. This is so that you know what to say when a question about your projects come up.
+
+ | | Project 1 | Project 2 |
+ | ------------- | --------- | --------- |
+ | Strength 1 | | |
+ | Strength 2 | | |
+ | Weakness 1 | | |
+ | Weakness 2 | | |
+ | Improvement 1 | | |
+ | Improvement 2 | | |
+
+2. For those with portfolio websites, do be prepared to answer "What do you think can be done better to improve your website?" I highly suggest inspecting your console and using UI/UX principles to state the improvements. It would be also good for front end engineering roles to state how you can better engineer your website.
+
+3. When preparing, do not focus your answers heavily on your team. Instead, the interviewers want to see how you have grown as an individual and the difficulties that you encounter. Be also prepared to stand strong on your answers and do not give an "I think" vibes to the interviewer. They will tend to have a bad impression.
+
+4. Certain companies go by rubrics for this and they do not disclose this! However, always be humble and thank the interviewers for helping even if you are unable to justify.
+
+## Interview day
+
+As always, have a goodnight sleep before and adjust your sleep cycle
at least 3 days prior. If you do not know where to start form, start from a brute force solution and manipulate the data structure to your advantage.
+
+Most interviewers like optimized solutions but they like how you can design a
simple solution to the problem!
+
+## Conclusion
+
+All the best in your preparations! Hope my shortcuts help for those of you who are extremely busy!
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 7c45ce63a6..a19beb6543 100755
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -1,6 +1,6 @@
module.exports = {
title: 'Tech Interview Handbook',
- tagline: 'Free curated interview preparation materials for busy engineers',
+ tagline: 'Free curated interview preparation materials for busy people',
url: 'https://www.techinterviewhandbook.org',
baseUrl: '/',
trailingSlash: true,
@@ -9,8 +9,11 @@ module.exports = {
projectName: 'tech-interview-handbook',
themeConfig: {
announcementBar: {
- id: 'announcement-1', // Increment on change
- content: `⭐️ Bring your interview skills to the next level with Educative.
Join today for a discount! ⭐️`,
+ id: 'algomonster-1', // Increment on change
+ content: `Stop grinding mindlessly, study with a plan! Developed by Google engineers,
+
AlgoMonster is the fastest way to get a software engineering job.
+
Check it out now! `,
+ isCloseable: false,
},
prism: {
theme: require('prism-react-renderer/themes/github'),
@@ -19,67 +22,92 @@ module.exports = {
navbar: {
title: 'Tech Interview Handbook',
logo: {
- alt: '',
+ alt: 'Tech Interview Handbook Logo',
src: 'img/logo.svg',
},
+ hideOnScroll: true,
items: [
{
label: 'Start reading',
- href: '/introduction',
+ href: '/software-engineering-interview-guide/',
position: 'left',
},
{
- label: 'Coding interview guide',
- href: '/coding-interview',
+ label: 'Coding',
+ href: '/coding-interview-prep/',
},
{
- label: 'Algorithms 101',
- href: '/algorithms/introduction',
+ label: 'Algorithms',
+ href: '/algorithms/study-cheatsheet',
+ },
+ { label: 'Blog', to: 'blog', position: 'left' },
+ {
+ label: 'Grind 75',
+ href: 'https://www.techinterviewhandbook.org/grind75',
+ position: 'left',
+ },
+ {
+ label: 'Front End',
+ href: 'https://www.frontendinterviewhandbook.com',
+ position: 'left',
},
- {label: 'Blog', to: 'blog', position: 'left'},
{
href: 'https://github.com/yangshun/tech-interview-handbook',
position: 'right',
- className: 'navbar-icon navbar-icon-github',
+ className: 'navbar-icon',
'aria-label': 'GitHub repository',
+ html: `
+
+ `,
+ },
+ {
+ href: 'https://discord.gg/usMqNaPczq',
+ position: 'right',
+ className: 'navbar-icon',
+ 'aria-label': 'Discord channel',
+ html: `
`,
},
{
href: 'https://t.me/techinterviewhandbook',
position: 'right',
className: 'navbar-icon navbar-icon-telegram',
'aria-label': 'Telegram channel',
+ html: `
`,
},
{
href: 'https://twitter.com/techinterviewhb',
position: 'right',
className: 'navbar-icon navbar-icon-twitter',
'aria-label': 'Twitter page',
- },
- {
- href: 'https://www.facebook.com/techinterviewhandbook',
- position: 'right',
- className: 'navbar-icon navbar-icon-facebook',
- 'aria-label': 'Facebook page',
+ html: `
`,
},
],
},
footer: {
- copyright: `Copyright © ${new Date().getFullYear()} Yangshun Tay. Built with Docusaurus.`,
+ style: 'dark',
+ copyright: `Copyright © ${new Date().getFullYear()} Tech Interview Handbook. Built with Docusaurus.`,
links: [
{
title: 'General',
items: [
{
label: 'Start reading',
- href: '/introduction',
+ href: '/software-engineering-interview-guide/',
},
{
- label: 'Resume preparation',
- href: '/resume/guide',
+ label: 'Prepare a FAANG-ready resume',
+ href: '/resume/',
},
{
- label: 'Algorithms',
- href: '/algorithms/introduction',
+ label: 'Algorithms cheatsheets',
+ href: '/algorithms/study-cheatsheet',
},
{
label: 'Blog',
@@ -91,37 +119,37 @@ module.exports = {
title: 'Interviews',
items: [
{
- label: 'Interview cheatsheet',
- href: '/cheatsheet',
+ label: 'Coding interviews',
+ href: '/coding-interview-prep/',
},
{
- label: 'Coding interviews',
- href: '/coding-interview',
+ label: 'Coding interview study plan',
+ href: '/coding-interview-study-plan/',
},
{
label: 'System design interviews',
- href: '/system-design',
+ href: '/system-design/',
},
{
label: 'Behavioral interviews',
- href: '/behavioral-interview',
+ href: '/behavioral-interview/',
},
],
},
{
- title: 'About',
+ title: 'Community',
items: [
{
label: 'GitHub',
href: 'https://github.com/yangshun/tech-interview-handbook',
},
{
- label: 'Telegram',
- href: 'https://t.me/techinterviewhandbook',
+ label: 'Discord',
+ href: 'https://discord.gg/usMqNaPczq',
},
{
- label: 'Facebook',
- href: 'https://www.facebook.com/techinterviewhandbook',
+ label: 'Telegram',
+ href: 'https://t.me/techinterviewhandbook',
},
{
label: 'Twitter',
@@ -132,21 +160,36 @@ module.exports = {
{
title: 'More',
items: [
+ {
+ label: 'Grind 75',
+ href: 'https://www.techinterviewhandbook.org/grind75',
+ },
+ {
+ label: 'Front End Interview Handbook',
+ href: 'https://www.frontendinterviewhandbook.com',
+ },
{
label: 'Contact us',
href: 'mailto:contact@techinterviewhandbook.org',
},
+ {
+ label: 'Facebook',
+ href: 'https://www.facebook.com/techinterviewhandbook',
+ },
],
},
],
},
algolia: {
- apiKey: '4dabb055be464346fcb6877f086f08e8',
+ appId: 'Y09P1J4IPV',
+ apiKey: 'e12588cbae68d752469921cc46e9cb66',
indexName: 'techinterviewhandbook',
},
- metadata: [
- {name: 'fo-verify', content: '6993fa63-071e-4d11-8b10-a247c54c6061'},
- ],
+ docs: {
+ sidebar: {
+ hideable: true,
+ },
+ },
},
presets: [
[
@@ -156,40 +199,29 @@ module.exports = {
path: '../contents',
routeBasePath: '/',
sidebarPath: require.resolve('./sidebars.js'),
- showLastUpdateAuthor: true,
+ // showLastUpdateAuthor: true,
showLastUpdateTime: true,
},
theme: {
customCss: require.resolve('./src/css/custom.css'),
},
gtag: {
- trackingID: 'UA-44622716-2',
+ trackingID: 'G-9F86L298EX',
+ },
+ blog: {
+ blogSidebarCount: 15,
},
},
],
],
plugins: [
[
- '@docusaurus/plugin-client-redirects',
+ '@docusaurus/plugin-google-gtag',
{
- redirects: [
- {
- from: '/coding-round-overview',
- to: '/coding-interview',
- },
- {
- from: '/behavioral-round-overview',
- to: '/behavioral-interview',
- },
- ],
+ id: 'universal-analytics',
+ trackingID: 'UA-44622716-2',
+ anonymizeIP: true,
},
],
],
- scripts: [
- {
- src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4984084888641317',
- crossorigin: 'anonymous',
- async: true,
- },
- ],
};
diff --git a/website/package.json b/website/package.json
index 96411ded7c..ccb4912ca7 100755
--- a/website/package.json
+++ b/website/package.json
@@ -11,10 +11,10 @@
"deploy": "docusaurus deploy"
},
"dependencies": {
- "@docusaurus/core": "^2.0.0-beta.15",
- "@docusaurus/plugin-client-redirects": "^2.0.0-beta.15",
- "@docusaurus/preset-classic": "^2.0.0-beta.15",
- "classnames": "^2.2.6",
+ "@docusaurus/core": "^2.0.1",
+ "@docusaurus/plugin-client-redirects": "^2.0.1",
+ "@docusaurus/preset-classic": "^2.0.1",
+ "clsx": "^1.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
diff --git a/website/sidebars.js b/website/sidebars.js
index 8977c18dc4..c2331046e5 100755
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -1,92 +1,115 @@
module.exports = {
docs: [
{
- Preface: ['introduction', 'landscape'],
+ type: 'category',
+ label: 'Introduction',
+ collapsible: false,
+ items: ['software-engineering-interview-guide'],
+ },
+ {
+ type: 'category',
+ label: 'Getting an interview',
+ collapsible: false,
+ items: ['resume'],
},
{
- 'Step 1: Prepare a FAANG-ready resume': [
- 'resume/guide',
- 'resume/ats-proof-template',
- 'resume/write-effective-content',
- 'resume/optimize-resume',
- 'resume/free-tools-to-review-resume',
- 'resume/final-tips',
+ type: 'category',
+ label: 'Coding interview preparation',
+ collapsible: false,
+ items: [
+ 'coding-interview-prep',
+ 'programming-languages-for-coding-interviews',
+ 'coding-interview-study-plan',
+ 'coding-interview-cheatsheet',
+ 'coding-interview-techniques',
+ 'mock-interviews',
+ 'coding-interview-rubrics',
],
},
{
type: 'category',
- label: 'Step 2: Ace the interview',
- collapsed: false,
+ label: 'System design interview preparation',
+ collapsible: false,
+ items: ['system-design'],
+ },
+ {
+ type: 'category',
+ label: 'Behavioral interview preparation',
+ collapsible: false,
items: [
+ 'behavioral-interview',
+ 'behavioral-interview-questions',
+ 'self-introduction',
+ 'final-questions',
+ ],
+ },
+ {
+ 'Salary and offer negotiation preparation': [
+ 'understanding-compensation',
+ 'negotiation',
+ 'negotiation-rules',
+ 'choosing-between-companies',
+ ],
+ },
+ {
+ 'Algorithms study cheatsheets': [
+ 'algorithms/study-cheatsheet',
{
- 'Interview formats': [
- 'interview-formats',
- 'interview-formats-top-companies',
+ type: 'category',
+ label: 'Basics',
+ collapsible: false,
+ items: [
+ 'algorithms/array',
+ 'algorithms/string',
+ 'algorithms/hash-table',
+ 'algorithms/recursion',
+ 'algorithms/sorting-searching',
],
},
- 'self-introduction',
{
- '🔥 Coding interviews': [
- 'coding-interview',
- 'picking-a-language',
- 'study-and-practice',
- 'best-practice-questions',
- 'during-coding-interview',
- 'cheatsheet',
- 'coding-signals',
- 'mock-interviews',
- 'interviewer-cheatsheet',
- {
- Algorithms: [
- 'algorithms/algorithms-introduction',
- 'algorithms/array',
- 'algorithms/binary',
- 'algorithms/dynamic-programming',
- 'algorithms/geometry',
- 'algorithms/graph',
- 'algorithms/hash-table',
- 'algorithms/heap',
- 'algorithms/interval',
- 'algorithms/linked-list',
- 'algorithms/math',
- 'algorithms/matrix',
- 'algorithms/oop',
- 'algorithms/permutation',
- 'algorithms/queue',
- 'algorithms/recursion',
- 'algorithms/sorting-searching',
- 'algorithms/stack',
- 'algorithms/string',
- 'algorithms/tree',
- 'algorithms/trie',
- ],
- },
+ type: 'category',
+ label: 'Data structures',
+ collapsible: false,
+ items: [
+ 'algorithms/matrix',
+ 'algorithms/linked-list',
+ 'algorithms/queue',
+ 'algorithms/stack',
+ 'algorithms/interval',
],
},
- 'system-design',
{
- 'Behavioral interviews': [
- 'behavioral-interview',
- 'star-format',
- 'behavioral-questions',
- 'psychological-tricks',
+ type: 'category',
+ label: 'Advanced data structures',
+ collapsible: false,
+ items: [
+ 'algorithms/tree',
+ 'algorithms/graph',
+ 'algorithms/heap',
+ 'algorithms/trie',
+ ],
+ },
+ {
+ type: 'category',
+ label: 'Additional',
+ collapsible: false,
+ items: [
+ 'algorithms/dynamic-programming',
+ 'algorithms/binary',
+ 'algorithms/math',
+ 'algorithms/geometry',
],
},
- 'questions-to-ask',
- ],
- },
- {
- 'Step 3: Negotiate the best offer': [
- 'understanding-compensation',
- 'negotiation',
- 'negotiation-rules',
],
},
{
- 'Step 4: Prepare for the job': [
- 'choosing-between-companies',
+ Misc: [
+ 'interview-formats-top-companies',
+ 'interviewer-cheatsheet',
+ 'landscape',
'engineering-levels',
- // 'team-selection',
+ 'best-coding-interview-courses',
+ 'best-practice-questions',
],
},
],
diff --git a/website/src/components/SidebarAd/index.js b/website/src/components/SidebarAd/index.js
index 4cc805674f..1fbdf5fca4 100644
--- a/website/src/components/SidebarAd/index.js
+++ b/website/src/components/SidebarAd/index.js
@@ -1,171 +1,221 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { useEffect, useState } from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';
import clsx from 'clsx';
import styles from './styles.module.css';
-const BACKGROUNDS = [
- styles.backgroundBlue,
- styles.backgroundOrange,
- styles.backgroundPurple,
- styles.backgroundRed,
-];
+const AD_REFRESH_RATE = 20 * 1000;
-function TopResume({className}) {
+function FAANGTechLeads({ position }) {
return (
{
- window.gtag('event', 'topresume.sidebar.click');
+ window.gtag('event', `faangtechleads.${position}.click`);
}}>
- Best resume service for FAANG
-
- If you are running low on time, I recommend TopResume's{' '}
- free resume review services, which has helped countless software
- engineers get interviews at FAANG.
+
+ Craft the perfect resume for Google and Facebook
+
+ Save time crafting your resume with FAANG Tech Leads'{' '}
+ FAANG-quality resume templates and examples which have helped
+ many Software Engineers get interviews at top Bay Area companies!
);
}
-function Moonchaser({className}) {
+function AlgoMonster({ position }) {
return (
{
+ window.gtag('event', `algomonster.${position}.click`);
+ }}>
+
+
+ Stop grinding mindlessly. Study with a plan
+
+ Developed by Google engineers, AlgoMonster is the fastest way to
+ get a software engineering job. Check it out for free!
+
+
+ );
+}
+
+function Moonchaser({ position }) {
+ return (
+
{
+ window.gtag('event', `moonchaser.${position}.click`);
+ }}>
+
+
+ Risk-free salary negotiation help
+ {' '}
+ Receive risk-free salary negotiation advice from Moonchaser . You
+ pay nothing unless your offer is increased.{' '}
+ Book your free consultation today!
+
+
+ );
+}
+
+function DesignGurusCoding({ position }) {
+ return (
+
{
- window.gtag('event', 'moonchaser.sidebar.click');
+ window.gtag('event', `designgurus.coding.${position}.click`);
}}>
- Get paid more. Receive risk-free salary negotiation
- advice from Moonchaser . You pay nothing unless your offer is
- increased. Book a free consultation today!
+ Stop memorizing solutions
+ Grokking the Coding Interview teaches you techniques and question
+ patterns to ace coding interviews. Grab your lifetime access today!
);
}
-function Educative({className}) {
+function DesignGurusSystemDesign({ position }) {
return (
{
- window.gtag('event', 'educative.sidebar.click');
+ window.gtag('event', `designgurus.system_design.${position}.click`);
}}>
- Looking to get hired at FAANG?
-
- Educative offers many great courses to improve your interview
- game. Join today for a 10% discount!
+ Get the job at FAANG
+ Grokking the System Design Interview is a highly recommended
+ course to get better at system design interviews. Find out more!
);
}
-function EducativeCoding({className}) {
+function ByteByteGoSystemDesign({ position }) {
return (
{
- window.gtag('event', 'educative.coding.sidebar.click');
+ window.gtag('event', `bytebytego.system_design.${position}.click`);
}}>
- Get the job at FAANG
-
- "Grokking the Coding Interview: Patterns for Coding Questions" by
- Educative is the best course for improving your algorithms interview
- game. Join today for a 10% discount!
+
+ Ace Your Next System Design Interview
+
+ ByteByteGo's system design interview course is everything you
+ need to take your system design skill to the next level.{' '}
+ Find out more!
);
}
-function EducativeSystemDesign({className}) {
+function Interviewingio({ position }) {
return (
{
- window.gtag('event', 'educative.coding.sidebar.click');
+ window.gtag('event', `interviewingio.${position}.click`);
}}>
- Get the job at FAANG
-
- "Grokking the System Design Interview" by Educative is a highly
- recommended course for improving your system design interview game.{' '}
- Join today for a 10% discount!
+
+ Practice interviewing with Google engineers
+
+ interviewing.io provides anonymous technical mock interviews with
+ engineers from Google, Facebook, and other top companies.{' '}
+ Give it a try!
);
}
-export default React.memo(function SidebarAd() {
- const backgroundClass =
- BACKGROUNDS[Math.floor(Math.random() * BACKGROUNDS.length)];
+export default React.memo(function SidebarAd({ position }) {
+ const [counter, setCounter] = useState(0);
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setCounter((counter) => counter + 1);
+ }, AD_REFRESH_RATE);
+
+ return () => clearTimeout(timer);
+ }, [counter]);
// Because the SSR and client output can differ and hydration doesn't patch attribute differences,
// we'll render this on the browser only.
return (
-
+
{() => {
+ const rand = Math.random();
+
const path = window.location.pathname;
// Ugly hack to show conditional sidebar content.
- if (path.startsWith('/resume')) {
- return ;
- }
- if (
- path.includes('negotiation') ||
- path.startsWith('/understanding-compensation')
- ) {
- return ;
+ if (path.includes('resume')) {
+ return ;
}
- if (
- path.includes('coding') ||
- path.startsWith('/best-practice-questions') ||
- path.startsWith('/cheatsheet') ||
- path.startsWith('/mock-interviews') ||
- path.startsWith('/algorithms')
- ) {
- return (
-
- );
+ if (path.includes('negotiation') || path.includes('compensation')) {
+ return ;
}
if (path.includes('system-design')) {
- return (
-
+ return rand < 0.5 ? (
+
+ ) : (
+
);
}
- return Math.random() > 0.5 ? (
-
+ // if (
+ // path.includes('coding') ||
+ // path.includes('best-practice-questions') ||
+ // path.includes('mock-interviews') ||
+ // path.includes('algorithms')
+ // ) {
+ // return rand < 0.3 ? (
+ //
+ // ) : rand < 0.6 ? (
+ //
+ // ) : (
+ //
+ // );
+ // }
+
+ return rand < 0.5 ? (
+
+ ) : rand < 0.75 ? (
+
) : (
-
+
);
}}
diff --git a/website/src/components/SidebarAd/styles.module.css b/website/src/components/SidebarAd/styles.module.css
index f8a585068d..c3b42cdce7 100644
--- a/website/src/components/SidebarAd/styles.module.css
+++ b/website/src/components/SidebarAd/styles.module.css
@@ -4,32 +4,59 @@
border-radius: var(--ifm-global-radius);
color: #fff;
display: block;
- opacity: 0.95;
+ opacity: 0.9;
padding: 1rem;
transition: opacity var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
}
-.backgroundPurple {
- background-image: linear-gradient(138deg, rgb(69, 104, 220), rgb(176, 106, 179));
+.container:hover {
+ color: #fff !important;
+ opacity: 1;
+ text-decoration: none;
}
-.backgroundRed {
- background-image: linear-gradient(39deg, rgb(188, 78, 156), rgb(248, 7, 89));
+.backgroundFTL {
+ background-color: rgb(244, 63, 94);
}
-.backgroundOrange {
- background-image: linear-gradient(39deg, rgb(255, 81, 47), rgb(240, 152, 25));
+.backgroundGrokkingCoding {
+ background-color: #6fc8cc;
+ color: #083436 !important;
}
-.backgroundBlue {
- background-image: linear-gradient(153deg, rgb(116, 116, 191), rgb(52, 138, 199));
+.backgroundGrokkingCoding:hover {
+ color: #083436 !important;
}
-.container:hover {
- color: #fff;
- opacity: 1;
- text-decoration: none;
+.backgroundGrokkingSystemDesign {
+ background-color: #58527b;
+}
+
+.backgroundMoonchaser {
+ background-color: #1574f9;
+}
+
+.backgroundAlgoMonster {
+ background-image: linear-gradient(270deg, #3e1792, #6a45b9);
+}
+
+.backgroundInterviewingio {
+ background-color: #ffd829;
+ color: rgb(10, 10, 10) !important;
+}
+
+.backgroundInterviewingio:hover {
+ color: rgb(10, 10, 10) !important;
+}
+
+.backgroundByteByteGo {
+ background-color: #35cea0;
+ color: rgb(10, 10, 10);
+}
+
+.backgroundByteByteGo:hover {
+ color: rgb(10, 10, 10);
}
.tagline {
@@ -37,6 +64,12 @@
margin-bottom: 0;
}
+.title {
+ display: block;
+ font-size: 0.8rem;
+ margin-bottom: 0.1rem;
+}
+
.logo {
width: 96px;
}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index aac2fc2aff..4dc505185f 100755
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -1,12 +1,19 @@
@font-face {
- font-family: 'Inter';
+ font-family: 'Inter var';
+ font-weight: 100 900;
+ font-display: swap;
font-style: normal;
+ font-named-instance: 'Regular';
+ src: url('./fonts/Inter-roman-latin.var.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: 'Inter var';
font-weight: 100 900;
- font-display: optional;
- src: url('/fonts/inter-var-latin.woff2') format('woff2');
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
- U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
- U+FEFF, U+FFFD;
+ font-display: swap;
+ font-style: italic;
+ font-named-instance: 'Italic';
+ src: url('./fonts/Inter-italic-latin.var.woff2') format('woff2');
}
:root {
@@ -18,9 +25,9 @@
--ifm-color-primary-lighter: #8a8adf;
--ifm-color-primary-lightest: #afafe9;
- --ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
- 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
- 'Helvetica Neue', sans-serif;
+ --ifm-font-family-base: 'Inter var', -apple-system, BlinkMacSystemFont,
+ 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+ 'Droid Sans', 'Helvetica Neue', sans-serif;
--ifm-font-size-base: 16px;
--ifm-footer-padding-vertical: 3rem;
@@ -36,6 +43,10 @@ html[data-theme='dark'] {
--ifm-color-primary-lightest: rgb(191, 191, 248);
}
+.navbar__items {
+ font-size: 0.9rem;
+}
+
.footer__links {
margin-bottom: 3rem;
}
@@ -44,107 +55,119 @@ html[data-theme='dark'] {
text-align: start;
}
-.markdown h1 {
- margin-top: 1rem;
+.markdown h1:first-child {
+ --ifm-h1-font-size: 1.5em;
}
-@media screen and (max-width: 767px) {
- :root {
- --ifm-font-size-base: 16px;
+@media screen and (min-width: 768px) {
+ .markdown h1:first-child {
+ --ifm-h1-font-size: 2.25em;
}
+}
- .markdown h1 {
- --ifm-h1-font-size: 1.5rem;
- }
+.markdown h2 {
+ --ifm-h2-font-size: 1.375em;
+ margin-top: 2em;
+ margin-bottom: 0.5em;
+}
+@media screen and (min-width: 768px) {
.markdown h2 {
- --ifm-h2-font-size: 1.375rem;
- }
-
- .markdown h3 {
- --ifm-h3-font-size: 1.25rem;
+ --ifm-h2-font-size: 1.5em;
}
}
-div[class^='announcementBar_'] {
- background-color: var(--ifm-color-primary);
- color: #fff;
- font-weight: bold;
+.markdown h3 {
+ --ifm-h3-font-size: 1.25em;
+ font-weight: 600;
+ margin-top: 1.8em;
+ margin-bottom: 0.5em;
}
-.theme-doc-markdown details {
- --ifm-alert-background-color: transparent;
- border: 1px solid var(--ifm-color-primary);
+.markdown h4 {
+ font-size: 1.15em;
+ font-weight: 600;
+ margin-top: 1.6em;
+ margin-bottom: 0.4em;
}
-.theme-doc-markdown details h2,
-.theme-doc-markdown details h3,
-.theme-doc-markdown details h4,
-.theme-doc-markdown details h5,
-.theme-doc-markdown details h6 {
- margin-bottom: 0 !important;
+.markdown h5 {
+ font-size: 1em;
+ font-weight: 600;
+ margin-top: 1.4em;
+ margin-bottom: 0.3em;
}
-
-.docs-doc-page .pagination-nav__item:first-child .pagination-nav__label::before,
-.docs-doc-page .pagination-nav__item--next .pagination-nav__label::after {
- content: '';
+.markdown blockquote {
+ border-left-color: var(--ifm-color-emphasis-200);
+ border-left-width: 0.5rem;
+ color: var(--ifm-color-emphasis-600);
}
-.pagination-nav__item .pagination-nav__label {
- font-size: 1.5rem;
+.markdown ul blockquote {
+ font-size: 0.9em;
+ margin-top: 0.5em;
}
-.docs-doc-page .pagination-nav__item {
- max-width: 100%;
+@media screen and (max-width: 767px) {
+ :root {
+ --ifm-font-size-base: 16px;
+ }
}
-.navbar-icon:before {
- background-repeat: no-repeat;
- content: '';
- display: flex;
- height: 24px;
- width: 24px;
- transition: all 300ms ease-in-out;
+div[class^='announcementBar_'] {
+ background-color: var(--ifm-color-primary);
+ color: #fff;
+ font-weight: bold;
}
-.navbar-icon:hover {
- opacity: 0.8;
+.menu {
+ font-size: 0.875rem;
}
-.navbar-icon-github:before {
- background-image: url('/img/icons8-github.svg');
+.table-of-contents {
+ font-size: 0.75rem;
}
-html[data-theme='dark'] .navbar-icon-github:before {
- background-image: url('/img/icons8-github-light.svg');
- height: 28px;
- width: 28px;
+@media screen and (min-width: 768px) {
+ .theme-doc-markdown {
+ font-size: 18px;
+ }
}
-.navbar-icon-twitter:before {
- background-image: url('/img/icons8-twitter.svg');
+.theme-doc-markdown details {
+ --ifm-alert-background-color: transparent;
+ border: 1px solid var(--ifm-color-primary);
}
-html[data-theme='dark'] .navbar-icon-twitter:before {
- background-image: url('/img/icons8-twitter-light.svg');
+.theme-doc-markdown details h2,
+.theme-doc-markdown details h3,
+.theme-doc-markdown details h4,
+.theme-doc-markdown details h5,
+.theme-doc-markdown details h6 {
+ margin-bottom: 0 !important;
}
-.navbar-icon-facebook:before {
- background-image: url('/img/icons8-facebook.svg');
+.navbar-icon {
+ border-radius: 50%;
+ display: flex;
+ height: 32px;
+ width: 32px;
+ align-items: center;
+ justify-content: center;
+ margin-right: 12px;
+ padding: 0;
+ transition: background var(--ifm-transition-fast);
}
-html[data-theme='dark'] .navbar-icon-facebook:before {
- background-image: url('/img/icons8-facebook-light.svg');
- height: 28px;
- width: 28px;
+.navbar-icon:hover {
+ background: var(--ifm-color-emphasis-200);
+ color: inherit;
}
-.navbar-icon-telegram:before {
- background-image: url('/img/icons8-telegram.svg');
+.theme-doc-markdown .theme-admonition {
+ font-size: 16px;
}
-html[data-theme='dark'] .navbar-icon-telegram:before {
- background-image: url('/img/icons8-telegram-light.svg');
- height: 28px;
- width: 24px;
+.admonition-heading h5 {
+ margin-top: 0;
}
diff --git a/website/src/css/fonts/Inter-italic-latin.var.woff2 b/website/src/css/fonts/Inter-italic-latin.var.woff2
new file mode 100644
index 0000000000..e09a2014b3
Binary files /dev/null and b/website/src/css/fonts/Inter-italic-latin.var.woff2 differ
diff --git a/website/src/css/fonts/Inter-roman-latin.var.woff2 b/website/src/css/fonts/Inter-roman-latin.var.woff2
new file mode 100644
index 0000000000..44fabcbc3c
Binary files /dev/null and b/website/src/css/fonts/Inter-roman-latin.var.woff2 differ
diff --git a/website/src/data/successStories.js b/website/src/data/successStories.js
index bf18409635..fcb81b3c7f 100644
--- a/website/src/data/successStories.js
+++ b/website/src/data/successStories.js
@@ -11,7 +11,7 @@ export default [
wasn't sure what to expect and where to start. This handbook together
with the{' '}
Front End Interview Handbook
@@ -37,8 +37,31 @@ export default [
section was an absolutely invaluable resource and a great overall
reference to brush up my fundamentals with the helpful hints and tips
provided, and also solve some of the most popular questions categorized
- by type. I certainly have Yangshun to thank for helping me land my dream
- job at Google!
+ by type. I certainly have this handbook to thank for helping me land my
+ dream job at Google!
+ >
+ ),
+ },
+ {
+ name: 'Zhenghao He',
+ title: 'Senior Software Engineer, Instacart',
+ thumbnail: 'https://github.com/zhenghaohe.png',
+ quote: (
+ <>
+ Tech Interview Handbook was the best resource I used during my coding
+ interview prep. Its structure and hand-picked questions and detailed
+ explanations really set it apart from other resources out there. I
+ helped me go into my interviews with confidence. I ended up landing
+ offers at Meta, Amazon, Twitch, Microsoft, Coinbase, Splunk, etc. I
+ highly recommend Tech Interview Handbook to anyone looking to secure an
+ offer from big tech companies.
+
+
+ I've learnt a few things and blogged about them on{' '}
+
+ https://zhenghao.io
+
+ , check them out if you're interested!
>
),
},
@@ -63,9 +86,36 @@ export default [
With the help of Tech Interview Handbook, I was able to land offers from
Google, Amazon, Uber and several other great companies. Really
- appreciate Yangshun and other contributors for putting out such quality
- content for the community. I'd wholeheartedly recommend this handbook to
- anyone!
+ appreciate the contributors for putting out such quality content for the
+ community. I'd wholeheartedly recommend this handbook to anyone!
+ >
+ ),
+ },
+ {
+ name: 'Rahul Senguttuvan',
+ title: 'Software Engineer Intern, Meta',
+ thumbnail: 'https://avatars.githubusercontent.com/u/26223361?v=4',
+ quote: (
+ <>
+ I started my interview preparation sometime during September of 2021. I
+ was introduced to the famous Blind 75 list while browsing through
+ LeetCode forums. The author of Blind 75, Yangshun Tay, had mentioned The
+ Tech Interview Handbook in one of the comments. I immediately checked
+ out the website and was extremely impressed.
+
+
+ The most use- section for me was the Coding and Algorithms along with
+ Company interview formats where I learnt the process beforehand. The
+ questions covered in the list along with the resources helped me get a
+ broad understanding of concepts like BFS, DFS and array operations which
+ I struggled with earlier. This helped me get into Mathworks, Microsoft
+ and Meta for my internships.
+
+
+ Moving forward, I will continue to use this resource along with Grind 75
+ (A list of coding questions created by the same author) for my full time
+ job hunt! I'm also excited to try out the System Design material as
+ well!
>
),
},
@@ -75,12 +125,12 @@ export default [
thumbnail: 'https://avatars.githubusercontent.com/u/19870898?s=400&v=4',
quote: (
<>
- I have not been preparing much for my interviews before my final year in
+ I have not been preparing much for my interviews before my final year in
university. As I set my sights on my full time job, I referred heavily
- to this handbook about things to prepare and look out for during my
+ to this handbook about things to prepare and look out for during my
applicaion. It has helped me so much in many stages of my application.
- My personal favorite is the best algorithm practice questions, which
- is helpful in the future if I want to switch jobs.
+ My personal favorite is the best algorithm practice questions, which is
+ helpful in the future if I want to switch jobs.
With the help of this handbook, I successfully land offers from
@@ -89,4 +139,36 @@ export default [
>
),
},
+ {
+ name: 'Jeanne Toh',
+ title: 'Software Engineer Intern, Meta, Google',
+ thumbnail: 'https://avatars.githubusercontent.com/u/54509483?v=4',
+ quote: (
+ <>
+ I remember not knowing what to expect when preparing for my first ever
+ tech interview. Tech Interview Handbook was a lifesaver. It covers all
+ the most important steps in applying for a tech role -- from resume
+ preparation to offer negotiation.
+
+
+ My favourite part is the{' '}
+
+ Grind 75 Tool
+
+ , which provides customisable coding interview study plans. This not
+ only helped to sharpen my problem-solving skills, but also assured me
+ that I covered sufficient breadth and depth.
+
+
+ Even now, after interviewing for a couple of years, I still go back to
+ the Tech Interview Handbook for a quick refresher before an interview,
+ and it continues to help me land great offers. This is an incredible
+ resource, created by someone who really wishes the best for you, and I
+ highly recommend it!
+ >
+ ),
+ },
];
diff --git a/website/src/pages/advertise.md b/website/src/pages/advertise.md
new file mode 100644
index 0000000000..4d72eb153c
--- /dev/null
+++ b/website/src/pages/advertise.md
@@ -0,0 +1,43 @@
+---
+title: Become an advertiser
+description: Advertise with us and leverage on our audience of 40,000 to 50,000 software engineers monthly
+keywords:
+ [
+ advertisement,
+ sponsorship,
+ sponsor,
+ advertise,
+ software engineer website advertisement,
+ software engineering interview website advertisement,
+ software engineering interview website sponsorship,
+ ]
+hide_table_of_contents: true
+---
+
+
+
+# Become an advertiser!
+
+Tech Interview Handbook has and always will be free for our readers. As such, sponsors and advertisers go a long way in keeping the website up and running.
+
+Our handbook has become one of the best resources for software engineering interview preparation, amassing over 10,000 monthly organic referrals from other software engineers on forums, Twitter, coding interview preparation sites, and even by [Ivy League universities such as Yale University](https://ocs.yale.edu/channels/the-technical-interview/).
+
+We boast over 200,000 monthly pageviews from 40,000 to 50,000 unique software engineers who are looking for a job and preparing for interviews.
+
+## Sponsorship and advertisement terms
+
+We run week-long exclusive sponsorships and advertisements on a fixed price schedule.
+
+Sponsors can choose any or all of the following positions to advertise with us:
+
+- Top of every page
+- Homepage
+- Sidebar and menu of every page
+- Navigation menu
+- Bottom of every page
+
+If you are keen to become our sponsor and advertise with us, please email us at [contact{at}techinterviewhandbook.org](mailto:contact@techinterviewhandbook.org).
+
+
+
+
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 80ac83fd33..205ff37601 100755
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -1,8 +1,9 @@
import React from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
import Layout from '@theme/Layout';
import BrowserOnly from '@docusaurus/BrowserOnly';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';
@@ -22,7 +23,7 @@ const FEATURES = [
interview experience needed.
>
),
- link: '/introduction',
+ link: '/software-engineering-interview-guide/',
},
{
title: <>📝 Curated practice questions>,
@@ -35,17 +36,17 @@ const FEATURES = [
to tell you which the best questions are.
>
),
- link: '/best-practice-questions',
+ link: '/coding-interview-study-plan/',
},
{
- title: <>📋 Interview cheatsheet>,
+ title: <>📋 Interview best practices>,
description: (
<>
Straight-to-the-point Do's and Don'ts during an interview. The battle is
already half won.
>
),
- link: '/cheatsheet',
+ link: '/coding-interview-cheatsheet/',
},
{
title: <>💁♀️ Practical algorithm tips>,
@@ -55,7 +56,7 @@ const FEATURES = [
cases to look out for.
>
),
- link: '/algorithms/introduction',
+ link: '/algorithms/study-cheatsheet/',
},
{
title: <>💬 Behavioral questions>,
@@ -65,7 +66,7 @@ const FEATURES = [
prepare your answers ahead of time.
>
),
- link: '/behavioral-questions',
+ link: '/behavioral-interview-questions/',
},
{
title: <>🧪 Tested and proven>,
@@ -78,9 +79,9 @@ const FEATURES = [
},
];
-function Tweet({url, handle, name, content, avatar, date}) {
+function Tweet({ url, handle, name, content, avatar, date }) {
return (
-
+
@@ -103,18 +104,19 @@ function Tweet({url, handle, name, content, avatar, date}) {
}
function Home() {
- const {siteConfig = {}} = useDocusaurusContext();
+ const { siteConfig = {} } = useDocusaurusContext();
return (
+
-
+
-
+
@@ -123,31 +125,37 @@ function Home() {
}
function HeroSection() {
- const {siteConfig = {}} = useDocusaurusContext();
+ const { siteConfig = {} } = useDocusaurusContext();
return (
-