DEV Community: Dmitry

Interactive SVG with popups and micro-animations

Dmitry — Sat, 18 Jun 2022 17:45:36 +0000

CSS Art Polariod Camera

Dmitry — Fri, 14 Jan 2022 16:09:57 +0000

Анимированные круги CSS / SVG

Dmitry — Sun, 04 Jul 2021 08:08:50 +0000

Темно-светлая тема для сайта (dark-light theme)

Dmitry — Fri, 02 Jul 2021 08:13:35 +0000

Сетка изображений с описанием при наведении курсора

Dmitry — Thu, 01 Jul 2021 21:41:42 +0000

Плавный слайдер с трехмерной перспективой

Dmitry — Thu, 01 Jul 2021 21:33:38 +0000

Тест скорости веб-сайта

Dmitry — Wed, 30 Jun 2021 11:58:13 +0000

Тест скорости веб-сайта

Скорость сайта может быть решающим фактором для его успеха. Более быстрая загрузка веб-сайтов может выиграть благодаря более высокому рейтингу SEO, более высоким показателям конверсии, более низким показателям отказов и лучшему общему опыту пользователей и вовлеченности Важно использовать множество бесплатных инструментов для тестирования скорости сайта.

Website Speed Test: тест скорости страницы, разработанный KeyCDN , который включает разбивку водопада и предварительный просмотр сайта.
** Google PageSpeed Insights**: PageSpeed Insights анализирует содержание веб-страницы, а затем генерирует предложения по ее ускорению.
Google Chrome DevTools: набор инструментов веб-разработки и отладки, встроенных в Google Chrome.
Dotcom-Tools: проверьте скорость вашего сайта в реальных браузерах из 25 мест по всему миру.
WebPageTest: Запустите бесплатный тест скорости веб-сайта из разных мест по всему миру, используя реальные браузеры (IE и Chrome) и с реальной скоростью соединения с потребителем.
Pingdom: протестируйте время загрузки этой страницы, проанализируйте ее и найдите узкие места.
GTmetrix: дает вам представление о том, насколько хорошо загружается ваш сайт, и дает практические рекомендации по его оптимизации.

Веб сайт который вы должны посетить, если вы разработчик

Dmitry — Sat, 26 Jun 2021 11:53:03 +0000

1. Получите Avataaars 👱‍♂️

Один из моих самых любимых веб-сайтов, который генерирует потрясающие векторные аватары, которые вы можете использовать в своих проектах или приложениях, или можете создать аватар, похожий на вас. У него есть несколько вариантов: от цвета глаз до аксессуаров для вашего аватара. Вы также можете создать случайный аватар. Вы можете экспортировать сгенерированное изображение в формате PNG или SVG. Все эти аватары использовать.

ссылка: getavataaars

2. Haikei.app 🎨

Потрясающий веб-сайт, который генерирует красивые фоны, состоящие из различных шаблонов волн, капель, размытых градиентов, низкополигонального искусства и прочего, для ваших веб-сайтов и презентаций, чтобы придать невероятный вид. На этом веб-сайте есть множество опций и функций, которые вы можете выбрать, от цветов до подсчета. У него даже есть опция, которая генерирует для вас случайное искусство, если вы не хотите тратить время зря. Есть возможность скачать сгенерированный паттерн в формате PNG или даже в формате SVG. Вы можете скачать выкройки для 🅵🆁🅴🅴.

ссылка: haikei

CSS-фреймворк, о котором вы даже не подозревали Tachyons.io

Dmitry — Thu, 24 Jun 2021 16:43:57 +0000

tachyons.io Функциональный CSS для людей.

Быстро создавайте и разрабатывайте новый интерфейс без написания CSS.

Принципы

Все должно быть на 100% отзывчивым
Все должно быть доступно для чтения на любом устройстве
Все должно быть максимально быстро*
Создание дизайна в браузере должно быть простым*
Должно быть легко изменить любой интерфейс или часть интерфейса, не нарушая никаких существующих интерфейсов.
Очень хорошее выполнение одной задачи способствует повторному использованию и сокращает повторение
Документация способствует повторному использованию и обмену знаниями
CSS не должен препятствовать доступности или функциональности HTML по умолчанию.
Вы должны отправить пользователю минимально возможное количество кода.

Функции

Архитектура CSS, ориентированная на мобильные устройства
490 доступных цветовых комбинаций
Базовая сетка 8 пикселей
Несколько утилит отладки для уменьшения проблем с компоновкой
Целевая структура класса
Оптимизирован для максимального сжатия gzip
Легкий (~ 14 КБ)
Может использоваться в разных проектах
Растущая библиотека компонентов с открытым исходным кодом
Хорошо работает с обычным HTML, React, Ember, Angular, Rails и другими.
Бесконечно вложенная адаптивная сеточная система
Построен с PostCSS

Документы можно найти на: TACHYONS.IO . Модули, как правило, довольно маленькие, поэтому их легко и быстро читать.

Используйте CDN

Самый быстрый и простой способ начать использовать тахионы - это включить ссылку на минифицированный файл в заголовок вашего HTML-файла.

< link rel = " stylesheet " href = " https://unpkg.com/tachyons@4/css/tachyons.min.css " >

Переключить темный / светлый режим

Dmitry — Wed, 23 Jun 2021 10:11:08 +0000

Используйте любой элемент, который должен хранить контент, для которого вы хотите переключить дизайн.

Переключатель темных и светлых тем

Dmitry — Wed, 23 Jun 2021 09:45:43 +0000

Core Web Vitals

Dmitry — Sat, 19 Jun 2021 12:28:23 +0000

The element now supports lazy-loading, async decoding and many other features: http://bit.ly/img-cwv I wrote about how to optimize UX & the Core Web Vitals with it.
https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/