Liskov Substitution Principle
Принцип подстановки Барбары Лисков (Liskov Substitution Principle, LSP) в контексте React подразумевает, что объекты в программе должны быть заменяемыми на экземпляры их подтипов, не изменяя корректности выполнения программы. В контексте компонентов, это означает, что дочерние компоненты должны дополнять, а не изменять поведение родительских компонентов.
Представьте, что у вас есть компонент, который отображает детальную информацию о продукте. Если вы создаете новый компонент, который расширяет функциональность исходного, клиентский код, использующий оригинальный компонент, должен продолжать работать без изменений.
Чтобы реализовать принцип подстановки Лисков, важно обеспечить, чтобы методы и свойства базового компонента были сохранены и правильно реализованы в расширенном компоненте. Типы пропсов, состояния и контекста должны быть совместимы, а также следует избегать переопределения методов и свойств, чтобы сохранить ожидаемое поведение.
#обучающийПост #react #solid
Принцип подстановки Барбары Лисков (Liskov Substitution Principle, LSP) в контексте React подразумевает, что объекты в программе должны быть заменяемыми на экземпляры их подтипов, не изменяя корректности выполнения программы. В контексте компонентов, это означает, что дочерние компоненты должны дополнять, а не изменять поведение родительских компонентов.
Представьте, что у вас есть компонент, который отображает детальную информацию о продукте. Если вы создаете новый компонент, который расширяет функциональность исходного, клиентский код, использующий оригинальный компонент, должен продолжать работать без изменений.
Чтобы реализовать принцип подстановки Лисков, важно обеспечить, чтобы методы и свойства базового компонента были сохранены и правильно реализованы в расширенном компоненте. Типы пропсов, состояния и контекста должны быть совместимы, а также следует избегать переопределения методов и свойств, чтобы сохранить ожидаемое поведение.
#обучающийПост #react #solid
👍3
Forwarded from IT Stack | Technologies
Кеширование
Кеширование — это процесс хранения копий данных в кеше. Эти данные могут включать результаты сложных вычислений, запросов к базам данных или часто запрашиваемые файлы. Когда данные запрашиваются, система сначала проверяет, есть ли их копия в кеше. Если копия найдена (это называется "попадание в кеш" или "cache hit"), данные извлекаются из кеша, что быстрее, чем из основного хранилища. Если копия не найдена (это называется "промах кеша" или "cache miss"), данные извлекаются из основного хранилища и, возможно, сохраняются в кеше для будущих запросов.
Веб-браузеры кешируют часто посещаемые веб-страницы, изображения и другие ресурсы, чтобы ускорить загрузку страниц.
Процессоры имеют небольшие объемы очень быстрой памяти для хранения часто используемых инструкций и данных, что уменьшает время доступа к ним.
Системы управления базами данных могут кешировать результаты запросов и другие данные, чтобы ускорить последующие запросы к этим данным.
Типы кеша:
LRU (Least Recently Used): Удаляет наименее недавно использованные элементы при необходимости освободить место для новых данных.
FIFO (First In, First Out): Удаляет данные в порядке их поступления.
LFU (Least Frequently Used): Удаляет наименее часто используемые элементы.
#cache #facts #tutorial
Кеширование — это процесс хранения копий данных в кеше. Эти данные могут включать результаты сложных вычислений, запросов к базам данных или часто запрашиваемые файлы. Когда данные запрашиваются, система сначала проверяет, есть ли их копия в кеше. Если копия найдена (это называется "попадание в кеш" или "cache hit"), данные извлекаются из кеша, что быстрее, чем из основного хранилища. Если копия не найдена (это называется "промах кеша" или "cache miss"), данные извлекаются из основного хранилища и, возможно, сохраняются в кеше для будущих запросов.
Веб-браузеры кешируют часто посещаемые веб-страницы, изображения и другие ресурсы, чтобы ускорить загрузку страниц.
Процессоры имеют небольшие объемы очень быстрой памяти для хранения часто используемых инструкций и данных, что уменьшает время доступа к ним.
Системы управления базами данных могут кешировать результаты запросов и другие данные, чтобы ускорить последующие запросы к этим данным.
Типы кеша:
LRU (Least Recently Used): Удаляет наименее недавно использованные элементы при необходимости освободить место для новых данных.
FIFO (First In, First Out): Удаляет данные в порядке их поступления.
LFU (Least Frequently Used): Удаляет наименее часто используемые элементы.
#cache #facts #tutorial
💯5👍2
<!DOCTYPE html>
Этот элемент служит для указания типа документа (DTD, Document Type Definition) веб-страницы. Он должен идти первым в HTML-документе, перед тегом <html>. <!DOCTYPE html> не является HTML-тегом; это инструкция для веб-браузера о том, какой версией HTML или XHTML следует интерпретировать веб-страницу.
Если говорить о <!DOCTYPE html>, то он ассоциирован с HTML5. Его наличие гарантирует, что веб-страница будет отображаться в стандартном режиме, а не в квиркс-режиме (quirks mode), который может вызвать некорректное отображение страницы из-за совместимости с устаревшими версиями HTML.
Использование <!DOCTYPE html> улучшает совместимость веб-страницы с различными браузерами и обеспечивает корректное отображение элементов и стилей на странице.
#обучающийПост #html
Этот элемент служит для указания типа документа (DTD, Document Type Definition) веб-страницы. Он должен идти первым в HTML-документе, перед тегом <html>. <!DOCTYPE html> не является HTML-тегом; это инструкция для веб-браузера о том, какой версией HTML или XHTML следует интерпретировать веб-страницу.
Если говорить о <!DOCTYPE html>, то он ассоциирован с HTML5. Его наличие гарантирует, что веб-страница будет отображаться в стандартном режиме, а не в квиркс-режиме (quirks mode), который может вызвать некорректное отображение страницы из-за совместимости с устаревшими версиями HTML.
Использование <!DOCTYPE html> улучшает совместимость веб-страницы с различными браузерами и обеспечивает корректное отображение элементов и стилей на странице.
#обучающийПост #html
👍6🔥1
Специфичность селекторов CSS
Специфичность селектора (еще называют весом) это свойство определяющее приоритет стилевого правила, то есть то, какой стиль будет применен к HTML элементу в итоге.
Например, используя какую-нибудь UI библиотеку, элементам этой библиотеки будут применены правила заданные авторами по умолчанию. При необходимости можно поменять стили на свои, «перебив» дефолтные более специфичным селектором.
#обучающийПост #css
Специфичность селектора (еще называют весом) это свойство определяющее приоритет стилевого правила, то есть то, какой стиль будет применен к HTML элементу в итоге.
Например, используя какую-нибудь UI библиотеку, элементам этой библиотеки будут применены правила заданные авторами по умолчанию. При необходимости можно поменять стили на свои, «перебив» дефолтные более специфичным селектором.
#обучающийПост #css
👍4👏1
This media is not supported in your browser
VIEW IN TELEGRAM
Съемки полным ходом☝🏻🖥
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤1👍1
Открыл для себя новый формат. Прикольно получается видео. 😌
Далее вас ждёт курс по router и redux. Ещё js и верстка. Думаю такую вот базу выкатить до нового года✅
Далее вас ждёт курс по router и redux. Ещё js и верстка. Думаю такую вот базу выкатить до нового года✅
👍10🔥2❤1
Forwarded from IT Stack | Technologies
Процесс компиляции TypeScript - JavaScript
- Начинаем с написания исходного кода на TypeScript. Это может включать в себя классы, интерфейсы, типы и другие особенности TypeScript.
- Исходный код TypeScript компилируется с помощью компилятора TypeScript (TSC). Этот процесс можно запустить, например, командой tsc filename.ts.
- Компилятор TypeScript преобразует код TypeScript в чистый JavaScript. Все типы и специфические для TypeScript конструкции удаляются, оставляя чистый JS-код, который можно выполнить в браузере или среде выполнения Node.js.
- Полученный JavaScript код можно теперь запустить в любом JS окружении. Он полностью совместим с браузерами и Node.js.
#compile #typenoscript #javanoscript
- Начинаем с написания исходного кода на TypeScript. Это может включать в себя классы, интерфейсы, типы и другие особенности TypeScript.
- Исходный код TypeScript компилируется с помощью компилятора TypeScript (TSC). Этот процесс можно запустить, например, командой tsc filename.ts.
- Компилятор TypeScript преобразует код TypeScript в чистый JavaScript. Все типы и специфические для TypeScript конструкции удаляются, оставляя чистый JS-код, который можно выполнить в браузере или среде выполнения Node.js.
- Полученный JavaScript код можно теперь запустить в любом JS окружении. Он полностью совместим с браузерами и Node.js.
#compile #typenoscript #javanoscript
👍5
Подключение CSS и JavaScript в HTML-разметке: практики и исключения
CSS-стили, как правило, помещают в тег
JavaScript-скрипты часто размещают перед закрывающим тегом
Однако есть исключения. Например, некоторые скрипты, особенно те, которые отвечают за отслеживание активности пользователя или SEO, иногда помещают в
Также, современные браузеры и методы оптимизации позволяют использовать атрибут async или defer с тегом
#обучающийПост #css #html
CSS-стили, как правило, помещают в тег
<head> для того, чтобы браузер мог как можно быстрее загрузить и применить их, обеспечивая тем самым более быструю отрисовку страницы. Если стили будут загружаться после того, как пользователь начнет видеть содержимое страницы, это может привести к "мельканию" стилей, когда содержимое страницы изменится визуально после применения стилей.JavaScript-скрипты часто размещают перед закрывающим тегом
<body>, чтобы они не блокировали отрисовку основного содержимого страницы. Скрипты могут занимать значительное время для загрузки и выполнения, и если разместить их в <head>, пользователь может увидеть пустую или неполностью загруженную страницу.Однако есть исключения. Например, некоторые скрипты, особенно те, которые отвечают за отслеживание активности пользователя или SEO, иногда помещают в
<head>. Это позволяет скрипту собирать данные с самого начала загрузки страницы.Также, современные браузеры и методы оптимизации позволяют использовать атрибут async или defer с тегом
<noscript>, что позволяет загружать и выполнять JavaScript асинхронно, минимизируя тем самым влияние скрипта на время загрузки страницы.#обучающийПост #css #html
👍8🔥1👌1
Сброс и Нормализация CSS
Сброс CSS – это техника, при которой мы явно "обнуляем" стили элементов, устанавливая значения отступов, размеров шрифтов, границ и других параметров на 0 или на какое-то другое базовое значение. Это делается для того, чтобы "сбросить" стили, которые браузер применяет автоматически.
Нормализация – это другой способ сделать стили более консистентными между разными браузерами, но без полного "сброса". Нормализация корректирует стили, делая их более предсказуемыми и одинаковыми в разных браузерах, но сохраняя некоторые базовые стили. Например, в нормализации могут быть исправления для отображения элементов форм, таблиц и других элементов в разных браузерах.
#обучающийПост #css #html
Сброс CSS – это техника, при которой мы явно "обнуляем" стили элементов, устанавливая значения отступов, размеров шрифтов, границ и других параметров на 0 или на какое-то другое базовое значение. Это делается для того, чтобы "сбросить" стили, которые браузер применяет автоматически.
Нормализация – это другой способ сделать стили более консистентными между разными браузерами, но без полного "сброса". Нормализация корректирует стили, делая их более предсказуемыми и одинаковыми в разных браузерах, но сохраняя некоторые базовые стили. Например, в нормализации могут быть исправления для отображения элементов форм, таблиц и других элементов в разных браузерах.
#обучающийПост #css #html
👍4
Привет ребята! Хочу вас спросить.
Какие у вас страхи, за что вы переживаете в процессе обучения?
- Я вот например когда учился, постоянно боялся, что я занимаюсь ерундой и зря трачу время. Вот я учусь уже 4 месяца, но работу не найду, может бросить пока не поздно?
- Я старался мотивировать себя как только мог. Заставлять себя, манипулировал собой. В итоге все же получилось.
Или же вы чего-то не знаете, что-то вам мешает учиться. Не получается понять логику и тд.
- У меня был момент когда я сильно дизморалил, я приступил к практике, манипуляциям с DOM деревом на сайте. Мне тогда плакать хотелось, я ничего не понимал. Но спустя 3 дня я уже был тем еще манипулятором
Буду благодарен если поделитесь. Возможно именно я вам помогу преодолеть проблему. ЧТО ДЛЯ ВАС, КАК ДЛЯ НОВИЧКА, БОЛЬ?
Какие у вас страхи, за что вы переживаете в процессе обучения?
- Я вот например когда учился, постоянно боялся, что я занимаюсь ерундой и зря трачу время. Вот я учусь уже 4 месяца, но работу не найду, может бросить пока не поздно?
- Я старался мотивировать себя как только мог. Заставлять себя, манипулировал собой. В итоге все же получилось.
Или же вы чего-то не знаете, что-то вам мешает учиться. Не получается понять логику и тд.
- У меня был момент когда я сильно дизморалил, я приступил к практике, манипуляциям с DOM деревом на сайте. Мне тогда плакать хотелось, я ничего не понимал. Но спустя 3 дня я уже был тем еще манипулятором
Буду благодарен если поделитесь. Возможно именно я вам помогу преодолеть проблему. ЧТО ДЛЯ ВАС, КАК ДЛЯ НОВИЧКА, БОЛЬ?
🙏6❤1🤝1
Вообще я за лет 10 ни одного коммента не оставил ни в одной соц сети, ни под одним постом, ни под одним срачем. Хотя часто хотелось. Стараюсь быть выше этого.
Но в данном случае, это общение полезно. Очень важно учавствовать в жизни сообщества, общаться с людьми, искать мотивацию. Ходить на мероприятия, вступать в сообщества, помогать другим
В каком-то смысле нужно себя даже заставлять делать это. Поэтому не стесняйтесь, го общаться!😄
Но в данном случае, это общение полезно. Очень важно учавствовать в жизни сообщества, общаться с людьми, искать мотивацию. Ходить на мероприятия, вступать в сообщества, помогать другим
В каком-то смысле нужно себя даже заставлять делать это. Поэтому не стесняйтесь, го общаться!😄
👍5🤝2👌1
Прототипно-ориентированное наследование в JavaScript
JavaScript использует прототипно-ориентированное наследование. В этом контексте, каждый объект может наследовать свойства и методы от другого объекта, который называется его прототипом.
Прототип — это объект, от которого другие объекты наследуют свойства и методы. Например, если у нас есть объект "Автомобиль" со свойствами, такими как цвет и марка, новый объект "Спорткар" может наследовать эти свойства от объекта "Автомобиль".
Объекты могут иметь свои собственные прототипы, создавая таким образом цепочку прототипов. Если объект не имеет определенного свойства или метода, JavaScript будет искать его в прототипе объекта, затем в прототипе прототипа, и так далее, пока не найдет нужное свойство или метод, или не дойдет до конца цепочки прототипов.
#prototype #JavaScript #обучающийПост #object
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
Свойство 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
for...in цикл перебирает все перечислимые свойства объекта, включая свойства, унаследованные от прототипов. Он чаще всего используется для перебора свойств объекта. (Для каждого В объекте)
for...of цикл используется для перебора итерируемых объектов, таких как массивы, строки, Map, Set и др. Он не может использоваться для перебора объектов. (Для каждого ИЗ элементов)
#JavaScript #обучающийПост #цикл #array #object
👍7🔥5
Видео по TypeScript готово на 60%👌🏻
Стараюсь изо всех сил, доделать и выложить в понедельник🤝
Стараюсь изо всех сил, доделать и выложить в понедельник🤝
🫡12🤝2👍1