Хотите узнать, как создать чат-приложение с использованием React и WebSockets?
На вебинаре вы узнаете:
- Основы WebSockets и их интеграция с React.
- Реализация функциональности чата.
- Управление состоянием и работа с хранилищем данных (обновление интерфейса при изменении состояния).
Этот вебинар будет полезен:
- JavaScript-разработчикам, которые хотят улучшить навыки работы с React и узнать особенности работы и обновления приложения в режиме реального времени.
- Frontend-разработчикам, желающим понять и использовать WebSockets для создания интерактивных приложений.
- Fullstack-разработчикам для дополнения своих знаний и получения навыков интеграции WebSocket серверов с React-приложениями.
После вебинара вы сможете:
- Настроить и управлять WebSocket соединением в React-проектах.
- Управлять состоянием в React-проектах и работать с хранилищами данных для сохранения истории сообщений.
- Применить знания для создания разнообразных приложений реального времени (чаты, системы уведомлений, онлайн-игры).
Урок пройдет 7 ноября в 20:00 мск и будет приурочен к старту большого курса «React.js Developer». После вебинара вы получите специальную цену на обучение и персональную консультацию от менеджеров!
Регистрируйтесь на открытый вебинар прямо сейчас! 👇
https://vk.cc/cDM83c
На вебинаре вы узнаете:
- Основы WebSockets и их интеграция с React.
- Реализация функциональности чата.
- Управление состоянием и работа с хранилищем данных (обновление интерфейса при изменении состояния).
Этот вебинар будет полезен:
- JavaScript-разработчикам, которые хотят улучшить навыки работы с React и узнать особенности работы и обновления приложения в режиме реального времени.
- Frontend-разработчикам, желающим понять и использовать WebSockets для создания интерактивных приложений.
- Fullstack-разработчикам для дополнения своих знаний и получения навыков интеграции WebSocket серверов с React-приложениями.
После вебинара вы сможете:
- Настроить и управлять WebSocket соединением в React-проектах.
- Управлять состоянием в React-проектах и работать с хранилищами данных для сохранения истории сообщений.
- Применить знания для создания разнообразных приложений реального времени (чаты, системы уведомлений, онлайн-игры).
Урок пройдет 7 ноября в 20:00 мск и будет приурочен к старту большого курса «React.js Developer». После вебинара вы получите специальную цену на обучение и персональную консультацию от менеджеров!
Регистрируйтесь на открытый вебинар прямо сейчас! 👇
https://vk.cc/cDM83c
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576This media is not supported in your browser
VIEW IN TELEGRAM
CSS Совет 💡
Знаете ли вы, что можно задать как
Demo https://www.codewithshripal.com/playground/css/max-function
👉 @frontend_1
Знаете ли вы, что можно задать как
min-width, так и width всего одной строкой кода? 🤩Demo https://www.codewithshripal.com/playground/css/max-function
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS 💡
Конвертируйте цветные логотипы в однотонные черно-белые изображения для темного/светлого режимов с помощью CSS-фильтров 🤩
Нет необходимости создавать отдельные изображения для этого ✨
Demo https://www.codewithshripal.com/playground/css/uniform-grayscale-logos-using-css-filters
👉 @frontend_1
Конвертируйте цветные логотипы в однотонные черно-белые изображения для темного/светлого режимов с помощью CSS-фильтров 🤩
Нет необходимости создавать отдельные изображения для этого ✨
Demo https://www.codewithshripal.com/playground/css/uniform-grayscale-logos-using-css-filters
👉 @frontend_1
HTML input types сильно различаются в зависимости от значения атрибута
Ознакомьтесь с этой шпаргалкой на будущее 🚀
👉 @frontend_1
type, который вы используете 👨💻.Ознакомьтесь с этой шпаргалкой на будущее 🚀
👉 @frontend_1
This media is not supported in your browser
VIEW IN TELEGRAM
Создаем KPI-индикаторы для дашборда, используя HTML, CSS и JavaScript 🚀
https://github.com/atherosai/ui/tree/main/dashboard-widgets-01
👉 @frontend_1
https://github.com/atherosai/ui/tree/main/dashboard-widgets-01
👉 @frontend_1
Совет по CSS 💡
Упрощение больших CSS-селекторов с помощью функции псевдокласса
👉 @frontend_1
Упрощение больших CSS-селекторов с помощью функции псевдокласса
:where() 🤩👉 @frontend_1
Совет по Javascript 💡
Знаете ли вы об этом новом и более простом способе выбора последнего элемента массива? 🤩
👉 @frontend_1
Знаете ли вы об этом новом и более простом способе выбора последнего элемента массива? 🤩
👉 @frontend_1
Стили заголовков в CSS: картинки, тени, анимации
Заголовки - это как газетные заголовки: большие, смелые и громкие. Их единственная цель - за короткий промежуток времени привлечь ваше внимание к материалу. Заголовок - это первое, что видит посетитель на сайте, поэтому он задает тон всему остальному сайту и должен быть оформлен надлежащим образом. Он должен содержать читабельный текст, который посетители смогут быстро обработать, что увеличит вероятность того, что они будут прокручивать или кликать по сайту.
У сайта есть примерно 500 миллисекунд (0,05 секунды), чтобы произвести впечатление, поэтому давайте узнаем, как их использовать!
https://blog.logrocket.com/five-cool-css-header-styles-with-cross-browser-compatibility/
👉 @frontend_1
Заголовки - это как газетные заголовки: большие, смелые и громкие. Их единственная цель - за короткий промежуток времени привлечь ваше внимание к материалу. Заголовок - это первое, что видит посетитель на сайте, поэтому он задает тон всему остальному сайту и должен быть оформлен надлежащим образом. Он должен содержать читабельный текст, который посетители смогут быстро обработать, что увеличит вероятность того, что они будут прокручивать или кликать по сайту.
У сайта есть примерно 500 миллисекунд (0,05 секунды), чтобы произвести впечатление, поэтому давайте узнаем, как их использовать!
https://blog.logrocket.com/five-cool-css-header-styles-with-cross-browser-compatibility/
👉 @frontend_1
Совет по CSS 💡
Возможно, вы не знаете, что мы можем использовать псевдоэлемент
Demo https://www.codewithshripal.com/playground/css/style-list-marker
👉 @frontend_1
Возможно, вы не знаете, что мы можем использовать псевдоэлемент
::marker, чтобы изменить стиль маркера/номера списка. 🤩Demo https://www.codewithshripal.com/playground/css/style-list-marker
👉 @frontend_1
Абсолютный минимум, который каждый разработчик должен знать о Unicode
В статье рассказывается об основах работы с Unicode, которые каждый разработчик должен знать. Автор объясняет, что такое Unicode, как он устроен, и почему его правильное понимание важно для работы с текстами и символами в современных приложениях. Рассматриваются концепции кодовых точек, их представления в различных кодировках, таких как UTF-8, а также проблемы, которые могут возникнуть из-за неправильной обработки текста. Подчеркивается, что игнорирование Unicode может привести к серьезным ошибкам в программировании.
https://tonsky.me/blog/unicode/
👉 @frontend_1
В статье рассказывается об основах работы с Unicode, которые каждый разработчик должен знать. Автор объясняет, что такое Unicode, как он устроен, и почему его правильное понимание важно для работы с текстами и символами в современных приложениях. Рассматриваются концепции кодовых точек, их представления в различных кодировках, таких как UTF-8, а также проблемы, которые могут возникнуть из-за неправильной обработки текста. Подчеркивается, что игнорирование Unicode может привести к серьезным ошибкам в программировании.
https://tonsky.me/blog/unicode/
👉 @frontend_1
Неизвестно полезный CSS. Часть 1
CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства.
Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию!
Я собрал фишки, которые могут быть полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров, начиная с 2021 года. Отдельно отмечу, что я не считаю IE11 браузером, который поддерживается в современной разработке. По этой причине я не учитывал его.
https://habr.com/ru/companies/ruvds/articles/775986/
👉 @frontend_1
CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства.
Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию!
Я собрал фишки, которые могут быть полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров, начиная с 2021 года. Отдельно отмечу, что я не считаю IE11 браузером, который поддерживается в современной разработке. По этой причине я не учитывал его.
https://habr.com/ru/companies/ruvds/articles/775986/
👉 @frontend_1
Быстрый способ доступа к результату последнего выражения в консоли Chrome: на заметку фронтенд-разработчику
👉 @frontend_1
👉 @frontend_1
Неизвестно полезный CSS. Часть 2
Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
загрузку фоновых изображений для экранов с повышенной плотностью пикселя с помощью функции image-set();
как с помощью неё же ускорить загрузку страницы;
можно ли использовать нестандартный шрифт без его загрузки;
чем полезен псевдокласс :focus-within при вёрстке кастомных чекбоксов;
мой любимый лайфхак на основе пользовательских CSS-свойств.
Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
https://habr.com/ru/companies/ruvds/articles/803757/
👉 @frontend_1
Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
загрузку фоновых изображений для экранов с повышенной плотностью пикселя с помощью функции image-set();
как с помощью неё же ускорить загрузку страницы;
можно ли использовать нестандартный шрифт без его загрузки;
чем полезен псевдокласс :focus-within при вёрстке кастомных чекбоксов;
мой любимый лайфхак на основе пользовательских CSS-свойств.
Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
https://habr.com/ru/companies/ruvds/articles/803757/
👉 @frontend_1
Неизвестно полезный CSS. Часть 3
Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
возможность задать несколько фонов с помощью свойства background;
свойство display, которое позволяет сделать так, что свойства элемента будут влиять через потомка;
как заставить псевдоэлемент nth-child выбрать элементы без привязки к позиции;
где будет находиться элемент с position: absolute, если для него заданы свойства grid-column и grid-row.
Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
https://habr.com/ru/companies/ruvds/articles/812991/
👉 @frontend_1
Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
возможность задать несколько фонов с помощью свойства background;
свойство display, которое позволяет сделать так, что свойства элемента будут влиять через потомка;
как заставить псевдоэлемент nth-child выбрать элементы без привязки к позиции;
где будет находиться элемент с position: absolute, если для него заданы свойства grid-column и grid-row.
Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
https://habr.com/ru/companies/ruvds/articles/812991/
👉 @frontend_1
Неизвестно полезный CSS. Часть 4
Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах.
Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
сброс стилей до значений, взятых из веб-стандартов;
возврат значений свойств, установленных в браузере;
что можно сделать с прыжками контента при открытии и закрытии модального окна;
возможность отобразить текст «красиво» с помощью ключевого слова system-ui;
способ стилизации элементов на языке, отличающимся от основного.
Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
https://habr.com/ru/companies/ruvds/articles/836780/
👉 @frontend_1
Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах.
Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
сброс стилей до значений, взятых из веб-стандартов;
возврат значений свойств, установленных в браузере;
что можно сделать с прыжками контента при открытии и закрытии модального окна;
возможность отобразить текст «красиво» с помощью ключевого слова system-ui;
способ стилизации элементов на языке, отличающимся от основного.
Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
https://habr.com/ru/companies/ruvds/articles/836780/
👉 @frontend_1
Неизвестно полезный CSS. Часть 5
Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
https://habr.com/ru/companies/ruvds/articles/849114/
👉 @frontend_1
Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
https://habr.com/ru/companies/ruvds/articles/849114/
👉 @frontend_1