Frontender's notes

🔘 Посмотрите, как выглядит пространство Яндекса в МФТИ. Это коворкинг, который мы в мае открыли для студентов и преподавателей. Здесь они могут поработать, созвониться в тишине, отдохнуть и пообщаться. Это не первое подобное пространство. В 2023 году коворкинг Яндекс Образования открылся в корпусе ИТМО на Кронверкском. Ещё одно удобное пространство появится во ВШЭ. ↗️ Кстати, набор на наши стажировки идёт весь год. Ждём ваши заявки! Подписывайтесь 〰️ @yandex

👩‍💻 Как работает всплытие событий (event bubbling) в JavaScript? В JavaScript событие сначала срабатывает на самом глубоком элементе (цель события) и поднимается вверх по DOM-дереву через всех его предков. ➡️ При клике на элемент #child, сначала сработает его обработчик, а затем всплывающее событие вызовет обработчик элемента #parent.

    
        document.querySelector('#child').addEventListener('click', () => {
    console.log('Child clicked');
});

document.querySelector('#parent').addEventListener('click', () => {
    console.log('Parent clicked');
});{}
    

🗣️ Всплытие событий полезно для делегирования событий и работы с вложенными элементами.

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

👩‍💻 Product Filtering UI Интерфейс фильтрации товаров. Сделан на HTML и JavaScript. Открыть код...

👩‍💻 Возможности контроля в JavaScript: методы AbortSignal.timeout() и AbortSignal.any() Представляем два малоизвестных, но очень полезных метода управления асинхронными задачами: AbortSignal.timeout() и AbortSignal.any(). Оба эти метода поддерживаются основными веб-браузерами и позволяют корректно прервать асинхронные операции. Читать...

👩‍💻 Find the missing term in an Arithmetic Progression Вам предоставляются последовательные элементы арифметической прогрессии. Однако есть одна загвоздка: в наборе чисел, которые были даны вам, отсутствует ровно одно слагаемое из оригинальной серии. Найдите недостающее число. Вы должны написать функцию, которая получает список, размер списка всегда будет составлять не менее 3 чисел. Пропущенное число никогда не будет первым или последним. Пример кода

    
        findMissing([1, 3, 5, 9, 11]) == 7{}
    

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

function findMissing(arr) { // Вычисляем разности между последовательными элементами const diffs = []; for (let i = 1; i < arr.length; i++) { diffs.push(arr[i] - arr[i - 1]); } // Определяем правильную разность, которая встречается чаще всего const correctDiff = diffs.sort((a, b) => diffs.filter(v => v === a).length - diffs.filter(v => v === b).length ).pop(); // Ищем место, где разность отличается от правильной for (let i = 1; i < arr.length; i++) { if (arr[i] - arr[i - 1] !== correctDiff) { return arr[i - 1] + correctDiff; } } return null; // Если все в порядке, возвращаем null (хотя это не должно случиться) } // Примеры использования: console.log(findMissing([1, 3, 5, 9, 11])); // Вывод: 7 console.log(findMissing([2, 4, 6, 10])); // Вывод: 8 console.log(findMissing([10, 20, 30, 50])); // Вывод: 40

👩‍💻 Когда не стоит использовать метод find() в JavaScript Немногие знают истинную ценность Map. Между тем, применение этой структуры данных позволяет повысить производительность и улучшить пользовательский опыт. Особенно она полезна при работе со сложными структурами данных или при необходимости получить быстрый доступ к данным. Читать...

🖥 Самые интересные публикации за последние дни: • Tuner — гибкий конфигуратор проекта as code для Deno • Yaml — король мета-описаний • «От идеи и до продакшена»: как разработать веб-приложение и загрузить в VK Mini Apps • Магия CSS на практике: советы по вёрстке от гика. Часть 3 • Атрибут charset и важность его использования

👩‍💻 Создание динамического списка дел (to-do list) Напишите код, который позволяет пользователю добавлять новые задачи в список на веб-странице. Каждая задача должна отображаться с кнопкой "Удалить", которая убирает её из списка. Минимальные требования: • Поле ввода для текста задачи • Кнопка "Добавить" • При нажатии на кнопку задача появляется в списке • Кнопка "Удалить" убирает задачу из списка Пример разметки HTML ⬇️

    
        <input type="text" id="taskInput" placeholder="Новая задача...">
<button id="addTaskBtn">Добавить</button>
<ul id="taskList"></ul>{}
    

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

const input = document.getElementById('taskInput'); const addBtn = document.getElementById('addTaskBtn'); const taskList = document.getElementById('taskList'); addBtn.addEventListener('click', () => { if (input.value.trim() !== '') { const li = document.createElement('li'); li.textContent = input.value; const deleteBtn = document.createElement('button'); deleteBtn.textContent = 'Удалить'; deleteBtn.addEventListener('click', () => li.remove()); li.appendChild(deleteBtn); taskList.appendChild(li); input.value = ''; } });

👩‍💻 21 рекомендация по HTML Как сделать код информативным, усовершенствовать структуру, доступность и поисковую оптимизацию? Прокачайте навыки его написания этими полезными приемами с атрибутами, тегами, элементами. Рекомендации снабжены сниппетами. Читать...

🧹 Чисти ментальный кэш перед новой задачей Переключился с одного проекта на другой, а мысли всё ещё о старом баге? Работать в таком режиме тяжело. 👉 Совет: перед началом новой задачи сделай короткий «ритуал сброса»: запиши, на чём остановился в старой, закрой все лишние вкладки, переключись физически — встань, пройдись. Это очищает голову и ускоряет погружение в новую работу.