Что такое замыкание (closure) в JavaScript и как оно работает?
Ответ:
Замыкание — это комбинация функции, которая сохраняет доступ к переменным из своего внешнего окружения, даже после завершения выполнения этой внешней функции.1️⃣ Запоминание контекста:
Когда функция создается, она запоминает все переменные из своей области видимости. Эти переменные доступны функции даже после завершения работы внешней функции.
2️⃣ Приватные переменные:
Замыкания позволяют создавать приватные переменные, которые нельзя изменить или увидеть снаружи функции. Это делает код более безопасным и организованным.
3️⃣ Постоянные данные:
Замыкания позволяют функциям сохранять состояние между вызовами. Например, счетчики или кэшированные значения.
4️⃣ Асинхронные операции:
Замыкания часто используются в асинхронном коде, чтобы сохранить доступ к переменным из внешнего контекста при выполнении асинхронных задач, таких как таймеры или запросы.
Замыкание используется для:
• Использования в качестве приватных переменных
• Обработки событий и калбеков
• Реализации фабричных функций
• Рекурсии
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥7
Часто ли у вас возникала проблема, что большой объем текста с длинными словами выходит за рамки контейнера?
Вместо того, чтобы задавать переносы вручную, можно воспользоваться свойством hyphens.
Оно позволяет позволяет задавать перенос строки по значению:
• auto — автоматически, в зависимости от языка
• none — без переносов
• manual — настраиваемое вручную
Не забудьте указать значение языка в теге <html lang> для корректной работы свойства.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍34🔥10
This media is not supported in your browser
VIEW IN TELEGRAM
выполнения
Реализовано на HTML, CSS и JS
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥28👍8
Кем был создан первый сайт?
Anonymous Quiz
15%
Винт Серф
47%
Тим Бернерс-Ли
15%
Пол Мокапетрис
24%
Роберт Меткалф
👍17🔥6😁2
Функция window,open: метод объекта window позволяет открыть ссылки в новом, всплывающем окне или новой вкладке (в зависимости от введённого параметра)
Она имеет три варианта использования, давайте их разберём:
• windows,open() — Позволяет открыть пустое окно без URL. Первая строка на нашем фото.
• window,open("", "", "width=300,height=200") — Если после свойства указать название окна и размеры, то кнопка откроет попап окно с размерами указанными здесь же.
• window,open('https://gmail.com', '_parent') — Позволяет открыть необходимое окно прямо на этой странице (она является родительской).
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥6👎1
Cвойство mask устанавливает изображение, которое используется как слой маски для элемента.
Принимаемые аргументы:
• mask-clip — определяет область, на которую распространяется маска
• mask-size — определяет размер маски
• mask-position — размещает маску относительно элемента
• mask-repeat — указывает, что маска должна повторяться/не повторятся
• mask-composite — представляет собой операцию композиции, используемую для текущего слоя маски с расположенными под ним слоями
• mask-mode — определяет, будет ли ссылка на маску
• mask-origin — задает начало координат маски.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍70🔥31
👍18🔥7
✅ Вписывание изображения в область
Свойство object-fit позволяет управлять тем, как содержимое вписывается в размеры элемента.
Может принимать значение:
• fill — растягивает изображение на всю область
• contain — встраивает изображение с сохранением соотношений сторон
• cover — встраивает изображение с сохранением соотношений сторон, но обрезает его по размеру области
• none — размер замененного содержимого не изменяется
• scale-down — приведет к меньшему размеру конкретного объекта
➡️ @code_ready | #свойство #css
Свойство object-fit позволяет управлять тем, как содержимое вписывается в размеры элемента.
Может принимать значение:
• fill — растягивает изображение на всю область
• contain — встраивает изображение с сохранением соотношений сторон
• cover — встраивает изображение с сохранением соотношений сторон, но обрезает его по размеру области
• none — размер замененного содержимого не изменяется
• scale-down — приведет к меньшему размеру конкретного объекта
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥23👍14👎1
Там показывают полезные материалы для веб-разработчиков, такие как:
• learn.javascript
• MDN Web Docs
• Фронтенд — это не больно
• Eloquent JavaScript
• Frontend mastersPlease open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥4👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Tabler Icons – набор из более чем 5250 бесплатных высококачественных SVG-иконок, которые вы можете использовать в своих проектах
⛓ Ссылочка: https://tabler.io/icons
➡️ @code_ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥31👍7👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Error Lens — мощный плагин, который помогает улучшить вашу производительность при разработке, выявляя ошибки и предупреждения прямо в коде.
Он мгновенно выделяет ошибки, предупреждения и другие типы сообщений об ошибках прямо в редакторе, делая их более заметными и обеспечивая быстрый доступ к информации о них.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥32👍14👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Красивая анимация скрытия пароля с помощью нажатия на глаз в конце формы, следящего за курсором.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24🔥16👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Animate.css — это библиотека CSS-анимаций. Она предоставляет множество готовых эффектов анимации для элементов веб-страниц.
⛓ Ссылочка https://animate.style/
➡️ @code_ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍26🔥9
При его использовании элементы распределяются по колонкам. Обычно этот приём используется для выравнивания текстов, размещаемых в элементах <p>.
Кроме этого, данные аргументы можно прописать не только в одну линию как на картинке, но и следующим образом:
• column-rule-width — Ширину линии между колонками.
• column-rule-style — Стиль линии (solid, dashed, dotted).
• column-rule-color — Устанавливает цвет линии.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27🔥10
Как работает оператор new в JavaScript?
Ответ:
Оператор new используется в JavaScript для создания новых объектов. Он вызывает конструктор функции, создает новый объект и возвращает его.
Когда мы используем оператор new перед вызовом функции, происходит следующее:
• Создается новый пустой объект.
• Этот объект наследует свойства и методы из прототипа функции.
• Этот объект передается в качестве контекста вызова функции (this внутри функции указывает на новый объект).
• Если функция не возвращает другой объект, то новый объект возвращается автоматически.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Адаптивный дизайн обеспечивает оптимальное отображение на различных устройствах, включая мобильные телефоны и планшеты.
• Метатег viewport, задающийся внутри тега <head> позволяет браузеру правильно масштабировать изображение под ширину экрана.
• Медиавыражения же (media) позволяют проверить ширину страницы, и в зависимости от заданного условия применить вложенный css
@media screen and (min-width: 600px) {
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
column-gap: 5%;
}
}Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19👎4👍3
Better Comments — это расширение для VSCode, способствующее улучшению структурирования комментариев в вашем коде. Оно предлагает возможность категоризировать комментарии и выделять их разными цветами, что поможет вам почеркнуть важные моменты, задачи или замечания.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
Концепт формы авторизации и регистрации с интересной анимацией переключения. Написан на Html, Css и немного JS.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥22👍10👎1