Вопрос с собеседования:

❓Чем полезны data- атрибуты?

HTML5 спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или Node.setUserData().

Синтаксис HTML

<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
</article>

Доступ в JavaScript

var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

Доступ в CSS

article::before {
content: attr(data-parent);
}

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#web

Современный JavaScript. От новичка до профи [2024]

Курс. По мере прохождения вы погрузитесь в интереснейший мир JavaScript. Обучение начинается с основных концепций языка и продолжается передовыми техниками программирования.

Вне зависимости от уровня подготовки, курс обеспечит вас всей самой необходимой информацией для успешного освоения JS.

👀 Посмотреть курс

#js

Вопрос с собеседования:

❓Какое будет поведение ```<script async defer>```?

При одновременном указании async и defer в современных браузерах будет использован только async, в IE9- – только defer (не понимает async).

Подробнее

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#web

TsParticles

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

👀 Посмотреть

Coderoll | Frontend

Вопрос с собеседования:

❓Какие элементы в HTML5 могут иметь aria атрибут?

Любой элемент

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

SVGOMG — онлайн-инструмент для оптимизации SVG

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

👀 Посмотреть

Coderoll | Frontend

Вопрос с собеседования:

❓Чистые и нечистые функции, что это и какие отличия между ними?

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

Нечистая функция - Изменяет состояние программы или какие-либо внешние переменные.
Может иметь побочные эффекты, такие как вывод в консоль, изменение DOM, отправка HTTP-запросов и т. д.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

Fuse.js

Легкий и мощный инструмент для поиска по тексту. Поддерживает "нечеткий" поиск. Работает без внешних зависимостей.

👀 Посмотреть

Coderoll | Frontend

Вопрос с собеседования:

❓Какие элементы в HTML5 могут иметь aria атрибут?

Любой элемент)

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

Генератор CSS Grid для быстрого создания адаптивных сеток

Инструмент, который упрощает работу с CSS Grid. Рисуйте сетку прямо в браузере, настраивайте её поведение и получайте готовый код. Подходит как для обучения, так и для ускорения разработки.

👀 Посмотреть

Coderoll | Frontend

Вопрос с собеседования:

❓Что такое имутабельность в JS?

Иммутабельность в JavaScript означает, что данные не могут быть изменены после их создания.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

Вопрос с собеседования:

❓Что такое замыкания?

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

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

Immer — библиотека для работы с состоянием

Позволяет писать чистый и лаконичный код при работе с вложенными объектами. С помощью Immer можно обновлять состояние как будто напрямую, но в итоге получать неизменяемые данные. Работает через "проекты" (draft), которые можно безопасно менять, а библиотека сама позаботится о создании нового объекта.

Отлично интегрируется с Redux Toolkit и позволяет избавиться от громоздких .map и ...spread конструкций, ускоряя разработку и делая код чище.

👀 Посмотреть

Coderoll | Frontend

Вопрос с собеседования:

❓Как объединить массивы?

1 - Можно использовать метод concat()
2 - Можно использовать spread оператор

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

Вопрос с собеседования:

❓Что такое NaN?

NaN (Not a Number): это значение, получаемое в результате выполнения числовой операции над нечисловым значением.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

Реальное тестовое задание на позицию Junior Frontend Developer (React) от компании Jupiter Soft

❗️ Обратите внимание, что макеты часто дают не только в формате Figma, но и в Adobe XD

Все материалы, что предоставляли для реализации тестового задания лежат тут:

👀 Посмотреть

#js

Игровой тренжёр по TypeScript

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

Да, сервис доступен на русском и английском, визуал тоже кайфовый

👀Попробовать

Coderoll | Frontend #typescript

Вопрос с собеседования:

❓В чем разница между == и ===?

Строгое равенство сравнивает значения по типу данных и значению.

Нестрогое сначала старается привести значения к одному типу, а потом сравнивает.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

Вопрос с собеседования:

❓Что такое лексическое окружение?

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


Лексическое окружение состоит из двух основных компонентов:

Environment Record (запись окружения) - отвечает за хранение переменных и функций внутри определенного контекста выполнения кода (например, функции или блока кода).

Outer lexical environment reference (Ссылка на внешнее лексическое окружение) - это ссылка на лексическое окружение, в котором данная функция была определена. Другими словами, это ссылка на окружение, в котором произошло объявление данной функции.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend