👩‍💻 On-Scroll Fire Transition

Красивая анимация горения страницы при скролле. Сделана на CSS и JavaScript.

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

⚙️ Что такое box-shadow в CSS и как оно работает?

box-shadow — это свойство CSS, которое добавляет тень к элементу. Оно позволяет задавать смещение, размытие, размер растушёвки и цвет тени.

➡️ Пример:

<div class="box">Я с тенью</div>

<style>
  .box {
    width: 200px;
    height: 100px;
    background: lightblue;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Смещение и размытие тени */
  }
</style>

🗣️ В этом примере box-shadow добавляет мягкую тень с чётким смещением и прозрачностью. Это свойство отлично подходит для выделения элементов интерфейса.

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

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

Frontend Developer (брокерский бизнес)
• HTML, CSS, JavaScript, React, Redux, TypeScript, Webpack, Babel, REST API
• Уровень дохода не указан | 3+ года

Frontend-разработчик (React, Redux, TypeScript)
• React, Redux, TypeScript, LESS, SCSS, Ant Design, REST API
• от 120 000 ₽ | 1–3 года

Middle Frontend Developer Vue (Back-office)
• Vue3, JavaScript, TypeScript, Webpack, Pinia, Element Plus, Figma
• Уровень дохода не указан | 3+ года

👩‍💻 Обзор наследования в JavaScript

Статья изучает различные шаблоны наследования в JavaScript, основанные на прототипах. Обсуждаются их преимущества и применение в зависимости от задач для оптимального управления объектными отношениями.

Читать...

👩‍💻 Проверка сбалансированных скобок

Напишите функцию, которая принимает строку, содержащую различные типы скобок ((), {}, []), и проверяет, являются ли они сбалансированными. Строка считается сбалансированной, если каждая открывающая скобка имеет соответствующую закрывающую в правильном порядке.

Пример: Для строки "{[()]}" функция должна вернуть true, а для строки "{[(])}" — false.

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

function isBalanced(str) {
const stack = [];
const pairs = { ')': '(', '}': '{', ']': '[' };

for (let char of str) {
if (['(', '{', '['].includes(char)) {
stack.push(char);
} else if ([')', '}', ']'].includes(char)) {
if (stack.pop() !== pairs[char]) return false;
}
}
return stack.length === 0;
}

// Пример использования
console.log(isBalanced("{[()]}")); // true
console.log(isBalanced("{[(])}")); // false

⚙️ Предзагрузка отзывчивых изображений

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

Читать...

👩‍💻 Fancy Glowing Button

Крутая кнопка с RGB подсветкой и эффектом при наведении. Сделана на чистом CSS.

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

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

Senior Fullstack Developer
• React, Vue.js, TypeScript, Node.js, MongoDB, Webpack
• от 3 800 до 6 500 $ | 3+ лет

Fullstack PHP-разработчик
• PHP, Laravel, MySQL, Vue.js, Apache, Linux
• от 2 200 до 2 800 $ | 2+ года

JavaScript Fullstack программист (разработчик)
• Node.js, React, Redux, PostgreSQL, Redis, RabbitMQ, MongoDB
• от 250 000 до 400 000 ₽ | 3+ года

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

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

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

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

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

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

⚙️ Безопасное взаимодействие с API: от ошибок к стабильности

В статье разбираются причины распространённых ошибок JavaScript, связанных с несоответствием данных, и предлагаются три ключевых решения: создание API-слоя, использование Backend-for-Frontend (BFF) и валидация данных через Zod для повышения стабильности.

Читать...

⚙️ Что такое свойство aspect-ratio в CSS и как оно используется?

aspect-ratio — это свойство CSS, которое задаёт соотношение ширины к высоте элемента. Оно упрощает создание адаптивных контейнеров, таких как видео, изображения или карточки.

➡️ Пример:

<div class="box"></div>

<style>
  .box {
    width: 300px;
    aspect-ratio: 16 / 9; /* Соотношение сторон 16:9 */
    background: lightblue;
  }
</style>

🗣️ В этом примере элемент .box сохраняет соотношение сторон 16:9 независимо от ширины. Это свойство полезно для создания адаптивных сеток и медиа-контейнеров.

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

👩‍💻 Эксперимент: Автоматическое включение View Transitions с MutationObserver

Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition.

Читать...

⚙️ Хочу прожарки на MVP своего проекта, который задеплоил буквально пару дней назад

Hack Frontend — платформа для подготовки к собеседованию по фронтенду. Обещает базу знаний, задачи и интерактивную подготовку. Но насколько она удобна и полезна? В статье — критика, фидбэк и предложения.

Читать...

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

Frontend Developer (React Native)
🟢React Native, JavaScript, TypeScript
🟢Уровень дохода не указан | 3–6 лет

Lead React Native Developer
🟢React Native, TypeScript, CI/CD
🟢Уровень дохода не указан | 5+ лет

PHP разработчик
🟢PHP, Laravel, REST API, SOAP, MySQL, October CMS, Docker
🟢Уровень дохода не указан | 1–3 года

👩‍💻 Настройка одного набора цветов для светлого и тёмного режимов

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

Читать...

👩‍💻 Интерактивный счётчик с кнопками увеличения и уменьшения

Создайте интерактивный счётчик с двумя кнопками: "Увеличить" и "Уменьшить". Счётчик должен отображать текущее значение, которое обновляется при нажатии на кнопки.

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

• По умолчанию значение счётчика равно 0.
• Кнопка "Увеличить" увеличивает значение счётчика на 1.
• Кнопка "Уменьшить" уменьшает значение счётчика на 1.
• Значение счётчика никогда не становится отрицательным.

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

<div>
<button id="decreaseButton">Уменьшить</button>
<span id="counter">0</span>
<button id="increaseButton">Увеличить</button>
</div>

const counter = document.getElementById('counter');
const decreaseButton = document.getElementById('decreaseButton');
const increaseButton = document.getElementById('increaseButton');

let count = 0;

decreaseButton.addEventListener('click', () => {
if (count > 0) {
count -= 1;
counter.textContent = count;
}
});

increaseButton.addEventListener('click', () => {
count += 1;
counter.textContent = count;
});

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

• Упрощаем CSS-анимации с помощью свойств display и размеров элемента

• 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года

• Возможности поля HTML-документа, часть 2. Внедряем CSS и JS

• Ошибки, которые я совершил, пытаясь быть «слишком правильным» в разработке

• Разработка Task Manager с нуля до полнофункционального продукта

👩‍💻 Как реализовать наследование в JavaScript: 7 способов

Исчерпывающий гайд по всем существующим способам организации наследования в JavaScript. Разберем сильные и слабые стороны каждого подхода и научимся выбирать оптимальный метод для твоих задач.

Читать...

👩‍💻 Модальное окно с закрытием по кнопке и фону

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

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

• При клике на кнопку "Открыть модальное окно" появляется модальное окно.
• Модальное окно закрывается при клике на кнопку "Закрыть" или на затемнённый фон.
• Фон страницы не прокручивается, пока открыто модальное окно.

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

<button id="openModal">Открыть модальное окно</button>

<div id="modal" class="modal">
<div class="modal-content">
<span id="closeModal" class="close-button">&times;</span>
<p>Это модальное окно</p>
</div>
</div>

body.modal-open {
overflow: hidden;
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}

.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
position: relative;
}

.close-button {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
}

const openModalBtn = document.getElementById('openModal');
const closeModalBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');
const body = document.body;

openModalBtn.addEventListener('click', () => {
modal.style.display = 'flex';
body.classList.add('modal-open');
});

closeModalBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
if (e.target === modal) closeModal();
});

function closeModal() {
modal.style.display = 'none';
body.classList.remove('modal-open');
}

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

React junior/middle
🟢React Native, TypeScript, CSS3, адаптивная верстка, Git
🟢от 70 000 до 150 000 ₽ | 1–3 года

Junior Front-end разработчик
🟢HTML, CSS, JavaScript, CMS (WordPress, Bitrix), SEO
🟢от 50 000 до 80 000 ₽ | 1–3 года

Junior Front-end developer
🟢JavaScript, React, Redux, Git, Sass
🟢от 80 000 до 120 000 ₽ | 1–3 года

👩‍💻 Text Illumination

Сцена с анимированным появлением текста. Сделана на SVG и CSS.

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