Кодовая база
1.3K subscribers
23 photos
1 video
50 links
База во фронтенд разработке.

Написать в личку: https://t.me/devmargooo
Download Telegram
Помните, я писала о том, как делать сопроводительные на hh? В общем, можно больше не тратить на это время, смысл сопроводительных окончательно утрачен.
😁5🤡4🤣1
Forwarded from HR-эксперт
Кхэ-Кхэ ру выкатил обновление для соискателей и представил новую функцию "AI-генерация сопроводительного письма"🤦🏻‍♂️

Вот теперь точно AI будет отбирать AI... а работать-то кто потом будет?🫣
🥴13🤣2👀2
Дублирование на уровне кода - один из основных источников технического долга. Говоришь себе "ну сейчас быстро сделаю копи-паст, а потом на этапе рефакторинга раскидаю как надо".

Обычно этап рефакторинга так и не наступает, поэтому в коде остается несколько источников правды, которые в будущем создают проблемы.

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

Легаси неизбежно, поэтому хорошего кода в мире очень мало, а плохого сколько угодно много. Получается, что с большой вероятностью код, который был использован при обучении LLM, был не самого лучшего качества, а значит, это мы с вами, ленясь выполнять своевременный рефакторинг, научили ИИ "плохому".

Может быть, это и к лучшему, потому что мы с вами еще можем научиться красиво и грамотно писать код, проектировать и продумывать наши системы, а ИИ будет продолжать плодить легаси.

Воистину, лень оказалась лучшей инвестицией, которая поможет нам конкурировать с ИИ.
👏4🔥1😁1
Составила чек-лист подготовки к собеседованию на позицию frontend-разработчика. Забирайте себе и шерьте друзьям🫶

🔘HTML & CSS

- Семантическая верстка
- Box Model
- Специфичность селекторов
- Как отцентрировать div
- Position, display, box-sizing
- Opacity, visibility
- Браузерный рендеринг: layout /paint /composition
- Flexbox, grid

🔘 JavaScript

- Типы данных
- Виды функций (arrow, function declaration, function expression)
- Event loop
- Промисы, async/await
- Замыкания, лексические окружения
- This
- Область видимости, hoisting
- Сборщик мусора
- Утечки памяти, способы их обнаружения и устранения

🔘Браузеры

- Всплытие и перехват событий
- preventDefault, stopPropagation
- Хранилища: localStorage, sessionStorage, IndexDB, cookie
- Что происходит, когда вы вводите адрес сайта и нажимаете Enter

🔘HTTP

- HTTP 1.1 vs HTTP 2.0
- Вебсокеты, SSE
- Методы HTTP
- Rest API
- Статусы HTTP ответов
- CORS

🔘Безопасность

- XSS
- CSRF

🔘 React

- Архитектура Fiber, Virtual DOM, Reconciliation
- Ключи (key)
- Мемоизация
- useLayoutEffect, useEffect
- useRef
- Почему компонент рендерится

🔘TypeScript

- Чем отличается type от interface
- Утилитарные типы (перечислить несколько)
- Type guards

🔘 Git

- Merge vs rebase
- Git flow
- Trunk bases development

🔘Архитектура

- Микрофронтенды, module federation
- Стейт менеджеры
- FSD

#чеклист #собеседования
Please open Telegram to view this post
VIEW IN TELEGRAM
19👍9🔥6🤡2❤‍🔥1👎1
Вот такую вакансию увидела на канале Леси и хочу немного прокомментировать.

За DE не скажу, буду говорить о моей профессиональной сфере — веб-разработке.

“Нужен человек полностью соответствующий нашим ожиданиям, а НЕ который учится на ходу.” — довольно популярная мечта у работодателей. Многих раздражает, что новый сотрудник какое-то время онбордится в проект и разбирается во всех его нюансах, и только потом начинает предлагать какие-то здравые идеи. Отчасти пожелания к годам опыта связаны с этим фактором: работодателям кажется, что если придет опытный специалист, он телепатически разберется в нюансах проекта и вытащит его из кризиса прямзавтра (или ещевчера). По этой же причине не очень любят нанимать джунов: “нужен сотрудник, который сразу приносит пользу, а не которого надо обучать” (с).

К сожалению, это несбыточные мечты. Основная сложность коммерческой разработки не заключается в самом программировании. Большую часть времени на новом месте занимает изучение проекта: его архитектуры, бизнес-логики, ограничений, процессов и исторически сложившихся решений.

Самое сложное в коммерческой разработке — это разобраться в нюансах конкретного проекта. Написать код может кто угодно при условии, что известно, как он должен работать. Проблема в том, что в коммерческой разработке никогда не известно, как именно код должен работать и какие ограничения необходимы. Это зависит от конкретного проекта, то есть от особенностей бизнеса, которые определяются текущим законодательством, экономической ситуацией, решением руководства и отношениями между отделами. Разобраться в этом и есть самое сложное, с чем сталкивается рядовой разработчик, приходя на новое место. Именно поэтому, кстати, для разработчиков имеют такое большое значение документация к проекту и читаемость кода.

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

Во фронтенде человек, прошедший обучение по современных технологиям (HTML, JavaScript, TypeScript, какой-нибудь фреймворк) с хорошим знанием CS (профильной вышкой) и математическим мышлением (умением выделять абстракции и оперировать ими) становится полноценным бойцом (то есть миддлом) спустя 3-6 месяцев работы. Что касается ребят, которым программирование дается сложнее (ну, скажем условно, “гуманитариев”) и у которых нет профильной вышки, то такой человек станет полноценным миддлом спустя год, максимум полтора года работы. Я видела десятки таких примеров. И не только я: до повсеместной моды на накрутку опыта большинство компаний искали фронтендеров миддлов с опытом от 1 года, потому что большинству моих коллег известно, что после года опыта 99% фронтендеров становятся полноценными бойцами, даже если у них нет вышки и “математического склада ума”.

Таким образом, для того, чтобы быстро свитчиться между технологиями и проектами, вам не нужно много опыта. Надеюсь, я смогла проиллюстрировать выше, что в коммерческом программировании нет ничего сложного и набивать “опыт” в этом — это то же самое, что набивать опыт в ходьбе по улице. Мы же не говорим, что 30-летние люди лучше ходят по улице, чем 20-летние? Это абсурд. И те и другие вроде не падают :)

Для того, чтобы быстро свитчиться между технологиями и проектами, вам нужна база CS (алгоритмы и структуры данных, паттерны проектирования, операционные системы, сети) и архитектурные навыки. Это научит вас быстро и точно соображать, а это в нашем деле — самое главное.
116👍10🔥4👎1🤬1💩1
🎯 КОГО ИЩЕМ:
1. Data Engineer с опытом работы с инфраструктурой AI на AWS и GCP.
2. Нужны «рабочие руки», а НЕ технический менеджер.
3. Нужен человек полностью соответствующий нашим ожиданиям, а НЕ который учится на ходу.
4. Со знанием разговорного английского языка (English-speaking team).

⛔️ КТО НЕ ПОДОЙДЁТ:
1. Кандидаты с преобладающим или последним опытом в роли технических менеджеров: Team Lead, CTO и т.п. – это нерелевантный данной позиции опыт работы. Мы ищем «рабочие руки», а НЕ технического менеджера.
2. Кандидаты с преобладающим или последним опытом работы на фрилансе.
3. Кандидаты с низким уровнем разговорного английского языка.

🏅 ТРЕБОВАНИЯ:
1. Опыт работы 6+ лет в роли Data Engineer.
2. Опыт работы 2+ года с AI-инфраструктурой на GCP и AWS.
3. Опыт работы 4+ года с ML.
4. Опыт работы 3+ года с GCP Vertex AI (GEAP).
5. Опыт работы 2+ года с Amazon SageMaker.
6. Опыт работы 5+ лет с Kubernetes.
7. Опыт работы 8+ лет с Python.
8. РАЗГОВОРНЫЙ английский язык на уровне C1+.

🧑🏽‍💻 ОСНОВНАЯ ЗАДАЧА:
Обеспечить бесшовные интеграции (сотни интеграций) в сфере AI, их надёжность и быстродействие.

⭐️ МЫ ПРЕДЛАГАЕМ:
1. Конкурентоспособную заработную плату.
2. Полностью remote.
3. Гибкий график работы: одна команда в Казахстане работает по UTC+5, вторая команда в UK – по UTC+1. Взаимодействие с обеими командами.
4. Работа в продуктовой компании.

🔎 ЭТАПЫ ОТБОРА ВКЛЮЧАЮТ:
1. Real-time coding сессия с расшариванием экрана.
2. Due diligence.

Наше любимое, а еще гибкий график подразумевает 12-часовой рабочий день для взаимодействия с обеими командами ☺️

Чтобы научиться видеть ред флаги еще на этапе прочтения вакансии — переходите сюда @nabokapro_bot
🤣4😭21
Infer

Infer для многих конструкция поистине инфернальная. 

Infer объявляет переменную типа, в которую тип будет выведен позже. Чтобы понять, как работать с infer, нужно учесть, что он выводит тип исходя из соответствия шаблону. Поэтому в большинстве случаев нужно написать шаблон, куда вы подставите infer вместо интересующего вас типа.

Например, вы хотите вывести тип результата функции. Для примера возьмем функцию без аргументов, чтобы они нас не путали, они нам сейчас не нужны. Такой тип может быть описан вот так: () => number. Или так: () => { x: string }. Мы не знаем, что вернется из функции, и нас именно это как раз и интересует. Поэтому получается () => infer U (1️⃣). Вот этот U нам и нужен и как результат type alias (2️⃣). 

Далее наш шаблон, который мы получили на шаге 1️⃣, мы подставляем после extends, а в true кейс подставляем желаемый результат, который мы получили на шаге 2️⃣. Получается

type ReturnType<T> = T extends () => infer R ? R : 


Надо что-то записать в false-кейс, это будет тип, который мы получаем, если параметр типа не будет соответствовать нашему условию. Нам не сильно интересен этот тип, нам интересны только те, которые соответствуют нашему условию. Поэтому здесь используем never. Итого получаем

type ReturnType<T> = T extends () => infer R ? R : never;


#typescript
Please open Telegram to view this post
VIEW IN TELEGRAM
6👍2🔥2
И снова Infer

По вашим просьбам сегодня разберем еще пример с infer. Я покажу, какие умозаключения я делаю, когда описываю типы при помощи этого ключевого слова.

▶️Задача: вывести тип первого аргумента функции.

const logUser = (user: 'user' | 'admin', lastLogin: Date) => {...}  // 'user' | 'admin';

const repeatChat = (count: number, char: string) => {...} // number

const getStringLength = (str: string) => {...} // string


Заметим, что в функции может быть сколько угодно аргументов, но нас интересует только первый. Поэтому имеет смысл разбить аргументы на две группы: первый и все остальные, которые нас не интересуют. В JavaScript есть очень удобный оператор rest, который позволяет нам собрать все неинтересные нам аргументы в кучу. 

Давайте для примера попробуем описать тип Func, которым можно описать все наши функции из примера выше, и пока будем использовать везде any. Наша задача — просто побить сигнатуру на логические группы. В параметрах выделим сначала первый x (он-то нам и интересен), затем все остальные аргументы соберем в параметр rest. Вернем any — мы договорились пока что везде использовать any. У меня получилось так:

type Func = (x: any, ...rest: any) => any;


Теперь, глядя на этот шаблон, легко поставить infer туда, куда нам интересно. Псевдокодом получится вот так:

type Func = (x: infer U, ...rest: any) => any;


Осталось написать наш тип-дженерик по общему алгоритму: проверяем, соответствует ли параметр типа нашему шаблону, если да, возвращаем интересный нам U, иначе never.

type FirstArg<T> =
  T extends (x: infer U, ...args: any) => any
    ? U
    : never;


#typescript

🔜 Канал в MAX
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥4👍3😁1
🚜И снова про race conditions

Я уже писала про то, как частые запросы на сервер (например, при вводе поисковой строки) могут вызывать race conditions. Однако мы тогда не говорили о том, что сигнал аборт контроллера может сработать после успешного запроса, но до установки данных. Это возможно за счет того, что движок вызывает асинхронные функции не сразу, а только после завершения некоторого события (например, получения ответа от сервера).

Поэтому, когда вы пишете await или then, помните про то, что между кодом до await и после может вклиниться какой-то другой код, который может заабортить ваш сигнал 🙂 Например, в примере ниже до await(loadAsyncWork(data)); наш сигнал, который мы получаем снаружи, может быть еще не aborted, а вот после await(loadAsyncWork(data)); — уже да:


async function loadData({signal, setData}) {
const res = await fetch(`/api/data?query=${query}`, { signal }) // здесь сигнал еще не aborted
const data = await res.json();
await loadAsyncWork(data); // операция выполняется долго, движок в это время может выполнять другие функции

setData(data) // а вот здесь уже aborted
}


Если для нас важна актуальность данных (мы всегда хотим отображать только самые актуальные данные с сервера), то в этом случае мы должны дополнительно проверить сигнал перед вставкой:


async function loadData({signal, setData}) {
const res = await fetch(`/api/data?query=${query}`, { signal })
const data = await res.json();
await loadAsyncWork(data);

if (!signal.aborted) {
setData(data)
}

}


#raceconditions

🔜 Канал в MAX
Please open Telegram to view this post
VIEW IN TELEGRAM
6👍6🔥4
Что делать, если валят на собесе и как пройти собес, если вы не помните всю спеку наизусть

Ситуации, когда разработчики с хорошим опытом и сильными навыками не проходят  собеседование, встречаются гораздо чаще, чем кажется. Обычно проблема заключается в коммуникации. 

Кандидаты почему-то думают, что на собеседовании они должны поразить интервьюера своими энциклопедическими знаниями и феноменальной памятью. Из-за этого, забыв какую-нибудь мелочь, вроде порядка аргументов у стандартной функции или точное название метода, начинают паниковать и надолго застревают. В итоге получают фидбек  “застрял на мелочи и не смог продвинуться дальше”. 

В большинстве случаев интервьюер оценивает совсем не это. Ему важно увидеть, что вы умеете программировать, рассуждать и решать технические задачи. Ниже опишу некоторые сложности, с которыми часто сталкиваются кандидаты:

1️⃣Вы не поняли смысл задачи и что от вас хотят

Проговорите условие устно: “я правильно понимаю, что в этой задаче требуется сделать текстовый инпут, получать данные с сервера по поисковой строке и отображать их в списке ниже”? Вы синхронизируетесь с интервьюером, поймете лучше, чего от вас хотят, а интервьюер, в свою очередь, поймет, что вы смогли понять задание и это ваш плюсик в карму 🙂

2️⃣Вы забыли стандартный метод, порядок аргументов в нем или возвращаемое значение

Спросите у интервьюера! Прямо говорите: блин, есть метод, который позволяет свернуть массив в одно значение-аккумулятор, не помню, как называется… Интервьюер подскажет, а если не подскажет, смело просите погуглить. И гуглите. Только экран шарьте, чтобы интервьюер понимал, что вы делаете.

3️⃣ В задании что-то сделано не так, как вы привыкли, и вы не можете сообразить, как использовать это новое и непривычное

Например, вы привыкли, что запросы на сервер вынесены в хук, а тут обычная функция. Или наоборот. Решение: просто скажите интервьюеру, что вас смущает! Вроде: хм, я вижу, тут запрос сделан функцией, а я обычно использую хук, сейчас попробую понять, как использовать функцию, а не хук… Так интервьюер по крайней мере поймет, что у вас происходит в данный момент, с какой сложностью вы столкнулись и на чем застряли.

📌 Как видите, все сводится к тому, что с интервьюером надо коммуницировать. 

Интервьюеры часто реджектят не слабых, а непонятных кандидатов: пришел, потупил, помолчал, на чем-то застрял, ничего не сделал, хз что за чел. Или пришел, помолчал, все решил, но ничего не объяснил, мутный какой-то, наверное списал все. Что происходит? Что именно не получается? Он вообще знает или нет? Затащит продакшн таски? Может да, а может нет. Непонятно. Ваша задача — быть ПОНЯТНЫМ на собеседовании. Интервьюер должен понять, что вы делаете и как вы делаете. Для этого надо коммуницировать и быть искренним.

Всем удачных собеседований!❤️

#собеседования

🔜 Канал в MAX
Please open Telegram to view this post
VIEW IN TELEGRAM
18🔥4👍3
👊 Про коммуникацию и софт скиллы

Мои давние друзья знают, что к разговорам про софт скиллы я отношусь скептически. Причина  в размытости этого понятия (никто толком не знает, что такое эти самые софт скиллы и что в них входит) и в отсутствии понятной шкалы, которой их можно измерить. С хард скиллами все проще: я могу пройти тест по JavaScript и получить, скажем, 7 из 10, а с софт скиллами так не получится.

Лично я считаю, что почти половина из того, что почему-то называют “софт скиллами”, относится к воспитанию человека, а еще почти половина — к характеру. Например, ответственность. Не знаю, почему ответственность вдруг стала “навыком”, в мои времена ответственность прививали родители и она была частью взросления и воспитания. Или, скажем, “нетоксичность”. Люди “токсично” реагируют на те или иные раздражители и, на мой взгляд, это зона компетенции психологов, но никак не “навык”, который можно развивать.

Но есть “софт скиллы”, которые я считаю полезными. Например, навык презентовать свои мысли и идеи.

Проект — результат работы команды. Чтобы делать проект командой, необходимо, чтобы все понимали, что мы, собственно, делаем. Поэтому, если возникает какая-то идея, ее надо объяснить коллегам. Давайте посмотрим на этот мягкий навык повнимательнее.

Предположим, я придумала архитектуру фронтенд приложения. Я решила, что у меня будет слой данных, который будет синхронизироваться с апи, слой UI, библиотека переиспользуемых компонентов, шина и сервисы, которые обновляют данные. Прекрасно. Теперь мне надо донести свои идеи до коллег, чтобы они поняли, за что отвечает шина, за что отвечают сервисы, какой код должен быть в каждом месте и что именно из этого надо использовать в разных местах UI. 

Чтобы донести свою идею, мне необходимо:
Во-первых, определить существенные признаки придуманных мной элементов системы. То есть, с точки зрения формальной логики — выделить понятия. 
Во-вторых, определить связи между элементами системы. 

Поскольку определение понятия — процесс трудоемкий, проще всего этого сделать, опираясь на плечи атлантов, то есть предшественников. С одной стороны, мы собираем все свои мысли в кучу и формируем понятие, а с другой стороны — само понятие позволяет нам формировать наши идеи, отшлифовать их, так как понятие уже содержит идеи. Процесс обоюдный. Сравните: “нам нужен компонент, через который все части системы смогут обмениваться информацией и получать сообщения, чтобы как-то на них отреагировать, и это будет общий компонент, ну потому что эээээ…. я так вижу” и “нам нужна шина”. Второй тезис гораздо более емкий, он быстрее и точнее позволяет доносить свои идеи до коллег и окружения. Если первое объяснение более расплывчатое и позволяет каждому члену команды понять его в силу своих желаний и возможностей, то второе — гораздо более точное.

Однако для того, чтобы пользоваться идеями предшественников как фундаментом своих собственных идей, необходимо эти идеи предшественников знать. Получается, что для того, чтобы объяснить коллеге Васе, как работает код в твоем пулл реквесте, полезно читать книги о разработке, особенно известных авторов (потому что их идеи известны широкому кругу лиц), а это в нашем комьюнити уже считается хардами.

Вот так и получается, что этот софт скилл — это на самом деле хард скилл. Если у вас сильные харды, то вы легко отделяете одни паттерны и одни понятия от других и сможете ясно и четко объяснить свои идеи коллегам. А если харды слабые, то вы сами видите эту картину как через мутное стеклышко и никому ничего объяснить не сможете.

🔜 Канал в MAX

#softskills
Please open Telegram to view this post
VIEW IN TELEGRAM
9👍4💯4👎1🦄1