Костя 8Бит | Fullstack AI
1.06K subscribers
91 photos
2 videos
2 files
64 links
Канал для разработчиков Frontend & Backend с полезными материалами по разработке, поиску работы и работе с AI.

Я 8 лет в веб-разработке, сейчас работаю Lead AI Fullstack Engineer и внедряю AI агентов.
@kostya_xxxx

Курс по AI: Kostya-it.pro/ai
Download Telegram
Feature-Sliced Design (FSD) - современная методология проектирования архитектуры фронтенд-приложений, ориентированная на разделение кода на функциональные модули или слайсы (slices).

👉 Официальная документация 👈

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

💪 Преимущества FSD:
Масштабируемость - легко масштабировать большой проект
Модульность - приложение делится на независимые модули, которые можно разрабатывать и тестировать отдельно
Слои - специальные слои, каждый из которых отвечает за свой уровень абстракции

Подбор материалов:
Копаем глубже в Feature-Sliced Design / Александр Моргунов Samokat.tech
Feature-Sliced Design: опыт применения фронтенд-архитектуры в React-приложении / Антон Усков VK Tech
Архитектура в React: правильная структура приложения [Frontend]
НУ ЧЕ ПАЦАНЫ, FEATURE SLICED DESIGN?
👍2🔥1
❓❓Что блокирует основной поток в JavaScript? ❓❓
Anonymous Quiz
37%
setTimeout
43%
while
13%
promise
7%
console.log
❤1
👍Вопросы с реального собеседования на 350к:
(около 40 минут на тех. часть)

1. Сборщик мусора в JavaScript. В каких случаях могут быть утечки?
2. Что такое Event Loop? Как работают микро и макро таски?
3. Что такое FSD? Какие есть другие виды архитектуры? Сравните.
4. Что такое tree shaking? Расскажите про оптимизацию бандла.
5. Способы оптимизации react приложений.
6. Какие принципы у SOLID?
7. Как применяется принцип dependency inversion на практике в javascript?
8. Какие существуют паттерны проектирования?
9. Какие паттерны применяются на практике в react приложениях?
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤1
Какие есть типы данных в JavaScript ?

1️⃣ String (Строка): Представляет собой последовательность символов и используется для работы с текстом. Пример: "Hello, world!".

2️⃣ Number (Число): Означает числовое значение, которое может быть целым или дробным. Примеры: 52, 3.14. Также включает специальные значения, такие как Infinity, -Infinity и NaN (Not-a-Number, результат некорректной математической операции).

3️⃣ BigInt: Используется для представления целых чисел произвольной длины, превышающих пределы Number. Пример: 9009999554440991n.

4️⃣Boolean (Логический тип): Представляет два значения: true (истина) и false (ложь), используемые для выполнения логических операций.

5️⃣ undefined: Обозначает отсутствие значения. Переменная, которой не было присвоено значение, автоматически получает значение undefined.

6️⃣ null: Также обозначает отсутствие значения, но, в отличие от undefined, присваивается переменной явно, чтобы указать на отсутствие значения.

7️⃣ Symbol: Представляет уникальный и неизменяемый идентификатор, часто используемый для создания уникальных ключей объектов. Каждый созданный Symbol уникален и не совпадает с другими Symbol.

8️⃣ Object (Объектный тип данных): Объекты в JavaScript представляют собой набор пар "ключ-значение", где ключами могут быть строки или символы (Symbols), а значениями могут быть любые типы данных, включая другие объекты. Они позволяет хранить коллекции различных значений и более сложные структуры данных. Обьектами являются массивы [], функции function fn() {} , даты let now = new Date() и сами обьекты {}
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
💪 Вчера получил оффер на 4к$ 💵


❓❓Вопросы с собеседования ❓❓

1. Чем отличаются http от https?
2. Чем отличается get запрос от post?
3. При каком запросе происходит кеширование?
4. Что такое preflight запрос?
5. Что такое CORS? Кто прописывает доступность CORS?
6. Что такое css-in-js? Приведи примеры. Особенности css-in-js?
7. Специфичность селекторов
8. Чей вес селектора больше inline-style или !important?
9. Этапы рендера в react приложении?
10. Бандл приложение. Чем формируется? Для чего нужен?
11. Способы оптимизации бандла
12. Расскажите про ваш опыт настройки сборщика приложений
13. Что такое микро-фронтенды?
14. JavaScript однопоточный или многопоточный?
15. Есть ли возможность сделать дополнительный поток? Вебворкеры.
16. Что позволяет писать асинхронный код в JS?
17. Что такое микро и макротаски?
18. Какие проблемы можем получить с большим количеством замыканий?
19. Сборщик мусора в JS
20. Концепция жизненного цикла в классовых компонентах
21. Как называется метод аналога PureComponent?
22. Как использовать useCallback?
23. Как использовать useMemo?
24. Как использовать useEffect?
25. В чем отличие useEffect от useLayoutEffect?
26. Контролируемые и неконтролируемые компоненты. Расскажите отличие
27. useRef что это такое и как его использовать?
28. Для чего придумали стейт-менеджеры (redux, mobx и тд)
29. Какую проблему решает redux?

»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»
30. Кейс: приходит джуниор или миддл с оценкой задачи в 50 часов. Ваши действия?
31. Расскажите ваш опыт управления командой

»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9
Зарплаты фронтенд разработчиков
(в РФ)

👼 Junior:
30 000 - 120 000
👨‍🏫 Middle:
100 000 - 250 000
👨‍💻 Middle+:
170 000 - 300 000
🥷 Senior: 280 000 - 450 000
🧔‍♂️ Team lead: 350 000 - 700 000
⚡6
Как я поднял оффер с 350 до 420 в 2021 или о важности переговоров

Несколько лет назад я брал менторинг у очень опытного лида. Он мне советовал множество различных книг по карьере и ИТ. Одна из них Договориться можно обо всем! Как добиваться максимума в любых переговорах. Прочитав ее, благополучно забыл на несколько месяцев.

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

Параллельно прошел другой собес в банк (но там я не хотел работать). Получил оффер в 380 (+ премия) ~= 400 и пошел торговаться с компанией А. Мой сообщение было примерно такое:

Мне очень понравился ваш проект и команда, я бы хотел с вами работать, но мне параллельно прислали оффер на 420(!). Очень с вами хочется работать, но по деньгам тоже не хочется проигрывать. Можем обсудить это и приблизиться к этой сумме?


Итого: оффер на 420 + квартальная премия
🔥6👏1
Фронтенд разработка 2016 vs 2024
😭5👨‍💻2
Что выведет console.log('2' * 3) ?
Anonymous Quiz
15%
23
64%
6
6%
8
15%
NaN
Что выведет console.log('22' + 33) ?
Anonymous Quiz
72%
'2233'
19%
55
8%
'55'
0%
NaN
JavaScript: использование методов массивов в реальной жизни и необходимость их изучения.
( ч1. добавление/удаление элементов )

push: push(…items)– добавляет элементы в конец массива
частый кейс
необходимость изучения: 100%

pop: pop() – удаляет элемент из конца массива
нечастый кейс
необходимость изучения: 20%

shift: shift() – извлекает элемент из начала массива
гиперредкий кейс
необходимость изучения 0%

unshift: unshift(...items) – добавляет элементы в начало
гиперредкий кейс
необходимость изучения 0%

splice: splice(start[, deleteCount, elem1, ..., elemN]) – добавляет, удаляет и заменяет элементы
гиперредкий кейс
необходимость изучения 0%

slice: slice([start], [end]) – возвращает новый массив, в который копирует все элементы с индекса start до end, тоже самое что и splice, но в разы проще
частый кейс
необходимость изучения 100%

concat: concat(arg1, arg2...) – создаёт новый массив, в который копирует данные из других массивов и дополнительные значения, на текущий момент можно заменить оператором [...spread]
нечастый кейс
необходимость изучения 20%
👍5❤1💯1
Никогда не проходи тестовое задание (бесплатно)

За свою многолетнюю карьеру делал 15-20 тестовых. Абсолютно неблагодарная работа. Практически никогда не было позитивного фидбека. Ревьювер кода всегда смотрит со своей колокольни и не всегда она будет смотреть в вашу пользу. У каждого свое понимание «чистого» кода.

Тестовое занимает больше часа - в топку! Если компания не готова потратить время на тебя, почему ты должен тратить время на нее? В нормальных компаниях время на устройство вместе с соискателем делится примерно 50/50.

Последний раз делал тестовое пару лет назад на сеньорскую позицию с хорошими деньгами и условиями.
При просмотре тестового с лидом той компании оказалось, что для него норм писать костыли по проекту, писать на реакте классовые и функциональные компоненты одновременно чтобы использовать методы из обоих типов, лезть в instance компонета и менять там значения. На мои возражения соблюдения консистентности и кода без костылей человек сказал:
«по-хорошему надо бы, но мне удобнее так»
после этого меня побрили.
👍6