Open/Closed Principle

Принцип открытости-закрытости (Open/Closed Principle, OCP) в контексте React подразумевает, что компоненты должны быть открыты для расширения, НО закрыты для модификации. Это означает, что мы можем добавлять новые функциональности, не изменяя существующий код, что уменьшает риск ошибок и увеличивает масштабируемость.

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

Чтобы реализовать принцип открытости-закрытости, можно использовать паттерны проектирования, такие как декораторы, пропсы или состояние для динамической настройки поведения и внешнего вида компонента.

#обучающийПост #react #solid

#code #solid #react

Сегодня задумался, знаете о чём? О том, насколько существующие сервисы и приложения недоработаны и сколько ещё предстоит работы разработчикам.

Почему это происходит? Потому что компании устраивают гонку, часто забывая о существующем коде, чтобы писать новый. На рефакторинг времени нет. Вы не представляете, какой хаос творится в больших компаниях. Знакомые и друзья рассказывают, как их нанимают в крупные компании и ставят на легаси проекты, оставляя там тухнуть. Да, за большую зарплату, но на таких проектах ты быстро выгораешь.

Что даст нам ИИ? Возможность ускорить разработку. Например, у бизнеса стоит выбор: отправить программиста на 3 месяца делать новую фичу, которая принесёт деньги, или на 3 месяца отправить на рефакторинг УЖЕ РАБОЧЕГО КОДА, КОТОРЫЙ СПРАВЛЯЕТСЯ С ЗАДАЧЕЙ. Очевидно - новая фича. НО что если с ИИ ты будешь рефакторить код не 3 месяца, а 1.5? И фичу новую писать тоже 1.5 месяца. Это меняет дело. Плюс, с ИИ можно отправить джуна на рефакторинг, пусть практикуется, ковыряется.

Я всё это к тому, что какой же ужасный Ростелеком 🥲 Древний чат, отвечают раз в 30 минут, нет нормальной поддержки.
И есть МТС, который решает твои проблемы за 5 минут. Кончился трафик? Напиши - добавят бесплатно. Произошло списание средств? Напиши - вернут.

15к просмотров и 1к лукосов💪

Принцип открытости-закрытости

#solid #live #react #ocp

😆👍
А потом сын на собеседовании:

- "Ну я разрабатываю сложные системы, пишу чистый код, могу с нуля настроить конфиги"
- "Ага, мы знаем"

Liskov Substitution Principle

Принцип подстановки Барбары Лисков (Liskov Substitution Principle, LSP) в контексте React подразумевает, что объекты в программе должны быть заменяемыми на экземпляры их подтипов, не изменяя корректности выполнения программы. В контексте компонентов, это означает, что дочерние компоненты должны дополнять, а не изменять поведение родительских компонентов.

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

Чтобы реализовать принцип подстановки Лисков, важно обеспечить, чтобы методы и свойства базового компонента были сохранены и правильно реализованы в расширенном компоненте. Типы пропсов, состояния и контекста должны быть совместимы, а также следует избегать переопределения методов и свойств, чтобы сохранить ожидаемое поведение.

#обучающийПост #react #solid

ProductWithReviews расширяет функциональность ProductDetails, но не модифицирует его.

Клиентский код, который использовал ProductDetails, может продолжать использовать его без изменений, или же использовать ProductWithReviews, если нужно отобразить отзывы.

#code #react #solid

Полезная теория

Кеширование

Кеширование — это процесс хранения копий данных в кеше. Эти данные могут включать результаты сложных вычислений, запросов к базам данных или часто запрашиваемые файлы. Когда данные запрашиваются, система сначала проверяет, есть ли их копия в кеше. Если копия найдена (это называется "попадание в кеш" или "cache hit"), данные извлекаются из кеша, что быстрее, чем из основного хранилища. Если копия не найдена (это называется "промах кеша" или "cache miss"), данные извлекаются из основного хранилища и, возможно, сохраняются в кеше для будущих запросов.

Веб-браузеры кешируют часто посещаемые веб-страницы, изображения и другие ресурсы, чтобы ускорить загрузку страниц.

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

Системы управления базами данных могут кешировать результаты запросов и другие данные, чтобы ускорить последующие запросы к этим данным.

Типы кеша:

LRU (Least Recently Used): Удаляет наименее недавно использованные элементы при необходимости освободить место для новых данных.

FIFO (First In, First Out): Удаляет данные в порядке их поступления.

LFU (Least Frequently Used): Удаляет наименее часто используемые элементы.

#cache #facts #tutorial

<!DOCTYPE html>

Этот элемент служит для указания типа документа (DTD, Document Type Definition) веб-страницы. Он должен идти первым в HTML-документе, перед тегом <html>. <!DOCTYPE html> не является HTML-тегом; это инструкция для веб-браузера о том, какой версией HTML или XHTML следует интерпретировать веб-страницу.

Если говорить о <!DOCTYPE html>, то он ассоциирован с HTML5. Его наличие гарантирует, что веб-страница будет отображаться в стандартном режиме, а не в квиркс-режиме (quirks mode), который может вызвать некорректное отображение страницы из-за совместимости с устаревшими версиями HTML.

Использование <!DOCTYPE html> улучшает совместимость веб-страницы с различными браузерами и обеспечивает корректное отображение элементов и стилей на странице.

#обучающийПост #html

Специфичность селекторов CSS

Специфичность селектора (еще называют весом) это свойство определяющее приоритет стилевого правила, то есть то, какой стиль будет применен к HTML элементу в итоге.

Например, используя какую-нибудь UI библиотеку, элементам этой библиотеки будут применены правила заданные авторами по умолчанию. При необходимости можно поменять стили на свои, «перебив» дефолтные более специфичным селектором.

#обучающийПост #css

Открыл для себя новый формат. Прикольно получается видео. 😌

Далее вас ждёт курс по router и redux. Ещё js и верстка. Думаю такую вот базу выкатить до нового года✅

Процесс компиляции TypeScript - JavaScript

- Начинаем с написания исходного кода на TypeScript. Это может включать в себя классы, интерфейсы, типы и другие особенности TypeScript.
- Исходный код TypeScript компилируется с помощью компилятора TypeScript (TSC). Этот процесс можно запустить, например, командой tsc filename.ts.
- Компилятор TypeScript преобразует код TypeScript в чистый JavaScript. Все типы и специфические для TypeScript конструкции удаляются, оставляя чистый JS-код, который можно выполнить в браузере или среде выполнения Node.js.
- Полученный JavaScript код можно теперь запустить в любом JS окружении. Он полностью совместим с браузерами и Node.js.

#compile #typenoscript #javanoscript

Я так часто задачи решаю😳

Подключение CSS и JavaScript в HTML-разметке: практики и исключения

CSS-стили, как правило, помещают в тег <head> для того, чтобы браузер мог как можно быстрее загрузить и применить их, обеспечивая тем самым более быструю отрисовку страницы. Если стили будут загружаться после того, как пользователь начнет видеть содержимое страницы, это может привести к "мельканию" стилей, когда содержимое страницы изменится визуально после применения стилей.

JavaScript-скрипты часто размещают перед закрывающим тегом <body>, чтобы они не блокировали отрисовку основного содержимого страницы. Скрипты могут занимать значительное время для загрузки и выполнения, и если разместить их в <head>, пользователь может увидеть пустую или неполностью загруженную страницу.

Однако есть исключения. Например, некоторые скрипты, особенно те, которые отвечают за отслеживание активности пользователя или SEO, иногда помещают в <head>. Это позволяет скрипту собирать данные с самого начала загрузки страницы.

Также, современные браузеры и методы оптимизации позволяют использовать атрибут async или defer с тегом <noscript>, что позволяет загружать и выполнять JavaScript асинхронно, минимизируя тем самым влияние скрипта на время загрузки страницы.

#обучающийПост #css #html

Сброс и Нормализация CSS

Сброс CSS – это техника, при которой мы явно "обнуляем" стили элементов, устанавливая значения отступов, размеров шрифтов, границ и других параметров на 0 или на какое-то другое базовое значение. Это делается для того, чтобы "сбросить" стили, которые браузер применяет автоматически.

Нормализация – это другой способ сделать стили более консистентными между разными браузерами, но без полного "сброса". Нормализация корректирует стили, делая их более предсказуемыми и одинаковыми в разных браузерах, но сохраняя некоторые базовые стили. Например, в нормализации могут быть исправления для отображения элементов форм, таблиц и других элементов в разных браузерах.

#обучающийПост #css #html

Привет ребята! Хочу вас спросить.

Какие у вас страхи, за что вы переживаете в процессе обучения?

- Я вот например когда учился, постоянно боялся, что я занимаюсь ерундой и зря трачу время. Вот я учусь уже 4 месяца, но работу не найду, может бросить пока не поздно?

- Я старался мотивировать себя как только мог. Заставлять себя, манипулировал собой. В итоге все же получилось.

Или же вы чего-то не знаете, что-то вам мешает учиться. Не получается понять логику и тд.

- У меня был момент когда я сильно дизморалил, я приступил к практике, манипуляциям с DOM деревом на сайте. Мне тогда плакать хотелось, я ничего не понимал. Но спустя 3 дня я уже был тем еще манипулятором

Буду благодарен если поделитесь. Возможно именно я вам помогу преодолеть проблему. ЧТО ДЛЯ ВАС, КАК ДЛЯ НОВИЧКА, БОЛЬ?

Вообще я за лет 10 ни одного коммента не оставил ни в одной соц сети, ни под одним постом, ни под одним срачем. Хотя часто хотелось. Стараюсь быть выше этого.

Но в данном случае, это общение полезно. Очень важно учавствовать в жизни сообщества, общаться с людьми, искать мотивацию. Ходить на мероприятия, вступать в сообщества, помогать другим

В каком-то смысле нужно себя даже заставлять делать это. Поэтому не стесняйтесь, го общаться!😄