Подключение 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
Кодировка HTML-страницы
Для корректного отображения текста на нескольких языках на веб-странице, вам следует убедиться, что используется правильная кодировка символов. Это можно сделать, добавив тег <meta charset="UTF-8"> внутрь тега <head> вашего HTML-документа. UTF-8 поддерживает большое количество символов и идеально подходит для многоязычных сайтов.
#html #обучающийПост #кодировка
Для корректного отображения текста на нескольких языках на веб-странице, вам следует убедиться, что используется правильная кодировка символов. Это можно сделать, добавив тег <meta charset="UTF-8"> внутрь тега <head> вашего HTML-документа. UTF-8 поддерживает большое количество символов и идеально подходит для многоязычных сайтов.
#html #обучающийПост #кодировка
👍4❤3🔥1
Анонимные функции в JS
Анонимными называются функции, которые не имеют собственного имени, как следствие, их нельзя сначала объявить, а потом вызвать.
#обучающийПост #JavaScript #function
Анонимными называются функции, которые не имеют собственного имени, как следствие, их нельзя сначала объявить, а потом вызвать.
#обучающийПост #JavaScript #function
👍8💯2🔥1
Interface Segregation Principle
Принцип разделения интерфейса (Interface Segregation Principle, ISP) в контексте React гласит, что ни один компонент не должен быть вынужден реализовывать методы, которые ему не нужны. В других словах, большие интерфейсы следует разбивать на более мелкие, чтобы клиентский код имел дело только с теми методами, которые ему нужны. Это способствует уменьшению "тяжести" зависимостей между компонентами и улучшает модульность.
Представьте, что у вас есть компонент User, который может иметь различные роли, такие как Admin, Guest, Subscriber и так далее. Разные роли могут иметь различные операции или методы.
Принцип разделения интерфейса в React заключается в создании специфичных компонентов с ограниченными функциями. Это обеспечивается передачей только необходимых пропсов, исключая лишние функции и данные, для повышения читаемости и эффективности кода.
#обучающийПост #react #solid
Принцип разделения интерфейса (Interface Segregation Principle, ISP) в контексте React гласит, что ни один компонент не должен быть вынужден реализовывать методы, которые ему не нужны. В других словах, большие интерфейсы следует разбивать на более мелкие, чтобы клиентский код имел дело только с теми методами, которые ему нужны. Это способствует уменьшению "тяжести" зависимостей между компонентами и улучшает модульность.
Представьте, что у вас есть компонент User, который может иметь различные роли, такие как Admin, Guest, Subscriber и так далее. Разные роли могут иметь различные операции или методы.
Принцип разделения интерфейса в React заключается в создании специфичных компонентов с ограниченными функциями. Это обеспечивается передачей только необходимых пропсов, исключая лишние функции и данные, для повышения читаемости и эффективности кода.
#обучающийПост #react #solid
👍5🔥3
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