Glo Academy
前往频道在 Telegram
Бесплатные уроки по HTML/CSS/JavaScript, лайфхаки для верстальщика и бесплатные дизайн-макеты для портфолио. По рекламе — @yankovsky_ads Купить рекламу напрямую https://telega.in/c/glo_academy
显示更多3 754
订阅者
-124 小时
-37 天
-930 天
正在加载数据
相似频道
标签云
进出提及
---
---
---
---
---
---
吸引订阅者
十一月 '2611月 '26
十一月 '26
+3
在0个频道中
十月 '26
+34
在0个频道中
Get PRO
九月 '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个频道中
| 日期 | 订阅者增长 | 提及 | 频道 | |
| 07 十一月 | 0 | |||
| 06 十一月 | 0 | |||
| 05 十一月 | 0 | |||
| 04 十一月 | +2 | |||
| 03 十一月 | +1 | |||
| 02 十一月 | 0 | |||
| 01 十一月 | 0 |
频道帖子
📐 Лендинг ресторанного комплекса
Макет средней сложности на русском языке без адаптива
@glo_academy | #макеты
| 2 |  🧰 React Bits
Нужен эффектный первый экран: заголовок вылетает по буквам, кнопка переливается, по клику летят искры. Писать такое с нуля — вечер с GSAP. В React Bits больше 215 готовых анимированных компонентов, их копируют в проект и настраивают пропсами.
На ролике пять компонентов библиотеки без правок в их коде: GradientText переливает надпись сверху, SplitText выкладывает заголовок по буквам, DecryptedText расшифровывает подзаголовок, ShinyText пускает блик по кнопке, ClickSpark рассыпает искры на клик.
У каждого компонента на сайте живое демо с ползунками: крутишь скорость и цвета и забираешь код. Версий четыре: JS или TypeScript, обычный CSS или Tailwind. Ставится одной командой через shadcn, например npx shadcn@latest add @react-bits/SplitText-TS-TW, или копируется из вкладки Code.
Бесплатно, лицензия MIT с оговоркой Commons Clause: в свои и клиентские проекты можно, продавать сами компоненты нельзя.
https://github.com/DavidHDev/react-bits
🔥 — если было полезно
@glo_academy | #инструменты | 178 |
| 3 |  🔌
@glo_academy | 207 |
| 4 |  ⚡ Правильный подсчёт символов в полях с эмодзи
Ставишь лимит в 30 символов и считаешь через text.length. Человек добавляет в отзыв 👨🍳, видит одну картинку, а счётчик отнимает пять, и кнопка «Отправить» гаснет раньше времени. Считать надо то, что видит глаз:
const seg = new Intl.Segmenter('ru', { granularity: 'grapheme' });
const count = (text) => [...seg.segment(text)].length;
count('👨🍳'); // 1, а '👨🍳'.length равен 5
length считает не буквы, а ячейки строки в памяти. Буква занимает одну ячейку, 👍 две, флаг 🇷🇺 четыре, а повар склеен из двух эмодзи и занимает пять. Intl.Segmenter с granularity: 'grapheme' делит строку так, как её видит человек: одна картинка — один символ.
На гифке в отзыв добавляются эмодзи. Счётчик на length прыгает и упирается в лимит, счётчик на Segmenter прибавляет по одному.
Так же текст обрезают «до 100 символов», не разрезая эмодзи пополам. Работает в Chrome 87+, Firefox 125+ и Safari 14.1+.
🔥 — если было полезно
@glo_academy | #js_day | 222 |
| 5 |  ✂️ Код из СМС вводится одним тапом
Пришла СМС с кодом, человек уходит из браузера в сообщения, запоминает цифры и возвращается в форму. По дороге путает 4071 с 4017. Одна строка в поле убирает этот поход:
<input
type="text"
inputmode="numeric"
autocomplete="one-time-code"
>
autocomplete="one-time-code" говорит браузеру, что в поле одноразовый код. Safari на айфоне находит свежую СМС и показывает код над клавиатурой: тап, и цифры уже в поле. inputmode="numeric" открывает клавиатуру с цифрами, а type="text" не съест ведущий ноль, как это делает type="number".
На гифке на оба телефона приходит одна СМС. Слева поле без атрибута: клавиатура есть, кода нет, вспоминай. Справа код висит над клавиатурой и вставляется одним тапом.
Браузеры, которые атрибут не знают, просто покажут обычное поле, так что ставить его можно уже сейчас.
❤️ — если было полезно
@glo_academy | #snippets | 243 |
| 6 |  🎨 CSS-свойство, которое убирает прыжки текста при загрузке шрифта
Подключил шрифт с font-display: swap, и пока он грузится, текст рисуется запасным Arial. Потом приходит настоящий, буквы у него шире, абзац переносится на лишнюю строку, и всё ниже прыгает. Чтобы подмена прошла незаметно, растяни запасной шрифт под размер основного:
@font-face {
font-family: "Brand Fallback";
src: local("Arial");
size-adjust: 113%;
}
body {
font-family: "Brand", "Brand Fallback", sans-serif;
}
Второй @font-face не качает файл: local("Arial") берёт шрифт, который уже есть в системе, а size-adjust растягивает буквы на 13%. Запасной шрифт занимает в строке столько же места, сколько основной, переносы не меняются.
На гифке сверху Arial без правок: шрифт загрузился, абзац стал на строку длиннее, кнопка уехала вниз. Снизу с size-adjust кнопка стоит на месте.
Процент свой для каждого шрифта, в Next.js его считает next/font. Работает в Chrome 92+, Firefox 92+ и Safari 17+.
🔥 — если было полезно
@glo_academy | #css_day | 254 |
| 7 |  📐 Лендинг кофейни
Сложный макет на английском языке с адаптивом
@glo_academy | #макеты | 317 |
| 8 |  Чеклист: 50 ошибок в портфолио дизайнеров
Основано на разборе 1000+ портфолио.
Формфактор собрали ошибки, которые:
— портят первое впечатление от портфолио
— вызывают отторжение у лида
— убивают шансы на оффер
Актуально для рынка 2026.
Чеклист в закрепе @formfactor
Реклама. | 314 |
| 9 |  🚧
@glo_academy | 361 |
| 10 |  ⚡ Кнопка блокируется сама, пока идёт запрос
Человек жмёт «Оформить заказ» второй раз, пока запрос идёт, и уходят два заказа. Обычно заводят isLoading и выключают его в finally. В React 19 за этим следит useTransition:
const [isPending, startTransition] = useTransition();
const submit = () => startTransition(async () => {
await sendOrder(cart);
});
<button onClick={submit} disabled={isPending}>
{isPending ? 'Отправляем…' : 'Оформить заказ'}
</button>
isPending равен true, пока асинхронная функция внутри startTransition не закончится. Кнопка блокируется на время запроса и пишет «Отправляем…», свой стейт для загрузки не нужен.
На гифке по каждой кнопке кликаем дважды. Слева приходят два заказа, справа второй клик упирается в блокировку.
Ошибки лови внутри функции через try/catch, иначе они уйдут в ближайший Error Boundary.
🔥 — если было полезно
@glo_academy | #js_day | 396 |
| 11 |  ✂️ Кнопка «Скопировать» на сайте за три строки JS
Ссылку-приглашение, номер заказа или реквизиты удобнее копировать кнопкой. Человеку не нужно аккуратно выделять текст мышкой, а на телефоне пальцем. Кнопка «Скопировать» пишется в три строки:
button.addEventListener('click', async () => {
await navigator.clipboard.writeText(link.textContent);
button.textContent = 'Скопировано ✓';
});
navigator.clipboard.writeText кладёт текст в буфер обмена, туда же, куда он попадает после Ctrl+C. Дальше человек вставляет его куда угодно. Надпись на кнопке после копирования меняем, чтобы было видно, что нажатие сработало.
На гифке жмём «Скопировать» у ссылки, потом вставляем её в сообщение через ⌘V.
Работает на сайтах с HTTPS и на localhost и только по клику человека. Если браузер не дал скопировать, writeText упадёт с ошибкой, поэтому оберни вызов в try/catch.
❤️ — если было полезно
@glo_academy | #snippets | 337 |
| 12 |  🎨 Стили компонента перебиваются одним классом, без !important
Пишешь класс, чтобы перекрасить кнопку из библиотеки, а она остаётся красной. У селектора .card .button два класса, у твоего один, и вес решает раньше порядка файлов. В ход идёт !important, а через месяц поверх него ставят второй. Обёртка :where() снимает спор:
/* стили компонента */
:where(.card .button) {
background: crimson;
}
/* перебивается одним классом */
.button-buy {
background: teal;
}
Всё, что стоит внутри :where(), не добавляет селектору веса. Такой селектор весит ноль, и любой обычный класс его перебивает, в каком бы файле он ни стоял.
На гифке на обе кнопки вешается один и тот же класс. Сверху селектор библиотеки тяжелее, и кнопка не меняется. Снизу он обёрнут в :where(), и кнопка перекрашивается.
Так пишут сбросы стилей и общие компоненты. Работает во всех браузерах.
🔥 — если было полезно
@glo_academy | #css_day | 314 |
| 13 |  📐 Интернет-магазин сантехники
Макет средней сложности на русском языке без адаптива
@glo_academy | #макеты | 344 |
| 14 |  🧰 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 | #инструменты | 392 |
| 15 |  🪓
@glo_academy | 391 |
| 16 |  ⚡ Группировка массива без 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 | 407 |
| 17 |  ✂️ +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 | 357 |
| 18 |  🎨 Поле для отзыва растёт по тексту без 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 | 380 |
| 19 |  📐 Интернет-магазин ретро-электрики
Сложный макет на русском языке без адаптива
@glo_academy | #макеты | 413 |
| 20 |  🧰 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 | #инструменты | 420 |
