Переходите на сторону light-dark()
#почитать
⏱ Читать статью
#почитать
За последние несколько лет интерфейсы с темным режимом сильно изменились. Все мы знаем традиционный подход с использованием медиа-запросов, но в этой статье Sara Joy демонстрирует современные CSS-функции, благодаря которым соблюсти предпочтения пользователя в выборе цветовой схемы становится чертовски просто.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2
Минималистичная JavaScript песочница
#почитать
Основное отличие этой песочницы от других — сжатие и кодирование пользовательского кода непосредственно в URL. Код не хранится на сервере или где-либо ещё. Если у вас есть ссылка, значит у вас есть код.
⏱ Читать статью
#почитать
Основное отличие этой песочницы от других — сжатие и кодирование пользовательского кода непосредственно в URL. Код не хранится на сервере или где-либо ещё. Если у вас есть ссылка, значит у вас есть код.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Функции call, apply и bind: использование и сравнение
#почитать
В JavaScript ключевое слово this имеет решающее значение для обеспечения работы функций в определенном контексте. Чтобы эффективно определить контекст и использовать функции для различных объектов, полезными решениями являются такие методы, как call(), apply() и bind(). Рассмотрим эти методы и способы их использования.
⏱ Читать статью
#почитать
В JavaScript ключевое слово this имеет решающее значение для обеспечения работы функций в определенном контексте. Чтобы эффективно определить контекст и использовать функции для различных объектов, полезными решениями являются такие методы, как call(), apply() и bind(). Рассмотрим эти методы и способы их использования.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
6 главных технологий для хранения данных в браузере
#почитать
Ведущий инженер RxDB провел комплексный анализ и сравнение шести основных технологий хранения данных в браузере – от классических Cookies до современных WASM SQLite, оценивая их функциональность, производительность и потенциал для оптимизации.
⏱ Читать статью
#почитать
Ведущий инженер RxDB провел комплексный анализ и сравнение шести основных технологий хранения данных в браузере – от классических Cookies до современных WASM SQLite, оценивая их функциональность, производительность и потенциал для оптимизации.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2
align-content: Простой способ выравнивания по центру
#почитать
Наконец, можно центрировать/выравнивать по центру содержимое блочных макетов, не прибегая к flexbox гимнастике
⏱ Читать статью
#почитать
Наконец, можно центрировать/выравнивать по центру содержимое блочных макетов, не прибегая к flexbox гимнастике
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👍2
Лучший подход к SVG иконкам
#почитать
SVG — лучший подход к реализации системы иконок в вебе. Существует множество способов использования SVG, каждый из которых имеет свои плюсы и минусы, и все их мы рассмотрим.
⏱ Читать статью
#почитать
SVG — лучший подход к реализации системы иконок в вебе. Существует множество способов использования SVG, каждый из которых имеет свои плюсы и минусы, и все их мы рассмотрим.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Мощь CSS-масок
#почитать
Исторически сложилось, что термин «маскирование» очень широко применяется в разных сферах жизни и с кардинально разными значениями. Маска, о которой речь в статье, пришла в веб из мира дизайна. Там маскирование — весьма популярная техника, с помощью которой можно скрыть или вырезать часть изображения произвольной формы. Рассмотрим на очень упрощенном примере.
⏱ Читать статью
#почитать
Исторически сложилось, что термин «маскирование» очень широко применяется в разных сферах жизни и с кардинально разными значениями. Маска, о которой речь в статье, пришла в веб из мира дизайна. Там маскирование — весьма популярная техника, с помощью которой можно скрыть или вырезать часть изображения произвольной формы. Рассмотрим на очень упрощенном примере.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Не раздражающая валидация формы: CSS :user-valid и :user-invalid
#почитать
Новые псевдоклассы :user-valid и :user-invalid предоставляют более умный способ стилизации состояния валидности формы в зависимости от действия пользователя.
⏱ Читать статью
#почитать
Новые псевдоклассы :user-valid и :user-invalid предоставляют более умный способ стилизации состояния валидности формы в зависимости от действия пользователя.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Кнопки с несколькими состояниями
#почитать
Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей.
⏱ Читать статью
#почитать
Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5👎1🔥1
CSS :has() — Псевдокласс, который давно ждали
#почитать
Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов.
⏱ Читать статью
#почитать
Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🤔2
Модули CSS раскладки — что такое и как готовить
#почитать
В 20-ом веке браузеры были гораздо менее развиты, а CSS сильно ограничен. Он подходил только для оформления простых текстов что-то вроде документов Word. Для оформления сайтов приходилось обращаться к таблицам, чтобы создавать подобие типографской сетки для раскладки элементов. Пока в 2003 году не появился CSS Zen Garden, пропагандирующий оформление сайтов с помощью CSS. В оформлении использовались хаки с флоатами и другие трюки, но технология была несовершенна. Далее, с развитием браузеров, появились инлайн-блоки. Они неплохо справлялись с расположением элементов в ряд, но тоже имели недостатки. И только в начале десятых появились новые модули раскладки: Flexbox и Grid Layout. О них и поговорим.
⏱ Читать статью
#почитать
В 20-ом веке браузеры были гораздо менее развиты, а CSS сильно ограничен. Он подходил только для оформления простых текстов что-то вроде документов Word. Для оформления сайтов приходилось обращаться к таблицам, чтобы создавать подобие типографской сетки для раскладки элементов. Пока в 2003 году не появился CSS Zen Garden, пропагандирующий оформление сайтов с помощью CSS. В оформлении использовались хаки с флоатами и другие трюки, но технология была несовершенна. Далее, с развитием браузеров, появились инлайн-блоки. Они неплохо справлялись с расположением элементов в ряд, но тоже имели недостатки. И только в начале десятых появились новые модули раскладки: Flexbox и Grid Layout. О них и поговорим.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1🔥1
Альтернатива обычным техническим иллюстрациям и визуализации данных
#почитать
Как правило, технические иллюстрации и визуализацию данных выполняли с помощью бумаги, ручек, карандашей, циркулей и линеек. Но теперь возможно всё - вы можете использовать как аналоговые, так и цифровые методы. С момента массового распространения интернета, данные (текстовые, числовые, символьные) получили широкое распространение и стали современной золотой валютой. Любой, у кого есть программное обеспечение или кто знает язык программирования, может легко научиться визуализировать данные. И сегодня подготовить технические иллюстрации стало намного проще, чем в предыдущие годы. Но это не всегда означает, что то, что делается сегодня, лучше того, что делалось раньше.
⏱ Читать статью
#почитать
Как правило, технические иллюстрации и визуализацию данных выполняли с помощью бумаги, ручек, карандашей, циркулей и линеек. Но теперь возможно всё - вы можете использовать как аналоговые, так и цифровые методы. С момента массового распространения интернета, данные (текстовые, числовые, символьные) получили широкое распространение и стали современной золотой валютой. Любой, у кого есть программное обеспечение или кто знает язык программирования, может легко научиться визуализировать данные. И сегодня подготовить технические иллюстрации стало намного проще, чем в предыдущие годы. Но это не всегда означает, что то, что делается сегодня, лучше того, что делалось раньше.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Web Performance API: Измерьте важное
#почитать
От медленного к быстрому: Использование JavaScript Performance API для оптимизации веб-приложений
⏱ Читать статью
#почитать
От медленного к быстрому: Использование JavaScript Performance API для оптимизации веб-приложений
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
CSS @supports
#почитать
Определение поддержки возможностей CSS и обеспечение интеллектуального отката с помощью @supports
⏱ Читать статью
#почитать
Определение поддержки возможностей CSS и обеспечение интеллектуального отката с помощью @supports
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
Как работает position: sticky и почему он часто не прилипает
#почитать
⏱ Читать статью
#почитать
position: sticky — штука, которая превращает relative-элемент в fixed-элемент, как только он доезжает до заданного инсет-порога, и отлипает в момент, когда скроллинг выталкивает родителя за край.
Работает круто, пока вы не включите overflow, не забудете задать top, не положите элемент в flex c align-items: stretch, не сделаете таблицу из <thead> и не упрётесь в кейс с вложенными скролл-контейнерами.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8
Коллекция HTML/CSS лайфхаков
#почитать
⏱ Читать статью
#почитать
А недавно я подумал: а вдруг есть фронтендеры, которые хотят сделать ужасный интерфейс? Ну не любят они пользователей. Или хотят сделать пакость работодателю, который их обидел. Где им взять советы?
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6👎3🔥1