-
Notifications
You must be signed in to change notification settings - Fork 105
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
910944b
commit aa5da50
Showing
1 changed file
with
240 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,240 @@ | ||
| --- | ||
| layout: '../../layouts/MarkdownLayout.astro' | ||
| --- | ||
|
|
||
| <h1>Hi Netflix Games UI Team 🎮</h1> | ||
|
|
||
| <div data-responsive-youtube-container> | ||
|
|
||
| <iframe width="560" height="315" src="https://www.youtube.com/embed/sfbhNRrqj4g?si=t2EZdHfkhVyeDaWW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>` | ||
|
|
||
| </div> | ||
|
|
||
| I'm really excited to learn more about Web UI role on the Games UI team. | ||
| Please accept this video cover — it's the best way to _show_ my enthusiasm about the role. | ||
|
|
||
| _I've included [the full transcript (with links)](#cover-video-transcript) below._ | ||
|
|
||
| <div class="flex gap-4"> | ||
| <a href="https://x.com/chantastic" target="_blank"> | ||
| <span class="[&>svg]:h-5 [&>svg]:w-5"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="currentColor" | ||
| viewBox="0 0 512 512"> | ||
| <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. --> | ||
| <path | ||
| d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" /> | ||
| </svg> | ||
| </span> | ||
| </a> | ||
|
|
||
| <a href="https://www.linkedin.com/in/chantastic/" target="_blank"> | ||
| <span class="[&>svg]:h-5 [&>svg]:w-5"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="currentColor" | ||
| viewBox="0 0 448 512"> | ||
| <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. --> | ||
| <path | ||
| d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z" /> | ||
| </svg> | ||
| </span> | ||
| </a> | ||
|
|
||
| <a href="https://www.youtube.com/@chantastic"> | ||
| <span class="[&>svg]:h-5 [&>svg]:w-5"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="currentColor" | ||
| viewBox="0 0 576 512"> | ||
| <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. --> | ||
| <path | ||
| d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z" /> | ||
| </svg> | ||
| </span> | ||
| </a> | ||
|
|
||
| <a href="https://github.com/chantastic" target="_blank"> | ||
| <span class="[&>svg]:h-5 [&>svg]:w-5"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="currentColor" | ||
| viewBox="0 0 496 512"> | ||
| <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. --> | ||
| <path | ||
| d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" /> | ||
| </svg> | ||
| </span> | ||
| </a> | ||
|
|
||
| <a href="https://stackoverflow.com/users/754775/chantastic?tab=profile" target="_blank"> | ||
| <span class="[&>svg]:h-5 [&>svg]:w-5"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="currentColor" | ||
| viewBox="0 0 384 512"> | ||
| <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. --> | ||
| <path | ||
| d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z" /> | ||
| </svg> | ||
| </span> | ||
| </a> | ||
|
|
||
| </div> | ||
|
|
||
| ## Cover Video Transcript | ||
|
|
||
| Hey, Netflix Games UI team. I'm Michael Chan. | ||
| I thought I'd send a video along with my application. | ||
|
|
||
| I wasn't looking for a strictly engineering position, | ||
| because I've loved [working in the content (DevEd) space for the past few years](https://www.youtube.com/@chromaticui). | ||
| But reading through the job description, I felt like I _had_ to reach out. | ||
| Because my experience lines up perfectly with this role. | ||
|
|
||
| Four things stood out to me most: | ||
|
|
||
| - A passion for delivering delightful experiences. | ||
| - Atunement to quality and accessibility. | ||
| - Cross-functionally partnership with other teams. | ||
| - Extensible and mantainable solution creation (through clear problem-solving, documentation, and tests). | ||
|
|
||
| Over the past 10 years, I've taught hundreds of thousands of React developers through free resources like [reactpatterns.com](https://reactpatterns.com/), | ||
| my [egghead courses](https://egghead.io/q/resources-by-michael-chan), | ||
| and my podcast, [React Podcast](https://reactpodcast.com/). | ||
|
|
||
| I even had the privilege of telling the story of React | ||
| by partnering with [Honeypot](https://www.youtube.com/@honeypotio) on their [React documentary](https://youtu.be/8pDqJVdNa44?si=o50oO_Bn9Lf1Vskt). | ||
|
|
||
| My 13 career has happened at the intersection of frontend component libraries (like React) and backend systems built in Ruby, PHP, Node, Go, etc. | ||
|
|
||
| I've adored working with teams from product, design, DevOps — you name it — to make sure we build systems that are extensible _and_ sensible. | ||
|
|
||
| I'm excited about the Web UI position, on the Games UI team. I think it could leverage all of the experience that I've gained to date. | ||
|
|
||
| You can find that experience on my LinkedIn Profile: [linkedin.com/in/chantastic/](https://www.linkedin.com/in/chantastic/). | ||
|
|
||
| Let's talk; I'm excited to learn more. | ||
|
|
||
| — chan | ||
|
|
||
| <!-- | ||
| <details open> | ||
| <summary>Role summary</summary> | ||
| ## Them (Games UI @ Netflix) | ||
| - passionate about delivering [joy, delightful experiences] | ||
| - care deeply about UI performance, quality, and accessibility | ||
| - cross-functional partnership | ||
| ## Me | ||
| - UI expert in JavaScript/TypeScript React component development | ||
| - Capable of navigating different application stacks (example: Rails) | ||
| - Foster collaboration thru autamotad tests, documentation, and strong cross-functional communication skills | ||
| - Elevates others knowledge and skills | ||
| - Identifies problems and demonstrates practical problem solving | ||
| - Product focused, not code focused | ||
| - UI expert | ||
| - builds intuitive and seamless UX | ||
| - JavaScript, TypeScript, React | ||
| - Frameworks: | ||
| - Ruby on Rails (Planning Center) | ||
| - Self-starter | ||
| - identify opportunities | ||
| - Frontend Architect | ||
| - Lead team on UI/Component Library | ||
| - product suite of 8 applictaions | ||
| - responsible for scaling horizontally (from 1-10 apps) | ||
| - strong relationships with cross-functional teams | ||
| - driving technical roadmaps | ||
| - projects | ||
| - icons (cross-stack) — building technical bridge between design and development | ||
| - release management | ||
| - organizational organization: getting teams aligned at the right level | ||
| - practical approach to problem solving | ||
| - avatars project | ||
| - elevate the knowledge and skills of yourself and others | ||
| - React Podcast (others) | ||
| - Courses (self) | ||
| - Navigate different stacks | ||
| - Rails, Laravel, Phoenix | ||
| - JavaScript [Next, Remix, Astro] | ||
| - quality & performance of the product shipped | ||
| - "cares about product, not just code" | ||
| - Hot Garbage: Clean Code is Dead: https://www.youtube.com/watch?v=VPCZshRW-mo | ||
| ## Responsibilities | ||
| - cross-functional collaboration | ||
| - <mark>build UI Systems</mark> | ||
| - Storybook and Chromatic | ||
| - Consulting | ||
| - Interviews with Brad Frost | ||
| - Architcet and document for other teams | ||
| - Storybook Chromatic | ||
| - Code simplicity | ||
| - can find the article i wrote on integrating key listener library | ||
| - write automated tests | ||
| - Storybok Chromatic (videos to showcase) | ||
| - (Course) | ||
| - keep abreast of tech changes | ||
| - large-scale A/B tests of features | ||
| </details> | ||
| <details open> | ||
| <summary> | ||
| Web UI Engineer (L5) — Games UI | ||
| </summary> | ||
| <a href="https://jobs.netflix.com/jobs/320682615">Application link</a> | ||
| ### Who We Are | ||
| Netflix is one of the world's leading entertainment services, with over 230 million paid memberships in over 190 countries. We are <mark>passionate about delivering joy</mark> to hundreds of millions of Netflix members worldwide, whether traveling to a remote location or at home with family. In addition to great shows and movies, our membership now includes exclusive access to a growing portfolio of high-quality games. | ||
| The <mark>Games UI team is responsible for the platform UI across all devices</mark> that Netflix is available, including discovery experiences and in-game platform functionality. We also own a standalone phone controller app on iOS that plays Games on TV. The team is <mark>passionate about bringing a new kind of ✨joy✨</mark> to hundreds of millions of Netflix members worldwide, whether traveling to a remote location or at home with family. | ||
| We seek a <mark>senior Web UI engineer to innovate and build the next generation of games platform UI</mark>. This high-impact role enables <mark>delivering delightful experiences</mark> to Netflix subscribers across multiple canvases. Our responsibilities include working on <mark>large-scale A/B tests of features</mark> - ranging from highly <mark>visible product experiences to core infrastructure</mark> that enables existing and future innovations. We <mark>care deeply about UI performance, quality, and accessibility</mark> of Netflix Games experiences. To bring new kinds of engaging and interactive experiences to life, we <mark>partner closely with many cross-functional teams, including product management, experience design, and creative production</mark>\*\*\*\*. | ||
| ### Who You Are | ||
| - A <mark>UI expert who is passionate about building _intuitive_ and _seamless_ user experiences</mark>. | ||
| - A <mark>Javascript expert</mark> with experience working with <mark>Typescript and React</mark>. | ||
| - <mark>Self-starter</mark> comfortable with <mark>identifying opportunities</mark> and <mark>driving forward-looking technical roadmaps</mark>. | ||
| - Effective at developing <mark>strong relationships with cross-functional</mark> teams through clear communication. | ||
| - Take a thoughtful, <mark>practical approach to problem-solving</mark> that considers tradeoffs and avoids over-engineering. | ||
| - Strive to <mark>elevate the knowledge and skills of yourself and others</mark> in a way that <mark>fosters an inclusive, collaborative environment</mark>. | ||
| - <mark>Exceptional coding skills</mark> can <mark>navigate different languages and technology stacks</mark>. | ||
| - Deeply care about the <mark>quality & performance of the product shipped</mark>. | ||
| ### What You Will Do | ||
| - <mark>Collaborate cross-functionally with product, design, and engineering partners to build delightful and accessible user experiences</mark>. | ||
| - Build <mark>UI systems</mark> for members to discover and play games on the Netflix platform. | ||
| - <mark>Architect</mark> maintainable, performant Web client code with <mark>documentation that developers can leverage on other teams</mark>. | ||
| - Help drive client <mark>code consistency</mark> and simplicity to accelerate A/B experimentation velocity and maintain high product quality. | ||
| - Architect code for <mark>testability and write automated tests</mark> to help uphold product quality on a <mark>high commit volume code base</mark>. | ||
| - <mark>Keep a pulse</mark> on cutting-edge Web and TV technologies and software engineering practices, and <mark>modernize the code base to accelerate innovation velocity while upholding high product quality</mark>. | ||
| ### Learn More | ||
| - We believe safe spaces where everyone can be their authentic selves is the key to a successful team so we welcome and embrace all identities, cultures, and backgrounds. | ||
| - Our US-based team is happy to embrace remote work. | ||
| Our compensation structure consists solely of an annual salary; we do not have bonuses. You choose each year how much of your compensation you want in salary versus stock options. To determine your personal top of market compensation, we rely on market indicators and consider your specific job family, background, skills, and experience to determine your compensation in the market range. The range for this role is $270,000 - $720,000. | ||
| Netflix provides comprehensive benefits including Health Plans, Mental Health support, a 401(k) Retirement Plan with employer match, Stock Option Program, Disability Programs, Health Savings and Flexible Spending Accounts, Family-forming benefits, and Life and Serious Injury Benefits. We also offer paid leave of absence programs. Full-time hourly employees accrue 35 days annually for paid time off to be used for vacation, holidays, and sick paid time off. Full-time salaried employees are immediately entitled to flexible time off. See more detail about our Benefits here. | ||
| Netflix is a unique culture and environment. Learn more here. | ||
| We are an equal-opportunity employer and celebrate diversity, recognizing that diversity of thought and background builds stronger teams. We approach diversity and inclusion seriously and thoughtfully. We do not discriminate on the basis of race, religion, color, ancestry, national origin, caste, sex, sexual orientation, gender, gender identity or expression, age, disability, medical condition, pregnancy, genetic makeup, marital status, or military service. | ||
| </details> | ||
| --> |