👾 EthoIT — твой апгрейд в мире IT.
📦 Кидаем только то, что реально стоит твоего времени:
— Курсы и туториалы без воды
— Лайфхаки, гайды, читы для разработчиков
— Подборки ресурсов: от AI-инструментов до open source сокровищ
— Всё про фронт, бэк, дизайн, DevOps, фриланс и карьеру
— Новости, которые не занудные
— Примеры реальных кейсов!
📦 Кидаем только то, что реально стоит твоего времени:
— Курсы и туториалы без воды
— Лайфхаки, гайды, читы для разработчиков
— Подборки ресурсов: от AI-инструментов до open source сокровищ
— Всё про фронт, бэк, дизайн, DevOps, фриланс и карьеру
— Новости, которые не занудные
— Примеры реальных кейсов!
Задаём цвет в зависимости от темы операционной системы пользователя
Функция light-dark() позволяет переключаться между двумя цветами в зависимости от выбранной у пользователя тёмной или светлой темы.
Пример
div {
color: light-dark(black, white);
background-color: light-dark(white, black);
}
Если пользователь выбрал светлый режим, у элемента будет чёрный текст на белом фоне, если тёмный — белый текст на чёрном фоне.
Чтобы функция light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают в псевдоклассе :root. Если это свойство не прописать, то функция всегда будет возвращать только первое значение.
Внутри круглых скобок через запятую указываются два цвета. Цвет может быть задан в любом доступном формате. Обратите внимание: можно передать только два аргумента. При большем или меньшем количестве аргументов, а также при невалидных аргументах, свойство не применится.
Функция light-dark() позволяет переключаться между двумя цветами в зависимости от выбранной у пользователя тёмной или светлой темы.
Пример
div {
color: light-dark(black, white);
background-color: light-dark(white, black);
}
Если пользователь выбрал светлый режим, у элемента будет чёрный текст на белом фоне, если тёмный — белый текст на чёрном фоне.
Чтобы функция light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают в псевдоклассе :root. Если это свойство не прописать, то функция всегда будет возвращать только первое значение.
Внутри круглых скобок через запятую указываются два цвета. Цвет может быть задан в любом доступном формате. Обратите внимание: можно передать только два аргумента. При большем или меньшем количестве аргументов, а также при невалидных аргументах, свойство не применится.
⌛ Pingdom Website Speed Test
Этот сервис позволяет проверить время загрузки вашего веб-сайта, получить перформанс-ревью и дальнейшие рекомендации по улучшению страницы 🚀
🌐 Перейти на сайт
Этот сервис позволяет проверить время загрузки вашего веб-сайта, получить перформанс-ревью и дальнейшие рекомендации по улучшению страницы 🚀
🌐 Перейти на сайт
🤔 Что такое HTML, JS и CSS?
HTML — структура, скелет страницы.
CSS — внешний вид, оформление.
JS — логика, интерактивность и поведение.
Какие основные вещи присущи HTML?
Семантичные теги, иерархия, вложенность, возможность ссылок, формы и доступность. HTML задаёт основу документа, к которой привязывается стиль и поведение.
Ставь 👍 если знал ответ
HTML — структура, скелет страницы.
CSS — внешний вид, оформление.
JS — логика, интерактивность и поведение.
Какие основные вещи присущи HTML?
Семантичные теги, иерархия, вложенность, возможность ссылок, формы и доступность. HTML задаёт основу документа, к которой привязывается стиль и поведение.
Ставь 👍 если знал ответ
❤1
👩💻 Вопрос с собеседования: Объясните различия между Grid и Flexbox для построения адаптивных интерфейсов. В каких случаях какой инструмент предпочтительнее?
Сначала подумайте, а потом можете свериться с ответом 😊
Ответ:Flexbox ориентирован на построение одномерных макетов (по одной оси — горизонтальной или вертикальной), отлично подходит для выравнивания элементов в строке или столбце, работы с последовательными блоками и для “резиновых” панелей. Grid решает задачу двумерной сетки — позволяет управлять строками и колонками одновременно, удобно для сложных таблиц, галерей, целых секций сайта. На практике Flex используют для локальных задач и компонентов, Grid — для основного каркаса страницы или крупных областей интерфейса.
Сначала подумайте, а потом можете свериться с ответом 😊
Ответ:
Как установить React 19 версии с Vite JS
В видео покажу как получить React JS 19-й версии уже сейчас в сборщике Vite. React уже обновился до 19 версии, вышел релиз кандидат, но в Vite по прежнему 18 версия. Показываю как обновиться.
📺 YouTube
WebDEV #видео
В видео покажу как получить React JS 19-й версии уже сейчас в сборщике Vite. React уже обновился до 19 версии, вышел релиз кандидат, но в Vite по прежнему 18 версия. Показываю как обновиться.
📺 YouTube
WebDEV #видео
YouTube
Как установить React 19 версии с Vite JS
В видео покажу как получить React JS 19-й версии уже сейчас в сборщике Vite. React уже обновился до 19 версии, вышел релиз кандидат, но в Vite по прежнему 18 версия. Показываю как обновиться.
Материалы ВебКадеми на всех площадках: https://webcademy.ru/taplink/…
Материалы ВебКадеми на всех площадках: https://webcademy.ru/taplink/…
Телеграмм бот на NodeJS + Notion с нуля. Деплой и обновление на Ubuntu
Делюсь полезным туториалом по созданию интеграции на NodeJS
В ролике создаю Telegram бота, который интегрируется с Notion через NodeJS, используя ChatGPT. Концепт вот в чем: Telegram как интерфейс, простая логика на NodeJS и очень удобная база данных в Notion. На основе этого кода можно написать свой функционал.
В видео показал пример, как на основе тезисов в боте в Notion попадет целая эмоциональная история. Оптимизированный копирайтинг с правильным построением запроса в ChatGPT
📺 YouTube
WebDEV #видео
Делюсь полезным туториалом по созданию интеграции на NodeJS
В ролике создаю Telegram бота, который интегрируется с Notion через NodeJS, используя ChatGPT. Концепт вот в чем: Telegram как интерфейс, простая логика на NodeJS и очень удобная база данных в Notion. На основе этого кода можно написать свой функционал.
В видео показал пример, как на основе тезисов в боте в Notion попадет целая эмоциональная история. Оптимизированный копирайтинг с правильным построением запроса в ChatGPT
📺 YouTube
WebDEV #видео
YouTube
Telegram бот на NodeJS + Notion с нуля. Деплой и обновление на Ubuntu
Если вы хотите увидеть работу ИИ изнутри и собрать свой первый проект за 3 дня, присоединяйтесь к марафону. Вы пройдёте путь разработчика в комфортном темпе и получите результат уже в первый день.
Регистрация открыта 👉🏼 https://resuni.ru/obvUR
Телеграм…
Регистрация открыта 👉🏼 https://resuni.ru/obvUR
Телеграм…
Event Loop: Ключ к оптимизации вашего кода. Как работает асинхронность в JS
Сегодня разберём как реализована модель асинхронности в браузере. Не будем строить догадки пощупаем реальный браузер во вкладочке performance
📺 YouTube
Сегодня разберём как реализована модель асинхронности в браузере. Не будем строить догадки пощупаем реальный браузер во вкладочке performance
📺 YouTube
YouTube
Event Loop: Ключ к оптимизации вашего кода | Как работает асинхронность в JS
Сегодня разберём как реализована модель асинхронности в браузере. Не будем строить догадки пощупаем реальный браузер во вкладочке performance
Подписывайтесь на мой telegram канал: https://t.me/cleanfrontend
Подписывайтесь на мой telegram канал: https://t.me/cleanfrontend