Селекторы HTML элементов в JavaScript
#почитать
⏱ Читать статью
#почитать
Манипулирование деревом DOM, это альфа и омега любого фронтенд-разработчика, а это не возможно без селекторов позволяющих находить HTML элементы. Давайте подробно разберёмся как они работают.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5👍2
Гибкие макеты
#почитать
Не все знают, что можно менять размер шрифта в настройках браузера, и тем более не многие этим пользуются. Но если мы хотим обеспечить отзывчивость, мы должны учитывать и этот фактор. Во всех браузерах размер шрифта по умолчанию равен 16px; если это значение будет изменено, будет изменен и размер одного rem. Поэтому все размеры связанные с типографикой и не только лучше задавать в этих единицах.
⏱ Читать статью
#почитать
Не все знают, что можно менять размер шрифта в настройках браузера, и тем более не многие этим пользуются. Но если мы хотим обеспечить отзывчивость, мы должны учитывать и этот фактор. Во всех браузерах размер шрифта по умолчанию равен 16px; если это значение будет изменено, будет изменен и размер одного rem. Поэтому все размеры связанные с типографикой и не только лучше задавать в этих единицах.
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔5❤1
Современные способы переключения контента
#почитать
⏱ Читать статью
#почитать
Мы склонны использовать знакомые решения. Когда речь заходит о переключении контента, мы обычно используем свойства display: none или opacity: 0 с добавлением JavaScript. Однако современный веб стремительно развивается, и, возможно, настало время рассмотреть другие подходы к переключению контента — узнать, какие нативные API на сегодняшний день поддерживаются, их достоинства и недостатки, а также некоторые нюансы, о которых мы могли и не подозревать (включая псевдоэлементы и другие малоизвестные вещи).
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Релиз Tailwind CSS v4.0
#почитать
⏱ Читать статью
#почитать
Tailwind CSS v4.0 — это совершенно новая версия фреймворка, оптимизированная для производительности и гибкости, с переосмысленной конфигурацией и кастомизацией, а также использующая все преимущества последних достижений веб-платформ.
Please open Telegram to view this post
VIEW IN TELEGRAM
😁7🎉3🙈3
CSS-трюки, использующие только один градиент
#почитать
⏱ Читать статью
#почитать
В этой статье мы не будем создавать сложные вещи с помощью CSS-градиентов. Вместо этого мы будем придерживаться простоты, и я расскажу о невероятных вещах, которые можно сделать с помощью одного градиента.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤2🔥1
ТОП-35 курсов HTML и CSS
#почитать
⏱ Читать статью
#почитать
Создание веб-сайтов — это не просто работа, а настоящее искусство.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6😁4🙈2
Vite 6
#почитать
Вышел новый релиз Vite 6, который приносит массу улучшений и новых возможностей для разработчиков.
⏱ Читать статью
#почитать
Вышел новый релиз Vite 6, который приносит массу улучшений и новых возможностей для разработчиков.
Please open Telegram to view this post
VIEW IN TELEGRAM
👏6👍1
Fluid Superscripts and Subscripts
#почитать
Надстрочные и подстрочные знаки являются важнейшими элементами академического и научного контента - от ссылок на цитаты до химических формул и математических выражений. Однако браузеры используют статичный подход, который может создавать значительные проблемы: элементы становятся либо слишком маленькими на мобильных устройствах, либо непропорционально большими на настольных дисплеях.
⏱ Читать статью
#почитать
Надстрочные и подстрочные знаки являются важнейшими элементами академического и научного контента - от ссылок на цитаты до химических формул и математических выражений. Однако браузеры используют статичный подход, который может создавать значительные проблемы: элементы становятся либо слишком маленькими на мобильных устройствах, либо непропорционально большими на настольных дисплеях.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Практикум. Разноцветный текст
#почитать
Вам необходимо покрасить текст в разные цвета, например, в радужный градиент. Но как это сделать, если свойство color может принимать только один цвет?
⏱ Читать статью
#почитать
Вам необходимо покрасить текст в разные цвета, например, в радужный градиент. Но как это сделать, если свойство color может принимать только один цвет?
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔5
Проблема с new URL(), и как URL.parse() её решает
#почитать
Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна.
⏱ Читать статью
#почитать
Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1👎1🔥1
Что может сломать CSS свойство aspect-ratio
#почитать
В CSS есть свойство aspect-ratio, которое получило полную поддержку примерно в 2021 году. Это свойство дает гораздо лучший дизайнерский результат, чем принудительное изменение размеров. При использовании элементов вроде <video> задача "Мне нужен здесь квадрат" или "Мне нужен размер 16:9" - это вполне разумные требования к дизайну. Особенно в нестабильной среде адаптивной верстки, когда вы намеренно стараетесь не думать о точных размерах, потому что знаете, что они могут измениться.
⏱ Читать статью
#почитать
В CSS есть свойство aspect-ratio, которое получило полную поддержку примерно в 2021 году. Это свойство дает гораздо лучший дизайнерский результат, чем принудительное изменение размеров. При использовании элементов вроде <video> задача "Мне нужен здесь квадрат" или "Мне нужен размер 16:9" - это вполне разумные требования к дизайну. Особенно в нестабильной среде адаптивной верстки, когда вы намеренно стараетесь не думать о точных размерах, потому что знаете, что они могут измениться.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9
Как веб-серверы обрабатывают запросы
#почитать
Эта статья прольет свет на процессы, лежащие в основе каждого сетевого запроса. Вы рассмотрите этапы установления клиентских соединений на веб-сервере, углубленно изучив сетевые сокеты, и проследите путь сетевого запроса от начала до конца. В результате получите глубокое представление о всех операциях сетевого стека, критически важных для каждого сетевого запроса.
⏱ Читать статью
#почитать
Эта статья прольет свет на процессы, лежащие в основе каждого сетевого запроса. Вы рассмотрите этапы установления клиентских соединений на веб-сервере, углубленно изучив сетевые сокеты, и проследите путь сетевого запроса от начала до конца. В результате получите глубокое представление о всех операциях сетевого стека, критически важных для каждого сетевого запроса.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥2🙈2
Какой формат лучше — WebP, PNG или JPG
#почитать
Каждый из них имеет свои сильные и слабые стороны. Выбор правильного формата зависит от специфики вашего сайта и изображений, с которыми вы работаете. Узнаем особенности форматов и в каких случаях их лучше использовать.
⏱ Читать статью
#почитать
Каждый из них имеет свои сильные и слабые стороны. Выбор правильного формата зависит от специфики вашего сайта и изображений, с которыми вы работаете. Узнаем особенности форматов и в каких случаях их лучше использовать.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
Всплывающие окна и диалоги
#почитать
⏱ Читать статью
#почитать
Разница между Popovers (т.е. атрибутом popover) и Dialogs (т.е. как элементом dialog, так и доступной ролью диалога) невероятно запутана. Если вы все еще в замешательстве, надеюсь, эта статья раз и навсегда прояснит ситуацию.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
CSS @import: Плюсы и минусы
#почитать
Импортирование CSS в каскадный слой. Условный импорт CSS с помощью запросов @supports и медиа запросов. @import vs <link>
⏱ Читать статью
#почитать
Импортирование CSS в каскадный слой. Условный импорт CSS с помощью запросов @supports и медиа запросов. @import vs <link>
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Победители awwwards и их performance в Lighthouse
#почитать
Все дизайнеры обожают сайт awwwards – площадку с платной публикацией, где собраны самые классные работы в сфере веб-дизайна. А поскольку мы душнилы по части performance, мы собрали почти 5000 сайтов, определили их фреймворк и проверили производительность в Lighthouse.
⏱ Читать статью
#почитать
Все дизайнеры обожают сайт awwwards – площадку с платной публикацией, где собраны самые классные работы в сфере веб-дизайна. А поскольку мы душнилы по части performance, мы собрали почти 5000 сайтов, определили их фреймворк и проверили производительность в Lighthouse.
Please open Telegram to view this post
VIEW IN TELEGRAM
🎉8
Паттерны для эффективного манипулирования DOM с ванильным JavaScript
#почитать
В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий.
⏱ Читать статью
#почитать
В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Элегантная реализация Long Press обработчика с помощью CSS анимации
#почитать
В веб-разработке часто возникает необходимость обрабатывать различные типы взаимодействий пользователя, включая короткие и длинные нажатия. В этой статье мы рассмотрим изящный способ реализации обработчиков для этих двух взаимодействий.
⏱ Читать статью
#почитать
В веб-разработке часто возникает необходимость обрабатывать различные типы взаимодействий пользователя, включая короткие и длинные нажатия. В этой статье мы рассмотрим изящный способ реализации обработчиков для этих двух взаимодействий.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍4👏1