Front-End Engineer Blog
4.98K subscribers
36 photos
101 links
Hi, my name is Evgenii Ray. I'm SWE at Meta. Here is my place for posting notes about UI, career and personal development

Welcome on board 🚀
Contact: @evgeniiray
Languages: English, Russian
Download Telegram
We are back online 🎉

🇷🇺
Привет, хорошие новости. Ютуб канал снова работает, видео доступны для всех. Материал в телеграмме также остается без изменений.

[Episode 1 - News Feed] - https://www.youtube.com/watch?v=5vyKhm2NTfw
[Episode 2 - Pinterest]. - https://www.youtube.com/watch?v=3MADCVqL534
[Episode 3 - Netflix] - https://www.youtube.com/watch?v=Tu-hZ6lqNtY
[Episode 4 - Chat App] - https://www.youtube.com/watch?v=LEaiGjffLEs
[Episode 5 - Search] - https://www.youtube.com/watch?v=9aOXGE7wAZo
[Episode 6 - Data Table] - https://youtu.be/u6jhTo13_No

В ближайшее время, выпущу последнюю серию по Front-End дизайну. Если хотите еще видосов, засылайте ваши вопросы с реальных интервью и я буду с радостью дополню этот плейлист.

Всем уютной, морозной зимушки ❄️

——

🇬🇧
Hi, good news. The YouTube channel is online again, videos are available for everyone. Telegram content also remains unchanged.

[Episode 1 - News Feed] - https://www.youtube.com/watch?v=5vyKhm2NTfw
[Episode 2 - Pinterest]. - https://www.youtube.com/watch?v=3MADCVqL534
[Episode 3 - Netflix] - https://www.youtube.com/watch?v=Tu-hZ6lqNtY
[Episode 4 - Chat App] - https://www.youtube.com/watch?v=LEaiGjffLEs
[Episode 5 - Search] - https://www.youtube.com/watch?v=9aOXGE7wAZo
[Episode 6 - Data Table] - https://youtu.be/u6jhTo13_No

Soon, I'll be releasing the last episode on Front-End Design. If you want more videos, please send me your questions from interviews and I'll be happy to record a new SD video.

Have a great cozy, frosty winter ❄️

#interview
3
[ Front-End System Design ] - Episode 7 - Poll Widget

🇷🇺
——
Привет. Опубликовал последнюю серию Front-End System Design - https://www.youtube.com/watch?v=lO6GyCvbDm8

Получился наиболее простой и лайтовый эпизод. На этом, видосы по дизайну заканчиваются. Если есть возможность, засылайте свои дизайн вопросы с интервью, так мы сможем пополнить плейлист новыми сериями.

Теперь вопрос к Вам ☺️
О чем бы Вам было интересно узнать в ближайшие 2 месяца? Пока планы следующие:

1. Hardest Parts of Front-End Development 👨‍🏫

Начал работать над серией небольших статей - Hardest Parts of Front-End Development, где хочу разобрать различные тонкости верстки, работы браузера и оптимизации перфоманса приложений. Это долгосрочный проект, с помощью которого я бы хотел собрать все мясо из различных ресурсов и сделать полноценную серию статей, которую не стыдно советовать.

2. Заметки иммигранта 🚜

Фановая рубрика, где расскажу, основные моменты иммиграции, оформления документов, поиск жилья, проблемы с которыми столкнулся и просто впечатления от London City 🇬🇧

3. Пятничный чай 🍵

Появилась идея раз в 2-3 недели устраивать стримы, где можно просто поговорить и обменяться идеями.

Как тебе план?

Буду рад твоим комментариям
💪


🇬🇧
——
Hi. I've posted the latest episode of Front-End System Design - https://www.youtube.com/watch?v=lO6GyCvbDm8

This is the most smoothie and easy episode of the whole series and the last one. Feel free to send me your design questions from interviews to add more episodes to the playlist.

Now a question for you ☺️
What would you be interested in reading about in the next 2 months? So far, I have the following plan:

1. Hardest Parts of Front-End Development 👨‍🏫

I've been working on a series of articles - Hardest Parts of Front-End Development, where I want to tackle different subtleties of layout, browser performance, and optimizing application performance. This is a long-term project with which I'd like to gather all the "meaty parts" from various resources and make a full-fledged series of articles that I'm not ashamed to recommend.

2. Immigrant Notes 🚜

Just a fun section where I'll talk about my immigration, paperwork, finding accommodation, problems I encountered, and impressions of London City 🇬🇧

3. Friday Tea 🍵

I have an idea to do a stream every 2-3 weeks to just talk and exchange ideas.

Let me folks know what you think.

I’d love
to see your comments 💪

#design #interview
❤‍🔥1👍1
[Внезапно] - Apple Interview - Offer 🎉🎉🎉
( Translation to English will be published a bit later )

Привет, давно не виделись
Cейчас занимаюсь активным закрытием задач на текущей работе и оформлением документов, про эту волокиту расскажу позже. Время не было потрачено даром, со мной связались из Apple, и предложили пройти интервью на позицию Web Developer в Лондон. Я уже проходил интервью с ними в Канаду, но из-за ковида меня задинамили 🤷‍♂️

Рекрутер предложил заново провести phone-call, но волшебные слова у меня оффер из FAANG перевели наш разговор на стадию сразу on-site через 3 дня. К этому интервью я не стал готовиться, так как уже нахожусь на финальном этапе релокации в Лондон. Этим постом, я хочу подробно рассказать об опыте интервью, надеюсь это тебе поможет 💪

✔️ Round 1 - Algo - 45 min

Я не ожидал алго задач на интервью, но они были. Все на деревья. Эти задачи я очень хорошо знал, так что мне повезло и их получилось решить🙈

1. https://leetcode.com/problems/binary-tree-right-side-view/
2. https://leetcode.com/problems/binary-tree-maximum-path-sum/

✔️ Round 2 - Front-End - 45 min

1. Реализовать **Promise **

Follow up: Promise.race, Promise.all
https://bigfrontend.dev/problem/implement-Promise-race

2. Валидация большой формы.

Дана форма, около 20 инпутов разного типа. Нужно
сделать валидация на submit с кастомными сообщениями, интервьювер сделал акцент, что валидация должна использовать нативный tooltip.

Форма заняла у меня большую часть времени, так как я совершенно забыл API для кастомных сообщений. В общем, задание на знание нативной клиентской валидации через HTML + JS. Было несколько подсказок от интервьювера, но в целом, получилось справится с задачей.

На MDN неплохая статейка: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

✔️ Round 3 - Front-End - 45 min

1. Зарефакторить callback-hell

Дали простыню кода, около 200 строк вложенных колбеков с заданной сигнатурой. Нужно красиво это зерефакторить, не используя Promise. Очень похоже по методу решения, на задачу ниже:

https://bigfrontend.dev/problem/flatten-Thunk

2. Service Worker

Дано клиентское приложение, со статическими ресурсами, которые никогда не меняются. Вопрос от интервьювера - Как сделать, чтобы приложение работало в offline режиме без сети и отображало статус соединения.

По-сути меня попросили написать - Service Worker, который записывает в Application Cache, ресурсы с сервера статики. Я не помнил API для воркеров, поэтому использовал псевдо-код “по-памяти”, интервьювера это устроило, я также объяснил разницу между Web-Worker и Service-Worker

Для меня хорошим референсом был вот этот курс:
https://frontendmasters.com/courses/service-workers/

✔️ Round 4 - Design Star Widget - 60 min

Любимый вопрос, в амазоне. Нужно заимлементить Star Widget. Исполнение кода есть, нужно показать рабочий результат.

https://codepen.io/RayEuji/pen/qBbqaad

Во фронт доке имлементация почти такая же, можно посмотреть 😊

✔️ Round 5 - Design Apple Store- 60 min

Задачка по систем дизайну, которая мне не встречалась, решал по схеме, которую использовал для своих видео, но вместо Infinite Scroll, сделал упор на

- Интернационализация
- Оптимизация изображение и гифок, ленивая подгрузка
- Доступность
- Paralax + Lazy Content appearence

Рисовал в draw.io. Формат интервью - активная дискуссия. Куча вопросов от интервьювера. Совместная проработка решения. То есть, здесь мы не драйвим интервью, а работаем с интервьювером, как со своим коллегой.

Round 6 - Talk with a manager - 30 min

Очень приятное общение с менеджером, обсуждение опыта, не заметил прямых “бехейв” вопросов, фокус был на выполенные проекты и как ты видишь себя в Apple.

Итог - offer 🎉

Через неделю получил письмо с оффером, фидбека не дали. Заматчили мой оффер от FB + накинули стоков на ~20% больше, чем мне дал ФБ. К сожалению, так как оффер пришел очень поздно и поторговаться с ФБ уже никак, я решил отказаться от оффера. Но интервью получилось реально классным и очень практическим ☺️ Надеюсь мой опыт поможет тебе 💪 #interview
Всем теплой весны ☀️ Скоро увидимся 🙂
5👏5
[Suddenly] - Apple Interview - Offer 🎉🎉🎉 [English Version]

Hi, long time no see
I'm actively working on closing tasks and paperwork at the moment. Time wasn't wasted completely. I was contacted by Apple about a Web Developer position in London. I previously talked to them for the Canada office position back in 2020, but because of the COVID, they stopped the process. 🤷

The recruiter wanted to repeat a phone-call, but the magic words - "I have the FAANG offer" - moved our conversation to the on-site in 3 days. I did not prepare for this interview because I was already relocating to London. With this post, I want to describe my interview experience with Apple. I hope it will help you. 💪

✔️ Round 1 - Algo - 45 min

I wasn't expecting algo tasks for the interview, but there were. All about the trees. I knew these problems very well, so I was lucky 🙈

1. https://leetcode.com/problems/binary-tree-right-side-view/
2. https://leetcode.com/problems/binary-tree-maximum-path-sum/

✔️ Round 2 - Front-End - 45 min

1. Implement Promise .

Follow up: Promise.race, Promise.all
https://bigfrontend.dev/problem/implement-Promise-race

2. Validation of a large form.

Given a form, about 20 input fields of different types. You need
to do validation on submitting with custom messages, the interviewer emphasized that validation should use the native tooltip.

Most of the time, the form took me, as I had forgotten the API entirely for custom messages. You really need to know native client validation via HTML + JS. There were a few hints from the interviewer, but overall I got the job done.

There's a good article on MDN: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

✔️ Round 3 - Front-End - 45 min

1. Refactor the callback-hell

Given a code, about 200 lines of nested callbacks with a given signature. We need to refactor it nicely without using Promise. Kind of a similar problem can be found below:

https://bigfrontend.dev/problem/flatten-Thunk

2. Service Worker.

Given a client application with static resources that never change. Question from the interviewer - How to make the application work offline without a network and display the connection status.

Basically, I was asked to write - Service Worker that writes to Application Cache, resources from the static server. I didn't remember the API for the Worker, so I used a pseudo-code. I also explained the difference between Web-Workers and Service-Workers

For me, a good reference was this course:
https://frontendmasters.com/courses/service-workers/

✔️ Round 4 - Design Star Widget - 60 min

The favorite question of Amazon. We need to code the Star Widget. The code execution is available.

https://codepen.io/RayEuji/pen/qBbqaad

In the front-end doc, the implementation is almost the same. Check it out 🙂

✔️ Round 5 - Design Apple Store- 60 min

A design system problem I haven't seen before, solved according to the scheme I used for my videos, but instead of Infinite Scroll, I emphasized on:

- Internationalization
- Optimization of images and gifs, lazy loading
- Accessibility
- Parallax + Lazy Content appearance

I used draw.io for drawing all the stuff. Interview format - active discussion. Lots of questions from the interviewer. Working out the solution together. Here, we don't drive the interview but work with the interviewer as a colleague.

✔️ Round 6 - Talk with a manager - 30 min.

Lovely conversation with a manager, discussion of experience, didn't notice any direct "behavioral" questions, the focus was on completed projects and how you see yourself in Apple.

Result - offer 🎉

A week later, I got an email with an offer, no feedback, though. They matched my offer from FB + gave me ~20% more RSU bonus. Unfortunately, since the offer came late, I decided to give it up. But the interview was really cool and practical ☺️

This is it. I hope this will be useful for you. 💪

See you soon 🙂

#interview
🔥41👍1
🇬🇧 (English version can be found after this post below)

Всем привет ! Давненько не было постов в блоге, а рассказать есть что! Писал у себя в инстаграме, что все самые лучшие идеи приходят во время отпуска. В марте я уехал на 6 недель в отпуск в Тайланд. Удалось хорошо перезагрузить голову. В итоге пришло несколько идей.

Предыстория 🤌

В Англии, а точнее в Лондоне, есть сектор рынка где фронтендеры зарабатывают 800к-1М фунтов в год 💷(~40-45k фунтов в месяц после налогов). Я не шучу, такое существует, до определенного времени все было на уровне слухов, пока несколько знакомых не нашли работу в этих компаниях. Как можно догадаться, это сектор финансов, а точнее Хедж Фонды. В голове загорелась идея, почему бы и нет? Так началось путешествие длиною в 4 месяца. Как я уже писал ранее, мне нравится мой текущий проект в Мете и я не хотел бросать цель его закончить и одновременно дорасти до Staff роли, учитывая, что уже имел большой социальный капитал в команде и в проекте.

Цели поставленные на 4 месяца :

1. Работа над текущим проектом и подготовка промо пакета для Staff Engineer
2. Подготовка к интервью в хедж-фонды в Лондоне

Сама подготовка и работа не представляет трудностей. Основная проблема - время, и я не мог вести ее публично, так как много коллег подписаны на мой блог.

В течении 4ех месяцев мой день выглядел примерно так 📚:

- 8 часов работа
- 5-6 часов подготовка
- 1 час спортивный зал / кардио

Все выходные, я сидел за подготовкой, но каждые 3-4 недели ходил на 2-3 дня в хайк, что помогало поддерживать психику в нормальном состоянии. Про рефлексию и состояние выгорания расскажу чуть позже.

Тактика 🤔

Интервью процесс в хеджы был секретом. Я не знал, чего ожидать от интервью. Роль для таких компания новая и непонятная. К тому же я около года не писал на фронтендовом стеке в проде, но сохранял к нему любовь и использовал его в личных пет-проектах. Также, было неизвестно, нужен ли будет литкод (спойлер: нет).

Подготовка 📚

1. Прорешан весь bfe.dev, это заняло у меня около 2 недель + неделю тренировок на скорость (~200 задач)

2. Прорешано ~300 задач на литкоде, второй раз это оказалось сильно легче. В среднем, я решал 10-15 задач в день. Этот шаг занял у меня около 5 недель.

3. Перезаписал видео по System Design, которые опубликовал 2 года назад и дополнил их свежими знаниями и полезными советами, которые получил от подписчиков и на ютубе (скоро выложу обновленные видео). Этот этап занял около недели.

Боевое тестирование 🚀

Идти сразу на интервью было сложно, поэтому решил податься в мелкие и средние компании для тренировки навыков. В сумме отправил резюме в 34 компании, 29 из них ответили, а далее с 23 было назначено интервью. Так как моя виза не привязана к работодателю, компании охотно меня собеседовании. График интервью был плотный, поэтому собеседовался прямо в переговорке в офисе 😂

Результат: 21/23 оффер получен
Минимальный оффер: 50K (Senior Principal Engineer)
Максимальный: 250К (Staff Engineer)

Я не буду перечислять компании сейчас, если интересно, давайте обсудим это в комментариях. Вопросы на интервью были очень разные, в некоторые компаниях кодинг части нет совсем и собес больше про опыт и теорию. Больше всего понравилось, когда давали практическую задачу на 2-3 часа и интервьюер приходил только в начале и в конце. Пропадает стресс совсем. В общем пишите, если нужен разбор задач. Такой рубрики на канале не было

Час Х 😬

Список хеджей куда можно податься фронтендеру достаточно мал, у меня получилось всего 4 компании.

1. Jane Street
2. Two Sigma
3. Jump Trading
4. Citadel

Ответ получил от всех достаточно быстро и интервью были назначены. Процесс интервью занял больше, чем сама подготовка. На все ушло примерно 2 месяца. Удалось ли получить оффер? Какой интервью процесс в этих компаниях? Что там с промо на IC6?

Продолжение следует во второй части, которую опубликую через день. А пока, пиши свои комментарии, буду рад ответить, если есть вопросы. Спасибо, что читаешь 🙏

#interview #career
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9331🔥28🤯9😍2
🪆(Версию поста на русском, можно найти перед этим постом)

Hello everyone, it's been a while since I last posted on my blog, but there's a lot to share! I mentioned on my Instagram that some of the best ideas come to me while I'm on vacation. In March, I embarked on a 6-week vacation to Thailand. It was the perfect opportunity to clear my mind. Eventually, a few ideas popped into my head.

Backstory 🤌

In England, more precisely in London, a sector of the market exists where front-end engineers earn 800k-1M pounds annually 💷 (~50k pounds per month after taxes). Up until a certain point, everything remained in the realm of rumours, until a few friends of mine landed jobs in these companies. As you can guess, it's in the finance sector, specifically Hedge Funds. An idea ignited in my mind: why not give it a shot? And so, a journey lasting 4 months began. As I mentioned earlier, I like my ongoing project at Meta and I wasn't willing to give up on the goal of growing into a Staff role, considering the substantial social capital I had already built within the team and the project.

My primary objectives were as follows :

1. Continuing to work on towards the IC6 level.
2. Getting prepared for the interviews with Hedge Funds.

While the goals themselves weren't particularly challenging, the real hurdle lay in managing my time effectively and I have to keep my preparation in secret since many of colleagues subsribed to my channel (thank you). Throughout these 4 months, my daily schedule resembled the following:

- 8 hours for work
- 5-6 hours allocated to interview preparation
- 1.5 hours dedicated to gym and cardio sessions

I dedicated my weekends entirely to preparation, although I did take breaks every 3-4 weeks for 2-3 days of hiking 🥾. These outdoor breaks were crucial in maintaining my mental well-being. I'll dive into reflections and share about the pre-burnout state a bit later on.

Tactics 🤔

The interview process at hedge funds is a secret. I found myself in a position of uncertainty regarding what to expect during the interview. The role is new and obscure for this kind of company. Plus, I hadn't written on the front-end stack in prod for about a year, but kept a love for it and used it in personal pet projects. Also, it was unknown if a leetcode would be needed (spoiler: no)

Preparation 📚

1. Tackled all bfe.dev problems (~200 problems), a process that spanned about 2 weeks, coupled with an additional week dedicated to speed coding
2. Solved ~300 problems on leetcode. This time it was notably easier than when I did it 2 years ago. On average, I managed to solve 10-15 problems per day. This phase stretched over approximately 5 weeks.
3. Re-recorded the System Design videos I had initially published 2 years ago. These videos were subsequently enhanced with fresh insights and valuable tips derived from subscribers and the YouTube community. (Stay tuned for the updated videos - I'll be posting them soon.) This step was accomplished within about a week.

Combat testing 🚀

It was difficult to go straight to the interview, so I decided to apply to small and medium-sized companies to practise my skills. In total I sent my resume to 34 companies, 29 of them responded, and then 23 of them scheduled interviews. Since my visa is not tied to the employer, companies were willing to interview me.

Result: 21/23 offer received
Minimum: 50K gbp (Senior Principal Engineer)
Maximum: 250K gbp (Staff Engineer)

I won't list the companies now, if interested, let's discuss it in the comments. The interview questions were very different, some companies have no coding part at all and it was more about experience and theory knowledge. I liked most of all when they gave a practical task for 2-3 hours and the interviewer came only at the beginning and at the end. Let me know if you want to see interview problems from these companies.

#interview #career
👍1711👏4
X Time

The list of hedges where a front-end engineer can go is quite small, I’ve applied to four companies.

1. Jane Street.
2. Two Sigma
3. Jump Trading
4. Citadel

I received responses from all of them quite quickly and interviews were scheduled. The interview process took longer than the preparation itself. Everything took about 2 months to complete. Was I successful in getting an offer? What is the interview process like with these companies? What's up with the promo on IC6?

The continuation follows in part 2, which I'll post in a day. In the meantime, write your comments, I'll be happy to answer if you have any questions. Thank you for being my subscriber 🙂

#interview #career
👍2811🔥7🤩1💅1
Задачки с собеседований - Серия 1

Привет! Пора выкладывать задачки с собеседований, как и обещал. Два раза неделю, буду выкладывать по 2 задачи.
График следующий - понедельник и пятница. Задачек около 20, все задачки потом выложу большим списком. Делитесь вашими решениями и помогайте коллегам! Интереса ради, решения будут открываться позже 🙂

Самое красивое и лучше решение осветим на всю аудиторию 👏

Поехали! 🚀
——
Interview problems - Episode 1

Hi! It's time to post the interview tasks, as promised. I will be posting two tasks twice a week, specifically on Mondays and Fridays. There will be approximately 20 tasks in total, all of which will be listed together at a later time. Please share your solutions and assist your colleagues. For added intrigue, the solutions will be revealed at a later point 🙂

The most elegant and optimal solution will be showcased to the entire audience 👏

Let's get started 🚀
——
Task 1: Implement big-integer addition / substraction
Source: HFT
Time limit: 60 min

Task 2: Implement fifteen-puzzle game
Source: HFT
Time limit: 45 min

Requirements:
1. Vanila / React implementation
2. Track Number of steps and win condition
3. Basic CSS styles
4. Reset game

#interview #hft

YouTube 📹 ——— Medium 📑 ——— LinkedIn 👨‍💻
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥34👍155🤯1
Привет! Выкладываю еще 2 задачки.
В следующем посте оценим решения из комментов для всех 4ех задач!
——
Hi! I'm posting 2 more problems.
In the next post we will evaluate the solutions from the comments for all 4 problems!

Let's go! 🚀

——
Task 3: Implement Tetris Engine
Source: HFT
Time limit: 60 min (+20 min follow up)

Task 4: Promise batch
Source: Big Tech
Time limit: 20 min

⚠️ Note: Typing has a mistake: instead of having Array of promised it should be
Array<() => Promise<any>>
——

#interview #hft #bigtech

YouTube 📹 ——— Medium 📑 ——— LinkedIn 👨‍💻
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍151
Frontend System Design - Season 2, Episode 3 🚀

Привет! 👋
Давненько не было видео по фронтендовому систем дизайну. Вопрос про автокомплит у меня спросили в сумме 5 раз, поэтому я решил перезаписать видео, включить больше технических деталей, рассмотреть использование префиксного дерева и обработку конкурирующих запросов.

Надеюсь тебе понравится ремастер старого видео!
Пиши комменты, всегда рад на них ответить!

—————
Hello there! 👋
It's been a while since I last posted a video on frontend system design. I've been asked the autocomplete question a total of 5 times during my interview season, so I decided to re-record the video, include more technical details, explore the use of a prefix tree, and address the issue of handling competing requests.

I hope you enjoy this remastered version of an older video!
Please leave comments; I'm always happy to respond to them!


#systemdesign #frontend #interview

https://www.youtube.com/watch?v=9mjsRrJYOWE&lc=UgytrAcaq2diqEzj-hx4AaABAg

YouTube 📹 ——— Medium 📑 ——— LinkedIn 👨‍💻
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3817🔥13🤝4👌2