👍6
Контролируем JavaScript импорты с помощью Import maps
С выходом Chrome 89 (а так же в Deno 1.8) появилась возможность использовать Карты импортов (Import maps) – механизма, позволяющего получить контроль над поведением JavaScript-импортов.
Несмотря на то, что современная разработка строится с использованием нативных модулей, мы не можем запускать приложения без предварительной сборки. Одна из целей карт импортов как раз решает эту проблему.
Если кратко, то теперь можно будет совершенно законно и без всяких сборщиков писать, скажем, так:
А теперь на примере. Запускаем статический сервер и создаём два файла:
index.html
👉 @frontendInterview
С выходом Chrome 89 (а так же в Deno 1.8) появилась возможность использовать Карты импортов (Import maps) – механизма, позволяющего получить контроль над поведением JavaScript-импортов.
Несмотря на то, что современная разработка строится с использованием нативных модулей, мы не можем запускать приложения без предварительной сборки. Одна из целей карт импортов как раз решает эту проблему.
Если кратко, то теперь можно будет совершенно законно и без всяких сборщиков писать, скажем, так:
import React from 'react';
Карты импортов задаются с помощью тега noscript с атрибутом type="importmap" в формате JSON.А теперь на примере. Запускаем статический сервер и создаём два файла:
index.html
<!DOCTYPE html>и my-lib.mjs
<html>
<body>
<noscript type="importmap">
{
"imports": {
"mylib": "./my-lib.mjs"
}
}
</noscript>
<noscript type="module">
import { sayHi } from "mylib";
sayHi();
</noscript>
</body>
</html>
export function sayHi() {
console.log("hi!");
}
Открываем в браузере страничку, и вуаля: в консоль вывелось "hi!". Прочитать подробно о том, как всё устроено можно в статье.👉 @frontendInterview
👍9🔥3
Как сделать параметр необязательным в TypeScript?
Anonymous Quiz
9%
?name: string
13%
name: optional
72%
name?: string
6%
optional name: string
👍5😁3🔥2
Какой атрибут HTML элемента дает вспомогательным технологиям понять, что элемент что-то разворачивает или сворачивает?
Anonymous Quiz
15%
aria-opened
62%
aria-expanded
15%
aria-controls
8%
aria-controlled
👍2
Какие есть ограничения у window.close()?
Порой веб-разработчики с удивлением обнаруживают, что команда windows.close() не всегда закрывает окно браузера.
Почему браузеры ограничивают команду?
Иногда такое поведение браузеров объясняют, ссылаясь на некие таинственные «соображения безопасности». Но основная причина ограничений, применяемых к close(), больше связана с тем, что называют «пользовательский опыт». А именно, если скрипты смогут свободно закрывать любые вкладки браузеров, пользователь может потерять важные данные, состояние веб-приложения, работающего во вкладке.
Как поступают браузеры?
В Internet Explorer вкладка или окно браузера закрывается без лишних вопросов в том случае, если для создания этой вкладки или этого окна была использована команда window.open().
Во всех других случаях вкладку (или окно) просто так не закрыть: пользователю показывают одно или два модальных окна, что зависит от того, представлена ли страница единственной вкладкой в окне браузера.
В Chromium 88 команда window.close() выполняется успешно в том случае, если у нового окна или у новой вкладки что-то записано в свойство opener, или в том случае, если стек навигации страницы содержит менее двух записей.
Когда браузер Chrome блокирует команду close(), он выводит в консоль следующее сообщение
👉 @frontendInterview
Порой веб-разработчики с удивлением обнаруживают, что команда windows.close() не всегда закрывает окно браузера.
Почему браузеры ограничивают команду?
Иногда такое поведение браузеров объясняют, ссылаясь на некие таинственные «соображения безопасности». Но основная причина ограничений, применяемых к close(), больше связана с тем, что называют «пользовательский опыт». А именно, если скрипты смогут свободно закрывать любые вкладки браузеров, пользователь может потерять важные данные, состояние веб-приложения, работающего во вкладке.
Как поступают браузеры?
В Internet Explorer вкладка или окно браузера закрывается без лишних вопросов в том случае, если для создания этой вкладки или этого окна была использована команда window.open().
Во всех других случаях вкладку (или окно) просто так не закрыть: пользователю показывают одно или два модальных окна, что зависит от того, представлена ли страница единственной вкладкой в окне браузера.
В Chromium 88 команда window.close() выполняется успешно в том случае, если у нового окна или у новой вкладки что-то записано в свойство opener, или в том случае, если стек навигации страницы содержит менее двух записей.
Когда браузер Chrome блокирует команду close(), он выводит в консоль следующее сообщение
Scripts may close only the windows that were opened by them.
Firefox вызывает функцию IsOnlyTopLevelDocumentInSHistory(), а она вызывает функцию IsEmptyOrHasEntriesForSingleTopLevelPage(), которая проверяет историю сессий. Если там больше одной записи, она уточняет, относятся ли они все к одному и тому же объекту Document. Если это так — вызов close() выполняется.👉 @frontendInterview
👍10❤1
JavaScript from Frontend to Backend: Learn full stack JavaScript development using the MEVN stack with quick and easy steps (2022)
Книга начинается с основ переменных и объектов в JavaScript, а затем быстро переходит к созданию компонентов на стороне клиента с помощью Vue.js и простого приложения для управления списками. После этого внимание переключается на серверную сторону и Node.js, где вы рассмотрите модель MVC и изучите модуль Express. После того как вы освоите серверную и клиентскую части, останется только база данных. Вы познакомитесь с MongoDB и модулем Mongoose. В последней главе этого быстрого руководства вы объедините все эти части, чтобы интегрировать приложение Vue.js в сервер Node.js, используя Express для структурирования серверного кода и MongoDB для хранения информации.
👉 @frontendInterview
Книга начинается с основ переменных и объектов в JavaScript, а затем быстро переходит к созданию компонентов на стороне клиента с помощью Vue.js и простого приложения для управления списками. После этого внимание переключается на серверную сторону и Node.js, где вы рассмотрите модель MVC и изучите модуль Express. После того как вы освоите серверную и клиентскую части, останется только база данных. Вы познакомитесь с MongoDB и модулем Mongoose. В последней главе этого быстрого руководства вы объедините все эти части, чтобы интегрировать приложение Vue.js в сервер Node.js, используя Express для структурирования серверного кода и MongoDB для хранения информации.
👉 @frontendInterview
👍3
Dodge The Birds
Герой игры может выполнить две команды. findBirds и jump.
findBirds() возвращает массив из птиц на экране
jump(height) - заставляет героя прыгнуть на определенную высоту.
Напишите функцию controller, которая будет избегать столкновения героя с птицами.
👉 @frontendInterview
Герой игры может выполнить две команды. findBirds и jump.
findBirds() возвращает массив из птиц на экране
jump(height) - заставляет героя прыгнуть на определенную высоту.
Напишите функцию controller, которая будет избегать столкновения героя с птицами.
👉 @frontendInterview
👎1
window.location
Это объект хранящийся в window, который позволяет получать информацию о текущем адресе страницы и менять его с помощью функций или обновления полей объекта.
Свойства объекта Location:
hash - часть URL, которая идет после символа '#', включая этот символ
host - адрес сайта и порт
href - весь URL страницы
hostname - адрес сайта
pathname - строка пути относительно корня
port - номер порта
protocol - протокол
search - get-параметры, включая символ "?"
Примеры использования
👉 @frontendInterview
Это объект хранящийся в window, который позволяет получать информацию о текущем адресе страницы и менять его с помощью функций или обновления полей объекта.
Свойства объекта Location:
hash - часть URL, которая идет после символа '#', включая этот символ
host - адрес сайта и порт
href - весь URL страницы
hostname - адрес сайта
pathname - строка пути относительно корня
port - номер порта
protocol - протокол
search - get-параметры, включая символ "?"
Примеры использования
//Проверить хеш страницы и выполнить код
if(window.location.hash == '#someHash'){
doSomething();
}
//Перейти по другому адресу
window.location = "http://javanoscript.ru"
//перезагрузить страницу
window.location.reload()
👉 @frontendInterview
👍17
👍10🤔7😁1
URLSearchParams
URLSearchParams — это класс, предоставляющий удобное API для формирования строки поисковых параметров, которую потом можно использовать для формирования полного адреса. Все параметры в строке будут закодированы для безопасной вставки в адрес. Также этот класс можно встретить как часть класса URL.
Пример
Создаём экземпляр класса параметров поиска:
👉 @frontendInterview
URLSearchParams — это класс, предоставляющий удобное API для формирования строки поисковых параметров, которую потом можно использовать для формирования полного адреса. Все параметры в строке будут закодированы для безопасной вставки в адрес. Также этот класс можно встретить как часть класса URL.
Пример
Создаём экземпляр класса параметров поиска:
const params = new URLSearchParams({ count: '10' })
Далее мы можем добавлять или удалять параметры: // добавление
params.append('size', 'lg')
console.log(params.toString())
// 'count=10&size=lg'
// удаление
params.delete('count')
console.log(params.toString())
// 'size=lg'
Повторное добавление параметра с тем же именем добавит ещё одно значение с таким же именем, а получение всех возможных значений вернёт все добавленные значения: params.append('size', 'xl')
console.log(params.getAll('size'))
// ['lg', 'xl']
Получение параметров в виде строки: const paramsString = params.toString()
console.log(paramsString)
// 'count=10&size=lg&size=xl'
const url = `/catalog/?${paramsSting}`
console.log(url)
// '/catalog/?count=10&size=lg&size=xl'👉 @frontendInterview
👍13
Какое значение примет переменная arr?
Anonymous Quiz
5%
['a', 'b', 'c']
29%
[10, 20, 30]
63%
[NaN, NaN, NaN]
4%
undefined
👍26
Можно ли так стилизовать первую букву в строке при помощи CSS, не создавая эту букву отдельно от остальной строки в другом теге?
Anonymous Quiz
91%
Да
9%
Нет
👍2
Какие есть способы задания цвета в CSS?
Базовые цвета
Самое распространенный вариант, каждое число представляет собой количество красного(Red), зеленого(Green) и голубого(Blue) цвета в смеси.
То же самое представление цвета, но с добавлением альфа-канала, который отвечает за прозрачность.
Способ указания цвета в зависимости от его тона(Hue) насыщенности (Saturation) и яркости (Lightness ).
То же самое, но с альфа-каналом.
ключевое слово обозначающее прозрачный цвет, эквивалент
currentColor
ключевое слово обозначающее текущий цвет.
Базовые цвета
color: aquaRGB
Самое распространенный вариант, каждое число представляет собой количество красного(Red), зеленого(Green) и голубого(Blue) цвета в смеси.
#f00 - #rgbRGBA
#ff0000 - #rrggbb
rgb(255, 0, 0)
rgb(100%, 0%, 0%)
То же самое представление цвета, но с добавлением альфа-канала, который отвечает за прозрачность.
белый с прозрачностью 50%HSL
rgba(255, 255, 255, 0.5)
rgba(100%, 100%, 100%, 0.5)
#fff8 - #rgba
#ffffff88 - #rrggbbaa
Способ указания цвета в зависимости от его тона(Hue) насыщенности (Saturation) и яркости (Lightness ).
hsl(120, 100%, 25%) - тёмно зеленыйHSLA
hsl(120, 100%, 75%) - светло зеленый
То же самое, но с альфа-каналом.
hsla(30, 100%, 50%, 0.1) - очень прозрачный оранжевыйtransparent
ключевое слово обозначающее прозрачный цвет, эквивалент
rgba(0, 0, 0, 0).currentColor
ключевое слово обозначающее текущий цвет.
❤4
Array.diff
Ваша задача написать функцию, которая будет вычитать один массив из другого.
Она должна убирать все элементы массива b из массива a.
Примеры:
👉 @frontendInterview
Ваша задача написать функцию, которая будет вычитать один массив из другого.
Она должна убирать все элементы массива b из массива a.
Примеры:
arrayDiff([1,2],[1]) == [2]
arrayDiff([1,2,2,2,3],[2]) == [1,3]👉 @frontendInterview
👍5