Руслан Куянец | Reactify

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

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

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

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

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

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

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

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

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

#interview #frontend

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

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

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

Смешно же😅

У нас есть любимые всеми созвоны по прожарке. На них я душу по опыту, задаю каверзные вопросы и проверяю резюме и софты.

Прикольные активности😁

✉️ Для тех, кто учится и пополняет портфолио

👩‍💻 Наткнулась на репозиторий
«50 проектов на 50 дней»

В нем 50 мини-проектов на HTML, CSS и JS от легких к более сложным. Внутри можно найти описание и ссылки на демонстрации.

Потом решила поискать в тг и нашла открытый канал с короткими видосиками по реализации каждого проекта - здесь

Похоже слитый, потому что на оф сайте платный курс

Как можно его использовать?

📌 Пошаговое обучение: один проект - один день. Поможет вам систематизировать обучение и не выгореть.
📌 Изучение концепций: каждый проект фокусируется на определённой теме: работа с событиями, манипуляция DOM, создание анимаций и другое.
📌 Пополнение портфолио: будет, что скинуть hr, когда начнете искать работу.
📌 Развитие мышления: учитесь добавлять свои фичи или изменять существующий функционал.

#html #css #js

Чем отличаются циклы 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 #javascript

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

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

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

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

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

👍 Менторство

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

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

Вилка: 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

🤫 Квантовый воин

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

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

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

- Вы начнете замечать видео на YouTube о курсах по React и JavaScript, которые раньше могли пройти мимо вас.
- В поисковых системах будут чаще появляться статьи о трудоустройстве в IT и смене карьеры.
- Вы можете встретить информацию о вакансиях и стажировках, которые совпадают с вашими новыми целями.

Это лишь простой пример, но он показателен. Все знаки судьбы, которые сопровождали мой рост и изменения, — результат фокусировки на истинной цели и желания следовать за такими знаками. Аффирмации действительно работают, но только если вы действуете.

Поэтому, начав свой путь, не сомневайтесь в нем

📌 Прикрепил фото трехлетней давности из трамвая с той самой книгой.

#frontend #work

Собеседование на 100к: нам нужно построить новую версию байконура, по срокам 2 дня

Собеседование на 300к: расскажи какие знаешь типы данных в js

😅😅😅

Разница между 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

Собеседование на позицию Мидл, вилка 150к-220к

Как же легко искать работу, когда в резюме есть 3 года опыта и отличная подготовка! Мои ученики сейчас активно ищут работу: проходят скрининги, технические собеседования и лайвкодинг. На данный момент несколько из них находятся на финальных этапах — успешно прошли технические интервью и готовятся к встречам с руководителями и командами. Ожидаем предложения до середины сентября.

Вот список вопросов для собеседования:
- Какие существуют типы данных в JavaScript?
- Что такое hoisting и как он влияет на переменные и функции?
- Каковы основные области видимости в JavaScript?
- В чем заключаются особенности работы с комплексными объектами в JavaScript?
- Какие существуют виды функций в JavaScript и их ключевые особенности?
- Что такое Promise в JavaScript и какие методы он предоставляет для работы с асинхронными операциями?
- Как работает event loop в JavaScript и какое влияние он оказывает на выполнение кода?
- Что такое TypeScript и для чего он используется в разработке?
- Что такое React и какие задачи он помогает решать?
- Как работает virtual DOM в React и как это улучшает производительность приложений?
- Что такое Redux и как он помогает управлять состоянием в приложениях на React?
- Реагируют ли все reducers на dispatch action в Redux?
- Каковы ключевые особенности классов в JavaScript и как они используются?

+ лайвкодинг (разберем позже)

Лето подошло к концу, отпуск завершился, и начинается активный поиск специалистов. Вакансий становится больше, что значительно увеличивает шансы найти подходящую работу.

#frontend #interview

Всем привет!

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

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

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

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

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

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

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

Ссылка: https://youtube.com/live/WQAwMdwbI6M?feature=share

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

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

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

Место: YouTube

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

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

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

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 #javascript #eventloop

Подготовка к собеседованиям

Два канала для подготовки к собеседованиям. Очень полезно окружить себя теорией.

@frontend_questions - канал разработчиков YeaHub. Вопросы собеседований, тесты и задачи с лайвкодинга

@front_questions - канал коллеги. Проходит собеседования и выкладывает вопросы в свой канал.

#frontend #interview

Render Props

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

Зачем нужно?

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

#frontend #react

🔥 Если не хотите конкуренции, то вам подойдут такие вакансии. Это сообщение уже месяц в группе нашего ЖК, постоянно пишут, что не хватает работников.

✔️ Не важен твой опыт
✔️ Нет собеседований
✔️ Оформление в тот же день
✔️ Не нужно учиться

Кадровый голод, Горящие вакансии

Руслан Куянец | Reactify pinned «Стрим/Ответы на вопросы Дата и время: 4 сентября, Среда, 19:00 мск Место: YouTube Поболтаем с вами, отвечу на вопросы, расскажу про рынок, про собеседования и тд. 📌 Сюда можете отправить вопрос: https://forms.gle/nS3c2cgaV43ssvLE8 Так же вопросы можно…»