Frontend разработчик
رفتن به کانال در Telegram
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS. По всем вопросам @evgenycarter РКН clck.ru/3KoFrk
نمایش بیشتر
شبکه:📈 تحلیل کانال تلگرام Frontend разработчик
کانال Frontend разработчик (@frontend_1) در بخش زبانی روسی بازیگری فعال است. در حال حاضر جامعه شامل 10 367 مشترک است و جایگاه 11 715 را در دسته فناوری و برنامه‌ها و رتبه 61 305 را در منطقه روسيا دارد.
📊 شاخص‌های مخاطب و پویایی
از زمان ایجاد در невідомо، پروژه رشد سریعی داشته و 10 367 مشترک جذب کرده است.
بر اساس آخرین داده‌ها در تاریخ 15 اکتبر, 2026، کانال فعالیت پایداری دارد. در ۳۰ روز گذشته تغییر اعضا برابر -70 و در ۲۴ ساعت گذشته برابر 0 بوده و همچنان دسترسی گسترده‌ای حفظ شده است.
- وضعیت تأیید: تأیید نشده
- نرخ تعامل (ER): میانگین تعامل مخاطب 6.99% است و در ۲۴ ساعت نخست پس از انتشار، محتوا معمولاً 3.20% واکنش نسبت به کل مشترکان کسب می‌کند.
- دسترسی پست‌ها: هر پست به طور میانگین 725 بازدید دریافت می‌کند. در اولین روز معمولاً 332 بازدید جمع‌آوری می‌شود.
- واکنش‌ها و تعامل: مخاطبان به‌طور فعال حمایت می‌کنند؛ میانگین واکنش به هر پست 4 است.
- علایق موضوعی: محتوا بر موضوعات کلیدی مانند css, javascript, программист, интерфейс, developer تمرکز دارد.
📝 توضیح و سیاست محتوایی
نویسنده این فضا را محل بیان دیدگاه‌های شخصی توصیف می‌کند:
“Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS.
По всем вопросам @evgenycarter
РКН clck.ru/3KoFrk”
به لطف به‌روزرسانی‌های پرتکرار (آخرین داده در تاریخ 16 اکتبر, 2026)، کانال همواره به‌روز و دارای دسترسی بالاست. تحلیل‌ها نشان می‌دهد مخاطبان به‌طور فعال با محتوا تعامل دارند و آن را به نقطه اثرگذاری مهم در دسته فناوری و برنامه‌ها تبدیل کرده‌اند.
10 367
مشترکین
اطلاعاتی وجود ندارد24 ساعت
-267 روز
-7030 روز
در حال بارگذاری داده‌ها
کانال‌های مشابه
ابر برچسب‌ها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اکتبر '26اکتبر '26
اکتبر '26
+3
در 0 کانال‌ها
سپتامبر '26
+15
در 0 کانال‌ها
Get PRO
اوت '26
+17
در 0 کانال‌ها
Get PRO
ژوئیه '26
+26
در 0 کانال‌ها
Get PRO
ژوئن '26
+27
در 0 کانال‌ها
Get PRO
مه '26
+70
در 0 کانال‌ها
Get PRO
آوریل '26
+27
در 0 کانال‌ها
Get PRO
مارس '26
+16
در 0 کانال‌ها
Get PRO
فوریه '26
+29
در 0 کانال‌ها
Get PRO
ژانویه '26
+19
در 0 کانال‌ها
Get PRO
دسامبر '25
+29
در 0 کانال‌ها
Get PRO
نوامبر '25
+45
در 31 کانال‌ها
Get PRO
اکتبر '25
+19
در 0 کانال‌ها
Get PRO
سپتامبر '25
+58
در 36 کانال‌ها
Get PRO
اوت '25
+35
در 1 کانال‌ها
Get PRO
ژوئیه '25
+58
در 26 کانال‌ها
Get PRO
ژوئن '25
+71
در 19 کانال‌ها
Get PRO
مه '25
+57
در 45 کانال‌ها
Get PRO
آوریل '25
+46
در 37 کانال‌ها
Get PRO
مارس '25
+82
در 38 کانال‌ها
Get PRO
فوریه '25
+100
در 31 کانال‌ها
Get PRO
ژانویه '25
+106
در 34 کانال‌ها
Get PRO
دسامبر '24
+85
در 34 کانال‌ها
Get PRO
نوامبر '24
+76
در 32 کانال‌ها
Get PRO
اکتبر '24
+83
در 29 کانال‌ها
Get PRO
سپتامبر '24
+120
در 28 کانال‌ها
Get PRO
اوت '24
+70
در 17 کانال‌ها
Get PRO
ژوئیه '24
+53
در 1 کانال‌ها
Get PRO
ژوئن '24
+109
در 25 کانال‌ها
Get PRO
مه '24
+227
در 19 کانال‌ها
Get PRO
آوریل '24
+251
در 1 کانال‌ها
Get PRO
مارس '24
+279
در 21 کانال‌ها
Get PRO
فوریه '24
+256
در 17 کانال‌ها
Get PRO
ژانویه '24
+282
در 23 کانال‌ها
Get PRO
دسامبر '23
+205
در 23 کانال‌ها
Get PRO
نوامبر '23
+110
در 16 کانال‌ها
Get PRO
اکتبر '23
+179
در 17 کانال‌ها
Get PRO
سپتامبر '23
+338
در 0 کانال‌ها
Get PRO
اوت '23
+295
در 0 کانال‌ها
Get PRO
ژوئیه '23
+278
در 0 کانال‌ها
Get PRO
ژوئن '23
+266
در 0 کانال‌ها
Get PRO
مه '23
+257
در 0 کانال‌ها
Get PRO
آوریل '23
+234
در 0 کانال‌ها
Get PRO
مارس '23
+457
در 0 کانال‌ها
Get PRO
فوریه '23
+102
در 0 کانال‌ها
Get PRO
ژانویه '23
+201
در 0 کانال‌ها
Get PRO
دسامبر '22
+241
در 0 کانال‌ها
Get PRO
نوامبر '22
+102
در 0 کانال‌ها
Get PRO
اکتبر '22
+157
در 0 کانال‌ها
Get PRO
سپتامبر '22
+189
در 0 کانال‌ها
Get PRO
اوت '22
+247
در 0 کانال‌ها
Get PRO
ژوئیه '22
+303
در 0 کانال‌ها
Get PRO
ژوئن '22
+250
در 0 کانال‌ها
Get PRO
مه '22
+321
در 0 کانال‌ها
Get PRO
آوریل '22
+282
در 0 کانال‌ها
Get PRO
مارس '22
+225
در 0 کانال‌ها
Get PRO
فوریه '22
+155
در 0 کانال‌ها
Get PRO
ژانویه '22
+225
در 0 کانال‌ها
Get PRO
دسامبر '21
+162
در 0 کانال‌ها
Get PRO
نوامبر '21
+149
در 0 کانال‌ها
Get PRO
اکتبر '21
+309
در 0 کانال‌ها
Get PRO
سپتامبر '21
+179
در 0 کانال‌ها
Get PRO
اوت '21
+399
در 0 کانال‌ها
Get PRO
ژوئیه '21
+90
در 0 کانال‌ها
Get PRO
ژوئن '21
+159
در 0 کانال‌ها
Get PRO
مه '21
+208
در 0 کانال‌ها
Get PRO
آوریل '21
+284
در 0 کانال‌ها
Get PRO
مارس '21
+338
در 0 کانال‌ها
Get PRO
فوریه '21
+380
در 0 کانال‌ها
Get PRO
ژانویه '21
+493
در 0 کانال‌ها
Get PRO
دسامبر '20
+12 013
در 0 کانال‌ها
| تاریخ | رشد مشترکین | اشارات | کانال‌ها | |
| 15 اکتبر | 0 | |||
| 14 اکتبر | 0 | |||
| 13 اکتبر | +2 | |||
| 12 اکتبر | 0 | |||
| 11 اکتبر | 0 | |||
| 10 اکتبر | 0 | |||
| 09 اکتبر | 0 | |||
| 08 اکتبر | 0 | |||
| 07 اکتبر | 0 | |||
| 06 اکتبر | 0 | |||
| 05 اکتبر | +1 | |||
| 04 اکتبر | 0 | |||
| 03 اکتبر | 0 | |||
| 02 اکتبر | 0 | |||
| 01 اکتبر | 0 |
پست‌های کانال
🪄 Трюк: «Скелетон» без JS
При загрузке данных часто ставят
Spinner. Но современный UX → Skeleton (серый шаблон контента). И делать его можно без JS!
.skeleton {
background: linear-gradient(
90deg,
#e0e0e0 25%,
#f0f0f0 50%,
#e0e0e0 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8px;
}
@keyframes shimmer {
100% {
background-position: -200% 0;
}
}
div с классом .skeleton вместо контента.
2. Размеры задаёте под будущий элемент (картинка, текст).
3. Меняете на реальные данные после загрузки.
Плюсы:
- Нет лишнего JS.
- Лёгко адаптировать под любую форму.
- Современный UI → выглядит «дорого».
📲 Мы в MAX
👉 @frontend_1| 2 |  Совет по CSS 💡
Используйте табличные цифры для отображения таймеров ✅
https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers
📲 Мы в MAX
👉 @frontend_1 | 479 |
| 3 |  🚀 Быстрое улучшение Lighthouse: content-visibility
Хотите ускорить рендер длинных страниц без костылей? Используйте CSS-свойство:
.card {
content-visibility: auto;
}
Что делает:
- Браузер не рендерит невидимые элементы (за пределами вьюпорта);
- Сохраняет размер блока для скролла;
- Экономит ресурсы → First Paint быстрее, Lighthouse выше.
Где применять:
- Списки (товары, посты);
- Длинные страницы;
- Виджеты ниже фолда.
⚠️ Осторожно: не ставьте на элементы с динамическим контентом, где важно мгновенное измерение размеров.
Можно добавить contain-intrinsic-size → убрать "скачок" при появлении.
.card {
content-visibility: auto;
contain-intrinsic-size: 300px;
}
2 строки — и сайт ощущается быстрее ✨
📲 Мы в MAX
👉 @frontend_1 | 468 |
| 4 | 🚀 Подборка полезных IT каналов в Max
Системное администрирование, DevOps 📌
https://max.ru/i_odmin Все для системного администратора
https://max.ru/bash_srv Bash Советы
https://max.ru/sysadminof Книги для админов, полезные материалы
https://max.ru/i_odmin_book Библиотека Системного Администратора
https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др.
https://max.ru/tipsysdmin Типичный Сисадмин
https://max.ru/channel_win_sysadmin Системный Администратор Windows
https://max.ru/channel_linux_admin Linux: Системный администратор
https://max.ru/channel_linuxmod Linux
https://max.ru/channel_i_linux Системный администратор
https://max.ru/channel_devopslib DevOps, SRE, Sysadmin
https://max.ru/channel_devops_star DevOps Star (Звезда Девопса)
Excel лайфхак 📌
https://t.me/Excel_lifehack Excel лайфхак
Английский с нуля 🇬🇧
https://max.ru/UchuEnglish
1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С
https://max.ru/channel_DevLab1C 1С:Предприятие 8
Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика
https://max.ru/channel_cpp_geek C++ geek
Программирование Go📌
https://max.ru/golang_lib Библиотека Go (Golang) разработчика
Программирование React📌
https://max.ru/react_lib React
Программирование Rust📌
https://max.ru/channel_rust_lib
Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика
Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика
https://max.ru/channel_java_geek Java Geek
GitHub Сообщество 📌
https://max.ru/githublib Интересное из GitHub
Базы данных (Data Base) 📌
https://max.ru/database_info Все про базы данных
Фронтенд разработка 📌
https://max.ru/frontend_1 Подборки для frontend разработчиков
Библиотеки 📌
https://max.ru/programmist_of Книги по программированию
https://max.ru/proglb Библиотека программиста
https://max.ru/bfbook Книги для программистов
Программирование 📌
https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций
https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT
https://max.ru/php_lib Библиотека PHP программиста 👨🏼💻👩💻
Шутки программистов 📌
https://max.ru/itumor Шутки программистов
Защита, взлом, безопасность 📌
https://max.ru/thehaking Канал о кибербезопасности
https://max.ru/xakkep_1 Хакер Free
Книги, статьи для дизайнеров 📌
https://max.ru/odesigners Статьи, книги для дизайнеров
Математика 📌
https://max.ru/Pomatematike Канал по математике
https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике
Вакансии в IT📌
https://max.ru/progjob
https://max.ru/channel_rabotait
Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных
Городские📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы
https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП
https://max.ru/channel_krasnodar_novosty Краснодар Новости
https://max.ru/channel_novosibirsk_novosti Новосибирск
https://max.ru/channel_samara_novosti Новости Самары
https://max.ru/channel_ekaterinburg_novosti Новости Екатеринбурга
https://max.ru/channel_kazan_novosti Новости Казани
https://max.ru/channel_omsk_novosti Новости Омска
https://max.ru/channel_moskva_24 Москва 24 | 403 |
| 5 |  +65 офферов получили наши ребята на прошлой неделе
Оффер на 4,2k долларов
Оффер на 5k евро
Оффер 260k рублей
Оффер на 210k рублей
Оффер на 220k рублей
И еще 19 за сентябрь... а за лето более 50... и у тебя получится!
👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров.
Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Забирайте в закрепленном сообщении
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFGkqG2V ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 519 |
| 6 |  Мини-хак: :has() в CSS — меньше JS для интерактивности 🎯
Современные браузеры уже поддерживают :has() — “родительский селектор”, который раньше приходилось эмулировать на JS.
Пример: показать рамку у карточки, если внутри есть картинка:
.card:has(img) {
border: 2px solid #4ade80;
}
Ещё круче: стилизовать соседний элемент, если внутри инпута что-то введено:
.input-wrapper:has(input:focus) label {
color: #3b82f6;
}
Зачем это нужно?
— Меньше JS → проще поддержка
— Новый уровень гибкости для UI
Документация: MDN про :has()
Пробуйте! Это реально меняет подход к верстке.
📲 Мы в MAX
👉 @frontend_1 | 438 |
| 7 | 🔥 Трюк с style в React, который упростит работу с динамическими стилями
Вместо создания длинных условий или классов, можно использовать spread-оператор и логические выражения прямо в объекте стилей:
<div
style={{
padding: '16px',
...(isError && { border: '1px solid red' }),
...(isActive ? { backgroundColor: '#def' } : { opacity: 0.5 }),
}}
>
Hello!
</div>
📌 Что тут происходит:
* ...(условие && { стиль }) добавит стиль, если условие true;
* Альтернатива classnames для inline-стилей;
* Чисто, читаемо и удобно при большом числе условий.
🧠 Подходит, когда используете inline-стили (например, в дизайн-системах или при генерации email-шаблонов).
💡 Можно комбинировать с memo-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность.
📲 Мы в MAX
👉 @frontend_1 | 619 |
| 8 |  💡 HTML Tip: Скачивание файлов одной строкой
Хочешь, чтобы пользователь скачивал файл по клику? Просто добавь атрибут download к ссылке:
<a href="/images/logo.svg" download="codewithshripal-logo.svg">Download File</a>
📌 Что важно знать:
– download — указывает браузеру, что нужно не открыть файл, а скачать его
– Можно задать имя файла прямо в атрибуте
– Работает только с ресурсами того же источника (same-origin)
– Поддерживает blob: и data: ссылки для скачивания сгенерированного контента
🔍 Важно: имя из download будет использоваться только если сервер не задал своё имя в заголовке Content-Disposition.
📲 Мы в MAX
👉 @frontend_1 | 777 |
| 9 |  Как работает комбинация clip + mask:
- маска применяется к контейнеру с использованием соответствующего изображения клавиши, чтобы изображение обрезалось при смещении (translate)
- clip применяется к контейнеру, чтобы зона взаимодействия (hit area) не перекрывала другие клавиши 🧑🍳
📲 Мы в MAX
👉 @frontend_1 | 841 |
| 10 |  ИИ-система может отлично решать задачи бизнеса, но при этом оставаться уязвимой. Утечки данных, атаки на модели, небезопасные сценарии работы агентов — проблемы, которые проще предупредить на этапе проектирования, чем исправлять после запуска.
На открытом уроке разберём, как создавать ИИ-системы с учетом требований безопасности с самого начала. Вы узнаете, какие угрозы характерны для LLM, как применять принципы Security by Design и какие архитектурные решения помогают защитить данные и компоненты системы.
Разберём практический кейс: усилим архитектуру ИИ-агента с помощью механизмов защиты, проверки данных и управления доступом. Урок пройдет в преддверие старта курса «ИИ-архитектор».
Он будет полезен архитекторам ПО, разработчикам, специалистам по инфраструктуре и безопасности, которые проектируют или внедряют ИИ-решения. После занятия вы поймете, как закладывать защиту в архитектуру ИИ-систем и создавать решения, устойчивые к атакам и утечкам данных: https://vk.cc/d2fLFb
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru | 810 |
| 11 |  Совет по CSS 💡
Мы часто используем кнопки действий, которые появляются при наведении, чтобы интерфейс выглядел чище.
Но пользователи, работающие только с клавиатурой или сенсорными экранами, не могут вызвать наведение, из-за чего такие кнопки становятся недоступными.
Вот как это исправить
📲 Мы в MAX
👉 @frontend_1 | 666 |
| 12 | 📌Подборка полезных функций, которые пригодятся продвинутым frontend-разработчикам при работе с UI, производительностью и архитектурой
1. Throttle
Контролирует частоту вызова функции, полезно для scroll/resize-событий.
function throttle(fn: Function, delay: number) {
let last = 0;
return (...args: any[]) => {
const now = Date.now();
if (now - last >= delay) {
last = now;
fn(...args);
}
};
}
2. Debounce
Откладывает выполнение функции до окончания серии вызовов.
function debounce(fn: Function, delay: number) {
let timeout: ReturnType<typeof setTimeout>;
return (...args: any[]) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}
3. Deep Clone (без structuredClone)
function deepClone<T>(obj: T): T {
return JSON.parse(JSON.stringify(obj));
}
Подходит для простых объектов, не содержащих функций, дат и т.п.
4. Safe Access (Optional Chaining + Fallback)
function get<T>(obj: any, path: string, fallback?: T): T {
return path.split('.').reduce((acc, key) => acc?.[key], obj) ?? fallback;
}
5. Wait (async delay)
function wait(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
6. Generate UUID v4
function uuidv4() {
return crypto.randomUUID(); // нативно в современных браузерах
}
7. Copy to Clipboard
async function copyToClipboard(text: string) {
try {
await navigator.clipboard.writeText(text);
} catch {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
}
8. Detect Outside Click (для dropdown/modals)
function onClickOutside(element: HTMLElement, callback: () => void) {
function handler(event: MouseEvent) {
if (!element.contains(event.target as Node)) {
callback();
}
}
document.addEventListener('click', handler);
return () => document.removeEventListener('click', handler); // для очистки
}
9. Download File from Blob
function downloadBlob(blob: Blob, filename: string) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
10. Dynamic Script Loader (например, для внешних SDK)
function loadScript(src: string): Promise<void> {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.async = true;
script.onload = () => resolve();
script.onerror = () => reject(new Error(`Failed to load ${src}`));
document.head.appendChild(script);
});
}
📲 Мы в MAX
👉 @frontend_1 | 628 |
| 13 | 🚀 Git для фронтендера: Осваиваем продвинутые команды!
Все мы знаем основы Git: add, commit, push. Но чтобы по-настоящему эффективно работать в команде и поддерживать чистую историю проекта, нужно копнуть глубже. Сегодня поговорим о трёх мощных инструментах, которые сделают вашу работу с Git намного комфортнее: ветки, разрешение конфликтов и rebase.
🌱 Ветки: Ваш личный песочник
Ветки – это как параллельные вселенные вашего кода. Они позволяют вам работать над новой фичей или исправлением бага, не затрагивая основной код (обычно ветку main или master).
Почему это важно?
🟢Изоляция: Ваши изменения не сломают работу других разработчиков.
🟢Безопасность: Можно экспериментировать, не боясь испортить стабильную версию.
🟢Параллельная разработка: Несколько фич могут разрабатываться одновременно.
Основные команды для работы с ветками:
🟢git branch <название_ветки>: Создать новую ветку.
🟢git checkout <название_ветки>: Переключиться на ветку.
🟢git checkout -b <название_ветки>: Создать и сразу переключиться (комбинация двух предыдущих).
🟢git branch -d <название_ветки>: Удалить ветку (после мержа).
🟢git merge <название_ветки>: Влить изменения из указанной ветки в текущую.
💥 Разрешение конфликтов: Не паникуем!
Конфликты слияния (merge conflicts) – это неизбежная часть командной разработки. Они возникают, когда Git не может автоматически объединить изменения из разных веток, потому что они затронули одну и ту же строку кода или файл.
Как это выглядит?
В файле появятся специальные маркеры:
<<<<<<< HEAD
Ваш код в текущей ветке
=======
Код из ветки, которую вы мержите
>>>>>>> feature/new-design
Что делать?
1. Определите конфликтующие участки: Ищите маркеры <<<<<<<, =======, >>>>>>>.
2. Примите решение: Вручную отредактируйте файл, оставив нужный код (ваш, чужой или комбинацию).
3. Удалите маркеры: Очень важно убрать все эти <<<<<<<, =======, >>>>>>>!
4. Добавьте и закоммитьте изменения:
🟢git add <конфликтующий_файл>
🟢git commit -m "Resolve merge conflict"
Спокойствие и внимание к деталям – залог успешного разрешения конфликтов!
✨ Git Rebase: Чистая история коммитов
git rebase позволяет переписать историю коммитов, перемещая или комбинируя их. В отличие от merge, который добавляет новый коммит слияния, rebase "пересаживает" ваши коммиты на новый базовый коммит, создавая линейную и чистую историю.
Когда использовать rebase?
🟢Для "очистки" вашей ветки перед мержем в main: Сделать историю более читаемой, сгруппировать мелкие коммиты.
🟢Чтобы синхронизировать свою ветку с main: Подтянуть свежие изменения из main в свою фича-ветку без создания лишнего мерж-коммита.
Пример использования:
1. Переключитесь на свою фича-ветку: git checkout feature/my-new-feature
2. Заберите свежие изменения из main: git pull origin main (или git fetch origin main)
3. Выполните rebase: git rebase main
Важно:
🟢Никогда не делайте rebase публичных веток! Это может сломать историю для других разработчиков. Используйте rebase только для своих личных веток, которые ещё не были отправлены в общий репозиторий или над которыми вы работаете в одиночку.
🟢При rebase могут возникнуть конфликты, решать их нужно так же, как и при merge.
📲 Мы в MAX
👉 @frontend_1 | 642 |
| 14 |  HTML input types сильно различаются в зависимости от значения атрибута type, который вы используете 👨💻.
Ознакомьтесь с этой шпаргалкой на будущее 🚀
📲 Мы в MAX
👉 @frontend_1 | 829 |
| 15 |  Шпаргалка по выравниванию в CSS Grid 👨💻
📲 Мы в MAX
👉 @frontend_1 | 888 |
| 16 |  💡Шпаргалка по CSS
📲 Мы в MAX
👉 @frontend_1 | 1 088 |
| 17 |  Оффер 427 000₽ на руки в Сбер и отказались
Оффер 380 000₽ на руки в банк
Оффер 6 800$ net с релокацией на Кипр
Оффер 4 500$ в американскую компанию
👆Это недавние результаты участников нашего комьюнити.
Меня зовут Тихон - я действующий разработчик и ментор. Уже 2 года я развиваю комьюнити, где 300+ разработчиков, и вместе мы выжимаем из рынка максимум!
В нашем канале много ценного для разработчиков по подготовке к собесам👇
Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ
Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще
Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY
Как я прохожу собесы:
Оффер 260к на Go в Empoycity
Оффер 300к на Go в "Системная интеграция"
Отжал 390 gross + 25% премии в Иннотех
Оффер на лида 415 gross + 20% премии в ПСБ
🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март
А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)
Подписывайся 👇
frontend_punks
Реклама, erid: 2W5zFHUdMDj ИП Галактионов Тихон Витальевич, ИНН 771618975809 | 1 114 |
| 18 | Сегодня хочу поделиться с тобой одной тонкостью, которая помогает делать интерфейс более дружелюбным — скелетоны (skeleton loaders). Это те самые серые заглушки, которые показываются до загрузки данных. Пользователь видит, что «что-то происходит», и не чувствует, что приложение тормозит.
🦴 Как сделать скелетон быстро и без боли?
Я часто использую компонент из @radix-ui/react-skeleton или shadcn/ui. Но можно собрать свой за 5 минут:
const Skeleton = ({ className }: { className?: string }) => (
<div className={`animate-pulse bg-muted rounded-md ${className}`} />
)
А потом использовать так:
{isLoading ? (
<Skeleton className="h-6 w-40" />
) : (
<span>{user.name}</span>
)}
Без скелетонов пользователь может увидеть "прыгающий" интерфейс — сначала пустота, потом всё резко появилось. Это раздражает. Скелетоны создают ощущение плавности и контроля.
📲 Мы в MAX
👉 @frontend_1 | 922 |
| 19 | 💡 Scroll-snap-type
Позволяет создавать плавные, контролируемые прокрутки с «привязкой» к определённым позициям.
.container {
scroll-snap-type: x mandatory;
}
.item {
scroll-snap-align: start;
}
🔘Используется для каруселей, слайдеров и списков.
Зачем это нужно:
➡️ Сделать UX удобным и предсказуемым.
➡️ Избавиться от костылей на JS.
📲 Мы в MAX
👉 @frontend_1 | 1 018 |
| 20 |  Основные методы массивов JavaScript
📲 Мы в MAX
👉 @frontend_1 | 995 |
