Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.

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

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

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

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

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

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

👉 @frontend_1

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

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

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

👉 @frontend_1

Совет по CSS 💡

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

Но пользователи, работающие только с клавиатурой или сенсорными экранами, не могут вызвать наведение, из-за чего такие кнопки становятся недоступными.

Вот как это исправить

👉 @frontend_1

📌 Подборка полезных функций, которые пригодятся продвинутым 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);
});
}

👉 @frontend_1

Новый стандарт управления разработкой — от лидера рынка Kubernetes, компании «Флант».

2 октября в 12:00 на вебинаре представим следующий этап развития Deckhouse Development Portal.

Покажем, какие возможности Development Portal даёт всем сотрудникам компании: руководителям — целостное представление о процессах, взаимосвязях между сервисами и затратах, а командам — самообслуживание при работе с инфраструктурными сервисами, инструментами и данными.

На вебинаре разберем:
— как встроить согласованный стек и требования безопасности прямо в рельсы платформы;
— как получить ресурсы и сервисы без ручной обработки заявок;
— как интегрировать Development Portal в существующую инфраструктуру организации.

А также посчитаем стоимость инфраструктуры разработки отдельных бизнес-инициатив.

🎁 Для участников вебинара проведём чекап процесса SDLC вашей команды.

👉 Зарегистрироваться

Реклама. АО "ФЛАНТ". ИНН 7723661439.

🚀 Git для фронтендера: Осваиваем продвинутые команды!

Все мы знаем основы Git: add, commit, push. Но чтобы по-настоящему эффективно работать в команде и поддерживать чистую историю проекта, нужно копнуть глубже. Сегодня поговорим о трёх мощных инструментах, которые сделают вашу работу с Git намного комфортнее: ветки, разрешение конфликтов и rebase.


🌱 Ветки: Ваш личный песочник

Ветки – это как параллельные вселенные вашего кода. Они позволяют вам работать над новой фичей или исправлением бага, не затрагивая основной код (обычно ветку main или master).

Почему это важно?

🟢 Изоляция: Ваши изменения не сломают работу других разработчиков.
🟢 Безопасность: Можно экспериментировать, не боясь испортить стабильную версию.
🟢 Параллельная разработка: Несколько фич могут разрабатываться одновременно.

Основные команды для работы с ветками:

🟢 git branch <название_ветки>: Создать новую ветку.
🟢 git checkout <название_ветки>: Переключиться на ветку.
🟢 git checkout -b <название_ветки>: Создать и сразу переключиться (комбинация двух предыдущих).
🟢 git branch -d <название_ветки>: Удалить ветку (после мержа).
🟢 git merge <название_ветки>: Влить изменения из указанной ветки в текущую.


💥 Разрешение конфликтов: Не паникуем!

Конфликты слияния (merge conflicts) – это неизбежная часть командной разработки. Они возникают, когда Git не может автоматически объединить изменения из разных веток, потому что они затронули одну и ту же строку кода или файл.

Как это выглядит?
В файле появятся специальные маркеры:

<<<<<<< HEAD
Ваш код в текущей ветке
=======
Код из ветки, которую вы мержите
>>>>>>> feature/new-design
Что делать?

1. Определите конфликтующие участки: Ищите маркеры <<<<<<<, =======, >>>>>>>.
2. Примите решение: Вручную отредактируйте файл, оставив нужный код (ваш, чужой или комбинацию).
3. Удалите маркеры: Очень важно убрать все эти <<<<<<<, =======, >>>>>>>!
4. Добавьте и закоммитьте изменения:
🟢 git add <конфликтующий_файл>
🟢 git commit -m "Resolve merge conflict"

Спокойствие и внимание к деталям – залог успешного разрешения конфликтов!


✨ Git Rebase: Чистая история коммитов

git rebase позволяет переписать историю коммитов, перемещая или комбинируя их. В отличие от merge, который добавляет новый коммит слияния, rebase "пересаживает" ваши коммиты на новый базовый коммит, создавая линейную и чистую историю.

Когда использовать rebase?

🟢 Для "очистки" вашей ветки перед мержем в main: Сделать историю более читаемой, сгруппировать мелкие коммиты.
🟢 Чтобы синхронизировать свою ветку с main: Подтянуть свежие изменения из main в свою фича-ветку без создания лишнего мерж-коммита.

Пример использования:

1. Переключитесь на свою фича-ветку: git checkout feature/my-new-feature
2. Заберите свежие изменения из main: git pull origin main (или git fetch origin main)
3. Выполните rebase: git rebase main

Важно:

🟢 Никогда не делайте rebase публичных веток! Это может сломать историю для других разработчиков. Используйте rebase только для своих личных веток, которые ещё не были отправлены в общий репозиторий или над которыми вы работаете в одиночку.
🟢 При rebase могут возникнуть конфликты, решать их нужно так же, как и при merge.

👉 @frontend_1

HTML input types сильно различаются в зависимости от значения атрибута type, который вы используете 👨‍💻.

Ознакомьтесь с этой шпаргалкой на будущее 🚀

👉 @frontend_1

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

На открытом уроке 1 октября в 20:00 МСК разберем, как Agent Skills помогают ускорить создание ИИ-агентов, стандартизировать их логику и повторно использовать готовые решения. Вы узнаете, какие ИИ-инструменты помогают разработчикам быстрее собирать агентные системы и как применять эти подходы на практике.

Урок пройдет в преддверие старта курса «Разработка ИИ-агентов». Занятие подойдет разработчикам, ИИ-инженерам и техническим специалистам, которые создают агентные решения и хотят повысить скорость и качество разработки.

➡️Научитесь создавать более предсказуемые ИИ-агенты и тратить меньше времени на рутинную реализацию: https://vk.cc/d1XsGy

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Шпаргалка по выравниванию в CSS Grid 👨‍💻

👉 @frontend_1

💡Шпаргалка по CSS

👉 @frontend_1

Сегодня хочу поделиться с тобой одной тонкостью, которая помогает делать интерфейс более дружелюбным — скелетоны (skeleton loaders). Это те самые серые заглушки, которые показываются до загрузки данных. Пользователь видит, что «что-то происходит», и не чувствует, что приложение тормозит.

🦴 Как сделать скелетон быстро и без боли?
Я часто использую компонент из @radix-ui/react-skeleton или shadcn/ui. Но можно собрать свой за 5 минут:

const Skeleton = ({ className }: { className?: string }) => (
<div className={`animate-pulse bg-muted rounded-md ${className}`} />
)

А потом использовать так:

{isLoading ? (
<Skeleton className="h-6 w-40" />
) : (
<span>{user.name}</span>
)}

Без скелетонов пользователь может увидеть "прыгающий" интерфейс — сначала пустота, потом всё резко появилось. Это раздражает. Скелетоны создают ощущение плавности и контроля.

👉 @frontend_1

📦 Модель может работать, давать высокую точность и при этом оставаться «чёрным ящиком». Но когда качество падает или признаки начинают влиять на результат неожиданным образом, важно понимать, что происходит под капотом.

Один из ключевых вопросов в машинном обучении: почему дерево решений выбирает именно этот признак для первого разбиения? И как понять, какие данные действительно дают модели полезную информацию?

🦾 Ответ лежит в двух фундаментальных концепциях: энтропии и информационном выигрыше (Information Gain):
• Энтропия помогает измерить уровень неопределенности в данных: насколько классы перемешаны внутри набора.
• Information Gain показывает, какой признак сильнее всего снижает эту неопределённость после разбиения.

Именно благодаря этим метрикам дерево решений выбирает признаки, строит ветви и постепенно приближается к целевому прогнозу.

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

➡ Если хотите разобраться, как работают деревья решений на практике и применить этот алгоритм к реальной задаче классификации, приходите на открытый вебинар «Дерево решений — простой и интерпретируемый ML-алгоритм»: https://vk.cc/d1KLzK

📅 23 сентября в 18:00
Урок проходит в рамках старта курса «Машинное обучение. Продвинутый уровень»

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

💡 Scroll-snap-type

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

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

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

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

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

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

👉 @frontend_1

Основные методы массивов JavaScript

👉 @frontend_1

🚀 Кодишь? Анализируешь данные? Дизайнишь? Тогда тебе сюда!

Успей зарегистрироваться на масштабный конкурс Мэра Москвы «Лидеры цифровой трансформации» — с призовым фондом в 40 000 000₽ и реальными задачами от ведущих компаний страны и города Москвы.

Три призовых места на каждую задачу:
🏆 1 место — 1 000 000 ₽
🥈 2 место — 600 000 ₽
🥉 3 место — 400 000 ₽

Вместе со столичными ведомствами задачи для участников подготовили: Positive Technologies, «Газпромбанк.Тех», билайн бизнес, Yandex Cloud, VK Tech, РСХБ, «Фалькон Тех», ГК «Геоскан», ИТ Школа Ростелекома, ОЭЗ «Алабуга».

Никаких ограничений: участвовать может любой специалист от 16 лет.
⚡️ Есть своя команда — отлично, регистрируйтесь вместе. Нет — без проблем, мы поможем найти и собрать единомышленников среди других участников.

👾 14 дней на создание своего решения
👾 реальные задачи на выбор
👾 и финальный молодёжный технологический фестиваль с нетворкингом и шоу-программой

Это твой шанс заявить о себе громко, быстро, и ярко!

👉🏻 Успевай зарегистрироваться до 14 сентября: https://i.moscow/lct?utm_source=sp&utm_medium=social&utm_campaign=frontend_1/?erid=2VtzqwmUJu2

Ознакомьтесь с этими 5 советами по адаптивному веб-дизайну 👨‍💻

👉 @frontend_1

Импорт локальных изображений vs использование изображений из папки / public в Next.js

👉 @frontend_1

Всплывающие скроллеры изображений с анимацией, управляемой прокруткой 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

👉 @frontend_1

Совет по JavaScript💡

Легко и правильно отображайте цены.

👉 @frontend_1

Совет по веб-доступности 💡

Лучший способ сделать ваши ссылки, состоящие только из иконок, удобными для экранных читалок.

👉 @frontend_1