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

• Почему я не готовлюсь к алгоритмическому интервью

• 7 популярных библиотек Vue 3 UI-компонентов, которые заслуживают внимания

• Жаркий спор по теме Masonry в CSS

• Разница между ранним и поздним связыванием

• Расширения VSCode для комфортной работы с проектами

👩‍💻 Button with tooltip hover timing feedback

Панель плеера с подсказками при наведении. Сделана на SVG и CSS.

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

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

HTML-верстальщик
🟢HTML, CSS, SCSS, JavaScript, GSAP, Anime.js, Canvas, Git, Gulp, Figma, Photoshop, Illustrator
🟢от 80 000 до 130 000 ₽ | 1–3 года

Дизайнер-верстальщик
🟢HTML, CSS, JavaScript, Figma, Tilda, Clickfunnels, AXL
🟢от 60 000 до 200 000 ₽ | 3–6 лет

HTML-верстальщик/CSS Senior
🟢HTML, CSS, SCSS, Less, JavaScript, Git, Figma, Photoshop, Illustrator
🟢от 130 000 до 180 000 ₽ | 3–6 лет

Frontend-разработчик для сайта
🟢HTML, CSS, JavaScript, Vue.js, jQuery, Gulp, Figma
🟢от 120 000 ₽ | 3–6 лет

Frontend-разработчик (Middle/Senior)
🟢JavaScript, Vue3, Nuxt3, HTML, CSS, SCSS, LESS, Git, REST API
🟢Уровень дохода не указан | 3–6 лет

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

• Почему любая оценка IT-шников обречена на провал?

• Карьерный рост из senior: кто такой staff-инженер?

• «Так и знала, что вы — бывший двоечник!» Самые глупые ошибки моей компьютерной молодости

• Что лучше — оценка рекрутера или подбрасывание монетки?

• Мотивационные стили в обучении: почему вам (возможно) не нужны цели или общение с одногруппниками

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

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

Читать...

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

HTML-верстальщик (Team Lead)
🟢HTML, CSS, JavaScript, Photoshop
🟢от 100 000 ₽ на руки | 1–3 года

Ведущий Web-дизайнер
🟢Figma, Photoshop, Illustrator, AfterEffects, HTML, CSS
🟢от 160 000 ₽ на руки | 3–6 лет

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

⚙️ PHP 8.4: exit/die изменены из языковых конструкций в функции

Ключевое слово exit и его псевдоним die — языковые конструкции, выводящие сообщение и завершающие текущий сценарий. В CLI-приложениях exit/die можно использовать для завершения работы приложения с заданным кодом выхода.

Читать...

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

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

➡️ Пример:

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

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

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

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

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

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

Senior Frontend Developer
🟢JavaScript (ES5/ES6), TypeScript, React, Redux, Webpack, Docker, GitlabCI, Figma, WebSockets, Web Workers, Английский язык
🟢до 4 000 $ | 3–6 лет

Front-End разработчик
🟢HTML, CSS, JavaScript, React, MySQL, Git, Ajax, jQuery, Английский язык
🟢до 2 500 $ | 3–6 лет

Fullstack Developer (.Net/JS)
🟢.NET, C#, ASP.NET (Core), Entity Framework Core, Vue.js, TypeScript, DevExpress, Azure, Kubernetes, GitHub Actions, Terraform, Ansible, Microsoft SQL Server, Oracle DB, PostgreSQL, Английский язык
🟢от 2 500 до 3 250 € до вычета налогов | 3–6 лет

Frontend разработчик (Angular, jQuery)
🟢JavaScript, jQuery, HTML, CSS, TypeScript, Angular 9+, HTML5 Canvas
🟢до 700 000 ₸ | 3–6 лет

👩‍💻 Эта информация навсегда изменит ваше отношение к коду JavaScript

К концу этой статьи вы превратитесь из простого пользователя JavaScript в того, кто глубоко его понимает и кого не удивляют его уникальные возможности. Это открытие расширит ваши знания и навыки, а также позволит использовать такие "фишки" JS, которых нет в других популярных языках.

Читать...

👩‍💻 Центрирование текста внутри блока

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

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

• Блок имеет фиксированные размеры: 200px на 200px.
• Текст находится в центре блока.

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

<div class="centered-block">
Центрированный текст
</div>

.centered-block {
width: 200px;
height: 200px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border: 1px solid #ccc;
}

👩‍💻 7 советов по очистке кода React

В этой статье собраны семь практических рекомендаций, помогающих создавать чистый и поддерживаемый код React.

Читать...

👩‍💻 Стрелочная функция vs. обычная функция в JavaScript

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

Читать...

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

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

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

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

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

<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());
});

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

Laravel/Vue.js PHP разработчик (fullstack)
🟢PHP, Docker, MySQL, Vue.js, Linux, API, Git, Laravel, fullstack
🟢от 50 000 до 100 000 ₽ | Без опыта

Junior React Engineer
🟢JavaScript, React, TypeScript, GitHub, HTML, CSS, HTTP, RESTful API, SQL, NoSQL
🟢Уровень дохода не указан | Без опыта

HTML верстальщик (Junior)
🟢HTML, CSS, Верстка, Кроссбраузерная верстка
🟢Уровень дохода не указан | 1–3 года

HTML верстальщик / Junior Frontend разработчик
🟢HTML5, CSS3, JavaScript, jQuery, Git, Кроссбраузерная верстка
🟢от 45 000 ₽ | 1–3 года

Программист PHP (Junior)
🟢CSS, PHP, HTML, jQuery, JavaScript, Git, CRM, Веб-программирование
🟢от 15 000 до 40 000 ₽ | Без опыта

👩‍💻 Signature animation

Поле для ввода подписи с интересной анимацией. Сделана на SVG, CSS и JavaScript.

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

⚙️ Что такое 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);

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

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

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

Frontend Developer (Nuxt)
• Vue.js, Nuxt.js, JavaScript, SCSS, Адаптивная верстка, Twitter Bootstrap
• до 150 000 ₽ | Средний (Middle)

Angular разработчик
• JavaScript, Angular, Адаптивная верстка
• от 3 500 до 5 000 € | Средний (Middle)

Frontend-разработчик Vue/React
• React.js, Vue.js, TypeScript, HTML, CSS, JavaScript (ES6), API, JWT, Git
• Уровень дохода не указан | Средний (Middle)

WordPress Developer
• PHP, JavaScript, Git, WordPress, Адаптивная верстка, MySQL, Redis, Английский язык
• от 160 000 ₽ | Средний (Middle)

Fullstack разработчик (Laravel + Vue.js)
• Laravel, PHP, JavaScript, Vue.js, React, Веб-разработка, jQuery, Symfony, Адаптивная верстка
• от 1 600 до 2 240 $ | Средний (Middle)

👩‍💻 10 лучших CSS-библиотек и фреймворков для быстрой разработки фронтенда

Запутался в CSS-фреймворках? Мы собрали ТОП-10 самых крутых инструментов, которые реально экономят время на фронтенде. От тяжеловеса Bootstrap до минималистичного Milligram – разобрали плюсы каждого и объяснили, когда что использовать.

Читать...

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

Создайте карточку, которая содержит изображение сверху и текст ниже. Карточка должна быть адаптивной: на больших экранах занимать 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%; /* Занимает всю ширину на маленьких экранах */
}
}