Какое значение примет result?
Anonymous Quiz
27%
[object Array]
37%
[object Object]
8%
toString
19%
[]
8%
[Object]
Как работает контекст наложения в CSS?
В CSS блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом.
Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения.
Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде:
1. Корневой элемент <html>
2. Блочные элементы
3. float элементы
4. Строковые элементы
4. Позиционированные элементы
Свойство z-index создает новый контекст наложения. Оно изменяет порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства -
Корневой элемент <html>.
Позиционированные элементы с отрицательным значением z-index.
Блочные элементы, неплавающие и непозиционированные.
float элементы.
Строковые элементы.
Позиционированные элементы с z-index: 0; и z-index: auto;.
В CSS блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом.
Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения.
Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде:
1. Корневой элемент <html>
2. Блочные элементы
3. float элементы
4. Строковые элементы
4. Позиционированные элементы
Свойство z-index создает новый контекст наложения. Оно изменяет порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства -
opacity, filter, transform):Корневой элемент <html>.
Позиционированные элементы с отрицательным значением z-index.
Блочные элементы, неплавающие и непозиционированные.
float элементы.
Строковые элементы.
Позиционированные элементы с z-index: 0; и z-index: auto;.
👍1
Чистая архитектура
«Идеальный программист» и «Чистый код» — легендарные бестселлеры Роберта Мартина — рассказывают, как достичь высот профессионализма. «Чистая архитектура» продолжает эту тему, но не предлагает несколько вариантов в стиле «решай сам», а объясняет, что именно следует делать, по какой причине и почему именно такое решение станет принципиально важным для вашего успеха.
👉 @frontendInterview
«Идеальный программист» и «Чистый код» — легендарные бестселлеры Роберта Мартина — рассказывают, как достичь высот профессионализма. «Чистая архитектура» продолжает эту тему, но не предлагает несколько вариантов в стиле «решай сам», а объясняет, что именно следует делать, по какой причине и почему именно такое решение станет принципиально важным для вашего успеха.
👉 @frontendInterview
Cумма всех массивов
Создайте функцию, которая будет суммировать все значения в массиве и его подмассивах
Примеры:
👉 @frontendInterview
Создайте функцию, которая будет суммировать все значения в массиве и его подмассивах
Примеры:
arraySum([1, 2]) => 3
arraySum([1, 2, 3]) => 6
arraySum([1, 2, [1, 2]]) => 6👉 @frontendInterview
👍1
Плюсы TypeScript. Стоит ли на него переходить?
Typenoscript — это скриптовый язык, компилируемый в JavaScript. Разработка Microsoft, которая, на сегодняшний день, успела завоевать и фанатов и недоброжелателей. Главный вопрос для начинающих, и не только: «Зачем он мне нужен?».
Основные плюсы:
Строгая типизация
Позволяет более полно описывать свойства и методы объектов и классов, из-за чего пропадает необходимость,делать проверку всех, входящих в метод или функцию, аргументов:
Очевидно, что читать код на TypeScript будет проще, ввиду отсутствия нагромождений кода, характерные Javanoscript.
Многие проявляют интерес к JS, но их отпугивает некая хаотичность и непредсказуемость языка. Здесь Вам сильно поможет TS, который позволяет писать JS, более привычным и понятным путем.
Обратная совместимость с JS
И это, таки, приятный бонус, потому как не придется переписывать весь существующий код, чтобы поиграться с TS и написать лишь часть приложения на нем + есть возможность перенести все любимые библиотеки с JS на TS, если будет такая необходимость.
Широкая поддержка IDE
TypeScript, на данный момент, имеет поддержку в любой популярной IDE, включая IDEA, WebStorm, Sublime, Atom, и так далее. Соответственно, менять любимую среду разработки не придется.
👉 @frontendInterview
Typenoscript — это скриптовый язык, компилируемый в JavaScript. Разработка Microsoft, которая, на сегодняшний день, успела завоевать и фанатов и недоброжелателей. Главный вопрос для начинающих, и не только: «Зачем он мне нужен?».
Основные плюсы:
Строгая типизация
Позволяет более полно описывать свойства и методы объектов и классов, из-за чего пропадает необходимость,делать проверку всех, входящих в метод или функцию, аргументов:
function checkAllMyArgsAgain(check: CheckObject, me: MeObject, please: string): string {
return 'Какая проверка аргументов? Вы о чем? ';
}
Читабельность кодаОчевидно, что читать код на TypeScript будет проще, ввиду отсутствия нагромождений кода, характерные Javanoscript.
function checkMe(check, me) {
if(check && me) {
if(check){ ... }
if(me){ ... }
}
}
против function checkMe(check: CheckObject, me: MeObject) {
console.log('Ну круто же!');
}
Более легкий переход в мир JS из мира статикиМногие проявляют интерес к JS, но их отпугивает некая хаотичность и непредсказуемость языка. Здесь Вам сильно поможет TS, который позволяет писать JS, более привычным и понятным путем.
Обратная совместимость с JS
И это, таки, приятный бонус, потому как не придется переписывать весь существующий код, чтобы поиграться с TS и написать лишь часть приложения на нем + есть возможность перенести все любимые библиотеки с JS на TS, если будет такая необходимость.
Широкая поддержка IDE
TypeScript, на данный момент, имеет поддержку в любой популярной IDE, включая IDEA, WebStorm, Sublime, Atom, и так далее. Соответственно, менять любимую среду разработки не придется.
👉 @frontendInterview
👍1
Как использовать media выражения в JS?
Чтобы определить, соответствует ли документ строке медиа-запроса в JavaScript, мы используем метод matchMedia().
Несмотря на то, что он официально является частью спецификации модуля представления объектной модели CSS, находящейся в статусе рабочего проекта, его поддержка браузером великолепна начиная с Internet Explorer 10 с глобальным охватом 98,6%.
Использование почти идентично медиа-запросам в CSS. Мы передаем строку медиа-запроса в matchMedia(), а затем проверяем свойство .matches.
Чтобы определить, соответствует ли документ строке медиа-запроса в JavaScript, мы используем метод matchMedia().
Несмотря на то, что он официально является частью спецификации модуля представления объектной модели CSS, находящейся в статусе рабочего проекта, его поддержка браузером великолепна начиная с Internet Explorer 10 с глобальным охватом 98,6%.
Использование почти идентично медиа-запросам в CSS. Мы передаем строку медиа-запроса в matchMedia(), а затем проверяем свойство .matches.
const mediaQuery = window.matchMedia('(min-width: 768px)')
Медиа-запрос вернет MediaQueryList. Это объект, который хранит информацию о медиа-запросе, и нам нужно ключевое свойство .matches. Это логическое свойство только для чтения, которое возвращает true, если документ соответствует мультимедийному запросу. const mediaQuery = window.matchMedia('(min-width: 768px)')
if (mediaQuery.matches) {
alert('Media Query Matched!')
}Как заставить код работать в старых браузерах?
Когда мы используем современные возможности JavaScript, некоторые движки могут не поддерживать их. Как было сказано выше, не везде реализованы все функции.
И тут приходит на помощь Babel.
Babel – это транспилер. Он переписывает современный JavaScript-код в предыдущий стандарт.
На самом деле, есть две части Babel:
Во-первых, транспилер, который переписывает код. Разработчик запускает Babel на своём компьютере. Он переписывает код в старый стандарт. И после этого код отправляется на сайт. Современные сборщики проектов, такие как webpack или brunch, предоставляют возможность запускать транспилер автоматически после каждого изменения кода, что позволяет экономить время.
Во-вторых, полифил.
Новые возможности языка могут включать встроенные функции и синтаксические конструкции. Транспилер переписывает код, преобразовывая новые синтаксические конструкции в старые. Но что касается новых встроенных функций, нам нужно их как-то реализовать. JavaScript является высокодинамичным языком, скрипты могут добавлять/изменять любые функции, чтобы они вели себя в соответствии с современным стандартом.
Термин «полифил» означает, что скрипт «заполняет» пробелы и добавляет современные функции.
Таким образом, чтобы современные функции поддерживались в старых движках, нам надо установить транспилер и добавить полифил.
👉 @frontendInterview
Когда мы используем современные возможности JavaScript, некоторые движки могут не поддерживать их. Как было сказано выше, не везде реализованы все функции.
И тут приходит на помощь Babel.
Babel – это транспилер. Он переписывает современный JavaScript-код в предыдущий стандарт.
На самом деле, есть две части Babel:
Во-первых, транспилер, который переписывает код. Разработчик запускает Babel на своём компьютере. Он переписывает код в старый стандарт. И после этого код отправляется на сайт. Современные сборщики проектов, такие как webpack или brunch, предоставляют возможность запускать транспилер автоматически после каждого изменения кода, что позволяет экономить время.
Во-вторых, полифил.
Новые возможности языка могут включать встроенные функции и синтаксические конструкции. Транспилер переписывает код, преобразовывая новые синтаксические конструкции в старые. Но что касается новых встроенных функций, нам нужно их как-то реализовать. JavaScript является высокодинамичным языком, скрипты могут добавлять/изменять любые функции, чтобы они вели себя в соответствии с современным стандартом.
Термин «полифил» означает, что скрипт «заполняет» пробелы и добавляет современные функции.
Таким образом, чтобы современные функции поддерживались в старых движках, нам надо установить транспилер и добавить полифил.
👉 @frontendInterview
Hacking APIs: Breaking Web Application Programming Interfaces (Final Release) (2022)
Вы узнаете, как API-интерфейсы REST и GraphQL работают в продакшене и создадите стенд для тестирования API с помощью Burp Suite и Postman. Затем вы освоите инструменты для разведки, анализа эндпоинтов, такие как Kiterunner и OWASP Amass. Далее вы научитесь выполнять распространенные атаки, нацеленные на механизмы аутентификации API, и находить уязвимости, обычно встречающиеся в веб-приложениях
👉 @frontendInterview
Вы узнаете, как API-интерфейсы REST и GraphQL работают в продакшене и создадите стенд для тестирования API с помощью Burp Suite и Postman. Затем вы освоите инструменты для разведки, анализа эндпоинтов, такие как Kiterunner и OWASP Amass. Далее вы научитесь выполнять распространенные атаки, нацеленные на механизмы аутентификации API, и находить уязвимости, обычно встречающиеся в веб-приложениях
👉 @frontendInterview
👍1