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

• Знакомьтесь: input, output и model. Новые функции в Angular

• Мой путь в мире веб-рендеринга: от статических страниц к гибридным архитектурам

• Новый этап эволюции Vue — Vapor

• Как сделать один плагин сразу для всех сборщиков фронтенда?

• Личный опыт: добавление микроразметки на сайт

👩‍💻 Создание анимированного переключателя темы (светлая/тёмная)

Создайте переключатель, позволяющий пользователю менять тему страницы между светлой и тёмной. При переключении должна происходить плавная анимация перехода. Реализуйте переключение тем с помощью CSS-переменных и JavaScript.

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

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

<div class="theme-toggle">
<label class="switch">
<input type="checkbox" id="theme-switcher">
<span class="slider"></span>
</label>
<p>Нажмите, чтобы переключить тему</p>
</div>

/* Переменные для тем */
:root {
--bg-color-light: #ffffff;
--bg-color-dark: #333333;
--text-color-light: #000000;
--text-color-dark: #ffffff;
--transition-duration: 0.3s;
}

/* Общие стили */
body {
background-color: var(--bg-color-light);
color: var(--text-color-light);
transition: background-color var(--transition-duration), color var(--transition-duration);
}

/* Тёмная тема */
body.dark-theme {
background-color: var(--bg-color-dark);
color: var(--text-color-dark);
}

/* Стили для переключателя */
.theme-toggle {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
}

.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 24px;
transition: background-color var(--transition-duration);
}

.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 3px;
background-color: white;
border-radius: 50%;
transition: transform var(--transition-duration);
}

input:checked + .slider {
background-color: #2196F3;
}

input:checked + .slider:before {
transform: translateX(26px);
}

document.getElementById('theme-switcher').addEventListener('change', (event) => {
document.body.classList.toggle('dark-theme', event.target.checked);
});

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

JavaScript Software Engineer
🟢JavaScript, Node.js, SQL, Git, HTML, CSS, GraphQL, REST API, gRPC/Protobufs
🟢от 1 000 до 3 000 $ на руки | 3–6 лет опыта

Fullstack программист-разработчик WEB-приложений (NodeJS, React, PostgreSQL)
🟢JavaScript, Node.js, React, PostgreSQL, HTML, CSS, Express.js, SQL
🟢от 70 000 до 120 000 ₽ на руки | 1–3 года опыта

JavaScript-разработчик в ФинТех проект
🟢JavaScript, Angular, REST API, HTTP, Git, HTML, CSS
🟢от 150 000 ₽ на руки | 1–3 года опыта

👩‍💻 Rollback Toggle

Переключатель с имитацией физики. Сделан на SCSS и TypeScript.

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

👩‍💻 В чем разница между em и rem в CSS?

В CSS em и rem — это относительные единицы измерения, используемые для задания размеров шрифтов, отступов, полей и других стилей. em основывается на размере шрифта родителя, тогда как rem ориентирован на размер шрифта корневого элемента (html), что делает его предсказуемым и удобным для масштабирования.

➡️ Пример:

html {
  font-size: 16px; /* Базовый размер шрифта */
}

.container {
  font-size: 2em; /* 32px, основывается на размере родителя */
  margin: 1rem;   /* 16px, независимо от родителя */
}

🗣️ Использование rem помогает сохранить консистентность размеров при вложенных элементах, а em подходит для адаптивного дизайна, когда размеры зависят от родителей.

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

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

Frontend Developer (Видеоплеер)
• JavaScript, TypeScript, HTML, CSS, React, Webpack, Rollup, HLS, MPEG-DASH
• Уровень дохода не указан | Требуемый опыт: от 1 года

Frontend developer (Vue.js)
• Vue.js, Nuxt.js, JavaScript, CSS, HTML, Webpack, Vite, Git
• от 200 000 до 300 000 ₽ | Требуемый опыт: от 3 лет

Frontend разработчик middle/middle+
• JavaScript, TypeScript, React, Node.js, REST API, Webpack, Gulp, CSS-препроцессоры, Git
• Уровень дохода не указан | Требуемый опыт: от 3 лет

👩‍💻 Пара шаблонов кастомизированных элементов Handlebars для Apache Superset — 2

Первая часть статьи даёт правила для Handlebars в Superset. Далее — готовый код HTML + CSS, который можно сразу использовать, и разбор CSS-элементов с объяснениями.

Читать...

👩‍💻 Адаптивная сетка карточек товаров с CSS Grid

Напишите разметку и стили для отображения карточек товаров в сетке. Сетка должна адаптироваться к размеру экрана: на больших экранах отображать карточки в три колонки, на планшетах — в две, а на мобильных устройствах — в одну колонку. Карточки должны иметь тень, отступы и закруглённые углы, чтобы выглядеть как отдельные блоки.

➡️ Пример: Для экрана шириной 1024px и выше, массив товаров должен отображаться в виде трёх колонок. При меньшем размере — перестраиваться автоматически.

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

<div class="product-grid">
<div class="product-card">Товар 1</div>
<div class="product-card">Товар 2</div>
<div class="product-card">Товар 3</div>
<div class="product-card">Товар 4</div>
<div class="product-card">Товар 5</div>
<div class="product-card">Товар 6</div>
</div>

/* Основной контейнер */
.product-grid {
display: grid;
gap: 20px;
padding: 20px;
}

/* Стили карточек */
.product-card {
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}

/* Три колонки на больших экранах */
@media (min-width: 1024px) {
.product-grid {
grid-template-columns: repeat(3, 1fr);
}
}

/* Две колонки на планшетах */
@media (min-width: 768px) and (max-width: 1023px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
}

/* Одна колонка на мобильных */
@media (max-width: 767px) {
.product-grid {
grid-template-columns: 1fr;
}
}

👩‍💻 Масштабируемый CSS с архитектурой ITCSS

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

Читать...

👩‍💻 Scroll-Driven Dock

Настраиваемая панель инструментов. Сделана на SVG, CSS и JavaScript.

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

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

Middle+/Senior Frontend developer (СберНПФ)
• Angular, TypeScript, JavaScript, Node.js, PostgreSQL, Apache Kafka, REST
• Уровень дохода не указан | от 3 лет опыта

Frontend-разработчик Angular (middle+/senior)
• Angular, JavaScript, HTTP, REST API, Agile, CI/CD, NGINX, Unit-тестирование
• Уровень дохода не указан | от 3 лет опыта

Fullstack Typenoscript Developer [Senior]
• TypeScript, Node.js, React, SQL, Kubernetes, Docker
• Уровень дохода не указан | от 4 лет опыта

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

• В какой момент профессия программиста свернула не туда?

• Офис Intel в Израиле отменил бесплатный кофе

• Войти в IT – в 37 и с дипломом филфака

• Путь к мастерству: Как стать успешным разработчиком

• Галера от HH или джуны по-дешевке

👩‍💻 Всё ли ты знаешь о работе с асинхронностью?

Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину.

Читать...

👩‍💻 Что такое Grid Layout в CSS и как он работает?

CSS Grid Layout — это мощная система для создания сеточных макетов на веб-страницах. Она позволяет легко размещать элементы на странице в виде строк и столбцов с минимальным количеством кода. Grid обеспечивает точное позиционирование и гибкость, идеально подходя для сложных макетов.

➡️ Пример:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Три равных столбца */
    gap: 10px; /* Расстояние между элементами */
  }
  .item {
    background: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

🗣️ В этом примере .grid-container создает сетку с тремя столбцами одинаковой ширины. Свойство gap добавляет отступы между элементами. Grid Layout упрощает создание адаптивных макетов.

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

⚙️ PHP 8.4: exit/die изменены из языковых конструкций в функции

Ключевое слово exit и его псевдоним die — языковые конструкции, выводящие сообщение и завершающие текущий сценарий. В CLI-приложениях exit/die можно использовать для завершения работы приложения с заданным кодом выхода.

Читать...

✔️ Современные способы переключения контента

В статье обсуждаются современные подходы к переключению контента в вебе. Рассматриваются нативные API, их преимущества, недостатки и неожиданные особенности, включая работу с псевдоэлементами.

Читать...

🕵️ Знай систему на уровне зависимостей

Работаешь с проектом, где используется миллион библиотек и фреймворков? Когда что-то ломается, найти виноватого становится задачей.

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

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

Tech Lead (PHP)
🟢PHP, Symfony, Laravel, микросервисная архитектура, Golang, Python
🟢Уровень дохода не указан | более 6 лет опыта

Team Lead Frontend (Vue.js / Nuxt.js)
🟢Vue.js, Nuxt.js, JavaScript, PWA, Vuetify, CSS3, HTML5, SASS, SCSS, Bootstrap, RESTful API, WebSocket, TypeScript, Webpack
🟢Уровень дохода не указан | более 6 лет опыта

Junior Frontend Developer
🟢Angular 14+, TypeScript, SCSS, HTML, REST APIs, Web Components, Yarn, Webpack
🟢Уровень дохода не указан | 1–3 года опыта

👩‍💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript

В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий.

Читать...

👩‍💻 Динамический поиск в списке

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

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

• При вводе текста список фильтруется по введённым данным.
• Поиск нечувствителен к регистру.
• Если текстовое поле пустое, отображается весь список.

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

<input type="text" id="searchInput" placeholder="Введите текст для поиска">
<ul id="itemList">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grapes</li>
<li>Peach</li>
</ul>

const searchInput = document.getElementById('searchInput');
const itemList = document.getElementById('itemList');
const items = itemList.getElementsByTagName('li');

searchInput.addEventListener('input', () => {
const filter = searchInput.value.toLowerCase();

Array.from(items).forEach((item) => {
const text = item.textContent.toLowerCase();
item.style.display = text.includes(filter) ? '' : 'none';
});
});

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

• DRY-фреймворк: продолжение

• Как нарисовать квадрат 3 × 3 см на веб-странице*

• Скучный Интернет и как «бесполезные сайты» могут спасти от этого

• Простой мини-чат на FastApi: Современный интерфейс, вебсокеты и SQLAlchemy с деплоем

• Как мотивировать себя на правильные вещи