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

• HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 11

• Вы всё ещё устанавливаете display:none по таймауту? Тогда мы идём к вам

• Парольная защита статичной HTML-страницы на JS

• 9 open source библиотек для вашего следующего проекта

• Модули CSS раскладки — что такое и как готовить

👩‍💻 CSS единицы измерения: lh и rlh

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

Смотреть…

👩‍💻 Стилизация кнопки с эффектом наведения

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

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

• Основной цвет фона кнопки — синий (#007BFF).
• При наведении цвет фона становится темно-синим (#0056b3), добавляется тень, и кнопка слегка увеличивается.

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

<button class="styled-button">Нажми меня</button>

.styled-button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.styled-button:hover {
background-color: #0056b3;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}

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

Frontend-разработчик Vue
🟢Vue.js, JavaScript, Git, Vuex/Pinia, Sass/Less, TypeScript, Nuxt.js, Docker, Webpack
🟢от 60 000 до 90 000 ₽ на руки | Без опыта

Frontend-разработчик
🟢HTML5, CSS3, JavaScript (ES6+), Vue.js, Vue Router, Vuex/Pinia, Git, REST API
🟢от 70 000 до 120 000 ₽ на руки | 1–3 года

Frontend Developer/Программист JS
🟢JavaScript, Vue.js, Bootstrap, HTML5, CSS3, .NET (C#), .Net Core, SQL
🟢от 80 000 до 150 000 ₽ на руки | 1–3 года

👩‍💻 <pixel-canvas> Web Component

Сцена с стильно анимированными карточками. Сделана на CSS, SVG и JavaScript.

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

⚙️ Что такое clamp() в CSS и как его использовать?

clamp() — это функция в CSS, которая задаёт значение с ограничениями: минимальное, предпочтительное и максимальное. Она позволяет адаптивно управлять размерами элементов или текстом, сохраняя их в заданных пределах.

➡️ Пример:

<div class="text">
  Адаптивный размер текста
</div>

<style>
  .text {
    font-size: clamp(1rem, 2.5vw, 2rem); /* Минимум 1rem, максимум 2rem, предпочтение — 2.5% ширины окна */
    text-align: center;
  }
</style>

🗣️ В этом примере текстовый блок изменяет размер шрифта в зависимости от ширины окна, оставаясь в пределах от 1rem до 2rem. Функция clamp() упрощает создание адаптивного дизайна без сложных медиа-запросов.

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

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

Frontend разработчик
• JavaScript, TypeScript, React, HTML5, CSS3
• от 60 000 до 160 000 ₽ на руки | Без опыта

Frontend-разработчик
• TypeScript, Vue.js, Webpack, GraphQL, REST API
• до 200 000 ₽ на руки | 3–6 лет

Frontend JS/React/TypeScript
• JavaScript, React, TypeScript, REST API, Git, Agile, DevOps, Kanban, Scrum
• Уровень дохода не указан | 3–6 лет

👩‍💻 Dropdown Menu Effects

Анимированное выпадающее меню с переливающимся эффектом. Сделано на SCSS и TypeScript.

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

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

Senior Frontend Engineer
• TypeScript, Next.js, React.js, Redux, Jest, React Testing Library, D3.js, Chart.js
• до 5 000 $ на руки | Более 6 лет

Frontend React разработчик
• React, Next.js, StoryBook, TypeScript, Jest, REST, WebSocket
• от 150 000 до 250 000 ₽ на руки | 3–6 лет

Senior Frontend Developer VUE.js
• Vue.js, TypeScript, Nuxt.js, Pinia, Telegram API, Google Analytics
• от 3 000 до 4 000 $ на руки | Более 6 лет

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

• Базовое программирование, или Почему джуны не могут пройти к нам собеседование

• Я стал аналитиком, потому что не смог быть программистом

• Какие именно админы нужны на российском рынке и как получать больше разработчика

• Рецензия на книгу «MySQL. Сборник рецептов. 4-е издание»

• Чек-лист тестировщика в финансовой компании

👩‍💻 Вышел React v19

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

Читать...

⚙️ Что такое Content Security Policy (CSP) и зачем она нужна?

Content Security Policy (CSP) — это механизм безопасности, ограничивающий источники загружаемого контента на веб-странице. CSP помогает предотвращать атаки XSS и другие угрозы, задавая правила через HTTP-заголовок или <meta>.

➡️ Пример:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; noscript-src 'self' https://apis.example.com;">
  <noscript>Пример CSP</noscript>
</head>
<body>
  <noscript src="https://apis.example.com/library.js"></noscript>
  <noscript>
    // Этот скрипт выполнится, так как он разрешен
    console.log("Скрипт из разрешенного источника работает.");
  </noscript>
  <noscript>
    // Этот скрипт нарушит политику CSP, так как он inline
    alert("Inline скрипт заблокирован!");
  </noscript>
</body>
</html>

🗣️ В этом примере политика CSP разрешает загрузку ресурсов только с того же домена ('self') и скриптов с определенного внешнего источника. Inline-скрипты и неразрешенные ресурсы будут заблокированы, повышая безопасность приложения.

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

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

Статья анализирует изменения в подходах к документированию фронтенд-проектов за последние пять лет. Рассматриваются новые инструменты и методы, которые сделали процесс создания и поддержки документации более эффективным.

Читать...

💬 Сокращай задержки на коммуникации

Часто ждёшь часами, пока коллега ответит на простой вопрос? Это не только теряет время, но и ритм работы.

👉 Совет: формулируй вопросы так, чтобы не оставлять места для уточнений. Вместо «Как вызвать функцию?» пиши «Какие аргументы нужно передать в метод calculate() для обработчика X?». Чем точнее запрос, тем быстрее ответ.

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

Laravel/VUE разработчик (Middle+)
🟢Laravel, Vue.js, PostgreSQL, REST API, WebSocket, Git
🟢от 1 500 до 2 500 $ на руки | 3–6 лет

Node.js Developer
🟢Node.js, TypeScript, Nest.js, Jest, PostgreSQL, AWS
🟢от 3 000 до 5 000 $ до вычета налогов | 3–6 лет

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

👩‍💻 HTML элемент search

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

Читать…

👩‍💻 Динамическое создание списка задач

Создайте поле ввода и кнопку, которые позволяют добавлять задачи в список. Каждая задача в списке должна иметь кнопку для её удаления.

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

• Введите текст задачи в поле ввода и нажмите кнопку "Добавить".
• Задача появляется в списке ниже с кнопкой "Удалить" рядом с ней.
• Нажатие на кнопку "Удалить" удаляет соответствующую задачу из списка.

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

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

👩‍💻 10 лучших CSS-библиотек и фреймворков для быстрой разработки фронтенда

Запутался в CSS-фреймворках? Мы собрали ТОП-10 самых крутых инструментов, которые реально экономят время на фронтенде. От тяжеловеса Bootstrap до минималистичного Milligram – разобрали плюсы каждого и объяснили, когда что использовать.

Читать...

🪄 25 CSS-трюков, которые должен знать каждый разработчик

Современный веб-дизайн требует глубокого понимания возможностей CSS. Мы расскажем о 25 передовых CSS-техниках, которые помогут вам создавать стильные, функциональные и производительные веб-сайты, соответствующие последним трендам.

Читать...

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