Уже доступно! Исследование Telegram 2025 — ключевые инсайты года 
Логово верстальщика
Открыть в Telegram
Логово верстальщиков: HTML, CSS, JavaScript, практики современной верстки, вайбкодинг и использование ИИ в разработке. Личный блог автора - @just_genych По вопросам рекламы или разработки: @g_abashkin
Больше8 226
Подписчики
-524 часа
-237 дней
-1430 день
Архив постов
8 223
8 223
JS - document.visibilityState или определяем активна ли сейчас вкладка в браузере
Алоха товарищи фронты! Не большой шортрид о том как определить находится ли сейчас юзер на странице или нет.
Для данной задачи мы будем использовать:
👉 Cвойство
window.navigator.visibilityState, которое может быть равно или строке 'hidden' или строке 'visible'.
👉 А так же стандартный JS event visibilitychange, который в свою очередь будет реагировать на открытие / скрытие вкладки браузера и проверять свойство window.navigator.visibilityState
Пример кода:
const isVisibilityHiddenState = 'hidden';
const handleVisibility = () => {
if (document.visibilityState === isVisibilityHiddenState) {
console.log('user is on the page');
} else {
console.log('user is not on the page right now');
}
}
document.addEventListener('visibilitychange', handleVisibility);
Надеюсь это было вам полезно. Удачи в экспериментах!8 223
8 223
8 223
⚡ Тест по JavaScript от OTUS
А насколько хорошо ты знаешь Vue.js?
✔ Пройди тест из 20 вопросов и узнай, сможешь ли ты учиться на курсе "Vue.js разработчик" от OTUS. Если правильно ответишь хотя бы на 12 вопросов - сможешь поступить на курс по специальной цене!
⏰ Время прохождения теста ограничено 30 минут
👉 ПРОЙТИ ТЕСТ: https://bit.ly/3tLjzU8
🎫Курс можно приобрести в рассрочку
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru, erid: LjN8K25ja
8 223
CSS псевдокласс :is()
Всем привет! Недавно узнал о том что в
CSS есть псевдокласс :is(), который позволяет значительно сократить длинные записи селекторов. По сути он просто принимает список селекторов для выбора элементов HTML.
Несколько примеров:
button:is(:hover, :focus) {
background: green;
}
Меняет фон для кнопки если она имеет состояние focus или hover.
:is(thead, tfoot) tr :is(th, td) {
background: red;
}
Выбирает все элементы th и td внутри хедера и футера таблицы.
:is(ul, ol, menu) > :is(ul, ol, menu) {
background: yellow;
}
В данном примере мы выбираем все списки которые уже находятся в списках.
Собственно вот такая довольно полезная штуковина. Поддерживается на данный момент всеми основными браузерами, вот ссылка на caniuse. Удачи в экспериментах!8 223
8 223
8 223
8 223
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем 17 октября.
Реклама. ИП Чернова О. А., ИНН:771399721044, erid:LjN8K7Sbu
8 223
8 223
8 223
8 223
⁉️ Как создавать веб-приложения быстро и просто, но при этом красивом и необычно?
Современные реалии в IT требуют от разработчиков оптимизации временных издержек и уникальности готовых проектов одновременно. Как писать мобильные и ПК-приложения быстро, просто и красиво?
🦾 Узнаете на бесплатном открытом уроке «Обзор возможностей библиотеки компонентов Quasar с Vue» от OTUS.
Преподаватель Михаил Кузнецов – Fullstack developer и тимлид в «Zalando», Germany.
📌 Занятие пройдёт 17 октября в 20:00 мск и будет приурочено к старту курса «Vue.js разработчик». В дальнейшем вы сможете приобрести полный курс в рассрочку на выгодных условиях.
Это отличная возможность совершенно бесплатно протестировать формат обучения и задать преподавателю любые вопросы в режиме реального времени!
👉 Зарегистрируйтесь на событие прямо сейчас и мы напомним в день вебинара.
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru, erid: LjN8K43oq
8 223
8 223
CSS псевдокласс :has()
Алоха товарищи! Сегодня будет небольшой пост про один из новых псевдоклассов CSS.
Что он делает: позволяет создать CSS селектор для элемента в зависимости от того есть ли у него тот или иной дочерний элемент.
Примеры:
// Выбираем элемент section который содержит h2
section:has(h2) {
background: lightgray;
}
// Выбираем img только в том случае если его родительский элемент содержит h2
section:has(h2) img {
border: 5px solid lime;
}
Собственно вот интересная такая штука.
❗️ Но как это часто случается есть нюанс. Согласно ресурсу caniuse этот псевдокласс на данный момент не поддерживает Firefox, но учитывая что месяца 3 назад его еще не поддерживал хром то думаю это вопрос недолгого времени.8 223
8 223
Frontend online meetup - 11/10
✔️ CSS in JS или самая противоречивая техника стилизации веба — Ильдар Муллахметов, Авито Тех
В своем докладе я расскажу почему CSS in JS библиотеки вызывают так много противоречий среди frontend разработчиков. хочу рассмотреть влияние на производительность, поддерживаемость кода, девелопер экспириенс. Рассмотрю более подробно styled-components и сравню блоки кода со стилями между styled, tailwind, module. Рассмотрю как браузер обрабатывает styled. Продемонстрирую как влияет на семантику, работает с props и theme. Добавлю к сравнению Linaria и Astroturf, как самые быстрорастущие CSS in JS библиотеки.
✔️ Что такое Sentry и почему без него тяжело — Кирилл Логачев, Level.Travel
Доклад нацелен на раскрытие такого полезного инструмента, как Sentry. Из данного доклада слушатель узнает, как правильно настраивать, использовать и мониторить Sentry, что поможет уменьшить количество ошибок в продакшене, также данный сервис поможет определять и быстро устранять просочившиеся с релизом ошибки.
✔️ По ту сторону WebView — Максим Лавренюк, UZUM TECHNOLOGIES
Я бы хотел поделится некоторыми подходами и проблемами на примере встраивания сервиса доставки еды Uzum Tezkor в супер приложение Uzum Market. Я расскажу про то, что следует сделать в первую очередь при старте интеграции, как подружить нативные компоненты с вебом, как спрятать бесшовную авторизацию, а так же о чем попросить мобильных разработчиков, чтобы облегчить себе жизнь.
✔️ Web3 для фронтенд-разработчика — Назим Гафаров, Based.link
Доклады вокруг web3 обычно концентрируются вокруг рассказа об языках программирования для смарт-контрактов, которые больше интересны бэкенд-разработчикам. В своем докладе я расскажу о том, какие возможности предоставляет web3 именно для фронтенд-разработчика.
➖➖➖
🗓 11 октября в 19:00
✅ Регистрация - участие бесплатно!
🌐 Наш телеграм канал с анонсами митапов!
8 223
8 223
