CodeRoll | Frontend

Hero Patterns

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

👀Посмотреть поближе

#front

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

❓Что такое инкапсуляция?

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

Почитать подробнее на Хабре

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

#web

date-fns — удобная JS-библиотека для работы с датами

Легковесная библиотека для работы с датами и временем в JavaScript. Она позволяет обрабатывать даты без лишних зависимостей и сложностей, как в других библиотеках (например, Moment.js).

В чём удобство библиотеки:
✅Она легкая — модульная структура: импортируешь только нужные функции.
✅Современная — работает с нативными объектами Date.
✅Мощная — более 200 функций для форматирования, парсинга, вычислений, локализации и других операций с датами.
✅Поддержка таймзон — через дополнение date-fns-tz.

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

👀 Посмотреть поближе

#js

👨‍💻 Tabler Icons — легковесные иконки для ваших проектов

Набор из более чем 4300 современных SVG-иконок с минималистичным дизайном. Они быстро загружаются, легко настраиваются по размеру, цвету и толщине линий, что делает их отличным выбором для использования в React, Vue и других фреймворках. Набор полностью бесплатный и подходит для коммерческих проектов. Благодаря Tabler Icons интерфейс становится более профессиональным, а интеграция занимает всего несколько минут.

👀 Посмотреть иконки

#web

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

❓Что такое архитектурный паттерн MVP?

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

Признаки презентера:
Двухсторонняя коммуникация с представлением;
Представление взаимодействует напрямую с презентером, путем вызова соответствующих функций или событий экземпляра презентера;
Презентер взаимодействует с View путем использования специального интерфейса, реализованного представлением;
Один экземпляр презентера связан с одним отображением.

Подробнее — раз, два, три, четыре

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

#web

Браузер для фронтенд-разработчиков

Polypane позволяет одновременно просматривать сайт на разных экранах, тестировать доступность и контрастность, синхронизировать скроллинг и клики между всеми экранами, поддерживает hot-reload для фреймворков вроде React и Vue, а также предоставляет данные по SEO и производительности.

👀 Потыкать браузер

#web

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

❓Расскажите про тег keygen

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

Подробнее — раз, два

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

#web

6 инструментов, которые облегчают работу веб-разработчику

BundlePhobia
Быстро оценивайте размер npm-пакетов, прежде чем добавлять их в проект. Поможет избежать перегрузки приложения лишними зависимостями и держать его быстрым.
👉 https://bundlephobia.com

Polypane
Браузер для веб-разработчиков с поддержкой всех экранов и устройств в одном окне. Отлично подходит для тестирования адаптивности и доступности.
👉 https://polypane.app

CSS Grid Generator
Легкий способ создать сложные макеты на CSS Grid за пару минут. Просто укажите нужное количество строк и столбцов — и код готов!
👉 https://cssgrid-generator.netlify.app

CodeSandbox
Онлайн-редактор для быстрого прототипирования на React, Vue, Angular и других фреймворках. Удобно для тестирования компонентов и мелких проектов.
👉 https://codesandbox.io

Sizzy
Браузер, заточенный под тестирование на множестве устройств одновременно. Идеален для кроссбраузерной проверки, поддерживает отладку и сразу показывает, как страница выглядит на разных экранах.
👉 https://sizzy.co

Can I Use
Быстро проверяйте поддержку фич HTML, CSS и JavaScript в разных браузерах. Прекрасный способ убедиться, что ваш код работает везде.
👉 https://caniuse.com

Каждый из этих инструментов экономит время и помогает создавать более качественные и производительные веб-приложения👨‍💻

#web

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

❓Что такое HTTPS?

HTTPS (HyperText Transfer Protocol Secure) — расширение протокола HTTP для поддержки шифрования в целях повышения безопасности. Данные в протоколе HTTPS передаются поверх криптографических протоколов SSL или TLS. В отличие от HTTP с TCP-портом 80, для HTTPS по умолчанию используется TCP-порт 443

Почитать подробнее

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

#web

Чистый код: фундаментальное руководство по JavaScript

Статья о принципах чистого кода с 10 примерами кода JS и TS, которые иллюстрируют принципы

👀 Посмотреть, почитать

#js

choose the plan

#hehe

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

❓Что такое canvas в HTML 5?

Это HTML элемент, использующийся для рисования графики средствами языков программирования (обычно это JavaScript). Он может, к примеру, использоваться для рисования графов, создания коллажей или простой (и не очень) анимации. Изображения в правой части статьи являются примерами использования , примеры их создания приводятся в этой статье.
Статья

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

#html

Продвинутые концепции языка JavaScript и ООП [2023]

Этот продвинутый курс по JavaScript охватывает ООП, асинхронность, Event Loop, модульность, структуры данных и сборку. Он требует базовых знаний JS, HTML и CSS.

👀 Глянуть курс

#js

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

❓Как можно оптимизировать загрузку внешних ресурсов на странице?

— Уменьшите количество HTTP-запросов
— Используйте поддомены для параллельного скачивания
— Используйте кэш браузера
— Используйте CDN для загрузки популярных JavaScript библиотек
— Используйте Gzip-сжатие

Почитать подробнее

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

#web

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

❓Что такое Virtual DOM? Как он работает?

Virtual DOM - это абстракция HTML DOM, которая выборочно отображает поддеревья узлов на основе изменений состояния. Он обеспечивает минимальное количество манипуляций с DOM, чтобы поддерживать ваши компоненты в актуальном состоянии.

Подробнее по теме: раз, два, три

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

#web

CSS Diner 🍽️

Для тренировки селекторов CSS идеален CSS Diner! Игра помогает разобраться в основах селекторов и понять, как выбирать элементы в DOM.

👀 Посмотреть или поиграть

#css

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

❓Что такое DOM?

Объектная Модель Документа (DOM) является программным интерфейсом для HTML, XML и SVG документов. Это обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может быть доступна для программы, для изменения структуры документа, его стиля и содержания. DOM обеспечивает представление документа в виде структурированной группы узлов и объектов, которые имеют свойства и методы. По сути, она связывает веб -страницы со скриптами или языками программирования.

DOM (Document Object Model — «объектная модель документа») — это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

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

#web

JavaScript 30 📆

Челлендж на 30 дней, где каждый день вы будете создавать небольшой проект, каждый из которых поможет отточить какой-то конкретный аспект JS.

Задания подойдут и для опытных, и для новичков

👀 Начать челлендж

#js

Основы TypeScript

TypeScript — это надстройка над JavaScript с поддержкой статической типизации, которая помогает сократить количество ошибок и повысить качество кода. В книге Адама Фримена «Основы TypeScript» (третье издание) подробно разобраны все возможности TypeScript 5, включая новые функции, такие как декораторы.

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

👀 Почитать книжку

#ts