🧑🏻💻 Хотите начать разрабатывать с 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👍5❤1🔥1
Липкие заголовки и полновысотные элементы: Сложная комбинация
#почитать
Липкое (sticky) позиционирование - одна из тех функций CSS, которая довольно чувствительна и может быть сведена на нет множеством факторов. И вот один из этих факторов, который стоит добавить в ваш мысленный каталог: липкие элементы плохо работают, если им приходится вместе с другими элементами формировать общую высоту, например, 100vh.
⏱ Читать статью
#почитать
Липкое (sticky) позиционирование - одна из тех функций CSS, которая довольно чувствительна и может быть сведена на нет множеством факторов. И вот один из этих факторов, который стоит добавить в ваш мысленный каталог: липкие элементы плохо работают, если им приходится вместе с другими элементами формировать общую высоту, например, 100vh.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤2🔥1
Разбираемся с цветами: пространства, иллюзии и квантование
#почитать
Однажды я заметил, что цвет из Figma на симуляторе почему-то выглядел иначе. Вроде бы HEX-код один и тот же, но они явно отличались. Это заставило меня задуматься о том, что происходит с цветами при передаче изображения из одного приложения в другое. Чтобы разобраться, я решил погрузиться в вопрос и изучить природу цвета. Из этого исследования и появилась данная статья.
⏱ Читать статью
#почитать
Однажды я заметил, что цвет из Figma на симуляторе почему-то выглядел иначе. Вроде бы HEX-код один и тот же, но они явно отличались. Это заставило меня задуматься о том, что происходит с цветами при передаче изображения из одного приложения в другое. Чтобы разобраться, я решил погрузиться в вопрос и изучить природу цвета. Из этого исследования и появилась данная статья.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤2🔥1
CSS Grid Layout: Асимметричная резиновая сетка
#почитать
⏱ Читать статью
#почитать
В веб-дизайны сетки, как в Pinterest уже давно не являются чем-то новым. Но что, если нужно сделать блоки различной высоты, при этом чтобы верстка была резиновой. Оказывается, это можно сделать, используя только стандартные возможности CSS Grid Layout.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8👎2🔥1
Frontend Masters: принципы SOLID в React/React Native
#почитать
SOLID — это группа из пяти важных правил проектирования программного обеспечения. Эти правила помогают сделать код понятным, гибким и удобным для сопровождения.
⏱ Читать статью
#почитать
SOLID — это группа из пяти важных правил проектирования программного обеспечения. Эти правила помогают сделать код понятным, гибким и удобным для сопровождения.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2❤1
Упрощаем CSS-анимации с помощью свойств display и размеров элемента
#почитать
До недавнего времени далеко не все свойства CSS можно было анимировать. Например, чтобы создать эффект плавного появления или исчезновения элемента, приходилось использовать свойство opacity, а не display, поскольку display нельзя было анимировать. А проблема в том, что визуально скрытый элемент всё же оставался на странице.
⏱ Читать статью
#почитать
До недавнего времени далеко не все свойства CSS можно было анимировать. Например, чтобы создать эффект плавного появления или исчезновения элемента, приходилось использовать свойство opacity, а не display, поскольку display нельзя было анимировать. А проблема в том, что визуально скрытый элемент всё же оставался на странице.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2
Создание анимации орбиты с помощью CSS переменных
#почитать
⏱ Читать статью
#почитать
Давайте анимируем CSS переменные! Это мощный способ применения CSS анимации, которая в противном случае была бы утомительной или непрактичной.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1🔥1
CSS единицы измерения: lh и rlh
#почитать
Изучение новых относительных единиц измерения CSS основанных на высоте строки и позволяющих отказаться от угадывания вертикального ритма.
⏱ Читать статью
#почитать
Изучение новых относительных единиц измерения CSS основанных на высоте строки и позволяющих отказаться от угадывания вертикального ритма.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Всего несколько строк CSS для плавных переходов между страницами
#почитать
Одна строка CSS-кода может обеспечить чёткие переходы между страницами веб-приложений (и сайтов — для тех, кто их обслуживает, есть разница), открывая новые возможности для проектирования и работы. Так что предлагаю разобрать тему переходов между представлениями (View Transitions), обсудив их актуальность и сделав первые шаги при помощи всего одной строки CSS.
⏱ Читать статью
#почитать
Одна строка CSS-кода может обеспечить чёткие переходы между страницами веб-приложений (и сайтов — для тех, кто их обслуживает, есть разница), открывая новые возможности для проектирования и работы. Так что предлагаю разобрать тему переходов между представлениями (View Transitions), обсудив их актуальность и сделав первые шаги при помощи всего одной строки CSS.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10👎2🔥2
Веерное раскрытие с grid и @property
#почитать
Анимация веерное раскрытие подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания. Используя CSS grid, мы избавляемся от лишней работы по позиционированию.
⏱ Читать статью
#почитать
Анимация веерное раскрытие подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания. Используя CSS grid, мы избавляемся от лишней работы по позиционированию.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2
JavaScript: Всё ли ты знаешь о работе с асинхронностью?
#почитать
Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину.
⏱ Читать статью
#почитать
Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2
Переходите на сторону 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