Элегантная реализация 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
CSS min() — всё, что нужно
#почитать
⏱ Читать статью
#почитать
Victor Ayomipo экспериментирует с CSS функцией min(), исследуя её гибкость с помощью различных единиц измерения, чтобы определить, является ли она абсолютной гарантией отзывчивости. Узнайте, какие предостережения он делает против догматических подходов к веб-дизайну, основываясь на своих выводах.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤1🔥1
Rust vs JavaScript: повышение производительности на 66% с помощью WebAssembly
#почитать
JavaScript обычно выполняется в одном потоке, который часто называют главным. Это означает, что JavaScript выполняет одну задачу за раз в синхронном режиме. Главный поток также обрабатывает задачи рендеринга — рисование и верстку, — а также взаимодействие с пользователем. Таким образом, длительное выполнение задач JavaScript иногда приводит к тому, что браузер перестает реагировать на запросы. Именно поэтому веб-страницы могут «зависать» при выполнении тяжелых функций JavaScript, блокируя взаимодействие с пользователем.
⏱ Читать статью
#почитать
JavaScript обычно выполняется в одном потоке, который часто называют главным. Это означает, что JavaScript выполняет одну задачу за раз в синхронном режиме. Главный поток также обрабатывает задачи рендеринга — рисование и верстку, — а также взаимодействие с пользователем. Таким образом, длительное выполнение задач JavaScript иногда приводит к тому, что браузер перестает реагировать на запросы. Именно поэтому веб-страницы могут «зависать» при выполнении тяжелых функций JavaScript, блокируя взаимодействие с пользователем.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Глассморфизм и SVG
#почитать
⏱ Читать статью
#почитать
Почти три года назад, когда у компании был еще старый фирменный стиль, мы столкнулись с проблемой экспорта из фигмы изображений в формате SVG. Сложность была с изображениями, где был эффект глассморфизма, он же эффект матового стекла (frosted glass).
Недавно чисто из любопытства я решил проверить, починили ли в Figma эту проблему. Проблема осталась. Плагинов так и нет, а гугл не предлагает хороших решений. Поэтому решил выложить эту статью сюда, может, кому пригодится.
Дело в том, что при глассморфизме какой-либо элемент иллюстрации делается прозрачным, а часть изображения за этим элементом размывается.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1
Жаркий спор по теме Masonry в CSS
#почитать
CSS получает новый функционал, с помощью которого можно будет создавать сетки по типу Pinterest. Но из-за дебатов между командами WebKit и Chrome релиз задерживается. Решается вопрос о том, как должен выглядеть синтаксис.
⏱ Читать статью
#почитать
CSS получает новый функционал, с помощью которого можно будет создавать сетки по типу Pinterest. Но из-за дебатов между командами WebKit и Chrome релиз задерживается. Решается вопрос о том, как должен выглядеть синтаксис.
Please open Telegram to view this post
VIEW IN TELEGRAM
😁6🤔2🔥1
Наиболее эффективные методы улучшения Core Web Vitals
#почитать
Вопросы производительности могут быть не столь очевидны для тех, чья карьера не была связана с этой областью. Именно поэтому важно понимать, какие оптимизации способны наиболее существенно повлиять на это. На реализацию всех рекомендаций скорее всего просто не будет времени, поэтому важно задать себе вопрос: какие оптимизации принесут максимальную выгоду пользователям?
⏱ Читать статью
#почитать
Вопросы производительности могут быть не столь очевидны для тех, чья карьера не была связана с этой областью. Именно поэтому важно понимать, какие оптимизации способны наиболее существенно повлиять на это. На реализацию всех рекомендаций скорее всего просто не будет времени, поэтому важно задать себе вопрос: какие оптимизации принесут максимальную выгоду пользователям?
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔5🔥1
Как создавать многошаговые формы с помощью Vanilla JavaScript и CSS
#почитать
Многошаговые формы - хороший выбор, если ваша форма большая и содержит много элементов управления. Никто не хочет прокручивать длинную форму на мобильном устройстве. Сгруппировав элементы управления по экранам, мы можем повысить удобство заполнения длинных и сложных форм.
⏱ Читать статью
#почитать
Многошаговые формы - хороший выбор, если ваша форма большая и содержит много элементов управления. Никто не хочет прокручивать длинную форму на мобильном устройстве. Сгруппировав элементы управления по экранам, мы можем повысить удобство заполнения длинных и сложных форм.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Интуитивно понятное объяснение конструкции Async/await в JavaScript
#почитать
Эта статья написана в расчете на то, что вы уже знакомы с обратными вызовами и промисами, а также имеете базовое представление об асинхронной парадигме в JavaScript.
⏱ Читать статью
#почитать
Эта статья написана в расчете на то, что вы уже знакомы с обратными вызовами и промисами, а также имеете базовое представление об асинхронной парадигме в JavaScript.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥3❤1
HTML элемент search
#почитать
HTML-элемент search — это контейнер, представляющий части веб-страницы с функциональностью поиска.
⏱ Читать статью
#почитать
HTML-элемент search — это контейнер, представляющий части веб-страницы с функциональностью поиска.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Практикум. 6 способов выровнять блок по центру по вертикали и горизонтали
#почитать
Перед вами встала задача выровнять блок по центру экрана по вертикали и горизонтали. Предположим, это будет всплывающее окно. В этом рецепте разберём все существующие на данный момент способы решения задачи.
⏱ Читать статью
#почитать
Перед вами встала задача выровнять блок по центру экрана по вертикали и горизонтали. Предположим, это будет всплывающее окно. В этом рецепте разберём все существующие на данный момент способы решения задачи.
Please open Telegram to view this post
VIEW IN TELEGRAM
😁6👍3
Улучшение производительности с делегированием событий
#почитать
Делегирование событий — техника в веб-разработке, используемая для более эффективного управления событиями. Вместо того чтобы добавлять слушателей событий к каждому элементу, можно прикрепить один слушатель к родительскому элементу, повысив эффективность. Этот родительский элемент затем обрабатывает события для всех дочерних элементов и становится более эффективным, как продемонстрировано в статье.
⏱ Читать статью
#почитать
Делегирование событий — техника в веб-разработке, используемая для более эффективного управления событиями. Вместо того чтобы добавлять слушателей событий к каждому элементу, можно прикрепить один слушатель к родительскому элементу, повысив эффективность. Этот родительский элемент затем обрабатывает события для всех дочерних элементов и становится более эффективным, как продемонстрировано в статье.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Uncaught TypeError: Cannot read property of undefined
#почитать
Эта ошибка возникает, когда вы пытаетесь получить доступ к свойству объекта, который в данный момент имеет значение undefined.
⏱ Читать статью
#почитать
Эта ошибка возникает, когда вы пытаетесь получить доступ к свойству объекта, который в данный момент имеет значение undefined.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍1
Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Какие знаешь псевдо-классы?»
#почитать
⏱ Читать статью
#почитать
Недавно у меня появилось желание снова проверить себя и показать сообществу свои ответы на самые популярные вопросы по вёрстке. Может же быть так, что мои ответы были неполными или некорректными. Если это так, то я научусь новому. А если всё хорошо, то они помогут другим людям в подготовке к собеседованию. Кажется, это в любом случае будет полезно.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Display:none по таймауту
#почитать
Допустим, у нас есть блок (скажем, бутстраповская ячейка <div class="col-12">) и мы хотим её схлопывать (скажем, по клику на кнопке).
⏱ Читать статью
#почитать
Допустим, у нас есть блок (скажем, бутстраповская ячейка <div class="col-12">) и мы хотим её схлопывать (скажем, по клику на кнопке).
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1
HTML элемент details: Встроенный аккордеон, который вы не используете
#почитать
Узнайте, как HTML элемент <details> может заменить JavaScript аккордеоны и почему он может быть лучше, чем ваше текущее решение.
⏱ Читать статью
#почитать
Узнайте, как HTML элемент <details> может заменить JavaScript аккордеоны и почему он может быть лучше, чем ваше текущее решение.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🤬2🔥1
CSS content-visibility: Улучшение производительности веб-сайтов
#почитать
CSS свойство content-visibility откладывает рендеринг элемента, включая компоновку и отрисовку, до тех пор, пока он не понадобится
⏱ Читать статью
#почитать
CSS свойство content-visibility откладывает рендеринг элемента, включая компоновку и отрисовку, до тех пор, пока он не понадобится
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤1