Логово верстальщика

🔧 Баги — это не твой враг

Увидел баг — разозлился, потратил кучу времени, но всё равно ничего не понял? Это нормально. Баги не для того, чтобы раздражать тебя, они для того, чтобы ты учился.

✔️ Совет: раздели проблему на маленькие части и ищи, где что ломается. Включай логи, добавляй отладку, тестируй гипотезы. Это как пазл: с каждым шагом всё становится яснее.

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

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

Читать...

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

Senior/Lead Frontend-разработчик
• TypeScript, React, Next.js, TailwindCSS, React Query, Redux Toolkit, eCharts, React Flow
• Уровень дохода не указан | от 6 лет

Frontend Teamlead (React JS)
• TypeScript, JavaScript, React, Git
• Уровень дохода не указан | от 3 лет

FrontEnd Разработчик в стартап Bolsta (за опцион)
• React, Vue.js, HTML, CSS, JavaScript
• Уровень дохода не указан | опыт не указан

Team Lead Frontend (Управление перспективных проектов)
• React, TypeScript, HTML, CSS, SCSS, JavaScript, React Router Dom, axios, Fluent UI, final-form, i18next, Jotai, Mitt, React Query, Tanstack Table, Vite
• Уровень дохода не указан | от 4 лет

Senior Frontend Developer (React)
• JavaScript, TypeScript, React, Redux, React Hook Form, Vite, SCSS, CSS Modules
• Уровень дохода не указан | от 5 лет

⚙️ Что такое clamp() в CSS и как его использовать?

clamp() — это функция в CSS, которая задаёт значение с ограничениями: минимальное, предпочтительное и максимальное. Она позволяет адаптивно управлять размерами элементов или текстом, сохраняя их в заданных пределах.

➡️ Пример:

<div class="text">
  Адаптивный размер текста
</div>

<style>
  .text {
    font-size: clamp(1rem, 2.5vw, 2rem); /* Минимум 1rem, максимум 2rem, предпочтение — 2.5% ширины окна */
    text-align: center;
  }
</style>

🗣️ В этом примере текстовый блок изменяет размер шрифта в зависимости от ширины окна, оставаясь в пределах от 1rem до 2rem. Функция clamp() упрощает создание адаптивного дизайна без сложных медиа-запросов.

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

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

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

Читать...

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

• Мои Red-Flags при устройстве в IT-компании: Как не стать гребцом. Часть 2

• Циничные заметки о карьере в IT от «гейткипера»

• Язык как проект: как продакт-менеджеру учить английский

• Всероссийский рейтинг IT-брендов работодателей 2024

• Моя петиция EB-1A на грин-карту талантов, одобренная с первой попытки

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

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 лет

👩‍💻 Idea Form

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

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

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

• style.setProperty vs setAttribute

• Как создать архитектуру фронтенд-приложения, если ее нет от слова «совсем»

• Правильные ли у вас микрофронты?

• Рецензия на книгу “Изучаем паттерны проектирования JavaScript, 2-е издание”

• Модульные CSS-архитектуры в Next.js: BEM, SMACSS, OOCSS и их применение

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

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

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

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

Читать...

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

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)

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

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

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

👩‍💻 Signature animation

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

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

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

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 ₽ | Без опыта

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

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

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

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

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

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

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

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

Читать...

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

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

Читать...

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

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

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

• Блок имеет фиксированные размеры: 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;
}

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

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

Читать...