CodeBase | Frontend
Відкрити в Telegram
Все самое интересное и полезное у нас 😎 Контакт: @Filgood777 (реклама, сотрудничество) Включи монетизацию своего TG-канала или сайта через РСЯ и получай пассивный доход. Подключиться по https://ya.cc/B2UP8W
Показати більше
Сітка:1 932
Підписники
Немає даних24 години
Немає даних7 днів
-1930 днів
Архів дописів
1 932
Работа в Т‑Банке — топ‑3 лучших работодателей России по версии Forbes. Приходите работать по админской ссылке и получите 7 000 ₽
https://tbank-online.com/baf/1Gfz7QB2oIu
1 932
Мини-хак: :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
1 932
Repost from Ленивый вайб-программист
Напоминаем про наш секретный второй ресурс тут тонны крутых постов, которых вы здесь точно не увидите. Бегом подписываться, а то будете потом завидовать тем кто в теме 😉
(Контент не повторяется)
1 932
💡 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
1 932
Как работает комбинация clip + mask:
- маска применяется к контейнеру с использованием соответствующего изображения клавиши, чтобы изображение обрезалось при смещении (translate)
- clip применяется к контейнеру, чтобы зона взаимодействия (hit area) не перекрывала другие клавиши 🧑🍳
CodeBase | Frontend | #animate
1 932
Почему твой AI тормозит?
Платишь, а потом всё равно перепроверяешь, переписываешь и переспрашиваешь, а дело ведь даже не в твоих навыках
На разных тарифах предусмотрены разные лимиты и уровни доступа — часть ограничений производительности заложена в сам план.
Если AI — твой рабочий инструмент, на больших объёмах иногда выгоднее брать максимальный тариф и экономить не на подписке, а на своём времени.
Claude Max 20x, ChatGPT Pro, Google AI Ultra — нужный тариф поможет оплатить Raketa Pay 🚀
SPUTNIK7 — скидка 5%
👉 https://t.me/raketa_pay_public?erid=2W5zFHaSvt9
1 932
📌 Подборка полезных функций, которые пригодятся продвинутым 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 | #JS1 932
🤖 «Мир робототехники»: говорите о технологиях с аудиторией, которая их понимает
Читатели «Мира робототехники» интересуются технологиями, автоматизацией и решениями для промышленности. Если ваша компания работает в этой сфере, расскажите о ней аудитории, которой это интересно.
Мы уже готовим 21-й выпуск журнала, который выйдет в начале ноября. У вас есть возможность попасть на его страницы.
Выберите формат:
🔹 Рекламный модуль — представить бренд или продукт.
🔹 Статья — рассказать о разработке, технологии или успешном проекте.
🔹 Интервью — поделиться опытом и познакомить читателей с экспертами вашей компании.
Публикация в отраслевом журнале — это возможность рассказать о своих решениях профессионалам и повысить узнаваемость компании.
Займите свое место в 21-м выпуске «Мира робототехники»!
➡️ Подробнее в нашем медиаките
Контакты Редакции:
📲 +7 916 830-02-66
📧 reklama@roboticsworld.ru
📧 press@roboticsworld.ru
#реклама
О рекламодателе
1 932
🔥 Трюк с :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
1 932
CSS совет 💡
Возможно, ты не знал об этом новом и самом простом способе вертикально центрировать контент в блочном макете.
CodeBase | Frontend | #CSS
1 932
Прокачать навыки вёрстки и фронтенда можно в телеграм!
В этом канале опытный верстальщик делится структурированными уроками и различными материалами по HTML, CSS, JS, а также советами по заработку на фрилансе.
Канал будет полезен:
1. начинающим и опытным верстальщикам
2. программистам
3. веб-дизайнерам
Научиться и зарабатывать на верстке:
@free_html_lessons
1 932
💡 Scroll-snap-type
Позволяет создавать плавные, контролируемые прокрутки с «привязкой» к определённым позициям.
.container {
scroll-snap-type: x mandatory;
}
.item {
scroll-snap-align: start;
}1 932
Всплывающие скроллеры изображений с анимацией, управляемой прокруткой 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
1 932
Repost from Linux Club
Linux глазами хакера, 7-е изд.
Год: 2025
Автор: Фленов М. Е.
Язык: Русский
Книга посвящена настройке, защите и администрированию Linux-систем с точки зрения безопасности. Автор рассматривает оптимизацию производительности, управление доступом, настройку сетевых сервисов и методы защиты серверной инфраструктуры. Материал охватывает работу с Firewall, веб-серверами, FTP, Proxy, DNS, почтовыми службами и резервным копированием данных.
В новом издании обновлены сведения с учетом актуальных версий Ubuntu LTS, добавлены практические примеры поиска уязвимостей и защиты веб-приложений. Книга показывает методы обнаружения атак, восстановления систем после инцидентов и повышения надежности Linux-среды. Книга подойдет системным администраторам, специалистам по информационной безопасности, DevOps-инженерам и тем, кто занимается защитой Linux-инфраструктуры.
https://max.ru/lazy__programmer/AaA5qz7ZGk0
#linux #линукс
Linux Club
