CodeBase | Frontend
Открыть в Telegram
Все самое интересное и полезное у нас 😎 Контакт: @Filgood777 (реклама, сотрудничество) Включи монетизацию своего TG-канала или сайта через РСЯ и получай пассивный доход. Подключиться по https://ya.cc/B2UP8W
Больше
Сеть:1 932
Подписчики
Нет данных24 часа
Нет данных7 дней
-1930 дней
Загрузка данных...
Похожие каналы
Облако тегов
Входящие и исходящие упоминания
---
---
---
---
---
---
Привлечение подписчиков
октябрь '26окт. '26
октябрь '26
+2
в 0 каналах
сентябрь '26
+8
в 0 каналах
Get PRO
август '26
+11
в 0 каналах
Get PRO
июль '26
+11
в 0 каналах
Get PRO
июнь '26
+16
в 0 каналах
Get PRO
май '26
+16
в 0 каналах
Get PRO
апрель '26
+24
в 4 каналах
Get PRO
март '26
+12
в 10 каналах
Get PRO
февраль '26
+10
в 0 каналах
Get PRO
январь '26
+40
в 6 каналах
Get PRO
декабрь '25
+11
в 6 каналах
Get PRO
ноябрь '25
+25
в 2 каналах
Get PRO
октябрь '25
+39
в 38 каналах
Get PRO
сентябрь '25
+83
в 48 каналах
Get PRO
август '25
+52
в 18 каналах
Get PRO
июль '25
+80
в 54 каналах
Get PRO
июнь '25
+44
в 22 каналах
Get PRO
май '25
+22
в 6 каналах
Get PRO
апрель '25
+14
в 9 каналах
Get PRO
март '25
+10
в 2 каналах
Get PRO
февраль '25
+61
в 4 каналах
Get PRO
январь '25
+46
в 5 каналах
Get PRO
декабрь '24
+154
в 22 каналах
Get PRO
ноябрь '24
+99
в 13 каналах
Get PRO
октябрь '24
+355
в 22 каналах
Get PRO
сентябрь '24
+408
в 23 каналах
Get PRO
август '24
+49
в 0 каналах
Get PRO
июль '24
+27
в 0 каналах
Get PRO
июнь '24
+485
в 13 каналах
Get PRO
май '24
+967
в 34 каналах
Get PRO
апрель '24
+2 118
в 28 каналах
| Дата | Привлечение подписчиков | Упоминания | Каналы | |
| 08 октября | 0 | |||
| 07 октября | +1 | |||
| 06 октября | 0 | |||
| 05 октября | 0 | |||
| 04 октября | +1 | |||
| 03 октября | 0 | |||
| 02 октября | 0 | |||
| 01 октября | 0 |
Посты канала
Работа в Т‑Банке — топ‑3 лучших работодателей России по версии Forbes. Приходите работать по админской ссылке и получите 7 000 ₽
https://tbank-online.com/baf/1Gfz7QB2oIu
| 2 | Мини-хак: :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 | 107 |
| 3 |  Напоминаем про наш секретный второй ресурс тут тонны крутых постов, которых вы здесь точно не увидите. Бегом подписываться, а то будете потом завидовать тем кто в теме 😉
(Контент не повторяется) | 76 |
| 4 |  💡 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 | 140 |
| 5 |  CodeBase | Frontend | #meme | 126 |
| 6 |  Как работает комбинация clip + mask:
- маска применяется к контейнеру с использованием соответствующего изображения клавиши, чтобы изображение обрезалось при смещении (translate)
- clip применяется к контейнеру, чтобы зона взаимодействия (hit area) не перекрывала другие клавиши 🧑🍳
CodeBase | Frontend | #animate | 156 |
| 7 |  Ленивый вайб-программист | 187 |
| 8 |  Почему твой AI тормозит?
Платишь, а потом всё равно перепроверяешь, переписываешь и переспрашиваешь, а дело ведь даже не в твоих навыках
На разных тарифах предусмотрены разные лимиты и уровни доступа — часть ограничений производительности заложена в сам план.
Если AI — твой рабочий инструмент, на больших объёмах иногда выгоднее брать максимальный тариф и экономить не на подписке, а на своём времени.
Claude Max 20x, ChatGPT Pro, Google AI Ultra — нужный тариф поможет оплатить Raketa Pay 🚀
SPUTNIK7 — скидка 5%
👉 https://t.me/raketa_pay_public?erid=2W5zFHaSvt9 | 112 |
| 9 | 📌 Подборка полезных функций, которые пригодятся продвинутым 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 | 174 |
| 10 |  🤖 «Мир робототехники»: говорите о технологиях с аудиторией, которая их понимает
Читатели «Мира робототехники» интересуются технологиями, автоматизацией и решениями для промышленности. Если ваша компания работает в этой сфере, расскажите о ней аудитории, которой это интересно.
Мы уже готовим 21-й выпуск журнала, который выйдет в начале ноября. У вас есть возможность попасть на его страницы.
Выберите формат:
🔹 Рекламный модуль — представить бренд или продукт.
🔹 Статья — рассказать о разработке, технологии или успешном проекте.
🔹 Интервью — поделиться опытом и познакомить читателей с экспертами вашей компании.
Публикация в отраслевом журнале — это возможность рассказать о своих решениях профессионалам и повысить узнаваемость компании.
Займите свое место в 21-м выпуске «Мира робототехники»!
➡️ Подробнее в нашем медиаките
Контакты Редакции:
📲 +7 916 830-02-66
📧 reklama@roboticsworld.ru
📧 press@roboticsworld.ru
#реклама
О рекламодателе | 97 |
| 11 |  CodeBase | Frontend | #meme | 164 |
| 12 |  Бэкенд-разработчик пытается написать CSS.
CodeBase | Frontend | #meme | 201 |
| 13 | 🔥 Трюк с :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 | 257 |
| 14 |  CSS совет 💡
Возможно, ты не знал об этом новом и самом простом способе вертикально центрировать контент в блочном макете.
CodeBase | Frontend | #CSS | 285 |
| 15 |  Прокачать навыки вёрстки и фронтенда можно в телеграм!
В этом канале опытный верстальщик делится структурированными уроками и различными материалами по HTML, CSS, JS, а также советами по заработку на фрилансе.
Канал будет полезен:
1. начинающим и опытным верстальщикам
2. программистам
3. веб-дизайнерам
Научиться и зарабатывать на верстке:
@free_html_lessons | 279 |
| 16 | 💡 Scroll-snap-type
Позволяет создавать плавные, контролируемые прокрутки с «привязкой» к определённым позициям.
.container {
scroll-snap-type: x mandatory;
}
.item {
scroll-snap-align: start;
}
🔘 Используется для каруселей, слайдеров и списков.
Зачем это нужно:
➡️ Сделать UX удобным и предсказуемым.
➡️ Избавиться от костылей на JS.
CodeBase | Frontend | #JS | 266 |
| 17 |  Всплывающие скроллеры изображений с анимацией, управляемой прокруткой 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 | 289 |
| 18 |  CodeBase | Frontend | #meme | 260 |
| 19 |  CodeBase | Frontend | #meme | 301 |
| 20 |  Linux глазами хакера, 7-е изд.
Год: 2025
Автор: Фленов М. Е.
Язык: Русский
Книга посвящена настройке, защите и администрированию Linux-систем с точки зрения безопасности. Автор рассматривает оптимизацию производительности, управление доступом, настройку сетевых сервисов и методы защиты серверной инфраструктуры. Материал охватывает работу с Firewall, веб-серверами, FTP, Proxy, DNS, почтовыми службами и резервным копированием данных.
В новом издании обновлены сведения с учетом актуальных версий Ubuntu LTS, добавлены практические примеры поиска уязвимостей и защиты веб-приложений. Книга показывает методы обнаружения атак, восстановления систем после инцидентов и повышения надежности Linux-среды. Книга подойдет системным администраторам, специалистам по информационной безопасности, DevOps-инженерам и тем, кто занимается защитой Linux-инфраструктуры.
https://max.ru/lazy__programmer/AaA5qz7ZGk0
#linux #линукс
Linux Club | 171 |
