navigator.clipboard — Новый асинхронный Clipboard API в JavaScript
#почитать
Копирование и вставка текста, изображений и файлов с помощью нового API navigator.clipboard
⏱ Читать статью
#почитать
Копирование и вставка текста, изображений и файлов с помощью нового API navigator.clipboard
Please open Telegram to view this post
VIEW IN TELEGRAM
HTML-коды популярных эмодзи
#почитать
Эта таблица станет настоящим помощником для начинающих и опытных веб-разработчиков, которые хотят улучшить пользовательский опыт и добавить яркие элементы на свои проекты.
⏱ Читать статью
#почитать
Эта таблица станет настоящим помощником для начинающих и опытных веб-разработчиков, которые хотят улучшить пользовательский опыт и добавить яркие элементы на свои проекты.
Please open Telegram to view this post
VIEW IN TELEGRAM
🧑🏻💻 Хотите начать разрабатывать с Vue.js, но не знаете, с чего начать?
На открытом вебинаре 22 апреля в 20:00 мск мы расскажем вам о Vue.js 3. Вы увидите, как просто установить Vue, какие основные концепции нужно освоить и какие библиотеки вам понадобятся для старта. Убедитесь, что этот фреймворк проще, чем кажется, и намного мощнее, чем вы могли бы подумать!
После вебинара вы будете понимать, как применять Vue.js в своих проектах. Это простой, быстрый и эффективный фреймворк для вашего будущего в веб-разработке.
👉 Регистрируйтесь прямо сейчас и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/H1Vg/
На открытом вебинаре 22 апреля в 20:00 мск мы расскажем вам о Vue.js 3. Вы увидите, как просто установить Vue, какие основные концепции нужно освоить и какие библиотеки вам понадобятся для старта. Убедитесь, что этот фреймворк проще, чем кажется, и намного мощнее, чем вы могли бы подумать!
После вебинара вы будете понимать, как применять Vue.js в своих проектах. Это простой, быстрый и эффективный фреймворк для вашего будущего в веб-разработке.
👉 Регистрируйтесь прямо сейчас и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/H1Vg/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, erid: 2W5zFHaFkWcЛипкие заголовки и полновысотные элементы: Сложная комбинация
#почитать
Липкое (sticky) позиционирование - одна из тех функций CSS, которая довольно чувствительна и может быть сведена на нет множеством факторов. И вот один из этих факторов, который стоит добавить в ваш мысленный каталог: липкие элементы плохо работают, если им приходится вместе с другими элементами формировать общую высоту, например, 100vh.
⏱ Читать статью
#почитать
Липкое (sticky) позиционирование - одна из тех функций CSS, которая довольно чувствительна и может быть сведена на нет множеством факторов. И вот один из этих факторов, который стоит добавить в ваш мысленный каталог: липкие элементы плохо работают, если им приходится вместе с другими элементами формировать общую высоту, например, 100vh.
Please open Telegram to view this post
VIEW IN TELEGRAM
Разбираемся с цветами: пространства, иллюзии и квантование
#почитать
Однажды я заметил, что цвет из Figma на симуляторе почему-то выглядел иначе. Вроде бы HEX-код один и тот же, но они явно отличались. Это заставило меня задуматься о том, что происходит с цветами при передаче изображения из одного приложения в другое. Чтобы разобраться, я решил погрузиться в вопрос и изучить природу цвета. Из этого исследования и появилась данная статья.
⏱ Читать статью
#почитать
Однажды я заметил, что цвет из Figma на симуляторе почему-то выглядел иначе. Вроде бы HEX-код один и тот же, но они явно отличались. Это заставило меня задуматься о том, что происходит с цветами при передаче изображения из одного приложения в другое. Чтобы разобраться, я решил погрузиться в вопрос и изучить природу цвета. Из этого исследования и появилась данная статья.
Please open Telegram to view this post
VIEW IN TELEGRAM
Frontend Masters: принципы SOLID в React/React Native
#почитать
SOLID — это группа из пяти важных правил проектирования программного обеспечения. Эти правила помогают сделать код понятным, гибким и удобным для сопровождения.
⏱ Читать статью
#почитать
SOLID — это группа из пяти важных правил проектирования программного обеспечения. Эти правила помогают сделать код понятным, гибким и удобным для сопровождения.
Please open Telegram to view this post
VIEW IN TELEGRAM
Упрощаем CSS-анимации с помощью свойств display и размеров элемента
#почитать
До недавнего времени далеко не все свойства CSS можно было анимировать. Например, чтобы создать эффект плавного появления или исчезновения элемента, приходилось использовать свойство opacity, а не display, поскольку display нельзя было анимировать. А проблема в том, что визуально скрытый элемент всё же оставался на странице.
⏱ Читать статью
#почитать
До недавнего времени далеко не все свойства CSS можно было анимировать. Например, чтобы создать эффект плавного появления или исчезновения элемента, приходилось использовать свойство opacity, а не display, поскольку display нельзя было анимировать. А проблема в том, что визуально скрытый элемент всё же оставался на странице.
Please open Telegram to view this post
VIEW IN TELEGRAM
CSS единицы измерения: lh и rlh
#почитать
Изучение новых относительных единиц измерения CSS основанных на высоте строки и позволяющих отказаться от угадывания вертикального ритма.
⏱ Читать статью
#почитать
Изучение новых относительных единиц измерения CSS основанных на высоте строки и позволяющих отказаться от угадывания вертикального ритма.
Please open Telegram to view this post
VIEW IN TELEGRAM
Всего несколько строк CSS для плавных переходов между страницами
#почитать
Одна строка CSS-кода может обеспечить чёткие переходы между страницами веб-приложений (и сайтов — для тех, кто их обслуживает, есть разница), открывая новые возможности для проектирования и работы. Так что предлагаю разобрать тему переходов между представлениями (View Transitions), обсудив их актуальность и сделав первые шаги при помощи всего одной строки CSS.
⏱ Читать статью
#почитать
Одна строка CSS-кода может обеспечить чёткие переходы между страницами веб-приложений (и сайтов — для тех, кто их обслуживает, есть разница), открывая новые возможности для проектирования и работы. Так что предлагаю разобрать тему переходов между представлениями (View Transitions), обсудив их актуальность и сделав первые шаги при помощи всего одной строки CSS.
Please open Telegram to view this post
VIEW IN TELEGRAM
Веерное раскрытие с grid и @property
#почитать
Анимация веерное раскрытие подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания. Используя CSS grid, мы избавляемся от лишней работы по позиционированию.
⏱ Читать статью
#почитать
Анимация веерное раскрытие подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания. Используя CSS grid, мы избавляемся от лишней работы по позиционированию.
Please open Telegram to view this post
VIEW IN TELEGRAM
JavaScript: Всё ли ты знаешь о работе с асинхронностью?
#почитать
Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину.
⏱ Читать статью
#почитать
Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину.
Please open Telegram to view this post
VIEW IN TELEGRAM
Минималистичная JavaScript песочница
#почитать
Основное отличие этой песочницы от других — сжатие и кодирование пользовательского кода непосредственно в URL. Код не хранится на сервере или где-либо ещё. Если у вас есть ссылка, значит у вас есть код.
⏱ Читать статью
#почитать
Основное отличие этой песочницы от других — сжатие и кодирование пользовательского кода непосредственно в URL. Код не хранится на сервере или где-либо ещё. Если у вас есть ссылка, значит у вас есть код.
Please open Telegram to view this post
VIEW IN TELEGRAM
Функции call, apply и bind: использование и сравнение
#почитать
В JavaScript ключевое слово this имеет решающее значение для обеспечения работы функций в определенном контексте. Чтобы эффективно определить контекст и использовать функции для различных объектов, полезными решениями являются такие методы, как call(), apply() и bind(). Рассмотрим эти методы и способы их использования.
⏱ Читать статью
#почитать
В JavaScript ключевое слово this имеет решающее значение для обеспечения работы функций в определенном контексте. Чтобы эффективно определить контекст и использовать функции для различных объектов, полезными решениями являются такие методы, как call(), apply() и bind(). Рассмотрим эти методы и способы их использования.
Please open Telegram to view this post
VIEW IN TELEGRAM
6 главных технологий для хранения данных в браузере
#почитать
Ведущий инженер RxDB провел комплексный анализ и сравнение шести основных технологий хранения данных в браузере – от классических Cookies до современных WASM SQLite, оценивая их функциональность, производительность и потенциал для оптимизации.
⏱ Читать статью
#почитать
Ведущий инженер RxDB провел комплексный анализ и сравнение шести основных технологий хранения данных в браузере – от классических Cookies до современных WASM SQLite, оценивая их функциональность, производительность и потенциал для оптимизации.
Please open Telegram to view this post
VIEW IN TELEGRAM
align-content: Простой способ выравнивания по центру
#почитать
Наконец, можно центрировать/выравнивать по центру содержимое блочных макетов, не прибегая к flexbox гимнастике
⏱ Читать статью
#почитать
Наконец, можно центрировать/выравнивать по центру содержимое блочных макетов, не прибегая к flexbox гимнастике
Please open Telegram to view this post
VIEW IN TELEGRAM
Лучший подход к SVG иконкам
#почитать
SVG — лучший подход к реализации системы иконок в вебе. Существует множество способов использования SVG, каждый из которых имеет свои плюсы и минусы, и все их мы рассмотрим.
⏱ Читать статью
#почитать
SVG — лучший подход к реализации системы иконок в вебе. Существует множество способов использования SVG, каждый из которых имеет свои плюсы и минусы, и все их мы рассмотрим.
Please open Telegram to view this post
VIEW IN TELEGRAM
Мощь CSS-масок
#почитать
Исторически сложилось, что термин «маскирование» очень широко применяется в разных сферах жизни и с кардинально разными значениями. Маска, о которой речь в статье, пришла в веб из мира дизайна. Там маскирование — весьма популярная техника, с помощью которой можно скрыть или вырезать часть изображения произвольной формы. Рассмотрим на очень упрощенном примере.
⏱ Читать статью
#почитать
Исторически сложилось, что термин «маскирование» очень широко применяется в разных сферах жизни и с кардинально разными значениями. Маска, о которой речь в статье, пришла в веб из мира дизайна. Там маскирование — весьма популярная техника, с помощью которой можно скрыть или вырезать часть изображения произвольной формы. Рассмотрим на очень упрощенном примере.
Please open Telegram to view this post
VIEW IN TELEGRAM