Логово верстальщика
Kanalga Telegram’da o‘tish
Логово верстальщиков: HTML, CSS, JavaScript, практики современной верстки, вайбкодинг и использование ИИ в разработке. Личный блог автора - @just_genych По вопросам рекламы или разработки: @g_abashkin
Ko'proq ko'rsatish![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.telemetr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=256&q=75)
Tarmoq:8 182
Obunachilar
+1224 soatlar
-57 kunlar
-7230 kunlar
Postlar arxiv
8 182
8 182
8 182
🚀JavaScript: ускоряем загрузку изображений с помощью Imgproxy, Cache API и Service Worker API
В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).
Читать...
8 182
Новая фича CSS - Nesting
Алоха товарищи фронты! Я вчера узнал что оказывается в нативном CSS уже есть такая штука как nesting(вложенность). Штука очень удобная но в целом не новая если вы раньше работали с SASS, LESS и.т.д.
Так вот теперь CSS начал это уметь "из коробки".
Для тех кто пока не понял о чем речь вот код снизу:
👉 Допустим в сегодняшнем CSS нам нужно сделать что то вроде такого
.link {
color: red;
}
.link:hover,
.link:focus {
color: blue;
}
👉 С нововведением мы сможем написать так:
.link {
color: red;
&:hover,
&:focus {
color: blue;
}
}
❗ В общем имейте ввиду, но пока особо не торопитесь его использовать. Согласно ресурсу caniuse файрфокс пока что с этим всем добром работать не научился.8 182
8 182
8 182
8 182
8 182
8 182
🔥 За интуитивно понятным и простым синтаксисом Vue.js скрываются широкие возможности! Но их можно упустить при самостоятельном освоении.
Поэтому приглашаем освоить этот инструмент фронтенд и бэкенд-разработчиков на онлайн-курсе «Vue.js разработчик».
🧑💻 Преподаватели на живых вебинарах и практике помогут вам освоить продвинутые возможности Vue.
Вас ждет актуальная программа, учитывающая последние обновления, включая новую версию Vue 3, и выпускной проект для портфолио.
Старт занятий 31 октября.
Успейте 📌ПРОЙТИ ТЕСТ , чтобы записаться в группу по спец.цене: https://clck.ru/36DH3q
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru, erid: LjN8KRxNZ
8 182
8 182
8 182
😵Как применять Module Federation для шеринга виджетов из UI-kit
В этой статье мы рассмотрим возможности Module Federation для решения проблем, связанных с консистентностью виджета, как можно подключить модуль с помощью данной технологии и как обрабатывать ситуации, при которых виджет не сможет быть загружен и подключен.
Читать...
8 182
CSS - min(), max() - функции
Всем привет! Относительно недавно в CSS появилась еще одна клевая фича которая позволяет сократить наши портянки кода и сделать его более лаконичным.
Сегодня я хотел бы рассказать о min, max функциях
Например мы имеем
div и у него свойство width, max-width, min-width:
Как мы писали раньше:
// Вариант 1
div {max-width: 780px; width: 80%};
// Вариант 2
div {width: 50%; min-width: 400px};
Как это можно написать сейчас:
// Вариант 1
div {max-width: min(80%, 780px)};
// Вариант 2
div {width: max(50%, 400px)};
❗ Полностью в рамках телеграма раскрыть эту тему нереально поэтому для тех кого интересуют подробности вот крутая статья с хабра.
❗ Так же согласно caniuse эти функции уже поддерживают последние версии всех основных брауеров.8 182
8 182
8 182
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 182
8 182
8 182
⚡ Тест по JavaScript от OTUS
А насколько хорошо ты знаешь Vue.js?
✔ Пройди тест из 20 вопросов и узнай, сможешь ли ты учиться на курсе "Vue.js разработчик" от OTUS. Если правильно ответишь хотя бы на 12 вопросов - сможешь поступить на курс по специальной цене!
⏰ Время прохождения теста ограничено 30 минут
👉 ПРОЙТИ ТЕСТ: https://bit.ly/3tLjzU8
🎫Курс можно приобрести в рассрочку
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru, erid: LjN8K25ja
