From 41de7b8a19bdf676ba3c38cc487fe90520b732e2 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Mon, 11 Jul 2022 12:45:39 +0800 Subject: [PATCH] website: add ByteByteGo --- README.md | 2 +- .../software-engineering-interview-guide.md | 7 +++-- contents/system-design.md | 1 + website/src/components/SidebarAd/index.js | 31 ++++++++++++++++--- .../components/SidebarAd/styles.module.css | 9 ++++++ 5 files changed, 42 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index af7beacb..5936c508 100644 --- a/README.md +++ b/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 diff --git a/contents/software-engineering-interview-guide.md b/contents/software-engineering-interview-guide.md index 10d96fe3..61756292 100644 --- a/contents/software-engineering-interview-guide.md +++ b/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. -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. ["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. ["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) diff --git a/contents/system-design.md b/contents/system-design.md index c905fc20..ba4b2a33 100644 --- a/contents/system-design.md +++ b/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. diff --git a/website/src/components/SidebarAd/index.js b/website/src/components/SidebarAd/index.js index 8eed824b..a330cb91 100644 --- a/website/src/components/SidebarAd/index.js +++ b/website/src/components/SidebarAd/index.js @@ -113,6 +113,29 @@ function DesignGurusSystemDesign({position}) { ); } +function ByteByteGoSystemDesign({position}) { + return ( + { + window.gtag('event', `bytebytego.system_design.${position}.click`); + }}> +

+ + 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 Interviewingio({position}) { return ( + ) : ( ); } @@ -187,9 +212,7 @@ export default React.memo(function SidebarAd({position}) { return rand < 0.5 ? ( - ) : rand < 0.6 ? ( - - ) : rand < 0.8 ? ( + ) : rand < 0.75 ? ( ) : ( diff --git a/website/src/components/SidebarAd/styles.module.css b/website/src/components/SidebarAd/styles.module.css index 000e605b..8baa5452 100644 --- a/website/src/components/SidebarAd/styles.module.css +++ b/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;