Glo Academy
الذهاب إلى القناة على Telegram
Бесплатные уроки по HTML/CSS/JavaScript, лайфхаки для верстальщика и бесплатные дизайн-макеты для портфолио. По рекламе — @yankovsky_ads Купить рекламу напрямую https://telega.in/c/glo_academy
إظهار المزيد3 759
المشتركون
لا توجد بيانات24 ساعات
-57 أيام
-2030 أيام
جارٍ تحميل البيانات
القنوات المماثلة
سحابة العلامات
الإشارات الواردة والصادرة
---
---
---
---
---
---
جذب المشتركين
أكتوبر '26أكتوبر '26
أكتوبر '26
+17
في 0 قنوات
سبتمبر '26
+18
في 0 قنوات
Get PRO
أغسطس '26
+35
في 1 قنوات
Get PRO
يوليو '26
+6
في 0 قنوات
Get PRO
يونيو '26
+5
في 0 قنوات
Get PRO
مايو '26
+9
في 0 قنوات
Get PRO
أبريل '26
+14
في 0 قنوات
Get PRO
مارس '26
+11
في 0 قنوات
Get PRO
فبراير '26
+23
في 0 قنوات
Get PRO
يناير '26
+8
في 0 قنوات
Get PRO
ديسمبر '25
+15
في 0 قنوات
Get PRO
نوفمبر '25
+16
في 0 قنوات
Get PRO
أكتوبر '25
+10
في 0 قنوات
Get PRO
سبتمبر '25
+19
في 0 قنوات
Get PRO
أغسطس '25
+16
في 0 قنوات
Get PRO
يوليو '25
+19
في 0 قنوات
Get PRO
يونيو '25
+10
في 0 قنوات
Get PRO
مايو '25
+13
في 0 قنوات
Get PRO
أبريل '25
+17
في 0 قنوات
Get PRO
مارس '25
+20
في 0 قنوات
Get PRO
فبراير '25
+19
في 0 قنوات
Get PRO
يناير '25
+16
في 0 قنوات
Get PRO
ديسمبر '24
+35
في 0 قنوات
Get PRO
نوفمبر '24
+25
في 0 قنوات
Get PRO
أكتوبر '24
+32
في 0 قنوات
Get PRO
سبتمبر '24
+43
في 0 قنوات
Get PRO
أغسطس '24
+52
في 0 قنوات
Get PRO
يوليو '24
+49
في 0 قنوات
Get PRO
يونيو '24
+40
في 0 قنوات
Get PRO
مايو '24
+30
في 0 قنوات
Get PRO
أبريل '24
+42
في 0 قنوات
Get PRO
مارس '24
+44
في 0 قنوات
Get PRO
فبراير '24
+47
في 0 قنوات
Get PRO
يناير '24
+43
في 0 قنوات
Get PRO
ديسمبر '23
+55
في 0 قنوات
Get PRO
نوفمبر '23
+65
في 0 قنوات
Get PRO
أكتوبر '23
+50
في 0 قنوات
Get PRO
سبتمبر '23
+41
في 0 قنوات
Get PRO
أغسطس '23
+72
في 0 قنوات
Get PRO
يوليو '23
+74
في 0 قنوات
Get PRO
يونيو '23
+37
في 0 قنوات
Get PRO
مايو '23
+85
في 0 قنوات
Get PRO
أبريل '23
+71
في 0 قنوات
Get PRO
مارس '23
+49
في 0 قنوات
Get PRO
فبراير '23
+67
في 0 قنوات
Get PRO
يناير '23
+51
في 0 قنوات
Get PRO
ديسمبر '22
+59
في 0 قنوات
Get PRO
نوفمبر '22
+102
في 0 قنوات
Get PRO
أكتوبر '22
+63
في 0 قنوات
Get PRO
سبتمبر '22
+57
في 0 قنوات
Get PRO
أغسطس '22
+103
في 0 قنوات
Get PRO
يوليو '22
+64
في 0 قنوات
Get PRO
يونيو '22
+63
في 0 قنوات
Get PRO
مايو '22
+50
في 0 قنوات
Get PRO
أبريل '22
+93
في 0 قنوات
Get PRO
مارس '22
+82
في 0 قنوات
Get PRO
فبراير '22
+46
في 0 قنوات
Get PRO
يناير '22
+75
في 0 قنوات
Get PRO
ديسمبر '21
+76
في 0 قنوات
Get PRO
نوفمبر '21
+110
في 0 قنوات
Get PRO
أكتوبر '21
+123
في 0 قنوات
Get PRO
سبتمبر '21
+99
في 0 قنوات
Get PRO
أغسطس '21
+139
في 0 قنوات
Get PRO
يوليو '21
+149
في 0 قنوات
Get PRO
يونيو '21
+224
في 0 قنوات
Get PRO
مايو '21
+183
في 0 قنوات
Get PRO
أبريل '21
+190
في 0 قنوات
Get PRO
مارس '21
+263
في 0 قنوات
Get PRO
فبراير '21
+290
في 0 قنوات
Get PRO
يناير '21
+477
في 0 قنوات
Get PRO
ديسمبر '20
+7 655
في 0 قنوات
| التاريخ | نمو المشتركين | الإشارات | القنوات | |
| 17 أكتوبر | +4 | |||
| 16 أكتوبر | +1 | |||
| 15 أكتوبر | +4 | |||
| 14 أكتوبر | 0 | |||
| 13 أكتوبر | 0 | |||
| 12 أكتوبر | 0 | |||
| 11 أكتوبر | +1 | |||
| 10 أكتوبر | 0 | |||
| 09 أكتوبر | 0 | |||
| 08 أكتوبر | 0 | |||
| 07 أكتوبر | +1 | |||
| 06 أكتوبر | +1 | |||
| 05 أكتوبر | +1 | |||
| 04 أكتوبر | +2 | |||
| 03 أكتوبر | +1 | |||
| 02 أكتوبر | +1 | |||
| 01 أكتوبر | 0 |
منشورات القناة
📐 Интернет-магазин ретро-электрики
Сложный макет на русском языке без адаптива
@glo_academy | #макеты
| 2 |  🧰 Tabler Icons
Берёшь иконки из трёх разных наборов, и в интерфейсе они спорят: у одной линия тоньше, у другой углы круглее, третья залита целиком. Даже если не можешь объяснить, что не так, глаз это замечает.
В Tabler Icons больше 6200 иконок, и все нарисованы по одной сетке 24×24 с линией в 2 пикселя. Цвет иконка берёт из currentColor, то есть красится так же, как текст рядом. Толщину линии меняет атрибут stroke-width прямо в разметке. На ролике слева одни и те же иконки становятся то тоньше, то толще: тонкие подойдут для мелкого интерфейса, жирные для крупных кнопок, а файл при этом один. Справа меняется только цвет текста в меню, и иконки перекрашиваются вместе с ним.
Ставится пакетом под React, Vue, Svelte или Angular, а можно скопировать SVG с tabler.io/icons и вставить в разметку. Лицензия MIT, у тысячи иконок есть залитая версия.
https://github.com/tabler/tabler-icons
🔥 — если было полезно
@glo_academy | #инструменты | 176 |
| 3 |  🐈
@glo_academy | 239 |
| 4 |  ⚡ Цена в любой валюте без регулярок
Цену с пробелами и знаком ₽ часто собирают своей функцией с регуляркой. Появятся покупатели из других стран, и её придётся переписывать под доллары. А в JS уже есть форматтер для любой валюты:
const price = (sum, currency, locale) =>
new Intl.NumberFormat(locale, {
style: 'currency',
currency,
}).format(sum);
price(1234567.5, 'RUB', 'ru-RU'); // 1 234 567,50 ₽
price(1234567.5, 'USD', 'en-US'); // $1,234,567.50
price(1234567.5, 'EUR', 'de-DE'); // 1.234.567,50 €
В currency идёт код валюты из стандарта ISO 4217: RUB, USD, EUR, GBP и любой другой. Локаль решает, как цену пишут в этой стране: какие разделители и где стоит знак. Поэтому у доллара знак впереди, а у рубля в конце.
На гифке одна сумма проходит через пять валют.
Копейки форматтер дописывает сам, убрать их можно опцией maximumFractionDigits: 0. Работает в Chrome 24+, Firefox 29+, Safari 10+.
🔥 — если было полезно
@glo_academy | #js_day | 242 |
| 5 |  🎨 Зебра в таблице не ломается после фильтра
Таблицу делают полосатой через tr:nth-child(odd), и всё хорошо, пока не включишь фильтр. Скрытая строка пропадает с экрана, но в счёте остаётся, и две серые строки встают подряд. Считать только видимые строки можно прямо в селекторе:
/* было: скрытые строки тоже считаются */
tr:nth-child(odd) {
background: #e4e7f2;
}
/* стало: считаются только видимые */
tr:nth-child(odd of :not(.hidden)) {
background: #e4e7f2;
}
Запись odd of :not(.hidden) работает в два шага. Сначала браузер отбирает строки без класса hidden, потом нумерует только их и красит нечётные. Скрытые строки в нумерацию больше не попадают.
На гифке включается фильтр «Только в наличии». Слева обычный nth-child, и полосы сбиваются. Справа новая запись, полосы идут через одну.
Если фильтр прячет строки атрибутом hidden, а не классом, в скобках пиши :not([hidden]). Работает в Chrome 111+, Firefox 113+, Safari 9+.
🔥 — если было полезно
@glo_academy | #css_day | 254 |
| 6 |  🧰 HyperUI
Нужна на сайт секция с тарифами или карточки товаров, а верстать их с нуля долго. Готовые UI-библиотеки обычно ставятся пакетом, и ради пары блоков в проект едут лишние зависимости.
В HyperUI больше 300 бесплатных блоков на Tailwind: шапки, тарифы, футеры, формы, таблицы, модалки. Ставить ничего не надо. Находишь блок на hyperui.dev, жмёшь Copy и вставляешь разметку к себе. На ролике так переезжает блок тарифов: слева сайт HyperUI, справа твоя страница.
Дальше это обычный HTML с классами Tailwind, и править его можно как угодно. Заменил в разметке indigo на emerald, и тариф стал зелёным, как в конце ролика. У многих блоков есть тёмная версия. Написаны блоки под Tailwind 4, в проекте на третьей версии часть классов называется иначе.
https://github.com/markmead/hyperui
🔥 — если было полезно
@glo_academy | #инструменты | 350 |
| 7 |  🦜
@glo_academy | 375 |
| 8 |  ⚡ Прогресс загрузки файла на fetch без XHR
await fetch(url) возвращается, как только пришли заголовки. Тело ещё качается, и его можно читать по кускам через response.body.
const res = await fetch(url);
const total = +res.headers.get('Content-Length');
const reader = res.body.getReader();
const chunks = [];
let loaded = 0;
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
loaded += value.length;
progress.value = loaded / total;
}
Каждый reader.read() приносит следующий кусок: складываешь длины, делишь на размер файла из Content-Length и двигаешь полосу загрузки. Так умеют Chrome с 43-й версии, Firefox с 65-й и Safari с 10.1.
Если сервер сжимает ответ, в Content-Length окажется размер сжатого файла, а reader отдаёт распакованные байты, и прогресс уедет за 100%. Заголовка может и не быть, тогда показывай, сколько мегабайт уже скачано. Прогресс отправки так не посчитать, для неё по-прежнему берут XHR.
🔥 — если было полезно
@glo_academy | #js_day | 363 |
| 9 |  🎨 Тултип у края экрана переворачивается без JS
Тултип над кнопкой обычно ставят через position: absolute и bottom: 100%. Стоит кнопке оказаться у верхнего края, и подсказка уезжает за экран. Раньше это чинили JS-библиотекой вроде Floating UI. Сейчас хватает CSS:
.button {
anchor-name: --save;
}
.tooltip {
position: absolute;
position-anchor: --save;
position-area: top;
margin-bottom: 8px;
position-try-fallbacks: flip-block;
}
anchor-name даёт кнопке имя, position-anchor привязывает к нему тултип, а position-area: top ставит его над кнопкой. Последняя строка нужна для края экрана: если сверху места не хватает, flip-block переносит тултип под кнопку. Отступ из margin-bottom переезжает вместе с ним.
На гифке кнопка едет вверх. Слева старый способ: подсказку срезает край. Справа она переворачивается вниз.
Пересчитывать позицию при скролле и ресайзе браузер тоже будет сам, без обработчиков в JS.
Работает в Chrome 129+, Firefox 147+, Safari 26+.
🔥 — если было полезно
@glo_academy | #css_day | 359 |
| 10 |  🧰 svgo
Экспортируешь иконку колокольчика из графического редактора, а файл весит почти 2 КБ. Нарисованы в нём две линии, остальное служебное: комментарий редактора, метаданные, пустые группы, скрытый слой и координаты вида 2.000000. Всё это браузер скачивает вместе с иконкой.
svgo чистит файл одной командой npx svgo bell.svg. На ролике тот самый колокольчик: красным подсвечено то, что svgo удалит, жёлтым то, что перепишет короче. Было 1911 байт, стало 353, а иконка не изменилась. На странице с двадцатью такими иконками это около 30 КБ лишнего.
Обычно svgo подключают к сборщику, и иконки чистятся сами при каждой сборке. svgo удаляет и переименовывает id внутри файла. Если твой CSS или JS находит части иконки по id, отключи в настройках плагин cleanupIds.
https://github.com/svg/svgo
🔥 — если было полезно
@glo_academy | #инструменты | 378 |
| 11 |  🤳 @glo_academy | 401 |
| 12 |  ✂️ Шрифт как в нативном приложении без загрузки файлов
Подключаешь красивый шрифт с сервера, и на медленном интернете человек первые секунды смотрит на пустые карточки. Браузер прячет текст, пока файл не догрузится, а потом перерисовывает страницу. Если шрифт не часть бренда, файл можно не грузить совсем.
body {
font-family: system-ui, sans-serif;
}
system-ui берёт шрифт, который уже стоит у пользователя: San Francisco на macOS и iOS, Segoe UI на Windows, Roboto на Android. Текст виден с первого кадра, и сайт выглядит так же привычно, как приложения в этой системе.
На гифке слева карточка ждёт свой шрифт, а справа текст на месте сразу.
На каждой системе шрифт свой, поэтому ширина строк немного гуляет: проверяй вёрстку хотя бы на маке и на Windows. sans-serif в конце — запасной вариант для старых браузеров.
Работает в Chrome 56+, Firefox 92+, Safari 11+.
❤️ — если было полезно
@glo_academy | #snippets | 428 |
| 13 |  🎨 Звёздочка у обязательного поля озвучится словами
Ставишь звёздочку у обязательного поля через ::after — и незрячий пользователь слышит «Телефон звёздочка». Символ до него дошёл, а смысл нет: из «звёздочки» никак не следует, что поле обязательное. Чинится одной косой чертой.
.required::after {
content: '*' / 'обязательное поле';
}
После значения в content ставь косую черту и пиши альтернативный текст. На экране остаётся та же звёздочка, а скринридер прочитает «Телефон обязательное поле».
На гифке форма не меняется, меняется только то, что слышит пользователь: сначала «Телефон звёздочка», потом «Телефон обязательное поле».
Так же чинится любой декор из content: галочка, стрелка в хлебных крошках. Если символ нужен только глазам, поставь после черты пустые кавычки, и скринридер его пропустит.
Работает в Chrome 77+, Firefox 128+, Safari 17.4+.
🔥 — если было полезно
@glo_academy | #css_day | 379 |
| 14 |  📐 Лендинг жилого комплекса
Макет средней сложности без адаптива на русском языке
@glo_academy | 397 |
| 15 |  ⚡ Одна строка разлогинит все вкладки сайта
Нажал «Выйти», а в соседней вкладке всё ещё открыт кабинет: кнопки живые, данные на месте. Обычно это чинят через localStorage: пишут туда значение, в других вкладках ловят событие storage, парсят строку и удаляют ключ.
const channel = new BroadcastChannel('auth');
// во вкладке, где нажали «Выйти»
channel.postMessage({ type: 'logout' });
// в остальных вкладках сайта
channel.onmessage = (e) => {
if (e.data.type === 'logout') redirect('/login');
};
new BroadcastChannel('auth') открывает канал с именем auth. Вкладка, где нажали «Выйти», отправляет в него объект через postMessage. Остальные вкладки открыли канал с тем же именем и ловят этот объект в onmessage.
Объект уходит как есть, без JSON.stringify, и в хранилище после него ничего не остаётся.
Отправитель своё сообщение не получает, поэтому вкладку с кнопкой уводи на вход отдельно. Работает во всех браузерах, в Safari с версии 15.4.
🔥 — если было полезно
@glo_academy | #js_day | 441 |
| 16 |  🧰 pico
Нужна страница входа или админка для пет-проекта, а возиться со стилями полей и кнопок не хочется. Без CSS браузер вытягивает форму в одну строку шрифтом Times — слева на ролике видно, как это выглядит. Тащить ради пары экранов Bootstrap с классами на каждом теге — перебор.
Pico стилизует сами теги. Подключаешь один файл, пишешь обычные form, label, input и button, и форма выглядит как справа на ролике, хотя классов в разметке нет ни одного. Состояния pico берёт из атрибутов доступности, которые в форме стоит ставить и так: поле с aria-invalid краснеет, чекбокс с role="switch" становится тумблером, кнопка с aria-busy показывает спиннер.
Тёмная тема подхватывается из настроек системы, а data-theme="dark" включает её вручную — на всю страницу или на один блок. Весит pico около 11 КБ в gzip, в комплекте 20 цветовых схем.
https://github.com/picocss/pico
🔥 — если было полезно
@glo_academy | #инструменты | 412 |
| 17 |  😎 | 410 |
| 18 |  ✂️ Состояние элемента в атрибуте вместо трёх классов
classList.add('loading'), потом add('error'), где-то забыли снять — и на элементе одновременно висят loading и completed. Какой стиль победит, решает порядок правил в файле. Вместо трёх классов держи состояние в одном data-атрибуте:
<div class="order" data-state="loading">…</div>
order.dataset.state = 'completed';
.order[data-state="loading"] { opacity: 0.5; }
.order[data-state="error"] { border-color: red; }
.order[data-state="completed"] { border-color: green; }
У атрибута всегда одно значение: новое вытесняет старое, двух состояний сразу не бывает. Из JS оно меняется одной строкой через dataset.state, а CSS цепляется за него селектором [data-state="…"].
На гифке: клик по вкладке пишет новое значение в атрибут, и карточка заказа перекрашивается сама.
Селектор сравнивает значение целиком. Если в атрибут попадёт «loading completed», не сработает ни одно правило — поломку видно сразу.
❤️ — если было полезно
@glo_academy | #snippets | 463 |
| 19 |  🎨 Две карточки в гриде не растягиваются на пол-экрана
Сетка на repeat(auto-fit, minmax(240px, 1fr)) отлично выглядит на двенадцати карточках. Но на странице, где карточек две, каждая растягивается на половину экрана, и макет разваливается. Обычно это лечат max-width на карточке или отдельным классом для коротких списков.
.cards {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
Разница в одном слове. auto-fit создаёт столько колонок, сколько влезает по ширине, а пустые схлопывает в ноль, и две карточки делят всю ширину между собой. auto-fill пустые колонки оставляет: они невидимы, но место держат, поэтому карточки остаются той же ширины, что и в полной сетке.
Когда карточек всегда больше, чем колонок, разницы нет. Она вылезает на коротких списках: результаты поиска, два товара в категории, одна новость. На ролике слева auto-fit, справа auto-fill.
🔥 — если было полезно
@glo_academy | #css_day | 395 |
| 20 |  📐 Лендинг ювелирного магазина
Макет лендинга средней сложности без адаптива на русском языке
@glo_academy | 426 |
