Skip to content
No results
JSBlog
  • Winben blogja
  • CSS
  • Git
  • HTTP
  • Node.js
  • Teljesítmény
  • Web API-k
  • Webbiztonság
JSBlog
  • Teljesítmény

A fetchpriority nem turbógomb: így gyorsítsd az LCP-képet

Böngészőből induló hálózati erőforrások között kiemelt, elsőbbséget kapó fő kép sematikus ábrája

A fetchpriority finom jelzés a böngészőnek: az LCP-képnek adhat előnyt, de csak akkor segít, ha a valódi szűk keresztmetszet a letöltési prioritás.

  • winben
  • 2026.08.10.
  • CSS

A CSS @property: amikor a custom property többé nem csak egy string

Diagram, amely egy szaggatott, ugrásszerű színátmenetű sávot mutat felül, alatta pedig ugyanaz a színátmenet simán, folyamatosan interpolálva, közéjük rajzolt nyíllal jelezve az átalakulást.

A CSS custom property-k alapból szövegként viselkednek, ezért nem animálhatók – a @property at-rule típust, alapértéket és öröklődési szabályt ad hozzájuk, így végre simán animálható egy gradiens megállója vagy egy szög is.

  • winben
  • 2026.08.10.
  • Web API-k

Az URLPattern: routing reguláris kifejezés-labirintus nélkül

URL-összetevőket mintákhoz és paraméterekhez kapcsoló sematikus ábra

A URLPattern API-val a böngésző natívan tud URL-eket komponensenként illeszteni és elnevezett paramétereket kiolvasni. Megmutatjuk, mikor tisztább a regexnél, és miért nem query parser.

  • winben
  • 2026.08.10.
  • Git

A git rerere: nem kell kétszer megoldanod ugyanazt a merge-konfliktust

Diagram: a git rerere folyamata — az első rebase-nél kézzel feloldott konfliktus a .git/rr-cache alá kerül preimage és postimage formájában, majd egy későbbi, azonos konfliktust dobó rebase-nél a git automatikusan visszaadja ezt a megoldást.

A git rerere megjegyzi, hogyan oldottál fel egy merge- vagy rebase-konfliktust, és legközelebb, ha ugyanaz a hunk jön elő, automatikusan visszaadja a megoldást. 2006 óta ott van minden git telepítésben, csak alapból ki van kapcsolva.

  • winben
  • 2026.08.10.
  • HTTP

Vary: a fejléc, ami megmondja a CDN-nek, mikor nem ugyanaz a válasz

Két Accept-Language értékhez két külön CDN cache-kulcs és nyelvi válasz tartozik

A Vary nem a cache lejáratát, hanem a cache-kulcsot módosítja. Megmutatjuk, miért kell az Accept-Language mellé, és miért hibás a Vary: Cookie.

  • winben
  • 2026.08.09.
  • Webbiztonság

A polyfill.io feltörése után is kevesen használják: Subresource Integrity CDN-ekhez

Diagram: a CDN-ről érkező script tartalma egy hash-ellenőrző kapun megy át – ha a hash egyezik, a böngésző lefuttatja a scriptet, ha nem egyezik (pirossal jelölve), a betöltés blokkolva marad.

Amikor 2024-ben feltörték a polyfill.io CDN-t, több mint 100 000 oldal futtatott rosszindulatú kódot – anélkül, hogy egyetlen saját sort is módosítottak volna. A Subresource Integrity attribútum pont ez ellen véd egy egyszerű hash-ellenőrzéssel, mégis kevesen kapcsolják be.

  • winben
  • 2026.08.09.
  • Web API-k

WebTransport: amikor a legfrissebb adat többet ér, mint a biztos kézbesítés

WebTransport kapcsolat: megbízható streamek és datagramok a kliens, a köztes átviteli réteg és a szerver között

A WebTransport egy kapcsolatban ad megbízható streameket és elveszhető datagramokat. Megmutatjuk, mikor jó ez valós idejű webalkalmazásban, miért kell saját üzenetkeretezés, és miért nem csak egy gyorsabb WebSocket.

  • winben
  • 2026.08.09.
  • Webbiztonság

Az innerHTML mostantól típusellenőrzött lehet: a Trusted Types API bekerült minden nagy böngészőbe

Diagram: egy nem megbízható string a Trusted Types szabályzaton (policy) áthaladva TrustedHTML objektummá alakul, mielőtt eléri az innerHTML sinket, míg a szabályzat nélküli string a require-trusted-types-for CSP direktívánál TypeError-ral elakad

A CSP a forrásokat szűri, de nem véd a saját kódod innerHTML-hívásai ellen. A Trusted Types API típust ad a stringeknek a DOM veszélyes pontjain – és 2026-ra a Firefox és a Safari is felzárkózott, így most már mindhárom nagy böngészőmotor kikényszeríti.

  • winben
  • 2026.08.09.
  • Teljesítmény

A vissza gomb gyorsaságának rejtett ellensége: így töröd el a bfcache-t

A böngésző egy oldalt memóriába tesz, majd a vissza navigációkor onnan állítja helyre

A böngésző bfcache-e teljes oldalt állíthat vissza a vissza gombnál. Az unload, az élő kapcsolatok és az elavult állapot mégis könnyen elrontja ezt.

  • winben
  • 2026.08.09.
  • Teljesítmény

content-visibility: auto – amit a felhasználó nem lát, azt a böngésző meg sem rajzolja le

Diagram egy böngészőablakról: a látható területen kívüli szakaszok szaggatott kerettel, kihagyott tartalomként jelennek meg, a látható területen belüliek pedig teljesen renderelve vannak, jelezve a content-visibility: auto működését

A content-visibility CSS tulajdonság auto értéke feltételesen kapcsolja ki a renderelést az off-screen tartalmakon. Megnézzük, hogyan működik a contain-intrinsic-size, a contentvisibilityautostatechange esemény, és mikor éri meg használni.

  • winben
  • 2026.08.09.
1 2 3
Next
Copyright © 2026 - WordPress Theme by CreativeThemes