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

Друзья, поздравляю вас с Днем Программиста! 🎉 Программирование — это не просто профессия, это искусство. Вы создаете то, чего не было раньше, меняете мир и делаете его умнее. А еще программисты живут по законам логики и кофеина, что дает им суперспособности: как минимум, умение исправлять ошибки, которые они же и создали. 😉 Если вы только в начале пути — учитесь упорно, потому что эта профессия открывает двери к бесконечным возможностям и помогает менять мир. Программирование учит думать, решать сложные задачи и быть частью невероятных проектов. А я готов помочь вам достичь ваших целей! Вместе мы сможем пройти этот путь от первых строчек кода до покорения высоких технологий. Вдохновения, терпения и удачи вам! Пусть каждый день будет шагом к вашей мечте! С наилучшими пожеланиями, 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

Канал от разработчика с опытом более 6 лет. Совладелец успешного (Не очень) стартапа, действующий тимлид и интервьюер ⏺ Только авторские посты ⏺ Как стать синьором без олимпиад, алгоритмов и хорошего высшего образования ⏺ Рассказываю как эффективно проходить собеседования ⏺ Всё о карьере в айти ⚡️ Подпишись, чтобы не потерять — @dotnetdad

Собеседование на позицию Мидл, вилка 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

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

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

Последние деньки лета — давайте немного отдохнём и зарядимся на следующий год. Чтобы следующее лето было кайфовым: работали разработчиками на удалёнке, получали хорошие деньги и чилили у бассейна. Если нужна помощь, обращайтесь ко мне😎 Я уже стал профи в этом деле: столько собеседований пройдено, столько скринингов завершено. Написано множество гайдов и собрано море материалов для учеников. Многие ученики приходили и говорили: «Да хотя бы 100 тысяч зарплату, чтобы не выделяться». А спустя время уже отказываются от предложений в 150 тысяч, им подавай 200+! Очень круто наблюдать, как люди растут как специалисты. Сколько сил вложено в любимое дело, сколько созвонов пройдено. Каждый заслуживает лучшего 👍 Не забудьте про 10% скидку на менторство до конца августа Сайт с ценами: https://reactify.ru Канал с полным обзором обучения: @mentor_reactify На канале также есть гайд — заходите и забирайте себе!

📌 Собеседование в Яндекс Неделю назад ученик проходил собеседование в Яндекс. Сам процесс найма состоит из 5 этапов. Один из этапов это алгоритмическое интервью. Вот какие задачи он решал. Фидбек от интервьюера был положительный, ученик прошел в следующий этап. Задача №1: Сложность: Easy Написать функцию sleep, которая принимает продолжительность в миллисекундах и возвращает Promise, который разрешается после указанной задержки.

function sleep(duration) {
    // ваш код здесь
}

Задача №2: Сложность: Easy Написать функцию myJoin, которая имитирует работу метода Array.prototype.join. Функция принимает разделитель и любое количество аргументов, а затем соединяет их в строку.

const myJoin = (separator, ...args) => {
    // ваш код здесь
}

myJoin('.', 'a', 'b', 'c'); // 'a.b.c'
myJoin('-', 'a', 'b', 'c', 'd'); // 'a-b-c-d'

Задача №3: Сложность: Medium Написать имплементацию Promise.any. Функция должна принимать массив промисов и возвращать новый промис, который разрешается, если хотя бы один из переданных промисов разрешен. В случае, если все промисы отклонены, должен быть вызван reject с ошибкой AggregateError.

function any(promises) {
    // ваш код здесь
}

Задача №4: Сложность: Hard Написать функцию-декоратор, которая ограничивает число вызовов исходной функции. Декоратор принимает три аргумента: - Исходную функцию - Лимит вызовов - Callback, который должен быть вызван при достижении лимита. У возвращаемой функции должен быть метод reset, который сбрасывает счетчик вызовов.

function limitedCalls(fn, limit, callback) {
    // ваш код здесь
}

// Примеры использования:
function log(name) {
    return `Hello, ${name}!`;
}

function limitReached(name) {
    return `Sorry, ${name}, the function can no longer be called.`;
}

const limitedLog1 = limitedCalls(log, 2, limitReached);
limitedLog1('Alice'); // "Hello, Alice!"
limitedLog1('Alice'); // "Sorry, Alice, the function can no longer be called."

limitedLog1.reset();

#frontend #algo

🚀 Изучай HTML и CSS с нуля! 🚀 Присоединяйтесь к нашему Telegram-каналу [https://t.me/made_in_html_css] Здесь вы найдете: Уроки с нуля – от основ к сложным темам. Практические задания – применяйте знания на практике. Советы от опытных разработчиков – получайте помощь и рекомендации. Участие в проектах – накапливайте практический опыт. Обсуждения – делитесь успехами и задавайте вопросы. Присоединяйтесь и начните обучение уже сегодня! 🌟

Какой будет порядок логов? И Что будет в этих логах?

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'

function App() {
  const [state, setState] = useState(0)
  console.log(state)

  useEffect(() => {
    setState(state => state + 1)
  }, [])

  useEffect(() => {
    console.log(state)
    setTimeout(() => {
      console.log(state)
    }, 100)
  }, [])

  return null
}

ReactDOM.render(<App/>, document.getElementById('root'))

#frontend #react

Классические алгоритмы на собеседованиях Многие считают, что для успешного трудоустройства в IT необходимо знать сложные алгоритмы и структуры данных. Однако на практике часто оказывается, что собеседования включают в себя задачи, которые гораздо проще, чем вы могли бы ожидать. Вот что обычно спрашивают на собеседованиях: ✔️ Палиндромы: Проверка, является ли строка палиндромом, — это классическая задача, которая помогает понять, как вы работаете с строками и массивами. Например, задача на LeetCode: определить, является ли данная строка палиндромом. ✔️ Уникальные значения: Проверка, содержит ли массив только уникальные значения, — это ещё одна распространённая задача. Она показывает, как вы можете эффективно использовать структуры данных для решения проблем. ✔️ Замена подстроки: Задача на замену одной подстроки в строке на другую. Это может включать простую замену или более сложные случаи, требующие умения работать со строками и регулярными выражениями. ✔️ Задачи по React и TypeScript: Часто собеседования могут включать задачи, связанные с React и TypeScript. Это могут быть простые задачи на компоненты, управление состоянием или типизацию. Не забывайте, что ключ к успешному собеседованию — это не только знания алгоритмов, но и способность продемонстрировать ваши практические навыки и умение решать реальные проблемы. Удачи! #frontend #work