👩‍💻 Fancy Fading Footer

Стильный футер с эффектом блюра. Сделан на чистом CSS.

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

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

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

➡️ Пример:

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

// Использование debounce
const handleResize = debounce(() => {
  console.log('Окно изменилось!');
}, 300);

window.addEventListener('resize', handleResize);

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

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

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

React разработчик
• TypeScript, WebSockets, React, Effector, Express
• от 150 000 до 250 000 ₽ | 3 года опыта

React Native разработчик
• React Native, React, Redux, Flutter, PHP, Laravel, Next.js, C#, TypeScript, JavaScript
• от 140 000 до 160 000 ₽ | 3 года опыта

Middle Fullstack Developer
• React, Vue.js, Webpack, TypeScript, Node.js, MongoDB
• от 3 800 до 5 500 $ | 5 лет опыта

👩‍💻 Улучшение производительности с делегированием событий

Статья объясняет технику делегирования событий в веб-разработке, показывая, как использование одного слушателя на родительском элементе упрощает управление событиями и повышает производительность.

Читать...

👩‍💻 Подсчёт частоты элементов в массиве

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

Пример:

const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result); 
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}

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

function countFrequency(array) {
return array.reduce((acc, item) => {
acc[item] = (acc[item] || 0) + 1;
return acc;
}, {});
}

// Пример использования:
const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result);
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}

👩‍💻 TypeScript в деталях: настраиваем tsconfig.json правильно

Один файл, который может изменить все: полное руководство по tsconfig.json. Разбираем каждый параметр и его влияние на разработку, сборку и поддержку TypeScript-проектов.

Читать...

👩‍💻 Toggle Pill

Набор переключателей с разными стилями анимаций. Сделан на чистом CSS.

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

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

Middle+ Frontend developer (React) СберНПФ
• TypeScript, JavaScript, React, Webpack
• Уровень дохода не указан | 2 года опыта

Senior Fullstack developer
• JavaScript, TypeScript, Node.js, React
• Уровень дохода не указан | Senior/Lead уровень

React.js Developer
• React, React Native, TypeScript, Redux, Sass, CSS, HTML, REST, JSON, Node.js
• от 5 000 $ | 5 лет опыта

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

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

• Три рецидива синдрома самозванца: из историка в системного аналитика

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

• ИТ-пенсионеры и где они обитают

• Пресловутые софтскилы и карьера в IT

👩‍💻 8 важнейших аспектов JavaScript, которые нужно освоить до изучения React

Изучение React без прочной базы JavaScript похоже на строительство дома без фундамента. В этой статье разберем 8 ключевых концепций, которые помогут тебе уверенно чувствовать себя в React-разработке и писать качественный код.

Читать...

⚙️ Как работает свойство z-index в CSS?

z-index управляет тем, как элементы накладываются друг на друга в трёхмерном пространстве веб-страницы. Элементы с большим значением z-index будут отображаться поверх тех, у которых значение меньше.

➡️ В этом примере элемент с z-index: 2 будет отображаться поверх элемента с z-index: 1:

.element1 {
  position: relative;
  z-index: 1;
}

.element2 {
  position: relative;
  z-index: 2;
}

🗣 Важно помнить, что свойство z-index работает только с элементами, у которых установлено позиционирование (position: relative, absolute, fixed или sticky).

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

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

Руководитель группы разработки
• Git, Docker, PHP, Laravel, React, CI/CD, Управление разработкой, Управление людьми, Ведение переговоров
• Уровень дохода не указан | Требуемый опыт не указан

Fullstack TeamLead
• PHP, Laravel, Python, CI/CD, Управление разработкой
• до 400 000 ₽ | от 6 лет опыта

Руководитель web-разработки
• Git, Docker, PHP, Laravel, React, CI/CD, Управление разработкой, Управление людьми, Ведение переговоров
• Уровень дохода не указан | Требуемый опыт не указан

👩‍💻 Проблема с new URL(), и как URL.parse() её решает

Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна.

Читать...

🖇 Избегай зависимости от "чужого кода"

Ты решил проблему через копипасту кода с форума или GitHub? Быстро, но опасно.

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

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

Senior Frontend Developer (Team Lead)
🟢TypeScript, React, Redux Toolkit, Amazon IVS Broadcast SDK, hls.js, WebSocket, Formik, Yup, CSS (Sass/Scss), Swagger, Postman
🟢Уровень дохода не указан | 3–6 лет опыта

PHP Developer
🟢PHP, Symfony, Laravel, SQL (MS SQL, MySQL), Git, JavaScript, HTML, CSS, AJAX, Unit Testing
🟢Уровень дохода не указан | 3–6 лет опыта

PixiJS Frontend Developer
🟢PixiJS, JavaScript, Git, Unit Testing, API Integration, Game UI Development
🟢Уровень дохода не указан | 1–3 года опыта

👩‍💻 Ошибки при работе с tailwindcss

Рассмотрим распространенные ошибки которые допускают разработчики при работе с tailwind и пути их решения.

Читать...

👩‍💻 Создание карточки с изображением и текстом, выровненным по нижнему краю

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

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

• Изображение занимает верхнюю часть карточки.
• Текст закреплён внизу карточки, даже если изображение маленькое.

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

<div class="card">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="card-img">
<div class="card-text">Текст внизу карточки</div>
</div>

.card {
width: 200px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-img {
width: 100%;
height: auto;
max-height: 70%; /* Ограничиваем высоту изображения */
}

.card-text {
padding: 10px;
background-color: #f9f9f9;
text-align: center;
}

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

• Знакомьтесь: 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.

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