website: add ByteByteGo

README.md

@@ -78,7 +78,7 @@ Front-end-related content has been moved to a separate website - [Front End Inte
 
 ## Looking for System Design content?
 
-We're still working on System Design content. In the meanwhile, check out Design Gurus' [Grokking the System Design Interview course](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-system-design-interview), which in our opinion is one of the most useful resources for getting started on system design interviews preparation.
+We're still working on System Design content. In the meanwhile, check out [ByteByteGo's System Design Interview course](https://bytebytego.com?fpr=techinterviewhandbook) or Design Gurus' [Grokking the System Design Interview course](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-system-design-interview), which in our opinion are among the most useful resources for getting started on system design interviews preparation.
 
 ## Contents
 

contents/software-engineering-interview-guide.md

@@ -33,7 +33,7 @@ How to prepare for your software engineering interview:
 1. Pick a programming language
 1. Sharpen your Computer Science fundamentals for interviews
 1. Practice for the coding interview
-1. Prepare for the systems design interview (for mid/senior levels)
+1. Prepare for the system design interview (for mid/senior levels)
 1. Prepare for the behavioral interview
 1. Negotiating the offer package
 
@@ -183,9 +183,10 @@ The objective of system design interviews is to evaluate a candidate's skill at
 
 Some of the best system design interview preparation resources include:
 
+1. [ByteByteGo](https://bytebytego.com?fpr=techinterviewhandbook) - This is a new System Design course by Alex Xu, author of the System Design Interview books, a bestseller on Amazon. The course covers system designs basics, then goes into deep dives of the design of over 10 famous common products (e.g. [Designing YouTube](https://bytebytego.com/courses/system-design-interview/design-youtube), Facebook Newsfeed, etc) and multiple big data and storage systems (e.g. [Designing a Chat System](https://bytebytego.com/courses/system-design-interview/design-a-chat-system)). For each deep dive, concepts are explained and comprehensive diagrams are used, making it very approachable for any seniority level.
 1. ["Grokking the System Design Interview" by Design Gurus](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-system-design-interview) - This is probably the most famous system design interview course on the internet and what makes it different from most other courses out there is that it is purely text-based, which is great for people who prefer reading over watching videos (such as myself!). It contains a repository of the popular system design problems along with a glossary of system design basics. I've personally completed this course and have recommended many others to use this. Highly recommended!
-2. ["System Design Interview Course" by Exponent](https://www.tryexponent.com/courses/system-design-interview?ref=techinterviewhandbook) - This course covers system designs basics and has a huge database of popular system design questions with videos of mock interviews. Some of the questions have text answers and a database schema and APIs for reference (which I find helpful). While the subscription might be a little pricey for just the system design interviews content, they also offer quality technical content for [Data Structures](https://www.tryexponent.com/courses/swe-practice?ref=techinterviewhandbook), [Algorithms](https://www.tryexponent.com/courses/algorithms?ref=techinterviewhandbook) and [Behavioral Interviews](https://www.tryexponent.com/courses/behavioral?ref=techinterviewhandbook). The convenience of a one-stop platform which covers all aspects of technical interview preparation is very enticing.
+1. ["System Design Interview Course" by Exponent](https://www.tryexponent.com/courses/system-design-interview?ref=techinterviewhandbook) - This course covers system designs basics and has a huge database of popular system design questions with videos of mock interviews. Some of the questions have text answers and a database schema and APIs for reference (which I find helpful). While the subscription might be a little pricey for just the system design interviews content, they also offer quality technical content for [Data Structures](https://www.tryexponent.com/courses/swe-practice?ref=techinterviewhandbook), [Algorithms](https://www.tryexponent.com/courses/algorithms?ref=techinterviewhandbook) and [Behavioral Interviews](https://www.tryexponent.com/courses/behavioral?ref=techinterviewhandbook). The convenience of a one-stop platform which covers all aspects of technical interview preparation is very enticing.
-3. ["Grokking the Advanced System Design Interview" by Design Gurus](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-advanced-system-design-interview) - I haven't tried this but it's by the same people who created "Grokking the System Design Interview", so it should be good! In my opinion you probably wouldn't need this unless you're very senior or going for a specialist position.
+1. ["Grokking the Advanced System Design Interview" by Design Gurus](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-advanced-system-design-interview) - I haven't tried this but it's by the same people who created "Grokking the System Design Interview", so it should be good! In my opinion you probably wouldn't need this unless you're very senior or going for a specialist position.
 
 [Check out other Systems Design preparation guides and resources here.](./system-design.md)
 

contents/system-design.md

@@ -38,6 +38,7 @@ System design content is still work-in-progress, but the following are some reso
 
 ## Quality courses
 
+- [ByteByteGo](https://bytebytego.com?fpr=techinterviewhandbook) - This is a new System Design course by Alex Xu, author of the System Design Interview books, a bestseller on Amazon. The course covers system designs basics, then goes into deep dives of the design of over 10 famous common products (e.g. [Designing YouTube](https://bytebytego.com/courses/system-design-interview/design-youtube?fpr=techinterviewhandbook), Facebook Newsfeed, etc) and multiple big data and storage systems (e.g. [Designing a Chat System](https://bytebytego.com/courses/system-design-interview/design-a-chat-system?fpr=techinterviewhandbook)). For each deep dive, concepts are explained and comprehensive diagrams are used, making it very approachable regardless of seniority level.
 - ["Grokking the System Design Interview" by Design Gurus](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-system-design-interview) - This is probably the most famous system design interview course on the internet and what makes it different from most other courses out there is that it is purely text-based, which is great for people who refer reading over watching videos (such as myself!). It contains a repository of the popular system design problems along with a glossary of system design basics. I've personally completed this course and highly recommended many others to use this.
 - ["Grokking the Advanced System Design Interview" by Design Gurus](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-advanced-system-design-interview) - I haven't tried this but it's by the same people who created "Grokking the System Design Interview", so it should be good! In my opinion you probably wouldn't need this unless you're very senior or going for a specialist position.
 - ["Best of System Design" package by Design Gurus](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fbundles%3Fbundle_id%3Dbuy-both-system-design-courses) - This bundle allows you to purchase both System Design interview courses by Design Gurus at a discount. Best of all, it's lifetime and not subscription-based.

website/src/components/SidebarAd/index.js

@@ -113,6 +113,29 @@ function DesignGurusSystemDesign({position}) {
   );
 }
 
+function ByteByteGoSystemDesign({position}) {
+  return (
+    <a
+      className={clsx(styles.container, styles.backgroundByteByteGo)}
+      href="https://bytebytego.com?fpr=techinterviewhandbook"
+      key={Math.random()}
+      target="_blank"
+      rel="noopener"
+      onClick={() => {
+        window.gtag('event', `bytebytego.system_design.${position}.click`);
+      }}>
+      <p className={styles.tagline}>
+        <strong className={styles.title}>
+          Ace Your Next System Design Interview
+        </strong>
+        <u>ByteByteGo's</u> system design interview course is everything you
+        need to take your system design skill to the next level.{' '}
+        <u>Find out more!</u>
+      </p>
+    </a>
+  );
+}
+
 function Interviewingio({position}) {
   return (
     <a
@@ -165,7 +188,9 @@ export default React.memo(function SidebarAd({position}) {
         }
 
         if (path.includes('system-design')) {
-          return (
+          return rand < 0.5 ? (
+            <ByteByteGoSystemDesign key={Math.random()} position={position} />
+          ) : (
             <DesignGurusSystemDesign key={Math.random()} position={position} />
           );
         }
@@ -187,9 +212,7 @@ export default React.memo(function SidebarAd({position}) {
 
         return rand < 0.5 ? (
           <FAANGTechLeads key={Math.random()} position={position} />
-        ) : rand < 0.6 ? (
+        ) : rand < 0.75 ? (
-          <Interviewingio key={Math.random()} position={position} />
-        ) : rand < 0.8 ? (
           <AlgoMonster key={Math.random()} position={position} />
         ) : (
           <DesignGurusCoding key={Math.random()} position={position} />

website/src/components/SidebarAd/styles.module.css

@@ -50,6 +50,15 @@
   color: rgb(10, 10, 10);
 }
 
+.backgroundByteByteGo {
+  background-color: #35cea0;
+  color: rgb(10, 10, 10);
+}
+
+.backgroundByteByteGo:hover {
+  color: rgb(10, 10, 10);
+}
+
 .tagline {
   font-size: 0.75rem;
   margin-bottom: 0;