Forwarded from xCode Journal
This media is not supported in your browser
VIEW IN TELEGRAM
Выбираете нужный шаблон и подстраиваете все под себя, а потом можно сразу скопировать HTML и CSS. Есть удобное превью и даже подсказки по свойствам. Короче, идеально для быстрого прототипирования.
Фронтендеры, вам посвящается
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12👎2👀2
Случалось ли вам продавать своей команде проект, который даже вам не по душе?
Коллеги из подкаста «Свободный слот» даже записали целый выпуск на эту тему! О том, как в этом процессе не потерять собственную мотивацию и в целом проталкивать непопулярные решения.
Так что, если знакомо до боли — приходите в их канал, там ещё много чего очень полезного для тим- и техлидов — ребята делятся практическими знаниями и опытом на примерах личных кейсов.
Коллеги из подкаста «Свободный слот» даже записали целый выпуск на эту тему! О том, как в этом процессе не потерять собственную мотивацию и в целом проталкивать непопулярные решения.
Так что, если знакомо до боли — приходите в их канал, там ещё много чего очень полезного для тим- и техлидов — ребята делятся практическими знаниями и опытом на примерах личных кейсов.
Когда работаем с формами на мобильных устройствах, часто сталкиваемся с тем, что виртуальная клавиатура отображается по своему усмотрению. Мы, как фронтендеры, не можем сильно повлиять на это, но есть один небольшой, но полезный способ улучшить взаимодействие с пользователем — это атрибут
enterkeyhint.Например, у нас есть форма с полями для ввода логина и пароля. Если мы добавим атрибут enterkeyhint="send" к полю ввода пароля, то подпись на кнопке изменится на «Отправить»:
<body>
<form>
<div class="field">
<label class="field__label" for="login">Логин</label>
<input class="field__input" type="text" id="login">
</div>
<div class="field">
<label class="field__label" for="password">Пароль</label>
<input class="field__input" type="password" id="password" enterkeyhint="send">
</div>
<button type="submit">Отправить</button>
</form>
</body>— В правом нижнем углу виртуальной клавиатуры появляется кнопка с надписью «Отправить», а если язык интерфейса — английский, то будет показано «Send». Это позволяет сделать интерфейс более интуитивно понятным.
— Важно понимать, что нельзя выбрать произвольный текст для кнопки. Всего поддерживаются семь значений: enter, done, go, next, previous, search и send. Хотя их не так много, этого достаточно, чтобы улучшить взаимодействие пользователя с интерфейсом.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12❤6👀2
Многие считают, что стать сеньором — это неизбежный шаг к тимлиду, но на самом деле, это совершенно разные роли. Я тоже долго не мог понять, почему сеньоры и лиды — это не одно и то же, пока не столкнулся с реальностью управления проектами.
Сеньор — это тот, кто достиг вершины в своей технической экспертизе. Он отлично знает свой стек технологий и решает задачи высокой сложности. Он также способен работать с архитектурой, менторить менее опытных коллег и устранять баги с оптимизацией.🔫 Преимущества сеньора:
— Знание стеков и технологий на глубоком уровне
— Способность решать сложные задачи
— Опыт в оптимизации и устранении багов
— Менторство и поддержка менее опытных коллег
Лидер — это не только про код, но и про управление людьми, процессами и проектами. Лидер отвечает за распределение задач, коммуникацию с бизнесом, развитие команды и мотивацию сотрудников.🔫 Что важно для лидера:
— Ответственность за проект и команду
— Навыки коммуникации с бизнесом и разработчиками
— Мотивация и развитие команды
— Умение принимать решения и разрешать конфликты
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤6👍5👎3
Задачи вроде ленивой загрузки изображений, анимаций и других тяжелых элементов становятся обычным делом. И тут на помощь приходит IntersectionObserver, который с каждым годом набирает популярность в кругах опытных разработчиков. Этот API предлагает способ следить за видимостью элементов на экране без переполнения ресурсов.
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.getAttribute('data-src');
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
}, { threshold: 0.1 });
images.forEach(img => observer.observe(img));— Мы используем IntersectionObserver, чтобы отслеживать, когда изображение попадает в область видимости пользователя.
— Как только изображение становится видимым (согласно опции threshold: 0.1, то есть 10% изображения становится видимым), мы подгружаем его с помощью data-src.
— После загрузки изображения мы снимаем его с наблюдения, чтобы избежать лишней работы для уже загруженных картинок.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍3❤2🐳1
Код-ревью — это не только о том, чтобы найти ошибки. Задача в том, чтобы помочь улучшить качество кода и сделать процесс более эффективным. Но вот как избежать перегибов, которые превращают проверку в стресс для обеих сторон?
✅ Фокус на главном
Когда вы проверяете код, старайтесь избегать ловушки фокусировки на мелочах. Ошибки в стиле или опечатки можно легко исправить позже, но если проблемы касаются архитектуры или производительности — это нужно проработать сразу. Не тратьте время на мелкие недочёты, когда перед вами ключевые вопросы.✅ Автоматизация и инструменты
Для качественного ревью важно использовать современные инструменты. Статический анализ, такие как SonarQube или Psalm, поможет вам быстро поймать баги, а системы CI/CD вроде GitHub Actions или GitLab CI значительно упростят проверку. Линтеры тоже не лишние — они автоматизируют стилистику и помогают избежать мелких ошибок. Кроме того, кросс-ревью с другими коллегами улучшает качество кода и ускоряет обработку MR. Это также способствует профессиональному росту всей команды.✅ Прозрачность и чёткость обратной связи
Когда дело доходит до комментариев, важно соблюдать дружелюбный и чёткий стиль. Письменная коммуникация в код-ревью — это не только про технические замечания, но и про эмоции. Старайтесь выражать свои мысли точно и без лишней критики.✅ Качество кода: на что стоит обратить внимание
Наконец, код-ревью должно быть ориентировано на основные стандарты: соответствие код-стайлу, наличие тестов, соблюдение архитектурных принципов. Обязательно оставляйте подробные комментарии, чтобы другие члены команды могли понять, что именно нужно улучшить и почему.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5👍2
Алоха, коллеги! 👋
Канал растёт, я уже почти 8 лет веду свой канал и хочу сделать один небольшой шаг, который поможет лучше понимать вас и то, что здесь действительно ценно. Подготовил короткую форму - всего пару кликов, но для меня это важно.
❓Снизу я задам вам 4 вопроса, давайте проявим максимальную активность и познакомимся поближе.
Канал растёт, я уже почти 8 лет веду свой канал и хочу сделать один небольшой шаг, который поможет лучше понимать вас и то, что здесь действительно ценно. Подготовил короткую форму - всего пару кликов, но для меня это важно.
❓Снизу я задам вам 4 вопроса, давайте проявим максимальную активность и познакомимся поближе.
❤4🔥2⚡1🐳1
Чем сейчас занимаетесь?
Anonymous Poll
16%
учусь/не работаю
69%
работаю в IT
1%
работаю в сфере ИИ
9%
работаю в найме
3%
работаю на фрилансе
2%
предприниматель
❤2
Если работаете уже в айтишке или планируете то какой Грейд
Anonymous Poll
14%
Еще не работаю но хочу
3%
Трейни
13%
Джун
36%
Мидл
24%
Сеньор
8%
Тех или Тим-Лид
3%
Босс покрупнее
🔥4❤2🐳1
Сколько зарабатываете?
Anonymous Poll
17%
не зарабатываю
2%
до 15.000
2%
от 15.000 до 30.000
4%
от 30.000 до 50.000
7%
от 50.000 до 80.000
10%
от 80.000 до 120.000
15%
от 120.000 до 180.000
44%
от 180.000
😁15👀4❤2🐳2
Forwarded from xCode Journal
Такую статистику показало новое исследование. Больше половины работодателей в России сталкивались с приукрашенным резюме у кандидатов. При этом чаще всего врут разработчики ПО, за ними идут тестировщики и руководители проектов.
А вот меньше всего обманывают эйчаров датасаентисты, аналитики, сетевые инженеры и специалисты технической поддержки.
Please open Telegram to view this post
VIEW IN TELEGRAM
😁8👍5❤2🔥1
Баланс: pet-проекты vs работа
Каждый разработчик хоть раз ловил себя на мысли: “Хочу сделать свой проект. Но после работы нет ни сил, ни желания писать код.”
И вот тут начинается борьба между желанием развиваться и желанием просто отдохнуть.
✅ Pet-проекты — это топливо для роста.
Ты пробуешь новые технологии без дедлайнов, без легаси и без код-ревью с “а зачем тут вообще useMemo?”.
Это та самая зона, где возвращается интерес к разработке, особенно когда на работе монотонные задачи.
Но.
🙅♂️ Pet-проект не должен превращаться во вторую работу.
Если ты после 8 часов продакшена садишься за ещё 4 часа кода — это не развитие, это выгорание в красивой обёртке.
И так: как найти баланс?:
Итог:
Работа — даёт стабильность.
Pet-проекты — дают развитие.
Отдых — даёт энергию, чтобы выдержать первые два пункта.
Главное — не забывать, что кодить “в кайф” иногда важнее, чем кодить “всё время”.
Каждый разработчик хоть раз ловил себя на мысли: “Хочу сделать свой проект. Но после работы нет ни сил, ни желания писать код.”
И вот тут начинается борьба между желанием развиваться и желанием просто отдохнуть.
Ты пробуешь новые технологии без дедлайнов, без легаси и без код-ревью с “а зачем тут вообще useMemo?”.
Это та самая зона, где возвращается интерес к разработке, особенно когда на работе монотонные задачи.
Но.
Если ты после 8 часов продакшена садишься за ещё 4 часа кода — это не развитие, это выгорание в красивой обёртке.
И так: как найти баланс?:
🔘 Делай pet-проекты короткими и законченными.
Маленький тул или демо — лучше, чем вечный “стартап мечты”.🔘 Ставь себе ограничение по времени.
Например, кодишь только 2 вечера в неделю.🔘 Не чувствуй вины, если не делаешь ничего.
Отдых — тоже часть продуктивности.
Мой личный опыт:
Pet-проекты реально помогают не терять интерес к коду.
Но только когда они не конкурируют с отдыхом, а заменяют бессмысленный скролл YouTube чем-то, что тебя вдохновляет.
Итог:
Работа — даёт стабильность.
Pet-проекты — дают развитие.
Отдых — даёт энергию, чтобы выдержать первые два пункта.
Главное — не забывать, что кодить “в кайф” иногда важнее, чем кодить “всё время”.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18🐳3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
👨💻 Пишете на JS, но чувствуете, что инструментов уже не хватает?
На практическом курсе от OTUS вы разберёте продвинутый React (Hooks, Redux Toolkit, Zustand, Query), SSR на Next.js, познакомитесь с Vue 3 и Nuxt 3, укрепите типизацию в TypeScript и выйдете на fullstack-уровень с Node/Nest.js.
❗️Программа составлена практикующими разработчиками, а занятия проходят в формате живых лекций и практики на реальных задачах. Вы научитесь проектировать REST API, подключать PostgreSQL, собирать и деплоить проекты с Docker и CI/CD. После обучения вы сможете уверенно работать в командах, разрабатывать сложные web-приложения и прокачаете навыки, которые востребованы в крупных компаниях.
🏃♂️➡️🏃♂️➡️🏃♂️➡️ Остались последние места. Пройдите короткое вступительное тестирование, получите скидку 5% по промокодуJSPRO_10 и закрепите за собой участие: https://vk.cc/cQwawT
Подробности уточняйте у менеджеров
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
На практическом курсе от OTUS вы разберёте продвинутый React (Hooks, Redux Toolkit, Zustand, Query), SSR на Next.js, познакомитесь с Vue 3 и Nuxt 3, укрепите типизацию в TypeScript и выйдете на fullstack-уровень с Node/Nest.js.
❗️Программа составлена практикующими разработчиками, а занятия проходят в формате живых лекций и практики на реальных задачах. Вы научитесь проектировать REST API, подключать PostgreSQL, собирать и деплоить проекты с Docker и CI/CD. После обучения вы сможете уверенно работать в командах, разрабатывать сложные web-приложения и прокачаете навыки, которые востребованы в крупных компаниях.
🏃♂️➡️🏃♂️➡️🏃♂️➡️ Остались последние места. Пройдите короткое вступительное тестирование, получите скидку 5% по промокоду
Подробности уточняйте у менеджеров
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
👎6❤2🐳2
Storage API в 2025: что, где и когда хранить
Хранение данных в браузере — это не просто localStorage.setItem().
Современные API дают кучу способов работать с кэшем, оффлайном и большими объёмами данных.
Главное — понимать, какой инструмент для чего.
💛 LocalStorage — для простого и быстрого
💛 IndexedDB — когда данных много
💛 Cache Storage API — для сетевых запросов
💛 Best Practices
📍 Итог:
Браузер — уже не просто “тонкий клиент”.
Он умеет кэшировать, хранить и синхронизировать данные не хуже бэкенда.
Главное — не пихать всё в localStorage и думать, что этого достаточно
Хранение данных в браузере — это не просто localStorage.setItem().
Современные API дают кучу способов работать с кэшем, оффлайном и большими объёмами данных.
Главное — понимать, какой инструмент для чего.
- Объём: до ~5MB
- Синхронный API (блокирует поток)
- Только строки✅ Идеально для:
- Настроек интерфейса (тема, язык)
- Состояния, не критичного к потере🙅♂️ Не подходит для:
- Частых записей
- Больших данных
- Асинхронных операций🔘 Частая ошибка: хранить JWT или токены авторизации.
Не делай так — XSS и ты в опасности. Лучше HttpOnly cookie.
- Асинхронная, ключ-значение база прямо в браузере
- Поддерживает сложные структуры (объекты, Blob, файлы)
- Работает оффлайн✅ Идеально для:
- SPA с оффлайн-режимом
- Кеширования запросов
- Локальных кэшей для heavy UI (например, таблицы на тысячи строк)🙅♂️ Минусы:
- API громоздкий (лучше использовать обёртки вроде Dexie.js)
- Не всегда очевидное управление версиями
Используется вместе с Service Worker.
Позволяет сохранять ответы от fetch и выдавать их оффлайн.✅ Идеально для:
- PWA и offline-first приложений
- Кэширования статики (CSS, JS, картинки)
- Быстрых перезапусков SPA🙅♂️ Не путай с LocalStorage — это не просто “сохранил строку”, а полноценный HTTP-кеш.
🔘 Комбинируй: IndexedDB для данных, Cache для запросов, LocalStorage для мелочей.🔘 Удаляй устаревшие версии данных (особенно при обновлении схем).🔘 Не храни чувствительные данные — браузер ≠ сейф.🔘 Проверяй лимиты хранилища (navigator.storage.estimate() — underrated).🔘 Используй Background Sync, если нужно синхронизировать оффлайн-данные.
Браузер — уже не просто “тонкий клиент”.
Он умеет кэшировать, хранить и синхронизировать данные не хуже бэкенда.
Главное — не пихать всё в localStorage и думать, что этого достаточно
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10👀3👍2🔥2🐳1
Поговорим про деньги в IT?
Приглашаем опытных IT-специалистов пройти небольшой опрос про зарплаты и бенефиты в технологических компаниях. Это займёт не более 7 минут — а ваше мнение поможет одному крупному российскому работодателю делать актуальные оферы.
Пройти опрос можно здесь
Приглашаем опытных IT-специалистов пройти небольшой опрос про зарплаты и бенефиты в технологических компаниях. Это займёт не более 7 минут — а ваше мнение поможет одному крупному российскому работодателю делать актуальные оферы.
Пройти опрос можно здесь
❤3👎1
Quantum CSS и ML-оптимизация верстки — будущее фронтенда?
Звучит как хайп, но тренд реальный:
всё чаще ML-алгоритмы применяются не только для генерации кода, но и для оптимизации CSS, DOM и layout-процессов.
Что такое Quantum CSS
ML-оптимизация верстки
Что нас ждёт
Мой вывод
А как ты относишься к идее ML-CSS?
Хотел бы, чтобы браузер сам решал, какие стили тебе нужны — или всё-таки контроль должен оставаться за человеком?
Звучит как хайп, но тренд реальный:
всё чаще ML-алгоритмы применяются не только для генерации кода, но и для оптимизации CSS, DOM и layout-процессов.
Что такое Quantum CSS
Если коротко — это концепция (а не фреймворк), где браузер или сборщик анализирует и оптимизирует стили на уровне движка, не дожидаясь ручной оптимизации от разработчика.
Mozilla когда-то начала этот путь с Project Quantum (оптимизация движка Firefox), и идея живёт:
браузер сам решает, как рендерить части DOM параллельно и какие CSS-правила реально нужны в viewport.
Главная цель:
ускорить перерисовку и минимизировать “CSS-инфляцию” — когда у проекта тысячи неиспользуемых классов и стилей.
ML-оптимизация верстки
ML-модели уже умеют анализировать структуру страницы и:
выявлять дублирующиеся CSS-паттерны;
предлагать оптимальную архитектуру классов (например, по BEM или atomic-подходу);
предсказывать layout shifts и предлагать фиксы для CLS;
автоматически “чистить” стили после деплоя (CSS pruning с учётом поведения реальных пользователей).
Что нас ждёт
Через пару лет мы можем прийти к IDE, которая:💛 отслеживает реальное использование на проде,💛 сама обучается оптимизировать layout.
Типа “GitHub Copilot для CSS”, но с реальной экономией трафика и FPS.
Мой вывод
CSS медленно превращается из “ручного ремесла” в систему адаптивной оптимизации.
И если сейчас мы думаем “как проще написать стили”,
то скоро будем думать “как обучить модель писать и обслуживать их за нас”.
А как ты относишься к идее ML-CSS?
Хотел бы, чтобы браузер сам решал, какие стили тебе нужны — или всё-таки контроль должен оставаться за человеком?
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤2🐳1👀1