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

• DRY-фреймворк: как сократить HTML-код и писать только на CSS

• Ультимативный ресурс по программированию: сборник бесплатных чит-листов по программированию

• Atomic CSS Deep Dive

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

• Polling vs Websockets (с примерами на React хуках)

⚙️ 7 HTML-трюков, которые вам нужно знать

Семь HTML-трюков, которые должны быть в арсенале каждого веб-разработчика. Эти приемы помогут вам создавать более удобные и визуально привлекательные сайты, улучшая взаимодействие с пользователями.

Читать...

✨ Tailwind CSS: Как Добавить Эффектные Анимации

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

Читать...

👩‍💻 Exes and Ohs

Проверьте, содержит ли строка одинаковое количество "x" и "o". Метод должен возвращать логическое значение и быть нечувствительным к регистру. Строка может содержать любой символ.

Пример кода:

XO("ooxx") => true
XO("xooxx") => false
XO("ooxXm") => true
XO("zpzpzpp") => true // when no 'x' and 'o' is present should return true
XO("zzoo") => false

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

function XO(str) {
// Преобразуем строку в нижний регистр
str = str.toLowerCase();

// Подсчитываем количество 'x' и 'o'
let xCount = 0;
let oCount = 0;

for (let char of str) {
if (char === 'x') xCount++;
if (char === 'o') oCount++;
}

// Сравниваем количество 'x' и 'o'
return xCount === oCount;
}

// Примеры использования
console.log(XO("ooxx")); // true
console.log(XO("xooxx")); // false
console.log(XO("ooxXm")); // true
console.log(XO("zpzpzpp")); // true
console.log(XO("zzoo")); // false

🖥 Генераторы CSS-кода: самая полная коллекция

Коллекция генераторов CSS-кода для разнообразных элементов дизайна UI (фоны, градиенты, кнопки, разделители, тени, фильтры изображений).

Читать...

👩‍💻 Что такое замыкания в JavaScript?

В этой статье мы рассмотрим замыкания в JavaScript. Вы познакомитесь с определением замыкания и разберетесь в его работе на примере.

Читать...

👩‍💻 CSS-only Custom range slider

Интересный слайдер с динамичным отображением. Сделан на чистом CSS.

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

👩‍💻 VS Code на максималках: 15 крутых расширений для фронтендера

Собрали для вас 15 плагинов, которые облегчат жизнь веб-разработчику. Тут всё: от работы с HTML до интеграции с Figma и Docker.

Читать...

👩‍💻 Как реализовать feature gate в React

Предлагаем доступное руководство по реализации feature gate. Этот простой, но мощный механизм позволит легко управлять выпуском новых функций.

Читать...

👩‍💻 Как инженеру-программисту Reactjs перейти на Swift и SwiftUI

Узнаем, как плавно перейти с ReactJS на Swift и SwiftUI. Для этого сопоставим их наиболее распространенные шаблоны проектирования.

Читать...

👩‍💻 Text-Animation-test

Простая сцена с анимированным текстом. Сделан на чистом CSS.

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

👩‍💻 Введение в Page Visibility API

Познакомимся с Page Visibility API, рассмотрим его назначение, принцип работы, область применения и практические примеры.

Читать...

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

• Как я стал сертифицированным разработчиком Vue.js: вся правда об экзамене

• Pipelining & Composing: улучшаем читаемость кода. Реализация на TypeScript

• Что почитать начинающим разработчикам: подборка книг по JavaScript

• Создание полного Fast-API сервиса с фронтендом и деплоем за полчаса

• ХрюХрюКар: как перестать беспокоиться, начать создавать сервисы и обзавестись друзьями

👩‍💻 Учебник по JavaScript: работа с объектами

Статья охватывает все аспекты типа Object: создание, наследование, работа с полями и сериализация. Новички освоят базовые концепции языка, а продвинутые пользователи освежат в памяти знания.

Читать...

👩‍💻 Полезная шпаргалка по хукам в React

Хуки — это функции, которые позволяют легко управлять состоянием компонентов в React. Новички смогут быстрее понять, как всё работает, а опытные разработчики смогут закрыть свои вопросы.

Читать...

👀 Прочтите это, если планируете работать с Next.js

В статье разбирается, почему выбор Next.js как основы для проекта может обернуться ловушкой зависимости от Vercel, несмотря на его опенсорсную оболочку. Рассматриваются последствия и реальные ограничения.

Читать...

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

​​Middle Frontend Developer
🟢TypeScript, React, Next.js, MUI, CSS-in-JS
🟢от 250 000 ₽ | 1–3 года​

Frontend developer (React)
🟢JavaScript, React.js, Redux, TypeScript, CSS Modules, REST API
🟢Уровень дохода не указан | 1–3 года​

Frontend разработчик (Junior/Middle)
🟢JavaScript, TypeScript, React
🟢Уровень дохода не указан | 1–3 года

⚙️ Скрываем без JavaScript элементы, требующие JavaScript

Автор делится способом спрятать JS-зависимые элементы, если скрипты отключены. Без костылей и стыда — всего пара строк CSS решают проблему красиво. Даже кнопка "Поделиться" теперь без стресса.

Читать...

⚙️ Адаптивная вёрстка с учётом размера шрифта пользователя и брейкпоинты

Автор размышляет, как правильно подбирать брейкпоинты для адаптива, делится выводами из личной практики и пересобирает Bootstrap с новыми подходами. Полезно всем, кто пишет под любые экраны.

Читать...

👩‍💻 Обзор курса “Полное введение в React” от Frontend Masters

Стоит ли тратить время и деньги на изучение курса “Полное введение в React, v8” от Frontend Masters? Ответить на этот вопрос поможет подробный обзор курса с оценкой его содержания, структуры, подхода к обучению и результатов, которых можно достигнуть.

Читать...

👩‍💻 3D wave animation

Анимированная галерея с эффектом волны. Сделана на чистом CSS.

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