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

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

Frontend developer (React/crypto)
🟢React, NextJS, Tailwind, ethers.js, git, mongoDB, NestJS, SQL
🟢от 2 500 до 4 000 $ до вычета налогов | 1–3 года опыта

Frontend-разработчик
🟢JavaScript, TypeScript, HTML, CSS, Vue.js, Git, Docker
🟢от 200 000 до 230 000 ₽ до вычета налогов | 1–3 года опыта

React Frontend-разработчик (на верстку креативных сайтов)
🟢React, Next.js, JavaScript, TypeScript, HTML, CSS, GSAP, Framer Motion, Git, Figma
🟢от 80 000 до 120 000 ₽ на руки | 1–3 года опыта

👩‍💻 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;
}