This media is not supported in your browser
VIEW IN TELEGRAM
Становится ли дочерний компонент клиентского компонента также клиентским компонентом?
📲 Мы в MAX
👉 @frontend_1
👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🤬1
This media is not supported in your browser
VIEW IN TELEGRAM
Conform - это потрясающе
- Валидация клиента + сервера из одной схемы Zod
- Прогрессивное улучшение
- Восхитительно простой API
- Работает с Next.js ( server actions + useFormState)
📲 Мы в MAX
👉 @frontend_1
- Валидация клиента + сервера из одной схемы Zod
- Прогрессивное улучшение
- Восхитительно простой API
- Работает с Next.js ( server actions + useFormState)
👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
📕От нуля до пиццы за 60 минут: Angular Reactive Forms в бою - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue)
На открытом уроке 13 ноября в 20:00 мск мы погрузимся в создание интерактивного конструктора пиццы с использованием Angular Reactive Forms и сигналов.
📗 На вебинаре:
1. Понимание архитектуры компонентов и Template syntax: директивы, биндинги, pipes
2. Погружение в Event handling и реактивность
📘 В результате на практике изучите и освоите создание и настройка форм через FormBuilder, работу с FormGroup и FormControl, валидацию данных и обработку ошибок.
👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cRfqbi
Все участники открытого урока получат скидку на курс "Angular Developer"
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
На открытом уроке 13 ноября в 20:00 мск мы погрузимся в создание интерактивного конструктора пиццы с использованием Angular Reactive Forms и сигналов.
📗 На вебинаре:
1. Понимание архитектуры компонентов и Template syntax: директивы, биндинги, pipes
2. Погружение в Event handling и реактивность
📘 В результате на практике изучите и освоите создание и настройка форм через FormBuilder, работу с FormGroup и FormControl, валидацию данных и обработку ошибок.
👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cRfqbi
Все участники открытого урока получат скидку на курс "Angular Developer"
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
❤1👍1👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Возможно, будет полезно задуматься о клиентских компонентах React как об API для создания интерактивных HTML-элементов (аналогично стандартному вводу или выбору в браузере).
📲 Мы в MAX
👉 @frontend_1
👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Как внедрять АI во фронтенд: узнаете на Yet Another Frontend Night
Опытный фронтендер, хватит думать! Пора понять, как внедрять AI в свои проекты.
Бизнес-группа Поисковых сервисов и ИИ Яндекса приглашает на Yet Another Frontend Night 29 ноября. Полный фокус на практике применения нейросетей во фронтенд-разработке. Последние новости от экспертов Яндекса: какие AI-инструменты они используют, как изменился цикл разработки и какие сложности возникали в реальных задачах.
Какие доклады вас ждут:
– Иван Артамонов, руководитель группы конверсионных инструментов в Яндекс Бизнесе, расскажет про преимущества AI-ассистентов
– Павел Осташкин, старший разработчик интерфейсов в международной Рекламе, объяснит, как он со своей командой написал и встроил MCP в рабочие процессы и что из этого получилось
– Валерий Баранов, AI-оптимист и тимлид группы технологий фронтенда в Яндекс 360, разберет инструменты управления контекстом во фронтенде и покажет, как MCP-серверы снижают галлюцинации и делают дизайн-систему AI-ready
– Александр Иванков, руководитель группы развития инфраструктуры поисковых интерфейсов в Яндекс Поиске, поделится опытом разработки AI-помощника и подходами промпт-инжиниринга под разные роли
– Андрей Дегтярев, разработчик интерфейсов в Яндекс Браузере, рассмотрит в докладе агентские сценарии по частям, чтобы наглядно показать, какие реальные задачи пользователя они решают
Встречаемся только офлайн 29 ноября в 15:00 в московском офисе Яндекса на Льва Толстого. Не упустите возможность встретиться и пообщаться с экспертами!
Регистрация и подробная программа
Опытный фронтендер, хватит думать! Пора понять, как внедрять AI в свои проекты.
Бизнес-группа Поисковых сервисов и ИИ Яндекса приглашает на Yet Another Frontend Night 29 ноября. Полный фокус на практике применения нейросетей во фронтенд-разработке. Последние новости от экспертов Яндекса: какие AI-инструменты они используют, как изменился цикл разработки и какие сложности возникали в реальных задачах.
Какие доклады вас ждут:
– Иван Артамонов, руководитель группы конверсионных инструментов в Яндекс Бизнесе, расскажет про преимущества AI-ассистентов
– Павел Осташкин, старший разработчик интерфейсов в международной Рекламе, объяснит, как он со своей командой написал и встроил MCP в рабочие процессы и что из этого получилось
– Валерий Баранов, AI-оптимист и тимлид группы технологий фронтенда в Яндекс 360, разберет инструменты управления контекстом во фронтенде и покажет, как MCP-серверы снижают галлюцинации и делают дизайн-систему AI-ready
– Александр Иванков, руководитель группы развития инфраструктуры поисковых интерфейсов в Яндекс Поиске, поделится опытом разработки AI-помощника и подходами промпт-инжиниринга под разные роли
– Андрей Дегтярев, разработчик интерфейсов в Яндекс Браузере, рассмотрит в докладе агентские сценарии по частям, чтобы наглядно показать, какие реальные задачи пользователя они решают
Встречаемся только офлайн 29 ноября в 15:00 в московском офисе Яндекса на Льва Толстого. Не упустите возможность встретиться и пообщаться с экспертами!
Регистрация и подробная программа
❤4👍2🔥1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Media is too big
VIEW IN TELEGRAM
Полный гайд по CSS Flexbox с примерами из практики
Это первая статья по HTML&CSS из серии. И начать я решил именно с Flexbox. В интернете уже довольно много гайдов по Flexbox в CSS. Но чаще всего это шпаргалки, которые не сильно помогают разобраться как на самом деле все работает. Я постараюсь раскрыть тему на реальных примерах. А в конце статьи поделюсь лайфхаками, которыми сам постоянно пользуюсь в работе.
Если вам больше нравится воспринимать информацию в видео-формате, то можете посмотреть ролик.
https://habr.com/ru/articles/816349/
📲 Мы в MAX
👉 @frontend_1
Это первая статья по HTML&CSS из серии. И начать я решил именно с Flexbox. В интернете уже довольно много гайдов по Flexbox в CSS. Но чаще всего это шпаргалки, которые не сильно помогают разобраться как на самом деле все работает. Я постараюсь раскрыть тему на реальных примерах. А в конце статьи поделюсь лайфхаками, которыми сам постоянно пользуюсь в работе.
Если вам больше нравится воспринимать информацию в видео-формате, то можете посмотреть ролик.
https://habr.com/ru/articles/816349/
👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤1
🛠Разбор внутренних механизмов React: как работает обновление UI и почему некоторые компоненты перерисовываются, а другие нет? Открытый вебинар от эксперта OTUS проходит на основе курса «React.js Developer», который стартует совсем скоро!
🗓 18 ноября, 20:00 — «Уровень PRO: движок React. Fiber, Reconciliation и искусство осознанной оптимизации»
- Под капотом React: Virtual DOM и Fiber Architecture
- Принцип обновления интерфейса и Reconciliation
- Практические советы по производительности и мемоизации
⚡️ Прокачайте навыки React на бесплатном вебинаре. Региструйтесь по ссылке: https://vk.cc/cRnaJI
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
🗓 18 ноября, 20:00 — «Уровень PRO: движок React. Fiber, Reconciliation и искусство осознанной оптимизации»
- Под капотом React: Virtual DOM и Fiber Architecture
- Принцип обновления интерфейса и Reconciliation
- Практические советы по производительности и мемоизации
⚡️ Прокачайте навыки React на бесплатном вебинаре. Региструйтесь по ссылке: https://vk.cc/cRnaJI
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
❤1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS 💡
Несмотря на некоторые ограничения в отдельных браузерах, мы можем изменять размеры любого блочного элемента, а не только
📲 Мы в MAX
👉 @frontend_1
Несмотря на некоторые ограничения в отдельных браузерах, мы можем изменять размеры любого блочного элемента, а не только
textarea! 👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4👎2❤1
📕Создание приложения Movie Watchlist Manager на Angular: от компонентов до управления состоянием - разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue)
На открытом уроке 19 ноября в 20:00 мск мы погрузимся в созданию приложения по отслеживанию просмотренных фильмов/сериалов с использованием сигнальных сторов в Angular:
📗 На вебинаре разберем:
1. Создание компонентов и подключение API для поиска и добавления фильмов.
2. Организация архитектуры проекта и лучшие практики.
📘 В результате на практике изучите и освоите базовые концепции Angular (компоненты, сервисы, DI), работу с формами, API и реактивными потоками, использование store для управления состоянием приложения и лучшие методы построения современного SPA-приложения на Angular.
👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cRpDhI
Все участники открытого урока получат скидку на курс "Angular Developer"
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
На открытом уроке 19 ноября в 20:00 мск мы погрузимся в созданию приложения по отслеживанию просмотренных фильмов/сериалов с использованием сигнальных сторов в Angular:
📗 На вебинаре разберем:
1. Создание компонентов и подключение API для поиска и добавления фильмов.
2. Организация архитектуры проекта и лучшие практики.
📘 В результате на практике изучите и освоите базовые концепции Angular (компоненты, сервисы, DI), работу с формами, API и реактивными потоками, использование store для управления состоянием приложения и лучшие методы построения современного SPA-приложения на Angular.
👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cRpDhI
Все участники открытого урока получат скидку на курс "Angular Developer"
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Spectral.js - это библиотека для смешивания красок, использующая теорию Кубелки-Мунка.
Используя возможности теории Кубелки-Мунка, надежной научной модели, имитирующей взаимодействие света с краской, Spectral.js гарантирует, что ваши проекты будут иметь яркие и реалистичные цвета.
Благодаря использованию 7 различных спектральных каналов, включая белый, голубой, пурпурный, желтый, красный, зеленый и синий, Spectral.js может быть эффективно использован в различных веб-проектах, таких как:
Веб-дизайн: Насыщайте свои веб-дизайны реалистичными цветовыми палитрами благодаря способности Spectral.js к реалистичному смешиванию цветов.
Графика: Повысьте качество графики, используя реалистичное смешивание цветов, которое точно отражает взаимодействие света с различными оттенками.
Генеративное искусство: Создавайте захватывающее генеративное искусство, используя мощные возможности смешивания цветов Spectral.js, в результате чего получаются визуально ошеломляющие и динамичные творения.
Воспользуйтесь гибкостью и точностью, которые предлагает Spectral.js, и преобразуйте свои проекты с помощью обширной и яркой цветовой палитры, имитирующей реальное взаимодействие цветов.
https://github.com/rvanwijnen/spectral.js
📲 Мы в MAX
👉 @frontend_1
Используя возможности теории Кубелки-Мунка, надежной научной модели, имитирующей взаимодействие света с краской, Spectral.js гарантирует, что ваши проекты будут иметь яркие и реалистичные цвета.
Благодаря использованию 7 различных спектральных каналов, включая белый, голубой, пурпурный, желтый, красный, зеленый и синий, Spectral.js может быть эффективно использован в различных веб-проектах, таких как:
Веб-дизайн: Насыщайте свои веб-дизайны реалистичными цветовыми палитрами благодаря способности Spectral.js к реалистичному смешиванию цветов.
Графика: Повысьте качество графики, используя реалистичное смешивание цветов, которое точно отражает взаимодействие света с различными оттенками.
Генеративное искусство: Создавайте захватывающее генеративное искусство, используя мощные возможности смешивания цветов Spectral.js, в результате чего получаются визуально ошеломляющие и динамичные творения.
Воспользуйтесь гибкостью и точностью, которые предлагает Spectral.js, и преобразуйте свои проекты с помощью обширной и яркой цветовой палитры, имитирующей реальное взаимодействие цветов.
https://github.com/rvanwijnen/spectral.js
👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Один цвет для светлого, другой для темного? 🌗
Используйте CSS light-dark в сочетании с color-scheme 🤙.
📲 Мы в MAX
👉 @frontend_1
Используйте CSS light-dark в сочетании с color-scheme 🤙.
[data-theme=light] { color-scheme: light; }
[data-theme=dark] { color-scheme: dark; }
h1 {
color: light-dark(var(--red), var(--orange));
}👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Drag&Drop-конструктор интерфейсов на чистом JavaScript.
Хватит писать калькуляторы и «todo-листы». Пора собрать что-то, что выглядит и ведёт себя как реальный UI-конструктор. На открытом уроке вы создадите полноценный мини-конструктор с интерактивными элементами. Без фреймворков и библиотек — только чистый JS, события мыши и немного архитектурной логики. Разберём механику drag&drop: как двигать элементы по экрану, управлять DOM, координатами и рендерингом, а также организовать плавный отклик интерфейса.
Вы поймёте, как работает визуальное взаимодействие в браузере, как создавать живые интерфейсы, которые «реагируют» на пользователя, и почему архитектура даже простого проекта важнее кода. Занятие будет полезно начинающим разработчикам, которые хотят почувствовать JavaScript и перейти от теории к практике.
27 ноября, 20:00 МСК. Открытый урок проходит в преддверии старта курса «JavaScript Developer. Basic».
Регистрация открыта: https://vk.cc/cRrqfU
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Хватит писать калькуляторы и «todo-листы». Пора собрать что-то, что выглядит и ведёт себя как реальный UI-конструктор. На открытом уроке вы создадите полноценный мини-конструктор с интерактивными элементами. Без фреймворков и библиотек — только чистый JS, события мыши и немного архитектурной логики. Разберём механику drag&drop: как двигать элементы по экрану, управлять DOM, координатами и рендерингом, а также организовать плавный отклик интерфейса.
Вы поймёте, как работает визуальное взаимодействие в браузере, как создавать живые интерфейсы, которые «реагируют» на пользователя, и почему архитектура даже простого проекта важнее кода. Занятие будет полезно начинающим разработчикам, которые хотят почувствовать JavaScript и перейти от теории к практике.
27 ноября, 20:00 МСК. Открытый урок проходит в преддверии старта курса «JavaScript Developer. Basic».
Регистрация открыта: https://vk.cc/cRrqfU
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS! ✨
Вы можете сделать стили компонентов портативными с помощью контейнерных запросов 😎
Изменение макета карты в зависимости от размера 🔥
Удаление текста кнопки, если она маленькая 🤏
https://codepen.io/jh3y/pen/JjZavRJ
📲 Мы в MAX
👉 @frontend_1
Вы можете сделать стили компонентов портативными с помощью контейнерных запросов 😎
Изменение макета карты в зависимости от размера 🔥
Удаление текста кнопки, если она маленькая 🤏
.card {container-type: inline-size;}
@ container (min-width: 50ch) {.info { grid-column: 2; }}https://codepen.io/jh3y/pen/JjZavRJ
👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Совет по CSS 💡
Возможно, вы не знаете об этом новом и самом простом способе вертикального центрирования содержимого в box layout
📲 Мы в MAX
👉 @frontend_1
Возможно, вы не знаете об этом новом и самом простом способе вертикального центрирования содержимого в box layout
👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Генератор паролей на тему хакеров с использованием HTML, CSS и JavaScript 🚀
https://learning.atheros.ai/ui-components/password-checker-12
📲 Мы в MAX
👉 @frontend_1
https://learning.atheros.ai/ui-components/password-checker-12
👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
📕Angular SSR за час: превращаем SPA в ракету
👤Подходит разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue)
На открытом уроке 2 декабря в 20:00 мск мы освоим внедрение SSR в приложение: серверный рендеринг, SEO-метаданные, работа с API и базовое понимание hydration:
📗 На вебинаре разберем:
1. Понимание базовой архитектуры SSR в Angular.
2. Понимание поведения приложения до и после hydration.
📘 В результате на практике изучите и освоите умение подключить SSR к существующему приложению, работу с серверным рендерингом данных и настройку SEO-метаданных.
👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cRMPnv
Все участники открытого урока получат скидку на курс "Angular Developer" с промокодом ANGULAR12
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
👤Подходит разработчикам JavaScript/TypeScript, Junior/Middle разработчикам, желающим освоить Angular, Frontend-разработчикам на других фреймворках (React, Vue)
На открытом уроке 2 декабря в 20:00 мск мы освоим внедрение SSR в приложение: серверный рендеринг, SEO-метаданные, работа с API и базовое понимание hydration:
📗 На вебинаре разберем:
1. Понимание базовой архитектуры SSR в Angular.
2. Понимание поведения приложения до и после hydration.
📘 В результате на практике изучите и освоите умение подключить SSR к существующему приложению, работу с серверным рендерингом данных и настройку SEO-метаданных.
👉 Регистрация на урок и подробности о курсе Angular Developer: https://vk.cc/cRMPnv
Все участники открытого урока получат скидку на курс "Angular Developer" с промокодом ANGULAR12
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
This media is not supported in your browser
VIEW IN TELEGRAM
Отзывчивый инвертированный раскрывающийся скроллер с CSS 🤙
📲 Мы в MAX
👉 @frontend_1
img {
position: fixed;
animation: clip;
animation-timeline: --section;
animation-range: exit;
}
@keyframes clip { to { clip-path: inset(100% 0 0 0); }👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7