Руслан Куянец | Reactify – Telegram
Руслан Куянец | Reactify
5.85K subscribers
704 photos
52 videos
39 files
287 links
Я IT-специалист, ментор и основатель проекта YeaHub и сообщества Reactify. Здесь рассказываю про Frontend и IT.

Менторство:
https://reactify.ru

YouTube канал:
https://youtube.com/@reactify-it

YeaHub:
https://yeahub.ru/

Связь:
@ruslan_kuyanets
Download Telegram
Компания: Ашан

Позиция: 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍125🔥3
Паттерн Адаптер в JavaScript. Продвинутый Frontend на реальных примерах

В этом видео мы рассмотрим Паттерн Адаптер (Adapter) в контексте JavaScript и Frontend разработки.

Для проекта Рецептов используем Webpack, JavaScript.

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

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

#frontend #patterns #adapter
🔥125👍1
Разница между паттерном Адаптер и Маппер

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

Адаптер (Adapter Pattern)
Паттерн Адаптер позволяет объектам с несовместимыми интерфейсами работать вместе. Он выступает в роли посредника, переводя один интерфейс в другой. Основное предназначение — это сделать два интерфейса совместимыми, не изменяя существующий код.

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

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


💭 Для меня Адаптер — это способ адаптировать данные и методы, чтобы разные системы или компоненты могли работать вместе.
Маппер — это инструмент для преобразования данных в определённый формат. Например, если у нас есть разные сущности, но мы хотим сделать общий дропдаун, маппер преобразует данные так, чтобы они подходили для этого дропдауна. Это позволяет избежать дублирования кода.


#frontend #javanoscript #patterns
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥7💯2
🚨 Что такое Sentry и для чего он нужен?

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

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

🖥 Скрин 1: Интеграция Sentry в приложение. Возможность добавлять кастомные события, отслеживать сессии пользователей.

🖥 Скрин 2: Дашборд Sentry для отслеживания всех ошибок.

🖥 Скрин 3: Страница конкретной ошибки с подробной информацией, включая видео, как ошибка произошла у пользователя.

Сейчас работаю над интеграцией Sentry, Grafana и Prometheus в YeaHub. Когда релизим платформу, появится больше времени на создание контента. Будем делиться опытом и разбираться во всей архитектуре фронтенд-приложений.


#frontend #react #yeahub #sentry
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥4💯3😁1
🥸 О мифе сеньорского кода и чистоте разработки

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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


#frontend #react #senior
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22🔥4💯3😁1
👩‍💻 Подключение компонента с помощью 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥5🤝1
👩‍💻 Принципы 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22🔥65😁1💯1
🖥 Функция-конструктор в 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥5💯1
Я за активность и действия, и в любой сфере всегда найдутся люди, которым проще искать пути наименьшего сопротивления. Хотя лень действительно движет прогресс вперед, порождая различные лайфхаки для упрощения работы, суть остается простой: у многих рекрутеров задача не в том, чтобы найти идеального специалиста, а просто закрыть вакансию. Им платят за процесс, а не за качество найма.

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

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

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

🔗 https://www.youtube.com/watch?v=XMh6jFELLsw
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥5💯3
⛔️ Топ причин, по которым могут уволить во время испытательного срока

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

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

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

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


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

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


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

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


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

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


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

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

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

#frontend #work
Please open Telegram to view this post
VIEW IN TELEGRAM
👍33🔥4💯3
🥵 Стресс после трудоустройства

Трудоустройство в IT — это всегда вызов. Независимо от уровня опыта, у большинства возникают одинаковые опасения: "Разберусь ли в проекте?", "Не разочарую ли команду?", "Смогу ли выполнить ожидания?" Эти вопросы сопровождают нас не только в начале карьеры, но и спустя годы работы.

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

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

💡 Вот несколько советов для снижения стресса на новом месте:

1. Дайте себе время
Не требуйте от себя всего сразу. Привыкание к проекту занимает время.

2. Задавайте вопросы
Никто не ожидает, что вы всё знаете. Спрашивайте — это быстрее приведет к пониманию задач.

3. Осваивайте поэтапно
Беритесь за одну задачу за раз, избегайте перегрузки.

4. Найдите коллег для поддержки
Опытные сотрудники могут поделиться знаниями и упростить адаптацию.

5. Фиксируйте прогресс
Записывайте успехи, чтобы видеть результаты и укреплять уверенность.

6. Снимите самокритику
Ошибки неизбежны. Оценивайте свои усилия, а не только результаты.

7. Берегите здоровье
Режим сна и питания помогут избежать выгорания.

Антоха на стриме рассказал подробнее про трудоустройство и испытательный срок. Кстати, у него новый YouTube-канал — в ближайшее время он выпустит много годного контента 👍

https://www.youtube.com/live/KMsrfLvRLN0?si=TEFseo6--7wDmqGF&t=520
Please open Telegram to view this post
VIEW IN TELEGRAM
💯12👍5🔥32
👩‍💻 React Новости

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

Ставьте лукас, если смотрели React Новости 👍

🔗 Ссылка на видео
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28🔥3💯2
🖥 DOM Mutation Observer

Mutation Observer — это интерфейс, позволяющий отслеживать изменения в DOM, такие как добавление или удаление элементов, изменение атрибутов или текста. Он предоставляет более эффективный способ наблюдать за изменениями, чем старые методы вроде Mutation Events, так как не блокирует поток выполнения и может отслеживать сразу несколько изменений.

Mutation Observer полезен, если нужно:
- отслеживать изменения в структуре DOM (например, добавление или удаление элементов);
- реагировать на изменения атрибутов элементов;
- мониторить текстовое содержимое элементов, например, для динамически обновляемых данных.


Создание Mutation Observer

Создать Mutation Observer можно с помощью конструктора MutationObserver, в который передается колбэк-функция. Эта функция будет вызываться с массивом записей (`MutationRecord`), описывающих изменения.


const observer = new MutationObserver((mutationsList) => {
mutationsList.forEach((mutation) => {
console.log(mutation);
});
});


Каждый объект `mutation` в `mutationsList` содержит информацию о произошедшем изменении, включая:
- `type` — тип изменения (`childList`, `attributes`, или `characterData`);
- `target` — целевой элемент, где произошло изменение;
- `addedNodes` и `removedNodes` — список добавленных или удаленных узлов, если `type` — `childList`;
- `attributeName` — имя измененного атрибута, если `type` — `attributes`.


Начало наблюдения

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


const targetNode = document.getElementById('targetElement');
observer.observe(targetNode, {
childList: true, // следить за добавлением и удалением дочерних элементов
attributes: true, // следить за изменением атрибутов
characterData: true, // следить за изменением текстового содержимого
subtree: true // отслеживать изменения во всех потомках
});


Остановка наблюдения

Когда больше не нужно отслеживать изменения, можно остановить наблюдение с помощью метода disconnect():


observer.disconnect();


Полезные параметры конфигурации
- `childList`: отслеживает добавление и удаление дочерних элементов.
- `attributes`: отслеживает изменения атрибутов у целевого элемента.
- `characterData`: отслеживает изменения текстового содержимого.
- `subtree`: если установлено в `true`, позволяет отслеживать изменения не только у целевого элемента, но и у всех его потомков.


#javanoscript #observer
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍52
🖥 Intersection Observer

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

Intersection Observer полезен, если нужно:
- отслеживать появление элементов на экране (например, для ленивой загрузки изображений);
- анимировать элементы при их появлении в зоне видимости;
- отслеживать видимость рекламы или элементов пользовательского интерфейса.


Создание Intersection Observer

Создать Intersection Observer можно с помощью конструктора IntersectionObserver, в который передается колбэк-функция. Эта функция будет вызываться с массивом записей (IntersectionObserverEntry), описывающих пересечения.


const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry);
});
});


Каждый объект entry в entries содержит информацию о пересечении, включая:
- isIntersecting — флаг, указывающий, находится ли элемент в зоне видимости;
- target — целевой элемент, для которого произошло пересечение;
- intersectionRatio — процент видимой части элемента;
- boundingClientRect — размеры и положение целевого элемента относительно видимой области.


Начало наблюдения

Чтобы начать наблюдение, нужно использовать метод observe и указать целевой элемент:


const targetNode = document.getElementById('targetElement');
observer.observe(targetNode);


Остановка наблюдения

Когда больше не нужно отслеживать пересечения, можно остановить наблюдение с помощью метода unobserve() или полностью прекратить работу с disconnect():


observer.unobserve(targetNode);
observer.disconnect();


Полезные параметры конфигурации

При создании IntersectionObserver можно указать дополнительные настройки, которые управляют его поведением:
- root: элемент, который будет использоваться в качестве контейнера для отслеживания видимости. По умолчанию — null, то есть будет использоваться viewport.
- rootMargin: отступы вокруг root, которые позволяют изменять зону видимости (например, rootMargin: "0px 0px -50% 0px").
- threshold: массив значений (от 0 до 1), задающий, какой процент видимости элемента должен быть достигнут, чтобы вызвался колбэк. Например, threshold: [0, 0.5, 1] вызовет колбэк при 0%, 50%, и 100% видимости.


#javanoscript #intersection_observer
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥62💯2
🥸 Дедовщина в IT

Я давно вышел из всех чатов, где "помогают" новичкам. Почему? Из-за дедов, которые самоутверждаются на начинающих. Сколько раз я видел, как новичка прессуют: "это не твое", "иди обратно на завод", "ты тупой". Как только начинаешь говорить о курсах, сразу: "Какие курсы? Ты чего? Книги читай, и только на английском! Документацию учи!"

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

Если будет время, посмотрите это видео на досуге. База 💯.

https://www.youtube.com/watch?v=MGWZP4OjCHM
Please open Telegram to view this post
VIEW IN TELEGRAM
17🔥6👍4💯2
🤫 Почему ИИ не заменит программистов

Ко мне часто приходят на консультации по фронтенд-разработке, и один из самых популярных вопросов звучит так:
"А стоит ли вообще начинать учиться, если ИИ скоро заменит программистов? Я боюсь, что выучу всё, а работы не будет, потому что всё будут делать машины."

Я решил поделиться своими мыслями на эту тему. Вот несколько причин, почему я уверен, что ИИ не заменит программистов:

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

Креативность и нестандартное мышление
Программирование — это не просто написание кода. Это поиск новых решений, генерация идей и эксперименты. ИИ отлично справляется с рутиной, но творческий процесс, интуиция и способность мыслить "вне коробки" остаются человеческой прерогативой.

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

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

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

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

Недавно слышал мнение, что ИИ достиг своего "потолка эффективности". Увеличение мощностей больше не дает таких же резких улучшений, как раньше. Это отражает принцип Парето: 20% усилий дают 80% результата.

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

А что вы думаете?

#ai
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18💯6🔥41
👀 Контроль сотрудников на работе: история из личного опыта

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

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

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

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

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

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

Флешбеки до сих пор... 😬
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10😢21🔥1💯1
Forwarded from YeaHub
🚀 [Версия 1.0.0] - Релиз платформы!

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

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

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

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

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

#release #news #update #yeahub
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥22👍75💯1