Релиз 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
Как сделать анимацию разными способами: CSS, WebP, Canvas, Lottie, Spine и секвенции
#почитать
⏱ Читать статью
#почитать
Для каждой из перечисленных технологий я буду приводить пример использования анимации в реальном проекте.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Практикум. Загрузка файла с прогресс-баром
#почитать
Загрузка пользователем файлов на сервер — часто встречающаяся задача при создании сайтов и приложений. Если файлы большие, то хорошей практикой будет показывать пользователю прогресс и результат загрузки файла. Для этого можно использовать прогресс-бар.
Организовать полный процесс загрузки файла возможно только с использованием серверной части, реализация которой выходит за рамки данной статьи. Поэтому далее будет рассмотрена организация отправки файла на стороне клиента: HTML-разметка, стилизация элементов и JS-код для передачи файла на сервер.
⏱ Читать статью
#почитать
Загрузка пользователем файлов на сервер — часто встречающаяся задача при создании сайтов и приложений. Если файлы большие, то хорошей практикой будет показывать пользователю прогресс и результат загрузки файла. Для этого можно использовать прогресс-бар.
Организовать полный процесс загрузки файла возможно только с использованием серверной части, реализация которой выходит за рамки данной статьи. Поэтому далее будет рассмотрена организация отправки файла на стороне клиента: HTML-разметка, стилизация элементов и JS-код для передачи файла на сервер.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7🎉2👍1
За хорошим UI следует хороший UX
#почитать
Когда Google изменила оттенок синего в рекламных ссылках, она получила дополнительный годовой доход в размере 200 миллионов долларов.
⏱ Читать статью
#почитать
Когда Google изменила оттенок синего в рекламных ссылках, она получила дополнительный годовой доход в размере 200 миллионов долларов.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6🤔2🔥1
HTML — язык программирования. Убедите меня в обратном
#почитать
HTML — самый значимый язык вычислений, программирования или чего-либо еще, из когда-либо созданных.
⏱ Читать статью
#почитать
HTML — самый значимый язык вычислений, программирования или чего-либо еще, из когда-либо созданных.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10😁2
@scope и блоки стилей HTML — это мощное сочетание
#почитать
Существует так много различных инструментов для написания CSS с ограниченной областью видимости с очень разными взглядами на то, как это делать. Иногда это лишь подфункция инструмента, выполняющего другие задачи. Но, как правило, это концепция, требующая инструментария для реализации.
⏱ Читать статью
#почитать
Существует так много различных инструментов для написания CSS с ограниченной областью видимости с очень разными взглядами на то, как это делать. Иногда это лишь подфункция инструмента, выполняющего другие задачи. Но, как правило, это концепция, требующая инструментария для реализации.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👏3❤1👍1