Render Props

Render Props в React — это паттерн для повторного использования логики между компонентами. Вместо того чтобы делать компоненты "умными" или использовать HOC (Higher-Order Components), компонент с Render Props использует функцию для рендеринга, передаваемую через проп.

Зачем нужно?

✔️ Повторное использование логики: Логику можно вынести в один компонент и использовать с разным UI.
✔️ Гибкость: Позволяет передавать любую JSX разметку, что делает компонент более универсальным.

#frontend #react

Event loop: Как запомнить микро- и макротаски

❗️ Микротаски всегда выполняются сразу после текущей операции и всегда до следующей макротаски.

⚡️ Микротаски имеют приоритет. Как только появляется микротаска, она всегда выполняется первой.

⚡️ Макротаски — крупные задачи, такие как setTimeout, setInterval, выполнение основного кода скрипта и обработка событий. Они выполняются по очереди из своей очереди, но только после выполнения всех микротасок.

⚡️ Когда выполняется макротаска, и в процессе возникают микротаски (например, через Promise), все микротаски должны быть выполнены до того, как начнется следующая макротаска.

Микротаски:
- Promise: Все колбеки, добавленные с помощью then, catch, finally.
- process.nextTick: В Node.js используется для выполнения задачи до следующего прохода в цикле событий.
- MutationObserver: Колбеки, которые срабатывают при изменении DOM.

Макротаски:
- setTimeout и setInterval: Асинхронные вызовы с задержкой.
- setImmediate: (в Node.js) Вызовы, которые выполняются на следующей итерации цикла событий, после текущей макротаски.
- I/O задачи: Например, операции ввода/вывода (запросы к сети, чтение файлов).
- UI Rendering: Обновления пользовательского интерфейса (в браузере).
- Основной код скрипта: Тот код, который запускается в начале выполнения программы.

#frontend #javanoscript #eventloop

Стрим/Ответы на вопросы

Дата и время: 4 сентября, Среда, 19:00 мск

Место: YouTube

Поболтаем с вами, отвечу на вопросы, расскажу про рынок, про собеседования и тд.

📌 Сюда можете отправить вопрос: https://forms.gle/nS3c2cgaV43ssvLE8

Так же вопросы можно задавать на стриме.

Всем привет!

Если вы ищете работу, проходите собеседования или откликаетесь на вакансии, то у меня есть для вас два полезных чата:

💼 Чат с разбором собеседований. В этом чате активные кандидаты делятся записями своих собеседований: скрининги, технические интервью и многое другое. Затем я и другие участники чата разбираем эти записи, даем советы и рекомендации. Уже накопилось много полезных записей, и в чате всегда есть такие же, как вы, кто активно ищет работу. Это отличная возможность получить обратную связь и дополнительную мотивацию для прохождения собеседований. Подробнее читайте в посте.

🤓 Чат для просмотра собеседований. Этот чат не требует вашей активности. Здесь вы можете просто наблюдать за записями собеседований в интересующей вас сфере: уровни зарплат, компании, актуальные интервью и многое другое. Это помогает лучше понять, как проходят собеседования в разных компаниях и более эффективно к ним готовиться. Чат постоянно пополняется новыми материалами. Подробнее в посте.

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

👍 Не реклама, а рекомендация

Разница между inline, block и inline-block элементами в CSS

📌 inline

Нельзя задавать ширину (width) и высоту (height) для inline элементов. Они занимают только ту ширину, которая необходима для их содержимого. Например, <span> или <a> занимают столько места, сколько нужно для текста или вложенных элементов.

Отступы (margin) и внутренние отступы (padding) работают, но только горизонтальные. Вертикальные отступы часто игнорируются или не влияют на размещение элементов. Это связано с тем, что inline элементы не начинают новую строку и их вертикальные отступы могут не отображаться как ожидается.

📌 block

Можно задавать ширину и высоту для block элементов. Они занимают всю доступную ширину родительского элемента по умолчанию и начинают новую строку.

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

📌 inline-block

Можно задавать ширину и высоту для inline-block элементов. Эти элементы занимают только ту ширину, которая необходима для их содержимого, но при этом можно установить конкретные размеры.

Все отступы и внутренние отступы работают так же, как и для block элементов. inline-block элементы будут расположены в строке, как inline, но поддерживают высоту и ширину, как block.

inline: <a>, <span>, <strong>, <em>, <img>, <b>, <i>, <abbr>, <cite>

block: <div>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <li>, <form>, <header>, <footer>, <section>, <article>, <nav>, <table>

inline-block: <button>, <input>, <label>, <img>, <select>, <textarea>

#frontend #css

🔝 Задача из Альфа Банк: Сортировка и группировка операций по дате

Позиция: Мидл/Мидл+/Сеньор

Вилка: 250к-350к

Опыт в резюме: 4 года

У вас есть массив объектов operations, представляющих операции с датами и суммами. Необходимо:

1. Отсортировать массив операций по датам.
2. Сгруппировать операции по году.
3. Представить результат в виде объекта, где ключи — это годы, а значения — массивы строк с датами в формате MM-DD, отсортированные по возрастанию.

Пример ожидаемого результата:

const result = {
  "2017": [
    "01-31",
    "03-31",
    "05-31",
    "07-31",
    "08-22",
    "09-30",
    "12-31"
  ],
  "2018": [
    "02-28",
    "03-31",
    "04-14",
    "07-31",
    "11-30"
  ]
};

Стартовый код:

const operations = [
   { "date": "2017-07-31", "amount": "5422" },
   { "date": "2017-03-31", "amount": "5220" },
   { "date": "2017-05-31", "amount": "5365" },
   { "date": "2017-08-22", "amount": "5451" },
   { "date": "2017-09-30", "amount": "5303" },
   { "date": "2017-01-31", "amount": "5545" },
   { "date": "2018-07-31", "amount": "5589" },
   { "date": "2018-11-30", "amount": "5567" },
   { "date": "2017-12-31", "amount": "5597" },
   { "date": "2018-03-31", "amount": "5359" },
   { "date": "2018-02-28", "amount": "5082" },
   { "date": "2018-04-14", "amount": "2567" }
];

function sortOperations(operations) {
  // Ваша реализация здесь
}

#frontend #interview

Друзья, поздравляю вас с Днем Программиста! 🎉

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

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

Вдохновения, терпения и удачи вам! Пусть каждый день будет шагом к вашей мечте!

С наилучшими пожеланиями,
Reactify 👩‍💻

👍 Менторство

Чем отличаются циклы for...in и for...of в JavaScript

for...in
Цикл for...in используется для перебора свойств объекта (ключей), а также всех индексов массива, если он используется с массивом. Это важно: for...in перебирает ключи (индексы массива), а не значения.

Пример с объектом:

const car = {
  make: 'Toyota',
  model: 'Corolla',
  year: 2020
};

for (const key in car) {
  console.log(key, car[key]);
}

// make Toyota
// model Corolla
// year 2020

Пример с массивом:

const fruits = ['apple', 'banana', 'cherry'];

for (const index in fruits) {
  console.log(index, fruits[index]);
}

// 0 apple
// 1 banana
// 2 cherry

for...of
Цикл for...of используется для перебора значений итерируемых объектов, таких как массивы, строки, Map, Set и т.д. Он перебирает значения.

Пример с массивом:

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
  console.log(fruit);
}
// apple
// banana
// cherry

Пример со строкой:

const name = 'Alice';

for (const char of name) {
  console.log(char);
}
// A
// l
// i
// c
// e

❓ Как запомнить
for...in – для индексов и свойств объекта.
for...of – для объектов итерируемых, значений.

Используйте for...in для обхода ключей объектов или индексов массива. Используйте for...of для обхода значений массивов, строк или других итерируемых объектов.

#frontend #javanoscript

Курс по TypeScript 49к просмотров🤪👩‍💻

Легендарное видео?

https://www.youtube.com/watch?v=PYWaUwjofJo

👍 Тесты в ботах

В последнее время всё чаще компании просят пройти тестирование в ботах Telegram перед встречей. Это позволяет им предварительно оценить ваши знания и навыки. Вот примеры вопросов, которые могут встретиться в таких тестах:

Для того, чтобы совместить две части функционала, которые не планировали совмещать ранее, придётся реализовать паттерн?
- Decorator
- Adapter
- Facade
- Abstract Factory
- Executor

Как можно определить, что при загрузке страницы DOM построен?
- DOMContentLoaded
- DomLoaded
- onLoad
- onDomLoad

Можно ли передать query параметры в POST запросе?
- Да
- Нет
- Да, если не переданы в body
- Нет, если не переданы body

Имеет ли стрелочная функция свой контекст?
- Нет
- Да
- Да, если класс
- Нет, если класс

Произойдёт ли ошибка при использовании функции до (Function Declaration) её объявления?
- Нет
- Да
- Да, если класс
- Нет, если класс

Какой из данных паттернов относится к порождающим?
- Factory
- Mediator
- Command
- Adapter

Ваше мнение по поводу таких тестов?

#interview #frontend

Снова в деле😎

Снял видео по паттерну Адаптер

После долгого перерыва в YouTube снова буду радовать вас техническим контентом👍

Выступал для учеников с митапом по архитектуре Frontend приложений.

Делал запись, но звук не записался😅

Решил перезаписать уже в формате видео для YouTube. Очень полезное видео. Разберем весь стэк и инструменты, с чего начинается разработка приложений.

Так же в закрытом чате у меня есть записи митапов: Типы компаний, Процессы в компаниях Скрам/Канбан, Workflow в команде и роли, System Design и тд

Тоже на понятных схемах, примерах. Так что если интересно залетайте в закрытый чат

👍 Менторство | 🔝 Сообщество

Трудоустройство: Финал.

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

Чтобы этого избежать, нужно глубоко погружаться в реальные процессы разработки. Мои ученики перед поиском работы практикуются на YeaHub — это не пет-проект, а полноценный стартап с большой командой, лидами, тестировщиками, дизайнерами, бэкенд-разработчиками. Это не тренировочная площадка, а реальное приложение, которое мы скоро запустим. Ученики работают над задачами в условиях, таких же как и на коммерческих проектах, с чёткими процессами и взаимодействием.

Чтобы улучшить свои ответы на собеседованиях, ученики после прохождения скринингов присылают записи в наш менторский чат. Мы вместе оцениваем их ответы, корректируем и делаем разбор. Так отрабатываются вопросы по любым компаниям: Сбер, МТС, Газпром, Яндекс, Вайлдберис. Всё проходит гладко, если в вашем опыте действительно были те процессы, о которых вы говорите.

За 2-3 месяца обучения ученики проходят большой путь: учатся решать задачи самостоятельно и знакомятся с процессами разработки. Это долго, но зато они становятся специалистами, которые могут конкурировать даже с мидлами. Такой опыт позволяет претендовать на зарплату от 200к+.

Главное — не выдумывать опыт из ничего. Если у вас нет коммерческих проектов, хотя бы создайте пет-проект и поработайте с функциональностью, которую указываете в резюме. Это сделает собеседования намного проще, когда вы говорите о реальных вещах, а не придумываете их на ходу. Сейчас учиться и получать опыт проще, чем когда-либо, и если у вас есть реальный опыт и понимание процессов, двери в любую компанию будут открыты.

В комментариях будут вопросы с финала моего ученика

#frontend #interview

👍 Менторство