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

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

رفتن به کانال در Telegram

Я IT-специалист, ментор и основатель проекта YeaHub и сообщества Reactify. Здесь рассказываю про Frontend и IT. Менторство: https://reactify.ru YouTube канал: https://youtube.com/@reactify-it YeaHub: https://yeahub.ru/ Связь: @ruslan_kuyanets

نمایش بیشتر
6 470
مشترکین
+3824 ساعت
+1367 روز
+40230 روز
آرشیو پست ها
Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день. Присоединяйтесь: @FrontendP
+8
Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день. Присоединяйтесь: @FrontendPortal

🎤 Задание с лайвкодинга в Авито Проанализируйте код и определите, что будет выведено в консоли.

(function () {
    function modifyItemData(price, platform) {
        price.rub = 5000;
        platform = 'iOS';
        isModified = true;

        function printItemData() {
             console.log(price); // ?
             console.log(platform); // ?
             console.log(isModified); // ?
        }

        return printItemData;
    }

    let price = { rub: 3500 };
    let platform = 'Android';
    let isModified = false;

    const printItemData = modifyItemData(price, platform, isModified);

    console.log(price); // ?
    console.log(platform); // ?
    console.log(isModified); // ?

    price = { usd: 100 };
    platform = 'Web';
    isModified = null;

    printItemData();
})();
Вопросы:
1. Почему price изменяется, а platform — нет? 2. Как работает область видимости переменной `isModified`?
#собеседование #лайвкодинг

Приглашаем на Frontend Mix — бесплатный митап ЮMoney для всех, кто интересуется фронтенд-разработкой 🔥 🕓 24 апреля, в четве
Приглашаем на Frontend Mix — бесплатный митап ЮMoney для всех, кто интересуется фронтенд-разработкой 🔥 🕓 24 апреля, в четверг, в 19:00 (мск) приходите на митап в Санкт-Петербурге или подключайтесь онлайн. Спикеры из ЮMoney и Сбера расскажут, как работают над задачами и улучшают процессы в команде. Темы докладов: 🟣 Рефакторинг за 10 секунд. Как с помощью консольной утилиты производить автоматизированный рефакторинг крупных приложений за считанные секунды. 🟣 Подходы и практики тестирования во фронтенде. Зачем нужно тестирование во фронтенде, какие стандарты и подходы существуют и как мы применяем их в своей работе. 🟣 Уязвимости фронтенда в финтехе. Топ-3 атаки, или как построить защиту по всем фронтам — от планирования до релиза. 🟣 Анимация до кончиков пальцев. Поговорим про анимацию в целом и на вебе. Рассмотрим все способы сделать анимацию. Узнаем про композитные слои и как их посмотреть в Dev Tools — на примере одинаковых анимаций, но с использованием разных подходов. Чтобы попасть на митап, нужна регистрация. Все подробности — на сайте Frontend Mix ❤️

👩‍💻 Инжектирование эндпоинтов в RTK Query и организация API в отдельных файлах Когда вы работаете с несколькими сущностями в приложении, может возникнуть необходимость разделить логику работы с API на несколько частей для лучшей организации кода и повышения читаемости. Инжектирование эндпоинтов позволяет вам добавлять новые запросы к уже созданному базовому API, что упрощает управление и масштабирование вашего приложения. Организация базового API Рекомендуется создать отдельный файл для базового API, который будет содержать общие настройки, такие как baseQuery, reducerPath и другие параметры, а также общие эндпоинты.

// baseApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const baseApi = createApi({
  reducerPath: 'baseApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['User', 'Post'], // Определяем типы тегов для инвалидации кэша
});

export default baseApi;
Создание эндпоинтов для различных сущностей Теперь вы можете создать отдельные файлы для каждой сущности, добавляя в них необходимые эндпоинты и используя базовый API.

// userApi.js
import baseApi from './baseApi';

// injectEndpoints автоматически добавит эндпоинты к baseApi
const userApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    fetchUsers: builder.query({
      query: () => 'users',
      providesTags: ['User'], // Указываем, что этот запрос использует тег 'User'
    }),
    addUser: builder.mutation({
      query: (newUser) => ({
        url: 'users',
        method: 'POST',
        body: newUser,
      }),
      invalidatesTags: ['User'], // Инвалидируем кэш для 'User'
    }),
  }),
  overrideExisting: false, // Не переопределяем существующие эндпоинты
});

export const { useFetchUsersQuery, useAddUserMutation } = userApi;
export default userApi;
Пример эндпоинтов для постов

// postApi.js
import baseApi from './baseApi';

// injectEndpoints автоматически добавит эндпоинты к baseApi
const postApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    fetchPosts: builder.query({
      query: () => 'posts',
      providesTags: ['Post'], // Указываем, что этот запрос использует тег 'Post'
    }),
    addPost: builder.mutation({
      query: (newPost) => ({
        url: 'posts',
        method: 'POST',
        body: newPost,
      }),
      invalidatesTags: ['Post'], // Инвалидируем кэш для 'Post'
    }),
  }),
  overrideExisting: false, // Не переопределяем существующие эндпоинты
});

export const { useFetchPostsQuery, useAddPostMutation } = postApi;
export default postApi;
Инжектирование эндпоинтов в RTK Query позволяет вам создавать гибкую и масштабируемую архитектуру для работы с несколькими сущностями. Разделение логики API на отдельные файлы помогает поддерживать чистоту и порядок в коде, а использование базового API упрощает добавление новых эндпоинтов. Такой подход способствует улучшению читаемости и поддерживаемости вашего приложения.

🐝 Собеседование в компании Билайн Позиция Middle Frontend Разработчик 1. Разница между WebSocket и SSE? 2. Разница между юнит-тестами и интеграционными тестами? 3. Допишите код хука и его типы:

type UseArrayActions = {
  push: (item) => void,
  removeByIndex: (index) => void
}

export function useArray(initialValue): { value } & UseArrayActions {
  const [value, setValue] = useState(initialValue);

  const push = (item) => setValue();
  const removeByIndex = (index) => setValue();

  return { value, push, removeByIndex };
}
4. Дан массив строк (не меньше 3 элементов), в котором одна из строк отличается по составу входящих в неё букв от остальных строк в массиве. Порядок, количество, регистр букв и пробелы роли не играют. Реализовать метод, который принимает на вход такой массив строк, и возвращает отличающуюся строку.

console.assert( findUniq(['a', 'a Aa', 'ab a', 'AA a']) === 'ab a' );
console.assert( findUniq(['ab', 'a Aa', 'ab a', 'bAA a']) === 'a Aa' );
console.assert( findUniq([1,2,1,1]) === 2 );
console.assert( findUniq(['aBca', 'ac b', 'bac', 'fO o', 'bca', 'cabaccBA', ' Ccba']) === 'fO o' );

function findUniq(strings) {
  ???
}
5. Объясните, что произойдет при выполнении следующего кода:

const Andrey = {
  name: 'Андрей',
  surname: 'Малахов',
  city: {
    name: 'Москва'
  },
}

const Genadius = {
  name: 'Генадий',
  surname: 'Малахов',
  city: Andrey.city,
}

Genadius.city.name = 'Санкт-Петербург'
6. В каких случаях может выполниться “something code”?

const checkIntervalMs = 2000;
const toleranceMs = 2000;
let lastCheckStamp: number = null;

setInterval(
    () => {
        const now = Date.now();
        if (lastCheckStamp && now - lastCheckStamp > checkIntervalMs + toleranceMs){ 
            //something code
        }
        lastCheckStamp = now;
    },
    checkIntervalMs
);
7. Что такое Server-Sent Events? 8. Опыт работы с постоянным соединением через WebSocket? 9. Что такое Event Loop? 10. Что происходит при вводе адреса в адресной строке и нажатии Enter? 11. Что такое чистая функция? #interview

🥇 Что делать кандидату? Стратегия прорыва в условиях жесткого рынка Сейчас недостаточно просто отправить резюме и ждать — нужно атаковать рынок со всех сторон. Чем больше действий, тем выше шансы. Вот рабочие тактики: 1. Оптимизация резюме и профиля - Ключевые слова из вакансии — HR и алгоритмы ищут по ним. - Несколько версий резюме под разные вакансии (или даже новый аккаунт с другим телефоном/почтой). - Обновляйте резюме раз в 1-2 дня, чтобы подняться в поиске. - Цифры и метрики — автоматические системы любят конкретику. - Приукрашивайте опыт, усиливайте достижения, используйте сильные слова. 2. Обход алгоритмов и фильтров - Откликайтесь в первые часы после публикации — чем раньше, тем выше шанс. - Реферальные ссылки — если есть знакомые в компании, просите приглашение (таких кандидатов часто рассматривают в приоритете). - Пишите напрямую HR или рекрутерам (но коротко — 3-4 предложения о вашем соответствии). 3. Альтернативные способы выхода на компанию - Ищите вакансии на сайтах компаний — иногда их публикуют там раньше, чем на агрегаторах. - Telegram-каналы, чаты по поиску работы — некоторые вакансии не доходят до HH. - Митапы и конференции — нетворкинг до сих пор один из самых сильных инструментов. - Изучите LinkedIn — это ещё одна возможность быть замеченным. - Пишите не только HR, но и текущим работникам компании (можно найти в чатах и попросить зарефералить).

🌐 IT-сообщества, митапы и путешествия — как я заряжаюсь энергией и развиваюсь Мне нравится IT за безграничные возможности и
+1
🌐 IT-сообщества, митапы и путешествия — как я заряжаюсь энергией и развиваюсь Мне нравится IT за безграничные возможности и открытость. Здесь столько интересных, продвинутых людей — они не боятся пробовать новое, путешествуют, развиваются и постоянно учатся. Кажется, ни в одной другой сфере нет такого драйва! Я активно участвую в IT-сообществах, хожу на онлайн- и офлайн-мероприятия. Это помогает понимать тренды, расти в доходе и просто становиться лучше. Для меня айтишники — это про современность: они следят за собой, ходят в зал, имеют кучу хобби и не сидят на месте. Весна — время встреч и путешествий☀️✈️ С приходом тепла хочется больше общаться вживую. В марте я встретился с классными ребятами — гуляли в парке, болтали за кофе и матчей. А уже на этих выходных жду сходку с учениками в Краснодаре: часть из них уже работает, другие в поиске. Обсудим жизнь, карьеру и обучение. Летом планирую 1,5-2-месячное турне по Центральной России — хочу объехать кучу городов, где живут мои друзья, ученики и участники IT-сообществ, в которых я состою. В Москве, например, ждут около 30 моих учеников — наконец-то увидимся вживую!😅 Где искать крутые IT-мероприятия? 📺 Я постоянно мониторю митапы и хакатоны. В Краснодаре их немало, но в Москве, думаю, просто адское количество ивентов. Чтобы не тратить время на поиски, пользуюсь каналом IT мероприятия России / ITMeeting / IT events. Там всё структурировано: митапы, вебинары, конференции — в одном месте. Это лучший источник анонсов, всегда советую его ученикам, которые хотят прокачаться в нетворкинге. Подписывайтесь — вдруг встретимся на каком-нибудь митапе? 🤝 Куда еду летом? 🚗 Сейчас составляю маршрут. В каждом городе планирую быть 1-3 дня, а в Москве — 1-2 недели. Пока в списке: Воронеж, Москва, Нижний Новгород, Печоры, Суздаль, Тула, Владимир Думаю заехать и в Питер на недельку — там тоже много знакомых. Если знаете крутые места или города, которые стоит посетить — пишите в комменты!
А вы часто ходите на митапы? Какие запомнились больше всего? Какие города и локации советуете?
Давайте общаться! Может, встретимся на одной из сходок? 🤝 🔗 Ссылка на канал событий в IT #frontend #events

👩‍💻 Сложное Frontend Собеседование + Live Coding. Promises, This, Memo, Generics, Solid, HTTP Изначально запись этого собес
👩‍💻 Сложное Frontend Собеседование + Live Coding. Promises, This, Memo, Generics, Solid, HTTP Изначально запись этого собеседования не планировалась для публикации — она была сделана для детального разбора навыков и поведения Даниила. Для него это был первый опыт мокового собеседования, и, как он сам отметил, волнение и стресс сопровождали его на протяжении всего процесса. Однако такой формат оказался крайне полезным: он позволил объективно оценить слабые места и наметить план работы. Какие проблемы выявил разбор? - Ответы давались кратко, без необходимой аргументации и пояснений - Активное использование слов-паразитов: «наверное», «вроде», «не знаю», что создавало впечатление неуверенности - Даже правильные ответы звучали неубедительно из-за нерешительной манеры подачи - Многие вопросы оставались раскрытыми неполно, без углубления в суть - На базовые вопросы, которые кажутся очевидными, давались неполные или частично верные ответы Сейчас в планах — интенсивная подготовка в течение двух недель, чтобы проработать все слабые места и пройти собеседование снова. Запись и разбор собеседований — один из самых эффективных способов увидеть себя со стороны и улучшить навыки коммуникации и технические знания. Видео уже на канале! Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение. #frontend #interview

💬 Как работает HR в условиях текущего рынка? Сейчас на рынке труда мало вакансий, а конкуренция среди кандидатов высокая. Компании диктуют правила: они могут позволить себе быть избирательными, не торопиться с наймом и рассматривать только самых подходящих кандидатов. В такой ситуации даже идеальное резюме не гарантирует приглашения на собеседование, а кандидат со средним резюме может стабильно проходить скрининги и получать офферы. Почему так происходит? Давайте разберёмся в логике HR-специалистов. 💡 Как HR отбирает кандидатов? 1. Первичная фильтрация: жёсткие критерии На одну вакансию может прийти 1000+ откликов. В первую очередь HR задаёт максимально строгие фильтры, чтобы отсеять 90% кандидатов. Например: - Город (только Москва/СПб, без релокации) - Возраст (часто 25–35 лет, особенно для middle/senior) - Опыт работы (не «от 3 лет», а «ровно 5+») - Уровень английского (B2+ даже там, где он реально не нужен) После такой фильтрации остаётся 10–20 «идеальных» кандидатов. Их проверяют в первую очередь – зачем смотреть остальных, если среди этих уже может быть подходящий? 2. Постепенное расширение поиска: партийный отбор Если среди топ-кандидатов никто не подошёл, HR ослабляет критерии, но не сразу. Например: - Берут тех, кто соответствует 6–8 из 10 пунктов (например, опыт 4 года вместо 5, или английский B1 вместо B2). - Приглашают партиями по 5–10 человек – если вакансия закроется на первых же кандидатах, остальных даже не увидят.
Проблема: пока HR дойдёт до вашего резюме (особенно если вы «середнячок»), вакансия может уже закрыться.
3. Влияние алгоритмов: «Лучший кандидат» и случайность Платформы вроде HeadHunter используют автоматическую сортировку (например, функцию «Лучший кандидат»). Но алгоритмы работают неидеально: - Они не понимают контекст (например, могут продвинуть резюме с кучей ключевых слов, но без реального опыта). - HR часто доверяет этой сортировке и зовёт первых 5–10 из списка, не проверяя остальных.
Отсюда эффект рандома – иногда на скрининг попадает не самый подходящий, а просто тот, кого алгоритм поставил выше.
⚡️ Что это значит для вас? - Даже маленький «недожёг» в резюме (например, 4 года опыта вместо 5) может отбросить вас во вторую/третью очередь. - Важно попасть в топ выдачи (через ключевые слова, обновления резюме и т. д.). - Скорость отклика критична – чем раньше, тем выше шанс попасть в первую партию. - Алгоритмы несправедливы – иногда нужно «обходить» их вручную (писать HR напрямую, искать рефералов и т. д.).
Вывод: в текущих условиях пассивный поиск почти не работает. Нужна агрессивная стратегия – оптимизация резюме под алгоритмы, быстрые отклики и прямое взаимодействие с рекрутерами.
А как у вас дела? Получается ли находить работу? Делитесь лайфхаками! #interview #hr #work

🖥 Лайвкодинг в компании Postgres Pro Позиция Middle Frontend Разработчик Достаточно сложные вопросы были по опыту, проектам. А так же не было стандартных технических вопросов. На собеседовании нужно было реализовать Игру "Crush the mole". Описание задачи: Необходимо реализовать игру "Crush the mole" на TypeScript. Игра представляет собой поле 4x4 клетки, на котором через случайные промежутки времени в случайной клетке появляется крот. Игрок должен успеть "прихлопнуть" крота, кликнув по нему левой кнопкой мыши. После успешного клика крот исчезает и появляется в новой случайной клетке. Игру можно остановить и начать заново с помощью кнопки. Требования: - Поле игры: Игровое поле состоит из 16 клеток (4x4). - Появление крота: Крот появляется в случайной клетке через случайные промежутки времени. - Управление: Игрок кликает по клетке, чтобы "прихлопнуть" крота. Если клик был по клетке с кротом, крот исчезает и появляется в новой случайной клетке. - Кнопка управления: Игру можно остановить и начать заново с помощью одной кнопки. - Отображение крота: Крот отображается символом, например, @. - Генерация случайных чисел: Для генерации случайного числа можно использовать Math.random().

import React from 'react';

const elements = Array(16).fill(0);

export default function App() {
  const [randomIndex, setRandomIndex] = React.useState(0);
  const [isStart, setStart] = React.useState(false);

  // Ваш код здесь

  return (
    <div className="App">
      <h1>⭐ Crush the mole ⭐</h1>
      <button onClick={() => { /* Ваш код здесь */ }}>
        {isStart ? "Остановить" : "Начать игру"}
      </button>
      <div className="container">
        {elements.map((elem, index) => (
          <div
            key={index}
            className="item"
            onClick={() => { /* Ваш код здесь */ }}
          >
            {index === randomIndex ? "@" : ""}
          </div>
        ))}
      </div>
    </div>
  );
}
Задачи для кандидата: - Реализовать логику появления крота в случайной клетке через случайные промежутки времени. - Реализовать обработку клика по клетке: если клик был по клетке с кротом, крот исчезает и появляется в новой случайной клетке. - Реализовать кнопку, которая будет останавливать и запускать игру. - Убедиться, что игра корректно работает и не содержит багов (например, крот не появляется в той же клетке сразу после исчезновения). Дополнительные вопросы для обсуждения: - Как можно оптимизировать код для улучшения производительности? - Как можно добавить дополнительные функции в игру (например, счетчик очков, таймер, уровни сложности)? - Как можно протестировать эту игру? Ожидаемый результат: Кандидат должен предоставить рабочую версию игры, соответствующую всем требованиям, и быть готовым объяснить свой код и принятые решения. #interview

🎙 Собеседование в компанию Точка На позицию Middle Frontend Разработчик Большая часть собеседования состоит из кодинга в перемешку с теоретическими вопросами. 1. В каком порядке будут выведены логи?
console.log('1')
Promise.resolve('2')
    .then((res) => {
      console.log(res);
      
      Promise.resolve('3')
        .then((res) => {
          console.log(res);
          setTimeout(() => {console.log('4')}, 0);
        })    
    })
    .then((res) => console.log(res))
    .finally((res) => {
      console.log(res);
      setTimeout(() => {console.log('5')}, 0);
    });
console.log('6');
2. А если изменив первый Promise?
console.log('1')
Promise.reject('2')
    .then((res) => {
      console.log(res);
      
      Promise.resolve('3')
        .then((res) => {
          console.log(res);
          setTimeout(() => {console.log('4')}, 0);
        })    
    })
    .catch((res) => console.log(res))
    .then((res) => console.log(res))
    .finally((res) => {
      console.log(res);
      setTimeout(() => {console.log('5')}, 0);
    });
console.log('6');
3. Что выведет этот код?
function foo() {
  const x = 10;

  return {
    x: 20,
    bar: () => {
      console.log(this.x)
    },
    baz: function() {
      console.log(this.x)
    }
  };
}

const obj1 = foo();

obj1.bar();    // ...
obj1.baz();       // ...

const obj2 = foo.call({ x: 30 });
obj2.bar();    // ..
obj2.baz();       // ...
4. Напиши и типизируй функцию для определения типа фигуры
type Rectangle = {
  width: number ;
  height: number ;
};

type Circle = {
  radius: number;
};

type AvailableFigure = Rectangle | Circle;

function isCircle(figure) {
  ...
}

function getCircleArea(figure: Circle): number {
    return Math.pow(figure.radius, 2) * Math.PI
}

function getRectangleArea(figure: Rectangle): number {
    return figure.width * figure.height
}

function getArea(figure: AvailableFigure): number {
  return isCircle(figure)
    ? getCircleArea(figure)
    : getRectangleArea(figure);
}
5. Напиши нативный Pick<>
type MyPick<T, U extends keyof T> = {
    [key in U]: T[key] 
}
Все эти задачи мы разбирали в видео: - 5 типичных задач по TypeScript для Frontend собеседований - Разбор задач по Event Loop с собеседований - 5 типичных задач по JavaScript на собеседовании #interview

📈 Ситуация на рынке труда в IT Вакансий на рынке действительно мало, и он до сих пор не оправился после новогодних празднико
📈 Ситуация на рынке труда в IT Вакансий на рынке действительно мало, и он до сих пор не оправился после новогодних праздников. Ранее прогнозировалось, что к февралю количество предложений восстановится до уровня осени 2024 года, когда по всей России было около 4 тысяч вакансий. Однако сейчас их число колеблется в пределах 2300–2400, что почти в два раза меньше. До нового года ситуация была иной: офферы приходили уже через неделю активного поиска (пример: оффер за 1 неделю). Количество собеседований доходило до 6–10 в неделю, и найти работу за месяц не составляло труда. Сейчас же поиск работы может затянуться до двух месяцев. В условиях такой высокой конкуренции важно быть максимально подготовленным. ❓ Означает ли это, что найти работу невозможно? Нет, даже в текущих условиях ребята продолжают получать офферы. Вот несколько примеров: - Оффер на 250 тысяч рублей с нуля - Два оффера в копилку наших ребят - Еще два оффера - Два ученика получили офферы - Оффер на 210 тысяч рублей в Big Tech - Оффер за один день 🔝 Кому сейчас легко? Никому. Рынок требует адаптации, и важно быть сильнее других кандидатов. Это время для работы над своими навыками и повышения конкурентоспособности. Прогнозы: Ожидаем, что количество вакансий восстановится к концу весны. На это повлияет улучшение общей экономической ситуации, а также сезонные факторы. Однако стоит понимать, что рынок IT становится более зрелым и требовательным. 🌧 Стоит ли бросать учебу? Нет. Текущая ситуация — это естественная конкуренция, которая существует в любой профессии. Например: - Среди студентов медицинских вузов лишь около 20% становятся врачами узких специальностей или хирургами. Остальные работают медперсоналом, лаборантами или врачами общей практики. - Среди выпускников юридических факультетов только 10% достигают карьерных высот, становясь судьями, прокурорами или успешными адвокатами. Остальные работают в юридических фирмах, занимаясь рутинной работой. То же самое происходит и в IT. Если вам нравится разработка, и вы готовы учиться, вы сможете пройти через конкуренцию. Рынок очищается от тех, кто пришел в IT только из-за хайпа и высоких зарплат, после курсов и думал, что с небольшой базой можно легко вкатиться. Пример успеха: Один из моих учеников, не имея технического бэкграунда и особых способностей к программированию, смог получить оффер на 250 тысяч рублей с нуля. Он упорно учился и добился результата, даже в условиях, когда опытные специалисты с трудом находят работу. Вывод: Рынок IT становится более зрелым и избирательным. Пройти курс и сразу получить высокооплачиваемую работу теперь не получится — придется приложить усилия. Но если вы готовы учиться и развиваться, у вас есть все шансы на успех. Рынок отфильтрует тех, кто не готов вкладываться в свое развитие, и оставит только сильнейших. Ваше будущее в ваших руках. Учитесь, адаптируйтесь и будьте на шаг впереди.

📹 Собеседование на Middle Frontend | 50 вопросов студенту IT-Incubator Когда-то давно я учил React по курсу React Самурай от
📹 Собеседование на Middle Frontend | 50 вопросов студенту IT-Incubator Когда-то давно я учил React по курсу React Самурай от Димыча. Недавно предложили на его канале провести собеседование. Я согласился :) 🔗 Список вопросов с ответами 📹 Видео

Опрос про накрутку опыта 2024 (статистика открыта для всех) Время подвести итоги 2024 года: помогает ли накрутка достигнуть ваших целей, увольняют ли на испытательном сроке, палит ли служба безопасности. За прохождение опроса бесплатный доступ в сообщество на 3 дня. Итоги опубликую в этом канале. https://forms.gle/H3YbVcf1xKNUJUey9 Всем блогерам от 100 подписчиков раздам доступ к полученным ответам за репост (пишите в комментах со ссылкой на репост в ваших соц сетях)

💬 Frontend Собеседование с разбором. Browser, JavaScript, TypeScript, React. Групповой мок-формат В этом видео группа ребят,
💬 Frontend Собеседование с разбором. Browser, JavaScript, TypeScript, React. Групповой мок-формат В этом видео группа ребят, которые хотят устроиться на работу в IT, отвечают на теоретические вопросы от ведущего ментора. Это полноценная тренировка: участники учатся выступать перед аудиторией, формулировать свои мысли, дополнять ответы других и внимательно слушать, как отвечают их коллеги. В этом видео мы поговорим о ключевых технологиях: Browser, JavaScript, TypeScript и React. Видео уже на канале! Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение. #frontend #interview

Экспериментировал с резюме и задумался: а что вообще я делал за свою карьеру, что умею? Решил накидать список. Когда перечита
Экспериментировал с резюме и задумался: а что вообще я делал за свою карьеру, что умею? Решил накидать список. Когда перечитал, в голове сразу всплыл мем с чуваком в мундире, увешанным миллионом наград. Прилагаю картинку — она говорит сама за себя! 😂 ✅ Фронтенд-разработка и сборка проекта - С нуля настраивал Webpack для разных сред, включая разработку, тестирование и продакшен, с оптимизированными конфигурациями, плагинами и лоадерами. - Полностью настраивал экосистему разработки: ESLint, Prettier, Stylelint, Husky, PostCSS, Babel и другие инструменты. - Работал с React и Next.js, используя различные стейт-менеджеры: Redux, Redux Toolkit (RTK), MobX, Signals. - Разрабатывал UI Kit с Storybook и Loki, создавая и документируя все компоненты, необходимые для приложения. - Работал с популярными библиотеками:
Формы: Formik, React Hook Form, Yup Графика: Fabric.js, Three.js, Babylon.js Дата и время: date-fns, Moment.js, Luxon.js, Day.js Графики и визуализация: ECharts UI-компоненты: MUI (Material UI), Ant Design Запросы и кэширование: Axios, React Query, SWR Локализация: i18next Анимации: Framer Motion Тестирование: Jest, React Testing Library Другие: Swiper, React Window, React Calendar, React Advanced Cropper, React Table, Recharts
✅ CI/CD, DevOps и инфраструктура - Настраивал CI/CD и деплой на тестовые и продакшен-среды, включая Docker-сборку, автоматизированный деплой и окружения. - Настроил и администрировал Nginx, SSL-сертификаты, DNS-записи, cron-задачи и автоматические бэкапы баз данных. - Разворачивал сервер для логирования и мониторинга: Sentry (self-hosted) для фронтенда, Grafana + Prometheus для бэкенда. ✅ Интеграции и работа с внешними сервисами - Настраивал интеграции с email- и SMS-сервисами. - Внедрял авторизацию через Google, Telegram, Yandex и другие OAuth-провайдеры. - Работал с S3-хранилищами и CDN. - Подключал сервисы оплаты Paddle, Striple и Тинькоф эквайринг ✅ Базы данных и Backend - Работал с SQL (PostgreSQL) и NoSQL (MongoDB) базами данных. - Проектировал и разрабатывал Backend на Nest.js + PostgreSQL, используя миграции TypeORM и Liquibase. ✅ Полноценные проекты - Самостоятельно спроектировал и разработал одно Fullstack-приложение с нуля до продакшена. - Разработал три фронтенд-приложения, включая графический редактор, CRM-систему и клиентское веб-приложение. - Руководил командой 20+ специалистов, проводил собеседования и менторил начинающих разработчиков 💡 В планах - Изучение Kubernetes и углубление в DevOps: автоматизация развертывания, оркестрация контейнеров, балансировка нагрузки, шардирование, репликация данных. - Глубокое погружение в Backend: изучение брокеров сообщений (RabbitMQ, Kafka), кэширования (Redis, Memcached), оптимизации запросов и интеграции с различными сервисами. - Настройка безопасности серверов: управление доступами, защита от DDoS-атак, мониторинг уязвимостей, шифрование данных и бэкапы. Как думаете, нормальный список навыков для почти 4 лет опыта, или маловато? Что бы вы посоветовали изучить, чтобы прокачаться еще сильнее?

👩‍💻 Продвинутый React Выпущено три видео по паттернам и принципам программирования: 📹 5 продвинутых паттернов в React – изучаем ключевые подходы и паттерны в разработке React-приложений: Render Props, Slot Pattern (Component Injection), Proxy Component, Function as a Child, Compound Components. 📹 Принципы SOLID в React – учимся создавать переиспользуемые компоненты, используя SOLID-принципы. Разбираем, как правильно декомпозировать код и проектировать архитектуру с учетом лучших практик. 📹 Принципы ООП в React – закрепляем понимание объектно-ориентированного программирования, разбираем, откуда берутся паттерны и подходы, и как они помогают в разработке. 💡 Для чего это нужно? Формирование архитектурного мышления важно уже на этапе обучения. Понимание принципов и подходов к разработке помогает писать более чистый, масштабируемый код. Чем раньше вы начнете разбираться в паттернах, тем быстрее сможете применять их в своих проектах и развивать свои навыки. Сначала может быть сложно увидеть, где и как использовать тот или иной паттерн, но с опытом вы научитесь понимать, когда он действительно необходим, а когда избыточен. #frontend #react #solid #oop

👩‍💻 Принципы ООП в React. В этом видео разберем основные принципы ООП — инкапсуляцию, наследование, полиморфизм и абстракци
👩‍💻 Принципы ООП в React. В этом видео разберем основные принципы ООП — инкапсуляцию, наследование, полиморфизм и абстракцию — и покажем, как они работают в React. Узнаем, что такое Render Props, Component Injection, композиция и декомпозиция, и применим их в функциональных компонентах, Custom Hooks и HOCs. Видео уже на канале! Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение. 🔗 Репозиторий #frontend #react #ооп

🎉 Ровно год в менторстве! Год назад, 8 февраля, я выложил пост у себя на канале о том, что начинаю обучать новичков. И с тех пор у меня было около 100 учеников, более 70 из которых пришли в разработку почти с нуля. Больше всего учеников пришло осенью: сентябрь, октябрь, ноябрь. Почти все, кто начал обучение раньше, уже нашли работу. А сейчас многие заканчивают обучение и выходят на рынок. Каждый ученик — уникален, со своими сильными сторонами и трудностями, но всех нас объединила разработка. За этот год было много вызовов, но еще больше радости — когда удавалось преодолеть сложности, освоить технологии и получить долгожданный оффер. Конечно, были и те, кто по разным причинам прекращал обучение: кто-то не справился, кто-то понял, что фронтенд — не его, кому-то просто не зашло. Такие моменты всегда немного расстраивают, ведь хочется, чтобы каждый доходил до своей цели. Менторство — это не волшебная таблетка и не кнопка "Бабло", которая без усилий приведет к успеху. Ментор не может выучиться за вас или пройти за вас на работу — многое зависит от вас самих. Я постоянно стараюсь делать обучение лучше. Вот, например, сейчас — суббота, 22:55, а я пишу практический курс для учеников по Docker и CI/CD. 😅 Мне хочется формировать не просто сообщество разработчиков, а сильное комьюнити людей, которые не просто найдут работу, а станут реально крутыми специалистами. Надеюсь, у меня это получается! Так что с праздником меня — с первой годовщиной в менторстве! 🥳😎 📹 Во вторник новое видео - Принципы ООП в React 👇Тот самый пост https://t.me/reactify_IT/709

😅 Псс... Прокачаться не надо? Спасибо всем, кто поддерживает! Записывая новое видео, всегда переживаю, что мог где-то ошибит
😅 Псс... Прокачаться не надо? Спасибо всем, кто поддерживает! Записывая новое видео, всегда переживаю, что мог где-то ошибиться, что-то не так сказать или неправильно употребить слово. Съемка видео, написание сценария и монтаж — это непростая задача. На 20-минутное видео уходит три дня работы. А ведь у меня еще YeaHub, блог, менторство и социальные проекты. Лучшая поддержка - это просмотр видео. Спасибо! https://www.youtube.com/@reactify-it