Бесплатный практический вебинар: Веб-разработчик: с нуля до мини-игры за 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

​Можно ли увеличить или уменьшить поле ввода? Управляем этим через стили.

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

Часто используется для <textarea>, но можно применить к любому элементу, кроме:

- строчных (inline) элементов;
- блочных (block), для которых задано свойство overflow со значением visible (является значением по умолчанию для большинства элементов).

По умолчанию поле ввода <textarea> может изменять свой размер, если потянуть за нижний правый угол. Если вы хотите запретить изменение размеров текстовой области, вы должны явно указать значение свойства resize как none.

Как пишется
- none — размеры изменить нельзя (значение по умолчанию).
- both — размеры можно изменять по горизонтали и вертикали.
- horizontal — размер можно изменять по горизонтали.
- vertical — размер можно изменять по вертикали.

Экспериментальные значения:
- block — размер можно изменять в блочном измерении элемента.
- inline — размер можно изменять в строковом измерении элемента.
Блочное или строчное измерение элемента зависит от направления текста, задаваемого свойствами writing-mode и direction.

По умолчанию поддерживается в Firefox и Safari. В браузерах Chrome и Edge необходимо включить флаг Experimental Web Platform features. Более подробную информацию можно узнать на caniuse.

👉 @frontendInterview

Работа с атрибутами HTML элементов в JavaScript

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

👉 @frontendInterview

Это я через 5 лет «вышел погулять» после тяжёлого трудового дня

👉 @frontendInterview

Можете ли вы описать основное различие между методами forEach и map?

Чтобы понять разницу между ними, давайте посмотрим, что делает каждая функция.

forEach
- Перебирает элементы в массиве.
- Вызывает callback-функцию для каждого элемента.
- Не возвращает значение.

 const a = [1, 2, 3];
 const doubled = a.forEach((num, index) => {
   // Делаем что-либо с num и/или index.
 });
 // doubled = undefined

map
- Перебирает элементы в массиве.
- “Сопоставляет” каждый элемент с новым элементом, вызывая функцию для каждого элемента, создавая в результате новый массив.

 const a = [1, 2, 3];
 const doubled = a.map(num => {
   return num * 2;
 });
 // doubled = [2, 4, 6]

Основное различие между .forEach и .map() состоит в том, что .map() возвращает новый массив. Если вам нужен результат, но вы не хотите изменять исходный массив, .map() — очевидный выбор. Если вам просто нужно перебрать массив, то стоит воспользоваться forEach.

Новые возможности JavaScript

Руководство по JavaScript для тех, кто хочет кодить быстро и эффективно.
«Новые возможности JavaScript» — это сборник правил написания кода на современном языке JavaScript. На наглядных примерах автор объясняет, как работают последние версии JS, какие приемы в нем можно использовать, чтобы сделать код коротким и чистым, а каких ошибок лучше избегать, чтобы не было багов.

👉 @frontendInterview

Reverse words

Выполните функцию, которая принимает строковый параметр и меняет местами каждое слово в строке. Все пробелы в строке должны быть сохранены.

Примеры:

"This is an example!" ==> "sihT si na !elpmaxe"
"double  spaces" ==> "elbuod secaps"

👉 @frontendInterview

​Как работает реактивность в vue.Js ?

Реактивность — это одна из ключевых характеристик фреймворка, которая позволяет автоматически обновлять пользовательский интерфейс при изменении состояния. Вот как это работает:

Реактивные данные:
Vue использует объекты с реактивными свойствами, чтобы отслеживать изменения. Когда данные изменяются, Vue автоматически обновляет связанные с ними компоненты.

Объект Vue:
При создании нового экземпляра Vue, он делает все данные, определенные в опции data, реактивными.

      var vm = new Vue({
     data: {
       message: 'Hello Vue!'
     }
   });
   

Реактивность через геттеры и сеттеры:
Vue использует JavaScript Proxy (или Object.defineProperty в более старых версиях) для создания реактивных свойств. Каждый раз, когда свойство считывается, вызывается геттер, и когда свойство изменяется, вызывается сеттер.

Пример реактивности

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

При изменении vm.message интерфейс автоматически обновится:

vm.message = 'Hello World!';

Как это работает "под капотом"

1. Инициализация:
При инициализации Vue.js обходит все свойства объекта data и преобразует их в геттеры и сеттеры с помощью Object.defineProperty. Этот процесс называется обсервацией.

2. Детекторы изменений (Observers):
Каждый раз, когда создается реактивное свойство, создается объект наблюдателя (Observer), который следит за изменениями этого свойства.

3. Депенденси трекинг (Dependency Tracking):
Во время рендера компонента, Vue регистрирует все зависимости (реактивные свойства), которые используются. Это означает, что Vue "запоминает", какие свойства нужно отслеживать для каждого компонента.

4. Реактивное обновление:
Когда реактивное свойство изменяется, Vue уведомляет все компоненты, которые зависят от этого свойства, и они автоматически перерисовываются.

Реактивные системы в действиях

new Vue({
  el: '#app',
  data: {
    a: 1,
    b: 2
  },
  computed: {
    sum() {
      return this.a + this.b;
    }
  },
  watch: {
    a(newValue, oldValue) {
      console.log(`a изменилось с ${oldValue} на ${newValue}`);
    }
  }
});

Вычисляемые свойства: sum автоматически пересчитывается, когда a или b изменяются.
Наблюдатели (watchers): Реагируют на изменения данных и могут выполнять побочные эффекты.

Преимущества
1. Простота использования: Можно сосредоточиться на логике приложения, а не на обновлении DOM.
2. Высокая производительность: Vue эффективно отслеживает изменения и обновляет только те части DOM, которые изменились.
3. Поддержка сложных приложений: Реактивная система Vue легко масштабируется для больших и сложных приложений.

👉 @frontendInterview

👉 @frontendInterview