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

👩‍💻 Настройка одного набора цветов для светлого и тёмного режимов

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

Читать...

⚙️ Что такое addEventListener в JavaScript?

addEventListener — это метод, который позволяет добавлять обработчики событий к элементам на странице.

➡️ Пример:

// Функция для обработки клика
function handleClick() {
  console.log('Кнопка нажата!');
}

// Добавляем обработчик к кнопке
const button = document.querySelector('button');
button.addEventListener('click', handleClick);

🗣️ В этом примере метод addEventListener связывает событие клика с кнопкой, выполняя функцию handleClick. Этот подход позволяет динамически добавлять или удалять обработчики.

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

👩‍💻 Как реализовать наследование в JavaScript: 7 способов

Исчерпывающий гайд по всем существующим способам организации наследования в JavaScript. Разберем сильные и слабые стороны каждого подхода и научимся выбирать оптимальный метод для твоих задач.

Читать...

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

• Тримодальный характер зарплат разработчиков

• Иллюзия прогресса: почему мне не удалось дать студентам-айтишникам реальный опыт

• Из подземелья в QA: как и почему я перешёл в тестирование после 14 лет работы сисадмином в метрополитене

• Interview copilots: как кандидаты используют ChatGPT на интервью

• Моя история входа в IT: как я ломал стены своих ограничений

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

Frontend-разработчик (React)
• JavaScript, React, Node.js
• Уровень дохода не указан | от 3 лет

QA-инженер (frontend)
• JavaScript, TypeScript, SQL
• Уровень дохода не указан | от 2 лет

Senior Fullstack Developer (Nest / React)
• Node.js, RabbitMQ, TypeScript, MySQL, React, Redux, TypeORM, NestJS
• от 3 000 до 4 000 $ | от 6 лет

👩‍💻 Multiple Glow effects Button

Анимированная кнопка с различными эффектами свечения. Сделана на CSS, Svg и JavaScript.

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

👩‍💻 Эксперимент: Автоматическое включение View Transitions с MutationObserver

Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition.

Читать...

👩‍💻 Интерактивный счётчик с кнопками увеличения и уменьшения

Создайте интерактивный счётчик с двумя кнопками: "Увеличить" и "Уменьшить". Счётчик должен отображать текущее значение, которое обновляется при нажатии на кнопки.

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

• По умолчанию значение счётчика равно 0.
• Кнопка "Увеличить" увеличивает значение счётчика на 1.
• Кнопка "Уменьшить" уменьшает значение счётчика на 1.
• Значение счётчика никогда не становится отрицательным.

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

<div>
<button id="decreaseButton">Уменьшить</button>
<span id="counter">0</span>
<button id="increaseButton">Увеличить</button>
</div>

const counter = document.getElementById('counter');
const decreaseButton = document.getElementById('decreaseButton');
const increaseButton = document.getElementById('increaseButton');

let count = 0;

decreaseButton.addEventListener('click', () => {
if (count > 0) {
count -= 1;
counter.textContent = count;
}
});

increaseButton.addEventListener('click', () => {
count += 1;
counter.textContent = count;
});

⚙️ Предзагрузка отзывчивых изображений

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

Читать...

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

Frontend Developer (Middle+)
• JavaScript (ES6+), React, TypeScript, Redux, Axios, Material UI, Ant Design, Tailwind CSS, i18n, HTML, CSS
• Уровень дохода не указан | от 3 лет

Fullstack-разработчик (.Net core, React)
• React, .Net core, Docker, Kubernetes, Redis, EntityFramework, RabbitMQ, WebAPI, S3
• Уровень дохода не указан | от 3 лет

Senior/middle React developer
• React, TypeScript, Next.js, CSS, HTML, JavaScript, LESS, Redux, SSR, Babel, Webpack, Npm, Yarn, NodeJS
• Уровень дохода не указан | от 3 лет

PHP developer
• PHP 7, Yii2, MySQL, MongoDB, PostgreSQL, REST, HTTP, Agile, фронтенд и бэкенд разработка
• Уровень дохода не указан | от 3 лет

⚙️ Что такое свойство aspect-ratio в CSS и как оно используется?

aspect-ratio — это свойство CSS, которое задаёт соотношение ширины к высоте элемента. Оно упрощает создание адаптивных контейнеров, таких как видео, изображения или карточки.

➡️ Пример:

<div class="box"></div>

<style>
  .box {
    width: 300px;
    aspect-ratio: 16 / 9; /* Соотношение сторон 16:9 */
    background: lightblue;
  }
</style>

🗣️ В этом примере элемент .box сохраняет соотношение сторон 16:9 независимо от ширины. Это свойство полезно для создания адаптивных сеток и медиа-контейнеров.

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

👩‍💻 Shiny call-to-action button

Анимированная кнопка с эффектом при наведении. Сделана на чистом CSS.

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

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

Frontend developer (junior/middle)
🟢TypeScript, Angular
🟢Уровень дохода не указан | от 1 до 3 лет

Frontend Developer Vue.js / Senior
🟢HTML, CSS, JavaScript, Vue.js, Inertia.js, UI/UX design, Adobe XD, Figma, Sketch, Git, RESTful API, MySQL, PostgreSQL
🟢до 3 500 $ на руки | более 6 лет

Vue 3 frontend разработчик | Junior | Middle
🟢Vue 3, TypeScript
🟢от 90 000 до 130 000 ₽ на руки | от 1 до 3 лет

Junior PHP разработчик (WordPress)
🟢WordPress, PHP, MySQL, HTML, CSS, JavaScript, REST API, Git
🟢Уровень дохода не указан | от 1 до 3 лет

👩‍💻 Проверка сбалансированных скобок

Напишите функцию, которая принимает строку, содержащую различные типы скобок ((), {}, []), и проверяет, являются ли они сбалансированными. Строка считается сбалансированной, если каждая открывающая скобка имеет соответствующую закрывающую в правильном порядке.

Пример: Для строки "{[()]}" функция должна вернуть true, а для строки "{[(])}" — false.

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

function isBalanced(str) {
const stack = [];
const pairs = { ')': '(', '}': '{', ']': '[' };

for (let char of str) {
if (['(', '{', '['].includes(char)) {
stack.push(char);
} else if ([')', '}', ']'].includes(char)) {
if (stack.pop() !== pairs[char]) return false;
}
}
return stack.length === 0;
}

// Пример использования
console.log(isBalanced("{[()]}")); // true
console.log(isBalanced("{[(])}")); // false

👩‍💻 Обзор наследования в JavaScript

Статья изучает различные шаблоны наследования в JavaScript, основанные на прототипах. Обсуждаются их преимущества и применение в зависимости от задач для оптимального управления объектными отношениями.

Читать...

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

• Вышел TypeScript 5.7

• Обзор на Model Context Protocol (MCP) от Anthropic

• Рецепты TypeScript: типизированное преобразование объекта

• Многослойная архитектура FrontEnd-приложений на основании SOLID, часть 2

• JavaScript. Как сделать невероятно быстрый многопоточный Data Grid на 1 000 000 строк. Часть 1/2: нюансы работы с DOM

👩‍💻 Реализация кнопки с таймером блокировки

Создайте кнопку, которая становится недоступной (disabled) на 5 секунд после каждого нажатия. Отображайте обратный отсчёт времени на кнопке, чтобы пользователь видел, когда её можно будет нажать снова.

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

• При нажатии на кнопку она становится недоступной.
• На кнопке отображается обратный отсчёт времени: 5... 4... 3....
• Через 5 секунд кнопка снова становится активной и текст возвращается в исходное состояние.

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

<button id="timer-button">Нажми меня</button>


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

#timer-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}


const button = document.getElementById('timer-button');

button.addEventListener('click', () => {
let countdown = 5;

// Деактивируем кнопку и запускаем таймер
button.disabled = true;
const interval = setInterval(() => {
button.textContent = `Ждите... ${countdown}`;
countdown--;

if (countdown < 0) {
clearInterval(interval);
button.disabled = false;
button.textContent = 'Нажми меня';
}
}, 1000);
});

👩‍💻 5 HTML-атрибутов для улучшения пользовательского опыта и SEO

Разбираем мощные, но часто игнорируемые атрибуты HTML, способные значительно улучшить пользовательский опыт и SEO вашего сайта. От многоязычности до удобства заполнения форм – все, что нужно современному разработчику

Читать...

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

Frontend разработчик
🟢JavaScript, ES6, XHR/AJAX, DOM, HTML5, CSS3, Git
🟢от 2 500 до 3 500 $ | от 3 до 6 лет

Frontend-разработчик
🟢CMS WordPress, UX/UI, Figma, Adobe, HTML, CSS
🟢от 130 000 до 180 000 ₸ | Без опыта

Middle Frontend-разработчик
🟢HTML5, CSS3, JavaScript, TypeScript, React.js, Vue.js, RESTful API, GraphQL, Git, JIRA, Bitbucket, Confluence
🟢от 1 200 € | от 3 до 6 лет

Front-end developer (middle)
🟢JavaScript, Git, Node.js, TypeScript, CSS3, GraphQL, WebSocket, CI/CD, Vue.js, Svelte
🟢до 800 000 ₸ | от 3 до 6 лет

🧩 Держи всё в порядке

Хаос на рабочем столе, папки с проектами называются «Новая папка (2)», а задачи записаны в трёх разных местах? Такой беспорядок убивает продуктивность.

👉 Совет: выбери один инструмент для управления задачами (Trello, Notion или просто блокнот) и держи все свои проекты там. Организуй рабочий стол, придумай систему именования файлов и придерживайся её. Это может показаться мелочью, но мозг лучше работает в упорядоченной среде.