👩‍💻 Тест по CSS

Какой цвет будет у текста в элементе <p>, если у родителя <div> установлен цвет color: red;, а у самого элемента <p> указано свойство color: inherit;?

<div style="color: red;">
  <p style="color: inherit;">Текст</p>
</div>

👩‍💻 Как прослушивать несколько событий в веб-компоненте

Сегодня поговорим о том, как использовать handleEvent() для обработки нескольких типов событий.

Читать...

➡️ Руководство по Convex. Часть 1

В этой серии статей я рассказываю о Convex — новом открытом и бесплатном решении BaaS (Backend as a Service — бэкенд как услуга), которое выглядит очень многообещающе и быстро набирает популярность среди разработчиков.

Читать...

👩‍💻 On-Scroll Fire Transition

Красивая анимация горения страницы при скролле. Сделана на CSS и JavaScript.

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

👩‍💻 Как использовать менеджер состояний NgRx для Angular-проектов

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

Читать...

👩‍💻 Что нового в Chrome 130?

В статье рассказывается о нововведениях в Chrome 130: улучшенные возможности управления окнами "picture-in-picture", вложенные объявления в CSS для сложных случаев и настройка декораций для элементов в несколько строк.

Читать...

👩‍💻 Современные тренды CSS: эволюция функций

Рабочая группа CSS выпустила новый модуль Values and Units Level 5: меньше кода, больше возможностей – звучит как мечта? Давайте вместе разберемся, как эти новшества изменят нашу работу и сделают веб красивее.

Читать...

➡️ 6 полезных фронтенд-приемов, о которых вы, возможно, не знаете

Небольшая подборка малоизвестных техник для HTML, CSS и JavaScript.

Читать...

👩‍💻 Реализация рекурсивного объединения объектов

Напишите функцию mergeDeep, которая рекурсивно объединяет два объекта. Если свойства обоих объектов являются объектами, их нужно объединить. При конфликте значений свойства второго объекта перезаписывают значения первого.

Пример кода:

const obj1 = { name: "Alice", info: { age: 25 } };
const obj2 = { info: { age: 30, city: "NY" } };

const merged = mergeDeep(obj1, obj2);
console.log(merged);  // { name: "Alice", info: { age: 30, city: "NY" } }

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

function mergeDeep(obj1, obj2) {
const result = { ...obj1 };
for (let key in obj2) {
if (obj2[key] && typeof obj2[key] === 'object') {
result[key] = mergeDeep(result[key], obj2[key]);
} else {
result[key] = obj2[key];
}
}
return result;
}

👩‍💻 8 неэффективных практик JavaScript, которых лучше избегать

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

Читать...

👩‍💻 Автоматическая караоке-система на основе React и Vercel

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

Читать...

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

Apache Superset — популярный инструмент для визуализации данных с открытым кодом. Но при его использовании можно столкнуться с ограничениями. В статье обсуждается, как с помощью шаблонов Handlebars и Jinja решать эти проблемы, включая интеграцию web-верстки в дашборды и обход ограничений системы.

Читать...

👩‍💻 Сложение строк, представляющих большие числа

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

Пример:

sumStrings('123', '456'); // => '579'
sumStrings('999999999999999999', '1'); // => '1000000000000000000'

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

function sumStrings(a, b) {
let carry = 0, result = '';
a = a.padStart(Math.max(a.length, b.length), '0');
b = b.padStart(Math.max(a.length, b.length), '0');

for (let i = a.length - 1; i >= 0; i--) {
let sum = parseInt(a[i]) + parseInt(b[i]) + carry;
carry = Math.floor(sum / 10);
result = (sum % 10) + result;
}

if (carry) result = carry + result;
return result.replace(/^0+/, '');
}

🔎 Подборка вакансий для джунов

Frontend-разработчик / верстальщик (стажер, junior)
🟢Bootstrap SASS БЭМ React/Vue REST-бекенд
🟢от 40 000 до 80 000 ₽ | Без опыта

Верстальщик / Junior Frontend-разработчик
🟢HTML CSS JavaScript БЭМ CMS
🟢от 40 000 до 70 000 ₽ | Без опыта

Верстальщик HTML (Junior Frontend)
🟢HTML5 CSS3 SASS REST ES6 Webpack gulp JS jQuery
🟢до 45 000 ₽ | 1–3 года

HTML верстальщик / Junior Frontend разработчик
🟢HTML5 CSS3 JS PHP
🟢от 45 000 ₽ | 1–3 года

Разработчик веб-приложений / фронтенд / верстальщик HTML (Junior)
🟢HTML5 CSS3
🟢от 40 000 ₽ | Без опыта

👩‍💻 Very cool animated text

Интересная анимация спирального текста. Сделана на CSS и JavaScript.

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

👩‍💻 Что такое замыкания (closures) в JavaScript?

Замыкания позволяют функции запоминать переменные из своей внешней области видимости даже после завершения выполнения внешней функции.

function makeCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

🗣️ Замыкания полезны для создания функций с внутренним состоянием, например, счётчиков или настройки приватных данных.

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

🔎 Подборка вакансий для мидлов

HTML-верстальщик
🟢JavaScript, HTML, CSS, Photoshop
🟢от 250 до 250 $ | Без опыта

Frontend разработчик - верстальщик (HTML CSS)
🟢HTML5, CSS, JS, React.js / Vue.js, БЭМ
🟢от 60 000 до 100 000 ₽ | 1–3 года

Frontend-разработчик / верстальщик (Тула)
🟢HTML5 (PUG), CSS3 (SCSS/LESS), ES6, Vue.js, Nuxt.js, Git, Docker, Gitlab CI/CD, Webpack, Vite
🟢от 70 000 до 100 000 ₽ | 1–3 года

Web программист Битрикс, Bitrix24
🟢PHP, MySQL, API 1C-Bitrix, HTML, CSS, Javascipt + jQuery
🟢от 130 000 ₽ | 1–3 года

HTML-верстальщик / Junior Frontend-разработчик
🟢JavaScript, HTML5, Flex, CSS3, Git
🟢от 45 000 ₽ | Без опыта

👩‍💻 React и FormData

Узнайте о новейшем и одновременно старейшем стандарте React для доступа к данным формы, а также о том, как использовать его с TypeScript.

Читать...

👩‍💻 Функция задержки выполнения

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

Пример кода:

log('Hello');  // Вызовется сразу
log('World');  // Игнорируется, т.к. прошло меньше 1000ms

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

function throttle(func, delay) {
let lastCall = 0;
return function(...args) {
const now = new Date().getTime();
if (now - lastCall >= delay) {
lastCall = now;
return func(...args);
}
};
}

// Примеры использования
const log = throttle(console.log, 1000);

log('Hello'); // Вызовется сразу
log('World'); // Игнорируется, т.к. прошло меньше 1000ms
setTimeout(() => log('Again'), 1500); // Вызовется через 1.5 секунды

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

• HMPL — лучшая альтернатива HTMX

• Как я получил 50000 + 0 долларов за уязвимость в Zendesk

• Неизвестно полезный CSS. Часть 5

• База, которую нужно знать про JSON Schema

• Магия CSS на практике: советы по вёрстке от гика. Часть 5