👩‍💻 Что такое Grid Layout в CSS и как он работает?

CSS Grid Layout — это мощная система для создания сеточных макетов на веб-страницах. Она позволяет легко размещать элементы на странице в виде строк и столбцов с минимальным количеством кода. Grid обеспечивает точное позиционирование и гибкость, идеально подходя для сложных макетов.

➡️ Пример:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Три равных столбца */
    gap: 10px; /* Расстояние между элементами */
  }
  .item {
    background: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

🗣️ В этом примере .grid-container создает сетку с тремя столбцами одинаковой ширины. Свойство gap добавляет отступы между элементами. Grid Layout упрощает создание адаптивных макетов.

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

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

Верстальщик HTML
🟢HTML, CSS3, SCSS, JavaScript, jQuery, Bootstrap, Git
🟢Уровень дохода не указан | 1–3 года

Сreative Middle HTML-верстальщик (Frontend-разработчик)
🟢HTML, PUG, JavaScript, CSS, SCSS, БЭМ, кроссбраузерная вёрстка, GSAP, AnimateJs, Git
🟢Уровень дохода не указан | 3–6 лет

Frontend разработчик middle
🟢HTML, CSS, SCSS, PostCSS, JavaScript, Git, Pug, Fancybox, Swiper, Yandex Map
🟢от 140 000 до 180 000 ₽ | 3–6 лет

Middle Веб Дизайнер на Tilda
🟢Figma, Tilda, Web-дизайн, Дизайн, Веб-дизайн
🟢от 70 000 до 90 000 ₽ | 1–3 года

Дизайнер-верстальщик
🟢Adobe Illustrator, Adobe XD, Adobe InDesign, Полиграфический дизайн, Графический дизайн, Верстка, Дизайн-мышление, Верстка презентаций, Дизайн наружной рекламы
🟢от 55 000 до 65 000 ₽ | 1–3 года

👩‍💻 Фиксированная кнопка внизу экрана

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

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

• Кнопка всегда остаётся в правом нижнем углу экрана.
• При наведении на кнопку её цвет меняется на более тёмный оттенок.
• Кнопка не перекрывает содержимое страницы и выглядит гармонично.

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

<div class="content">
<p>Основное содержимое страницы...</p>
</div>
<button class="floating-button">Нажми меня</button>

/* Стили основного содержимого */
.content {
padding: 20px;
font-family: Arial, sans-serif;
line-height: 1.6;
}

/* Фиксированная кнопка */
.floating-button {
position: fixed;
bottom: 20px;
right: 20px;
padding: 15px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 50px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}

/* Эффект наведения */
.floating-button:hover {
background-color: #0056b3;
transform: scale(1.1);
}

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

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

• 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);

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

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