Glo Academy
Открыть в Telegram
Бесплатные уроки по HTML/CSS/JavaScript, лайфхаки для верстальщика и бесплатные дизайн-макеты для портфолио. По рекламе — @yankovsky_ads Купить рекламу напрямую https://telega.in/c/glo_academy
Больше3 759
Подписчики
-124 часа
+37 дней
-930 дней
Загружаем данные
Похожие каналы
Облако тегов
Входящие и исходящие упоминания
---
---
---
---
---
---
Привлечение подписчиков
октябрь '26окт. '26
октябрь '26
+26
в 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 каналах
| Дата | Привлечение подписчиков | Упоминания | Каналы | |
| 24 октября | +1 | |||
| 23 октября | +1 | |||
| 22 октября | 0 | |||
| 21 октября | 0 | |||
| 20 октября | +1 | |||
| 19 октября | 0 | |||
| 18 октября | +4 | |||
| 17 октября | +6 | |||
| 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 |  🧰 Pretty TS Errors
Ошибки TypeScript в VS Code приходят одной строкой. Пока типы простые, это терпимо. Но передал в функцию объект с одним неверным полем, и в подсказке весь тип целиком: скобки, точки с запятой, кавычки, а где именно ошибка, искать глазами.
Pretty TS Errors переписывает это окно. Тип из ошибки разворачивается по строкам и подсвечивается цветами твоей темы, а названия типов и полей стоят отдельными плашками. На ролике одна и та же ошибка: слева как её показывает VS Code, справа с расширением. Сразу видно, что не так с полем zip в address.
Рядом с ошибкой расширение ставит ссылки на её разбор на typescript.tv и на перевод на простой английский. Работает в .ts и .tsx, а ещё в Vue, Svelte и Astro, если там включён TypeScript. Ставится из маркетплейса VS Code поиском по pretty-ts-errors, в Cursor тоже есть.
https://github.com/yoavbls/pretty-ts-errors
🔥 — если было полезно
@glo_academy | #инструменты | 176 |
| 3 |  🪓
@glo_academy | 239 |
| 4 |  ⚡ Группировка массива без reduce
Разложить заказы по статусам, например для канбан-доски, обычно пишут через reduce: заводят пустой объект, проверяют, есть ли уже массив под ключ, и пушат в него. Несколько строк, в которых легко ошибиться. Теперь это один вызов:
const orders = [
{ id: 1, status: 'new' },
{ id: 2, status: 'paid' },
{ id: 3, status: 'new' },
];
const byStatus = Object.groupBy(orders, (o) => o.status);
// { new: [заказы 1 и 3], paid: [заказ 2] }
Object.groupBy проходит по массиву и для каждого элемента вызывает функцию. Что она вернёт, то и станет ключом, а элемент попадёт в массив под этим ключом. Группировать можно по чему угодно: по статусу, по первой букве имени, по цене «до 1000» и «дороже».
На гифке заказы из одного списка разъезжаются по колонкам статусов.
Элементы в группах не копируются, это те же объекты, что в исходном массиве. Работает в Chrome 117+, Firefox 119+, Safari 17.4+.
🔥 — если было полезно
@glo_academy | #js_day | 267 |
| 5 |  ✂️ +7 в поле телефона, который нельзя стереть
+7 перед номером часто пишут прямо в value поля. Пользователь стирает номер, и плюс семёрка уходит вместе с ним. А если он вставит номер из буфера, получится +7+7. Надёжнее держать префикс вне ввода: рамку рисует обёртка, а input внутри без рамки:
<label class="field">
<span>+7</span>
<input type="tel">
</label>
.field { display: flex; border: 1px solid #ccc; }
.field:focus-within { border-color: #4f5bd5; }
.field input { border: 0; outline: 0; flex: 1; }
label делает префикс частью поля: клик по +7 ставит курсор в ввод. Псевдокласс :focus-within срабатывает у обёртки, когда фокус внутри, поэтому рамка подсвечивается целиком, как у обычного поля. На сервер уходит только input, без +7.
На гифке сверху +7 записан в value и стирается вместе с номером. Снизу он в обёртке, и стереть его нельзя.
Так же ставят ₽ после суммы или https:// перед адресом. Работает во всех браузерах.
❤️ — если было полезно
@glo_academy | #snippets | 256 |
| 6 |  🎨 Поле для отзыва растёт по тексту без JS
Поле для отзыва обычно растягивают скриптом: на каждый ввод сбрасывают высоту и ставят новую по scrollHeight. Без скрипта textarea остаётся в две строки, и длинный текст уезжает под скролл. Теперь хватает одного свойства:
textarea {
field-sizing: content;
min-height: 3lh;
max-height: 10lh;
}
field-sizing: content говорит браузеру считать размер поля по тексту внутри. min-height не даёт пустому полю схлопнуться, max-height останавливает рост, дальше появляется скролл. Единица lh равна высоте строки, 3lh значит три строки.
На гифке в оба поля печатается один и тот же отзыв. Сверху обычная textarea, текст прячется под скролл. Снизу поле растёт вместе с текстом.
Где свойства нет, поле останется обычным, так что ставить его можно уже сейчас. Работает в Chrome 123+, Firefox 152+, Safari 26.2+.
🔥 — если было полезно
@glo_academy | #css_day | 273 |
| 7 |  📐 Интернет-магазин ретро-электрики
Сложный макет на русском языке без адаптива
@glo_academy | #макеты | 309 |
| 8 |  🧰 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 | #инструменты | 337 |
| 9 |  🐈
@glo_academy | 351 |
| 10 |  ⚡ Цена в любой валюте без регулярок
Цену с пробелами и знаком ₽ часто собирают своей функцией с регуляркой. Появятся покупатели из других стран, и её придётся переписывать под доллары. А в 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 | 338 |
| 11 |  🎨 Зебра в таблице не ломается после фильтра
Таблицу делают полосатой через 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 | 328 |
| 12 |  🧰 HyperUI
Нужна на сайт секция с тарифами или карточки товаров, а верстать их с нуля долго. Готовые UI-библиотеки обычно ставятся пакетом, и ради пары блоков в проект едут лишние зависимости.
В HyperUI больше 300 бесплатных блоков на Tailwind: шапки, тарифы, футеры, формы, таблицы, модалки. Ставить ничего не надо. Находишь блок на hyperui.dev, жмёшь Copy и вставляешь разметку к себе. На ролике так переезжает блок тарифов: слева сайт HyperUI, справа твоя страница.
Дальше это обычный HTML с классами Tailwind, и править его можно как угодно. Заменил в разметке indigo на emerald, и тариф стал зелёным, как в конце ролика. У многих блоков есть тёмная версия. Написаны блоки под Tailwind 4, в проекте на третьей версии часть классов называется иначе.
https://github.com/markmead/hyperui
🔥 — если было полезно
@glo_academy | #инструменты | 421 |
| 13 |  🦜
@glo_academy | 440 |
| 14 |  ⚡ Прогресс загрузки файла на 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 | 438 |
| 15 |  🎨 Тултип у края экрана переворачивается без 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 | 408 |
| 16 |  🧰 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 | #инструменты | 425 |
| 17 |  🤳 @glo_academy | 436 |
| 18 |  ✂️ Шрифт как в нативном приложении без загрузки файлов
Подключаешь красивый шрифт с сервера, и на медленном интернете человек первые секунды смотрит на пустые карточки. Браузер прячет текст, пока файл не догрузится, а потом перерисовывает страницу. Если шрифт не часть бренда, файл можно не грузить совсем.
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 | 477 |
| 19 |  🎨 Звёздочка у обязательного поля озвучится словами
Ставишь звёздочку у обязательного поля через ::after — и незрячий пользователь слышит «Телефон звёздочка». Символ до него дошёл, а смысл нет: из «звёздочки» никак не следует, что поле обязательное. Чинится одной косой чертой.
.required::after {
content: '*' / 'обязательное поле';
}
После значения в content ставь косую черту и пиши альтернативный текст. На экране остаётся та же звёздочка, а скринридер прочитает «Телефон обязательное поле».
На гифке форма не меняется, меняется только то, что слышит пользователь: сначала «Телефон звёздочка», потом «Телефон обязательное поле».
Так же чинится любой декор из content: галочка, стрелка в хлебных крошках. Если символ нужен только глазам, поставь после черты пустые кавычки, и скринридер его пропустит.
Работает в Chrome 77+, Firefox 128+, Safari 17.4+.
🔥 — если было полезно
@glo_academy | #css_day | 414 |
| 20 |  📐 Лендинг жилого комплекса
Макет средней сложности без адаптива на русском языке
@glo_academy | 418 |
