Псевдоэлемент ::marker работает только на элементах списка.
💡 Для обратной совместимости с CSS 2 браузеры позволяют писать некоторые псевдоэлементы с одним двоеточием, например: ::before, ::after, ::first-letter, ::first-line.
⚠️ Однако псевдоэлемент ::marker необходимо указывать с двумя двоеточиями.
⚡️Mocha — Поддерживает асинхронное тестирование, обладает богатым набором функций для описания тестовых сценариев.
🔵Гибкость в написании тестов. Mocha позволяет разработчикам использовать любую библиотеку утверждений, что делает его гибким для различных стилей тестирования. 🔵Поддержка асинхронного тестирования. Эффективно работает с асинхронным кодом, облегчая тестирование в современных JavaScript-приложениях. 🔵Широкий функционал. Предлагает множество удобных функций для описания и группирования тестов, что облегчает организацию тестовых сценариев.
🔵Требует долгой настройки перед началом использования, что может быть непросто для новичков. ➡️Сайт
Тернарный оператор работает с тремя операндами: одним условием и двумя выражениями. Возвращает первое выражение, если условие истинно и второе, если условие ложно.
Используется как компактная замена условного оператора if...else.
const num = 5 console.log(num === 5 ? 'Пять' : 'Не пять') // Пять
➡️Обьяснение:
(A) ? (B) : (C)
Где A — условие, B — первое выражение, C — второе выражение.
Если первый операнд A вычисляется в истинное выражение true, то оператор вернёт выражение B. Если в false — вернёт выражение C.
💡Внутри одного тернарного оператора можно написать другой:
const num = 10 const result = num > 10 ? 'Число больше 10' : num === 10 ? 'Число равно 10' : 'Число меньше 10' console.log(result) // 'Число равно 10'
В этом случае запись идентична использованию конструкций if...else if ... else. Сначала проверяется первое условие, если оно ложно, то проверяется второе и так далее.
🗣️ Отступы в примере проставлены для лучшей читаемости конструкции, они не влияют на выполнение кода.
⚡️Komodo IDE — IDE для веб-разработки, которая поддерживает девять языков для фронтенд- и бэкенд-разработки.
🔵Простота и удобство. Понятный интерфейс, который облегчает работу с веб-страницами, HTML-рассылками и другими веб-ресурсами. 🔵Удобные функции отладки. Предлагает простые и эффективные инструменты для отладки в режиме онлайн. 🔵Легкость навигации. Предоставляет легкий доступ ко всем функциям, делая использование программы интуитивно понятным. 🔵Мощный редактор с функциями автозаполнения и рефакторинга. Это облегчает и ускоряет процесс разработки, а также снижает вероятность допустить ошибку.
🔵Временами может тормозить. В особенности это заметно при автозаполнении кода в Python с множеством возможных вариантов. 🔵Порой требуется перезапуск для обновления символов. Это может быть неудобно при работе над крупными проектами. 🔵Сервис платный. ➡️Сайт
Селекторы по атрибутам в CSS — это мощный инструмент для стилизации элементов на основе наличия или значений атрибутов. Они позволяют сделать стили более гибкими и динамичными.
➡️Основные виды:
🟠[attribute]: применяет стиль к элементам с указанным атрибутом. Например:
[disabled] { opacity: 0.5; }
🟠[attribute="value"]: стилизует элементы с определённым значением атрибута:
[type="text"] { border: 1px solid blue; }
🟠Частичные совпадения: [attribute^="value"] — начинается с, [attribute$="value"] — заканчивается на, [attribute*="value"] — содержит.
✔️ Пример использования:
[href^="https"] { color: green; }
Этот код применит зелёный цвет ко всем ссылкам, начинающимся с https.
⚡️QUnit — Библиотека JavaScript для модульного тестирования, предоставляющая функции для организации и выполнения тестов в веб-браузерах и Node.js.
🔵Простота и удобство. У QUnit простой и интуитивно понятный интерфейс. Он подойдет даже для новичков в тестировании. 🔵Идеально подходит для jQuery. QUnit был разработан для тестирования кода jQuery, что делает его идеальным выбором для проектов, использующих эту библиотеку. 🔵Поддержка синхронных и асинхронных тестов. QUnit позволяет тестировать как синхронный, так и асинхронный JavaScript-код.
🔵Фокус на модульных тестах. QUnit в основном ориентирован на модульное тестирование, что может быть недостаточно для комплексного тестирования приложений. ➡️Сайт
API — это инструмент, который помогает разным программам и сервисам "общаться" друг с другом. Это важно для разработки на фронтенде, где нужно интегрировать клиент с сервером.
➡️ Существует три основных типа API: REST,SOAP и RPC. REST — самый популярный, удобный и гибкий. SOAP используется в крупных проектах благодаря строгим стандартам, а RPC — для сложных вычислительных задач.
🗣️ API помогает разработчикам создавать более мощные и гибкие приложения, оптимизируя взаимодействие между системами.
Это красивая и простая в использовании библиотека компонентов для Tailwind CSS. Но она не похожа на типичные библиотеки компонентов, Material UI или Mantine UI. Вместо набора компонентов Daisy UI предоставляет набор классов-утилит, которые вы можете использовать для создания своих компонентов, например, btn, btn-primary, modal, modal-box и т. д.
✔️Установка
В вашем проекте должен быть установлен Tailwind CSS. Вы можете использовать его с любым JavaScript-фреймворком или просто с ванильным HTML.
⚡️Brackets — Бесплатный и открытый инструмент, оптимизированный для веб-разработки.
✔️Плюсы
🔵Live preview. Главная фишка Brackets — возможность видеть изменения в реальном времени в браузере, что делает процесс разработки понятнее. 🔵Поддержка нескольких языков. Идеально подходит для работы с HTML, CSS и JavaScript, что делает его отличным выбором для фронтенд-разработчиков. 🔵Расширения и плагины. Поддержка разнообразных расширений и плагинов позволяет пользователям настраивать редактор под свои нужды. 🔵Простой и удобный интерфейс. У Brackets чистый, минималистичный интерфейс, что облегчает работу с кодом. 🔵Бесплатный и открытый исходный код. Brackets доступен бесплатно, и его исходный код открыт для сообщества.
❌Минусы
🔵Низкая производительность. В некоторых случаях Brackets может быть медленнее по сравнению с другими редакторами кода, особенно при работе с большими файлами. 🔵Редкий выход обновлений. Не обновляется так же часто, как некоторые другие редакторы, что может замедлять внедрение новых функций и исправление ошибок. ➡️Сайт
Кроме примитивных типов в JavaScript существуют и сложные — например, объект.
🗣️Объект (object) — это набор свойств. Каждое свойство состоит из названия и значения. Название может быть строкой или символом, а значение может быть любым.
➡️ Объекты в JavaScript используются повсюду, особенно для хранения данных. Для уверенной работы с объектами необходимо знать, как создавать объект, как его изменять и как читать значения свойств.
Пустой объект без свойств можно создать парой фигурных скобок:
const cat = {}
✔️ Когда нужно создать объект со свойствами, то их описывают внутри фигурных скобок. Свойства указываются в формате имяСвойства : значение, между свойствами ставится запятая:
const book = { title: 'Война и мир', author: 'Лев Толстой', pages: 1274, isFinished: true }
⚡️Trigger.dev – открытая библиотека для создания и управления долгосрочными задачами прямо в вашем приложении.
Поддерживает множество фреймворков – Next.js, Remix, Astro, Nest.js, Nuxt и так далее. Trigger.dev позволяет создавать задачи, которые выполняются в фоновом режиме и не требуют постоянного подключения к серверу. Это особенно полезно для задач, которые могут занимать много времени (обработка больших объемов данных, выполнение сложных вычислений или взаимодействие с внешними API).
⚙️Trigger.dev предлагает три способа управления – веб-хуки, расписание и события:
• Расписание идеально подходит для периодических задач. • События активируют задание при отправке полезной нагрузки. • Веб-хуки активируют задания в реальном времени при возникновении определенных событий.
✔️Главное преимущество: библиотека позволяет интегрировать различные сервисы и выполнять автоматизированные действия при возникновении определенных событий. 👩💻GitHub
Универсальный селектор * соответствует абсолютно любому тегу, но не включает псевдоэлементы, вроде ::before и ::after.
➡️Как пишется
Универсальный селектор очень удобен, если какие-то свойства нужно применить ко всем элементам на сайте.
Некоторые используют универсальный селектор для изменения алгоритма расчёта размеров элементов перед началом вёрстки:
* { box-sizing: border-box; }
⚠️ Учитывайте, что это CSS-правило не будет иметь влияния на псевдоэлементы. Алгоритм расчёта нужно будет менять точечно. Или дополнить селектор, упомянув в нём ::before и ::after:
⚡️Chart.js – популярная JavaScript-библиотека для создания всевозможных интерактивных и визуально привлекательных графиков и диаграмм.
С помощью Chart.js можно легко и быстро выводить линейные и контурные графики, столбчатые и круговые диаграммы и так далее.
✔️Главное преимущество: Chart.js позволяет создавать смешанные графики, объединяя несколько типов графиков и диаграмм на одном холсте, и отлично подходит для визуализации больших объемов данных.
