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

🎮 Изменение свойств 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

🔼 Почему важно использовать 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

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

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

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

✔️ 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

📊 Все вокруг айтишники

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

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

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

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

Посмотрим на статистику:
- Число IT-специалистов в России выросло на 13% в 2023 году и составило 857 000 человек, заявило Минцифры.
- По данным Statista, к концу 2024 года численность разработчиков в мире достигнет 28,7 миллиона человек.
- В Соединенных Штатах насчитывается более 4,3 миллиона разработчиков.
- Германия — ведущая страна среди европейских стран, с 837 398 разработчиками.

Эти 28 миллионов составляют всего около 0.35% от общего числа населения Земли.

Много ли это? Сфера IT продолжает расти, как и количество сервисов и приложений. Есть множество отраслей, в которых программное обеспечение доисторического уровня. У меня есть друзья — строители, агрономы, которые шутят, что их заставляют работать с глючащим ПО, которое только усложняет их работу. Они даже просят меня переписать их рабочие приложения, в шутку, конечно же.

💡 Несмотря на рост IT-специалистов, новички находят работу за 1-2 месяца благодаря подготовке. Как активный участник IT сообществ, я вижу, что возможности для старта в этой сфере стали доступны как никогда раньше.

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

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

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

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

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

🎄 Скоро Новый год, а это значит — время подарков!

Антон Назаров и его канал ОМ запустили классный розыгрыш с крутыми призами. Участвовать легко, и шанс выиграть есть у каждого. Нужно всего подписаться на 3 канала.

Если хотите попробовать, вот ссылка на участие: Розыгрыш.

Удачи всем! 🚀

Может тоже запустить розыгрыш небольшой😅

Что разыграть?🤔

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

Этот челлендж поможет прокачать навыки в 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. Уже создали тематические Telegram-каналы, которые в будущем заменим полноценными сервисами на платформе. Планируем запустить агрегатор IT-мероприятий, сервис поиска работы и множество других решений.

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

🖥 YeaHub: Главные новости IT, обсуждения с экспертами и аналитика рынка.

👩‍💻 YeaHub Tech: Полезные гайды, статьи и материалы для развития ваших навыков.

🗓 YeaHub Events: Анонсы митапов, конференций, соревнований и вебинаров.

💵 YeaHub Job: Свежие вакансии, стажировки и лучшие карьерные советы.

🖥 YeaHub Frontend: Теория, задачи, тесты и вопросы для подготовки к собеседованиям.

Вы можете поддержать развитие YeaHub, подписавшись на наши каналы и делясь обратной связью. Это поможет нам сделать платформу ещё лучше!

#yeahub

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

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

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

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

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

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

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

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

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

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

🖥 CSS Houdini: Что это и зачем он нужен?

CSS Houdini — это набор API, который открывает доступ к "внутренностям" браузера, позволяя разработчикам управлять процессом рендеринга CSS.

С Houdini можно создавать кастомные свойства, работать с анимациями, управлять раскладкой элементов и даже разрабатывать свои типы CSS-процессоров.

📌 Custom Properties and Values API
Позволяет задавать пользовательские свойства с типизацией.

CSS.registerProperty({
  name: '--main-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

Теперь --main-color можно использовать как любое CSS-свойство, например, в анимациях.

📌 Paint API
Используется для создания кастомных графических эффектов.

class MyPaintWorklet {
  paint(ctx, size, properties) {
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, size.width, size.height);
  }
}
registerPaint('my-paint', MyPaintWorklet);

// Затем в CSS:
.element {
  background: paint(my-paint);
}

📌 Animation Worklet API
Упрощает создание сложных анимаций с минимальным воздействием на производительность. Например, плавные анимации, работающие на уровне композитора.

📌 Layout API
Дает контроль над раскладкой элементов. С ним можно реализовать свои алгоритмы расположения, например, нестандартные сетки.

📌 Parser API
Открывает доступ к разбору и интерпретации CSS-свойств.

Преимущества CSS Houdini
- Расчеты выполняются на уровне браузера, а не в основном потоке JavaScript.
- Вы можете создавать уникальные стили и эффекты, не дожидаясь поддержки новых CSS-фич.
- С его помощью можно создать настоящую экосистему кастомных стилей.

// paint.js
class DotsWorklet {
  paint(ctx, size, props) {
    const radius = size.width / 10;
    ctx.fillStyle = props.get('--dot-color').toString();
    for (let y = radius; y < size.height; y += 2 * radius) {
      for (let x = radius; x < size.width; x += 2 * radius) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fill();
      }
    }
  }
}
registerPaint('dots', DotsWorklet);

// styles.css
:root {
  --dot-color: red;
}

.element {
  background: paint(dots);
}

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

#css #browser #frontend #houdini

❓ 5 вопросов к разработчику, который накрутил опыт и устроился в IT

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

1. Что побудило вас накрутить опыт? Считаете ли вы это оправданным шагом, и как вы оцениваете его последствия для себя и рынка IT?

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

2. Какие трудности возникли во время накрутки? Было ли что-то, что вас особенно удивило или оказалось сложнее, чем ожидалось?

Было сложно от себя продумывать легенду, хотя на деле хватало небольшого базового рассказа на 2 минуты. Изучение технических вопросов собеседований в целом было самым лёгким этапом, хотя порой попадались вопросы, которые не затрагивал, или которые уже слышал, но подзабыл и перед собеседованием не повторил, или в каких-то вопросах немного не хватало детальности, но в целом вопросы - самое лёгкое. А вот задач собеседований много разных и можно наткнуться на ту, которую ты просто не знаешь или не знаешь какой-то трюк небольшой, хотя, прорешав достаточный набор разных, в целом можешь справиться или хотя бы просто показать своё мышление.

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

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

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

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

5. Удалось ли устроиться? Насколько сложной оказалась работа на новом месте, и с какими трудностями вы сталкиваетесь в реальных задачах?

Устроился и работаю, справляюсь с задачами, первые 2 недели привыкал ко всему новому, потом стало гораздо спокойнее и стал просто работать размеренно. Даже за первые несколько рабочих недель прокачался значительно, привык выполнять ТЗ в большом проекте. Мне сильно помогли навыки, которые я приобрёл во время обучения у своего ментора так, что придя на работу я с первой же недели вклинился в проект и начал в нём выполнять задачи. Сейчас ещё просто хочется поскорее ещё понабраться опыта и поработать с разными рабочими задачами для большей уверенности. В целом задачи бывают разные, но решаемые, со временем приходит какое-то решение.

#interview

🥇 Топ 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

🌈 Утилитарные классы

Утилитарные классы — это классы, которые применяют одно конкретное стильовое свойство. Например, text-center, bg-blue, p-4 и другие. Каждый из этих классов отвечает за отдельную задачу, такую как выравнивание текста, установка фона или добавление отступов. Их основная цель — сделать разработку быстрее и проще, не создавая громоздкие и избыточные CSS-правила.

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

👀 Пример использования утилитарных классов

Допустим, вам нужно создать карточку с текстом и кнопкой. Вместо того чтобы писать отдельные CSS-правила для каждого элемента, вы можете использовать утилитарные классы:

<div class="bg-gray-100 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-bold text-center mb-4">Заголовок</h2>
  <p class="text-base text-gray-700">Некоторое описание...</p>
  <button class="bg-blue-500 text-white p-2 rounded mt-4">Кнопка</button>
</div>

bg-gray-100 — задает светло-серый фон для карточки.
p-6 — добавляет отступы (padding) размером 1.5rem со всех сторон.
rounded-lg — округляет углы элемента.
shadow-md — добавляет тень.
text-xl — увеличивает размер шрифта заголовка.
font-bold — делает текст жирным.
text-center — выравнивает текст по центру.
mb-4 — добавляет отступ снизу у заголовка.
bg-blue-500 — задает синий фон кнопке.
text-white — делает текст кнопки белым.
p-2 — добавляет отступы для кнопки.
rounded — округляет углы кнопки.
mt-4 — добавляет отступ сверху у кнопки.

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

🎮 Утилитарные классы в Tailwind CSS

Tailwind CSS — это фреймворк, который полностью построен на утилитарных классах. Вместо того чтобы создавать отдельные CSS-правила для каждого компонента, в Tailwind используются уже готовые утилитарные классы, которые можно применять прямо в HTML-разметке. Это позволяет ускорить разработку и уменьшить объем CSS-кода, так как вы не пишете одни и те же правила для разных элементов, а просто комбинируете готовые классы.

Пример с использованием Tailwind CSS:

<div class="bg-blue-500 text-white p-4 rounded-lg shadow-lg">
  <h1 class="text-2xl font-semibold text-center">Привет, мир!</h1>
  <p class="mt-2 text-base">Это пример использования утилитарных классов в Tailwind CSS.</p>
</div>

В данном примере:

bg-blue-500 и text-white отвечают за цвета фона и текста.
p-4 — отступы.
rounded-lg — округление углов.
shadow-lg — тень.
text-2xl и font-semibold — стиль заголовка.
text-center — выравнивание текста по центру.
mt-2 — отступ сверху для параграфа.

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

#css

Двойные стандарты в айти

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

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

я уже писала об этом огромный пост, советую заценить:
• Лицемерие в айти

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

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

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

ну я короче это, сеньор)))

и недавно появилась такая вот забавная тенденция: теперь уже эти аутстаффы проверяют опыт кандидатов по трудовой, прежде чем человека на собес позвать, чтобы НЕ ТРАТИТЬ НА НЕГО ВРЕМЯ, а то вдруг он уже накрутил и мы ему еще если накрутим, то он ж не справятся, порвется, а мы на деньги перед заказчиком попадем!!!

короче, лохов без опыта не берём, возьмем только опытных))

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

я уже не говорю о том, как походы на собесы с накруткой от аутстаффа портят вам карьеру в дальнейшем, так как ваше СУПЕРНАКРУЧЕННОЕ резюме будет храниться в базах тех компаний, когда вы захотите уволиться из своего аутстаффа и выйти самостоятельно на рынок…но об этом в следующем посте

ребят, если вас от накрутки останавливает этичность вопроса — перечитайте пост
если останавливает незнание как это делать не спалившись и не выгореть от попыток — смотрите полный гайд

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

расслабьтесь, ребятки, тут давно такие правила
всех чмок всем пис 👍

Грейд: Мидл+/Сеньор

Компания: Wildberries

Опыт: 3.5

Этап: Финал

Вилка: 250к - 300к

Пример собеседования, на котором копают опыт и софты. Куча вопросов. Собеседование проходило недавно

Вопросы:
- Можешь рассказать, почему решил уйти с текущего проекта?
- Что тебе больше всего нравится в твоей работе?
- Приходилось ли тебе взаимодействовать с другими командами, и что обычно включало это взаимодействие?
- Как вы получали задачи: был ли бэклог, кто их формировал?
- Какую роль ты играл в декомпозиции задач? Какие подходы предлагал, по какому принципу действовал?
- Можешь вспомнить задачу, которая была самой неопределенной? Как справлялся с ней?
- Что, на твой взгляд, важнее — интересы бизнеса или интересы пользователя?
- Продвигаешь ли ты свои идеи и новшества в команде? Как ты аргументируешь свои предложения?
- По каким признакам или метрикам определяешь, что команда действительно продуктивна и приносит ценность?
- Какой был состав команды, в которой ты работал?
- Как у вас проходило код-ревью? Что для тебя в нем важно, и что бы не хотелось видеть?
- Бывали ли сложности в общении с коллегами? Может, вспомнишь какой-то спорный случай?
- Сталкивался ли ты с неэффективными процессами? Как к этому относишься?
- Приходилось ли тебе принимать риски — продуктовые или технические? Как ты к ним подходил?
- Были ли ситуации, когда горели сроки? Как ты считаешь, кто в этом виноват?
- Как ты организуешь свое личное развитие, что читаешь? Какие видишь перспективы?
- Интересно ли тебе попробовать себя в роли менеджера?
- Был ли у тебя опыт самостоятельного ведения проектов?
- Какая из задач была для тебя самой сложной? Почему?
- Как ты организуешь работу над задачей? Используешь ли планирование?
- Получал ли ты развивающий фидбек по своим софт-скиллам? Как на это реагировала?
- Как оцениваешь задачи? Вспомни случай, когда пришлось работать с претензией или получать обратную связь — как действовал?
- Какие у тебя ожидания от новой команды?
- Какие ожидания у тебя к руководителю?
- Как ты оцениваешь качество своей работы?

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

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

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

🚀 [Версия 1.0.0] - Релиз платформы!

Привет, друзья! 🎉 Мы рады сообщить, что первая версия нашей платформы готова и доступна! В этой версии:

✔️ Добавлен сервис подготовки к собеседованиям.

Мы сделали первый шаг и теперь работаем над новыми фичами, чтобы помочь вам ещё быстрее и эффективнее подготовиться к важным этапам в карьере. Ваши отзывы очень важны для нас, пишите, что вам нравится и что можно улучшить! 💬

🔥 Что дальше? Следите за обновлениями – скоро будет ещё больше интересных возможностей!

👍 Обучайтесь, общайтесь, растите вместе с https://yeahub.ru

#release #news #update #yeahub

👀 Контроль сотрудников на работе: история из личного опыта

Когда я впервые столкнулся с системой тайм-трекинга, работая в аутсорсинговой компании, это стало для меня настоящим испытанием. Я тогда занимался разработкой криптокошелька для лондонской компании, и это был мой первый проект на европейском рынке.

Рабочий день начинался с обязательного включения тайм-трекера. Программа фиксировала всё: время работы, активность на клавиатуре и мыши, а также записывала экран. Если активность снижалась, мог последовать вопрос от тимлида: "Почему у тебя так мало активности? Ты целый день ничего не делал?".

Самое сложное заключалось в том, что после 10 минут бездействия таймер сбрасывался на 10 минут назад и останавливался. Нужно было набирать ровно 8 часов активности — ни минутой меньше. Представьте, как я бегал в туалет, делал чай или обедал! У меня не было ноутбука, поэтому я буквально каждые 8 минут возвращался к компьютеру, чтобы не сбился таймер.

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

Этот опыт научил меня многому, но и вымотал колоссально. Теперь я с пониманием отношусь к людям, которые сталкиваются с подобными системами контроля.

А у вас был подобный опыт? Делитесь в комментариях!
Если интересна тема, рекомендую видео Антохи: https://youtu.be/3eMAc4Dc5sY.

Флешбеки до сих пор... 😬