Telegram Web
Хотите узнать, как создать чат-приложение с использованием React и WebSockets?

На вебинаре вы узнаете:
- Основы WebSockets и их интеграция с React.
- Реализация функциональности чата.
- Управление состоянием и работа с хранилищем данных (обновление интерфейса при изменении состояния).

Этот вебинар будет полезен:
- JavaScript-разработчикам, которые хотят улучшить навыки работы с React и узнать особенности работы и обновления приложения в режиме реального времени.
- Frontend-разработчикам, желающим понять и использовать WebSockets для создания интерактивных приложений.
- Fullstack-разработчикам для дополнения своих знаний и получения навыков интеграции WebSocket серверов с React-приложениями.

После вебинара вы сможете:
- Настроить и управлять WebSocket соединением в React-проектах.
- Управлять состоянием в React-проектах и работать с хранилищами данных для сохранения истории сообщений.
- Применить знания для создания разнообразных приложений реального времени (чаты, системы уведомлений, онлайн-игры).

Урок пройдет 7 ноября в 20:00 мск и будет приурочен к старту большого курса «React.js Developer». После вебинара вы получите специальную цену на обучение и персональную консультацию от менеджеров!

Регистрируйтесь на открытый вебинар прямо сейчас! 👇

https://vk.cc/cDMkK8

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
This media is not supported in your browser
VIEW IN TELEGRAM
Typing Effect

Эффект последовательного ввода букв, реализованный в JS.

#js
This media is not supported in your browser
VIEW IN TELEGRAM
Neon Effect Arrow

Анимация стрелки с неоновым эффектом Pure, реализована с помощью CSS.

#css
JavaScript. Что будет выведено в консоль?
Anonymous Quiz
9%
1
29%
2
40%
3
17%
[2, 3, 4, 5]
6%
Посмотреть ответы
Как сопоставлять скобки с помощью JavaScript и без использования Regex

Разбираем, как с помощью JS определять, совпадают ли пары открывающих и закрывающих символов (), [] и {} внутри строки типа «[foo () {bar}]».

#ru
Fit Text.gif
787.8 KB
Fit Text

Подгонка текста по ширине окна просмотра, реализованная с помощью переменных CSS и JavaScript.

#js
CSS. Изменение какого свойства возможно сделать плавным с помощью transition?
Anonymous Quiz
6%
display
8%
visibility
61%
opacity
13%
position
7%
Тут нет правильного варианта ответа
4%
Посмотреть ответы
JavaScript. Что будет выведено в консоль?

Ответ
This media is not supported in your browser
VIEW IN TELEGRAM
Logo animation

Вся сцена состоит из svg-картинки, которая анимируется библиотекой anime.js

#js
JavaScript. Оператор нулевого слияния (??) всегда возвращает значение правого операнда, когда значение левого операнда после приведения к логическому типу оказывается ложным, верно?
Anonymous Quiz
44%
Да
48%
Нет
9%
Посмотреть ответ
Тестирование кода HTML при помощи CSS

Давным-давно я написал довольно популярный фрагмент открытого исходного кода под названием REVENGE.CSS. В двух словах, цель REVENGE.CSS - расстановка визуальных пояснений к HTML элементам, нарушающим шаблон. Он делает так, чтобы плохой HTML элемент выглядел плохо, оформляя его в болезненно-розовом цвете и непопулярным шрифтом Comic Sans MS.

Селекторы, устанавливавшие "мстительный" стиль, широко используют отрицающий псевдокласс :not, который был уже доступен на протяжении 11 лет.

#ru
This media is not supported in your browser
VIEW IN TELEGRAM
Single div CSS - Window

Окно с открывающейся ставней. В HTML - один блок div, все остальное - CSS.

#css
HTML. Какой тег представляет собой контейнер, внутри которого располагаются элементы <option>, объединенные в одну группу?
Anonymous Quiz
15%
options
13%
optionsgroup
10%
optgroup
11%
options-group
33%
Такой тег существует, но его нет среди предложенных вариантов
8%
Такого тега вообще нет
10%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
Tab Bar Menu

Переход между элементами реализован при помощи CSS transform.

#css
JavaScript. Что будет выведено в консоль?

Ответ
Неизвестно полезный CSS

В этой статье:

- как перестать вредить пользователям свойствами justify-content и align-items
- недавно появившиеся возможности разделять CSS на части и управлять их приоритетом
- неизвестный нюанс применения псевдокласса :nth-child.

#ru
2025/06/29 13:02:22
Back to Top
HTML Embed Code: