Логово верстальщика

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

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}

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

📝 Подборка вакансий для мидлов 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 года опыта

⚙️ Что такое 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; откладывает рендеринг блока, пока он не попадёт в область видимости пользователя.

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

👩‍💻 Check Done SVG Animated Красиво анимированная галочка. Сделана на SVG и SCSS. Открыть код

🔎 Подборка вакансий для джунов 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 ₽ | Без опыта

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

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

🔝 Самые интересные статьи за последние дни: • Почему я не готовлюсь к алгоритмическому интервью • 7 популярных библиотек Vue 3 UI-компонентов, которые заслуживают внимания • Жаркий спор по теме Masonry в CSS • Разница между ранним и поздним связыванием • Расширения VSCode для комфортной работы с проектами

👩‍💻 Динамическое создание списка задач Создайте поле ввода и кнопку, которые позволяют добавлять задачи в список. Каждая задача в списке должна иметь кнопку для её удаления. Ожидаемое поведение: • Введите текст задачи в поле ввода и нажмите кнопку "Добавить". • Задача появляется в списке ниже с кнопкой "Удалить" рядом с ней. • Нажатие на кнопку "Удалить" удаляет соответствующую задачу из списка. Решение задачи🔽

<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 = ''; // Очищаем поле ввода });

💾 6 главных технологий для хранения данных в браузере Ведущий инженер RxDB провел комплексный анализ и сравнение шести основных технологий хранения данных в браузере – от классических Cookies до современных WASM SQLite, оценивая их функциональность, производительность и потенциал для оптимизации. Читать...

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

💾 Используй код-черновик перед коммитом Написал большой кусок кода, а потом пришлось его переделывать, потому что что-то не учёл? 👉 Совет: перед тем как писать «боевой» код, создай черновой вариант. Быстро набросай логику, протестируй гипотезы, сломай пару раз. Это поможет избежать больших переделок и сэкономит время на исправления.

👩‍💻 Вышел React v19 В нашем руководстве по обновлению React 19 мы поделились пошаговыми инструкциями по обновлению вашего приложения до React 19. В этом посте мы расскажем о новых возможностях React 19 и о том, как их можно использовать. Читать...

🔥 Самые нужные каналы для Frontend разработчика, чтобы расти в доходе 💸 • Frontend | Вопросы собесов • Frontend | Вакансии с удаленкой • Frontend | LeetCode • Frontend | Тесты Подпишись, чтобы не потерять ☝️

📝 Подборка вакансий для лидов Chapter Lead Angular Frontend разработки • Angular, TypeScript, RxJS, NgRx, REST API, WebSockets, CI/CD, Git, Docker • Уровень дохода не указан | от 5 лет опыта Team Lead Frontend (Управление перспективных проектов) • React, TypeScript, JavaScript, HTML, CSS (SCSS), REST API, JSON, JWT, Nivo, Highcharts, Chart.js, axios, Fluent UI, final-form, i18next, Jotai, Mitt, React Query, Tanstack Table, Vite • Уровень дохода не указан | от 4 лет опыта Teamlead Frontend (Vue) • CSS, JavaScript, HTML, Vue.js • Уровень дохода не указан | более 5 лет опыта

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка для вас и 3-х ваших близких 30 дней бесплатно. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте сейчас❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

⚙️ Что такое throttle в JavaScript и зачем он используется? Throttle — это техника ограничения частоты вызова функции до определённого интервала времени. Это полезно для обработки часто происходящих событий, таких как прокрутка или изменение размеров окна, не перегружая производительность. ➡️ Пример:

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

const handleScroll = throttle(() => {
  console.log('Прокрутка страницы');
}, 1000);

window.addEventListener('scroll', handleScroll);

🗣️ В этом примере функция handleScroll вызывается не чаще одного раза в секунду, даже если пользователь прокручивает страницу интенсивно. Throttle помогает оптимизировать производительность и уменьшить количество вызовов функции.

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

👩‍💻 CSS единицы измерения: lh и rlh Изучение новых относительных единиц измерения CSS основанных на высоте строки и позволяющих отказаться от угадывания вертикального ритма. Смотреть…

Не берут на работу без коммерческого опыта? Работодатели ищут новичков на оплачиваемые стажировки в канале "Вакансии для джунов и стажировки в IT". 💻Подпишись на канал, чтобы не потерять. Подписаться #реклама О рекламодателе