Innopolis Frontend Meetup: Архитектура универсальных веб-приложений (Глеб Михеев)
Мы боимся разрабатывать универсальные приложения, которые и сайт и мобилка и десктопное приложение
А что если я скажу, что нативная разработка не нужна? Что она мертва, и практически нет никакого смысла разрабатывать сервисные проекты на нативном стеке, сжигая десятки миллионов по году, усложняя cicd и все процессы выкатки релизов?
Мы попробуем натянуть веб на мобилку, посмотрим как это работает, какие основные сомнения и сопротивления возникают у разработчиков и какие изменения потребует ваша архитектура, чтобы разрабатывать универсальные веб-приложения
https://www.youtube.com/watch?v=f2HdxD_pds4
👉 @frontend_1
Мы боимся разрабатывать универсальные приложения, которые и сайт и мобилка и десктопное приложение
А что если я скажу, что нативная разработка не нужна? Что она мертва, и практически нет никакого смысла разрабатывать сервисные проекты на нативном стеке, сжигая десятки миллионов по году, усложняя cicd и все процессы выкатки релизов?
Мы попробуем натянуть веб на мобилку, посмотрим как это работает, какие основные сомнения и сопротивления возникают у разработчиков и какие изменения потребует ваша архитектура, чтобы разрабатывать универсальные веб-приложения
https://www.youtube.com/watch?v=f2HdxD_pds4
👉 @frontend_1
YouTube
Innopolis Frontend Meetup: Архитектура универсальных веб-приложений (Глеб Михеев)
Мы боимся разрабатывать универсальные приложения, которые и сайт и мобилка и десктопное приложение
А что если я скажу, что нативная разработка не нужна? Что она мертва, и практически нет никакого смысла разрабатывать сервисные проекты на нативном стеке…
А что если я скажу, что нативная разработка не нужна? Что она мертва, и практически нет никакого смысла разрабатывать сервисные проекты на нативном стеке…
👍6
Инструменты разработчика Chrome 💡
Во время отладки иногда может быть полезно просмотреть все
Узнайте, как это легко сделать с помощью Chrome Dev Tools.
👉 @frontend_1
Во время отладки иногда может быть полезно просмотреть все
event listener
прикрепленные к элементу, и удалить их один за другим, чтобы найти основную причину проблемы.Узнайте, как это легко сделать с помощью Chrome Dev Tools.
👉 @frontend_1
👍11
Front End Developer Roadmap 2024
🌐 HTML Tutorial
🌐 CSS Tutorial
🌐 Visual Studio Code Crash Course
🌐 JavaScript Programming
🌐 Prompt Engineering Tutorial
🌐 Build a Simple Website with HTML, CSS, JavaScript
🌐 Web App Tutorial
🌐 Git and GitHub for Beginners
🌐 Learn Bootstrap 5 and SASS by Building a Portfolio Website
🌐 Learn React 18 with Redux Toolkit
🌐 Learn Tailwind CSS
🌐 Learn Vite
🌐 Testing JavaScript with Cypress
🌐 React Testing Course for Beginners
🌐 Learn TypeScript
🌐 GraphQL Course for Beginners
🌐 Next.js React Framework Course
🌐 React Native Course
🌐 Astro Web Framework Crash Course
🌐 OWASP API Security Top 10 Course
🌐 How does the internet work?
👉 @frontend_1
👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤1
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
Практически все внутри 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
Знаете ли вы, что в Chrome dev tools можно легко делать скриншоты страницы во время ее загрузки и фильтровать запросы на основе этого?
👉 @frontend_1
👍8😱4
📌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
📌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
👍4❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS! 🤙
Вы можете создать этот магнитный эффект
Как сохранить чистоту при входе/выходе из списка? Используйте transition-delay
https://codepen.io/jh3y/pen/MWLyGxo
👉 @frontend_1
Вы можете создать этот магнитный эффект
: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
У каждого разработчика есть набор инструментов для решения различных задач. Однако со временем возникает необходимость расширять этот набор, чтобы эффективно справляться с более сложными задачами. В этой статье я хочу познакомить вас с инструментом, которым вы, скорее всего, раньше не пользовались. И хотя он подходит для решения узкого спектра задач, его использование может оказаться весьма полезным. Знакомьтесь — "фильтр Блума" (Bloom filter).
https://habr.com/ru/companies/timeweb/articles/806383/
👉 @frontend_1
👍5
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи
Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть процесса создания доступных интерфейсов. Эти технологии непросто несут в себе кучу скрытых моментов, влияющих на доступность. Они напрямую позволяют её улучшить. В статье хочу показать это.
Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности текста, анимации и изображениях. В статье буду использовать опыт моего незрячего знакомого (привет, Илья). Он внёс бесценный вклад. Уверен, что вам будет интересно. Поехали!
https://habr.com/ru/companies/ruvds/articles/757490/
👉 @frontend_1
Многие разработчики думают, что доступность реализуется только с помощью 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
Я продолжаю рассказывать, как 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
https://github.com/atherosai/ui/tree/main/input-04
👉 @frontend_1
👍13❤1🔥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
https://github.com/atherosai/ui/tree/main/gallery-06
👉 @frontend_1
🤨5👍3
Совет по CSS 💡
Знаете ли вы о свойстве
Demo https://www.codewithshripal.com/playground/css/shape-outside
👉 @frontend_1
Знаете ли вы о свойстве
shape-outside
в CSS? Demo https://www.codewithshripal.com/playground/css/shape-outside
👉 @frontend_1
👍12🔥6❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Создание карточек с эффектом наведения зума с помощью HTML и CSS 🚀
https://github.com/atherosai/ui/tree/main/cards-07
👉 @frontend_1
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
Знаете ли вы, что мы можем легко создать сворачивающуюся панель без использования Javascript?
Demo https://www.codewithshripal.com/playground/html/details-element
👉 @frontend_1
👍7🔥4❤1
This media is not supported in your browser
VIEW IN TELEGRAM
ВКонтакте представила образовательный проект для разработчиков, IT-предпринимателей и бизнесменов, который познакомит с открытыми веб-технологиями на примере сервисов VK Mini Apps.
Студентам курса будут доступны видеоуроки с рекомендациями по дизайну, разработке, тестированию и продвижению сервисов. Эксперты VK Mini Apps записали практические советы и подготовили элементы кода и шаблоны, которые можно использовать бесплатно.
👉 @frontend_1
Студентам курса будут доступны видеоуроки с рекомендациями по дизайну, разработке, тестированию и продвижению сервисов. Эксперты VK Mini Apps записали практические советы и подготовили элементы кода и шаблоны, которые можно использовать бесплатно.
👉 @frontend_1
👍2