🧰 Quill — современный редактор форматированного текста, который разработан для совместимости и расширяемости.

В версию 2.0.0, выпущенную на прошлой неделе, добавили много фич. Читайте подробнее в анонсе.

<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css"
  rel="stylesheet"
/>

<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br /></p>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>

<script>
  const quill = new Quill("#editor", {
    theme: "snow",
  });
</script>

🔗 GitHub & Сайт

⚒️ KeyUX — JavaScript-библиотека для улучшения UI управления клавиатурой веб-приложений.

Основная цель — не только обеспечение доступности (a11y), но и создание инструментов, где пользователи предпочитают использовать клавиатуру для управления.

👉 Ключевые фичи:

🔹 Добавление горячих клавиш с помощью aria-keyshortcuts
🔹 Отображение состояния :active кнопки при нажатии горячей клавиши
🔹 Навигация с помощью стрелок клавиатуры в списках с role="menu"
🔹 Переход к следующему разделу по aria-controls и возврат с помощью Esc
🔹 Возможность пользователям переопределять горячие клавиши
🔹 Размер 2KB и отсутствие зависимостей
🔹 Совместимость с любыми фреймворками

👩‍💻 GitHub

🔥 Frontend Developer/Engineer Handbook 2024

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

👉 Читать

📶Сложнейшая проблема компьютерных наук: центрирование

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

👉 Читать

🔥 Фича Popover API появилась во всех современных браузерах

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

👉 Подробнее

💡 Простой способ определения наличия в массиве повторяющихся элементов

#javascript #tip by Shripal Soni

👩‍💻 Миграция на React 19 с помощью ast-grep

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

Упростить этот процесс можно с помощью ast-grep — инструмента, предназначенного для поиска и замены шаблонов в вашей кодовой базе, для облегчения миграции на React 19.

📌 Автор сосредоточился на трех основных модах:

🔠 Использование <Context> в качестве провайдера.
🔠 Удаление неявного возврата коллбека ref.
🔠 Использование ref в качестве пропсов и удаление forwardRef.

💡 Простой способ упрощения CSS селекторов с использованием :where(): на заметку фронтенд-разработчику

#css #tip by Shripal Soni

Опубликованы все части руководства по Next.js 👉 https://yangx.top/frontendproglib/5100

Для эффективного изучения вы должны знать JavaScript и React, а также хотя бы поверхностно должны быть знакомы с Node.js.