CodeRoll | Frontend

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

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

👀 Посмотреть

Coderoll | Frontend

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

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

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

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

Coderoll | Frontend

Fuse.js

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

👀 Посмотреть

Coderoll | Frontend

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

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

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

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

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

Coderoll | Frontend

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

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

👀 Посмотреть

Coderoll | Frontend

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

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

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

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

Coderoll | Frontend

TsParticles

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

👀 Посмотреть

Coderoll | Frontend

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

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

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

Подробнее

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

#web

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

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

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

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

#js

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

❓Чем полезны 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

Codepip

Сборник мини-игр для изучения веб-технологий: Flexbox, Grid, CSS-анимации и многое другое.

👀 Потыкать игры

#тренажёры

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

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

— XHTML - это приложение XML, которое является довольно строгим языком с угловыми скобками.
— HTML - это приложение SGML, которое является гораздо менее строгим языком с угловой скобкой.
— (XML также является применением SGML.)

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

Правила XHTML следующие.
// Все теги и их атрибуты должны быть набраны в нижнем регистре (строчными символами).
// Значения любых атрибутов необходимо заключать в кавычки.
// Требуется закрывать все теги, даже такие, которым не сопоставлен закрывающий тег.
// Должна соблюдаться правильная вложенность тегов.
// Нельзя использовать сокращенные атрибуты тегов.
// Вместо атрибута name следует указывать id.
// Следует определять DTD (document type definition, описание типа документа) с помощью элемента DOCTYPE.

Подробнее с примерами: http://htmlbook.ru/xhtml/sintaksis-xhtml

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

Тренируем регулярки на Regex101

На Regex101 вы сможете тестировать регулярные выражения в реальном времени, разбирать их структуру с подробными объяснениями каждой части, а также находить и исправлять ошибки благодаря встроенным подсказкам. Ресурс поддерживает синтаксисы для популярных языков программирования, таких как JavaScript, Python и PHP, и позволяет легко проверять ваши регулярки на примерах. Это идеальный инструмент как для новичков, так и для опытных разработчиков, желающих упростить работу с текстовыми шаблонами.

👀 Перейти к сервису

#тренажёр

Recharts: простая визуализация данных для React 👩‍💻

Recharts — библиотека, которая поможет добавить графики и диаграммы в ваш проект. Легко подключается, настраивается и отлично работает с React. Хотите показать тренды, сравнить показатели или сделать крутой аналитический дашборд? С этой библиотекой всё это можно сделать за пару строк кода. Выбирайте линейные графики, круговые диаграммы, гистограммы или что-то своё.

👀 Посмотреть библиотеку

#инструменты

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

❓Что такое Secure ("безопасные") и HttpOnly cookies?

"Безопасные" (secure) cookie отсылаются на сервер только если запрос выполняется по протоколу SSL и HTTPS. Однако важные данные никогда не следует передавать или хранить в cookies, поскольку сам их механизм весьма уязвим в отношении безопасности, а флаг secure никакого дополнительного шифрования или средств защиты не обеспечивает. Начиная с Chrome 52 and Firefox 52, незащищенные сайты (http:) не могут создавать куки с флагом secure.

Куки HTTPonly не доступны из JavaScript через свойства Document.cookie, и через XMLHttpRequest и Request API, что помогает избежать межсайтового скриптинга (XSS). Устанавливайте этот флаг для тех cookie, к которым не требуется обращаться через JavaScript. В частности, если куки используются только для поддержки сеанса, то в JavaScript они не нужны, так что в этом случае следует устанавливать флаг HttpOnly.

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

➡️Подробнее

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

#web

Что такое атрибут key? Для чего он нужен?

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

Key всегда должен присваивается на верхнем уровне:

Правильно:

const howUseKey = () => {
  const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
};

Неправильно (Приглядитесь к its a trap):

const howNotUseKey = () => { 
 const array = [1, 2, 3];
  return (
    <div>
      {array.map((item) => (
        <div className="its a trap">
          <div key={item}>{item}</div>
        </div>
      ))}
    </div>
  );
};

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

Более подробно про key можете прочитать здесь

Библиотека, которая добавит классные проф анимации в проект 🚀

Motion (она же бывшая Framer Motion) — мощная библиотека для создания анимаций в React и других экосистемах.

Что делает её уникальной:

— Простота использования: можно добавить сложные анимации в пару строк кода.

— Гибкость: поддерживает кастомизацию для любых сценариев.

— Производительность: создана для плавной работы даже в сложных интерфейсах.

— Недавно Framer Motion стал независимым проектом под названием Motion и теперь доступен не только для React, но и для других платформ, включая Vanilla JS и Vue.

👀 Посмотреть-потыкать

#инструменты

🎨 Дизайн-системы: Создание масштабируемых UI-компонентов

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

1) Консистентность
Использование единого стиля и компонентов улучшает восприятие бренда и упрощает разработку.

2) Масштабируемость
Дизайн-системы позволяют легко добавлять новые элементы и поддерживать большие проекты.
3)Ускорение разработки

Готовые компоненты и шаблоны сокращают время разработки и тестирования.

Как создать дизайн-систему?

Определите основные элементы
Начните с типографики, цветовой палитры, сетки и базовых компонентов (кнопки, формы и т.д.).

Создайте библиотеку компонентов
Используйте инструменты, такие как Storybook или Figma, для документирования и визуализации компонентов.

Интегрируйте в проект
Реализуйте компоненты в коде с использованием React или других фреймворков, сохраняя их универсальность и настраиваемость.


💡 Полезные ресурсы:
Storybook Documentation
Atomic Design by Brad Frost


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

Оптимизация изображений 👀

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

🛠 Инструменты:
TinyPNG https://tinypng.com
Сжимает PNG и JPEG без заметной потери качества.

Squoosh https://https://squoosh.app/
От Google, позволяет настроить степень сжатия и получить максимальную гибкость.

ImageOptim https://imageoptim.com/mac
Для пользователей macOS — оптимизирует изображения прямо на устройстве.

Avif.io https://avif.io
Конвертация изображений в современный формат AVIF с минимальным весом.

📌 Советы:

Используйте векторные изображения (SVG) для иконок и простых графиков.

Настраивайте атрибуты width и height, чтобы избежать смещения при загрузке.

Загружайте изображения в разных разрешениях и используйте srcset для адаптивности.

#инструменты

Hero Patterns

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

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

#front