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

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

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

YeaHub:
https://yeahub.ru/

Связь:
@ruslan_kuyanets
Download Telegram
Прототипно-ориентированное наследование в JavaScript

JavaScript использует прототипно-ориентированное наследование. В этом контексте, каждый объект может наследовать свойства и методы от другого объекта, который называется его прототипом.

Прототип — это объект, от которого другие объекты наследуют свойства и методы. Например, если у нас есть объект "Автомобиль" со свойствами, такими как цвет и марка, новый объект "Спорткар" может наследовать эти свойства от объекта "Автомобиль".

Объекты могут иметь свои собственные прототипы, создавая таким образом цепочку прототипов. Если объект не имеет определенного свойства или метода, JavaScript будет искать его в прототипе объекта, затем в прототипе прототипа, и так далее, пока не найдет нужное свойство или метод, или не дойдет до конца цепочки прототипов.

#prototype #JavaScript #обучающийПост #object
👍7👌1👨‍💻1
Свойство float в CSS

Свойство float в CSS используется для выравнивания элементов (часто изображений) слева или справа на веб-странице, позволяя тексту и другим элементам "обтекать" их.

Когда элементу присваивается свойство float, он выносится из нормального потока документа и сдвигается влево или вправо в зависимости от значения свойства (left, right, или none). Остальные элементы на странице будут "обтекать" его.

- Элементы с float выходят из нормального потока, что может привести к некоторым проблемам макета, которые обычно решаются с использованием дополнительных CSS-техник, таких как clear.

- float особенно полезен для макетов с несколькими столбцами и для обтекания текста вокруг изображений.

- Современные методы макетирования, такие как Flexbox и Grid, делают float менее необходимым для создания сложных макетов, но это свойство все еще широко используется и полезно знать.

#css #обучающийПост #float
👍8👌2
for... а что дальше in или of?

for...in цикл перебирает все перечислимые свойства объекта, включая свойства, унаследованные от прототипов. Он чаще всего используется для перебора свойств объекта. (Для каждого В объекте)

for...of цикл используется для перебора итерируемых объектов, таких как массивы, строки, Map, Set и др. Он не может использоваться для перебора объектов. (Для каждого ИЗ элементов)

#JavaScript #обучающийПост #цикл #array #object
👍7🔥5
Видео по TypeScript готово на 60%👌🏻
Стараюсь изо всех сил, доделать и выложить в понедельник🤝
🫡12🤝2👍1
Кодировка HTML-страницы

Для корректного отображения текста на нескольких языках на веб-странице, вам следует убедиться, что используется правильная кодировка символов. Это можно сделать, добавив тег <meta charset="UTF-8"> внутрь тега <head> вашего HTML-документа. UTF-8 поддерживает большое количество символов и идеально подходит для многоязычных сайтов.

#html #обучающийПост #кодировка
👍43🔥1
Анонимные функции в JS

Анонимными называются функции, которые не имеют собственного имени, как следствие, их нельзя сначала объявить, а потом вызвать.

#обучающийПост #JavaScript #function
👍8💯2🔥1
Interface Segregation Principle

Принцип разделения интерфейса (Interface Segregation Principle, ISP) в контексте React гласит, что ни один компонент не должен быть вынужден реализовывать методы, которые ему не нужны. В других словах, большие интерфейсы следует разбивать на более мелкие, чтобы клиентский код имел дело только с теми методами, которые ему нужны. Это способствует уменьшению "тяжести" зависимостей между компонентами и улучшает модульность.

Представьте, что у вас есть компонент User, который может иметь различные роли, такие как Admin, Guest, Subscriber и так далее. Разные роли могут иметь различные операции или методы.

Принцип разделения интерфейса в React заключается в создании специфичных компонентов с ограниченными функциями. Это обеспечивается передачей только необходимых пропсов, исключая лишние функции и данные, для повышения читаемости и эффективности кода.

#обучающийПост #react #solid
👍5🔥3
Завершил съемку и монтаж. Теперь загрузка видео👌
👍62
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