code_blocks HTML/CSS/JS Live-editor star

Hoe het werkt

Typ in de tabbladen HTML, CSS en JS en het voorbeeldpaneel wordt bijgewerkt terwijl u typt, door het samengevoegde resultaat te renderen in een sandboxed iframe. Het sandbox-attribuut is ingesteld op allow-scripts zonder allow-same-origin, en dat is precies wat het veilig maakt: scripts die in de voorbeeldweergave draaien, worden uitgevoerd in een afzonderlijke, ondoorzichtige origin, waardoor ze de cookies, lokale opslag of DOM van deze pagina niet kunnen lezen — en deze pagina kan op zijn beurt ook niet bij de inhoud van de iframe. Die isolatie is een door de browser afgedwongen beveiligingsgrens, geen louter visueel kader — het is hetzelfde mechanisme waarmee sites niet-vertrouwde inhoud van derden (advertenties, widgets, door gebruikers ingediende codefragmenten) veilig kunnen insluiten, zonder de code erin te hoeven vertrouwen.

Het bewerken zelf is bewust eenvoudig gehouden: drie textareas, geen syntaxismarkering, geen automatisch aanvullen. Dat is een bewuste afweging en geen ontbrekende functie — een echte code-bewerkingservaring (sleutelwoorden herkennen, haakjes koppelen, tags automatisch aanvullen) betekent het laden van een substantiële externe editorbibliotheek, wat extra gewicht en een laadvertraging toevoegt voordat u ook maar één teken kunt typen. Deze tool optimaliseert voor het tegenovergestelde: de pagina openen en meteen beginnen met typen, zonder afhankelijkheden en zonder enige buildstap.

Elke toetsaanslag in een van de drie tabbladen activeert een herbouw: de huidige HTML, de huidige CSS verpakt in een <style>-tag en de huidige JS verpakt in een <script>-tag worden samengevoegd tot één document en in de iframe geschreven. Er is geen diffing of incrementele patching — het volledige voorbeelddocument wordt simpelweg vervangen, wat op deze schaal snel genoeg is om direct aan te voelen, terwijl de implementatie eenvoudig blijft.

Goed om te weten

Omdat alles — bewerken en renderen — in uw browser gebeurt, is er geen server-roundtrip nodig en geen account vereist. Het is goed geschikt om snel een CSS-truc te testen, een JavaScript-bug te isoleren uit een grotere codebase voordat u deze meldt, of een klein component te prototypen voordat u het werkende resultaat naar een echt project kopieert. Niets van wat u typt wordt automatisch ergens opgeslagen, dus behandel het als een kladblok: kopieer alles wat u wilt bewaren voordat u het tabblad sluit.