Всем привет!

Хотите узнавать небанальное об интервью на английском? Получить оффер в валюте на удаленке или даже переехать?

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

Будем очень рады вашей подписке, но еще больше - вашим вопросам и мнениям.

Ваши Аня и Любовь
из @acceleracio

​Как опубликовать сайт прямо на GitHub?

Задача
Как опубликовать сайт в виде набора HTML-страниц для тестирования или постоянного размещения прямо на GitHub. Например, такой сайт может стать отличным портфолио. Для него будут бесплатными хостинг и доменное имя третьего уровня.

На GitHub для этого есть специальный инструмент — GitHub Pages. С помощью него публикуют сайты, используя в качестве хостинга сам сервис. Есть два способа использования этого инструмента:

1. Собранный сайт помещается в отдельную папку в выбранной ветке репозитория, GitHub просто отображает эту папку как корневую для сайта. Такой подход используют для показа уже собранного статического сайта в виде набора файлов в форматах, которые отображаются в браузере напрямую.
2. Статический сайт сначала собирается с помощью средств автоматизации GitHub Actions и публикуется также как в первом случае.

Второй способ не будем рассматривать, так как он находится на этапе бета-тестирования. В этом режиме можно выбрать уже готовые решения, например, GitHub Pages Jekyll и Static HTML, а можно настроить свой воркфлоу.

Рассмотрим в статье подробно первый способ.

👉 @frontendInterview

Войти в IT – в 37 и с дипломом филфака

Я нашла свою первую работу тестировщика в 37 лет, с гуманитарным образованием, без коммерческого опыта и без курсов. В этой статье хочу показать все максимально объективно – и успехи, и разочарования на этом пути.

👉 @frontendInterview

UX designer - нарисовал
Devs - сделали
QA - протестировали
Пользователь:

👉 @frontendInterview

Что такое falsy значения?

"falsy" (ложные) значения — это значения, которые при приведении к логическому типу (Boolean) дают false. Эти значения часто используются в условиях (например, в if выражениях) для проверки истинности или ложности.

Основные значения:
false:
Само значение false является ложным.

  if (false) {
     console.log('Это не выполнится');
   }
   

0 и -0:
Нулевые значения считаются ложными.

if (0) {
     console.log('Это не выполнится');
   }

if (-0) {
     console.log('Это тоже не выполнится');
   }

"" (пустая строка):
Пустая строка считается ложной.

if ("") {
     console.log('Это не выполнится');
   }

null:
Значение null также является ложным.

if (null) {
     console.log('Это не выполнится');
   }

undefined:
Значение undefined является ложным.

if (undefined) {
     console.log('Это не выполнится');
   }

NaN (Not-a-Number):
Специальное значение NaN, которое обозначает нечисловое значение, считается ложным.

if (NaN) {
     console.log('Это не выполнится');
   }

Agile для всех

AGILE дает реальные и действенные ответы на вопрос, который не дает спокойно спать руководителям: «Как оставаться успешным в быстро меняющемся и непредсказуемом мире?» Эта методология уже завоевала рынок, доказав что является одним из лучших подходов для создания и доставки программного обеспечения. «Agile для всех» адресован практикам, из этой книги вы узнаете как целые организации — от менеджеров по продукту и разработчиков до маркетологов и руководителей — могут использовать «гибкий» подход.

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

👉 @frontendInterview

Trash Party

Вы получите trash1 и trash2, которые могут иметь следующие значения:

[], false, '', new Array(), null, NaN, undefined, 0, -0, 0n, -0n, '0'.

Вы должны вернуть булево значение, если они строго равны.

Примечание:
тройное равенство === и строгое неравенство !== не допускаются

Пример:

compareTrash(0, false) => false
compareTrash('', '')   => true
compareTrash([], 0)    => false

👉 @frontendInterview

​Событие change

Событие change срабатывает, когда пользователь изменяет значение в <input>, <select> или <textarea> и фиксирует свои изменения.

Это событие лучше всего использовать при создании форм, когда не требуется постоянно взаимодействовать с каждым изменённым символом в поле ввода. Так же данное событие пригодится и при создании чекбоксов, полей выбора и т. п.

Когда использовать
В текстовых полях (<input>, <textarea>), когда нужно получить окончательное значение после завершения ввода.

В выпадающих списках (<select>), если пользователь выбрал новое значение из дропдауна с доступными опциями.

Чекбоксы и радиокнопки (<input type="checkbox">, <input type="radio">), когда состояние переключается между «выбрано» и «не выбрано». Например, при отправке формы или при взаимодействии с выбором нескольких значений (чекбоксы или выпадающие списки).

Пример:

const input = document.querySelector('.input')

input.addEventListener('change', function (event) {
  console.log(event.target.value)
})

В этом примере мы выбираем элемент с классом .input с помощью document.querySelector(). Используя метод addEventListener, мы привязываем обработчик события change к элементу. Этот обработчик будет вызываться, когда событие произойдет. Внутри функции мы можем получить новое значение элемента с помощью event.target.value. Это значение будет отображено в консоли после изменения и подтверждения ввода пользователем.

👉 @frontendInterview

Выразительный React: простые компоненты на сервере

В статье вы познакомитесь с React и создадите первый простой компонент — прямоугольник с собачкой. В этом примере мы не будем запускать код в браузере. Вместо этого напишем простой скрипт, который запустит сервер и отдаст HTML-страницу с компонентом. Эта техника называется рендеринг на стороне сервера (Server-Side Rendering, SSR).

👉 @frontendInterview

Feature-Sliced Design (FSD): Основы и практические примеры архитектуры

Когда я только начинал свою карьеру фронтенд-разработчика, часто сталкивался с проблемами поддержки кода в проектах. Со временем я понял, что структура кода имеет решающее значение. Так я узнал о Feature-Sliced Design. Этот подход помогает разбивать проект на функциональные части, что упрощает работу с кодом и его сопровождение. Давайте разберемся как это работает.

👉 @frontendInterview

В новом выпуске подкаста «Времена НаСтали» руководитель отдела frontend-разработки Олег Рогов и руководитель команды дизайна Анна Труфанова рассказали о low-code решениях в веб-дизайне.
Технология использования платформ позволяет создавать приложения без глубоких знаний в области программирования. Такой подход полезен, если к разработке веб-интерфейсов нужно привлечь бизнес-аналитиков или экспертов из другой нетехнической области.
В подкасте ответили на следующие вопросы.
— Как low-code влияет на процесс дизайна?
— В чем главные преимущества использования этих инструментов по сравнению с традиционными методами разработки?
— Нужно ли иметь базовые знания программирования?
— Каковы текущие тенденции и будущее развитие low-code инструментов в контексте дизайна?

Слушать подкаст на Яндекс.Музыке!

Как быстро мечты удаленщиков разбиваются об реальность

👉 @frontendInterview

prefers-contrast

Это одно из значений директивы @media для проверки пользовательских настроек. Отслеживает выбор настроек контрастности в системе.

Пример
Давайте зададим модальному окну белую рамку, когда контрастность в системе понижена.

@media (prefers-contrast: more) {
  .dialog {
    border: 2px solid #FFFFFF;
  }
}

Если заглянете в демку со включённым режимом повышенной контрастности, у модального окна появится белая обводка.

👉 @frontendInterview

Справочник JavaScript. Кратко, быстро, под рукой

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

👉 @frontendInterview

​Two fighters, one winner.

Создайте функцию, которая возвращает имя победителя в бою между двумя бойцами. Каждый боец по очереди атакует другого, и побеждает тот, кто первым убьет другого. Смерть определяется как health <= 0.

Каждый боец будет объектом/экземпляром Fighter. Смотрите ниже класс Fighter на выбранном вами языке.

health и damagePerAttack за атаку будут целыми числами, большими 0. Вы можете мутировать объекты Fighter.

Ваша функция также получает третий аргумент - строку с именем бойца, который атакует первым. Пример:

declare_winner(Fighter("Lew", 10, 2), Fighter("Harry", 5, 4), "Lew") => "Lew"
  
Lew attacks Harry; Harry now has 3 health.
Harry attacks Lew; Lew now has 6 health.
Lew attacks Harry; Harry now has 1 health.
Harry attacks Lew; Lew now has 2 health.
Lew attacks Harry: Harry now has -1 health and is dead. Lew wins.

function Fighter(name, health, damagePerAttack) {
        this.name = name;
        this.health = health;
        this.damagePerAttack = damagePerAttack;
        this.toString = function() { return this.name; }
}

👉 @frontendInterview