Bou met Hypermedia: HTMX se suiwerheid en Lightview se flexibiliteit.

Inleiding Die hypermedia-renessansie is in volle swing. Na jare van SPA-dominansie herontdek ontwikkelaars die krag van bediener-gedrewe argitekture wat HTML as die motor van aansoekstaat benut. Die raamwerk wat hierdie lading lei, HTMX, fokus uitsluitlik op hypermedia. 'n alternatiewe, Lightview, sluit jou nie in hypermedia-alleenpatrone patrone nie. In teenstelling met HTMX se gefokusde hypermedia benadering, is Lightview 'n multi-paradigm raamwerk wat ondersteun en hypermedia patrone, funksioneel programmering met template tag funksies soos BauJS [ ], en JSON verteenwoordiging (soos JurisJS [ ]), - alles binne dieselfde raamwerk. Hierdie artikel bied 'n tegniese vergelyking van HTMX en Lightview hypermedia vermoëns om jou te help kies die regte instrument vir jou projek. https://github.com/grucloud/bau https://jurisjs.com Jy kan op hierdie punt sê: "Waak 'n sekonde, HTMX is bedoel om ontwikkeling te vereenvoudig, hoekom wil ek die kompleksiteit van verskeie kodeer paradigmas wil hê?" Jy mag nie, die punt van Lightview is om jou keuse te gee, jy kan jou hele aansoek bou met hypermedia, of jy kan jou hele aansoek bou met funksionele programmering, of jy kan jou hele aansoek bou met JSON verteenwoordiging, of jy kan jou hele aansoek bou met 'n mengsel van al drie. Dit hang alles af van wat jy nodig het. Miskien begin jou aansoek uit hypermedia, maar as jy groei, vind jy dat jy funksioneel programmering moet gebruik om komplekse besigheidslogika in 'n offline eerste modus te bou, of jy vind dat jy JSON verteenwoordiging moet gebruik vir cross-platform portabiliteit, of jy moet dinamiese Wat is die hypermedia? Voordat ons in die vergelyking duik, laat ons bepaal wat ons bedoel deur hypermedia. Hypermedia verwys na inhoud wat skakels en beheer vir die navigeer na verwante hulpbronne bevat. Tradisionele HTML verskaf dit deur middel van skakels en vorms, maar moderne hypermedia raamwerke brei hierdie vermoëns uit na enige element, wat ryker interaksies moontlik maak. Elke element kan dien as 'n skakel en enige element kan die bron spesifiseer waaruit dit sy inhoud wil verkry. . Die HTMZ HTMX and Lightview: Completing HTML as a Hypertext HTMX, wat deur Carson Gross as 'n opvolger van intercooler.js geskep is, is bedoel om "volledige HTML as 'n hipertext" te maak. Lightview, wat deur hierdie skrywer, Simon Blackwell, geskep is, is in samewerking met LLMs ontwerp, om nie net HTML as hiperteks te voltooi nie, maar ook 'n meer draagbare, deklaritiewe benadering vir die bedienerlevering van inhoud te bied, alhoewel die hipermedia-inhoud nog steeds HTML soos HTMX kan wees, kan dit ook JSON virtuele DOMs wees wat HTML of native UI-komponente verteenwoordig. Kernfilosofie HTMX omhels die Hypermedia-Driven Application (HDA) argitektuur, wat gekenmerk word deur twee beperkings: Deklaratiewe sintaksie: Gebruik HTML-geïntegreerde eienskappe eerder as imperatiewe scripting Hypermedia antwoorde: Die bediener reageer met HTML, nie JSON nie Hierdie benadering behou die kompleksiteit op die bediener, terwyl die kliënt eenvoudig en deklaratief bly. Belangrike kenmerke HTMX toelaat dat enige element HTTP-versoekings kan uitvaardig met behulp van standaard verbs: HTTP Method Support Delete Contact : die die attribuut spesifiseer waar server antwoorde ingevoeg moet word, met behulp van CSS-selektore: Flexible Targeting hx-target : Aangepaste triggers beheer wanneer vrae vuur: Event Triggers Verskeie opsies vir hoe inhoud bestaande DOM vervang: Swap Strategies Instruksies vir HTML (default) Ouderdom beforebegin, afterbegin, voorlopig, na afloop , delete none : HTMX bied ingeboude ondersteuning vir gladde UI oorgange deur stabiele element-ID's, swapfaseklasse ( die die Verwysingsgebaseerde opdragte ( Veranderinge in die gesondheidsorg ( die ), en integrasie met die View Transitions API. Dit laat hypermedia-gebaseerde programme toe om SPA-agtige gladheid te bereik sonder aangepaste JavaScript. CSS Transitions and Animations htmx-swapping htmx-settling htmx-added htmx-request swap:1s settle:1s Die HTMX kan bestaande skakels en vorms verbeter: Progressive Enhancement hx-boost Native ondersteuning vir real-time updates: WebSockets & SSE afhanklikheid HTMX het nul afhanklikhede, wat dit ideaal maak vir die byvoeging van hipermediale vermoëns aan bestaande programme sonder om bykomende kompleksiteit in te voer. Lightview: Multi-Paradigm Framework met ondersteuning vir Hypermedia Lightview het ook nul afhanklikhede, tensy jy kies om sy voorgebou UI-komponente te gebruik, en dit neem 'n ander benadering deur verskeie programmeringsparadigma's in een raamwerk aan te bied. Terwyl dit hipermediale vermoëns bevat wat soortgelyk is aan HTMX, dwing dit jou nie om hulle uitsluitlik te gebruik nie. bied uitgebreide aanlyndokumentasie en interaktiewe REPL's vir die toets van die raamwerk. webtuiste Kernfilosofie: Die krag van keuse Lightview is flexibel deur ontwerp. Dit voorskryf nie hypermedia as die In plaas daarvan kan jy die regte instrument vir die spesifieke deel van jou aansoek kies: Alleen Hypermedia (HTMX-styl): Gebruik src en href vir bediener-gedrewe inhoud en bladsynavigasie. Funksionele (BauJS-styl): Gebruik Javascript sjabloon tag funksies vir komplekse, imperatiewe logika. Data-Driven (JurisJS-style): Definieer UIs as suiwer JSON (vDOM/oDOM) vir config-gedrewe koppelvlakke. AI-Safe (cDOM): Gebruik sandboxed JSON strukture met 'n uitvoerbare expressie taal (JPRX) vir veilige, AI-genereerde gebruikersinterface. Hypermedia en interaksie In die algemeen word die HTML-stelsel op die standaard HTML-attribute gebaseer ( die ) uitgebrei met kragtige vermoëns. src href : Unified Attributes src: Herhaal inhoud om 'n element te vul. Dit kan 'n URL wees (vir server-side partials) of 'n CSS-selector (vir plaaslike partials). href: Triggers navigeer of inhoud laai op gebruiker interaksie (bv, ). Lightview bied gesofistikeerde beheer oor waar inhoud met die gebruik van die Die attribuut of die set. Targeting & Location target location Standaard plekke: innerhtml, outerhtml, beforebegin, afterbegin, beforeend, afterend. Shadow DOM: Lightview het eersteklas ondersteuning vir Web-komponente. U kan inhoud direk in 'n skaduwee invoeg deur gebruik te maak van location="shadow" of die :shadow-suffix op 'n doelwit (bv. target="#component:shadow"). Dit onderskei dit van HTMX, wat fokus op Light DOM. en ): Pas HTTP-aksie direk in HTML aan: Advanced Requests ( data-method data-body Delete

Save : Nog 'n kragtige Lightview differentiator is die vermoë om inhoud uit die huidige dokument te bron. Terwyl HTMX ontwerp is om hypermedia-gedeeltes van 'n bediener te kry, laat Lightview die Om 'n CSS selektor te bevat. Self-Sourced Partials (CSS Selectors as Source) src Dit maak dit moontlik om "self-sourced partials" te maak waar inhoud uit 'n Die verborge , of enige ander element in die DOM.Dit verminder die netwerk oorhead en laat ontwikkelaars toe om "offline" gedeeltes direk binne die aanvanklike bladsylading te bundel. Lightview neem die benadering dat hypermedia nie server-side gedeeltes hoef te beteken nie, jy kan 'n volle hypermedia SPA hê.

Tab 1 This content was sourced from a local template tag!

Lightview ondersteun outomatiese scrolling na 'n spesifieke element-ID wanneer inhoud oplaai deur of navigeer deur As die URL 'n hash-fragment bevat (bv. ), Lightview sal outomaties wag vir die inhoud om te laai en dan die doelelement in die weergave skraal. Automatic Hash Scrolling src href /docs/api.html#signals Smart Kompensasies: Die rolposisie reken outomaties vir 'n vaste navigeerbalk as dit gedefinieer word (via --site-nav-hoogte). Shadow DOM Ondersteuning: Scrolling werk ook vir inhoud wat in 'n Shadow Root geladen word. Partiële laai: Werk vir beide volledige navigeer (href) en gedeeltelike inhoud updates (src). ) en Triggers: Lightview bied 'n kragtige "Gating" -stelsel om gebeure te ontken voordat hulle optrede veroorsaak. Declarative Event Gating ( lv-before Modifiers: Ingebouwde ondersteuning vir throttle(ms) en debounce(ms). Pipelines: Ketting verskeie poorte (bv, lv-before="click throttle(500) confirm('Is jy seker?')" ). Aangepaste Gates: Definieer globale funksies om aksies te valideer (bv. validateUser()) wat vals gee om die gebeurtenis te annuleer. Reaktiwiteit en staat Lightview bevat 'n ingeboude, fijnkorrelde reaktiwiteitstelsel (Signale en Staat) wat onmiddellike updates en outomatiese sjabloonresolusie toelaat. Hierdie stelsel bied: Automatiese sjabloonresolusie: ${...}-tags in HTML word outomaties opgedateer wanneer toestand verander. Genoemde registrasie: Signale en toestande kan deur naam geregistreer word vir maklike sjabloonbinding. JSON Schema Control: Bevestig data-integriteit op reaktiwiteitsstaat met behulp van standaard JSON Schema. Vir 'n gedetailleerde tegniese vergelyking van Lightview se reaktiewe toestand versus HTMX se bediener-gedrewe benadering, sien die die afdeling. Staatsbestuur Data-Driven & AI gebruikersinterface Een van die duidelikste funksies van Lightview is sy ondersteuning vir (vDOM, oDOM) en die (Genoeg van die Data-as-UI Safe AI-Generation Lightview kan 'n UI wat as JSON gedefinieer is, hanteer en render, wat dikwels makliker is vir agtergronde om te genereer en te bestuur as HTML-strings. Multiple JSON Formats vDOM: standaard virtuele DOM struktuur. oDOM: "Object DOM" afkorting vir beknopte konfigurasie-gebaseerde UI. /* vDOM (Explicit) */ [{ "tag": "div", "attributes": { "class": "p-4" }, "children": ["Hello"] }]

/* oDOM (Concise) */ { "div": { "class": "p-4", "children": ["Hello"] } }

/* cDOM / JPRX (Reactive & Safe) */ { "div": { "children": [ { "span": { "text": "Count: =/myVal" } }, { "button": { "onclick": "=/myVal++", "text": "+" } } ] } } : Laat AI skryf rauwe JavaScript is 'n sekuriteitsrisiko. is 'n sandboxed JSON-formaat waar AI struktuur en logika kan definieer die uitvoering van arbitrêre kode. In hierdie argitektuur, serves as the secure logic and expression language embedded within the cDOM structure, providing the power of reactivity and logic without the security vulnerabilities of . Safe AI Generation with cDOM cDOM (Clean/Computed DOM) sonder JPRX (JSON Path Reactive eXpressions) eval Sekuriteit: Geen eval of arbitrêre script uitvoering nie. Logika: Ondersteun logika soos "as", "loop", en wiskunde en meer as 100 ander funksies via 'n veilige uitdrukking taal (JPRX). Gebruik Case: Ideaal vir "GenUI" -toepassings waar 'n LLM die koppelvlak op die vlieg genereer. Gebruik cDOM wanneer jy die dinamika van 'n gegenereerde UI wil hê sonder die sekuriteitsmarmer van gegenereerde Javascript. Head-to-Head Comparison Syntax and API Surface : HTMX Aangepaste hx-* kenmerke vir alle funksionaliteite Uitgebreide eienskappe woordeskat (hx-get, hx-post, hx-target, hx-trigger, ens) Konsistente voorvoegsel maak HTMX funksies onmiddellik herkenbaar Steiler leerkurve as gevolg van attribuutvariëteit : Lightview Gebruik standaard HTML-attribute (src, href) waar moontlik Verminder die vocabulary Meer vertroud met ontwikkelaars wat HTML ken JavaScript API for reactive features or cDOM/JPRX for safer reactivity Verzoek om optrede Beide raamwerke ondersteun aangepaste HTTP-metodes en versoek organe, maar met verskillende benaderings: uses dedicated attributes: HTMX Gebruik die standaard Instruksies vir die konfigurasie: Lightview data- Save Hy is baie flexibel: Lightview's data-body CSS Selector: Serialiseer die doelwit outomaties (bv. #myForm as FormData, of die waarde van 'n invoer). JSON: Gebruik json:{"id": 1} vir letterlike JSON-gehalte. Javascript: Gebruik javascript:state.get ('gebruiker') om data direk uit reaktiwiteitsstaat te trek. : Use for plain text payloads. Text text:Hello Triggering van gebeurtenisse Het 'n gesofistikeerde trigger sintaksie: HTMX het 'n soortgelyke benadering wat gebruik Getting aan: Lightview lv-before Targeting and Content Positioning Both frameworks provide flexible control over where content is inserted: uses en attributes: HTMX hx-target hx-swap Load More Gebruik with optional location suffix or separate attribute: Lightview target location Load More

: Lightview sluit in as 'n posisioneringsopsie vir Shadow DOM insetting, terwyl HTMX fokus op standaard DOM manipulasie. Key difference shadow Content Sourcing (Server vs. Local) : HTMX Ontwerp vir server-gedrewe hipermedia (HDA) Sources must be URLs that return hypermedia (HTML) responses vereis 'n netwerkverzoek vir elke gedeeltelike opdatering : Lightview Multi-bron flexibiliteit Bronne kan URL's of CSS-selektore wees Skakel "Selfbron gedeeltes" in, waar inhoud uit plaaslike -tags of ander DOM-elemente getrek word Toelaat om algemene UI-fragmente te bundel om aanvanklike netwerkwaterval te verminder Transisies en animasie het eersteklas animasie ondersteuning met swap fase klasse, versoek state indikators, tyd modifiers, en View Transitions API integrasie - wat toelaat dat hypermedia-programme spa-agtige gladheid te bereik. HTMX op die oomblik hanteer oorgange deur middel van standaard CSS oorgange / animasie en komponent lewenscyklus hooks sonder ingeboude swap fase abstraksies. toekomstige weergawes kan ingeboude swap fase abstraksies insluit. Lightview Staatsbestuur Dit is waar die raamwerke die belangrikste verskil in hul argitektuurlike benadering: HTMX: Server-Side State HTMX is suiwer hypermedia gefokus. Kliënt-kant toestand is minimaal, gewoonlik hanteer deur: Server sessie: State word in die backend databasis of sessie gehandhaaf. Verborge vormvelde: oordra staat terug en voor in versoekings. DOM Attributes: Om eenvoudige toestande in data-*-attributes te stoor. Alpine.js Integrasie: Vir komplekse kliënt-kant logika, HTMX ontwikkelaars dikwels bereik vir Alpine.js of soortgelyke ligte biblioteke. Lightview: Kliënt-kant reaktiwiteit Lightview includes a complete, fine-grained reactivity system inspired by SolidJS. This makes it a multi-paradigm framework that can handle state independently of the server. : When HTML is fetched via of , Lightview oplos outomaties die sjabloonliterale Dit toelaat dat deur die bediener gerenderde gedeeltes onmiddellik reageer op die kliënt sonder hydrasie-skripte. Automatic Template Resolution src href ${...} : Signals and states can be registered by name so they are available for template resolution globally: Named Registration // Registering a reactive signal by name const count = Lightview.signal(0, 'count');

// Registering a deeply reactive state by name const user = Lightview.state({ name: 'Alice', age: 30 }, 'user'); Welcome, ${state.get('user').name} : Lightview states can be optionally enforced by JSON schemas, providing data integrity for complex objects: JSON Schema Validation const user = Lightview.state({ name: 'Alice', age: 30 }, 'user', { schema: { type: 'object', properties: { name: { type: 'string' }, age: { type: 'number' } }, required: ['name', 'age'] } }); : Reactive Primitives signaal (waarde): vir primitiewe waardes. state(object): Vir diepe waarneming van voorwerpe en reeks. Effect(fn): Om newe-effekte uit te voer wanneer afhanklikhede verander. Hierdie argitektuurverskil maak Lightview meer van 'n volledige aansoekraamwerk, terwyl HTMX 'n toegewyde hypermedia verbeteringstool bly. Real-time opdaterings has first-class support for WebSockets and Server-Sent Events: HTMX het nie ingeboude WebSocket/SSE ondersteuning (as van die huidige weergawe), alhoewel dit bygevoeg kan word deur middel van standaard JavaScript. Lightview Veiligheid Gebaseer op standaard web sekuriteitspraktyke: HTMX Politiek van dieselfde oorsprong CSRF token ondersteuning via hx-headers Inhoud sekuriteit beleid verenigbaarheid Insluit veiligheid deur die standaard: Lightview Same-domein beleid word outomaties uitgevoer Gevaarlike protokolle blokkeer (JavaScript:, data:) Geskikbare validering hooks Progressive Enhancement Voorbeelde vir progressiewe verbetering: HTMX Link Met die uitsondering dat dit tans ontbreek ingeboude ondersteuning vir websockets of server-side-gebeurtenisse, Lightview se benadering is net so in staat om progressiewe verbetering. en word ondersteun vir elke element, daar is geen behoefte aan iets soos . Lightview href src hx-boost Komponente van die architektuur het nie 'n komponentmodel nie - dit verbeter standaard HTML. HTMX Inclusief die: Lightview Single-file components Tempelkomponente Import / Export van variabele tussen komponente Sandbox-afstandskomponente Dit voorsien ook oor vir gemeenskaplike UI-patrone, e.g. die , die , etc. 50 ingebouwde komponente Loading Card Chart Drawer Gebruik gevalle Wanneer om HTMX te kies Voeg interaktiwiteit by op die bediener gebaseerde programme: HTMX uitsteek in toenemende verbetering van tradisionele webprogramme Teamsbekendheid met server-side rendering: As jou span gemaklik is met Rails, Django, Laravel, ens. : HTMX degrades gracefully when JavaScript is disabled Progressive enhancement is critical Real-time funksies: ingeboude WebSocket/SSE ondersteuning Eenvoudige, voorspelbare gedrag: HTMX se eendoel fokus maak dit maklik om te rede oor Wanneer om LightView te kies Multi-paradigm fleksibiliteit: Wanneer jy funksionele programmering, JSON-gebaseerde UI en hipermedia in een kode-basis wil meng Veilige AI-genereerde UI: Gebruik cDOM vir veilige, sandboxed AI-genereerde koppelvlakke Komponentgebaseerde argitektuur: Wanneer jy herbruikbare komponente wil hê sonder 'n bou stap Kliënt-side reaktiwiteit: Toepassings wat fijnkorrige reaktiwiteitsupdates benodig Skaduwee DOM/Web-komponente: ingeboude ondersteuning vir inkapsulasie Hybride benadering: Mix hypermedia patrone met reaktiewe programmering Self-Sourced Partials: Wanneer jy hypermediapatrone wil gebruik, maar sommige inhoud lokaal van die DOM wil bron om netwerkvereistes te verminder of offline-bereide afdelings te verskaf Prestasie oorwegings Beide raamwerke is prestasievol, maar optimiseer verskillende dinge: : HTMX Netwerk-georiënteerde optimalisering (verminder rondreis) Die server maak die swaar lifting Minimale kliënt-side verwerking History and caching built-in : Lightview Fine-grained reaktiwiteit (slegs updates verander nodes) Geen virtuele DOM diffing oorhead Kan netwerkverzoeke verminder met kliënt-kant-toestand Dependency tracking optimizes renders Ontwikkelaar ervaring Leer curve : HTMX Konseptueel eenvoudig: HTML + attribute Uitgebreide dokumentasie en voorbeelde Large community and ecosystem "Hypermedia Systems" boek as 'n omvattende gids : Lightview Verskeie geestelike modelle (hypermedia + reaktiwiteit + funksioneel) Omvattende dokumentasie met 40+ komponente en uitgebreide voorbeelde Klein gemeenskap vereis die begrip van verskeie programmering paradigma's Debugging : HTMX Browser DevTools werk natuurlik Uitstekende logging en gebeure vir debugging Vraag / reaksie inspeksie direk : Lightview Afhanklikheidsporsing kan moeiliker wees om te debug Reaktiewe updates kan minder duidelik wees Die ingeboude ontwikkelingsmodus help Ekosisteem en Adopsie : HTMX Volwasse ekosisteem met plugins en uitbreidings Server-side biblioteek ondersteuning in alle groot tale Groot en aktiewe gemeenskap Gebruik in produksie deur baie maatskappye Deel van die breër hypermedia beweging : Lightview Klein, maar groeiende ekosisteem Kompanie backend raamwerk (Watchlight) Minder derde-party integrasie Nieu na die toneel grootte Die HTMX HTMX minified en gzipped is 29KB Lightweight Lightview kan as drie afsonderlike lêers gelê word: // Core: 6KB minimized and gzipped // Supports: tagged functions, signals, vDOM format

// X: 14KB minimized and gzipped // Adds: hypermedia, html template literal support, oDOM support

// CDOM: 25KB minimized and gzipped // Adds: cDOM, JPRX (not required for hypermedia) Die gekombineerde grootte wat nodig is om 'n groot deel van HTMX se funksionaliteit te emuleer, is 20KB, en dit kry jou baie ander krag ook. Kode vergelyking: bou die dieselfde kenmerk Kom ons bou 'n aktiewe soeke funksie met beide raamwerke: HTMX weergawe

Lightview weergawe

: How it works href="/search": Die eindpunt om te vang. oninput="LightviewX.request(this)": Trigger die Lightview-hypermedia-motor op elke sleutelkop. Dit is slegs nodig vir invoertype-elemente. Klikverwerking is outomaties op nie-invoer-elemente. lv-before="input debounce(300)": Declaratively debounce die invoer met 300ms, vervang die behoefte aan komplekse trigger sintaksie. target="#results": Bestuur die HTML of JSON reaksie na die resultate div. Integration with Backend Frameworks werk met enige bediener-side tegnologie wat HTML kan genereer. HTMX werk met enige JSON of HTML-genererende backend - dit dikteer nie die server-side argitektuur nie. Lightview Migrasie pad Van SPA na HTMX HTMX bied 'n geleidelike migrasie pad: Begin met hx-boost op bestaande vorms en skakels Steeds meer gesofistikeerde hypermedia interaksies byvoeg Vervang SPA roetes met hypermedia eindpunte Van die spa na Lightview Lightview bied ook 'n geleidelike pad: Begin deur net 'n paar elemente in hypermedia te verander Steeds meer gesofistikeerde hypermedia interaksies byvoeg Funksionele komponente evolueer na getagged funksies Incorporate names signals and state Voeg dinamiese AI-generasie by met cDOM/JPRX Konklusie Beide HTMX en Lightview verteenwoordig oortuigende alternatiewe, maar dien verskillende behoeftes: : Choose HTMX if you want Pure hypermedia-gedrewe argitektuur Minimale kliënt-kant kompleksiteit Progressiewe verbetering Beproefde, geveg-geteste oplossing Sterk gemeenskap en ekosisteem : Choose Lightview if you want Multi-paradigm flexibiliteit (funksionele, JSON, hypermedia) Veilige AI-genereerde UI met cDOM/JPRX Komponent-architektuur sonder bou gereedskap Fine-grain reaktiwiteit Ondersteuning vir Shadow DOM/Web-komponent Vryheid om jou programmeerstyl te kies Self-bron plaaslike gedeeltes deur middel van CSS selekteerders Die sleutelverskil: HTMX is laser gefokus op hypermedia en doen dit uiters goed. tussen verskeie paradigma's - dit dwing jou nie om hypermedia vir alles te kies nie. Een opsie HTMX bly getrou aan die hypermedia visie met laser fokus, terwyl Lightview flexibiliteit omhels, wat jou toelaat om funksionele programmering (soos BauJS), JSON verteenwoordiging (soos JurisJS), of hypermedia patrone te gebruik soos jou gebruik gevalle vereis. Die hulpbronne Die HTMX Offisiële webwerf: htmx.org Boek: "Hypermedia Systems" by hypermedia.systems Discord: Aktiewe gemeenskaplike bespreking Lightweight Offisiële webwerf: lightview.dev Artikel oor veilige AI UI-generasie: Hoe om 'n AI-genereerde rekenaar te bou sonder aangepaste JavaScript