Новая фишка Angular 19: Resource API

Мой любимый Ангуляр потихоньку превращается в Реакт. Добавляют эффекты, а теперь ввели нечто похожее на хуки. Правильной ли дорогой идем?

https://www.angulararchitects.io/blog/asynchronous-resources-with-angulars-new-resource-api/?mc_cid=ea8d6b1f68&mc_eid=ef706c5abd

Охренеть. CSS Nesting уже нативно доступен во всех современных браузерах. Кажется, пора прощаться с препроцессорами.

Сами посмотрите: https://caniuse.com/css-nesting
Как использовать: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

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

https://isuckatcs.github.io/how-to-compile-your-language/parsing.html

Год назад админ выступал на #HolyJS. Это был потрясающий опыт.
В этом году тоже загляну туда😁

Как и обещал, выкладываю презенташку и кучу полезной инфы для самостоятельного изучения🧐


Дефолтные стили хрома:
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/resources/html.css

Глубокая статья о процессе композиции от команды разработчиков Хрома:
https://sking7.github.io/articles/48074838.html

Статья из документации Хрома о работе компонента Chrome Compositor:
https://chromium.googlesource.com/chromium/src/+/master/docs/how_cc_works.md

Ооочень много информации о рендеринге в Хроме - отсюда рекомендую почитать Compositor Property Trees и Life of a Pixel:
https://www.chromium.org/developers/design-documents/chromium-graphics/

Как смотреть слои в DevTools:
https://dermeck.github.io/composite-layers/#:~:text=Show%20Layer%20Borders%20in%20Rendering,the%20layers%20on%20the%20screen.

Гайд по выделению анимации в отдельный слой:
https://web.dev/articles/animations-guide?hl=en
https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count?hl=en

Немного общих статей про CRP
https://web.dev/learn/performance/understanding-the-critical-path?hl=en
https://alistapart.com/article/from-url-to-interactive/

Этап Paint
https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/

Layout Tree
https://web.dev/articles/critical-rendering-path/render-tree-construction?hl=en

Выступил на Саратовском IT-Митапе. Да, мы дождались возрождения Саратовских конференций!
Рассказывал о рендеринге веб-страниц на гарфической карте компьютера.
Уже запланировал второй доклад на митап 12 апреля - на этот раз расскажу про рендеринг видео в браузере.
Приходите😁

https://rutube.ru/video/b39e1ef67ab5a8fed5118081dc085189/?r=plemwd

#мемы #фронтенд

🔐 Разбираем модели контроля доступа

1️⃣ DAC (Discretionary Access Control)
🔹 Владелец ресурса сам назначает права (например, доступ к файлу).
🔹 Гибкость — плюс, но риск утечек из-за человеческого фактора.
🔹 Пример: классические UNIX-права (`chmod`).

2️⃣ MAC (Mandatory Access Control)
🔹 Доступ жёстко регулируется системой (госструктуры, военные).
🔹 Использует метки (например, «Секретно»), пользователи не могут менять правила.
🔹 Пример: SELinux, Windows Mandatory Integrity Control.

3️⃣ RBAC (Role-Based Access Control)
🔹 Права выдаются по ролям (админ, модератор, юзер).
🔹 Удобно для бизнес-приложений, но возможен избыточный доступ.
🔹 Пример: корпоративные системы (Active Directory).

4️⃣ ABAC (Attribute-Based Access Control)
🔹 Учитывает атрибуты (роль, время, местоположение, устройство).
🔹 Гибкий, но сложный в настройке и производительности.
🔹 Пример: политики AWS IAM.

5️⃣ FGA (Fine-Grained Authorization)
🔹 Детальный контроль (например, доступ к определённому полю в базе).
🔹 Идеально для микросервисов и API-ориентированных систем.
🔹 Пример: OpenFGA, Google Zanzibar.

💡 Вывод: Выбор зависит от требований — безопасность (MAC), простота (RBAC) или гибкость (ABAC/FGA).

Подробнее: https://www.permit.io/blog/mac-dac-rbac-and-fga-and-access-control

#Security #DevOps #AccessControl

✨ View Transitions API — одна строка CSS, и ваш сайт оживает

Помните, как раньше для плавных переходов между страницами нужен был SPA-фреймворк, React Router и куча анимационной логики? Теперь это делается нативно в браузере. Одной строкой.

View Transition API позволяет создавать кинематографичные переходы между страницами — и в SPA, и (что важнее) в обычных многостраничных сайтах. Браузер сам делает скриншоты старого и нового состояний и анимирует разницу через CSS Animations.

▪️ Для SPA — оборачиваете обновление DOM в document.startViewTransition():

document.startViewTransition(() => {
  updateTheDOMSomehow();
});

▪️ Для MPA (многостраничник) — вообще без JS. Добавляете в CSS обеих страниц:

@view-transition {
  navigation: auto;
}

И всё. Браузер сам подхватит навигацию и сделает плавный переход.

Что можно анимировать: превращение миниатюры в полную картинку, фиксированную навигацию между страницами, перестройку сетки при фильтрации. Работает в Chrome 126+ для MPA, в Chrome 111+ для SPA. Firefox и Safari пока догоняют.

Это один из тех случаев, когда веб-платформа забирает себе то, что раньше требовало библиотек. Как когда-то CSS Grid убил float-сетки — так и View Transitions убивает кастомные page-transition хаки.

🔗 Документация Chrome

#css #frontend #webapi