Всплывающие скроллеры изображений с анимацией, управляемой прокруткой CSS 🤙

.pop {
view-timeline-name: --pop;
}
img {
animation: slide both;
animation-timeline: --pop;
animation-range: entry 100% cover 50%;
}
.skateboarder {
--x: 0;
--y: -45%;
}
@ keyframes slide {
to { translate: var(--x) var(--y); }
}

https://codepen.io/jh3y/pen/abPgrGR

CodeBase | Frontend | #CSS

💡 Scroll-snap-type

Позволяет создавать плавные, контролируемые прокрутки с «привязкой» к определённым позициям.

.container {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: start;
}

🔘 Используется для каруселей, слайдеров и списков.

Зачем это нужно:

➡️ Сделать UX удобным и предсказуемым.

➡️ Избавиться от костылей на JS.

CodeBase | Frontend | #JS

Прокачать навыки вёрстки и фронтенда можно в телеграм!

В этом канале опытный верстальщик делится структурированными уроками и различными материалами по HTML, CSS, JS, а также советами по заработку на фрилансе.

Канал будет полезен:
1. начинающим и опытным верстальщикам
2. программистам
3. веб-дизайнерам

Научиться и зарабатывать на верстке:
@free_html_lessons

CSS совет 💡

Возможно, ты не знал об этом новом и самом простом способе вертикально центрировать контент в блочном макете.

CodeBase | Frontend | #CSS

🔥 Трюк с :has() в CSS: "Родительская магия"

Селектор :has() наконец стабильно работает во всех современных браузерах. Это открывает мощные возможности — реакция родителя на состояние потомка без JS!

Пример: подсветить div, если внутри есть заполненный input:

div:has(input:valid) {
border: 2px solid green;
}
Или показать ошибку, если инпут невалиден:

form:has(input:invalid) .error-message {
display: block;
}

📌 Зачем это нужно:
- 💡 Упрощает логику UI без JS
- 🚫 Убирает необходимость в лишних классах и хендлерах
- 💪 Делает компоненты декларативнее и чище

Проверить поддержку: https://caniuse.com/css-has

CodeBase | Frontend | #CSS

Бэкенд-разработчик пытается написать CSS.

CodeBase | Frontend | #meme

📌 Подборка полезных функций, которые пригодятся продвинутым frontend-разработчикам при работе с UI, производительностью и архитектурой


1. Throttle

Контролирует частоту вызова функции, полезно для scroll/resize-событий.

function throttle(fn: Function, delay: number) {
let last = 0;
return (...args: any[]) => {
const now = Date.now();
if (now - last >= delay) {
last = now;
fn(...args);
}
};
}

2. Debounce

Откладывает выполнение функции до окончания серии вызовов.

function debounce(fn: Function, delay: number) {
let timeout: ReturnType<typeof setTimeout>;
return (...args: any[]) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}

3. Deep Clone (без structuredClone)

function deepClone<T>(obj: T): T {
return JSON.parse(JSON.stringify(obj));
}

Подходит для простых объектов, не содержащих функций, дат и т.п.

4. Safe Access (Optional Chaining + Fallback)

function get<T>(obj: any, path: string, fallback?: T): T {
return path.split('.').reduce((acc, key) => acc?.[key], obj) ?? fallback;
}

5. Wait (async delay)

function wait(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}

6. Generate UUID v4

function uuidv4() {
return crypto.randomUUID(); // нативно в современных браузерах
}

7. Copy to Clipboard

async function copyToClipboard(text: string) {
try {
await navigator.clipboard.writeText(text);
} catch {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
}

8. Detect Outside Click (для dropdown/modals)

function onClickOutside(element: HTMLElement, callback: () => void) {
function handler(event: MouseEvent) {
if (!element.contains(event.target as Node)) {
callback();
}
}
document.addEventListener('click', handler);
return () => document.removeEventListener('click', handler); // для очистки
}

9. Download File from Blob

function downloadBlob(blob: Blob, filename: string) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}

10. Dynamic Script Loader (например, для внешних SDK)

function loadScript(src: string): Promise<void> {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.async = true;
script.onload = () => resolve();
script.onerror = () => reject(new Error(Failed to load ${src}));
document.head.appendChild(script);
});
}

CodeBase | Frontend | #JS

Как работает комбинация clip + mask:

- маска применяется к контейнеру с использованием соответствующего изображения клавиши, чтобы изображение обрезалось при смещении (translate)

- clip применяется к контейнеру, чтобы зона взаимодействия (hit area) не перекрывала другие клавиши 🧑‍🍳

CodeBase | Frontend | #animate

💡 HTML Tip: Скачивание файлов одной строкой

Хочешь, чтобы пользователь скачивал файл по клику? Просто добавь атрибут download к ссылке:

<a href="/images/logo.svg" download="codewithshripal-logo.svg">Download File</a>

📌 Что важно знать:

– download — указывает браузеру, что нужно не открыть файл, а скачать его
– Можно задать имя файла прямо в атрибуте
– Работает только с ресурсами того же источника (same-origin)
– Поддерживает blob: и data: ссылки для скачивания сгенерированного контента

🔍 Важно: имя из download будет использоваться только если сервер не задал своё имя в заголовке Content-Disposition.

CodeBase | Frontend | #HTML

Напоминаем про наш секретный второй ресурс тут тонны крутых постов, которых вы здесь точно не увидите. Бегом подписываться, а то будете потом завидовать тем кто в теме 😉
(Контент не повторяется)

Мини-хак: :has() в CSS — меньше JS для интерактивности 🎯

Современные браузеры уже поддерживают :has() — “родительский селектор”, который раньше приходилось эмулировать на JS.

Пример: показать рамку у карточки, если внутри есть картинка:

.card:has(img) {
border: 2px solid #4ade80;
}

Ещё круче: стилизовать соседний элемент, если внутри инпута что-то введено:

.input-wrapper:has(input:focus) label {
color: #3b82f6;
}

Зачем это нужно?
— Меньше JS → проще поддержка
— Новый уровень гибкости для UI

Документация: MDN про :has()

Пробуйте! Это реально меняет подход к верстке.

CodeBase | Frontend | #CSS