Media is too big
VIEW IN TELEGRAM
Как Apple делает эти безумные видеопереходы при прокрутке?
Давайте воссоздадим это с помощью чистого CSS с анимацией, управляемой прокруткой, и view-timeline.
Именно так, никаких слушателей событий прокрутки
Получить фрагменты кода, подсказки и полное руководство можно здесь
@WebDev_Plus
Давайте воссоздадим это с помощью чистого CSS с анимацией, управляемой прокруткой, и view-timeline.
Именно так, никаких слушателей событий прокрутки
Получить фрагменты кода, подсказки и полное руководство можно здесь
@WebDev_Plus
Самый гибкий паттерн, который я нашел для построения составных интерфейсов — это headless store, то есть хранилище состояния без привязки к UI.
Сначала ты создаешь экземпляр стора — локальный или глобальный, потом передаешь его в компоненты напрямую или через контекст. Такой подход дает больше контроля, чем render props, HOC, refs или классические compound-компоненты.
Store отвечает за три простые вещи: хранит и управляет состоянием как единым источником правды, предоставляет методы для обновления состояния и выполняет сайд-эффекты, когда происходят изменения или переходы. Этого достаточно, чтобы собирать даже довольно сложные интерфейсы
@WebDev_Plus
Сначала ты создаешь экземпляр стора — локальный или глобальный, потом передаешь его в компоненты напрямую или через контекст. Такой подход дает больше контроля, чем render props, HOC, refs или классические compound-компоненты.
Store отвечает за три простые вещи: хранит и управляет состоянием как единым источником правды, предоставляет методы для обновления состояния и выполняет сайд-эффекты, когда происходят изменения или переходы. Этого достаточно, чтобы собирать даже довольно сложные интерфейсы
@WebDev_Plus
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Прогрессивные CSS-индикаторы пагинации без JS c anchor positioning
Идея такая: наводишься на ссылку, у неё появляется якорное имя --h, а nav::before привязывается к этому якорю через position-anchor и выравнивается по left: anchor(left). Для разметки используй псевдоэлементы самого nav: ::before — для индикатора наведения (intent), ::after — для индикатора текущей страницы (current).
@WebDev_Plus
nav::before { position-anchor: --h; }
nav::before { left: anchor(left); }
a:hover { anchor-name: --h; }Идея такая: наводишься на ссылку, у неё появляется якорное имя --h, а nav::before привязывается к этому якорю через position-anchor и выравнивается по left: anchor(left). Для разметки используй псевдоэлементы самого nav: ::before — для индикатора наведения (intent), ::after — для индикатора текущей страницы (current).
@WebDev_Plus
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Никогда больше не программируйте в одиночку в VSCode
Это расширение добавляет домашних животных в ваш редактор
@WebDev_Plus
Это расширение добавляет домашних животных в ваш редактор
@WebDev_Plus
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS
В Anchor Positioning можно использовать position-area, чтобы разместить элемент относительно его якоря — и, внезапно, возможных позиций аж 36 штук😳
Запомнить всё это нереально, поэтому сделалb интерактивную демку, где можно просто выбрать нужное положение и сразу получить готовый код.
https://css-tip.com/position-area/
@WebDev_Plus
В Anchor Positioning можно использовать position-area, чтобы разместить элемент относительно его якоря — и, внезапно, возможных позиций аж 36 штук
Запомнить всё это нереально, поэтому сделалb интерактивную демку, где можно просто выбрать нужное положение и сразу получить готовый код.
https://css-tip.com/position-area/
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Красивая визуализация маршрутов миграции китов — показано, где каждый вид пересекает океаны и как их пути совпадают с судоходными маршрутами и охраняемыми территориями.
Посмотреть можно тут: bluecorridors.org
@WebDev_Plus
Посмотреть можно тут: bluecorridors.org
@WebDev_Plus
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Улучшай производительность рендеринга с помощью content-visibility: auto в CSS
Это особенно полезно при отрисовке:
длинных списков
протяжённых веб-страниц
дашбордов с кучей панелей
@WebDev_Plus
Это особенно полезно при отрисовке:
длинных списков
протяжённых веб-страниц
дашбордов с кучей панелей
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Да, это реально крутая штука для фронтендеров.
Animatiss библиотека готовых CSS-анимаций, где всё разбито по категориям (вход, выход, внимание, текст, и т. д.).
Можно просто выбрать нужный эффект, нажать «Copy CSS» и сразу вставить в проект — без лишних зависимостей или JS. Очень удобно для быстрых прототипов, лендингов или UI-деталей, которые хочется оживить.
xsgames.co/animatiss
@WebDev_Plus
Animatiss библиотека готовых CSS-анимаций, где всё разбито по категориям (вход, выход, внимание, текст, и т. д.).
Можно просто выбрать нужный эффект, нажать «Copy CSS» и сразу вставить в проект — без лишних зависимостей или JS. Очень удобно для быстрых прототипов, лендингов или UI-деталей, которые хочется оживить.
xsgames.co/animatiss
@WebDev_Plus
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь сделать плавный drag & drop в React?
Библиотека React dnd-kit — отличный выбор для создания перетаскиваемых, сортируемых и полностью кастомизируемых drag-and-drop интерфейсов.
Это open source решение с кучей вариантов и настроек под любые задачи.
Отличный способ прокачать интерактивность интерфейса в React :)
github.com/clauderic/dnd-kit
@WebDev_Plus
Библиотека React dnd-kit — отличный выбор для создания перетаскиваемых, сортируемых и полностью кастомизируемых drag-and-drop интерфейсов.
Это open source решение с кучей вариантов и настроек под любые задачи.
Отличный способ прокачать интерактивность интерфейса в React :)
github.com/clauderic/dnd-kit
@WebDev_Plus
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Отличный совет, реально полезная мелочь.
Открой Настройки в VS Code (Ctrl + ,).
В поиске набери mouse wheel zoom.
Включи галочку Editor: Mouse Wheel Zoom.
Теперь можно увеличивать или уменьшать масштаб просто прокруткой колеса мыши при зажатом Ctrl — без лишних клавиш и возни.
Удобно, особенно если часто переключаешься между разными разрешениями экрана или показываешь код на стриме/презентации.
@WebDev_Plus
Открой Настройки в VS Code (Ctrl + ,).
В поиске набери mouse wheel zoom.
Включи галочку Editor: Mouse Wheel Zoom.
Теперь можно увеличивать или уменьшать масштаб просто прокруткой колеса мыши при зажатом Ctrl — без лишних клавиш и возни.
Удобно, особенно если часто переключаешься между разными разрешениями экрана или показываешь код на стриме/презентации.
@WebDev_Plus
👍4👎1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Хватит мучиться с вёрсткой писем.
Забудь про таблицы — используй React Email.
Каталог готовых компонентов, чтобы письма выглядели идеально в любом почтовом клиенте.
→
@WebDev_Plus
Забудь про таблицы — используй React Email.
Каталог готовых компонентов, чтобы письма выглядели идеально в любом почтовом клиенте.
→
npx create-email@WebDev_Plus
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Каждый JavaScript-разработчик хотя бы раз писал ${name} в обычных кавычках, сохранял файл и видел вместо Hello John просто "Hello ${name}". Потом, конечно, стирал и перепечатывал всё с обратными кавычками.
Теперь об этом можно забыть. Новое расширение Quotick автоматически заменяет обычные кавычки на обратные, как только вы вводите ${}.
Никаких настроек, команд или меню — всё происходит мгновенно и незаметно.
Работает с JS, TS, JSX и TSX
Понимает контекст (не трогает комментарии, импорты и другие строки)
Маленькое улучшение, которое реально экономит время и бережёт нервы
https://github.com/KartikLabhshetwar/quotick
@WebDev_Plus
Теперь об этом можно забыть. Новое расширение Quotick автоматически заменяет обычные кавычки на обратные, как только вы вводите ${}.
Никаких настроек, команд или меню — всё происходит мгновенно и незаметно.
Работает с JS, TS, JSX и TSX
Понимает контекст (не трогает комментарии, импорты и другие строки)
Маленькое улучшение, которое реально экономит время и бережёт нервы
https://github.com/KartikLabhshetwar/quotick
@WebDev_Plus
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
5 инструментов для веб-разработчиков
http://penpot.app - Альтернатива Figma с открытым исходным кодом
http://sevalla.com - Full-stack хостинг для современных веб-приложений
http://excalidraw.com - Диаграмма стилей, нарисованная от руки
http://locomotivemtl.github.io/locomotive-scroll/ - Плавная прокрутка с эффектом параллакса
http://maxwellito.github.io/vivus/ - Анимация SVG-рисунков в реальном времени
@WebDev_Plus
http://penpot.app - Альтернатива Figma с открытым исходным кодом
http://sevalla.com - Full-stack хостинг для современных веб-приложений
http://excalidraw.com - Диаграмма стилей, нарисованная от руки
http://locomotivemtl.github.io/locomotive-scroll/ - Плавная прокрутка с эффектом параллакса
http://maxwellito.github.io/vivus/ - Анимация SVG-рисунков в реальном времени
@WebDev_Plus
Ранее Postman лёг, потому что упал AWS.
Похоже, пора попробовать что-то полегче — Yaak.
✓ Сделан на React, Rust и Tauri
✓ Поддерживает REST, GraphQL и WebSockets
✓ Без облаков и трекинга
✓ Полностью оффлайн
Работает на Windows, macOS и Linux
→ github.com/mountain-loop/yaak
@WebDev_Plus
Похоже, пора попробовать что-то полегче — Yaak.
✓ Сделан на React, Rust и Tauri
✓ Поддерживает REST, GraphQL и WebSockets
✓ Без облаков и трекинга
✓ Полностью оффлайн
Работает на Windows, macOS и Linux
→ github.com/mountain-loop/yaak
@WebDev_Plus
❤1
Разбирай HTML-ввод с помощью нового метода parseHTMLUnsafe() → https://goo.gle/4mXOH9d
Теперь этот статический метод входит в Baseline. Он создаёт новый экземпляр Document из HTML-строки и при необходимости может выполнять очистку (санитизацию) содержимого.
@WebDev_Plus
Теперь этот статический метод входит в Baseline. Он создаёт новый экземпляр Document из HTML-строки и при необходимости может выполнять очистку (санитизацию) содержимого.
@WebDev_Plus
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Создавай SVG-графики для своего сайта без библиотек
Импортируй данные из Excel, CSV или вводи вручную.
Доступно 8 разных типов, и всё это можно сделать за пару секунд.
https://makegraph.app/
@WebDev_Plus
Импортируй данные из Excel, CSV или вводи вручную.
Доступно 8 разных типов, и всё это можно сделать за пару секунд.
https://makegraph.app/
@WebDev_Plus
❤3