Насколько вы действительно хороши?

Напишите функцию, которая принимает массив чисел (баллы по предметам) и ваш результат. Верните True, если ваш результат больше среднего значения, иначе False! Примечание: Ваши баллы не включаются в массив. Для вычисления среднего балла добавите свой балл в данный массив!

Пример:

betterThanAverage([2, 3], 5) = true

👉 @frontendInterview

​Зачем в webpack чанки ?

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

Ленивая загрузка (Lazy Loading)
Позволяют реализовать ленивую загрузку компонентов или модулей, то есть код загружается только тогда, когда он действительно нужен. Например, компоненты страниц, которые пользователь еще не посетил, могут быть загружены только при их первом запросе. Это снижает объем данных, необходимых для начальной загрузки приложения, и ускоряет его старт.

Разделение кода (Code Splitting)
Позволяет разделять код приложения на чанки с помощью разделения кода. Это может быть автоматическое разделение, основанное на анализе графа зависимостей, или явное, когда разработчик указывает, какие модули или библиотеки следует загружать отдельно. Разделение кода помогает уменьшить размер каждого чанка, что положительно сказывается на времени загрузки.

Кэширование
При правильной настройке чанки могут быть эффективно закэшированы браузером пользователя. Если часть кода приложения меняется редко (например, сторонние библиотеки), её можно выделить в отдельный чанк, который будет загружен один раз и сохранён в кэше браузера на долгое время. Это уменьшает объем данных, которые необходимо загружать при повторных посещениях.

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

Пример:
В конфигурации Webpack можно настроить разделение кода с помощью optimization.splitChunks, что позволяет автоматически определять и выделять общие модули в отдельные чанки.

👉 @frontendInterview

👉 @frontendInterview

Короткие ссылки на NJS

Рано или поздно практически перед каждым разработчиком встаёт задача использования сервиса коротких ссылок. Чаще всего такой сервис нужен для публикации постов в социальных сетях или сбора маркетинговой статистики. У разработчика есть два пути — использовать готовый сервис или написать свой. Я выбираю второй вариант!

Описанная в рецепте серверная часть позволяет реализовать такой сервис, клиентская часть всё ещё остаётся за вами. Для генерации ссылки вам нужно будет отправить запрос на сервер, в ответ вам вернётся сгенерированная короткая ссылка.

👉 @frontendInterview

Калибровка Life Work Balance: практические инструменты ежедневного планирования

Продолжаю делиться личным опытом в планировании. Без воды, лирики и рерайтов. Ребята, в статье инструменты которые прошли проверку временем и самое главное — ленью. Я отсеял всё лишнее и оставил только то, что действительно полезно и эффективно.
За 14 лет экспериментов с планированием у меня накопилось много опыта, я попробовал разные инструменты. В этой статье расскажу о тех, которыми пользуюсь до сих пор. Также мы обсудим концепции, которые мне зашли больше всего.

👉 @frontendInterview

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

👉 @frontendInterview

​Какие критерии оценки кода есть ?

Оценка качества кода — это важный процесс, который помогает обеспечить надёжность, читаемость и поддерживаемость программного обеспечения. Есть несколько ключевых критериев, по которым обычно оценивают качество кода:

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

Производительность
- Оптимизация: Код должен быть написан таким образом, чтобы максимально эффективно использовать ресурсы, минимизируя время выполнения и потребление памяти.
- Минимизация зависимостей: Избыточное использование библиотек и фреймворков может увеличить время загрузки и ухудшить производительность.

Поддерживаемость
- Модульность и повторное использование: Код должен быть организован так, чтобы его было легко модифицировать, расширять и повторно использовать. Использование функций, классов и модулей способствует этому.
- Тестирование: Наличие тестов (юнит-тесты, интеграционные тесты) упрощает обнаружение и исправление ошибок, а также помогает обеспечить стабильность приложения при внесении изменений.

Безопасность
- Предотвращение уязвимостей: Код должен быть защищён от распространённых уязвимостей, таких как XSS (межсайтовый скриптинг), CSRF (межсайтовая подделка запроса) и SQL-инъекции, в случае работы с базами данных.

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

Эффективность разработки
- Инструменты и практики: Использование современных инструментов разработки, систем контроля версий и методологий разработки, таких как Agile или Scrum, может улучшить эффективность и качество кода.

👉 @frontendInterview

Разработка игр на языке jаvascript. Учебное пособие для СПО. 2-е изд.

Современные технологии разработки интернет-приложений шагнули далеко вперед. Можно найти множество учебников, посвященных HTML, CSS, jаvascript и т.п. Все они подробно описывают различные элементы языков и могут использоваться в качестве справочников, однако для их успешного применения необходимо иметь опыт проектирования и разработки приложений. В данном учебном пособии не только описываются элементы языка программирования, но и приводится множество практических примеров, позволяющих решать реальные задачи. А изучение на основании реальных задач, когда видишь результат, гораздо эффективнее, чем решение неинтересных, но очень полезных учебных примеров. Принципы построения игры, описанные в данном учебном пособии, могут быть с минимальными изменениями распространены на другие языки программирования.

👉 @frontendInterview

Get Nth Even Number

Создайте функцию, которая вернет N-ое четное число.

Пример:

1 --> 0 (первое четное число 0)
3 --> 4 (третье четное число 4 (0, 2, 4))
100 --> 198

👉 @frontendInterview

​Как работает setTimeout ?

Функция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта global в Node.js, что делает её доступной для использования в любом окружении.

Синтаксис

let timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
let timeoutID = setTimeout(functionCode[, delay]);

- function: Будет вызвана после задержки.
- functionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности).
- delay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0.
- arg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове.

Пример:

function sayHello() {
  console.log('Привет!');
}

// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)
setTimeout(sayHello, 2000);

Отмена выполнения setTimeout
Вызов ее возвращает идентификатор таймера, который можно использовать для отмены выполнения с помощью функции clearTimeout.

let timerId = setTimeout(sayHello, 2000);

// Отменяет выполнение
clearTimeout(timerId);

Особенности поведения
- Минимальная задержка: В HTML5 спецификация предусматривает минимальную задержку в 4ms для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения.
- Задержка в неактивных вкладках: Браузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано.
- Асинхронность: setTimeout не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания.

👉 @frontendInterview

CSS Text Fade Out On Scrolling Effect

В этой статье рассказывается про создание эффекта "затухания" текста на границах блока. Для реализации используется полупрозрачный градиент и CSS background-clip.

.text {
    background-image: linear-gradient(transparent 10%, currentColor 30%, currentColor 70%, transparent 90%);
  -webkit-background-clip: text;
    background-clip: text;
    background-attachment: fixed;
  }

👉 @frontendInterview

Улучшение производительности рендеринга с помощью CSS content-visibility

В этой статье рассказывается про CSS свойство content-visibility. Это новая функция CSS, которая позволяет "скрывать" определенные части DOM с точки зрения верстки и рисования. Она в основном не влияет на дерево доступности (поскольку узлы DOM все еще там), не влияет на поиск на странице (⌘+F/Ctrl+F) и не требует виртуализации. Все, что ему нужно, - это оценка размеров внеэкранных элементов, чтобы браузер мог зарезервировать там место.

👉 @frontendInterview

Разработчик фиксит баг:

👉 @frontendInterview

Какая бывает работа с тестами ?

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

Типы:
- Модульное тестирование (Unit Testing): Проверка отдельных модулей или компонентов программы на корректность выполнения их функций. Каждый тест оценивает работу отдельной части кода в изоляции от остальной программы.

- Интеграционное тестирование (Integration Testing): Проверка взаимодействия между различными модулями или внешними системами и сервисами. Цель — убедиться, что компоненты системы корректно работают вместе.

- Функциональное тестирование (Functional Testing): Проверка того, что функциональные требования, предъявляемые к программе, выполняются. Эти тесты фокусируются на пользовательских сценариях и возможностях программы.

- Тестирование производительности (Performance Testing): Оценка скорости, стабильности и масштабируемости приложения под нагрузкой.

- Тестирование безопасности (Security Testing): Проверка на наличие уязвимостей, которые могут быть использованы для несанкционированного доступа или повреждения данных.

Инструменты
Для автоматизации процесса тестирования существует множество инструментов и библиотек. Выбор инструмента зависит от языка программирования, среды разработки и конкретных требований проекта. Например: Mocha, Jest, и Cypress для JavaScript.

Процесс
- Планирование: Определение целей тестирования, выбор инструментов и методик.
- Написание тестов: Создание тестовых сценариев, которые проверяют различные аспекты работы кода.
- Выполнение тестов: Запуск тестов и сбор результатов.
- Анализ результатов: Интерпретация результатов тестирования, выявление и исправление ошибок.
- Рефакторинг: Улучшение структуры и качества кода без изменения его функциональности на основе результатов тестирования.
- Регрессионное тестирование: Повторное тестирование после изменений, чтобы убедиться, что исправления не привели к новым ошибкам.

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

👉 @frontendInterview

Modern CSS with Tailwind

Книга «Современный CSS с Tailwind» (англ. «Modern CSS with Tailwind, Flexible Styling Without the Fuss») от Ноэля Рэппина — исчерпывающее руководство, которое знакомит разработчиков с возможностями и эффективным использованием фреймворка Tailwind CSS в веб-проектах.

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

👉 @frontendInterview