Плавный, как css-анимация

Public

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

57 Участники

Обновлено: February 21, 2026 at 4:07 AM

Плавный, как css-анимация

Fronted-разработчик. Пишу про web для вас

Follow @loveefrontend to stay updated with the latest fronted trends and news

Рейтинг

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

#51693

-2622

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

#36264

-2285

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

#1007

-73

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

Всего: 57

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

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

Плавный, как css-анимация

24 февр. 2026 г., 13:42

Это был 5-дневный мини-цикл про безопасность фронтенда

Мы разобрали:
✅XSS — чужой код в твоей странице ()
✅CSRF — атаки через доверие браузера ()
✅localStorage и токены ()
✅CORS — открытые ворота к API ()
✅Supply Chain — вредоносные зависимости ()

Но это только верхушка

Если углубляться дальше — вот темы, которые стоит изучить отдельно:
- Безопасная аутентификация и хранение сессий
- CSP (Content Security Policy) — мощный инструмент против XSS
- Инъекции (SQL, NoSQL, шаблонные)
- Безопасная загрузка и обработка файлов
- Безопасность API и rate limiting

Как вам такие серии постов? Попробовал новый формат, ставьте 🔥, если дальше делать периодически подобное

Плавный, как css-анимация

24 февр. 2026 г., 13:42

Испольузем text-wrap: pretty для текста

Если вы тоже сталкиваетесь в работе с проблемами переноса текста, то специально для нас добавили относительно новое свойство, благодаря которому браузер старается чуть аккуратнее переносить слова, избегая висячих союзов и коротких слов в конце строки

Особенно заметно в длинных заголовках и адаптивной вёрстке. Можно больше не расставлять неразрывные пробелы

#css #html #web #csstip #frontend

Плавный, как css-анимация

24 февр. 2026 г., 13:42

CORS — ворота, которые часто забывают закрыть

Cross-Origin Resource Sharing — это механизм безопасности браузера, который позволяет веб-странице с одного домена запрашивать ресурсы с другого домена
CORS — не просто ошибка в консоли, это твоя линия защиты. Самая частая ошибка — разрешить всё и всем

Пример опасной конфигурации:

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true


Это позволяет любому сайту читать приватные ответы вашего API

Как правильно:
✅Разрешаем только нужные Origin.
✅Проверяем Origin на сервере.
✅Для cookie — SameSite и Secure.

CORS — это не «чтобы браузер не ругался», а «чтобы данные не утекли»

#cors #web #frontend

Плавный, как css-анимация

24 февр. 2026 г., 13:42

npm install — и в проекте троян

Supply chain атаки — когда вредоносный код приходит не через XSS, а через твои зависимости.
npm, CDN, даже библиотека с GitHub — может содержать вред

Пример из жизни: пакет event-stream в npm крал криптокошельки у разработчиков

Как защититься:
✅Проверяем зависимости (npm audit, Snyk, dependabot)
✅Не обновляем вслепую — читаем changelog
✅Фиксируем версии (package-lock.json)
✅Для CDN — используем integrity и crossorigin

#npm #web #frontend

Плавный, как css-анимация

24 февр. 2026 г., 13:42

Когда твой браузер работает против тебя - CSRF

CSRF (Cross-Site Request Forgery) — подделка запросов от лица пользователя.
Злоумышленник заставляет твой браузер выполнить запрос на доверенный сайт, используя твою авторизацию.

Пример:

Если ты залогинен в bank.example, перевод сработает.

Как защититься:
✅Используем CSRF-токены.
✅Cookie с SameSite=lax или strict.
✅Проверяем Origin / Referer на сервере.

💡CSRF — это атака не на код, а на доверие между браузером и сервером.

#web #js #csrf #frontend

Плавный, как css-анимация

24 февр. 2026 г., 13:42

localStorage — не сейф, а прозрачная витрина

⚠️ Многие разработчики хранят JWT или refresh-токен в localStorage.
Один XSS — и всё, токен у злоумышленника.

Пример:

localStorage.setItem("token", jwt);


XSS может просто прочитать localStorage и украсть токен.

Как надо:
✅Храним токен в HttpOnly Secure cookie.
✅Не кладем туда персональные данные.
✅Удаляем всё при logout.

🔐 localStorage — удобен, но не безопасен.

#javascript #frontend #web #localstorage

Плавный, как css-анимация

24 февр. 2026 г., 13:42

🚨 На этой неделе — серия постов о безопасности во фронтенде.

Разберём реальные уязвимости, о которых стоит помнить: XSS, CSRF, CORS, уязвимости зависимостей и неочевидные утечки данных.

Сегодня начем с XSS

XSS — когда alert(1) может стоить тебе репутации

XSS (Cross-Site Scripting) — внедрение чужого JavaScript в твой интерфейс.
Это может привести к краже сессий, токенов, выполнению действий от имени пользователя и даже подмене UI

Пример:

Вводим url: ?q= и код выполняется прямо у пользователя 🌚

Как защититься:
✅Не вставляем данные через innerHTML.
✅Используем textContent или безопасные шаблонизаторы.
✅CSP + DOMPurify = гигиена фронтенда.

▪️XSS — не баг. Это следствие доверия туда, где его быть не должно.

#web #js #xss #frontend

Плавный, как css-анимация

24 февр. 2026 г., 13:42

Как браузер превращает байты в картинку

MDN выпустили статью про внутреннюю кухню графики в вебе — от пикселей до GPU. 🎨

Что там интересного:
✅Разобрали, как работают пиксели (RGBA, глубина цвета)
✅Объяснили, чем отличаются кодеки — JPEG, AVIF, WebP, JPEG XL
✅Показали, как браузер декодирует изображение и рисует его на экране
✅И даже — как можно читать и менять пиксели в JS через 

Оптимизация картинок — это не просто «сжать поменьше». Это про цвет, глубину и то, кто — CPU или GPU — будет рисовать.

Понял, что сам многого не знаю, вокруг картинок, есть чему поучиться

➡️ https://developer.mozilla.org/en-US/blog/image-formats-pixels-graphics/

#web #browser #mdn #image

Плавный, как css-анимация

24 февр. 2026 г., 13:42

📱 Firefox наконец-то догнал остальных

В Firefox 144 появилась поддержка View Transitions API Level 1 — и это значит, что теперь все современные браузеры умеют в анимированные переходы между страницами.

Что это вообще такое?

View Transitions API позволяет плавно анимировать переходы между разными состояниями сайта — например, при смене страниц в SPA или при клике на карточку товара.
Без фреймворков, без сложных анимаций руками, всё на чистом CSS и паре строк JS:

document.startViewTransition(() => {
// обновляем DOM — браузер сам сделает плавный переход
});

Теперь, когда поддержка есть в Chrome, Safari и Firefox, можно внедрять без опасений

#frontend #css #firefox #webdev #web

Плавный, как css-анимация

24 февр. 2026 г., 13:42

HTML умеет больше, чем ты думаешь!

Крис Хайльман напомнил, что у таблиц есть свой старый, но рабочий HTML Tables API:
можно создавать строки и ячейки без innerHTML, безопасно и нативно:

table.forEach((row,ri) => {
let r = t.insertRow(ri);
row.forEach((l,i) => {
let c = r.insertCell(i);
c.innerText = l;
})
});


Да, HTML уже сам по себе умеет кучу крутого:
🟢— модалки без JS
🟢popover — всплывающие подсказки нативно
🟢 showPicker() — вызов системного выбора дат, файлов и цветов
🟢 и  — аккордеоны без JS

Не всё решается фреймворками 😏

https://christianheilmann.com/2025/10/08/abandonware-of-the-web-do-you-know-that-there-is-an-html-tables-api/

#web #html #browser

Плавный, как css-анимация

28 нояб. 2025 г., 09:29

React переходит к независимой модели поддержки

Как вы знаете, React принадлежит Meta — но теперь всё меняется.

Фреймворк(библиотека?😅) переходит под крыло React Foundation в составе Linux Foundation.
Meta выделяет 💰 $3 млн и обещает поддержку на 5 лет, но дальше React станет независимым проектом с открытым управлением.

✅Больше прозрачности
✅Меньше корпоративного влияния
✅Больше участия сообщества

Новый этап для всего фронтенда. 🚀

➡️https://dataconomy.com/2025/10/08/react-finds-a-new-home-at-the-linux-foundation-with-3m-meta-support/

?q=%23react ?q=%23meta ?q=%23web

Плавный, как css-анимация

27 нояб. 2025 г., 09:31

Кастомные функции в CSS!

В Chrome Canary появились экспериментальные https://t.me/function и if() — мощные инструменты для логики прямо в CSS.

✅https://t.me/function позволяет создавать собственные функции (например, --light-dark()), которые возвращают разные значения в зависимости от условий.
✅if() добавляет ветвление прямо в декларациях — теперь можно писать color: if(style(--scheme: dark): black; else: white);
✅Поддерживаются container queries, https://t.me/scope, и attr(), что делает возможным локальные светлые/тёмные темы на уровне элемента.

Работает пока только в Chrome Canary с включённым Experimental Web Platform Features.

Почитать про всякие дикости с функциями можно https://www.bram.us/2025/02/18/css-at-function-and-css-if/

?q=%23web ?q=%23css ?q=%23frontend

Плавный, как css-анимация

25 нояб. 2025 г., 05:48

MCP сервер для девтулзов Chrome!

Google представил Chrome DevTools MCP server:
✅AI проверяет фиксы прямо в Chrome
✅Читает ошибки в console / network
✅Симулирует клики и ввод форм
✅Меняет стили и следит за layout
✅Запускает perf-аудиты (например, LCP)

▪️Ваш карманный фронтендер для дебагга💪

На прошлой неделе сам получил подписку на Cursor, буду тестить

➡️https://developer.chrome.com/blog/chrome-devtools-mcp

?q=%23web ?q=%23ai ?q=%23devtools ?q=%23mcp ?q=%23chrome ?q=%23google

Плавный, как css-анимация

7 нояб. 2025 г., 07:17

Хайпим - Liquid Glass дизайн, как у Apple в браузере

Что внутри статьи:
✅Простая физика преломления (закон Снеллиуса) → чтобы понять, как работает «стекло»
✅Математические формы (squircle, convex, concave) → задаём поведение света
✅Построение карты смещений → пиксели «гнутся» как лучи
✅Использование SVG displacement maps и CSS-фильтров → оживляем эффект прямо в браузере

Результат — реалистичное жидкое стекло без WebGL и тяжёлых шейдеров. 🔥

▪️Осторожно, математика 😆

➡️https://kube.io/blog/liquid-glass-css-svg

?q=%23web ?q=%23liquidglass ?q=%23frontend ?q=%23javascript

Плавный, как css-анимация

7 нояб. 2025 г., 07:17

Привет, спишь?) 🖼️

Я живой, и собираюсь продолжать постить контент. За прошедший год я поменял душную работу и думаю в финтех (большой) ни ногой. Уже спустя полгода освоился на новой работе и хочется, чтобы канал ожил 🐾

Не расходимся, на днях начну постить 🙂

Плавный, как css-анимация

7 нояб. 2025 г., 07:17

Новое в Browserlist

В Browserslist добавили поддержку Baseline-запросов прямо из коробки. Теперь больше не нужен отдельный пакет browserslist-config-baseline.

Доступные варианты:

✅baseline widely available — функции, поддерживаемые браузерами уже >30 месяцев.

✅baseline newly available — функции с поддержкой <30 месяцев.

✅baseline YYYY — набор функций по конкретному году (с 2015 до текущего).

Использовать можно как в .browserslistrc, так и в package.json

➡️ https://web.dev/blog/browserslist-supports-baseline

?q=%23web ?q=%23browserlist ?q=%23frontend ?q=%23javascript

Плавный, как css-анимация

7 нояб. 2025 г., 07:17

Прикольный метод structuredClone

Нативный способ для надёжного клонирования любых JS-объектов:

✅Клонирует сложные структуры без потери данных
✅Работает даже с циклическими ссылками
✅Поддерживает transferable объекты (например, ArrayBuffer) — можно передавать их без лишних копий
✅Идеально для Web Workers и асинхронных задач

Пример:
const original = { a: 1, b: { c: 2 } };const copy = structuredClone(original);console.log(copy.b.c); // 2

Никаких сюрпризов. Только чистое, предсказуемое копирование 😎

➡️https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone

?q=%23web ?q=%23mdn ?q=%23frontend ?q=%23javascript

Плавный, как css-анимация

31 окт. 2025 г., 07:38

https://chrome.dev/css-wrapped-2024/ от команды Google Chrome

Подготовили интерактивный обзор самых важных нововведений в css и в частности, того, что завели за 2024 в 📱

Там и про стилизацию , scrollbar и про анимации. Не забыли и про хайповый @property. Доступность проверяйте, не везде реализованы описанные фичи

Описание, картинки, код, демки, в общем, пробуйте 😇

150

Плавный, как css-анимация

30 окт. 2025 г., 07:38

Релиз React 19

Наконец мы получили стабильную версию React 19, которую можно использовать

✅Новые директивы use client и use server
✅Улучшенная работа с формами
✅Новые хуки
✅ref, который прокидывается автоматом, избавляемся от forwardRef
и многое другое

➡️https://react.dev/blog/2024/12/05/react-19
➡️https://habr.com/ru/companies/timeweb/articles/843016/ (по раннему анонсу)

Я кстати, так и не понял, включен ли в 19-ю версию их новый компилятор, или же он будет жить отдельным пакетом🤔

?q=%23web ?q=%23react ?q=%23frontend

156

Плавный, как css-анимация

29 окт. 2025 г., 07:37

Релиз TypeScript 5.7 🖼️

Из интересного:
✅Поддержка es2024
✅Ускоренный поиск конфига, для случая, когда у вас большой проект, в котором есть несколько отдельных подпроектов со своими конфигами
✅Добавлены проверки для переменных, которые не были использованы, раньше они приводили к ошибкам

➡️Больше подробностей в https://devblogs.microsoft.com/typescript/announcing-typescript-5-7/

?q=%23web ?q=%23frontend ?q=%23typescript

122

Плавный, как css-анимация

27 окт. 2025 г., 07:45

Релиз Vite 6.0

▪️Объявили как самый значимый релиз после выпуска второй версии.

В https://vite.dev/blog/announcing-vite6.html#speeding-up-the-vite-ecosystem все главные изменения, гайды по миграции, а так же получасовое видео с презентацией всей vite-экосистемы

?q=%23vite ?q=%23web ?q=%23bundler ?q=%23frontend

133

Плавный, как css-анимация

24 окт. 2025 г., 07:20

Результаты State of Frontend 2024

Обширный материал с результатами опроса по используемым библиотекам и технологиям. Так, например, можно узнать, что доля React, среди используемых библиотек/фреймворков составляет 69.9%, а typescript используют 90.6% опрошенных

Так же есть подобные опросы в разрезе технологий:
🖼️- https://t.me/loveefrontend/37 (Результаты)
🖼️ - https://t.me/loveefrontend/38 (Проходит опрос)
🖼️- https://2024.stateofhtml.com/en-US/ (Результаты)

➡️https://tsh.io/state-of-frontend/

Плавный, как css-анимация

24 окт. 2025 г., 07:20

Eslint выкатили свой линтер для css

Конечно, же сейчас это совсем не замена stylelint на текущий момент, т.к. версия только 0.1.0. Но следить точно стоит.

Если захотите поиграться, имейте в виду, работает на версии ESLint v9.6.0 и выше

➡️https://github.com/eslint/css

?q=%23eslint ?q=%23css ?q=%23web ?q=%23frontend

Плавный, как css-анимация

23 окт. 2025 г., 07:41

Те штуки в Typescript в паре с React, которые стоит знать

📌ReturnType
Очень просто получить тип компонента или коллбэка
export async function loader() { return {…}}type LoaderData = Awaited>

📌ReactNode
Используйте ReactNode для типизации children, особенно теперь, когда его исключили по умолчанию из типа FunctionalComponent в последних версиях React. ReactNode сразу содержит в себе и ReactElement и примитивы, что спасет вас от дальнейших ошибок
function Heading(props: { children: ReactNode })...

📌Omit
Используйте дженерик Omit, если хотите перезаписать какой-то библиотечный тип или просто убрать ненужные пропсы
Omit,"className">

📌 "as const" трюк
Когда пишите свои хуки или просто в других случаях возвращаете массив с конкретным набором, в этих случаях помогите ts понять, что это не простые массивы добавив as const (конечно в идеале вообще типизировать хук/функцию)
... return [data, loading] as const

▪️А какие трюки используете вы?

➡️Больше советов в https://www.jacobparis.com/content/react-ts

Плавный, как css-анимация

22 окт. 2025 г., 07:41

Эволюция языка JavaScript 🖼️Небольшая ретроспектива в развитии языка, основные моменты.
Будет интересно особенно тем, кто пришел в JS в последние пару лет

Описаны такие события, как:
🟡Стандарт ECMAScript
🟡Ajax и интерактивность
🟡Приход фреймворков (в частности jQuery)
Я кстати его уже не застал, ни строчки кода на jQuery, но были легаси, где можно было его встретить
🟡Современная эра, с приходом ES6
и т.д.

↗️ https://dev.to/shafayeat/the-evolution-of-javascript-3950

?q=%23web ?q=%23frontend ?q=%23javascript

Плавный, как css-анимация

21 окт. 2025 г., 07:42

Новый логотип css!

Новый логотип, как маркетинговый ход привлечения внимания к новой эре в css

Репозиторий с гайдлайнами по использованию тоже завезли, там и скачать можно

↗️ https://github.com/CSS-Next/css-next

?q=%23css ?q=%23web ?q=%23frontend

Плавный, как css-анимация

20 окт. 2025 г., 07:42

Как реализованы различные методы массива в JS

В статье приведены примеры кода, то как написаны порядка 30 функций для манипуляции над массивами

↗️ https://dev.to/nozibul_islam_113b1d5334f/algorithms-behind-javascript-array-methods-50n9

➡️https://t.me/loveefrontend

?q=%23javascript ?q=%23web ?q=%23frontend

Плавный, как css-анимация

28 дек. 2024 г., 10:39

🎨 Sticker

इसीलिए backup चैनल को जरूर Join कर लिया करे

29,400

Плавный, как css-анимация

22 июл. 2024 г., 17:10

📷 Photo

How To Open Terabox Link | How To Download Watch Online |

Terabox Link [ Terabox app ] Se Video Download Ya Watch Krna Nahi Aata Toh Iss Video Ko Dekho

58,000

102

Плавный, как css-анимация

29 мая 2023 г., 16:27

🎨 Sticker

This message couldn't be displayed on your device due to copyright infringement.

123

Showing 30 of 31 posts

Рейтинг

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

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

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

Плавный, как css-анимация

Плавный, как css-анимация

Рейтинг

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

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

Рейтинг

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

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

Монолит

Бесконечное Лето 🔰410🔰

Сибирский Гештальт

My Car

Канал Алексея Чепы

Bosfor pictures

Ахербия - все про iHerb 💚

Крупнов

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

Монолит

Бесконечное Лето 🔰410🔰

Сибирский Гештальт

My Car

Канал Алексея Чепы

Bosfor pictures

Ахербия - все про iHerb 💚

Крупнов

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

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