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

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

• «Сбер» режет косты

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

• Чем Cloud-инженер отличается от DevOps-инженера и что между ними общего

• Правда или вымысел? Разоблачаем мифы о профессии технического писателя

• 5 видов усталости в IT… и не только

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

Frontend-разработчик React (middle+/senior)
• JavaScript, React, TypeScript, Node.js, CI/CD (GitLab), Unit-тестирование
• Уровень дохода не указан | от 3 лет

FullStack разработчик
• React, TypeScript, JavaScript, HTML, CSS, Node.js, API, Git
• Уровень дохода не указан | от 3 лет

Senior Frontend Developer VUE.js
• JavaScript, Vue.js, TypeScript, адаптивная верстка, дизайн мобильных приложений, Figma, Nuxt.js, веб-разработка
• от 3 000 до 4 000 $ | от 5 лет

👩‍💻 Playbook CSS scroll animation w/ subgrid

Сцена с интересной реализацией анимированного скролла. Сделана на Svg, CSS и JavaScript.

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

👩‍💻 TS Extend: полезная утилитарная функция для расширения type

Статья объясняет ограничения TypeScript 5.7 в работе с расширением типов, демонстрирует проблему интерсекции с одинаковыми свойствами и предлагает утилиту Extend для корректной обработки таких случаев.

Читать...

👩‍💻 Уникальные значения из массива

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

Пример:

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = getUniqueValues(numbers);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

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

function getUniqueValues(arr) {
return [...new Set(arr)];
}

// Пример использования
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = getUniqueValues(numbers);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

⚙️ Vite 6.0: Новые возможности и будущее веб-разработки

Новая мажорная версия Vite от 26 ноября 2024 года — первый релиз после анонса VoidZero. Рассмотрим ключевые изменения и будущие векторы развития инструмента для сборки приложений.

Читать...

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

Middle Frontend Developer
• React, JavaScript, TypeScript, Webpack, Git, Jira, Confluence
• Уровень дохода не указан | 1–3 года

React Native Developer
• React Native, JavaScript, TypeScript, Redux, Git, CI/CD, GraphQL, REST API
• до 300 000 ₽ на руки | 3–6 лет

Фронтенд-разработчик (Vue.js / React)
• JavaScript, TypeScript, Vue.js, React, Sass, Less, Git, Vite, Docker, CI/CD
• от 190 000 ₽ на руки | 3–6 лет

⚙️ Что такое теневые DOM-деревья (Shadow DOM) и как они работают?

Shadow DOM — это ключевая часть технологии Web Components, которая позволяет создавать инкапсулированные области DOM с собственным стилем и поведением. Теневые DOM-деревья изолированы от остального документа, что предотвращает конфликты стилей и упрощает создание переиспользуемых компонентов.

➡️ Пример:

// Создание элемента с Shadow DOM
const host = document.createElement('div');
const shadowRoot = host.attachShadow({ mode: 'open' });

// Добавление стилей и контента
shadowRoot.innerHTML = `
  <style>
    p {
      color: blue;
    }
  </style>
  <p>Это текст внутри Shadow DOM</p>
`;

document.body.appendChild(host);
console.log(document.querySelector('p')); // null (элемент скрыт из глобального DOM)

🗣️ В этом примере текст внутри Shadow DOM изолирован. Стили из Shadow DOM не влияют на остальную страницу, и наоборот. Shadow DOM полезен для создания самодостаточных UI-компонентов.

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

👩‍💻 Новые возможности CSS за 2024 год

Центрирование без боли, улучшенный тёмный режим, анимация скрытых элементов и даже решения математических задач — меньше сложностей, больше возможностей.

Читать...

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

Junior Frontend-разработчик Vue
🟢JavaScript, Vue.js, Git, HTML5, ES6, TypeScript
🟢от 60 000 до 90 000 ₽ | Без опыта

Junior PHP Backend Developer Yii2
🟢PHP7.4, MySQL, Yii2, jQuery, Git, JavaScript
🟢от 50 000 ₽ | 1–3 года

Младший фронтенд разработчик (JS/Vue)
🟢JavaScript, Vue3, Vuex, chart.js, Bootstrap, Git, HTML5, CSS3, SVG
🟢от 60 000 до 80 000 ₽ | 1–3 года опыта

👩‍💻 Анимация загрузочного индикатора

Создайте кнопку, при нажатии на которую появляется анимация загрузочного индикатора (спиннера) на 3 секунды. После завершения загрузки спиннер исчезает, а на кнопке отображается текст "Готово!".

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

<button id="loadButton">Начать загрузку</button>
<div id="spinner" class="spinner" style="display: none;"></div>

button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

.spinner {
margin-top: 10px;
width: 30px;
height: 30px;
border: 4px solid #ccc;
border-top: 4px solid #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

const button = document.getElementById('loadButton');
const spinner = document.getElementById('spinner');

button.addEventListener('click', () => {
button.disabled = true;
button.textContent = 'Загрузка...';
spinner.style.display = 'block';

setTimeout(() => {
button.textContent = 'Готово!';
spinner.style.display = 'none';
button.disabled = false;
}, 3000);
});

👩‍💻 Как мы мигрируем с JQuery на React

Обсуждаем миграцию с jQuery на React. В статье — реальный опыт, причины перехода, основные шаги и способы преодоления сложностей.

Читать...

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

• Как устроен Next.js: разбираем ключевые особенности фреймворка на примере небольшого pet-проекта

• Всего несколько строк CSS для плавных переходов между страницами

• 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года. Часть 2

• Проектная работа «Оно тебе надо» от Яндекс практикума

• Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Какие знаешь псевдо-классы?»

👩‍💻 Переключение видимости пароля

Создайте поле для ввода пароля и кнопку "Показать/Скрыть". При нажатии на кнопку символы пароля должны переключаться между скрытым (type="password") и видимым (type="text") состоянием.

Требования:

• Кнопка переключает тип поля ввода пароля между "password" и "text".
• Текст кнопки меняется в зависимости от текущего состояния видимости пароля.

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

<input type="password" id="password" placeholder="Введите пароль">
<button id="toggleBtn">Показать</button>

const password = document.getElementById('password');
const toggleBtn = document.getElementById('toggleBtn');

toggleBtn.addEventListener('click', () => {
const isHidden = password.type === 'password';
password.type = isHidden ? 'text' : 'password';
toggleBtn.textContent = isHidden ? 'Скрыть' : 'Показать';
});

➡️ Frontend в 2025 году: тренды, которые изменят разработку

В этой статье мы подводим итоги 2024 года и делимся нашими прогнозами на 2025 год. Приводим мнение трех экспертов по ключевым трендам фронтенд‑разработки и фреймворков, которые будут актуальными в следующем году.

Читать...

🔎 Подборка зарубежных вакансий

Full Stack Developer (Node.js, React)
🟢Node.js, React, NestJS, TypeScript, MySQL, RabbitMQ, Redis, AWS
🟢Уровень дохода не указан | 3–6 лет

Angular Developer
🟢Angular 2+, MS SQL, EF Core, OAuth 2.0, JWT, RESTful APIs, Swagger, HTML, CSS/SCSS, Bootstrap
🟢Уровень дохода не указан | 3–6 лет

Full Stack Developer
🟢Node.js, TypeScript, VueJS, React, DevOps, PostgreSQL, Redis, AWS
🟢Уровень дохода не указан | 5+ лет

🔨 Ломай свои решения до того, как их сломает продакшен

Ты уверен, что твоя фича работает идеально? Отлично. А что будет, если передать в неё неожиданные данные?

👉 Совет: тестируй свои решения агрессивно. Вводи странные значения, симулируй обрывы соединения, загружай систему до предела. Лучше пусть код сломается у тебя, чем у пользователей.

➡️ Разбираем стандарты нейминга на примерах

Статья рассматривает случаи стандартизированного нейминга переменных и функций. Примеры сгруппированы по категориям для лучшей наглядности и помогут улучшить читаемость и согласованность кода.

Читать...

🤔 Народный браузер — каким он мог бы быть?

Статья раскрывает идеи и обсуждения, связанные с развитием сборки Хромиума Ultimatum. Автор стремится понять реальные запросы пользователей и обсудить востребованные функции.

Читать...

⚙️ Что такое Intersection Observer в JavaScript и зачем он используется?

Intersection Observer — это API, которое позволяет отслеживать, когда элемент появляется или исчезает из области видимости (viewport). Он полезен для ленивой загрузки изображений, бесконечной прокрутки и анимаций при прокрутке.

➡️ Пример:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент видим:', entry.target);
    }
  });
});

// Наблюдаемый элемент
const target = document.querySelector('.observe-me');
observer.observe(target);

🗣️ В этом примере Intersection Observer отслеживает элемент .observe-me и выполняет код, когда элемент появляется в области видимости. Это позволяет избежать постоянного использования события scroll, улучшая производительность.

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