👩‍💻 Кнопка с "волновым" эффектом

Создайте кнопку, при нажатии на которую появляется анимация "волн", расходящихся из точки клика.

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

• При нажатии на кнопку из точки клика расходится круг, который исчезает через мгновение.
• Анимация должна быть плавной и не мешать повторным кликам.

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

<button class="ripple-button">Нажми меня</button>

.ripple-button {
position: relative;
overflow: hidden;
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007BFF;
border: none;
border-radius: 4px;
cursor: pointer;
}

.ripple-button .ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
animation: ripple-animation 0.6s linear;
background-color: rgba(255, 255, 255, 0.6);
}

@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}

document.querySelector('.ripple-button').addEventListener('click', function (event) {
const ripple = document.createElement('span');
const rect = this.getBoundingClientRect();

ripple.style.width = ripple.style.height = `${Math.max(rect.width, rect.height)}px`;
ripple.style.left = `${event.clientX - rect.left - ripple.offsetWidth / 2}px`;
ripple.style.top = `${event.clientY - rect.top - ripple.offsetHeight / 2}px`;

ripple.className = 'ripple';
this.appendChild(ripple);

ripple.addEventListener('animationend', () => ripple.remove());
});

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

PHP-разработчик junior/junior+
🟢PHP 7.4+, SQL, Laravel, PostgreSQL, REST, JSON, XML
🟢от 80 000 ₽ на руки | Без опыта

Frontend-разработчик
🟢React, Node.js, Webpack, Docker, Gitlab, Jest
🟢от 140 000 ₽ на руки | 1–3 года опыта

Fullstack junior PHP разработчик (Symfony, Laravel; React)
🟢PHP, MySQL, Laravel, Fullstack, React.js, Symfony, Vue, React, RabbitMQ, MongoDB, Node.js, Vue.js
🟢до 130 000 ₽ на руки | 3–6 лет опыта

👩‍💻 Idea Form

Анимированная форма для ввода с появлением при нажатии. Сделана на SCSS и TypeScript.

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

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

Замыкания позволяют функции запоминать переменные из своей внешней области видимости даже после завершения выполнения внешней функции.

function makeCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

🗣️ Замыкания полезны для создания функций с внутренним состоянием, например, счётчиков или настройки приватных данных.

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

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

Middle frontend developer (React)
• JavaScript, React, HTML, CSS, Redux, TypeScript, Webpack
• Уровень дохода не указан | Требуемый опыт не указан

Middle frontend developer (Vue)
• JavaScript, Vue.js, HTML, CSS
• Уровень дохода не указан | Требуемый опыт не указан

Frontend разработчик (React)
• React, TypeScript, JavaScript, Redux, Next.js, MobX
• Уровень дохода не указан | Требуемый опыт не указан

👩‍💻 Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий

Если вы погружены в мир судоку, то наверняка ищете варианты ускоренного решения задач по программированию. Предлагаем ознакомиться с одним из них. Использование в нем хэш-карт и рекурсий значительно ускоряет решение головоломки.

Читать...

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

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

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

• Изображение всегда занимает всю ширину карточки.
• Текст расположен под изображением.
• Карточка адаптируется к размеру экрана.

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

<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Image" class="card-image">
<div class="card-text">
<h3>Заголовок</h3>
<p>Описание карточки. Это адаптивная карточка с текстом и изображением.</p>
</div>
</div>

/* Контейнер карточки */
.card {
display: flex;
flex-direction: column;
width: 25%; /* Для больших экранов */
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}

.card:hover {
transform: scale(1.05);
}

/* Изображение в карточке */
.card-image {
width: 100%;
height: auto;
display: block;
}

/* Текст карточки */
.card-text {
padding: 16px;
text-align: center;
background-color: #f9f9f9;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
.card {
width: 100%; /* Занимает всю ширину на маленьких экранах */
}
}

👩‍💻 Переходите на сторону light-dark()

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

Читать...

👩‍💻 Broken Glass Effect

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

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

👩‍💻 CSS :has() — Псевдокласс, который давно ждали

Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов.

Читать...

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

• Пришёл на вакансию дизайнера, а стал питонистом: как IT-специалисты нашли свою первую работу

• На сколько денег может рассчитывать ИТ-предприниматель в разных ветках развития

• Анализ задачи с собеседования в Google: конь и телефонные кнопки

• Быстрый старт в QA Fullstack: чем вооружиться будущему стажеру в Альфа-Банке

• Как убить самоорганизацию в команде: вредные советы для лидера

📊 10 методов SEO-оптимизации JavaScript, которые должен знать каждый фронтендер

Веб-приложения часто используют JavaScript для динамического создания контента и удобного взаимодействия с пользователем. Но поисковые роботы не всегда могут правильно прочитать и проиндексировать такой контент – в итоге сайт теряет посетителей. На помощь придут 10 способов SEO-оптимизации для JavaScript.

Читать...

⚙️ Что такое псевдоэлементы в CSS и как они используются?

Псевдоэлементы в CSS — это инструменты, которые позволяют стилизовать определенные части элемента, такие как первая буква, первая строка, или добавлять контент до или после элемента. Они начинаются с :: (например, ::before или ::after) и не требуют изменения HTML-разметки.

➡️ Пример:

<p class="text">Это пример текста.</p>

<style>
  .text::before {
    content: "👉 "; /* Добавляем символ перед текстом */
    color: red;
  }

  .text::after {
    content: " ✔️"; /* Добавляем символ после текста */
    color: green;
  }
</style>

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

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

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

Frontend-разработчик
• React.js, TypeScript, JavaScript, CSS, Sass, Webpack, Git, Docker, REST
• Уровень дохода не указан | от 3 лет

Frontend Developer (VueJS)
• Vue.js, TypeScript, JavaScript, HTML5, CSS3, SASS, SCSS, LESS, Stylus, Babel, Webpack, Npm, Yarn, Jest, Mocha, REST API
• Уровень дохода не указан | от 5 лет

Middle/Senior frontend dev
• Vue.js, Nuxt.js, TypeScript, JavaScript, CSS, SASS, Tailwind, GraphQL, REST, WebSocket, Git
• от 200 000 до 280 000 ₽ | от 3 лет

Senior Frontend Engineer
• Next.js, TypeScript, JavaScript, React.js, D3.js, Chart.js, Redux, Zustand, Jest, React Testing Library, REST API
• до 5 000 $ | от 6 лет

Frontend разработчик Angular
• Angular, JavaScript, HTML, CSS, REST API
• Уровень дохода не указан | от 3 лет

👩‍💻 Шаблон “Декоратор” в разработке на TypeScript

Овладейте полезным инструментом TS-разработчика - шаблоном проектирования "Декоратор". Он позволяет динамически расширять функциональность объектов, не усложняя читаемость кода.

Читать...

🔍 Развивай навык «поиска причин»

Когда всё ломается, проще всего сказать: «Это сервер/библиотека/коллега виноват». Но это не решает проблему.

👉 Совет: тренируйся находить корневую причину. Используй технику «5 почему» — спрашивай «почему?» до тех пор, пока не дойдёшь до корня. Это не только поможет исправить баги, но и сделает тебя мастером в отладке.

👩‍💻 5 HTML-атрибутов для улучшения пользовательского опыта и SEO

Разбираем мощные, но часто игнорируемые атрибуты HTML, способные значительно улучшить пользовательский опыт и SEO вашего сайта. От многоязычности до удобства заполнения форм – все, что нужно современному разработчику

Читать...

🧨 Работа с куки-файлами хуже сапёрного дела

Статья разбирает особенности работы с HTTP-куки и неожиданные проблемы, которые могут возникнуть при их использовании. Рассматривается пример с сериализацией JSON, казалось бы, безобидный, но вызывающий интересные нюансы в обработке браузерами и серверами.

Читать...

👩‍💻 Реализация кнопки с таймером блокировки

Создайте кнопку, которая становится недоступной (disabled) на 5 секунд после каждого нажатия. Отображайте обратный отсчёт времени на кнопке, чтобы пользователь видел, когда её можно будет нажать снова.

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

• При нажатии на кнопку она становится недоступной.
• На кнопке отображается обратный отсчёт времени: 5... 4... 3....
• Через 5 секунд кнопка снова становится активной и текст возвращается в исходное состояние.

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

<button id="timer-button">Нажми меня</button>


#timer-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

#timer-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}


const button = document.getElementById('timer-button');

button.addEventListener('click', () => {
let countdown = 5;

// Деактивируем кнопку и запускаем таймер
button.disabled = true;
const interval = setInterval(() => {
button.textContent = `Ждите... ${countdown}`;
countdown--;

if (countdown < 0) {
clearInterval(interval);
button.disabled = false;
button.textContent = 'Нажми меня';
}
}, 1000);
});

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

• HMPL — лучшая альтернатива HTMX

• Как я получил 50000 + 0 долларов за уязвимость в Zendesk

• Неизвестно полезный CSS. Часть 5

• База, которую нужно знать про JSON Schema

• Магия CSS на практике: советы по вёрстке от гика. Часть 5

➡️ Веб-приложения будущего: что нужно знать о WebAssembly

Статья рассказывает о WebAssembly (Wasm) — мощном инструменте для запуска высокопроизводительных приложений в браузере. Обсуждается, как Wasm позволяет использовать языки вроде Rust и C++, решает задачи сложных вычислений, игр и анализа данных, а также его перспективы в веб-разработке.

Читать...