Инструмент для добавления интерактивности HTML-страницам

Благодаря такому инструменту вы получаете доступ к AJAX, CSS Transitions, WebSockets и Server Sent Events прямо из HTML, без необходимости обрабатывать это всё на стороне JS. Так вы сможете сконцентрироваться на вёрстке и даже делать интерактивные страницы без знания JavaScript или CSS.

Ссылка на инструмент: htmx

#инструмент #web #frontend

Создаем платежную карту с эффектом переворачивания, используя только HTML и CSS 🚀

https://github.com/atherosai/ui/tree/main/payment-card-02

Music Player with slider - Музыкальный плеер со слайдером и выбором песен.

https://codepen.io/ecemgo/pen/vYPadZz

​​​​Алгоритмы и структуры данных для начинающих

Уверенное применение структур данных и алгоритмов имеет важное значение при создании программ. Изучить основы поможет серия коротких видеоуроков с примерами на JavaScript. Например, что такое BinarySearchTree, LinkedList, Stack, Queue, их применение, а также другие структуры и алгоритмы:

https://youtube.com/playlist?list=PLIFGfLqvZ-yGHI2Fg0NCgi7FY0h1yh-af

#javascript #алгоритмы

Десять советов по улучшению CSS-переходов и анимации

Одни анимации и переходы только украшают приложение — другие делают его хуже. Пользователи могут не понимать, что такого особенного в переходах или анимации, но они могут чётко определить разницу между хорошим и плохим.

Как избежать негативных отзывов при создании собственных виджетов? В этой статье автор собрал советы и рекомендаций для CSS анимаций:

https://joshcollinsworth.com/blog/great-transitions

#css

Трёхстраничная шпаргалка по REST API, с помощью которой вы узнаете:

— как называются части URL в контексте запроса;
— зачем нужны те или иные заголовки запросов (например, Accept-Charset / User-Agent);
— чем отличается код 300 от 500

#api #шпаргалка

Как работает SVG ViewBox

Данная статья с интерактивными примерами поясняет, как применять атрибут viewBox в SVG.

Raster vs. Vector
Render Image
Inline SVG
Coordinates
View Box
Pan & Zoom
Zoom to Square
Animate
React Spring
Scaling Stroke
Use Case

https://svg.bradwoods.io/lessons/viewbox

Создаем CSS Scroll-driven текст с помощью SVG-фильтра 🥊

section { filter: url(#​knockout); }
section h1 { animation: shrink; }
@​keyframes shrink { 0% { scale: 36; }}

- Анимация изменения масштаба текста на видео-оверлее ✅
- Выбивание текста с использованием SVG-фильтра ✅
- Управление прокруткой ✅

DBT – мессия, блажь или реальность дата-инженера?

8 октября приглашаем вас на бесплатный вебинар от учебного центра Слёрм! Встретимся с опытными специалистами из мира big data, чтобы обсудить:

👉 Как управлять жизненным циклом данных в мире победившего Modern Data Stack?
👉 Могут ли современные инструменты преобразить процесс Data Governance и сделать его простым и быстрым?
👉 Как разные компании и команды применяют dbt для решения задач Data Governance?

Эксперты встречи:
— Евгений Ермаков, руководитель платформы данных Tоlоkа.аi
— Николай Марков, Data Platform Lead в Altenar, спикер курсов Слёрма и ментор проекта «Где дата, Коль?»

⭐️ Когда: 8 октября в 19:00 мск
⭐️ Занять место на вебинаре — через бота.

Создаем CSS Scroll-driven текст с помощью SVG-фильтра 🥊

section { filter: url(#​knockout); }
section h1 { animation: shrink; }
@​keyframes shrink { 0% { scale: 36; }}

- Анимация изменения масштаба текста на видео-оверлее ✅
- Выбивание текста с использованием SVG-фильтра ✅
- Управление прокруткой ✅

CSS делает вещи

#ithumor

⚡️ Web Dev полый курс с нуля. Урок 1. Введение. План разработки

https://www.youtube.com/watch?v=l0Lq4p_ozhw

@htmlcssjavas