⚙️ 9 open source библиотек для вашего следующего проекта

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

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

Читать...

⚙️ Что такое AbortController в JavaScript и зачем он используется?

AbortController — это API, который позволяет отменять асинхронные операции, такие как запросы fetch. Это полезно для предотвращения утечек ресурсов и отмены операций, которые больше не нужны.

➡️ Пример:

const controller = new AbortController();
const signal = controller.signal;

// Отправляем запрос с возможностью отмены
fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос был отменён');
    } else {
      console.error(err);
    }
  });

// Отмена запроса через 500 мс
setTimeout(() => controller.abort(), 500);

🗣️ В этом примере AbortController отменяет запрос через 500 мс. Это позволяет избежать обработки ненужных данных, если, например, пользователь покинул страницу или отменил действие.

🖥 Подробнее тут

🤔 Разбираемся с цветами: пространства, иллюзии и квантование

Статья исследует природу цвета, его восприятие и обработку. Рассмотрим дискретизацию, цветовые модели, пространство и причины несоответствия при передаче изображений. Узнайте, что скрывается за HEX-кодами.

Читать...

🎯 Ставь цели на день через "3 приоритета"

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

👉 Совет: каждое утро выделяй три главных задачи на день — именно те, что реально сдвинут твои дела вперёд. Всё остальное — бонусы. Такая простая фокусировка помогает делать важное, а не тонуть в рутине.

👩‍💻 Реализация интерактивной карты

Наглядный пример того, как с помощью JS API можно создавать нестандартные интерактивные карты. Яндекс Еда опубликовала исследование самых характерных блюд в городах в России и для визуализации использовала решение от API Яндекс Карт. Оно удобно тем, что позволяет легко и быстро настраивать цвета и детальность карты, убирать или добавлять нужную информацию.

Читать...

📝 HTML <dialog> — нативные модальные окна без использования JS

Модальные окна — один из самых популярных элементов интерфейса, с которым часто приходится работать на фронтенде. Раньше, чтобы реализовать модалку, нам приходилось подключать внешние библиотеки или писать кастомные решения. Но в HTML5 появилась нативная поддержка модальных окон через <dialog>, что значительно упрощает задачу.

❌ Как было раньше:

<div class="modal hidden">
<p>Привет!</p>
<button onclick="closeModal()">Закрыть</button>
</div>

<style>
.hidden { display: none; }
</style>

<script>
// Какой то JS код
</script>

➕ Как стало с <dialog>:

<dialog id="myDialog">
<p>Привет!</p>
<button onclick="myDialog.close()">Закрыть</button>
</dialog>

<button onclick="myDialog.showModal()">Открыть</button>

Для реализации модальных окон часто использовался обычный <div> с добавлением классов для отображения и скрытия, а также JavaScript для управления этим процессом. Чтобы скрыть или показать модалку, нужно было вручную изменять стили или использовать JS-функции.

ℹ️ Как <dialog> упрощает работу и где полезно:

— .showModal(): открывает модалку
— .close(): закрывает модалку
— Улучшение доступности: <dialog> уже дружит с screen readers
— Браузер сам обрабатывает фон и клавишу Esc для закрытия окна
— Модальные окна (уведомления, формы, подтверждения)
— Быстрые прототипы без лишнего JS

📌 Если вам не нужно сложное оформление и анимации, то <dialog> идеально подходит для реализации модальных окон с минимальными усилиями. Код при этом минималистичен. Конечно, для более сложных задач и дизайнов без дополнительных стилей и JavaScript не обойтись, но для простых задач пойдет.

🚪 Frontender's notes

👩‍💻 Remove anchor from URL

Завершите функцию/метод так, чтобы он возвращал URL с чем-либо после удаления привязки (#).

Пример кода:

"www.codewars.com#about" --> "www.codewars.com"
"www.codewars.com?page=1" -->"www.codewars.com?page=1"

Решение задачи🔽

function removeUrlAnchor(url) {
return url.split('#')[0];
}

// Примеры использования
console.log(removeUrlAnchor("www.codewars.com#about")); // "www.codewars.com"
console.log(removeUrlAnchor("www.codewars.com?page=1")); // "www.codewars.com?page=1"

Supply Chain атака на npm: Shai-Hulud — угроза, которая заражает проекты

Недавняя атака на экосистему npm под названием Shai-Hulud привлекла внимание разработчиков по всему миру. Это масштабная supply chain атака, которая затронула более 500 пакетов, включая популярные библиотеки, такие как ngx-toastr, tinycolor, react-jsonschema-form-extras и пакеты от CrowdStrike.

❌ Заражённые пакеты содержат вредоносный скрипт bundle.js. Этот скрипт запускает TruffleHog для поиска секретных данных, таких как GitHub токены, NPM ключи или AWS креды, и отправляет их на внешний сервер. Дополнительно создаётся вредоносный workflow в папке .github/workflows, который будет автоматически запускаться при каждом CI-процессе. В итоге, атака действует как червь, распространяясь через каждый новый пакет, заражая downstream-проекты.

ℹ️ Что делать разработчикам

• Проверить проекты на наличие заражённых версий пакетов
• Ротировать npm-токены, GitHub PAT и облачные креды, чтобы минимизировать последствия
• Аудитировать CI/CD конфигурации для выявления подозрительных изменений
• Обновлять пакеты только из доверенных источников, избегать использования сомнительных версий

📌 Supply chain атаки становятся всё более изощрёнными и опасными. Ранее мы переживали только за typosquatting, а теперь столкнулись с реальными «npm-червями», которые могут заразить проекты на всех уровнях. Если вы работаете с публичными пакетами, регулярный аудит зависимостей и CI/CD — теперь часть обязательной практики.

🚪 Frontender's notes

👩‍💻 CSS единицы измерения: lh и rlh

Изучение новых относительных единиц измерения CSS основанных на высоте строки и позволяющих отказаться от угадывания вертикального ритма.

Смотреть…

👩‍💻 Стилизация кнопки с эффектом наведения

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

Ожидаемое поведение:

• Основной цвет фона кнопки — синий (#007BFF).
• При наведении цвет фона становится темно-синим (#0056b3), добавляется тень, и кнопка слегка увеличивается.

Решение задачи🔽

<button class="styled-button">Нажми меня</button>

.styled-button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.styled-button:hover {
background-color: #0056b3;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}

🔝 Самые интересные статьи за последние дни:

• Отладка и мониторинг в MobX: trace, introspection и spy

• Пара шаблонов кастомизированных элементов Handlebars для Apache Superset — 2

• PHP и Laravel дайджест новостей за октябрь 2024 года

• Битва титанов: натив, кроссплатформа и PWA – ищем плюсы и минусы на каждом этапе разработки

• Внедрение методики решения проблем 8D на производственном предприятии в виде SRM/ERP-систем/Часть 1

👩‍💻 Проблема с new URL(), и как URL.parse() её решает

Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна.

Читать...

👩‍💻 Создание карточки с изображением и текстом

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

Ожидаемое поведение:

• Изображение находится в верхней части карточки.
• Под изображением — заголовок и краткое описание.
• Карточка при наведении увеличивается и добавляет лёгкую тень.

Решение задачи🔽

<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Card Image" class="card-img">
<h3 class="card-title">Заголовок карточки</h3>
<p class="card-description">Это краткое описание для карточки. Оно даёт представление о содержимом.</p>
</div>


.card {
width: 300px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-img {
width: 100%;
height: auto;
}

.card-title {
margin: 16px;
font-size: 1.2em;
}

.card-description {
margin: 0 16px 16px;
font-size: 0.9em;
color: #555;
}

👩‍💻 Dropdown Menu Effects

Анимированное выпадающее меню с переливающимся эффектом. Сделано на SCSS и TypeScript.

Открыть код...

👩‍💻 В чем разница между em и rem в CSS?

В CSS em и rem — это относительные единицы измерения, используемые для задания размеров шрифтов, отступов, полей и других стилей. em основывается на размере шрифта родителя, тогда как rem ориентирован на размер шрифта корневого элемента (html), что делает его предсказуемым и удобным для масштабирования.

➡️ Пример:

html {
  font-size: 16px; /* Базовый размер шрифта */
}

.container {
  font-size: 2em; /* 32px, основывается на размере родителя */
  margin: 1rem;   /* 16px, независимо от родителя */
}

🗣️ Использование rem помогает сохранить консистентность размеров при вложенных элементах, а em подходит для адаптивного дизайна, когда размеры зависят от родителей.

🖥 Подробнее тут

⚙️ Напоминание, что scope и блоки стилей HTML — это мощное сочетание

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

Читать...

👩‍💻 Создание адаптивного круга с текстом по центру

Создайте круглый элемент с текстом по центру. Круг должен адаптироваться под размер экрана: на больших экранах его размер — 200px, на планшетах — 150px, а на мобильных устройствах — 100px.

Ожидаемое поведение:

• Круглый элемент с текстом по центру.
• Размер круга меняется в зависимости от ширины экрана.

Решение задачи🔽

<div class="circle">Текст</div>

.circle {
display: flex;
align-items: center;
justify-content: center;
background-color: #4CAF50;
color: white;
border-radius: 50%;
text-align: center;
font-size: 1.2em;
}

/* Размер для больших экранов */
@media (min-width: 1024px) {
.circle {
width: 200px;
height: 200px;
}
}

/* Размер для планшетов */
@media (min-width: 768px) and (max-width: 1023px) {
.circle {
width: 150px;
height: 150px;
}
}

/* Размер для мобильных устройств */
@media (max-width: 767px) {
.circle {
width: 100px;
height: 100px;
}
}

👩‍💻 Шорткаты VS Code, с которыми ввод кода напоминает игру на пианино

Застряли в замкнутом круге "клавитура-мышка", из-за которого устаете и теряете время при написании кода? Представляем вашему вниманию полезные шорткаты VS Code, которые избавят от этих проблем.

Читать...

👩‍💻 Сравнение способов отрисовки спрайтов в canvas

Статья описывает исследование различных методов отрисовки изображений в HTML5 Canvas для браузерных игр с мультиплеером. Автор делится находками по оптимизации производительности, основанными на проекте для курсовой.

Читать...

👩‍💻 CSS Веерное раскрытие с grid и @property

Анимация веерное раскрытие подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания. Используя CSS grid, мы избавляемся от лишней работы по позиционированию.

Читать...

👩‍💻 Всё ли ты знаешь о работе с асинхронностью?

Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину.

Читать...