Как веб-серверы обрабатывают запросы
#почитать
Эта статья прольет свет на процессы, лежащие в основе каждого сетевого запроса. Вы рассмотрите этапы установления клиентских соединений на веб-сервере, углубленно изучив сетевые сокеты, и проследите путь сетевого запроса от начала до конца. В результате получите глубокое представление о всех операциях сетевого стека, критически важных для каждого сетевого запроса.
⏱ Читать статью
#почитать
Эта статья прольет свет на процессы, лежащие в основе каждого сетевого запроса. Вы рассмотрите этапы установления клиентских соединений на веб-сервере, углубленно изучив сетевые сокеты, и проследите путь сетевого запроса от начала до конца. В результате получите глубокое представление о всех операциях сетевого стека, критически важных для каждого сетевого запроса.
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
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