👉 @frontendInterview

​Значение какого типа возвращает оператор typeof и почему?

Оператор typeof возвращает строку, представляющую тип данных операнда.
console.log(typeof 42); // "number"
console.log(typeof "Hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){});// "function"

Но есть некоторые важные моменты, связанные с оператором typeof:

1. Null: Одна из известных особенностей — typeof null возвращает object. Это считается ошибкой в языке, но сохранено из-за обратной совместимости.
2. Функции: typeof для функций возвращает function. Функции в JavaScript это объекты, но оператор typeof позволяет их отличить от обычных объектов.
3. Массивы: typeof [] возвращает object, поскольку массивы в JavaScript являются разновидностями объектов. Для проверки, является ли переменная массивом, можно воспользоваться методом
Array.isArray.
4. Создание через конструктор: typeof new Number(42) или typeof new String('строка') возвращает object, т.к. когда используется ключевое слово new перед Number(42), создается новый объект типа Number, который является объектной оберткой вокруг числа 42. Таким образом, typeof new Number(42) возвращает "object", поскольку вы создали объект типа Number, даже если его внутреннее значение является числом.

Использование typeof: часто применяется для проверки типов переменных в условиях, чтобы выполнить различные действия в зависимости от типа данных.

👉 @frontendInterview

Теория алгоритмов

Авторы: В. Г. Куликов, В. С. Евстратов

В учебно-методическом пособии по дисциплине «Теория алгоритмов» представлены разделы, традиционно изучаемые в курсе теории алгоритмов: машины Тьюринга, нормальные алгоритмы Маркова, рекурсивные функции и т.д. Рассмотрены вопросы интуитивного и формального определения алгоритмов, сложности и нумерации алгоритмов, алгоритмически неразрешимых проблем, конструирования машин Поста.
Для обучающихся по направлению подготовки 09.03.02 Информационные системы и технологии.

👉 @frontendInterview

Sum of integers in string

Необходимо реализовать функцию, которая вычисляет сумму целых чисел внутри строки.

Примечание: проверяются только положительные целые числа.

Например, в строке "The30quick20brown10f0x1203jumps914ov3r1349the102l4zy dog" сумма целых чисел равна 3635.

👉 @frontendInterview

​CSS layer

Директива @layer, дополнительная функция layer() и ключевое слово layer дают вам возможность управлять каскадными слоями.
Каскадные слои — способ группировки и порядок применения стилей в одном источнике. Они помогают браузерам понять, какие стили применить на сайте.

Источник в CSS — место, откуда браузер берёт CSS-правила. Это могут быть ваши стили на сайте, настройки пользователей в браузере и системе, а также браузерные стили по умолчанию. Подробнее об этой и других концепциях в статье «Принцип каскада».

Благодаря каскадным слоям вы напрямую управляете слоями с разными наборами CSS-правил и решаете, какие стили специфичнее и в каком порядке их применять. Так что они пригодятся для:

- сброса браузерных стилей по умолчанию;
- перезаписи стилей из CSS-фреймворков и библиотек;
- стилизации компонентов;
- хранения стилей в одном месте, например, для состояний интерактивных элементов;
- цветовых тем, схем и поддержки разных режимов передачи цветов.

Например, вот стили с @layer для состояния кнопки при фокусе и когда она неактивна. В слое states устанавливаем стили для :disabled и :focus-visible, а в components — стили кнопки по умолчанию.

@layer components, states;

@layer components {
.button {
display: block;
min-width: 210px;
border: 2px solid transparent;
border-radius: 6px;
padding: 9px 15px;
color: #000000;
font-size: 18px;
font-weight: 300;
font-family: inherit;
transition: background-color 0.2s linear;
}

.button:hover {
background-color: #FFFFFF;
cursor: pointer;
transition: background-color 0.2s linear;
}
}

@layer states {
:focus-visible {
border: 2px solid #FFFFFF;
outline: none;
}

:disabled {
background-color: #DDDDDD;
}
}

Без каскадных слоёв нам нужно задать стили классу .button с нужными псевдоклассами. При этом мы не можем хранить их в одном месте файла так, чтобы их случайно не перезаписали другие разработчики.
С каскадными слоями легче победить сторонние стили. Например, из Bootstrap. Представим, что хотим изменить размер заголовка первого уровня без мучительных поисков нужных Sass-переменных.
<h1 class="fs-1">Последние обновления</h1>

Стили Bootstrap:
.fs-1 {
font-size: 2.5rem !important;
}

Наши стили с использованием каскадных слоёв:
@import url("https://cdn.com/bootstrap.min.css") layer;

@layer {
.fs-1 {
font-size: 3rem;
}
}

Со старыми возможностями CSS эту проблему приходится решать несколькими способами. Например, модификатором !important.
.fs-1 {
font-size: 3rem !important;
}

👉 @frontendInterview

👉 @frontendInterview

Попап

Создание попапа — распространённая задача для разработчика. Попапы или модальные окна привлекают внимание. Это может быть полезно как для самого пользователя, так и для заказчика. Например, попап — это удобный способ предупреждения о невозвратности действия при попытке перезагрузки страницы, а также хороший инструмент для сбора контактов пользователей.

В статье показывается простой и понятный способ создания попапа с использование тега <dialog>

👉 @frontendInterview

Основные принципы разработки

В этой объемной статье рассматриваются и объясняются основные принципы, которые используются в программировании (SOLID, KISS, YAGNI, DRY) и менее известные (BDUF, APO, LOD)

👉 @frontendInterview

👉 @frontendInterview

Если нужно будет объяснить, кто такой тестировщик простыми словами.

👉 @frontendInterview

Верстаешь?

Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:

1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».

А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.

👉 Проскочить на интенсив бесплатно

Начинаем 14 мая.

Реклама. ИП Чернова О. А., ИНН:771399721044

​Ключевое слово revert-layer в CSS

revert-layer — это ключевое слово или значение CSS, которое позволяет откатить назад каскадный слой, вернувшись к значению соответствующего свойства предыдущего каскадного слоя. Иными словами, это откат к исходному значению, заданному автором.

Но если для этого свойства не задан соответствующий набор стилей, произойдёт возврат к стилям браузера по умолчанию.

<body>
<h1>Hello World</h1>
<ul>
<li class="item feature">Item one</li>
<li class="item">Item two</li>
<li class="item">Item three</li>
</ul>
</body>

В этом коде у нас есть заголовочный элемент и список элементов. Теперь давайте напишем наш CSS:

@layer base, special;

@layer special {
.item {
color: red;
}
}

@layer base {
.item {
color: blue;
}
.feature {
color: green;
}
}

Здесь у нас два слоя. Все элементы будут красными (red), потому что в схеме слоя special — с максимальным приоритетом — для свойства color задано значение red.

Если мы поменяем порядок слоёв и сделаем приоритетным *@layer* special, base;, то все элементы станут синими, за исключением первого элемента, который будет зелёным. Это произойдёт из-за приоритета специфичности, так как стиль .feature следует после стиля .item

Чтобы использовать ключевое слово revert-layer, давайте добавим эти стили:

@layer base, special;

@layer special {
.item {
color: red;
}
.feature {
color: revert-layer;
}
}

@layer base {
.item {
color: blue;
}
.feature {
color: green;
}
}

Внутри нашего слоя special мы задаём цвет для значения revert-layer в селекторе элемента .feature.

В результате весь список элементов становится красным, а элемент .feature — зелёным, потому что происходит откат к соответствующему свойству предыдущего каскадного слоя, для которого мы задали значение green.

👉 @frontendInterview

JavaScript и Node.js для веб-разработчиков

Книга рассказывает о языке программирования JavaScript, разработке на нем как программ общего назначения, выполняющихся в среде Node.js, так и скриптов для веб-страниц. Даны основы JavaScript: типы данных, операторы, работа с числами, строками, датой и временем, массивами, функции, классы (как старого, так и нового синтаксиса), итераторы, генераторы и класс Promise. Объяснена работа с отладчиком, встроенным в редактор Visual Studio Code. Рассказано о модулях, средствах для работы с файловой системой и программирования веб-серверов. Описана объектная модель документа. Рассмотрены средства для работы с элементами веб-страницы, самой страницей и браузером и технология AJAX (в том числе Fetch API), а также готовые программные пакеты для разработки веб-сайтов, в частности Webpack.

👉 @frontendInterview

Correct the time-string

Нужно создать метод, который корректирует заданную временную строку.
При добавлении возникла проблема, поэтому многие временные строки сломаны.
Время форматируется с использованием 24-часовых часов, то есть с 00:00:00 до 23:59:59.

Пример:
"09:10:01" -> "09:10:01"
"11:70:10" -> "12:10:10"
"19:99:99" -> "20:40:39"
"24:01:01" -> "00:01:01"

👉 @frontendInterview

​Кастомные свойства в CSS

Давайте предположим, что у нас есть веб-страница, на которой много элементов с текстом одного и того же цвета. Дизайнер создал фирменный стиль, руководство утвердило, мы начали верстать. Наш CSS мог бы выглядеть примерно так
.header-primary {
font-size: 2em;
color: #18191C;
margin-bottom: .5em;
}

.header-secondary {
font-size: 1.6em;
color: #18191C;
}

Конкретный оттенок чёрного #18191C используется по всей странице в совершенно разных элементах: заголовках, тексте, кнопках, полях ввода. Кажется, что это не должно создавать никаких проблем, но на самом деле есть ряд неудобств, которых хотелось бы избежать.

Во-первых, если завтра по какой-то причине нужно будет немного изменить оттенок чёрного, придётся это делать во многих местах.

Во-вторых, приходится копировать и вставлять HEX-значение цвета, ну или запоминать первые несколько символов, чтобы текстовый редактор сумел нам подсказать.

Все эти неудобства уходят, если использовать CSS-переменные. Чаще их называют кастомные свойства.

Кастомное свойство — это произвольное свойство с определённым значением. Оно отличается от стандартного CSS-свойства способом записи. Чтобы применить кастомное свойство, нужно передать его в CSS-функцию var().

Стандартное свойство:
.list-item {
margin-left: 10px;
}

.list-item .link {
margin-left: 10px;
}

Кастомное свойство:
.list {
--element-gap: 10px;
}

.list-item {
margin-left: var(--element-gap);
}

.list-item .link {
margin-left: var(--element-gap);
}

Кастомных свойств не существует в спецификации CSS. По способам применения они больше всего похожи на переменные в языках программирования. Если мы определили кастомное свойство, то в дальнейшем можно его переиспользовать сколько угодно раз.

👉 @frontendInterview

👉 @frontendInterview