Как обработать ситуацию, когда код выбрасывает ошибку, и не сломать приложение?

Конструкция try...catch позволяет выполнить произвольный код, но если в нем произошла ошибка, то программа не остановит своё выполнение, а перейдёт в блок catch, где ошибку можно обработать. В этой статье описаны принципы работы с этой конструкцией.

👉 @frontendInterview

UI/UX тренды в 2025: угрожает ли ИИ будущему дизайнеров и какие визуальные тренды нас удивят?

Мы продолжаем следить за UI-трендами, чтобы создавать красивые и удобные интерфейсы, которые не только удерживают пользователей, но и гибко адаптируются под влиянием новых технологий. И, конечно, готовы рассказать о них вам.

👉 @frontendInterview

Как программисты заходят к начальнику

👉 @frontendInterview

​Как растянуть элемент на 100%?

Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы.

Растяжение элемента на 100% ширины и высоты
Для растяжения элемента как по ширине, так и по высоте относительно родителя используются width: 100%; и height: 100%;.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Растянут по ширине и высоте!</div>
</div>

Растяжение относительно окна браузера (`viewport`)
Если элемент нужно растянуть на весь экран, используются единицы 100vw (ширина окна) и 100vh (высота окна).

<div style="width: 100vw; height: 100vh; background: coral;">
  Я растянут на весь экран!
</div>

Для исключения полосы прокрутки можно использовать

width: calc(100vw - 16px); /* Учитывается ширина скролла */

Использование `position: absolute`
Когда нужно растянуть элемент независимо от размера его содержимого, можно использовать position: absolute.

<div style="position: relative; width: 300px; height: 300px; background: lightblue;">
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: coral;">
    Я растянут абсолютно!
  </div>
</div>

Растяжение внутри Flexbox-контейнера
Flexbox автоматически растягивает вложенные элементы, если у них указаны свойства flex: 1 или align-items: stretch.

<div style="display: flex; width: 300px; height: 300px; background: lightblue;">
  <div style="flex: 1; background: coral;">Я растянут по Flexbox!</div>
</div>

Растяжение внутри Grid-контейнера
CSS Grid также позволяет растягивать элементы.

<div style="display: grid; width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Я растянут внутри Grid!</div>
</div>

Растяжение с учетом отступов
Если нужно учесть отступы (padding) или границы (border), используйте свойство box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет "выходить за пределы" из-за отступов.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: coral;">
    Я растянут с учетом отступов!
  </div>
</div>

👉 @frontendInterview

Laws of UX: Using Psychology to Design Better Products & Services

Это практическое руководство объясняет, как вы можете применять ключевые принципы психологии для создания продуктов, которые являются более интуитивными и ориентированными на человека. Автор Джон Яблонски разбирает дизайн приложений, чтобы привести наглядные примеры того, как дизайнеры UX могут создавать дизайн, адаптирующийся к тому, как пользователи воспринимают и обрабатывают цифровые интерфейсы.

👉 @frontendInterview

Mumbling

На этот раз ни истории, ни теории. В примерах ниже показано, как написать функцию accum:

Пример:

accum("abcd")  // -> "A-Bb-Ccc-Dddd"
accum("RqaEzty")  // -> "R-Qq-Aaa-Eeee-Zzzzz-Tttttt-Yyyyyyy"
accum("cwAt")  // -> "C-Ww-Aaa-Tttt"

Параметр accum представляет собой строку, в которую входят только буквы от a..z и A..Z.

👉 @frontendInterview

​Как удалить все элементы из массива?

Чтобы удалить все элементы из массива в JavaScript, можно использовать несколько способов, в зависимости от ваших целей.

Установка длины массива в 0
JavaScript позволяет вручную изменять длину массива. Если установить длину массива равной 0, все его элементы будут удалены.

let arr = [1, 2, 3, 4, 5];
arr.length = 0;

console.log(arr); // []

Присвоение пустого массива
Можно просто присвоить переменной новый пустой массив.

let arr = [1, 2, 3, 4, 5];
arr = [];

console.log(arr); // []

Пример

let arr = [1, 2, 3, 4, 5];
let reference = arr;

arr = [];
console.log(arr);       // []
console.log(reference); // [1, 2, 3, 4, 5]

Использование метода `splice`
Метод splice позволяет удалять элементы из массива. Если указать удаление всех элементов, массив станет пустым.

let arr = [1, 2, 3, 4, 5];
arr.splice(0, arr.length);

console.log(arr); // []

Использование цикла (редко применяется)
Хотя это не самый эффективный способ, можно очистить массив с помощью цикла.

let arr = [1, 2, 3, 4, 5];
while (arr.length > 0) {
  arr.pop(); // Удаляем последний элемент
}

console.log(arr); // []

👉 @frontendInterview

​Как можно расставить автоматическую нумерацию элементов, не относящихся к спискам при помощи CSS?

В следующем примере показано простое использование функции counter():

<section class="table-of-contents">
  <h1 class="title">Оглавление</h1>
  <h2 class="chapter">HTML и CSS</h2>
  <h2 class="chapter">Создание стилей и таблиц стилей</h2>
  <h2 class="chapter">Селекторы: выбор форматируемых элементов</h2>
  <h2 class="chapter">Механизм наследования стилей</h2>
  <h2 class="chapter">Управление сложной структурой стилей: каскад</h2>
  <h2 class="chapter">Поля, отступы, границы</h2>
</section>

На элементе <section> создаём счётчик с именем chapter и начальным значением 0:

.table-of-contents {
  counter-reset: chapter 0;
}

Устанавливаем увеличение значения счётчика сhapter, используя свойство counter-increment. Далее подставляем значение счётчика chapter через функцию counter():

.chapter {
  counter-increment: chapter 1;
}

.chapter::before {
  content: "Глава "counter(chapter) ": ";
}

👉 @frontendInterview

Бесплатный практический вебинар: Веб-разработчик: с нуля до мини-игры за 2 часа.

⏰ Когда: 20 февраля в  19:00 по мск.

Погрузитесь в решение реальной задачи и напишите небольшую игру на HTML, JS и CSS, которая работает прямо в браузере 🎮

Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе.

Какие JS фреймворки учить: Vue, React, а может, Angular?

Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.

🎁 Всем, кто зарегистрировался - гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  карта компетенций начинающего Frontend-разработчика и гайд «Как опубликовать страницу в интернете при помощи GitHub Pages»

Что такое MR-стенды и с чем их едят

В условиях непрерывной интеграции и высокой скорости разработки фронтенд неизбежно сталкивается с вызовами, связанными с тестированием изменений до их слияния в основную ветку. Любой, даже минимальный апдейт, способен повлиять на пользовательский опыт, поэтому эффективность процессов тестирования становится критически важной. Для нас спасением стали MR-стенды, которые предоставляют возможность изолированного тестирования новой функциональности, минимизируя риски и сокращая время на выявление и исправление ошибок. Рассказываем, как работают MR-стенды, в каких случаях они особенно полезны и как их внедрение повлияло на качество и скорость нашей разработки.

👉 @frontendInterview

Когда решил не использовать готовые библиотеки и написал всё сам

👉 @frontendInterview

Для чего нужна методология в HTML и CSS?

Методология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения.

Понятность кода
Без единого подхода код может стать "кашей" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам.

Снижение ошибок
Если есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей.

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

Легкость сопровождения
С методологией легко найти нужные элементы и вносить изменения.

Примеры популярных методологий:

БЭМ (Блок, Элемент, Модификатор)
Одна из самых популярных методологий для HTML и CSS.
- Она предлагает структурировать классы так:
- Блок: независимый компонент (например, menu).
- Элемент: часть блока (например, menu__item).
- Модификатор: вариант блока или элемента (например, menu__item--active).

Пример кода

     <div class="menu">
       <div class="menu__item menu__item--active">Главная</div>
       <div class="menu__item">О нас</div>
       <div class="menu__item">Контакты</div>
     </div>
     

Atomic Design
Основана на создании интерфейсов из "атомов" (простейшие элементы, например, кнопки), "молекул" (комбинации атомов, например, форма) и "организмов" (сложные компоненты, например, шапка сайта).

Пример

     <!-- Атом -->
     <button class="button">Клик</button>
     <!-- Молекула -->
     <div class="form">
       <label class="form__label">Имя</label>
       <input class="form__input" type="text">
     </div>
     

SMACSS (Scalable and Modular Architecture for CSS)
Делит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода.

👉 @frontendInterview

Ultimate Typescript Handbook: Build, scale and maintain Modern Web Applications with Typescript

Эта книга представляет собой исчерпывающее руководство по TypeScript, языку программирования, расширяющему JavaScript такими мощными возможностями, как статическая типизация, классы и интерфейсы. Книга состоит из тринадцати глав, в которых рассматривается все, начиная с настройки среды разработки и заканчивая созданием приложения на языке Angular с использованием TypeScript.

👉 @frontendInterview

Credit Card Mask

Обычно, когда вы что-то покупаете, вас спрашивают, верен ли номер вашей кредитной карты, номер телефона или ответ на ваш самый секретный вопрос. Однако, поскольку кто-то может заглянуть вам через плечо, вы не хотите, чтобы это отображалось на экране. Вместо этого мы маскируем его. Ваша задача - написать функцию maskify, которая меняет все символы, кроме последних четырех, на '#'.

Примеры (ввод --> вывод):

"4556364607935616" --> "############5616"
     "64607935616" -->      "#######5616"
               "1" -->                "1"
                "" -->                 ""

// "What was the name of your first pet?"
"Skippy" --> "##ippy"
"Nananananananananananananananana Batman!" --> "####################################man!"

👉 @frontendInterview

​Что происходит при схлопывании границ?

Это процесс в CSS, когда вертикальные внешние отступы (margins) двух или более блоков объединяются в один. Это поведение касается только вертикальных отступов (margin-top и margin-bottom) и не касается горизонтальных (margin-left и margin-right).

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

Как это работает?
Если у одного блока снизу есть margin-bottom, а у другого блока сверху есть margin-top, то итоговый отступ между этими блоками будет равен большему из двух значений, а не их сумме. Если у элемента задан margin-top и он находится первым в контейнере, его верхний отступ может схлопнуться с верхним отступом контейнера. Если у элемента установлен margin-bottom и он является последним в контейнере, его нижний отступ может схлопнуться с нижним отступом контейнера. В этом примере между блоками будет отступ не 50px (20px + 30px), а 30px, потому что сработает схлопывание границ и возьмется большее значение.

<!DOCTYPE html>
<html>
<head>
    <style>
        .block1 {
            margin-bottom: 20px;
            background-color: lightblue;
        }
        .block2 {
            margin-top: 30px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="block1">Блок 1</div>
    <div class="block2">Блок 2</div>
</body>
</html>

Когда схлопывание границ не происходит
- Если элементы имеют display:flex или display:grid.
- Если между элементами есть элемент с padding или border.
- Если у одного из элементов установлено свойство overflow со значением отличным от visible.
- Если один из элементов плавающий (float).

👉 @frontendInterview