👩‍💻 Как использовать менеджер состояний 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

👩‍💻 Neuro Noise (GLSL Shader)

Интерактивный фон с эффектом при перемещении курсора. Сделан на CSS и JavaScript.

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

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

Верстальщик Webflow и Tilda
🟢HTML, CSS, JavaScript, Figma
🟢Уровень дохода не указан | 3–6 лет

Senior HTML-верстальщик
🟢HTML5, Figma, Photoshop, jQuery, JavaScript
🟢от 70 000 до 90 000 ₽ | 3–6 лет

Графический дизайнер-верстальщик
🟢Photoshop
🟢от 150 000 до 250 000 ₽ | 3–6 лет

Дизайнер-верстальщик (гибрид)
🟢inDesign, Illustrator, Photoshop
🟢от 90 000 ₽ | 3–6 лет

Senior Frontend Developer (Vue.JS)
🟢Vue3, TypeScript, Git
🟢от 90 000 ₽ | Более 6 лет

📈 Подборка статей для вашей карьеры

• Названия должностей разработчиков почти потеряли свой смысл

• Три рецидива синдрома самозванца: из историка в системного аналитика

• 10 не самых очевидных причин, чтобы уволиться

• ИТ-пенсионеры и где они обитают

• Пресловутые софтскилы и карьера в IT

⚙️ Паттерн «Бэкенд для фронтенда»: преимущества, недостатки и лучшие практики для реализации

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

Читать...

⚙️ Как работает свойство z-index в CSS?

z-index управляет тем, как элементы накладываются друг на друга в трёхмерном пространстве веб-страницы. Элементы с большим значением z-index будут отображаться поверх тех, у которых значение меньше.

➡️ В этом примере элемент с z-index: 2 будет отображаться поверх элемента с z-index: 1:

.element1 {
  position: relative;
  z-index: 1;
}

.element2 {
  position: relative;
  z-index: 2;
}

🗣 Важно помнить, что свойство z-index работает только с элементами, у которых установлено позиционирование (position: relative, absolute, fixed или sticky).

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