🛡 Пример сильных достижений в ваше резюме.

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

✔️ Запустил ленты новинок и популярных материалов, автоматически обновляющиеся через Redux Toolkit и RTK Query для получения данных, что упростило поиск актуального контента и повысило его доступность.

✔️ Внедрил систему избранного для сохранения материалов в личном кабинете с помощью Redux Toolkit для управления состоянием, что позволило пользователям возвращаться к важным статьям и конспектам в удобное время.

✔️ Разработал рейтинговую систему для преподавателей, оценивающую активность и популярность материалов с использованием данных из RTK Query, что мотивировало авторов и повышало качество контента на платформе.

✔️ Реализовал панель управления публикациями для преподавателей, используя React, Redux Toolkit и Formik для создания форм, что позволило авторам легко создавать, редактировать и удалять свои материалы, а также отслеживать популярность публикаций и взаимодействие с пользователями.

Что тут есть?
1. Сильные слова (например, "Запустил", "Внедрил").
2. Ключевые слова (такие как "Redux Toolkit", "RTK Query").
3. Бизнес-кейсы (например, рейтинг преподавателей).
4. Польза для бизнеса (упрощение поиска актуального контента).

В YeaHub уже расписано более 50 достижений. Суть в том, что ученики реально делали это, и у них есть примеры, на которые можно посмотреть, чтобы понять, что изучить. Также есть гайд и конспект по архитектуре YeaHub — как происходит деплой, как настроен Webpack, как работает CI/CD и так далее. Это закрывает любые вопросы по опыту на собеседовании. Я называю это "умной накруткой опыта", когда ты прокачиваешься и практикуешься 2-3 месяца, а потом идёшь трудоустраиваться на Middle с реальными кейсами, а не выдуманными из головы.

👍 Полный гайд по резюме есть тут - ГАЙД В НОУШЕН

Какие проблемы вас ждут во время обучения и как их обойти?

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

Будет полезно посмотреть для новичков. Начало с 48:40 минуты

https://boosty.to/m0rtymerr/posts/b82357bd-fa1b-4f6d-8205-6acf9ed92f91?share=post_link

Организация кода с использованием классов в JavaScript

Организация кода с использованием классов в JavaScript позволяет структурировать функциональность приложения, делая его более читаемым, поддерживаемым и масштабируемым. Рассмотрим два примера классов: один для управления API-запросами, другой для работы с задачами TODO.

⌛️ Класс для организации API-запросов
Этот класс будет отвечать за выполнение HTTP-запросов к различным конечным точкам API. Он может содержать методы для GET, POST, PUT, DELETE и других типов запросов, а также обрабатывать общие параметры, такие как заголовки и обработка ошибок.

class ApiService {
  constructor(baseURL, defaultHeaders = {}) {
    this.baseURL = baseURL;
    this.defaultHeaders = defaultHeaders;
  }

  async request(endpoint, method = 'GET', data = null, headers = {}) {
    const config = {
      method,
      headers: { ...this.defaultHeaders, ...headers },
    };

    if (data) {
      config.headers['Content-Type'] = 'application/json';
      config.body = JSON.stringify(data);
    }

    try {
      const response = await fetch(`${this.baseURL}${endpoint}`, config);
      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.message || 'Ошибка сети');
      }
      return await response.json();
    } catch (error) {
      console.error(`Ошибка при выполнении запроса: ${error.message}`);
      throw error;
    }
  }

  get(endpoint, headers = {}) {
    return this.request(endpoint, 'GET', null, headers);
  }

  post(endpoint, data, headers = {}) {
    return this.request(endpoint, 'POST', data, headers);
  }

  put(endpoint, data, headers = {}) {
    return this.request(endpoint, 'PUT', data, headers);
  }

  delete(endpoint, headers = {}) {
    return this.request(endpoint, 'DELETE', null, headers);
  }
}

🖥 Класс для работы с TODO
Этот класс будет использовать ApiService для взаимодействия с сервером и управлять задачами TODO. Он будет включать методы для создания, получения, обновления и удаления задач.

class TodoService {
  constructor(apiService) {
    this.api = apiService;
    this.endpoint = '/todos';
  }

  // Получить все задачи
  getAllTodos() {
    return this.api.get(this.endpoint);
  }

  // Получить задачу по ID
  getTodoById(id) {
    return this.api.get(`${this.endpoint}/${id}`);
  }

  // Создать новую задачу
  createTodo(todoData) {
    return this.api.post(this.endpoint, todoData);
  }

  // Обновить существующую задачу
  updateTodo(id, updatedData) {
    return this.api.put(`${this.endpoint}/${id}`, updatedData);
  }

  // Удалить задачу
  deleteTodo(id) {
    return this.api.delete(`${this.endpoint}/${id}`);
  }
}

✔️ Пример использования

const api = new ApiService('https://api.example.com', {
  Authorization: 'Bearer your-token-here',
});

const todoService = new TodoService(api);

// Получить все задачи
todoService.getAllTodos()
  .then(todos => console.log(todos))
  .catch(error => console.error(error));

// Создать новую задачу
todoService.createTodo({ noscript: 'Новая задача', completed: false })
  .then(todo => console.log('Создано:', todo))
  .catch(error => console.error(error));

⁉️ Почему использование классов полезно

- Инкапсуляция логики: Классы позволяют группировать связанные функции и данные вместе. В нашем примере ApiService отвечает только за HTTP-запросы, а TodoService — за управление задачами. Это разделение ответственности облегчает понимание и поддержку кода.
- Повторное использование кода: Общие методы, такие как get, post, put, delete в ApiService, могут быть использованы разными сервисами (не только TodoService). Это уменьшает дублирование кода и облегчает внесение изменений в одном месте.
- Удобство тестирования: Классы облегчают написание модульных тестов. Можно протестировать методы классов изолированно, замокав зависимости, такие как API-запросы.
- Масштабируемость: При росте приложения можно легко добавлять новые сервисы, наследуя или расширяя существующие классы. Это делает архитектуру приложения гибкой и устойчивой к изменениям.
- Поддержка и читаемость: Структурированный код легче читать и поддерживать, особенно в больших командах. Классы с четко определенными методами и назначением позволяют быстро понять, где искать нужную функциональность.
- Вынесение общих частей: Общие части, такие как базовый URL или заголовки запросов, можно определить в одном месте (ApiService), что упрощает их изменение и управление.

Использование классов для организации функциональности API и бизнес-логики способствует созданию чистой архитектуры, улучшает качество кода и облегчает дальнейшую разработку и поддержку приложения.

#frontend

✉️ YeaHub объединяет IT-специалистов.

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

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

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

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

✔️ Проверку знаний и подготовку к собеседованиям
✔️ Платформу для публикации и чтения статей
✔️ Сервис для анонсирования и участия в мероприятиях в IT
✔️ Полный roadmap по всем профессиям в области технологий

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

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

#yeahub

Компания: Ашан

Позиция: Middle

Вилка: От 260к

Вопросы:
❓ Что такое SEO и какие основные факторы влияют на его эффективность?
❓ Какие метатеги вы используете для оптимизации страниц и для чего они служат?
❓ Как правильно настроить метатеги для улучшения видимости сайта в поисковых системах?
❓ Что такое доступность веб-контента и почему она важна?
❓ Как используются атрибуты ARIA для улучшения доступности веб-приложений?
❓ Какие инструменты и методы вы применяете для обеспечения совместимости с экранными читалками?
❓ Что такое семантическая разметка и как она влияет на доступность?
❓ Как и когда использовать атрибут alt для изображений?
❓ Какие технологии верстки вы используете в своих проектах?
❓ Используете ли вы CSS-препроцессоры? Если да, то какие и почему?
❓ Что такое SCSS и какие преимущества он предоставляет по сравнению с обычным CSS?
❓ Что такое миксины в SCSS и для чего они используются?
❓ Как использование миксинов влияет на общий объем CSS и как вы справляетесь с увеличением кода?
❓ Как вы реализуете трехколоночную сетку с использованием CSS Grid?
❓ Как обеспечить перенос колонок при уменьшении ширины контейнера без использования медиазапросов, используя auto-fit или auto-fill?
❓ Что делать, если необходимо динамически менять количество колонок через пропсы в компоненте? Какие подходы вы используете (например, inline-стили, классы, переменные)?
❓ Объясните, как работает Event Loop в JavaScript.
❓ Какие способы клонирования объектов вы знаете и чем они отличаются?
❓ Какую структуру данных вы бы выбрали для сохранения порядка элементов и почему?
❓ Что такое WeakSet и WeakMap? В каких случаях их стоит использовать?
❓ Чем отличаются MutationObserver и IntersectionObserver? В каких сценариях применяются каждый из них?
❓ Что такое Proxy и Reflection в JavaScript? Приведите примеры их использования.
❓ Какие типы хранилищ существуют в браузере (например, LocalStorage, SessionStorage, IndexedDB)? В чем их основные отличия и области применения?
❓ Что такое CORS и как он работает? Как вы решаете проблемы, связанные с CORS в ваших проектах?
❓ Какие хуки существуют в React и для чего они используются?
❓ Расскажите подробнее о хуке useEffect. В чем разница между useEffect и useLayoutEffect?
❓ В чем отличие между хуками useReducer и useState? Когда стоит использовать каждый из них?
❓ Для чего используются хуки useMemo и useCallback? Как они помогают оптимизировать производительность?
❓ Как вы оптимизируете работу с большими списками данных в приложении? Что такое виртуализация списка и как она реализуется?
❓ Какие подходы вы используете для переопределения типов из библиотек в TypeScript (например, использование as never as SomeType)?
❓ Какие виды тестов существуют в разработке (юнит-тесты, интеграционные, e2e и т.д.)? Какой подход вы предпочитаете и почему?
❓ Какие методы вы используете для улучшения производительности веб-сайтов?
❓ Какие метрики производительности вы отслеживаете и как используете инструменты типа Lighthouse для их анализа и оптимизации?

А говорите, что не спрашивают базовые вопросы. В Ашан, кстати, нет этапа лайводинга. Скрининг -> Тех Собес -> Финал с Руководителем

#work #interview #frontend

🥸 О мифе сеньорского кода и чистоте разработки

Многие разработчики, особенно новички, считают, что их код недостаточно хорош, и мечтают увидеть «настоящий сеньорский код», чтобы перенять оттуда секреты чистоты и мастерства. Но правды ради, такого особенного сеньорского кода не существует.

На самом деле, в каждой компании, и даже в твоем Пет-проекте, код похож. Компоненты они и в Африке компоненты. Научиться писать качественный код можно просто, следуя базовым принципам и простой логике, без мифических сеньорских стандартов.

Чем отличается код в больших компаниях от твоего небольшого проекта? В маленьком проекте меньше сущностей, проще структура, и поддерживать его легче. А вот в крупном проекте добавляются интеграции, компоненты, обработка ошибок, загрузчики и множество других деталей, которые усложняют работу над ним. За счёт этого код в больших компаниях выглядит более «загруженным» и сложным.

💡 Главные навыки, которые необходимы в реальной разработке, — это умение читать чужой код, разбираться в проекте и подстраиваться под командные требования.

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

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

Вот основные принципы хорошего кода:

✏️ Декомпозиция: разбивайте код на более мелкие, логичные части. Это упрощает понимание, отладку и позволяет использовать код повторно.

✏️ Разделяйте ответственность: каждая функция, компонент или модуль должны выполнять одну конкретную задачу. Это делает код более предсказуемым и простым в поддержке.

✏️ Избегайте дублирования кода: если встречаете повторяющиеся блоки, вынесите их в отдельные функции или компоненты. Это упростит изменения и уменьшит количество ошибок.

✏️ Логически определяйте блоки кода и сущности: структурируйте код так, чтобы каждая его часть занималась своей ролью. Например, обработку данных выделяйте отдельно от их отображения.

✏️ Создавайте компоненты для переиспользования: разрабатывайте компоненты так, чтобы их можно было использовать в разных частях приложения. Это уменьшит дублирование и улучшит масштабируемость.

✏️ Делайте компоненты модифицируемыми: при разработке учитывайте возможность добавления новой функциональности без изменения уже существующего кода. Это упростит поддержку и добавление новых фич.

✏️ Избегайте жесткой связанности модулей: минимизируйте зависимости между модулями. Если один компонент сильно зависит от другого, это усложнит поддержку и тестирование. Используйте инъекцию зависимостей и интерфейсы для уменьшения связанности.

💡 В 80% случаев хороший код — это не паттерны, а простая логика и внимание к деталям.

#frontend #react #senior

👩‍💻 Подключение компонента с помощью connect

Хотя хуки являются современным способом работы с Redux, вы также можете использовать метод connect из библиотеки react-redux для подключения компонентов к Redux. Это более старый способ, но он по-прежнему широко используется и имеет свои преимущества.

// Компонент
const TodoList = ({ todos, addTodo, removeTodo }) => {
    // some logic
    return ();
};

// Определяем, какие данные из Redux store передать компоненту
const mapStateToProps = (state) => ({
    todos: state.todos.todos,
});

// Определяем, какие действия передать компоненту
const mapDispatchToProps = {
    addTodo,
    removeTodo,
};

// Подключаем компонент к Redux
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

Делаю сейчас курс по Redux + Redux Toolkit + RTK Query и вспомнил, как раньше подключались компоненты. Блин, выглядит круто. Может снова так делать.😅

Кто помнит? Олды есть?

#redux #react

👩‍💻 Принципы Redux

Redux основывается на нескольких ключевых принципах, которые помогают организовать и управлять состоянием приложения.

🔒 Единое хранилище (Single Source of Truth)

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

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

const initialState = {
    todos: [],
    user: null,
};

// Всё состояние хранится в одном объекте
const state = {
    todos: ['Задача 1', 'Задача 2'],
    user: { name: 'Иван', age: 30 },
};

👀 Состояние только для чтения (Read-Only State)

Единственным способом изменения состояния является отправка действия (action). Это гарантирует, что изменения состояния происходят только через определенные точки (actions), что делает их предсказуемыми.

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

// Действие для добавления задачи
const addTodo = (text) => ({
    type: 'ADD_TODO',
    payload: text,
});

// Изменение состояния только через действие
store.dispatch(addTodo('Новая задача'));

✨ Чистые функции редюсеры (Pure Functions)

Редюсеры должны быть чистыми функциями. Это значит, что для одинаковых входных данных они всегда должны возвращать одинаковый результат, и они не должны изменять свои входные данные.

Чистые функции делают состояние предсказуемым и упрощают отладку. Они не имеют побочных эффектов и не влияют на внешние состояния.

const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                todos: [...state.todos, action.payload],
            };
        default:
            return state; // Возвращаем новое состояние, не изменяя текущее
    }
};

⬇️ Однонаправленный поток данных (Unidirectional Data Flow)

Поток данных в Redux всегда односторонний. Это означает, что данные передаются от состояния к представлению, и изменения состояния происходят только через действия.

Однонаправленный поток данных упрощает понимание, как данные перемещаются в приложении. Он делает отладку проще, поскольку вы всегда знаете, откуда приходят данные и как они изменяются.

// Пример потока данных
const mapStateToProps = (state) => ({
    todos: state.todos,
});

// Компонент получает данные
const TodoList = ({ todos }) => (
    <ul>
        {todos.map((todo, index) => (
            <li key={index}>{todo}</li>
        ))}
    </ul>
);

// Связываем компонент с Redux
export default connect(mapStateToProps)(TodoList);

#redux #frontend #react #flux

🖥 Функция-конструктор в JavaScript

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

✏️ Создание функции-конструктора
Функция-конструктор выглядит как обычная функция, но она пишется с заглавной буквы по соглашению, чтобы отличаться от других функций. Внутри конструктора используется this для задания свойств создаваемого объекта.

function Person(name, age) {
    this.name = name; // свойство name
    this.age = age;   // свойство age
}

🎮 Создание объектов с помощью конструктора
Чтобы создать объект с помощью конструктора, используется оператор new. Он:

- Создает новый пустой объект.
- Связывает его с this внутри конструктора.
- Возвращает этот объект.

const person1 = new Person("Alice", 25);
console.log(person1.name); // Alice
console.log(person1.age);  // 25

➕ Добавление методов в конструктор
Если мы добавим метод прямо в конструктор, то он будет копироваться в каждый новый объект, что может тратить память.

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log(`Hi, I'm ${this.name}`);
    };
}

const person1 = new Person("Alice", 25);
person1.sayHello(); // Hi, I'm Alice

⚙️ Оптимизация с prototype
Для методов можно использовать prototype, чтобы метод существовал в одном экземпляре и не копировался для каждого объекта.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.sayHello = function() {
    console.log(`Hi, I'm ${this.name}`);
};

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

person1.sayHello(); // Hi, I'm Alice
person2.sayHello(); // Hi, I'm Bob

💭 Как работает this в конструкторе
В функции-конструкторе this указывает на новый объект, который создается при вызове через new. Это позволяет настраивать свойства и методы нового объекта.

💎 Продвинутые аспекты
- Наследование. Используя прототипы, можно создавать наследуемые свойства и методы.
- Проверка с instanceof. Для проверки, создан ли объект через конструктор, можно использовать instanceof.

console.log(person1 instanceof Person); // true

#javanoscript #this #function

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

В итоге не всегда самые компетентные и талантливые специалисты находят работу — часто именно те, кто умеет «адаптироваться» под автоматические фильтры и алгоритмы. Это ситуация, когда накрутка и ухищрения становятся частью игры. И все потому, что качественная работа выполняется лишь единицами. «Смузихлеб» — явление, где эффективность приносится в жертву потоку задач.

Накрутка, фильтры и нейронки не нужны, если каждый начнет выполнять свою работу на 100%.

Посмотрите видео Антохи, рекомендую 👍

🔗 https://www.youtube.com/watch?v=XMh6jFELLsw

⛔️ Топ причин, по которым могут уволить во время испытательного срока

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

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

1. Невнимательность к качеству верстки
Представьте, что вы — мидл-разработчик в компании с зарплатой 200к. Если на проверку вы отправите верстку, не соответствующую макету, вас не только неоднократно отправят на доработку, но и запомнят как ненадежного сотрудника. Поверьте, никто не захочет тратить дни на тестирование вашего кода, если вы каждый раз правите только одно замечание, а следом появляются новые. Это загружает тестировщика, который гоняет вас с правками 4-5 дней, и раздражает коллег, вынужденных ревьюить один и тот же код снова и снова.

💡 Что делать:
- Проверяйте верстку на соответствие макету с помощью Pixel Perfect.
- Старайтесь устранять все замечания разом, чтобы не засыпать коллег бессмысленными коммитами.

2. Отправка неаккуратных Pull Request
Задача — отправлять чистый, аккуратный коммит с минимальным количеством файлов и изменений. Если в файле не было задачи или необходимости в правках, не вносите туда изменения, даже если это просто пробел, кавычка или отступ. Изменение структуры, не связанной с задачей, отвлекает и создает беспорядок в истории проекта.

💡 Что делать:
- Добавляйте в PR только те файлы, которые реально были затронуты задачей.
- Не меняйте стили и форматирование файлов, если это не связано с вашей задачей.

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

💡 Что делать:
- Тестируйте каждую функцию локально перед отправкой на ревью.
- Проверяйте на разных разрешениях экрана и в разных браузерах, чтобы избежать багов.

4. Игнорирование пограничных случаев
Ваш код должен обрабатывать все возможные случаи, в том числе и пограничные. Например, пустые данные, необычные пользовательские вводы, нестандартные разрешения экранов. Это позволяет избежать "неожиданных" ошибок на продакшене и сохранить положительную репутацию кода.

💡 Что делать:
- Обдумайте все сценарии, в которых может использоваться функциональность, и протестируйте их.
- Чаще перезагружайте страницу, чтобы понять, возникнет ли ошибка, если данные придут пустыми, или нужного поля не будет

❗️ Следите за тем, что вы даете на проверку!

Ваша задача — сдавать код, который не вызовет ни единого замечания. Это стандарты работы, и никто не будет терпеть халатное отношение к задаче. Те, кто постоянно делает одни и те же ошибки, будут выгнаны с испытательного срока.

Учитесь работать над ошибками и доводить каждую задачу до идеала.

#frontend #work