Data-атрибуты
Используются для хранения пользовательских данных прямо в HTML-тегах. Эти данные можно затем использовать в JavaScript. Это особенно полезно, когда необходимо ассоциировать некоторые данные с конкретным элементом, но не хочется засорять DOM дополнительными тегами или неструктурированными атрибутами.
#html #attribute #data #обучающийПост
Используются для хранения пользовательских данных прямо в HTML-тегах. Эти данные можно затем использовать в JavaScript. Это особенно полезно, когда необходимо ассоциировать некоторые данные с конкретным элементом, но не хочется засорять DOM дополнительными тегами или неструктурированными атрибутами.
#html #attribute #data #обучающийПост
👍4👌2❤1
Feature detection, feature inference и User Agent String — это методы, позволяющие определить возможности и особенности работы браузера.
Feature Detection:
- Проверяет, поддерживает ли браузер конкретную функцию или API.
- Например, вы можете проверить, поддерживает ли браузер localStorage прежде, чем использовать его.
Feature Inference:
- Основан на предположении, что наличие одной функции в браузере гарантирует наличие другой.
- Например, если браузер поддерживает один HTML5 API, он, возможно, поддерживает и другие. Однако такой подход не является надежным.
User Agent String:
- Это идентификатор браузера, который он отправляет веб-серверу при запросе страницы.
- Позволяет определить браузер, ОС и другие детали, но может быть легко подделан или изменен.
#обучающийПост #JavaScript #browser
Feature Detection:
- Проверяет, поддерживает ли браузер конкретную функцию или API.
- Например, вы можете проверить, поддерживает ли браузер localStorage прежде, чем использовать его.
Feature Inference:
- Основан на предположении, что наличие одной функции в браузере гарантирует наличие другой.
- Например, если браузер поддерживает один HTML5 API, он, возможно, поддерживает и другие. Однако такой подход не является надежным.
User Agent String:
- Это идентификатор браузера, который он отправляет веб-серверу при запросе страницы.
- Позволяет определить браузер, ОС и другие детали, но может быть легко подделан или изменен.
#обучающийПост #JavaScript #browser
👍5🔥2
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 - Заключение, Практика, Планы
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
Что будем добавлять в React Новости?
Anonymous Poll
38%
React Context (избавимся от пропсов)
14%
Сохранение новостей (localstorage)
16%
Поиск по дате (запрос к апи с датой)
14%
Сортировка баннеров по дате
19%
Модальное окно для открытия новости целиком
0%
Другое
👍5
Пока что не указывал 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.
Так как для этих тем нужен тоже полноценный курс. Планирую тоже сделать, но позже, нужно отдохнуть от 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 :))
В ноябре, как добавлю сервер и запущу новую версию, в два раза увеличу время на создание видео.
Приложение работает, много функций, но в продакшен выпускать нельзя, только для своих клиентов, которые уже пользуются Бета версией, пользуются полгода и всем нравится💪 говорят простой дизайн, минималистично все, но удобно☝️
Бета версию я сделал еще в марте. С тех пор люди пользуются. С мая я делал с нуля рефакторинг. Переделал бекенд, фронтенд, сменил фреймворки, базу данных. Подшаманил и сделал лучше в 100 раз, осталось только добить. Новую версию считаю так же Бета, но 2.0 :))
В ноябре, как добавлю сервер и запущу новую версию, в два раза увеличу время на создание видео.
👍10
Еще на работе интересная задача. Делаю полноценный графический редактор, как фигма, немного проще😄
Но уже проделал огромную работу. Реализовал:
- Перемещение слоев
- Добавление в группы
- Удаление слоев
- Настройка элементов (смена названий, смена атрибутов, смена назначений)
- Функционал масок
- Добавление обьектов и картинок в редактор
- Настойка слоев (изменение цвета, опасити, размера, поворота, флипа)
- Сохранение элементов после изменений
- Отмена действий (ctrl + z / ctrl + shift + z)
- История изменений
И многое другое
Сейчас реализовываю работу с 3D в редакторе💪
Короче, ребята, программирование - это круто и интересно💪
Жду вас в наших рядах! Постараюсь помочь вам💛
Но уже проделал огромную работу. Реализовал:
- Перемещение слоев
- Добавление в группы
- Удаление слоев
- Настройка элементов (смена названий, смена атрибутов, смена назначений)
- Функционал масок
- Добавление обьектов и картинок в редактор
- Настойка слоев (изменение цвета, опасити, размера, поворота, флипа)
- Сохранение элементов после изменений
- Отмена действий (ctrl + z / ctrl + shift + z)
- История изменений
И многое другое
Сейчас реализовываю работу с 3D в редакторе💪
Короче, ребята, программирование - это круто и интересно💪
Жду вас в наших рядах! Постараюсь помочь вам💛
👍14❤1
Расширение встроенных объектов JavaScript
Расширение встроенных объектов JavaScript означает добавление новых методов или свойств к уже существующим объектам языка, таким как Array, String и Object.
У меня был пост про прототипы, где я рассказывал, как можно расширить или переопределить методы массивов или объектов.
Почему новичку учить и уметь это делать - не обязательно?
- Как минимум расширение поведения встроенных объектов не приветствуется и является плохой практикой (monkey patching). Это нарушает принцип инкапсуляции и засоряет базовые объекты не задокументированной функциональностью.
- Другие разработчики могут не ожидать, что базовые объекты имеют дополнительные методы. Это может вызвать путаницу и ошибки.
- Если две библиотеки пытаются добавить метод с одним и тем же именем, но с разным поведением, это приведет к проблемам.
- В будущем язык может ввести новые методы, которые могут конфликтовать с вашими расширениями, что приведет к проблемам совместимости.
Если вам понадобится это в будущем, то на опыте вы поймете что к чему💪
Но в целом это не сложно, берешь глобальный объект и через прототип просто добавляешь новый метод👍
#обучающийПост #JavaScript #prototype
Расширение встроенных объектов JavaScript означает добавление новых методов или свойств к уже существующим объектам языка, таким как Array, String и Object.
У меня был пост про прототипы, где я рассказывал, как можно расширить или переопределить методы массивов или объектов.
Почему новичку учить и уметь это делать - не обязательно?
- Как минимум расширение поведения встроенных объектов не приветствуется и является плохой практикой (monkey patching). Это нарушает принцип инкапсуляции и засоряет базовые объекты не задокументированной функциональностью.
- Другие разработчики могут не ожидать, что базовые объекты имеют дополнительные методы. Это может вызвать путаницу и ошибки.
- Если две библиотеки пытаются добавить метод с одним и тем же именем, но с разным поведением, это приведет к проблемам.
- В будущем язык может ввести новые методы, которые могут конфликтовать с вашими расширениями, что приведет к проблемам совместимости.
Если вам понадобится это в будущем, то на опыте вы поймете что к чему💪
Но в целом это не сложно, берешь глобальный объект и через прототип просто добавляешь новый метод👍
#обучающийПост #JavaScript #prototype
👍6👌1
Какой селектор выберет все элементы <p>, непосредственно следующие за элементами <div>?
Anonymous Quiz
19%
div ~ p
33%
div + p
30%
div p
19%
p > div