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

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

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

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

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

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

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

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

➡️ Пример:

function throttle(func, delay) {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func(...args);
    }
  };
}

const handleScroll = throttle(() => {
  console.log('Прокрутка страницы');
}, 1000);

window.addEventListener('scroll', handleScroll);

🗣️ В этом примере функция handleScroll вызывается не чаще одного раза в секунду, даже если пользователь прокручивает страницу интенсивно. Throttle помогает оптимизировать производительность и уменьшить количество вызовов функции.

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

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

Frontend Teсh Lead
🟢React 16, HTML5, CSS3, PostCSS, JSON, Git
🟢Уровень дохода не указан | от 5 лет

Lead Frontend Developer
🟢React, TypeScript, HTML5, CSS3, Python, Node.js, SQL
🟢от 5 000 до 8 000 $ до вычета налогов | от 5 лет

Frontend Tech Lead
🟢JavaScript, Vue.js, TypeScript, Webpack, микрофронтенд-архитектура
🟢Уровень дохода не указан | от 5 лет

Lead Frontend-разработчик
🟢HTML, CSS, JavaScript (ES6), React 16, React Router, Redux, Redux Saga, TypeScript, Webpack, React Native, PWA, Jest, Git
🟢от 300 000 ₽ на руки | от 6 лет

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

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

Читать...

🔗 Технический долг? Закрывай его по «принципу кафе»

Технический долг копится, как грязная посуда в раковине. Кажется, что решишь его «когда-нибудь», но это «когда-нибудь» не наступает.

👉 Совет: применяй «принцип кафе» — каждый раз, когда работаешь с файлом или модулем, оставь его в лучшем состоянии, чем нашёл. Понемногу рефакторь, добавляй комментарии или улучшай структуру. В итоге долг будет сокращаться без больших затрат времени.

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

Frontend Developer
🟢React, JavaScript, HTML, CSS
🟢Уровень дохода не указан | 3–6 лет

Senior Frontend Developer (Vue.JS)
🟢Vue3, TypeScript, Git
🟢Уровень дохода не указан | Более 6 лет

Senior Frontend Engineer
🟢React, Redux, Redux-Saga, TypeScript, MUI, Electron, Node.js
🟢Уровень дохода не указан | Более 6 лет

Senior Next.js Developer
🟢Next.js, React.js, TypeScript, Elasticsearch, Azure, Kubernetes, Terraform
🟢от 2 500 до 5 000 $ до вычета налогов | Более 6 лет

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

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

Читать...

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

Создайте поле для ввода пароля и кнопку "Показать/Скрыть". При нажатии на кнопку символы пароля должны переключаться между скрытым (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 ? 'Скрыть' : 'Показать';
});

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

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

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

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

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

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

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

Статья знакомит с фреймворком Next.js, рекомендованным командой React для новых проектов. На примере pet-проекта рассматриваются базовые возможности и преимущества использования Next.js.

Читать...

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

Создайте кнопку, при нажатии на которую появляется анимация загрузочного индикатора (спиннера) на 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);
});

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

Начинающий Typescript Fullstack разработчик (NestJS, React)
🟢TypeScript, Node.js, NestJS, React, Redux, MongoDB, PostgreSQL, Docker, Kubernetes, HTML5, CSS3
🟢до 90 000 ₽ на руки | Без опыта

Frontend-разработчик
🟢Nuxt 3, Vue 3, Tailwind CSS, SCSS/SASS, Pinia, Vite, Docker, Git
🟢от 6 000 000 сом на руки | Без опыта

Frontend-разработчик React, Canvas, WebGL, Pixi.js, Skia
🟢TypeScript, React, WebGL, Canvas, Skia, Pixi.js
🟢Уровень дохода не указан | Без опыта

JavaScript-разработчик
🟢JavaScript, Angular, REST API, Agile
🟢Уровень дохода не указан | 3–6 лет

👩‍💻 Confetti Button

Кнопка с вылетающими конфетти при нажатии. Сделана на CSS и JavaScript.

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

⚙️ Что такое event delegation в JavaScript и зачем его использовать?

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

➡️ Пример:

// Родительский элемент
const parent = document.querySelector('#parent');

// Используем делегирование
parent.addEventListener('click', (event) => {
  if (event.target.matches('.child')) {
    console.log(`Клик по элементу: ${event.target.textContent}`);
  }
});

// Динамическое добавление дочерних элементов
const newChild = document.createElement('div');
newChild.className = 'child';
newChild.textContent = 'Новый элемент';
parent.appendChild(newChild);

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

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

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

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 лет

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

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

Читать...

👩‍💻 Фильтрация списка через поле ввода

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

Требования:

• При вводе текста выполняется фильтрация: сравниваем введённую строку с каждым элементом списка.
• Элементы, соответствующие фильтру, остаются видимыми, остальные скрываются.

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

<input type="text" id="filterInput" placeholder="Фильтр...">
<ul id="items">
<li>Яблоко</li>
<li>Банан</li>
<li>Апельсин</li>
<li>Груша</li>
</ul>

const input = document.getElementById('filterInput');
const listItems = document.querySelectorAll('#items li');

input.addEventListener('input', () => {
const filter = input.value.toLowerCase();
listItems.forEach(li => {
li.style.display = li.textContent.toLowerCase().includes(filter) ? '' : 'none';
});
});

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

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

Читать...

👩‍💻 Broken Glass Effect

Сцена с эффектом сломанного стекла в месте клика. Сделана на CSS и JavaScript.

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

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

Senior Frontend разработчик
🟢JavaScript, TypeScript, Angular, React, jQuery, RxJS, HTML5, CSS, SCSS, Docker, Git
🟢от 150 000 ₽ до вычета налогов | 3–6 лет

Senior Frontend Developer
🟢TypeScript, React, Redux, MobX, Sass, Less, Ant Design, Material UI, Webpack, Git, Jira
🟢до 360 000 ₽ на руки | 3–6 лет

Frontend-разработчик
🟢HTML, CSS, JavaScript, jQuery, TypeScript, React, Vue, Webpack, Git
🟢от 220 000 ₽ на руки | 3–6 лет

Senior Frontend-разработчик JavaScript/React
🟢JavaScript, TypeScript, React, Redux, Redux RTK, ViteJS, Docker, GitLab CI/CD, WebRTC
🟢от 300 000 до 400 000 ₽ на руки | 3–6 лет

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

• Выбираем подарки с умом

• 10 лучших приёмов логирования для разработчиков

• Из белой каски и грязных сапог в белый халат и тапки

• Погружение в Web3: изучаем Node.js на открытом курсе

• Чем стартап отличается от бизнеса и что выбрать