Какие-то уроки [Frontend]

Public

Просмотреть канал

5.1K

11K

115

Не можете присоединиться? @kakieToYroki

2.1k Участники

Обновлено: May 18, 2026 at 10:21 AM

Какие-то уроки [Frontend]

Фронтенд новости и полезности. А также гадости про бэкендеров (чтоб блин нахрен не расслаблялись)

@kakieToYroki offers specialized information about Вирусные видео for subscribers interested in Вирусные видео

Рейтинг

Глобальный рейтинг

#456

Рейтинг по языку

#45

Рейтинг по категории

#23

-1

Рост участников (Последние 6 дней)

Всего: 2.1K

Рост за 24ч: +0 0%

Последние посты

Какие-то уроки [Frontend]

18 мая 2026 г., 22:24

Ухожу из фронтенда!!!!!

Теперь буду снимать обзоры на домофоны и поезда
Еще буду фури-фанфики озвучивать для анимешников
И скорее всего делать прохождение карт в роблоксе....

А вы и дальше свои эти кнопки сраные на 3 пикселя влево двигайте

1,840

Какие-то уроки [Frontend]

18 мая 2026 г., 22:24

и сразу минус 2 потпищека..... а вы говорите, что роблокс это круто...................

1,870

Какие-то уроки [Frontend]

18 мая 2026 г., 22:24

📷 Photo

Коты тоже залипли 😁

1,870

Какие-то уроки [Frontend]

18 мая 2026 г., 22:24

🆕 HTML Sanitizer API ⛔️

Нам тут под шумок новую апишку завезли. Пока что только в Firefox работает, но мне уже нравится, что такое появилось и когда-нибудь будет доступно обычным работягам.

Идея очень простая: удалять потенциальный XSS, перед вставкой в DOM.

Настраиваем санитайзер, указываем какие тэги или атрибуты доступны:

const sanitizer = new Sanitizer({
elements: ["p", "div"],
attributes: ["onclick"],
});

Теперь находим нужный HTML элемент:

const el = document.getElementById("target");
const myHTML = ''

И вставляем myHTML внутрь el, предварительно обработав санитайзером:

el.setHTMLUnsafe(myHTML, { sanitizer });

P. S. Естественно, пока что это супер сырая хрень и использовать ее не нужно. Сейчас все также продолжаем использовать всякие библиотечки для санитизации. Мне просто понравилось, что такая штуковина появилась и я решил вам про нее рассказать 🙂

Источник: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API

#javascript

1,770

Какие-то уроки [Frontend]

18 мая 2026 г., 22:24

📷 Photo

⚙️ 

Важный атрибут у тэга img, который стоит знать - decoding

Когда браузер встречает:

Происходит 3 этапа:
• Загрузка файла (network)
• Декодирование (JPEG/PNG -> пиксели в памяти)
• Отрисовка на экран

⚠️ Важно: декодирование происходит в отдельном потоке и само по себе не блокирует основной поток.

Но!
Перед тем как браузер нарисует следующий кадр страницы, он может решить:
1. подождать, пока изображение будет готово
2. не ждать и показать всё остальное сразу

И вот именно этим управляет decoding.

Простой пример:

Text A
Text B

decoding="sync" -> браузер подождет, пока изображение полностью декодируется, чтобы показать его вместе с остальным контентом в одном кадре

decoding="async" -> браузер не будет ждать - он отрендерит текст сразу, а изображение дорисует позже отдельным обновлением

👉🏻 Лучше всего использовать это для второстепенных картинок, чтобы как можно быстрее показать основной контент.

P. S. Если вы используете NextJS, то у компонента Image этот атрибут итак https://nextjs.org/docs/app/api-reference/components/image#decoding https://nextjs.org/docs/app/api-reference/components/image#decoding Вам ничего делать не нужно

Источник: https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do

#html

Какие-то уроки [Frontend]

18 мая 2026 г., 22:24

🫨 Haptic

Нашел прикольную и залипательную библиотеку web-haptics

Это маленькая JS-библиотека, которая имитирует чувство прикосновения через вибрацию и звук

То есть вместо navigator.vibrate([10, 20, 10]); можно использовать haptics.success()

У библиотеки уже куча готовых паттернов, а еще очень залипательный сайт
Рекомендую зайти и потыкать: https://haptics.lochie.me/

Работает с React, Vue, Svelte:

import { useWebHaptics } from "web-haptics/react";

const { trigger } = useWebHaptics();

Источник: https://x.com/lochieaxon/status/2028514678784291175

#библиотека

View on X (Twitter)

2,210

Какие-то уроки [Frontend]

18 мая 2026 г., 22:24

📷 Photo

У меня сегодня ДР, поэтому в честь данного события запрещаю вам только СЕГОДНЯ оскорблять бэкендеров

1,840

Какие-то уроки [Frontend]

18 мая 2026 г., 22:24

🤨 Оператор --> в JS

В JS есть скрытый оператор длинной стрелки, который уже очень давно поддерживается и упрощает работу.

Посмотрите на этот пример кода:

let len = 3;

while (len --> 0) {
console.log(len) // 2, 1, 0
}

Знаете ли вы как работает оператор `-->`?
На самом деле, это ржака и такого оператора нет)

Тут просто комбинация двух операторов:

while ( (len--) > 0 )

Надеюсь, что вы поверили )))

#javascript

1,440

Какие-то уроки [Frontend]

18 мая 2026 г., 22:24

‼️Требуется Backend Developer в большую компанию 🚨

Что нужно будет делать:
- мыть полы после посетителей
- раскладывать товар на полки
- проверять сроки годности
- драться с воришками

1,880

Какие-то уроки [Frontend]

18 мая 2026 г., 22:24

📷 Photo

🐢 Упрощаем отладку анимаций

Slowmo - небольшая утилита, которая замедляет/ускоряет анимации, чтобы их можно было детально посмотреть

Работает с:
- CSS анимациями ( https://t.me/keyframes, :hover)
- requestAnimationFrame
- Web Animation API
- Video

Подключаете в корне проекта:

import slowmo from "slowmo"

slowmo(0); // Пауза
slowmo(0.5); // Половина
slowmo(1); // Обычная
slowmo(2); // х2


Или через Chrome расширение: https://chromewebstore.google.com/detail/slowmo/mofjcfdoeioofnpbhipdjmldfokfndoa


Источник: https://slowmo.dev/

#библиотека

2,030

Какие-то уроки [Frontend]

4 мая 2026 г., 01:26

📷 Photo

🏥 React Doctor

Нашел сейчас полезную тулзу. Это CLI утилита, которая статически анализирует ваш React/Next код (типа линтера, но с "агентными" советами) и показывает баги/антипаттерны в проекте

- Проблемы безопастности
- Лишние ре-рендеры
- Лишние useEffect
- Забытые отписки от событий или таймеров
- Проблемы с доступностью
- Prop drilling вместо context или композиции

Запустите в терминале, чтобы проверить свой проект:

npx -y react-doctor@latest


Источник: https://www.react.doctor/

#react #библиотека

2,290

Какие-то уроки [Frontend]

4 мая 2026 г., 01:26

🤏🏻 Маленькое бесполезное знание

У псевдоэлементов ::before и ::after в свойстве content можно использовать перенос строк

Делается это при помощи \A или \00000A + обязательно добавить white-space: pre;

.element::before {
content: "Первая строка\A Вторая строка";
white-space: pre;
}

Получился аналог тэга 
. Хз зачем вам это, но вдруг пригодится

#css

1,420

Какие-то уроки [Frontend]

13 апр. 2026 г., 21:04

[poll]

1,640

Showing 13 of 13 posts

No more posts

Рейтинг

Требуется вход

Отзывы пользователей (0)

Пока нет отзывов. Будьте первым, кто поделится своим опытом!

Какие-то уроки [Frontend]

Какие-то уроки [Frontend]

Рейтинг

Рост участников (Последние 6 дней)

Последние посты

Рейтинг

Отзывы пользователей (0)

Похожие каналы Telegram

СаМИ

ДВ Главное

Котики Нейросеть

Абхазия будущего

саня ты в порядке

Благотворительный фонд Закят

Жуковец

ВД «АКТИВ»

Похожие каналы Telegram

СаМИ

ДВ Главное

Котики Нейросеть

Абхазия будущего

саня ты в порядке

Благотворительный фонд Закят

Жуковец

ВД «АКТИВ»

Отзывы пользователей (0)

Последние посты