Skip to content
No results
  • A JSBlogról
JSBlog
  • Winben blogja
  • CSS
  • Git
  • HTTP
  • Node.js
  • Teljesítmény
  • Web API-k
  • Webbiztonság
JSBlog
  • 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.

  • Szabó Benjámin
  • 2026.04.20.
  • 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.

  • Szabó Benjámin
  • 2026.04.18.
  • 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.

  • Szabó Benjámin
  • 2026.04.17.
  • 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.

  • Szabó Benjámin
  • 2026.04.16.
  • 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.

  • Szabó Benjámin
  • 2026.04.12.
  • 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.

  • Szabó Benjámin
  • 2026.04.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.

  • Szabó Benjámin
  • 2026.04.06.
  • 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.

  • Szabó Benjámin
  • 2026.04.03.
  • JavaScript

Az emoji nem egy karakter: szöveglimitek Intl.Segmenterrel

Az UTF-16 kódegységek több különálló elemből egy grafémaklaszterré rendeződnek

A JavaScript length értéke UTF-16-kódegységeket számlál, ezért egy emoji vagy kombinált ékezet több helyet foglalhat, mint amennyinek látszik. Az Intl.Segmenter grafémaklaszterekre bontja a szöveget: így a felhasználónak ígért karakterszámot lehet mérni és biztonságosan levágni.

  • Szabó Benjámin
  • 2026.04.01.
  • Node.js

A keepAliveTimeout csapdája: miért 502-zik időnként a Node szerver a load balancer mögött

Diagram: kliens kapcsolódik egy load balancerhez, ami továbbítja a kérést egy Node.js szervernek; a load balancer és a szerver közötti kapcsolat eltérő hosszúságú időtúllépés miatt megszakad, amit egy piros X jelez

A Node.js HTTP szerverének keepAliveTimeout alapértéke nyolc éve öt másodperc – jóval rövidebb, mint a legtöbb load balancer vagy proxy idle timeoutja. Ez okozza a klasszikus, szórványos 502-es hibákat alacsony forgalom mellett. A Node.js most végre 65 másodpercre emeli az alapértéket (v26-tól), de addig kézzel kell beállítani.

  • Szabó Benjámin
  • 2026.03.27.
  • Web API-k

A z-index nem old meg mindent: Popover API és a böngésző top layer rétege

A weboldal rétegei fölött, külön böngészőrétegben megjelenő lebegő panel sematikus ábrája

Lebegő menük és panelek esetén a z-index gyakran a rossz eszköz. A Popover API a böngésző top layer rétegét használja, de nem váltja ki a tudatos fókusz- és pozíciókezelést.

  • Szabó Benjámin
  • 2026.03.25.
  • JavaScript

A using deklaráció garantálja az erőforrás-felszabadítást – Node 22-n viszont csak félig igaz ez

Három erőforrás-kártya egy kódblokkban, mindegyikből egy vonal fut egy zöld pipához, ami a garantált, sorrendben történő felszabadítást jelzi

A using és await using végre garantálja, hogy egy erőforrás felszabadítása lefusson – hiba, korai return esetén is. Node 24-en tökéletesen működik, Node 22 flag-elt verziója viszont némán elnyeli a dispose-hibákat.

  • Szabó Benjámin
  • 2026.03.24.
  • Web API-k

A Response.clone() memóriacsapdája: ha az egyik olvasó lemarad

Két sebességgel olvasott HTTP válasz adatfolyamának memóriapuffere

A Response.clone() nem teljes másolatot készít: a lassan fogyó streamág korlátlan memóriapuffert építhet. Mikor veszélyes ez, és hogyan kerüld el?

  • Szabó Benjámin
  • 2026.03.22.
  • Adatbázis

UUIDv7: az elsődleges kulcs, ami nem lő szét minden indexet

Az UUIDv7 128 bites felépítése: 48 bit időbélyeg, verzió- és variánsjelölő, valamint random adat, alatta ábra, amely szemlélteti, hogy a véletlen UUIDv4 szétszórtan, az UUIDv7 pedig időrendi sorrendben kerül be az adatbázis indexébe

A random UUIDv4 primary key évek óta ismert teljesítményprobléma B-fa indexeknél. Az RFC 9562-es UUIDv7 időrendi sorrendbe teszi az azonosítókat, Node.js 26.1-től és PostgreSQL 18-tól natívan is elérhető — nézzük meg, hogyan működik, és mibe kerül.

  • Szabó Benjámin
  • 2026.03.21.
  • Web API-k

Web Locks API: így ne fusson kétszer ugyanaz a háttérmunka két böngészőfülben

Két böngészőfül egy központi záron keresztül biztonságosan éri el a közös adatforrást

Így akadályozhatod meg, hogy több böngészőfül egyszerre végezze ugyanazt a háttérmunkát a Web Locks API-val.

  • Szabó Benjámin
  • 2026.03.20.
  • Docker

A BuildKit cache mount begyorsítja a Docker npm installt – a legtöbb CI-futtatón mégsem marad meg belőle semmi

Diagram, amely összehasonlítja a Docker réteg-cache-t és a BuildKit cache mountot: bal oldalon egy megváltozott lockfile miatt érvénytelenné váló rétegek és a felhőbe visszamutató újratöltés, jobb oldalon egy különálló, buildek között megmaradó cache-tartály, amely az npm letöltési cache-ét tárolja.

A RUN --mount=type=cache kiveszi az npm letöltési cache-ét a Docker rétegek alól, így egy lockfile-változás sem dobja el a már letöltött csomagokat. Csak épp a legtöbb hosted CI-futtatón minden build friss gépen indul – ott ez a trükk önmagában nem sokat ér.

  • Szabó Benjámin
  • 2026.03.17.
  • HTTP

Az ETag nem csak cache-re való: védd az API-t If-Match-csel a felülírásoktól

Két kliens és egy szerver közti ETag-alapú feltételes API-frissítés sematikus ábrája

Az ETag és az If-Match nemcsak cache-validátor: egy 412-es válasszal megfoghatják, hogy két párhuzamos API-mentés csendben felülírja egymást.

  • Szabó Benjámin
  • 2026.03.16.
  • CSS

A height: auto sosem volt animálható – a CSS calc-size() ezt oldja meg

Három kártya illusztrálja a CSS magasság-animáció állapotait: összecsukott sáv, szaggatott körvonalú, közbülső interpoláló állapot, majd teljesen kinyílt, auto magasságú kártya.

A calc-size() és az interpolate-size végre natív CSS-megoldást ad az auto magasságra animáláshoz, JavaScript-hack nélkül – de egyelőre csak Chromium-alapú böngészőkben.

  • Szabó Benjámin
  • 2026.03.15.
  • Webbiztonság

A CSP ne domaineket bízzon meg: nonce és strict-dynamic az XSS ellen

Nonce-alapú Content Security Policy folyamat: a szerver csak az ellenőrzött szkripteket engedi futni

A nonce-alapú, strict-dynamic CSP nem hostlistákat, hanem az induló, valóban megbízható JavaScriptet jelöli ki. Így vezesd be úgy, hogy a cache és a régebbi kliensek se legyenek vakfoltok.

  • Szabó Benjámin
  • 2026.03.10.
  • Git

A git worktree megosztja a hookjaidat – amit a párhuzamos branch-checkout valójában jelent

Diagram: egy közös .git tár, amelyhez három worktree kapcsolódik – mindegyiknek saját HEAD-je, index-e és munkakönyvtára van, de a objects, refs, config és hooks mind közösek

A git worktree gyors és helytakarékos módja a párhuzamos branch-munkának, de nem ad külön .git-et: a hookok, a config és a stash is közösek maradnak. Megnézzük, mit jelent ez a gyakorlatban – és mikor jobb helyette a git clone --shared.

  • Szabó Benjámin
  • 2026.03.07.
Prev
1 2 3 4 5
Next
Copyright © 2026 - WordPress Theme by CreativeThemes