👩‍💻 8 важнейших аспектов JavaScript, которые нужно освоить до изучения React

Изучение React без прочной базы JavaScript похоже на строительство дома без фундамента. В этой статье разберем 8 ключевых концепций, которые помогут тебе уверенно чувствовать себя в React-разработке и писать качественный код.

Читать...

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

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

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

• Изображение занимает верхнюю часть карточки.
• Текст закреплён внизу карточки, даже если изображение маленькое.

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

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

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

Junior Frontend разработчик (Vue)
🟢HTML5, CSS3 (SCSS), JavaScript, TypeScript, Vue 2/3, Webpack/Vite, Vuex/Pinia, Stylelint/Eslint, GitLab
🟢Уровень дохода не указан | Опыт 1–3 года

Junior frontend-разработчик (Saas, IT, Integration team)
🟢JavaScript (ES6+), DOM-API, HTML, CSS, SCSS, Vue2/Vue3 Options API, API (GET и POST методы), Git, консоль, Vue Devtools
🟢до 60 000 ₽ | Без опыта

Junior Front-end Developer
🟢HTML, CSS, JavaScript, PHP, адаптивная верстка, пиксель перфект верстка, GET и POST запросы, работа с хостингами и провайдерами доменов
🟢до 100 000 ₽ | Опыт 1–3 года

Junior Frontend Developer
🟢JavaScript, TypeScript, React, Redux-Saga, Next.js, HTML, CSS
🟢от 35 000 до 120 000 ₽ | Без опыта

Junior Front-end Developer
🟢HTML, CSS, JavaScript, PHP, адаптивная верстка, пиксель перфект верстка, GET и POST запросы, работа с хостингами и провайдерами доменов
🟢до 100 000 ₽ | Опыт 1–3 года

👩‍💻 Gooey SVG Filter Button

Анимированная кнопка с эффектом при наведении. Сделана на SVG, CSS и JavaScript.

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

👩‍💻 Что такое 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.

Читать...