Eigen CSS en JavaScript.

Eigen CSS, head, voettekst, JavaScript

Ken je HTML en CSS, dan zet je onder in de rechterkolom onder „Geavanceerd” de „Ontwikkelaarsmodus” aan. De schakelaar geldt voor deze browser; daarna verschijnt links het onderdeel „Ontwikkelaar”. Daar vind je vier plekken: „CSS”, „Head-HTML”, „Voettekst-HTML” en „JavaScript”, elk tot 200 kB.

Je CSS komt na het gegenereerde stylesheet en wint daarom bij gelijke specificiteit. Om gericht te kunnen werken, heeft elke sectie een vast anker: de kopsectie #kt-hero, de secties #kt-s0, #kt-s1 … in hun volgorde — verplaats je een sectie, dan verhuist het nummer mee. Een klik op een anker voegt het in op de plek van de cursor. Externe scripts kunnen alleen via https://.

Het document blijft de bron voor inhoud en opbouw, de code voor uiterlijk en aanvullingen: Kenji komt nooit aan je code, en je code herschrijft geen enkele sectie.

1. 1Open rechtsonder „Geavanceerd” en zet „Ontwikkelaarsmodus” aan.
2. 2Klik links op „Ontwikkelaar” en kies een plek, bijvoorbeeld „CSS”.
3. 3Schrijf je code en klik op „Concept opslaan” — of druk op Ctrl+S.

Concept, voorvertoning, publiceren en teruggaan kosten geen AI-tegoed.

Voorvertoning in de sandbox

„Voorbeeld” toont je hele pagina met de code die op dat moment in de editor staat — ook als die nog niet is opgeslagen —, afgeschermd in een eigen kader: zonder toegang tot cookies, tot opgeslagen gegevens en tot de pagina waarin het kader zit. Dubbel beveiligd, omdat elk van beide barrières op zich een instelling is die iemand per ongeluk kan versoepelen.

De normale bewerkingsweergave toont alleen je CSS. HTML en JavaScript zie je in deze voorvertoning en op de livepagina.

1. 1Klik in het onderdeel „Ontwikkelaar” op „Voorbeeld”.
2. 2Controleer de pagina onder „Voorvertoning met conceptcode” en sluit hem met „Sluiten”.

Eigen publicatie en versies voor code

De code heeft een eigen concept en een eigen publicatie. „Publiceren” in het onderdeel „Ontwikkelaar”, met een optionele notitie, maakt van het opgeslagen concept een versie — en die geldt meteen op de livepagina, los van de knop „Publiceren” bovenaan in de kopbalk. Is de website offline, dan wacht de code tot hij weer online is.

Onder „Versies” staat elke versie met nummer, tijd, herkomst — handmatig, „Voorstel van Kenji” of teruggezet —, je notitie en het verschil met de vorige; de versie die op dat moment geldt, heeft het label „live”. „Terug naar deze versie” maakt een nieuwe versie aan met de oude inhoud, en het concept en de livepagina staan meteen op die stand.

1. 1Klik op „Publiceren”, voeg zo nodig een notitie toe en klik op „Nu publiceren”.
2. 2Klap „Versies” open en klik op een versie om het verschil te zien.
3. 3Klik op „Terug naar deze versie” en daarna op „Ja, terug”.

Een oude stand is niet automatisch een goede stand — controleer na het teruggaan de livepagina.

Codevoorstel van Kenji

In het veld onder de code beschrijf je in één zin wat de code moet doen, en Kenji schrijft een voorstel. Dat verschijnt naast je concept, met uitleg en het verschil met je code — nooit direct erin.

„Toepassen” zet het voorstel in het concept, „Verwerpen” legt het opzij. Gepubliceerd wordt pas met de eigen knop: bij code ben jij degene die als laatste ja zegt. Een openstaand voorstel blijft staan, ook als je de pagina opnieuw laadt.

1. 1Schrijf in het veld onder de code wat de code moet doen en verstuur het.
2. 2Lees de uitleg en het verschil.
3. 3Klik op „Toepassen” of „Verwerpen”.

Het voorstel verbruikt AI-tegoed; toepassen en verwerpen niet. Is een voorstel niet bruikbaar, dan wordt het verworpen en wordt er niets in rekening gebracht.