👩‍💻 Cube & Dots Loader

Анимированная загрузка в виде точек и куба. Сделана на чистом CSS.

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

⚙️ В чем разница между == и === в JavaScript?

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

➡️ Пример:

console.log(5 == '5');   // true, так как '5' преобразуется к числу
console.log(5 === '5');  // false, так как разные типы данных

console.log(null == undefined);  // true, при нестрогом сравнении они считаются равными
console.log(null === undefined); // false, строгий оператор учитывает типы данных

🗣️ Использование === рекомендуется для избегания ошибок, связанных с преобразованием типов. Это помогает сделать код более предсказуемым и читаемым.

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

👩‍💻 CSS :has() — Псевдокласс, который давно ждали

Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов.

Читать...

👩‍💻 Простой калькулятор с динамическим вводом

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

Требования:

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

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

<div>
<input type="number" id="num1" placeholder="Введите первое число">
<select id="operation">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">×</option>
<option value="divide">÷</option>
</select>
<input type="number" id="num2" placeholder="Введите второе число">
</div>
<div>
<h3>Результат: <span id="result">0</span></h3>
</div>

const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const operation = document.getElementById('operation');
const result = document.getElementById('result');

function calculate() {
const value1 = parseFloat(num1.value) || 0;
const value2 = parseFloat(num2.value) || 0;

let res = 0;
switch (operation.value) {
case 'add':
res = value1 + value2;
break;
case 'subtract':
res = value1 - value2;
break;
case 'multiply':
res = value1 * value2;
break;
case 'divide':
res = value2 !== 0 ? value1 / value2 : 'Ошибка (деление на 0)';
break;
}

result.textContent = res;
}

[num1, num2, operation].forEach(element => {
element.addEventListener('input', calculate);
});

⚙️ Кнопки с несколькими состояниями

Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей.

Читать...

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

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

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

Читать...

JavaScript сегодня отмечает 30-летие 🎂

Именно 4 декабря 1995 года миру показали язык под знакомым нам названием — JavaScript.

❌ Вот история именинника:

• У языка было три имени за пару месяцев.
Сначала его назвали Mocha, потом переименовали в LiveScript, и только затем закрепилось финальное — JavaScript.

• К Java он почти не имеет отношения.
Название выбрали скорее как маркетинговый ход: в середине 90-х вокруг Java был мощный хайп, и на эту волну просто запрыгнули.

• JS слепили всего за 10 дней.
Брендан Эйх в бешеном темпе собрал первую версию, когда в Netscape решили: «нам срочно нужен язык для скриптов в браузере».

• Создатель языка успел стать CEO Mozilla — и быстро лишиться должности.
Из-за скандала вокруг его гомофобных взглядов Эйху пришлось уйти с поста, хотя имя JavaScript уже навсегда вписано в историю.

🎉 Поздравляем старичка, который до сих пор двигает весь веб.

⚙️ Что такое 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 Яндекс Карт. Оно удобно тем, что позволяет легко и быстро настраивать цвета и детальность карты, убирать или добавлять нужную информацию.

Читать...

🌎 Google не разрешает сотрудникам использовать свою же недавно выпущенную IDE Antigravity

И, видимо, не зря — реддитор рассказал, что ИИ-агент Antigravity случайно удалил весь его диск, пока пытался исправить баг:

«Я просматриваю журналы с предыдущего шага и с ужасом вижу, что команда, которую я выполнил для очистки кэша проекта (rmdir), по всей видимости, ошибочно указала на корень вашего диска D:, а не на конкретную папку проекта.
Мне очень, очень жаль.»

✖️ xCode Journal

👩‍💻 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"

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

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

Смотреть…

Критическая уязвимость в React Server Components (CVSS 10.0). Рекомендуется обновление

🚨 React-команда официально сообщила о серьёзной проблеме безопасности в React Server Components.
Уязвимость позволяет выполнить произвольный код на сервере без аутентификации — достаточно отправить специально сформированный HTTP-запрос.

Даже если вы не используете React Server Functions напрямую — вы всё равно можете быть уязвимы, если ваш проект поддерживает React Server Components.

Уязвимость получила идентификатор CVE-2025-55182, оценку CVSS 10.0, и затрагивает версии 19.0, 19.1.0, 19.1.1 и 19.2.0 следующих пакетов:

react-server-dom-webpack
react-server-dom-parcel
react-server-dom-turbopack

🔘Что делать прямо сейчас

Патч уже опубликован. Нужно обновиться на версии: 19.0.1, 19.1.2, 19.2.1.
Если ваш React-код вообще не работает на сервере, или вы не используете фреймворки/бандлеры с поддержкой RSC, то вы не затронуты.

Некоторые экосистемы зависели от уязвимых пакетов. В зоне риска:

Next.js
React Router (нестабильные RSC-API)
Waku
@parcel/rsc
@vitejs/plugin-rsc
Redwood SDK

Команда React работает с хостинг-провайдерами, и временные смягчения уже включены.
Но на них рассчитывать нельзя — обновляться всё равно нужно.

🔘В чём суть уязвимости

React Server Functions позволяют клиенту вызывать функции на сервере. На стороне клиента вызов превращается в HTTP-запрос, который React затем десериализует и мапит на вызов серверной функции.

Проблема — в том, как React декодирует payload от клиента.
Атакующий может создать вредоносный HTTP-запрос, который при десериализации приводит к удалённому выполнению кода.

Подробности раскроют позже, когда обновления будут полностью раскатаны.

🔘Инструкция по обновлению Next.js

Установите патч в рамках вашей версии:

npm install next@15.0.5
npm install next@15.1.9
npm install next@15.2.6
npm install next@15.3.6
npm install next@15.4.8
npm install next@15.5.7
npm install next@16.0.7

Если вы сидите на 14.3.0-canary.77 или выше — откатитесь на стабильную 14.x:

npm install next@14

React Router (нестабильные RSC API)

Обновите зависимости:

npm install react@latest
npm install react-dom@latest
npm install react-server-dom-parcel@latest
npm install react-server-dom-webpack@latest
npm install @vitejs/plugin-rsc@latest

Expo
См. changelog на expo.dev.

Redwood SDK
npm install rwsdk@latest
npm install react@latest react-dom@latest react-server-dom-webpack@latest

Waku
npm install react@latest react-dom@latest react-server-dom-webpack@latest waku@latest

Vite RSC
npm install react@latest react-dom@latest @vitejs/plugin-rsc@latest

Parcel RSC
npm install react@latest react-dom@latest react-server-dom-parcel@latest

Turbopack RSC
npm install react@latest react-dom@latest react-server-dom-turbopack@latest

Webpack RSC
npm install react@latest react-dom@latest react-server-dom-webpack@latest

📅 Таймлайн

29 ноября — уязвимость найденa и отправленa в Meta Bug Bounty.
30 ноября — Meta подтвердила и начала работать над фиксом с командой React.
1 декабря — фикc готов, идёт работа с хостингами и OSS-проекта́ми над валидацией и mitigations.
3 декабря — патч опубликован, уязвимость раскрыта публично.

📍 Ссылка на оригинал статьи...

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

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

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

• Основной цвет фона кнопки — синий (#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-noscript">Заголовок карточки</h3>
<p class="card-denoscription">Это краткое описание для карточки. Оно даёт представление о содержимом.</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-noscript {
margin: 16px;
font-size: 1.2em;
}

.card-denoscription {
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 подходит для адаптивного дизайна, когда размеры зависят от родителей.

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