Принципы юнит-тестирования

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

👉 @frontendInterview

Shortest Word

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

Пример:
findShort("Let's travel abroad shall we") => 2

👉 @frontendInterview

​Web Workers

Web worker — это API, которое позволяет выполнять код вне основного потока. Благодаря этому долгие или сложные вычисления, которые выполняются на воркерах, не блокируют пользовательский интерфейс (UI).

Веб воркер создается в основном потоке. При создании воркеру передается URL-адрес скрипта. После загрузки создается отдельный поток, в котором выполнится скрипт воркера.
У скрипта будет свой собственный контекст, отличный от контекста окна window. В основном потоке глобальный контекст привязывается к переменной window, а в воркере — к переменной self. Контекст выполнения веб воркера WorkerGlobalScope отличается от контекста выполнения основного потока. У него нет доступа к объекту документа document и DOM API.

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

Как создать и запустить?
Воркер использует механизм сообщений для общения с основным потоком. Для отправки сообщения используется метод postMessage().
// Основной поток: app.js
const worker = new Worker('worker.js');

// Отправляем сообщение из основного потока в воркер
worker.postMessage({ message: '415тый, я база, ответьте' });

В глобальном контексте воркера есть обработчик onmessage(). Его можно использовать, чтобы принимать сообщения. Воркер также может отправлять сообщения в основной поток при помощи функции postMessage(). Функцию можно вызывать в любом месте воркера.
// Воркер: worker.js
onmessage = function (e) { // Слушаем сообщения из основного потока
if (e.message === "415ый, я база, ответьте") {
// Отправляем сообщение из воркера в основной поток
postMessage("База, это 415ый, как слышно?");
}
};

Чтобы получать сообщения в основном потоке, используйте метод-обработчик onmessage объекта Worker.
// window context app.js
const worker = new Worker("worker.js");

worker.postMessage({ message: "415тый, я база, ответьте" });

worker.onmessage = function (e) { // Слушаем сообщения из воркера
console.log(e);
// База, это 415-ый, как слышно?
};

👉 @frontendInterview

👉 @frontendInterview

Считаешь себя экспертом в IT? Участвуй в «Цифровом марафоне» от Сбера и «Школы 21» и будь на код впереди! Миллион рублей уже ждёт тебя.

В этом масштабном конкурсе ты будешь соревноваться со специалистами по всей России. Тройка лучших поделит в финале в Москве призовой фонд в 1,8 миллионов рублей.

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

Поспеши: 20 апреля — твой последний шанс нажать на кнопку «Хочу участвовать». Переходи на сайт и регистрируйся прямо сейчас!

Плавное раскрытие выпадающего меню

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

👉 @frontendInterview

Как выжить на первом испытательном сроке в IT и не только

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

👉 @frontendInterview

Типичная стыковка фронта с бэком

👉 @frontendInterview

​Как организовать переиспользование компонентов в React?

Переиспользование компонентов - один из основных принципов разработки в React. Это позволяет создавать эффективный и легко поддерживаемый код. Вот некоторые методы организации переиспользования:

1. Компоненты высшего порядка (HOC): Создание компонентов высшего порядка позволяет оборачивать другие компоненты, добавляя им определенное поведение. Это полезно для изоляции логики, которую вы хотите применить к нескольким компонентам.

2. Композиция компонентов: Строить более сложные компоненты путем комбинирования более простых. Компоненты, которые представляют более общие элементы (например, кнопки, карточки и т.д.), могут быть повторно использованы и настроены в зависимости от конкретных потребностей.

3. Render Props: Создание компонентов, которые передают функцию через свойство children или другое определенное свойство. Это позволяет другим компонентам использовать эту функцию для внедрения своего контента.

4. Хуки (Hooks): С React 16.8, хуки позволили переиспользовать состояние и логику в функциональных компонентах без использования классов. Вам даже можно создавать собственные пользовательские хуки для изоляции определенной функциональности.

5. Библиотеки компонентов: Существует множество библиотек компонентов, таких как Material-UI, Ant Design, Chakra UI и другие, предоставляющие готовые компоненты для переиспользования в ваших проектах.

6. Компоненты страниц (Page Components) и компоненты макета (Layout Components): Разделение компонентов на те, которые отвечают за макет (навигация, боковая панель и т.д.) и те, которые отвечают за конкретное содержание страницы, может существенно повысить переиспользование.

7. Контейнеры и компоненты представления (Containers and Presentational Components): Разделяйте компоненты на "умные" контейнеры, которые управляют состоянием и бизнес-логикой, и "глупые" компоненты представления, которые отображают данные, переданные им из контейнеров.

👉 @frontendInterview

Кодер с улицы. Правила нарушать рекомендуется

Эта книга — справочник по выживанию для начинающего разработчика.

«Кодер с улицы» научит вас справляться с реальными задачами. Седат Капаноглу честно делится советами, основанными на личном опыте, а не на абстрактной теории. Вы узнаете, как адаптировать знания, полученные из книг и курсов, к повседневным рабочим задачам. Пора узнать, как использовать антипаттерны и «плохие» методы программирования.

👉 @frontendInterview

shorter concat [reverse longer]

Даны 2 строки, a и b, верните строку вида:
короче+обратная(длиннее)+короче.

👉 @frontendInterview

​Что такое CSS препроцессоры?

Препроцессоры CSS - это инструменты, которые помогают нам расширить базовую функциональность CSS с помощью определенного языка сценариев. Это позволяет нам использовать сложный логический синтаксис: функции, примеси, вложения, наследование и многое другое, который будет скомпилирован в стандартный CSS.

Самый популярный препроцессор - SASS (Syntactically Awesome Style Sheet). SASS может быть написан с использованием двух разных синтаксисов: SASS или SCSS.

SASS синтаксис:

 $font-color: #aaaccc
 $bg-color: #eeefff

 .element
   color: $font-color
   background: $bg-color

SCSS синтаксис:

 $font-color: #aaaccc;
 $bg-color: #eeefff;

 .element {
   color: $font-color;
   background: $bg-color;
 }

Синтаксис SCSS считается более удобным и CSS-оподобным. Также среди отличий - разрешение файлов (.sass и .scss)

Препроцессор LESS (Leaner Style Sheets) легко интегрируется в проекты с использованием JavaScript. Синтаксис такой же, как у SCSS, но с некоторыми отличиями:

 @font-color: #aaaccc;
 @bg-color: #eeefff;

 .element {
   color: @font-color;
   background: @bg-color;
 }

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

font-color = #aaaccc;
bg-color = #eeefff;

.element
color: font-color;
background: bg-color;

👉 @frontendInterview

👉 @frontendInterview

Блок по центру экрана

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

👉 @frontendInterview

Проблема айтишников старше джуна №1: плохая самопрезентация на собеседованиях

Большинство реально сильных специалистов теряют ~20-50% от зарплаты только из-за слабой переговорной позиции.

Проект «Выше вилки» фиксит этот баг.

Экс-программисты Яндекса и Касперского делятся полезными фишками в переговорах, тактиками общения с рекрутёром и способами объективно оценить свои скиллы в денежном эквиваленте.

На канале @above_the_range проходят как бесплатные тренинги, так и анонсы на поток «Выше вилки», где вы научитесь правильно отвечать на скользкие и неочевидные вопросы.

Всё это — на примере реальных кейсов трудоустройства и без «душноты».

Никакого заговора на «успешный успех». Подписывайтесь и тренируйте переговорные техники.

реклама. рекламодатель ИП Шишков Илья Иванович ИНН: 575206903941