In-browser code editing Marijn Haverbeke (Interactive slides at - - PowerPoint PPT Presentation

▶

Mar 08, 2024 693 likes •944 views

In-browser code editing Marijn Haverbeke (Interactive slides at http://marijnhaverbeke.nl/talks/goto2012) a 3-part talk: state of the art inspirational demo implementation war stories textarea schmextarea who's who ACE

SLIDE 1

In-browser code editing

Marijn Haverbeke

(Interactive slides at http://marijnhaverbeke.nl/talks/goto2012)

SLIDE 2

a 3-part talk:

state of the art ❇ inspirational demo ❇ implementation war stories ❇

SLIDE 3

textarea schmextarea

SLIDE 4

who's who

ACE ❇ CodeMirror ❇ Orion ❇

SLIDE 5

ACE ≈ furniture CodeMirror ≈ timber

SLIDE 6

trust me I am biased

SLIDE 7

demotime

SLIDE 8

cm.on("change", runLinter)

!! Missing semicolon.

var curSlide, slides; // Slide/hashmark management CodeMirror.on(window, "load", function() { slides = document.body.getElementsByTagName("slide"); runTimer() changeSlide(document.location.hash ? Number(document.location.hash.slice(1)) : CodeMirror.on(window, "scroll", function() { if (atSlide(curSlide)) return; for (var i = 0; i < slides.length; ++i) if (atSlide(i)) { var atEnd = document.body.scrollTop > document.body.scrollHeight - document.documentElement.clientHeight - 10; changeSlide(i, !atEnd); return; } }); CodeMirror.on(window, "hashchange", function() { 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 10 11 11 12 12 13 13 14 14 15 15 16 16 17 17 18 18 19 19 20 20 21 21

SLIDE 9

a taste of ACE

var curSlide, slides; // Slide/hashmark management CodeMirror.on(window, "load", function() { slides = document.body.getElementsByTagName("slide"); runTimer(); changeSlide(document.location.hash ? Number(document.location.hash.slice(1)) : CodeMirror.on(window, "scroll", function() { if (atSlide(curSlide)) return; for (var i = 0; i < slides.length; ++i) if (atSlide(i)) { var atEnd = document.body.scrollTop > document.body.scrollHeight - document.documentElement.clientHeight - 10; changeSlide(i, !atEnd); return; } }); CodeMirror.on(window, "hashchange", function() { var n = document.location.hash ? Number(document.location.hash.slice(1)) : 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

SLIDE 10

but how does it

work?

SLIDE 11

the cursor is a lie

SLIDE 12

those scrollbars?

not real

either

SLIDE 13

scrolling model

SLIDE 14

who's afraid of

huge files?

SLIDE 15

document b-tree

var curSlide, slides; // Slide/hashmark management CodeMirror.on(window, "load", function() { slides = document.body.getElementsByTagName("slide "); runTimer(); changeSlide(document.location.hash ? Number(document.location.hash.slice(1)) : 0); CodeMirror.on(window, "scroll", function() { if (atSlide(curSlide)) return; for (var i = 0; i < slides.length; ++i) if (atSlide(i)) { var atEnd = document.body.scrollTop > document.body.scrollHeight - document.documentElement.clientHeight - 10; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

SLIDE 16

SLIDE 17

startState: function() → state token: function(stream, state) → string indentation: function(state, string) → integer

SLIDE 18

mode state updates

SLIDE 19

highlighting tag mismatch

<document> <section> <item name="item0">01100111010101000111</item> <item name="item1" type="2">11010000112001</item> </secion> </document> 1 2 3 4 5 6 7

SLIDE 20

spotting local variables

(function(){ function count(array, elt) { var found = 0; for (var i = 0; i < array.length; ++i) if (array[i] === elt) ++found; console.log(array, found); return fund; } })(); 1 2 3 4 5 6 7 8 9 10

SLIDE 21

modes compose easily

<!doctype html> <head> <meta charset="utf-8"> <title>Test HTML</title> <style> p#main { color: #90440a; } </style> </head> <p id="main">I am HTML</p> <script> window.onload = function() { alert("Hi, I am JavaScript"); }; </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

SLIDE 22

the

future

SLIDE 23

aside:

Orion's

approach

SLIDE 24

that's all, folks

http://codemirror.net marijnjh