👀 От живых гайдлайнов к Documentation as Code. Как изменилась документация во фронтенд-разработке

Статья анализирует изменения в подходах к документированию фронтенд-проектов за последние пять лет. Рассматриваются новые инструменты и методы, которые сделали процесс создания и поддержки документации более эффективным.

Читать...

👩‍💻 Динамическое создание списка задач

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

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

• Введите текст задачи в поле ввода и нажмите кнопку "Добавить".
• Задача появляется в списке ниже с кнопкой "Удалить" рядом с ней.
• Нажатие на кнопку "Удалить" удаляет соответствующую задачу из списка.

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

<div>
<input type="text" id="taskInput" placeholder="Введите задачу">
<button id="addTaskButton">Добавить</button>
</div>
<ul id="taskList"></ul>

const taskInput = document.getElementById('taskInput');
const addTaskButton = document.getElementById('addTaskButton');
const taskList = document.getElementById('taskList');

addTaskButton.addEventListener('click', () => {
const taskText = taskInput.value.trim();
if (taskText === '') return; // Не добавляем пустую задачу

const li = document.createElement('li');
li.textContent = taskText;

const deleteButton = document.createElement('button');
deleteButton.textContent = 'Удалить';
deleteButton.style.marginLeft = '10px';
deleteButton.addEventListener('click', () => li.remove());

li.appendChild(deleteButton);
taskList.appendChild(li);

taskInput.value = ''; // Очищаем поле ввода
});

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

• Почему я не готовлюсь к алгоритмическому интервью

• 7 популярных библиотек Vue 3 UI-компонентов, которые заслуживают внимания

• Жаркий спор по теме Masonry в CSS

• Разница между ранним и поздним связыванием

• Расширения VSCode для комфортной работы с проектами

👩‍💻 HTML элемент search

HTML-элемент search — это контейнер, представляющий части веб-страницы с функциональностью поиска.

Читать…

👩‍💻 Find the missing letter

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

Вы всегда получите действительный массив. И в нем всегда будет отсутствовать ровно одна буква. Длина массива всегда будет составлять не менее 2.

Пример кода:

['a','b','c','d','f'] -> 'e'
['O','Q','R','S'] -> 'P'

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

function findMissingLetter(array) {
for (let i = 0; i < array.length - 1; i++) {
// Если разница в кодах символов между текущей и следующей буквой больше 1
if (array[i].charCodeAt(0) + 1 !== array[i + 1].charCodeAt(0)) {
// Возвращаем пропущенную букву
return String.fromCharCode(array[i].charCodeAt(0) + 1);
}
}
throw new Error("No missing letter found");
}

// Примеры использования:
console.log(findMissingLetter(['a','b','c','d','f'])); // 'e'
console.log(findMissingLetter(['O','Q','R','S'])); // 'P'

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

Junior Fullstack-разработчик
🟢Python, FastAPI, Go, Vue, PostgreSQL
🟢Уровень дохода не указан | Опыт работы: 1–3 года

Frontend разработчик (Junior/Middle)
🟢JavaScript, TypeScript, React
🟢Уровень дохода не указан | Опыт работы: 1–3 года

Junior Верстальщик HTML5/CSS3
🟢HTML5, CSS3, JavaScript, Git, Gulp, Webpack
🟢от 30 000 до 35 000 ₽ | Без опыта

👩‍💻 Check Done SVG Animated

Красиво анимированная галочка. Сделана на SVG и SCSS.

Открыть код

⚙️ Что такое content-visibility в CSS и как его использовать?

content-visibility — это CSS-свойство, которое ускоряет рендеринг веб-страниц, откладывая отрисовку элементов, которые находятся за пределами экрана. Это особенно полезно для длинных страниц с большим количеством контента.

➡️ Пример:

<div class="heavy-content">
  <p>Этот блок загрузится только при появлении в области видимости.</p>
</div>

<style>
  .heavy-content {
    content-visibility: auto; /* Элемент будет рендериться только при появлении в viewport */
    background-color: lightblue;
    padding: 20px;
  }
</style>

🗣️ content-visibility: auto; откладывает рендеринг блока, пока он не попадёт в область видимости пользователя.

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

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

Middle frontend developer (Попроектно)
• JavaScript, TypeScript, React, Vue.js, Next.js, Redux, React Native, Webpack
• Уровень дохода не указан | от 2 лет опыта

Разработчик Frontend (Angular) Remote
• Angular, JavaScript, React, TypeScript, HTML
• Уровень дохода не указан | от 3 лет опыта

Frontend-developer Vue.js \ Middle
• TypeScript, Vue.js, HTML, Node.js, Express, Git
• от 180 000 ₽ | от 1 года опыта

👩‍💻 Улучшение производительности с делегированием событий

Статья объясняет технику делегирования событий в веб-разработке, показывая, как использование одного слушателя на родительском элементе упрощает управление событиями и повышает производительность.

Читать...

👩‍💻 Подсчёт частоты элементов в массиве

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

Пример:

const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result); 
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}

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

function countFrequency(array) {
return array.reduce((acc, item) => {
acc[item] = (acc[item] || 0) + 1;
return acc;
}, {});
}

// Пример использования:
const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result);
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}

👩‍💻 TypeScript в деталях: настраиваем tsconfig.json правильно

Один файл, который может изменить все: полное руководство по tsconfig.json. Разбираем каждый параметр и его влияние на разработку, сборку и поддержку TypeScript-проектов.

Читать...

👩‍💻 Hover Glyph Button

Кнопка с анимированным эффектом при наведении. Сделана на CSS, SVG и JavaScript.

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

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

Senior Frontend Developer (Vue/React)
• HTML, SCSS, TailwindCSS, JavaScript, TypeScript, Node.js
• от 200 000 ₽ | 3–6 лет

Frontend разработчик
• React, JavaScript, TypeScript
• Уровень дохода не указан | 3–6 лет

Frontend разработчик senior (тех.лид)
• React, JavaScript, Next.js, HTML, CSS
• Уровень дохода не указан | 3–6 лет

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

• Как сделать резюме, которое дойдёт до работодателя. Фильтры ATS в 2025 году

• Ошибайся смело: жизненные уроки из мира machine learning

• Как учиться во взрослом возрасте: 7 советов, проверенных на практике

• Нейросети, чат-бот и диджитал-адаптация: цифровые инструменты внутрикома

• Долгосрочная стабильность vs. карьерная мобильность

👩‍💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript

В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий.

Читать...

⚙️ Что такое Content Security Policy (CSP) и зачем она нужна?

Content Security Policy (CSP) — это механизм безопасности, ограничивающий источники загружаемого контента на веб-странице. CSP помогает предотвращать атаки XSS и другие угрозы, задавая правила через HTTP-заголовок или <meta>.

➡️ Пример:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; noscript-src 'self' https://apis.example.com;">
  <noscript>Пример CSP</noscript>
</head>
<body>
  <noscript src="https://apis.example.com/library.js"></noscript>
  <noscript>
    // Этот скрипт выполнится, так как он разрешен
    console.log("Скрипт из разрешенного источника работает.");
  </noscript>
  <noscript>
    // Этот скрипт нарушит политику CSP, так как он inline
    alert("Inline скрипт заблокирован!");
  </noscript>
</body>
</html>

🗣️ В этом примере политика CSP разрешает загрузку ресурсов только с того же домена ('self') и скриптов с определенного внешнего источника. Inline-скрипты и неразрешенные ресурсы будут заблокированы, повышая безопасность приложения.

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

🔍 Как найти утечки памяти на сайтах и в веб-приложениях

Утечки памяти мешают пользователям долго работать с вашим веб-приложением – из-за них можно потерять аудиторию. Попробуем разобраться как этого издежать.

Читать...

👩‍💻 Как выбрать библиотеку для управления состоянием в Vue.js

Веб-разработка тесна связана с управлением состоянием, особенно если это касается сложных структур. Рассказываем, какие библиотеки помогут в этом и какие у них есть преимущества.

Читать...

⚡️ Используй «правило 80/20» для изучения технологий

Каждый раз, когда начинаешь изучать новый фреймворк или язык, кажется, что информации слишком много?

👉 Совет: сосредоточься на 20% самых часто используемых функций и принципов — они дадут 80% пользы. Изучи основные концепции, типичные паттерны и реальные кейсы. Остальное придёт с опытом.