Set.isSubsetOf()
Метод isSubsetOf() сравнивает текущую коллекцию с другой и возвращает true, если все элементы указанной коллекции находятся так же в другой коллекции, и false — если нет.
Пример
Имеется два массива чисел. Определим входят ли все элементы первого массива так же и во второй массив. Для решения этой задачи, создадим из массивов Set-объекты и сравним их используя метод isSubsetOf():
Поддержка метода isSubsetOf() в основных браузерах и в Node.js появилась в 2024 году. Если попробуете использовать метод в более ранних версиях, это приведёт к ошибке.
👉 @frontendInterview
Метод isSubsetOf() сравнивает текущую коллекцию с другой и возвращает true, если все элементы указанной коллекции находятся так же в другой коллекции, и false — если нет.
Пример
Имеется два массива чисел. Определим входят ли все элементы первого массива так же и во второй массив. Для решения этой задачи, создадим из массивов Set-объекты и сравним их используя метод isSubsetOf():
const array1 = [ 34, 42, 0, -8 ]
const array2 = [ -8, 0, 1, 2, 16, 34, 42 ]
const set1 = new Set(array1)
const set2 = new Set(array2)
console.log(set1.isSubsetOf(set2))
// true
console.log(set2.isSubsetOf(set1))
// false
Поддержка метода isSubsetOf() в основных браузерах и в Node.js появилась в 2024 году. Если попробуете использовать метод в более ранних версиях, это приведёт к ошибке.
👉 @frontendInterview
👍4❤1
Усовершенствованные структуры данных
В книге приводится всесторонний анализ идей и деталей реализации структур данных как важнейшей составляющей прикладных алгоритмов. Обсуждаются не только эффективные способы реализации операций над множествами чисел, интервалов или строк, представленных в виде различных поисковых структур данных – деревьев, множеств интервалов, кусочно-постоянных функций, прямоугольных областей, непересекающихся подмножеств, куч, хеш-таблиц, но и динамизация и персистентность (сохраняемость) структур. Структуры данных впервые рассматриваются не просто как вспомогательный материал для иллюстрации методологии объектно ориентированного программирования, а как ключевой вопрос разработки алгоритмов. Многочисленные примеры кода на языке C и более 500 ссылок на первоисточники делают книгу исключительно ценной.
👉 @frontendInterview
В книге приводится всесторонний анализ идей и деталей реализации структур данных как важнейшей составляющей прикладных алгоритмов. Обсуждаются не только эффективные способы реализации операций над множествами чисел, интервалов или строк, представленных в виде различных поисковых структур данных – деревьев, множеств интервалов, кусочно-постоянных функций, прямоугольных областей, непересекающихся подмножеств, куч, хеш-таблиц, но и динамизация и персистентность (сохраняемость) структур. Структуры данных впервые рассматриваются не просто как вспомогательный материал для иллюстрации методологии объектно ориентированного программирования, а как ключевой вопрос разработки алгоритмов. Многочисленные примеры кода на языке C и более 500 ссылок на первоисточники делают книгу исключительно ценной.
👉 @frontendInterview
Rotate an array matrix
Создайте функцию, которая будет поворачивать двумерный массив (матрицу) по часовой стрелке или против часовой стрелки.
Пример:
👉 @frontendInterview
Создайте функцию, которая будет поворачивать двумерный массив (матрицу) по часовой стрелке или против часовой стрелки.
Пример:
var matrix = [[1, 2, 3],
[4, 5, 6],
[7, 8, 9]];
rotate(matrix, "clockwise");
// Would return [[7, 4, 1], [8, 5, 2], [9, 6, 3]]
👉 @frontendInterview
🔥2👎1
Можно ли получить ширину и высоту экрана в CSS, не используя JavaScript?
Вы можете получить ширину и высоту экрана в виде значений в пикселях, используя несколько строк CSS.
- Создано на основе @property и тригонометрических функций.
- Можно легко использовать в любой формуле.
- Обновляется при изменении размера экрана (нет необходимости в JavaScript)
👉 @frontendInterview
Вы можете получить ширину и высоту экрана в виде значений в пикселях, используя несколько строк CSS.
- Создано на основе @property и тригонометрических функций.
- Можно легко использовать в любой формуле.
- Обновляется при изменении размера экрана (нет необходимости в JavaScript)
@property --_w {
syntax: '<length>';
inherits: true;
initial-value: 100vw;
}
@property --_h {
syntax: '<length>';
inherits: true;
initial-value: 100vh;
}
:root {
--w: tan(atan2(var(--_w),1px)); /* screen width */
--h: tan(atan2(var(--_h),1px)); /* screen height*/
/* The result is an integer without unit */
}
👉 @frontendInterview
👍10🤔5❤2
Как открыть ссылку в новой вкладке?
Ссылка может открываться в текущем окне браузера, в новом окне или в новой вкладке. Непосредственно, как открывать ссылки — в новом окне или в новой вкладке — указывает пользователь в настройках браузера. Обычно ссылки для удобства открываются в новой вкладке.
Через HTML мы можем указать, как открывать ссылки — в текущем окне или в новом окне. Для этого к элементу <a> следует добавить атрибут target со значением _blank (да, с подчёркиванием впереди), как показано в примере.
👉 @frontendInterview
Ссылка может открываться в текущем окне браузера, в новом окне или в новой вкладке. Непосредственно, как открывать ссылки — в новом окне или в новой вкладке — указывает пользователь в настройках браузера. Обычно ссылки для удобства открываются в новой вкладке.
Через HTML мы можем указать, как открывать ссылки — в текущем окне или в новом окне. Для этого к элементу <a> следует добавить атрибут target со значением _blank (да, с подчёркиванием впереди), как показано в примере.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Ссылки</title>
</head>
<body>
<p><a href="page/new.html">Обычная ссылка</a></p>
<p><a href="page/new.html" target="_blank">Ссылка откроется в новом окне</a></p>
</body>
</html>
👉 @frontendInterview
👍3❤1
Почему тебе не дают повышение / новый тайтл
На самом деле, в этом вопросе играют роль два фактора.
Каждый фактор имеет свои аспекты и особенности. Понимая их, ты сможешь достигать своей цели более эффективно, быстрее и без лишнего стресса.
- Первый фактор: бизнес-модель;
- Второй фактор: твоя ценность для бизнеса и твоё позиционирование.
Я разделю эту статью на 2 части. В первой части мы рассмотрим фактор бизнес-модели, а во второй части рассмотрим фактор твоей ценности для бизнеса и то, как ты себя позиционируешь.
👉 @frontendInterview
На самом деле, в этом вопросе играют роль два фактора.
Каждый фактор имеет свои аспекты и особенности. Понимая их, ты сможешь достигать своей цели более эффективно, быстрее и без лишнего стресса.
- Первый фактор: бизнес-модель;
- Второй фактор: твоя ценность для бизнеса и твоё позиционирование.
Я разделю эту статью на 2 части. В первой части мы рассмотрим фактор бизнес-модели, а во второй части рассмотрим фактор твоей ценности для бизнеса и то, как ты себя позиционируешь.
👉 @frontendInterview
Какое из следующих утверждений НЕВЕРНО о undefined в JavaScript?
Anonymous Quiz
18%
undefined - это тип с единственным возможным значением: undefined
29%
Глобальная переменная undefined может быть переопределена
14%
undefined возвращается, если функция не имеет оператора return
39%
undefined - это ключевое слово в JavaScript, как var или let
🤔6👍1
.intersection()
Метод intersection() сравнивает текущую коллекцию с другой и возвращает новую, состоящую из элементов, входящих в обе коллекции.
В математике это называется пересечением двух множеств. Пересечение множеств A и B — это множество, которое состоит из элементов, входящих как в множество А, так и во множество B. Это можно выразить формулой:
Допустим, у нас есть две коллекции чисел. Необходимо сравнить эти коллекции и получить общие, встречающиеся в обеих коллекциях, числа:
👉 @frontendInterview
Метод intersection() сравнивает текущую коллекцию с другой и возвращает новую, состоящую из элементов, входящих в обе коллекции.
В математике это называется пересечением двух множеств. Пересечение множеств A и B — это множество, которое состоит из элементов, входящих как в множество А, так и во множество B. Это можно выразить формулой:
A ∩ B = { x | x ∈ A ∧ x ∈ B }
Допустим, у нас есть две коллекции чисел. Необходимо сравнить эти коллекции и получить общие, встречающиеся в обеих коллекциях, числа:
const num1 = new Set([42, 4, 69, 37, 2])
const num2 = new Set([1, 2, 3, 4])
const inter = num1.intersection(num2)
console.log(inter)
// Set(2) { 2, 4 }
👉 @frontendInterview
👍13❤2🔥1
Наш код. Ремесло, профессия, искусство
Автор: Бугаенко Е.
Быть программистом может быть интересно и весело, но быть разработчиком программного обеспечения — это сущий ад. Компьютеры логичны, люди — нет. Увы, в современной индустрии программного обеспечения не платят за программирование. Платят за разработку программного обеспечения, а это подразумевает выполнение задач в команде — вместе с другими людьми. Команды состоят из своенравных людей, а не из классов и методов Java.
Успех программного проекта зависит от умных инженеров, которые зачастую ленивы, невежественны, эгоистичны, раздражительны и попросту несчастны. Успех зависит от людей, которые нередко не умеют общаться, делиться знаниями, руководить и подчиняться, а также следовать указаниям. Он зависит от нашей способности формировать команды и участвовать в их деятельности. А еще от наших социальных навыков — порой в гораздо большей степени, нежели от навыков технических.
👉 @frontendInterview
Автор: Бугаенко Е.
Быть программистом может быть интересно и весело, но быть разработчиком программного обеспечения — это сущий ад. Компьютеры логичны, люди — нет. Увы, в современной индустрии программного обеспечения не платят за программирование. Платят за разработку программного обеспечения, а это подразумевает выполнение задач в команде — вместе с другими людьми. Команды состоят из своенравных людей, а не из классов и методов Java.
Успех программного проекта зависит от умных инженеров, которые зачастую ленивы, невежественны, эгоистичны, раздражительны и попросту несчастны. Успех зависит от людей, которые нередко не умеют общаться, делиться знаниями, руководить и подчиняться, а также следовать указаниям. Он зависит от нашей способности формировать команды и участвовать в их деятельности. А еще от наших социальных навыков — порой в гораздо большей степени, нежели от навыков технических.
👉 @frontendInterview
❤3👍3
CSV representation of array
Создайте функцию, которая принимает двумерный массив и вернет его в формате CSV.
Пример:
input:
output:
👉 @frontendInterview
Создайте функцию, которая принимает двумерный массив и вернет его в формате CSV.
Пример:
input:
[[ 0, 1, 2, 3, 4 ],
[ 10,11,12,13,14 ],
[ 20,21,22,23,24 ],
[ 30,31,32,33,34 ]]
output:
'0,1,2,3,4n'
+'10,11,12,13,14n'
+'20,21,22,23,24n'
+'30,31,32,33,34'
👉 @frontendInterview
👎5👍1
Как увеличить в размере при наведении элемент, не сдвигая соседние?
Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство
Пример использования
Объяснение
`transition: transform 0.3s;`: Это свойство добавляет плавный переход для любых изменений, связанных с трансформацией элемента. В данном случае, это применимо к изменению масштаба (
`transform: scale(1.2);`: Эта строка кода увеличивает размер элемента на 20% при наведении (
Контейнер с `display: flex;` Используется для демонстрации того, что элементы остаются на своих местах и не сдвигаются при увеличении одного из них.
👉 @frontendInterview
Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство
transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.Пример использования
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Увеличение при наведении</title>
<style>
.container {
display: flex;
gap: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
transition: transform 0.3s;
}
.item:hover {
transform: scale(1.2); /* Увеличение размера при наведении */
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Объяснение
`transition: transform 0.3s;`: Это свойство добавляет плавный переход для любых изменений, связанных с трансформацией элемента. В данном случае, это применимо к изменению масштаба (
transform: scale(1.2)), которое происходит при наведении.`transform: scale(1.2);`: Эта строка кода увеличивает размер элемента на 20% при наведении (
hover). Значение 1.2 означает увеличение на 20% по обеим осям (X и Y).Контейнер с `display: flex;` Используется для демонстрации того, что элементы остаются на своих местах и не сдвигаются при увеличении одного из них.
gap добавляет пространство между элементами.👉 @frontendInterview
👍10
Хочешь прокачать навыки программирования за 3 дня? Присоединяйся к праздничному интенсиву от METHED!
Ты создашь веб-приложение для отображения расписания автобусов в реальном времени, используя Node.js и JavaScript.
На интенсиве ты:
- Научишься создавать сервер на Node.js
- Разработаешь интерактивный интерфейс с помощью JavaScript
- Интегрируешь WebSocket для работы в реальном времени
- Научишься развертывать свои проекты на хостинге.
Количество мест ограничено!
Регистрируйся сейчас и прокачай свои навыки: https://tglink.io/37357a541bc9
Ты создашь веб-приложение для отображения расписания автобусов в реальном времени, используя Node.js и JavaScript.
На интенсиве ты:
- Научишься создавать сервер на Node.js
- Разработаешь интерактивный интерфейс с помощью JavaScript
- Интегрируешь WebSocket для работы в реальном времени
- Научишься развертывать свои проекты на хостинге.
Количество мест ограничено!
Регистрируйся сейчас и прокачай свои навыки: https://tglink.io/37357a541bc9
👍5
Какая из перечисленных структур данных является неизменяемой в JavaScript?
Anonymous Quiz
12%
Объекты
3%
Массивы
44%
Строки
41%
Map
Как сделать перенос слов?
Переносы слов в тексте используются для разбиения длинных слов, когда они не помещаются на одной строке. Переносы делают текст удобнее для чтения, облегчают восприятие информации и оптимальнее распределяют слова в абзаце.
HTML переносит слова на другую строку целиком, без учёта правил расстановки переносов. Из-за этого правый край абзаца выглядит неровным и напоминает «лесенку»
Выравнивание текста по ширине убирает неровность правого края, но между некоторыми словами появляются слишком широкие промежутки.
Расстановка переносов слов позволяет оптимизировать пробелы между словами и повысить эстетическую привлекательность блока текста. Есть несколько вариантов как этого добиться: с помощью элемента <wbr>, используя спецсимвол ­ и через свойство hyphens.
Использование элемента <wbr>
Элемент <wbr> ставится в тех местах, где предполагается возможный перенос. Браузер уже сам, в зависимости от расположения текста решает, делать перенос в этом месте или нет
У <wbr> есть определённые недостатки, в частности, при переносе не добавляется дефис, обозначающий перенос.
Использование спецсимвола ­
Спецсимвол ­ начинается со знака амперсанда (&) и завершается точкой с запятой. Работает этот спецсимвол схожим с <wbr> образом — там, где в тексте встречается ­, браузер при необходимости добавляет перенос слова. Обратите внимание, что ­ при переносе слов добавляет символ дефиса.
Использование свойства hyphens
Перечисленные выше методы имеют один минус — это ручная расстановка переносов в тексте. Свойство hyphens же задействует встроенный в браузер словарь, в котором, в том числе, указаны правила переноса множества слов.
Чтобы браузер понимал, с каким языком и словарём он должен работать, к тексту следует добавить атрибут lang с кодом языка. К примеру, кодом русского языка будет ru
Если на сайте предполагается один язык (к примеру, весь сайт только на русском), то атрибут lang пишется в элементе <html>. В случае использования нескольких языков, lang добавляется к абзацу <p> или другому подходящему текстовому элементу.
Для автоматической работы свойство hyphens задаём со значением auto и добавляем это свойство к абзацу
👉 @frontendInterview
Переносы слов в тексте используются для разбиения длинных слов, когда они не помещаются на одной строке. Переносы делают текст удобнее для чтения, облегчают восприятие информации и оптимальнее распределяют слова в абзаце.
HTML переносит слова на другую строку целиком, без учёта правил расстановки переносов. Из-за этого правый край абзаца выглядит неровным и напоминает «лесенку»
Выравнивание текста по ширине убирает неровность правого края, но между некоторыми словами появляются слишком широкие промежутки.
Расстановка переносов слов позволяет оптимизировать пробелы между словами и повысить эстетическую привлекательность блока текста. Есть несколько вариантов как этого добиться: с помощью элемента <wbr>, используя спецсимвол ­ и через свойство hyphens.
Использование элемента <wbr>
Элемент <wbr> ставится в тех местах, где предполагается возможный перенос. Браузер уже сам, в зависимости от расположения текста решает, делать перенос в этом месте или нет
У <wbr> есть определённые недостатки, в частности, при переносе не добавляется дефис, обозначающий перенос.
Использование спецсимвола ­
Спецсимвол ­ начинается со знака амперсанда (&) и завершается точкой с запятой. Работает этот спецсимвол схожим с <wbr> образом — там, где в тексте встречается ­, браузер при необходимости добавляет перенос слова. Обратите внимание, что ­ при переносе слов добавляет символ дефиса.
Использование свойства hyphens
Перечисленные выше методы имеют один минус — это ручная расстановка переносов в тексте. Свойство hyphens же задействует встроенный в браузер словарь, в котором, в том числе, указаны правила переноса множества слов.
Чтобы браузер понимал, с каким языком и словарём он должен работать, к тексту следует добавить атрибут lang с кодом языка. К примеру, кодом русского языка будет ru
Если на сайте предполагается один язык (к примеру, весь сайт только на русском), то атрибут lang пишется в элементе <html>. В случае использования нескольких языков, lang добавляется к абзацу <p> или другому подходящему текстовому элементу.
Для автоматической работы свойство hyphens задаём со значением auto и добавляем это свойство к абзацу
👉 @frontendInterview
👍6❤2
Как подружить веб-компоненты и JS-фреймворки
У крупных технокомпаний, как правило, есть множество ИТ-продуктов. Разрабатывают их, обычно, не одни и те же люди, целые группы команд. При этом фронтенд во всех этих продуктах обычно пишут на одних и тех же технологиях: берут готовый шаблон, что-нибудь обновляют — и готово. А что делать, если все эти продукты написаны на разных фреймворках? Конечно, можно сделать десяток UI-наборов на все случаи жизни, но будет крайне дорого их писать и поддерживать.
Могут ли веб-компоненты помочь разрешить эту проблему? Ответ в статье.
👉 @frontendInterview
У крупных технокомпаний, как правило, есть множество ИТ-продуктов. Разрабатывают их, обычно, не одни и те же люди, целые группы команд. При этом фронтенд во всех этих продуктах обычно пишут на одних и тех же технологиях: берут готовый шаблон, что-нибудь обновляют — и готово. А что делать, если все эти продукты написаны на разных фреймворках? Конечно, можно сделать десяток UI-наборов на все случаи жизни, но будет крайне дорого их писать и поддерживать.
Могут ли веб-компоненты помочь разрешить эту проблему? Ответ в статье.
👉 @frontendInterview