Ускоряем сайт оптимизацией шрифтов - большой гайд
#почитать
▫️Шрифты в сжатом виде в формате woff2 могут занимать от 10% до 25% размера всех файлов страницы, загружаемых на первых этапах. Мы учитываем именно создаваемую нагрузку на сеть. Например, HTML, CSS, JavaScript код перед передачей по сети сжимается в 4-5 раза с помощью технологии gzip. То есть, 10%-25% это именно доля от объёма передаваемых данных.
▫️Таким образом, сократив размеры шрифтов в 2 раза, можно добиться ускорения на 5%-12%, что очень весомо. Тем более что работа по оптимизации займёт не более часа. Как это сделать, мы расскажем в этой статье.
⏱ Читать статью
#почитать
▫️Шрифты в сжатом виде в формате woff2 могут занимать от 10% до 25% размера всех файлов страницы, загружаемых на первых этапах. Мы учитываем именно создаваемую нагрузку на сеть. Например, HTML, CSS, JavaScript код перед передачей по сети сжимается в 4-5 раза с помощью технологии gzip. То есть, 10%-25% это именно доля от объёма передаваемых данных.
▫️Таким образом, сократив размеры шрифтов в 2 раза, можно добиться ускорения на 5%-12%, что очень весомо. Тем более что работа по оптимизации займёт не более часа. Как это сделать, мы расскажем в этой статье.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11❤3👍3
Альтернатива WP, Joomla, Drupal - Processwire
#почитать
"Признаться, был удивлён возрастом сего инструмента - почти такой же бородач как и пресловутый WP(!), стабилен, имеет нишу, но популярностью вроде как особо не обзавёлся."
⏱ Читать статью
#почитать
"Признаться, был удивлён возрастом сего инструмента - почти такой же бородач как и пресловутый WP(!), стабилен, имеет нишу, но популярностью вроде как особо не обзавёлся."
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤2🔥1
Как использовать html-элемент <dialog>
#почитать
▫️В своей работе я часто создаю собственные или использую уже готовые UI-компоненты. Проблема с такими компонентами заключается в том, что они часто ограничены определённым фреймворком, и их реализация требует написания сложной нестандартизированной логики. В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().
▫️Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.
▫️В статусе рабочего черновика W3C тег <dialog> появился в мае 2013-го года вместе с такими интерактивными элементами, как <details> и <summary>, предназначенными для решения классических интерфейсных задач. С 2014-го года <dialog> был доступен только в браузерах Google Chrome и Opera, а в Firefox и Safari полноценная поддержка появилась лишь в марте 2022-го года. По этой причине <dialog> довольно редко использовался в реальных проектах.
⏱ Читать статью
#почитать
▫️В своей работе я часто создаю собственные или использую уже готовые UI-компоненты. Проблема с такими компонентами заключается в том, что они часто ограничены определённым фреймворком, и их реализация требует написания сложной нестандартизированной логики. В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().
▫️Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.
▫️В статусе рабочего черновика W3C тег <dialog> появился в мае 2013-го года вместе с такими интерактивными элементами, как <details> и <summary>, предназначенными для решения классических интерфейсных задач. С 2014-го года <dialog> был доступен только в браузерах Google Chrome и Opera, а в Firefox и Safari полноценная поддержка появилась лишь в марте 2022-го года. По этой причине <dialog> довольно редко использовался в реальных проектах.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10👏2😁2
Добавляем текстуру к градиенту - генерируем цветной шум при помощи CSS и SVG
#почитать
Хитрость заключается в создании шума при помощи SVG-фильтра с последующим использованием этого шума в качестве фона. Подложите под него градиент, увеличьте яркость и контрастность, вот и всё — у вас получился градиент с плавным дизерингом.
Вот с чем мы будем работать:
▫️SVG turbulence: это наш фильтр шума.
▫️Фон с градиентом и SVG: дальше мы добавляем этот фильтр в CSS в качестве фонового изображения, сочетающего фильтр с CSS-градиентом.
▫️Повышение яркости и контрастности: затем мы применяем filter CSS, чтобы увеличить яркость и контрастность шума.
▫️Смешение градиентов: наконец, можно использовать mix-blend-mode для дальнейшей фильтрации цветов и смешения градиентов.
⏱ Читать статью
#почитать
Хитрость заключается в создании шума при помощи SVG-фильтра с последующим использованием этого шума в качестве фона. Подложите под него градиент, увеличьте яркость и контрастность, вот и всё — у вас получился градиент с плавным дизерингом.
Вот с чем мы будем работать:
▫️SVG turbulence: это наш фильтр шума.
▫️Фон с градиентом и SVG: дальше мы добавляем этот фильтр в CSS в качестве фонового изображения, сочетающего фильтр с CSS-градиентом.
▫️Повышение яркости и контрастности: затем мы применяем filter CSS, чтобы увеличить яркость и контрастность шума.
▫️Смешение градиентов: наконец, можно использовать mix-blend-mode для дальнейшей фильтрации цветов и смешения градиентов.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👏3
Что выбрать для изучения фронтенд-разработки: интенсив, вебинар, курс?
Выберете бесплатный интенсив от школы "METHED", на котором вы сможете попробовать свои силы, познакомиться поближе с преподавателем и узнать секретные фишки работы.
За 4 дня (с 26 по 29 декабря) мы вместе создадим полноценный сайт-конструктор, сделаем его адаптивным и реализуем функционал на JavaScript. И это абсолютно бесплатно!
Все уроки продуманы до мелочей, а значит вы точно сможете повторить все алгоритмы и прийти к результату.
👉 Для бесплатного участия регистрируйтесь прямо сейчас: https://tglink.io/425dd2592bba?erid=LjN8KBQGz
Сделайте шаг в мир IT уже сегодня!
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024.
Выберете бесплатный интенсив от школы "METHED", на котором вы сможете попробовать свои силы, познакомиться поближе с преподавателем и узнать секретные фишки работы.
За 4 дня (с 26 по 29 декабря) мы вместе создадим полноценный сайт-конструктор, сделаем его адаптивным и реализуем функционал на JavaScript. И это абсолютно бесплатно!
Все уроки продуманы до мелочей, а значит вы точно сможете повторить все алгоритмы и прийти к результату.
👉 Для бесплатного участия регистрируйтесь прямо сейчас: https://tglink.io/425dd2592bba?erid=LjN8KBQGz
Сделайте шаг в мир IT уже сегодня!
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024.
😁9🔥2
🐘Работодатели ищут разработчика на PHP
Ворвитесь на тусовку серьезных ребят и изучите один из самых востребованных ЯП в мире с курсом от Слёрм.
Вы поймёте основные принципы работы и взаимодействия с базами данных, освоите правильные подходы и методологии разработки на PHP. Старт 22 января.
Подробная программа курса ⬅️
Это большой курс, где PHP разбирается комплексно. Вы сможете:
Разрабатывать веб-приложения на языке PHP, используя базовые концепции и синтаксис языка;
Проектировать и разрабатывать функциональность для веб-сайтов и веб-приложений с использованием PHP;
Решать проблемы при работе приложения в продакшене, научиться анализировать результаты работы приложения
Разбираться в основных принципах работы с PHP-библиотеками;
Спикеры курса:
🦇 Всеволод Севостьянов, Staff Engineer в navan.com. Специализируется на построении complex cognitive systems. Команда под его руководством поддерживает multi-tenant клиентский кластер на несколько тысяч компаний;
🎃 Егор Черненок, Senior PHP-разработчик в AGIMA. Пишет сложный бекенд, отвечает за развитие стажёров и джунов.
Встретимся 22 января. Подробная программа на сайте Слёрм 💎
Реклама. ООО «Слёрм» г. Лиски, ОГРН 1193668020545 Erid: 2VtzqxhtKdN
Ворвитесь на тусовку серьезных ребят и изучите один из самых востребованных ЯП в мире с курсом от Слёрм.
Вы поймёте основные принципы работы и взаимодействия с базами данных, освоите правильные подходы и методологии разработки на PHP. Старт 22 января.
Подробная программа курса ⬅️
Это большой курс, где PHP разбирается комплексно. Вы сможете:
Разрабатывать веб-приложения на языке PHP, используя базовые концепции и синтаксис языка;
Проектировать и разрабатывать функциональность для веб-сайтов и веб-приложений с использованием PHP;
Решать проблемы при работе приложения в продакшене, научиться анализировать результаты работы приложения
Разбираться в основных принципах работы с PHP-библиотеками;
Спикеры курса:
🦇 Всеволод Севостьянов, Staff Engineer в navan.com. Специализируется на построении complex cognitive systems. Команда под его руководством поддерживает multi-tenant клиентский кластер на несколько тысяч компаний;
🎃 Егор Черненок, Senior PHP-разработчик в AGIMA. Пишет сложный бекенд, отвечает за развитие стажёров и джунов.
Встретимся 22 января. Подробная программа на сайте Слёрм 💎
Реклама. ООО «Слёрм» г. Лиски, ОГРН 1193668020545 Erid: 2VtzqxhtKdN
👍6🔥2
F и Z паттерны в дизайне. Куда смотрит зритель?
#почитать
При чтении слева направо, пользователи обычно начинают поиск нужной информации с левого верхнего угла и затем перемещают свой взгляд вправо в поисках дополнительных данных. После этого, они переносят свой взгляд в нижнюю левую часть и перескакивают в правый нижний угол. Этот паттерн движения глаз часто называют Диаграммой Гутенберга.
Использование Диаграммы Гутенберга в дизайне страницы позволяет разместить ключевую информацию и элементы интерфейса в основной области в верхней части страницы, таким образом привлекая внимание и предоставляя основную информацию.
⏱ Читать статью
#почитать
При чтении слева направо, пользователи обычно начинают поиск нужной информации с левого верхнего угла и затем перемещают свой взгляд вправо в поисках дополнительных данных. После этого, они переносят свой взгляд в нижнюю левую часть и перескакивают в правый нижний угол. Этот паттерн движения глаз часто называют Диаграммой Гутенберга.
Использование Диаграммы Гутенберга в дизайне страницы позволяет разместить ключевую информацию и элементы интерфейса в основной области в верхней части страницы, таким образом привлекая внимание и предоставляя основную информацию.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2
CSS в 2023: что изменилось за последние несколько лет
#почитать
CSS развивается быстрее, чем когда-либо. Новые функции, появившиеся в нашем распоряжении за несколько лет с момента появления Flexbox и Grid (и те, которых мы ждем в будущем), меняют и способы написания CSS. В этой статье Geoff Graham рассказывает, какие нововведения оказали самое большое влияние на его текущие методы работы с CSS, а какие не изменили ничего (по крайней мере, пока).
▫️Все больше контейнерных запросов (Container Queries)
▫️Группировка стилей в слоях
▫️:is() и :where()
▫️Новый синтаксис функции цвета
▫️Выявление пользовательских предпочтений
▫️Определение цветовых палитр
⏱ Читать статью
#почитать
CSS развивается быстрее, чем когда-либо. Новые функции, появившиеся в нашем распоряжении за несколько лет с момента появления Flexbox и Grid (и те, которых мы ждем в будущем), меняют и способы написания CSS. В этой статье Geoff Graham рассказывает, какие нововведения оказали самое большое влияние на его текущие методы работы с CSS, а какие не изменили ничего (по крайней мере, пока).
▫️Все больше контейнерных запросов (Container Queries)
▫️Группировка стилей в слоях
▫️:is() и :where()
▫️Новый синтаксис функции цвета
▫️Выявление пользовательских предпочтений
▫️Определение цветовых палитр
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍3❤1
Сравнение производительности Tailwind vs BEM
#почитать
Буду сравнивать TailwindCSS с чистым CSS + BEM. Цель - разобраться что является лучшим решением для хорошей архитектуры приложения. Это не вопрос предпочтений, от этого выбора будет зависеть очень многое на поздних этапах разработки и оно должно быть очень хорошо обосновано. Начну со сравнения производительности. Tailwind позволяет значительно уменьшить размер итогового CSS и тем самым ускорить время отображения страницы. Но это сработает только в том случае, если Tailwind классы будут написаны прямо в HTML коде, а не в виде @apply в CSS. Tailwind уменьшает CSS, но увеличивает HTML. Давайте посчитаем разницу с учетом HTML. Будем сравнивать чистый Tailwind с чистым CSS + BEM.
⏱ Первая часть
⏱ Вторая
#почитать
Буду сравнивать TailwindCSS с чистым CSS + BEM. Цель - разобраться что является лучшим решением для хорошей архитектуры приложения. Это не вопрос предпочтений, от этого выбора будет зависеть очень многое на поздних этапах разработки и оно должно быть очень хорошо обосновано. Начну со сравнения производительности. Tailwind позволяет значительно уменьшить размер итогового CSS и тем самым ускорить время отображения страницы. Но это сработает только в том случае, если Tailwind классы будут написаны прямо в HTML коде, а не в виде @apply в CSS. Tailwind уменьшает CSS, но увеличивает HTML. Давайте посчитаем разницу с учетом HTML. Будем сравнивать чистый Tailwind с чистым CSS + BEM.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11👎3🔥1
Атомарный веб-дизайн: принципы работы и разница с UI-китом
#почитать
Все начинается с малого, а именно с атомов. Атомы – основные элементы, на которых строится интерфейс: форма кнопок, шрифты, заголовки, система отступов, сетка и т.п. Они должны соответствовать основе “Простота и ясность”. Быть легкими в восприятии, понятными и легко заменяемыми при необходимости.
⏱ Читать статью
#почитать
Все начинается с малого, а именно с атомов. Атомы – основные элементы, на которых строится интерфейс: форма кнопок, шрифты, заголовки, система отступов, сетка и т.п. Они должны соответствовать основе “Простота и ясность”. Быть легкими в восприятии, понятными и легко заменяемыми при необходимости.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9👎2😁2
Как создать собственный шрифт
#почитать
"Примечание: это моя первая проба создания шрифта. Я не дизайнер, не освоил создание шрифтов в совершенстве и не специалист по программе FontForge. Возможно, для того же результата существуют способы получше. В этой статье я опишу свой процесс, который, вероятно, поможет другим начинающим создать свой первый шрифт (для личного пользования). Моя цель заключалась в создании шрифта TTF для применения в веб-публикациях с ограниченным набором символов (без полужирного и курсивного написания)."
⏱ Читать статью
#почитать
"Примечание: это моя первая проба создания шрифта. Я не дизайнер, не освоил создание шрифтов в совершенстве и не специалист по программе FontForge. Возможно, для того же результата существуют способы получше. В этой статье я опишу свой процесс, который, вероятно, поможет другим начинающим создать свой первый шрифт (для личного пользования). Моя цель заключалась в создании шрифта TTF для применения в веб-публикациях с ограниченным набором символов (без полужирного и курсивного написания)."
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🎉3
В потоке лендингов: путь к автоматизации
#почитать
⏱ Читать статью
#почитать
За свою карьеру я создал бесчисленное количество лендингов. Я делал это в маленьких веб‑студиях, затем я делал это в крупных enterprise компаниях.
В мини студии нам достаточно было сверстать лендинг и натянуть на готовую CMS (чаще всего это был какой‑нибудь Wordpress). А затем залить это все на хостинг и можно было отдавать заказчику.
В крупной компании, создавая типовой сайт, мы должны соблюдать порядки деплоя и релиз‑менеджмента, тестирования (включая пентесты ИБ), аналитики и т. д., что соответственно повышает трудозатраты.
Но и тут есть что‑то общее — повторяемость этапов разработки от лендинга к лендингу, независимо от сложности проекта и величины компании.
И вот, когда нам в очередной раз прилетает запрос на новый лендинг, мы решаем что пора что‑то с этим делать.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9👎2🔥1
Улучшаем взаимодействие пользователя с интерфейсами
#почитать
⏱ Читать статью
#почитать
В идеальном мире всё происходит следующим образом: происходит брейншторм, детально изучаются бизнес-требования, анализируются конкуренты, рисуется прототип, согласовывается прототип и уже как в чистовик рисуется дизайн с использованием всех наработок дизайнера, готовых компонентов, разрабатывается ui kit, на базе которого также создаются компоненты, рисуется адаптив для различных разрешений, рисуются различные состояния блоков/элементов с соответствующими комментариями.
В таком случае вероятность того, что с интерфейсом будут проблемы, маловероятна.
На деле же выходит чаще всего следующим образом: есть поверхностные бизнес-требования, берутся за базу старые отрисовки, подгоняются под текущую цветовую схему, заполняется текстом-рыбой, адаптив может и вовсе отдаваться в разработку “на своё усмотрение”.
И таких кейсов встречается больше всего в виду того, что масштаб проектов небольшой, бюджеты скромные, а на выходе клиент хочет увидеть конфетку.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2❤1
Дизайн: ожидание vs реальность. Почему интересный и необычный дизайн не всегда хорошо
#почитать
Когда работа над визуальной частью проекта закончена, и все макеты готовы, приходит время передать их в разработку. А чтобы после “связи с движком” все осталось так же красиво как и в макете, необходимо добиться полной гармонии между дизайнером и разработчиком.
⏱ Читать статью
#почитать
Когда работа над визуальной частью проекта закончена, и все макеты готовы, приходит время передать их в разработку. А чтобы после “связи с движком” все осталось так же красиво как и в макете, необходимо добиться полной гармонии между дизайнером и разработчиком.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥2
Практический пример использования CSS Layer
#почитать
Layer позволяет гибко задать разные уровни собственных стилей. В нашем примере таких уровней может быть три (а может быть и больше):
уровень сброса стилей;
уровень стилей библиотеки;
уровень стилей приложения.
⏱ Читать статью
#почитать
Layer позволяет гибко задать разные уровни собственных стилей. В нашем примере таких уровней может быть три (а может быть и больше):
уровень сброса стилей;
уровень стилей библиотеки;
уровень стилей приложения.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥2
Генерация статических сайтов. SSG-фреймворк Astro
#почитать
SSG или генерация статических сайтов — это подход к конструированию HTML-страниц, которые создаются один раз при сборке сайта. Для разметки таких страниц используются переиспользуемые шаблоны, функциональность которых расширена по сравнению с обычным HTML — в них можно использовать переменные, условные конструкции, циклы и другую логику.
Генерация статических сайтов на сервере необходима в том случае, если данные на страницах сайта зависят от внешних источников, а не встроены в изначальную разметку. Данные запрашиваются один раз на этапе сборки сайта, после чего пользователю становятся доступны уже готовые страницы со сгенерированным содержимым.
⏱ Читать статью
#почитать
SSG или генерация статических сайтов — это подход к конструированию HTML-страниц, которые создаются один раз при сборке сайта. Для разметки таких страниц используются переиспользуемые шаблоны, функциональность которых расширена по сравнению с обычным HTML — в них можно использовать переменные, условные конструкции, циклы и другую логику.
Генерация статических сайтов на сервере необходима в том случае, если данные на страницах сайта зависят от внешних источников, а не встроены в изначальную разметку. Данные запрашиваются один раз на этапе сборки сайта, после чего пользователю становятся доступны уже готовые страницы со сгенерированным содержимым.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤2🔥1