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

Хочешь щёлкать задачи по фронтенду как орешки? Канал Frontend tests & tasks научит! Это не очередной канал с задачами. Здесь придется думать. Убедись сам 👉 @Frontend_tasks

Курс по TypeScript 49к🤪👩‍💻 Легендарное видео? https://www.youtube.com/watch?v=PYWaUwjofJo

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

✉️ Для тех, кто учится и пополняет портфолио 👩‍💻 Наткнулась на репозиторий «50 проектов на 50 дней» В нем 50 мини-проектов на HTML, CSS и JS от легких к более сложным. Внутри можно найти описание и ссылки на демонстрации. Потом решила поискать в тг и нашла открытый канал с короткими видосиками по реализации каждого проекта - здесь Похоже слитый, потому что на оф сайте платный курс Как можно его использовать? 📌 Пошаговое обучение: один проект - один день. Поможет вам систематизировать обучение и не выгореть. 📌 Изучение концепций: каждый проект фокусируется на определённой теме: работа с событиями, манипуляция DOM, создание анимаций и другое. 📌 Пополнение портфолио: будет, что скинуть hr, когда начнете искать работу. 📌 Развитие мышления: учитесь добавлять свои фичи или изменять существующий функционал. #html #css #js

⚡️ IT образование в 2024 стало бесплатным! Редакция канала IT База открыла доступ к более чем 700 топовым материалам с платных курсов Выбирай нужный и присоединяйся: 🟡Гайды по языкам: — Frontend — Python — C/C++/C# — SQL/PHP/Go и др. 🟡Гайды по технологиям: — Docker — Linux — Git/GitHub — Redis и др. 🟡 Прочее: — Работа/Фриланс — Как вкатиться с 0 Все бесплатно, доступно и удобно: @ITBaza

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

Канал от разработчика с опытом более 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

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