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

📝 Подборка вакансий для мидлов 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. Как изменилась документация во фронтенд-разработке Статья анализирует изменения в подходах к документированию фронтенд-проектов за последние пять лет. Рассматриваются новые инструменты и методы, которые сделали процесс создания и поддержки документации более эффективным. Читать...