Какие претензии у айтишников к новичкам?

Это дополнение к посту о Дедовщине в IT. Стрим про Гейткиперов)
Залетайте на стрим 🔥

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

🥇 Топ 6 сложных вопросов в JavaScript (По версии YeaHub)

1. Объясните концепцию прототипного наследования в JavaScript.
Для новичков это сложно, так как прототипное наследование отличается от классического, и требует понимания работы с prototype и цепочки прототипов.

2. Что такое __proto__ и prototype?
Термины часто путают, и для их понимания нужно хорошо разобраться в механизме наследования JavaScript.

3. Какие есть способы оптимизации ресурсоемких операций в JavaScript для улучшения производительности рендеринга контента?
Вопрос охватывает широкий круг тем: от дебаунсинга/троттлинга до работы с Web Workers и Virtual DOM.

4. Какие ключевые метрики используются для оценки производительности веб-сайта?
Метрики вроде FCP, LCP, TTI и CLS требуют понимания принципов работы браузеров и инструментов анализа.

5. Что такое CSS Houdini?
Вопрос сложен, так как Houdini относится к продвинутым возможностям CSS, с которыми новички редко сталкиваются.

6. Какие техники используются для критического CSS и ленивой загрузки стилей?
Вопрос требует знания оптимизаций загрузки, которые выходят за рамки базового понимания JavaScript.

❗️ Почему эти вопросы сложны?
- Неочевидные темы для новичков. Начинающие часто изучают основы: переменные, циклы, функции, но не погружаются в нюансы, как, например, прототипное наследование или CSS Houdini.
- Широкий охват знаний. На собеседовании могут ожидать объяснений с примерами и понимания теории, что сложно освоить быстро.
- Редкость на практике. Некоторые темы, как CSS Houdini или критический CSS, менее распространены и не всегда встречаются в повседневной работе.

Не согласны с подборкой? Присоединяйтесь к YeaHub (@yeahub_community) и предлагайте свои вопросы или оценки! Вместе сделаем IT лучше и удобнее для всех 🚀

👍 @yeahub

❓ Куда пропал?

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

В планах — сформировать большое IT-сообщество, проводить профессиональные встречи и создать более 20 сервисов для обучения, развития, карьеры, досуга и работы. Работа идёт полным ходом, постепенно воплощаем эти идеи в жизнь.

Менторство активно развивается: каждую неделю проводим 6–7 групповых занятий — лекции, митапы, собеседования и лайвкодинг. Создали полный курс по фронтенду, завершили курс по Webpack, подготовили материалы по линтерам и форматерам и другим технологиям и инструментам. Ученики трудоустраиваются. Практику расширяем на платформе YeaHub, приходит много новых ребят, заряженных на результат.

С января планирую вернуться к съёмке видео на YouTube. Основные темы — материалы из обучения, такие как Webpack, архитектура приложений, инструменты и другие важные аспекты. Также хочу записать новые курсы по JavaScript и CSS на основе текущих материалов с менторства.

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

На этих выходных выступаю с докладом «Как понять программирование, если вы не технарь?» в ОМ. А 16 декабря стартует мастермайнд, где вместе с IT-специалистами, блогерами, менторами и стартаперами будем обсуждать точки роста и возможности для развития. Веду активную айтишную жизнь

Если среди моих подписчиков есть бэкендеры, владеющие Nest.js, и вы хотите принять участие в развитии YeaHub, обязательно пишите! Мы создаём платформу с огромными возможностями.

Как у вас дела? Что нового происходит? Кстати, с наступающим Новым годом! 🎄

https://github.com/YeaHubTeam/yeahub-platform

💡 Как понять программирование, если вы не технарь?

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

➕ Развивайте навык обучения
Умение учиться — ключ к освоению программирования. Экспериментируйте с подходами, чтобы найти свой эффективный стиль:

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

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

➕ Определитесь с мотивацией и целями
Перед началом обучения важно принять твёрдое решение двигаться вперёд. Постоянные сомнения и мысли вроде "вдруг я трачу время впустую?" могут сбить с пути. Для этого:

- Выпишите причины, почему хотите стать разработчиком.
- Определите плюсы и перспективы профессии.
- Поставьте цели с конкретными дедлайнами.

Уверенность в себе и чёткий план помогут не отвлекаться и эффективно использовать время.

➕ Регулярность — залог успеха
Изучение программирования требует постоянства. Большие перерывы приводят к откатам: забываются концепции, снижается мотивация. Найдите комфортный ритм, чтобы занятия стали привычкой.
Если чувствуете, что подходите к сложной теме, не откладывайте. Работайте над ней, пока материал свеж в голове. Это поможет быстрее преодолеть барьер и закрепить знания.

➕ Повторяйте, чтобы закрепить
Программирование — это навык, который требует постоянного повторения. Возвращайтесь к изученным темам, рассматривайте их под разными углами. Например, попробуйте объяснить концепцию другому человеку или перескажите её своими словами.
Регулярное повторение укрепляет память и делает сложные вещи более понятными.

➕ Практикуйтесь как можно больше
Код — это не теория, а практика. Чем больше пишете, тем быстрее поймёте логику и начнёте мыслить алгоритмически. Начинайте с простых задач, чтобы набить руку, а затем переходите к сложным проектам.
Практика помогает развить абстрактное мышление, умение по шагам решать задачи и преобразовывать код в конечный результат.

➕ Погружайтесь в среду
Для эффективного обучения окружите себя программированием:

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

Чем больше вы взаимодействуете с профессиональным сообществом, тем быстрее адаптируетесь и станете частью индустрии.

➕ Не забывайте об отдыхе
Перерывы и смена активности важны для усвоения информации. Часто решение приходит не во время напряжённых размышлений, а после отдыха. Дайте себе время, чтобы «созреть».
Иногда спустя неделю или даже месяц изучение знакомой темы может стать легче. Новые нейронные связи сформируются, а информация ляжет на уже усвоенные знания.

➕ Челендж до конца недели

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

1. Переменные и типы данных

Напишите функцию greet(name), которая принимает имя и возвращает строку:
"Привет, [Имя]!"

console.log(greet("Иван")); // Привет, Иван!

2. Массивы и циклы

Дан массив чисел. Напишите функцию sumArray(arr), которая возвращает сумму всех чисел массива.

console.log(sumArray([1, 2, 3, 4])); // 10

3. Объекты

Создайте объект user с полями name, age и методом introduce, который возвращает строку:
"Привет, меня зовут [Имя], мне [Возраст] лет!"

const user = { name: "Иван", age: 30, introduce() { /* код */ } };
console.log(user.introduce()); // Привет, меня зовут Иван, мне 30 лет!

4. Функции высшего порядка

Напишите функцию filterArray(arr, callback), которая принимает массив и функцию-условие, возвращает новый массив с элементами, которые прошли условие.

console.log(filterArray([1, 2, 3, 4], (num) => num % 2 === 0)); // [2, 4]

5. Замыкания

Напишите функцию createCounter(start), которая возвращает объект с методами:
- increment(): увеличивает значение на 1;
- decrement(): уменьшает значение на 1;
- value(): возвращает текущее значение.

const counter = createCounter(5);
counter.increment();
console.log(counter.value()); // 6
counter.decrement();
console.log(counter.value()); // 5

6. Работа с DOM

Создайте страницу с кнопкой "Нажми меня". Напишите скрипт, который увеличивает счетчик кликов и отображает его на кнопке.

<button id="counter">Нажми меня</button>
<script>
  // код
</script>

7. Асинхронное программирование

Напишите функцию fetchData(url), которая делает запрос на указанный URL и возвращает данные. Используйте fetch.

fetchData("https://jsonplaceholder.typicode.com/todos/1").then(console.log);

8. Работа с API

Напишите функцию getPosts(), которая запрашивает список постов с того же API и выводит их на страницу в виде списка.

<ul id="posts"></ul>
<script>
  // код
</script>

9. TypeScript

Напишите универсальную функцию fetchData<T>(url: string): Promise<T>, которая делает запрос на указанный URL и возвращает данные с типизацией через дженерик.

- Получение списка постов:

fetchData<Post[]>("https://jsonplaceholder.typicode.com/posts").then(console.log);

- Получение списка пользователей:

fetchData<User[]>("https://jsonplaceholder.typicode.com/users").then(console.log);

💡 Гайд по процессам. Отвечаю на вопросы про опыт, по YeaHub

Снял для учеников небольшой гайд по прохождению блока вопросов по процессам. Качество картинки плохое, снимал для учеников, но решил сюда тоже добавить.

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

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

Вопросы из видео:
1. Расскажи про команду
2. По какой методалогии работали?
3. Расскажи подробнее про процессы
4. Кто давал задачи?
5. Как проходило ревью?
6. Как проходил релиз?
7. С кем из команды взаимодействовали?

📎 Основные инструменты для анализа и форматирования кода

Поддержка кода так же важна, как его написание. Если код плохо организован, это может привести к:
- Ошибкам, которые сложно обнаружить.
- Сложностям в его понимании и доработке.
- Несоответствию стилей написания.

Вот ключевые инструменты, которые помогут избежать этих проблем:

✔️ ESLint — Линтер для JavaScript/TypeScript

Проблема: Ошибки и несоответствие стандартам кода.
Решение:
- Находит баги и предупреждает о потенциальных проблемах.
- Проверяет стиль написания (например, использование ; или длину строк).
- Исправляет часть ошибок автоматически.

const unusedVar = 42; // unusedVar не используется
console.log('Hello')

✔️ Prettier — Инструмент для форматирования кода

Проблема: Разный стиль оформления у разработчиков.
Решение: Приводит код к единому виду (отступы, кавычки, длина строк и др.).

// До форматирования:
function test ( ) {console.log( "Hello!" )}

// После Prettier:
function test() {
  console.log("Hello!");
}

✔️ Stylelint — Линтер для CSS/SCSS

Проблема: Ошибки и несоответствие стандартам в стилях.
Решение: Проверяет чистоту и стандарт кода CSS/SCSS.

button {
  color: red;
  color: blue; /* Ошибка: дублирование свойства */
}

✔️ PostCSS — Обработчик CSS

Проблема: Сложность управления стилями в крупных проектах.
Решение:
- Добавляет вендорные префиксы.
- Минифицирует стили для производительности.

/* Исходный код: */
display: flex;

/* После PostCSS: */
display: -webkit-box;
display: -ms-flexbox;
display: flex;

✔️ Husky — Автоматизация проверки перед коммитом

Проблема: Внесение невалидного кода в репозиторий.
Решение: Запускает проверки (линтеры, тесты) перед коммитом.

Пример: Husky не позволит закоммитить файлы, не прошедшие ESLint.

✔️ lint-staged — Проверка только изменённых файлов

Проблема: Долгое время проверки всего проекта.
Решение: Проверяет только изменённые файлы в коммите, ускоряя процесс.

Пример: Если вы изменили только app.js, линтер будет запущен только для этого файла.

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

#eslint #husky #prettier #postcss

🔼 Почему важно использовать lazy-loading

Lazy-loading (ленивая загрузка) — это способ загружать ресурсы (изображения, компоненты) только тогда, когда они нужны. Это улучшает скорость загрузки страницы, снижает нагрузку на сервер и экономит трафик.

⚠️ Проблема

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

✔️ Решение

Lazy-loading изображений
Современный HTML позволяет указать атрибут loading="lazy":

<img src="example.jpg" alt="Описание" loading="lazy" />

Это простой и поддерживаемый способ ленивой загрузки.

Lazy-loading компонентов в React
В React можно использовать React.lazy и Suspense:

import React, { Suspense } from 'react';

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h1>Главная страница</h1>
      <Suspense fallback={<div>Загрузка...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

Компонент HeavyComponent загрузится только тогда, когда он понадобится.

💎 Преимущества
- Ускоряет загрузку страницы.
- Снижает объем передаваемых данных.
- Улучшает производительность и SEO.

Используйте lazy-loading, чтобы сделать ваши проекты быстрее и удобнее для пользователей.

#lazy #react #optimization

🎮 Изменение свойств DOM и их влияние на Repainting и Layouting

Когда изменяется DOM, браузер перерасчитывает его внешний вид и положение на экране. Этот процесс делится на два этапа:

- Layout (или reflow) – перерасчёт геометрии элементов (размеры, положение, отступы и т.д.).
- Repainting – перерисовка внешнего вида элементов (цвет, тень, шрифт и т.д.) без изменения их размеров или положения.

➕ 1. Layout (Reflow)
Что вызывает Layout? Изменения, влияющие на размеры, положение или геометрию элементов. После Layout, браузеру необходимо заново отрисовать элемент (Repainting).

Примеры действий:

// Изменение размеров элемента:
element.style.width = "200px";
element.style.height = "100px";

// Изменение положения (например, top, left, margin, padding):
element.style.margin = "20px";
element.style.top = "50px";

// Добавление или удаление DOM-элементов:
const newDiv = document.createElement("div");
document.body.appendChild(newDiv);

// Изменение шрифта, которое изменяет размеры текста:
element.style.fontSize = "24px";

// Изменение значения display или position:
element.style.display = "block";
element.style.position = "absolute";

Оптимизация: Layout – затратный процесс, поэтому избегайте его частого вызова. Например, изменения в цикле следует группировать через requestAnimationFrame.

➕ 2. Repainting
Что вызывает Repainting? Изменения внешнего вида элемента, которые не влияют на его размеры или положение.

Примеры действий:

// Изменение цвета фона:
element.style.backgroundColor = "blue";

// Изменение цвета текста:
element.style.color = "red";

// Изменение тени:
element.style.boxShadow = "5px 5px 10px gray";

// Прозрачность:
element.style.opacity = "0.5";

Оптимизация: Хотя Repainting менее затратный, чем Layout, частые изменения могут вызывать визуальные задержки. Используйте classList для массового применения стилей.

✔️ Советы для оптимизации производительности
Избегайте частого обращения к Layout-метрикам. Методы, такие как offsetWidth, offsetHeight, getComputedStyle и подобные, вызывают синхронный Layout. Если нужно получить несколько значений, лучше сохранять их в переменные.

// Пример (неоптимально):
const width = element.offsetWidth;
const height = element.offsetHeight;

// Пример (оптимально):
const { offsetWidth, offsetHeight } = element;

Используйте классы вместо инлайн-стилей. Вместо применения стилей по одному:

element.style.color = "white";
element.style.backgroundColor = "black";

// Применяйте класс:
element.classList.add("dark-theme");

Используйте transform и opacity для анимаций. Эти свойства не вызывают Layout или Repainting. Браузер оптимизирует их через GPU:

element.style.transform = "translateX(100px)";
element.style.opacity = "0.5";

Группируйте изменения через requestAnimationFrame. Это поможет избежать промежуточных пересчётов:

requestAnimationFrame(() => {
  element.style.width = "300px";
  element.style.height = "150px";
});

#browser #repainting #reflow