Руслан Куянец | Reactify – Telegram
Руслан Куянец | Reactify
5.83K subscribers
704 photos
52 videos
39 files
287 links
Я IT-специалист, ментор и основатель проекта YeaHub и сообщества Reactify. Здесь рассказываю про Frontend и IT.

Менторство:
https://reactify.ru

YouTube канал:
https://youtube.com/@reactify-it

YeaHub:
https://yeahub.ru/

Связь:
@ruslan_kuyanets
Download Telegram
Data-атрибуты

Используются для хранения пользовательских данных прямо в HTML-тегах. Эти данные можно затем использовать в JavaScript. Это особенно полезно, когда необходимо ассоциировать некоторые данные с конкретным элементом, но не хочется засорять DOM дополнительными тегами или неструктурированными атрибутами.

#html #attribute #data #обучающийПост
👍4👌21
Feature detection, feature inference и User Agent String — это методы, позволяющие определить возможности и особенности работы браузера.

Feature Detection:

- Проверяет, поддерживает ли браузер конкретную функцию или API.
- Например, вы можете проверить, поддерживает ли браузер localStorage прежде, чем использовать его.

Feature Inference:

- Основан на предположении, что наличие одной функции в браузере гарантирует наличие другой.
- Например, если браузер поддерживает один HTML5 API, он, возможно, поддерживает и другие. Однако такой подход не является надежным.

User Agent String:

- Это идентификатор браузера, который он отправляет веб-серверу при запросе страницы.
- Позволяет определить браузер, ОС и другие детали, но может быть легко подделан или изменен.

#обучающийПост #JavaScript #browser
👍5🔥2
Выпускать?😬
👨‍💻5👍3🔥1
Может превью поменять? Какое на ваш взгляд самое норм?
👌4🔥2😢1
Может такую? Типо ТС всех защищает? Как вам?
👍10🔥3🤯1😢1👌1
Короче, извините за спам. Ни мне, ни вам? Делаю такую превью? Или оставить рыцаря?
🔥10
TypeScript с 0 до Профи. Полный курс + Практика [2023]

Видео уже на канале!

Превью без рыцаря, как проголосовало большинство.

Надеюсь видео поможет вам освоить TypeScript

И наберет хотябы 1000 просмотров😄
🎉12🔥4👍3
📹 Reactify YouTube
https://youtube.com/@reactify-it

🎓 Reactify Academy
https://academy.reactify.ru

🤝 Reactify Community
@reactify-community
Please open Telegram to view this post
VIEW IN TELEGRAM
Руслан Куянец | Reactify pinned «📹 Reactify YouTube https://youtube.com/@reactify-it 🎓 Reactify Academy https://academy.reactify.ru 🤝 Reactify Community @reactify-community»
Темы из видео:

0:00 - Введение. Для чего нужен.
1:15 - Как начать. Компиляция. Файлы и настройки
6:40 - Виды типизаций (Сильная, слабая, явная, неявная...)
9:40 - Структурная типизация. (Утиная)
11:05 - Типы данных
12:35 - Анотация типов
12:52 - Enum (Перечисления)
15:15 - Интерфейсы и Типы (Введение)
18:48 - Алиасы типов (псевдонимы, конкретизация, составные, простые)
20:32 - Объединение типов
22:00 - Пересечение типов
23:02 - Types Queries (Запросы типов, typeof)
24:55 - Литеральные типы (строковые, числовые)
27:00 - Типизация объектов
29:02 - Типизация массивов
30:10 - Типизация кортеж
33:31 - Типизация функций
35:33 - Extends Интерфейсы
37:50 - Implements Интерфейсы
38:16 - Индексные члены типов
41:22 - Модификаторы доступа. Классы. (public, private, protected)
44:34 - Операторы Optional, Not-Null, Not-Undefined
48:24 - Generics (Обобщения) (Promise, axios, api)
56:48 - Generic Constraints (Параметры типа, Extends)
58:52 - Generic parameter defaults (Значение по умолчанию, условные типы)
1:00:30 - Дискриминантное объединение
1:05:00 - Type assertions (Утверждения типов)
1:07:05 - Type Guards (Защитники типов)
1:08:36 - Оператор keyof, lookup types, mapped types, mapped types - префиксы + и -
1:13:14 - Утилитарные типы (Readonly, Partial, Required, Pick, Record)
1:18:27 - Утилитарные типы (Exclude, Extract, Nonnullable, Returntype, Instancetype, Omit)
1:22:00 - Массивоподобные Readonly типы (ReadonlyArray, ReadonlyMap, ReadonlySet)
1:24:16 - Заключение, Практика, Планы
🫡7👍3👌2
Неплохо идем💪 Спасибо, что смотрите видео, ставите лукасы и оставляете коменты.

Следующее видео будет Практика. Мы полностью мигрируем проект с JS на TS и задеплоем.

Настало время выбирать, что будет в следующих сериях.
5👌3
Пока что не указывал React Router, Redux Toolkit, RTK Query
Так как для этих тем нужен тоже полноценный курс. Планирую тоже сделать, но позже, нужно отдохнуть от TypeScript😄

До нового года хочу выпустить полную сборку:

1 - HTML
2 - CSS
3 - JS
4 - React (есть, но хочеться переснять в будущем)
5 - TypeScript (есть)
6 - React Router
7 - Redux Toolkit
8 - RTK Query
9 - Next Js (возможно)
10 - Тестирование (было бы круто)

Из практики:

1 - React Новости превратить в большое приложение с различными АПИ, страницами, дизайнами, авторизацией, логикой, сменой темы и языка
2 - Сделать еще проект на чистом JS, css, html.
👨‍💻11🤯4🔥1
Свой сервис я почти доделал, скоро буду настраивать сервер, бд и тд. Ну как доделал... Конечно еще много работы предстоит, много правок, тестирования, оптимизаций, изменение дизайна, обработку ошибок. Но это уже дорабатывать после запуска. Пусть клиенты тестируют))) У меня денег на тестировщиков нет😆

Приложение работает, много функций, но в продакшен выпускать нельзя, только для своих клиентов, которые уже пользуются Бета версией, пользуются полгода и всем нравится💪 говорят простой дизайн, минималистично все, но удобно☝️

Бета версию я сделал еще в марте. С тех пор люди пользуются. С мая я делал с нуля рефакторинг. Переделал бекенд, фронтенд, сменил фреймворки, базу данных. Подшаманил и сделал лучше в 100 раз, осталось только добить. Новую версию считаю так же Бета, но 2.0 :))

В ноябре, как добавлю сервер и запущу новую версию, в два раза увеличу время на создание видео.
👍10
Еще на работе интересная задача. Делаю полноценный графический редактор, как фигма, немного проще😄

Но уже проделал огромную работу. Реализовал:
- Перемещение слоев
- Добавление в группы
- Удаление слоев
- Настройка элементов (смена названий, смена атрибутов, смена назначений)
- Функционал масок
- Добавление обьектов и картинок в редактор
- Настойка слоев (изменение цвета, опасити, размера, поворота, флипа)
- Сохранение элементов после изменений
- Отмена действий (ctrl + z / ctrl + shift + z)
- История изменений

И многое другое

Сейчас реализовываю работу с 3D в редакторе💪

Короче, ребята, программирование - это круто и интересно💪
Жду вас в наших рядах! Постараюсь помочь вам💛
👍141
Расширение встроенных объектов JavaScript

Расширение встроенных объектов JavaScript означает добавление новых методов или свойств к уже существующим объектам языка, таким как Array, String и Object.

У меня был пост про прототипы, где я рассказывал, как можно расширить или переопределить методы массивов или объектов.

Почему новичку учить и уметь это делать - не обязательно?

- Как минимум расширение поведения встроенных объектов не приветствуется и является плохой практикой (monkey patching). Это нарушает принцип инкапсуляции и засоряет базовые объекты не задокументированной функциональностью.
- Другие разработчики могут не ожидать, что базовые объекты имеют дополнительные методы. Это может вызвать путаницу и ошибки.
- Если две библиотеки пытаются добавить метод с одним и тем же именем, но с разным поведением, это приведет к проблемам.
- В будущем язык может ввести новые методы, которые могут конфликтовать с вашими расширениями, что приведет к проблемам совместимости.

Если вам понадобится это в будущем, то на опыте вы поймете что к чему💪

Но в целом это не сложно, берешь глобальный объект и через прототип просто добавляешь новый метод👍

#обучающийПост #JavaScript #prototype
👍6👌1
Бьем рекорд 😎👍
👍10🔥3🤝1
Кто хотел бы Общаться с разработчиками за 420.000₽?
🔥10😁1
Какой селектор выберет все элементы <p>, непосредственно следующие за элементами <div>?
Anonymous Quiz
19%
div ~ p
33%
div + p
30%
div p
19%
p > div