Telegram Web Link
Innopolis Frontend Meetup: Архитектура универсальных веб-приложений (Глеб Михеев)

Мы боимся разрабатывать универсальные приложения, которые и сайт и мобилка и десктопное приложение

А что если я скажу, что нативная разработка не нужна? Что она мертва, и практически нет никакого смысла разрабатывать сервисные проекты на нативном стеке, сжигая десятки миллионов по году, усложняя cicd и все процессы выкатки релизов?

Мы попробуем натянуть веб на мобилку, посмотрим как это работает, какие основные сомнения и сопротивления возникают у разработчиков и какие изменения потребует ваша архитектура, чтобы разрабатывать универсальные веб-приложения

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

👉 @frontend_1
👍6
Инструменты разработчика Chrome 💡

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

Узнайте, как это легко сделать с помощью Chrome Dev Tools.

👉 @frontend_1
👍11
Media is too big
VIEW IN TELEGRAM
Изменение цвета в элементе SVG с помощью CSS и JavaScript

Практически все внутри SVG-изображения может быть изменено с помощью CSS и JavaScript. Давайте узнаем, как это сделать, изменив несколько цветов!

https://www.kirupa.com/web/changing_colors_svg_css_javascript.htm

👉 @frontend_1
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по использованию инструментов разработчика Chrome 💡

Знаете ли вы, что в Chrome dev tools можно легко делать скриншоты страницы во время ее загрузки и фильтровать запросы на основе этого?

👉 @frontend_1
👍8😱4
Совет по Javascript💡

Знаете ли вы, что мы можем настроить вывод JSON.stringify()?

👉 @frontend_1
👍13
🚀Самые полезные библиотеки JS для красивых анимаций🚀

📌Three.js
Three.js – это высокоуровневая JavaScript-библиотека, специализирующаяся на создании 3D-графики и анимаций для веб-приложений. Используя Three.js, мы можем легко конструировать различные трехмерные сцены, от игр и впечатляющих визуализаций до сред виртуальной реальности. Библиотека облегчает процесс добавления объектов, наложения материалов и текстур, создания анимаций, а также интеграции 3D-моделей, созданных в Blender или других инструментах 3D-моделирования. За счет построения на базе WebGL, Three.js предоставляет интуитивно понятный API, позволяя разработчикам сконцентрироваться на дизайне трехмерных сцен без необходимости погружения в технические детали WebGL.

📌Mo.js
Mo.js представляет собой превосходный фреймворк, выделяющийся своей простотой использования и выразительным синтаксисом. Этот фреймворк значительно облегчает нашу работу в области создания анимаций, позволяя нам легко реализовывать всё, от базовых вращений до сложных, многоуровневых анимаций. В то время как некоторые другие библиотеки сфокусированы на функциональности, Mo.js уделяет равное внимание как художественной, так и технической сторонам анимационного процесса. Фреймворк стимулирует к творческому подходу, предоставляя разработчикам инструменты для детальной настройки каждого элемента анимации, включая задержки, продолжительность, эффекты плавности и множество других параметров. Благодаря модульной структуре, Mo.js дает возможность создавать сложные анимационные последовательности для пользовательских интерфейсов, при этом поддерживая полный контроль над тонкостями движения и взаимодействия.

📌AniJS
AniJS представляет собой элегантную JavaScript-библиотеку, предназначенную для упрощения взаимодействия с элементами пользовательского интерфейса без необходимости глубоких знаний в программировании. Эта библиотека разработана с учетом потребностей дизайнеров, и поэтому её синтаксис использует ясный и понятный английский язык, делая её доступной для понимания широкому кругу пользователей.

📌GreenSock Animation Platform (GSAP)
GSAP (GreenSock Animation Platform) представляет собой мощную библиотеку для создания анимаций, которая открывает широкие возможности для реализации динамичных визуальных эффектов в веб-приложениях, игровых проектах и интерактивных историях. GSAP отличается выдающейся кросс-браузерной совместимостью и высокой скоростью рендеринга, что делает его предпочтительным инструментом для создания профессиональных анимаций. Платформа поддерживает обширный диапазон анимационных эффектов, включая анимации свойств CSS, SVG, элементов на HTML5 Canvas и проектов на WebGL. GSAP известен своей плавной анимацией без мерцаний, обеспечивая стабильность во всех популярных браузерах. С такими продвинутыми функциями, как контроль временной шкалы, механизмы обратного вызова и усовершенствованные опции плавности переходов, GSAP дает возможность тщательно разрабатывать сложные анимационные последовательности.

📌Typed.js
Typed.js является JavaScript-библиотекой, позволяющей имитировать машинописный текст, с возможностью регулировки скорости печати, автоматического удаления уже напечатанного текста и последующего ввода нового текста согласно заданным параметрам.

👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
🚀Самые полезные библиотеки JS для красивых анимаций🚀

📌Lottie
Lottie представляет собой библиотеку, совместимую с платформами Android, iOS, Web и Windows, которая декодирует анимации, созданные в Adobe After Effects и экспортированные в JSON-формате с использованием Bodymovin. Эта библиотека позволяет без труда воспроизводить анимации на мобильных устройствах и веб-сайтах.

📌Anime.js
Anime.js представляет собой фреймворк, который выигрывает популярность благодаря своей простоте и мощным функциональным возможностям. Он является одновременно интуитивно понятным для новичков и достаточно гибким для опытных аниматоров, позволяя легко воплощать творческие концепции в реальность. Anime.js умело управляет как CSS-анимациями, так и анимациями, основанными на JavaScript, делая его отличным решением для разнообразных анимационных проектов. Его API является простым для освоения, но при этом обладает достаточной мощностью для реализации сложных анимационных эффектов, от простых переходов до продвинутых ключевых кадров и анимаций с использованием временной шкалы, предоставляя обширный спектр возможностей для разработчиков.

📌Popmotion
Popmotion представляет собой библиотеку для создания анимаций в JavaScript, ориентированную на простоту и удобство использования. Она отличается лаконичным и интуитивно понятным API, что облегчает её применение, и обеспечивает совместимость со всеми основными веб-браузерами. Благодаря встроенной системе плагинов, Popmotion предоставляет

📌Framer Motion
Framer Motion является специализированной библиотекой анимации для веб, разработанной с учетом интеграции в экосистему React. Эта библиотека обеспечивает полный набор инструментов для внедрения анимационных движений в приложения React. Благодаря тому, что Framer Motion сосредоточен на React, её синтаксис оптимизирован под данную платформу, что делает её особенно удобной для опытных разработчиков.

📌ScrollMagic
ScrollMagic - это библиотека JavaScript, специализированная на создании интерактивных сценариев прокрутки, которая отличается лёгкостью настройки и возможностью расширения функционала. Возможности ScrollMagic могут быть расширены за счёт интеграции с различными анимационными фреймворками.

👉 @frontend_1
👍42
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS! 🤙

Вы можете создать этот магнитный эффект :hover с помощью позиционирования анкоров CSS, :has и без JS 🔥.

article { anchor-name: --develop; }
ul:has(li:hover) { --anchor: --develop; }
ul::after {
inset:
anchor(var(--anchor) top)
anchor(var(--anchor) right)
... ;
}

Как сохранить чистоту при входе/выходе из списка? Используйте transition-delay

ul:has(li:hover) { --active: 1; }
ul::after {
opacity: var(--active, 0);
transition: opacity 0.2s, inset 0.2s 0.2s;
}
ul:hover::after {
transition: opacity 0.2s 0.2s, inset 0.2s;
}


https://codepen.io/jh3y/pen/MWLyGxo

👉 @frontend_1
👍11🔥4
Фильтр Блума

У каждого разработчика есть набор инструментов для решения различных задач. Однако со временем возникает необходимость расширять этот набор, чтобы эффективно справляться с более сложными задачами. В этой статье я хочу познакомить вас с инструментом, которым вы, скорее всего, раньше не пользовались. И хотя он подходит для решения узкого спектра задач, его использование может оказаться весьма полезным. Знакомьтесь — "фильтр Блума" (Bloom filter).

https://habr.com/ru/companies/timeweb/articles/806383/

👉 @frontend_1
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Гиперпространственный прыжок 🚀

GSAP && <canvas> с использованием событий указателя

👉 @frontend_1
👍6
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи

Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть процесса создания доступных интерфейсов. Эти технологии непросто несут в себе кучу скрытых моментов, влияющих на доступность. Они напрямую позволяют её улучшить. В статье хочу показать это.

Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности текста, анимации и изображениях. В статье буду использовать опыт моего незрячего знакомого (привет, Илья). Он внёс бесценный вклад. Уверен, что вам будет интересно. Поехали!

https://habr.com/ru/companies/ruvds/articles/757490/

👉 @frontend_1
👍5
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 2

Я продолжаю рассказывать, как HTML и CSS могут улучшить или ухудшить доступность интерфейсов. В своём рассказе я использую свой опыт и моего незрячего знакомого Ильи.

В этой статье будет: атрибут autofocus и его нюансы, паттерн «Skip-link» и идея Ильи об использовании его на практике, проблема использования одинаковых ссылок для одной новости, что не так с кнопкой «Наверх» и как вы спрятали список от скринридеров.
Давайте начнём!

https://habr.com/ru/companies/ruvds/articles/766344/

👉 @frontend_1
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Создание поля ввода с помощью HTML и CSS 🚀

https://github.com/atherosai/ui/tree/main/input-04

👉 @frontend_1
👍131🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Создание эффекта наведенной галереи с помощью flex grow 🚀

https://github.com/atherosai/ui/tree/main/gallery-06

👉 @frontend_1
🤨5👍3
Совет по CSS 💡

Знаете ли вы о свойстве shape-outside в CSS?

Demo https://www.codewithshripal.com/playground/css/shape-outside

👉 @frontend_1
👍12🔥61
This media is not supported in your browser
VIEW IN TELEGRAM
Создание карточек с эффектом наведения зума с помощью HTML и CSS 🚀

https://github.com/atherosai/ui/tree/main/cards-07

👉 @frontend_1
👍15👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по HTML 💡

Знаете ли вы, что мы можем легко создать сворачивающуюся панель без использования Javascript?

Demo https://www.codewithshripal.com/playground/html/details-element

👉 @frontend_1
👍7🔥41
This media is not supported in your browser
VIEW IN TELEGRAM
ВКонтакте представила образовательный проект для разработчиков, IT-предпринимателей и бизнесменов, который познакомит с открытыми веб-технологиями на примере сервисов VK Mini Apps.

Студентам курса будут доступны видеоуроки с рекомендациями по дизайну, разработке, тестированию и продвижению сервисов. Эксперты VK Mini Apps записали практические советы и подготовили элементы кода и шаблоны, которые можно использовать бесплатно.

👉 @frontend_1
👍2
2025/07/09 20:20:18
Back to Top
HTML Embed Code: