├── .gitignore ├── .vscode └── settings.json ├── _code.styl ├── _deps.styl ├── docs ├── assets │ ├── index-Y1YUMNhj.css │ ├── syntax-wes1-BjX7csmy.png │ ├── syntax-wes1-answer-hgtmDVIt.png │ ├── syntax-wes2-answer-xCvaWvLb.png │ ├── syntax-wes2-pQlg2jIZ.png │ ├── syntax-wes3-Dz3FTo3x.png │ └── syntax-wes3-answer-DpFGVv44.png └── index.html ├── images ├── cj_1.png ├── cj_1_answer.png ├── cj_2.png ├── cj_2_answer.png ├── cj_3.png ├── cj_3_answer.png ├── scott_1.png ├── scott_1_answer.png ├── scott_2.png ├── scott_2_answer.png ├── scott_3.png ├── scott_3_answer.png ├── sentry.svg ├── syntax-wes1-answer.png ├── syntax-wes1.png ├── syntax-wes2-answer.png ├── syntax-wes2.png ├── syntax-wes3-answer.png └── syntax-wes3.png ├── index.html ├── package-lock.json ├── package.json ├── readme.md ├── scripts.js ├── slides.js ├── styles.styl └── syntax-error.tsx /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | talk.js 4 | talk.md 5 | .cache/ 6 | dist/ 7 | .parcel-cache 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.enabledLanguageIds": [ 3 | "c", 4 | "cpp", 5 | "csharp", 6 | "go", 7 | "handlebars", 8 | "jade", 9 | "javascript", 10 | "javascriptreact", 11 | "json", 12 | "latex", 13 | "markdown", 14 | "php", 15 | "plaintext", 16 | "python", 17 | "restructuredtext", 18 | "text", 19 | "typescript", 20 | "typescriptreact", 21 | "yml" 22 | ] 23 | } -------------------------------------------------------------------------------- /_code.styl: -------------------------------------------------------------------------------- 1 | yellow = #FFDD00 2 | 3 | // Cobalt2 Prettyify Styles by Wes Bos 4 | 5 | pre .str, code .str { color: #39D905; } /* string - green */ 6 | pre .kwd, code .kwd { color: yellow; } /* keyword - dark pink */ 7 | pre .com, code .com { color: #0088FF; font-style: italic; } /* comment - gray */ 8 | pre .typ, code .typ { color: #0088FF; } /* type - light blue */ 9 | pre .lit, code .lit { color: #0088FF; } /* literal - blue */ 10 | pre .pun, code .pun { color: #FF9D00; } /* punctuation - white */ 11 | pre .pln, code .pln { color: #fff; } /* plaintext - white */ 12 | pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */ 13 | pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */ 14 | pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */ 15 | pre .dec, code .dec { color: #3387CC; } /* decimal - blue */ 16 | 17 | pre.prettyprint, code.prettyprint { 18 | background-color: #193549 19 | border-radius: 2px; 20 | border 0 21 | font-size 55px 22 | line-height 1.7 23 | text-align left 24 | } 25 | 26 | code 27 | background none 28 | font-family 'Operator Mono', monospace; 29 | font-weight 400 30 | 31 | pre.prettyprint { 32 | width: 95%; 33 | margin: 1em auto; 34 | padding: 10px; 35 | white-space: pre-wrap; 36 | border 3px solid #1F4662 37 | } 38 | 39 | 40 | /* Specify class=linenums on a pre to get line numbering */ 41 | ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */ 42 | li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } 43 | /* Alternate shading for lines */ 44 | li.L1,li.L3,li.L5,li.L7,li.L9 { } 45 | 46 | @media print { 47 | pre .str, code .str { color: #060; } 48 | pre .kwd, code .kwd { color: #006; font-weight: bold; } 49 | pre .com, code .com { color: #600; font-style: italic; } 50 | pre .typ, code .typ { color: #404; font-weight: bold; } 51 | pre .lit, code .lit { color: #044; } 52 | pre .pun, code .pun { color: #440; } 53 | pre .pln, code .pln { color: #000; } 54 | pre .tag, code .tag { color: #006; font-weight: bold; } 55 | pre .atn, code .atn { color: #404; } 56 | pre .atv, code .atv { color: #060; } 57 | } 58 | -------------------------------------------------------------------------------- /_deps.styl: -------------------------------------------------------------------------------- 1 | /* 2 | Google HTML5 slides template 3 | 4 | Authors: Luke Mahé (code) 5 | Marcin Wichary (code and design) 6 | 7 | Dominic Mazzoni (browser compatibility) 8 | Charles Chen (ChromeVox support) 9 | 10 | URL: http://code.google.com/p/html5slides/ 11 | */ 12 | 13 | /* Framework */ 14 | 15 | 16 | html { 17 | height: 100%; 18 | } 19 | 20 | body { 21 | margin: 0; 22 | padding: 0; 23 | display: block !important; 24 | height: 100%; 25 | min-height: 740px; 26 | overflow-x: hidden; 27 | overflow-y: auto; 28 | } 29 | 30 | .slides { 31 | width: 100%; 32 | height: 100%; 33 | left: 0; 34 | top: 0; 35 | color:#f21818; 36 | position: absolute; 37 | transform: translate3d(0, 0, 0); 38 | } 39 | 40 | 41 | /* 42 | Slide Widths 43 | */ 44 | 45 | w = 1920px 46 | h = 1080px 47 | 48 | // w = 1920px 49 | // h = 1440px 50 | 51 | .slides > article { 52 | display: block; 53 | position: absolute; 54 | overflow: hidden; 55 | width w 56 | height h 57 | margin-left: -(w / 2); 58 | margin-top: -(h / 2); 59 | left: 50%; 60 | top: 50%; 61 | background-color: none; 62 | // transition: all 0.3s ease-out; 63 | transition: none; 64 | justify-content center 65 | align-items: center 66 | flex-direction column 67 | border 3px solid var(--yellow) 68 | border-radius: 50px 69 | padding: 30px 70 | p { 71 | text-wrap balance 72 | } 73 | & > iframe { 74 | height: 100% 75 | } 76 | & > * { 77 | display block 78 | clear both 79 | } 80 | & > img { 81 | min-width: 0; 82 | display: block; 83 | margin: 0 auto 84 | } 85 | 86 | } 87 | 88 | .slide-area { 89 | z-index: 1000; 90 | 91 | position: absolute; 92 | left: 0; 93 | top: 0; 94 | width: 150px; 95 | height: 100%; 96 | left: 0; 97 | top: 0; 98 | cursor: pointer; 99 | tap-highlight-color: transparent; 100 | 101 | } 102 | #prev-slide-area { 103 | 104 | } 105 | #next-slide-area { 106 | right 0 107 | left auto 108 | } 109 | .slides.layout-widescreen #prev-slide-area, 110 | .slides.layout-faux-widescreen #prev-slide-area { 111 | margin-left: -650px; 112 | } 113 | .slides.layout-widescreen #next-slide-area, 114 | .slides.layout-faux-widescreen #next-slide-area { 115 | margin-left: 500px; 116 | } 117 | 118 | /* Slides */ 119 | 120 | .slides > article { 121 | display: none; 122 | container-type: inline-size; 123 | } 124 | .slides > article.far-past { 125 | display: block; 126 | transform: translate(-4000px); 127 | display none; 128 | } 129 | .slides > article.past { 130 | display: flex; 131 | transform: scale(0.5) translate(-(w + (0))px); 132 | opacity: 0.3; 133 | display: none; 134 | 135 | } 136 | .slides > article.current { 137 | display: grid; 138 | align-content: center 139 | gap 20px 140 | background black 141 | transform: translate(0); 142 | z-index 10 143 | } 144 | .slides > article.next { 145 | display: flex; 146 | transform: scale(0.5) translate((w + (0))px); 147 | opacity: 0.3; 148 | display: none; 149 | } 150 | .slides > article.far-next { 151 | display: flex; 152 | transform: translate(4000px); 153 | display none; 154 | } 155 | 156 | 157 | /* Styles for slides */ 158 | 159 | .slides > article { 160 | color: #6C818F; 161 | font-size: 30px; 162 | letter-spacing: -1px; 163 | } 164 | 165 | b { 166 | font-weight: 600; 167 | } 168 | 169 | .blue { 170 | color: rgb(0, 102, 204); 171 | } 172 | .yellow { 173 | color: var(--yellow); 174 | } 175 | .green { 176 | color: #29E254; 177 | } 178 | .red { 179 | color: rgb(255, 0, 0); 180 | } 181 | .black { 182 | color: black; 183 | } 184 | .white { 185 | color: white; 186 | } 187 | 188 | a { 189 | color: var(--yellow); 190 | } 191 | 192 | ::-moz-selection { background: var(--yellow); } 193 | ::selection { background: var(--yellow); } 194 | 195 | 196 | p { 197 | margin: 0; 198 | padding: 0; 199 | } 200 | p:first-child { 201 | margin-top: 0; 202 | } 203 | 204 | body { 205 | font-family: 'MD IO', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif 206 | } 207 | h1 { 208 | font-size: 60px; 209 | padding: 0; 210 | margin: 0; 211 | color: white; 212 | } 213 | 214 | h2 { 215 | font-size: 40px; 216 | line-height: 45px; 217 | 218 | bottom: 150px; 219 | 220 | padding: 0; 221 | margin: 0; 222 | font-weight: 600; 223 | color:white; 224 | letter-spacing: -2px; 225 | } 226 | 227 | h2 a { 228 | text-decoration: none; 229 | } 230 | 231 | h3 { 232 | font-size: 20px; 233 | line-height: 36px; 234 | padding: 0 0 10px 0; 235 | margin: 0; 236 | padding-right: 40px; 237 | font-weight: 600; 238 | letter-spacing: -1px; 239 | color:#EAEAEA; 240 | } 241 | 242 | .half { 243 | width:350px; 244 | float:left; 245 | } 246 | 247 | .button:hover { 248 | color:#fff; 249 | background:#392C44; 250 | } 251 | 252 | pre.half { 253 | width: 400px; 254 | font-size:17px; 255 | } 256 | 257 | p.small { 258 | font-size:18px; 259 | } 260 | article.fill h3 { 261 | background: rgba(255, 255, 255, .75); 262 | padding-top: .2em; 263 | padding-bottom: .3em; 264 | margin-top: -.2em; 265 | margin-left: -60px; 266 | padding-left: 60px; 267 | margin-right: -60px; 268 | padding-right: 60px; 269 | } 270 | 271 | h4 { 272 | margin:0; 273 | } 274 | 275 | 276 | .center { 277 | text-align:center; 278 | } 279 | 280 | .center h3 { 281 | font-size:100px; 282 | margin-top:220px; 283 | } 284 | ul { 285 | list-style: none; 286 | margin: 0; 287 | padding: 0; 288 | 289 | margin-top: 40px; 290 | 291 | margin-left: .75em; 292 | } 293 | ul:first-child { 294 | margin-top: 0; 295 | } 296 | ul ul { 297 | margin-top: .5em; 298 | } 299 | li { 300 | padding: 0; 301 | margin: 0; 302 | 303 | margin-bottom: .5em; 304 | } 305 | 306 | 307 | pre { 308 | 309 | font-size: 20px; 310 | line-height: 28px; 311 | padding: 5px 10px; 312 | 313 | letter-spacing: -1px; 314 | 315 | margin-top: 20px; 316 | margin-bottom: 20px; 317 | 318 | color: black; 319 | background: rgb(240, 240, 240); 320 | border: 1px solid rgb(224, 224, 224); 321 | box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1); 322 | 323 | overflow: hidden; 324 | } 325 | 326 | code { 327 | font-size: 95%; 328 | font-family: 'operator mono', 'Courier New', monospace; 329 | display: inline-block; 330 | background rgba(0,0,0,0.05); 331 | border-radius: 20px; 332 | padding 0 10px 333 | font-weight 300 334 | text-transform none 335 | } 336 | 337 | iframe { 338 | width: 100%; 339 | height: 620px; 340 | background: white; 341 | border: 1px solid rgb(192, 192, 192); 342 | margin: -1px; 343 | /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/ 344 | } 345 | 346 | img { 347 | max-width: 100%; 348 | } 349 | 350 | h3 + iframe { 351 | margin-top: 40px; 352 | height: 540px; 353 | } 354 | 355 | article.fill iframe { 356 | position: absolute; 357 | left: 0; 358 | top: 0; 359 | width: 100%; 360 | height: 100%; 361 | 362 | border: 0; 363 | margin: 0; 364 | 365 | border-radius: 10px; 366 | -o-border-radius: 10px; 367 | -moz-border-radius: 10px; 368 | -webkit-border-radius: 10px; 369 | 370 | z-index: -1; 371 | } 372 | 373 | article.fill img { 374 | position: absolute; 375 | left: 0; 376 | top: 0; 377 | min-width: 100%; 378 | min-height: 100%; 379 | 380 | border-radius: 10px; 381 | -o-border-radius: 10px; 382 | -moz-border-radius: 10px; 383 | -webkit-border-radius: 10px; 384 | 385 | z-index: -1; 386 | } 387 | img.centered { 388 | margin: 0 auto; 389 | display: block; 390 | } 391 | 392 | table { 393 | width: 100%; 394 | border-collapse: collapse; 395 | margin-top: 40px; 396 | } 397 | th { 398 | font-weight: 600; 399 | text-align: left; 400 | } 401 | td, 402 | th { 403 | border: 1px solid rgb(224, 224, 224); 404 | padding: 5px 10px; 405 | vertical-align: top; 406 | } 407 | 408 | .source { 409 | position: absolute; 410 | left: 60px; 411 | top: 644px; 412 | padding-right: 175px; 413 | 414 | font-size: 15px; 415 | letter-spacing: 0; 416 | line-height: 18px; 417 | } 418 | 419 | q { 420 | display: block; 421 | font-size: 60px; 422 | line-height: 72px; 423 | 424 | margin-left: 20px; 425 | 426 | margin-top: 100px; 427 | margin-right: 150px; 428 | } 429 | q::before { 430 | content: '“'; 431 | 432 | position: absolute; 433 | display: inline-block; 434 | margin-left: -2.1em; 435 | width: 2em; 436 | text-align: right; 437 | 438 | font-size: 90px; 439 | color: rgb(192, 192, 192); 440 | } 441 | q::after { 442 | content: '”'; 443 | 444 | position: absolute; 445 | margin-left: .1em; 446 | 447 | font-size: 90px; 448 | color: rgb(192, 192, 192); 449 | } 450 | div.author { 451 | text-align: right; 452 | font-size: 40px; 453 | 454 | margin-top: 20px; 455 | margin-right: 150px; 456 | } 457 | div.author::before { 458 | content: '—'; 459 | } 460 | 461 | /* Size variants */ 462 | 463 | article.smaller p, 464 | article.smaller ul { 465 | font-size: 20px; 466 | line-height: 24px; 467 | letter-spacing: 0; 468 | } 469 | article.smaller table { 470 | font-size: 20px; 471 | line-height: 24px; 472 | letter-spacing: 0; 473 | } 474 | article.smaller pre { 475 | font-size: 15px; 476 | line-height: 20px; 477 | letter-spacing: 0; 478 | } 479 | article.smaller q { 480 | font-size: 40px; 481 | line-height: 48px; 482 | } 483 | article.smaller q::before, 484 | article.smaller q::after { 485 | font-size: 60px; 486 | } 487 | 488 | /* Builds */ 489 | 490 | .build > * { 491 | transition: opacity 0.2s ease-in-out 0.2s; 492 | } 493 | 494 | .to-build { 495 | opacity: 0; 496 | } 497 | 498 | .twitter-tweet { 499 | letter-spacing: 0; 500 | transform: scale(3.2) !important; 501 | } 502 | 503 | -------------------------------------------------------------------------------- /docs/assets/index-Y1YUMNhj.css: -------------------------------------------------------------------------------- 1 | html{height:100%}body{margin:0;padding:0;display:block!important;height:100%;min-height:740px;overflow-x:hidden;overflow-y:auto}.slides{width:100%;height:100%;left:0;top:0;color:#f21818;position:absolute;transform:translateZ(0)}.slides>article{display:block;position:absolute;overflow:hidden;width:1920px;height:1080px;margin-left:-960px;margin-top:-540px;left:50%;top:50%;background-color:none;transition:none;justify-content:center;align-items:center;flex-direction:column;border:3px solid var(--yellow);border-radius:50px;padding:30px}.slides>article p{text-wrap:balance}.slides>article>iframe{height:100%}.slides>article>*{display:block;clear:both}.slides>article>img{min-width:0;display:block;margin:0 auto}.slide-area{z-index:1000;position:absolute;width:150px;height:100%;left:0;top:0;cursor:pointer;tap-highlight-color:transparent}#next-slide-area{right:0;left:auto}.slides.layout-widescreen #prev-slide-area,.slides.layout-faux-widescreen #prev-slide-area{margin-left:-650px}.slides.layout-widescreen #next-slide-area,.slides.layout-faux-widescreen #next-slide-area{margin-left:500px}.slides>article{display:none;container-type:inline-size}.slides>article.far-past{display:block;transform:translate(-4000px);display:none}.slides>article.past{display:flex;transform:scale(.5) translate(-1920px);opacity:.3;display:none}.slides>article.current{display:grid;align-content:center;gap:20px;background:#000;transform:translate(0);z-index:10}.slides>article.next{display:flex;transform:scale(.5) translate(1920px);opacity:.3;display:none}.slides>article.far-next{display:flex;transform:translate(4000px);display:none}.slides>article{color:#6c818f;font-size:30px;letter-spacing:-1px}b{font-weight:600}.blue{color:#06c}.yellow{color:var(--yellow)}.green{color:#29e254}.red{color:red}.black{color:#000}.white{color:#fff}a{color:var(--yellow)}::-moz-selection{background:var(--yellow)}::selection{background:var(--yellow)}p{margin:0;padding:0}p:first-child{margin-top:0}body{font-family:MD IO,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}h1{font-size:60px;padding:0;margin:0;color:#fff}h2{font-size:40px;line-height:45px;bottom:150px;padding:0;margin:0;font-weight:600;color:#fff;letter-spacing:-2px}h2 a{text-decoration:none}h3{font-size:20px;line-height:36px;padding:0 40px 10px 0;margin:0;font-weight:600;letter-spacing:-1px;color:#eaeaea}.half{width:350px;float:left}.button:hover{color:#fff;background:#392c44}pre.half{width:400px;font-size:17px}p.small{font-size:18px}article.fill h3{background:#ffffffbf;margin-top:-.2em;margin-left:-60px;padding:.2em 60px .3em;margin-right:-60px}h4{margin:0}.center{text-align:center}.center h3{font-size:100px;margin-top:220px}ul{list-style:none;padding:0;margin:40px 0 0 .75em}ul:first-child{margin-top:0}ul ul{margin-top:.5em}li{padding:0;margin:0 0 .5em}pre{font-size:20px;line-height:28px;padding:5px 10px;letter-spacing:-1px;margin-top:20px;margin-bottom:20px;color:#000;background:#f0f0f0;border:1px solid #e0e0e0;box-shadow:inset 0 2px 6px #0000001a;overflow:hidden}code{font-size:95%;font-family:operator mono,Courier New,monospace;display:inline-block;background:#0000000d;border-radius:20px;padding:0 10px;font-weight:300;text-transform:none}iframe{width:100%;height:620px;background:#fff;border:1px solid #c0c0c0;margin:-1px}img{max-width:100%}h3+iframe{margin-top:40px;height:540px}article.fill iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;margin:0;border-radius:10px;-o-border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;z-index:-1}article.fill img{position:absolute;left:0;top:0;min-width:100%;min-height:100%;border-radius:10px;-o-border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;z-index:-1}img.centered{margin:0 auto;display:block}table{width:100%;border-collapse:collapse;margin-top:40px}th{font-weight:600;text-align:left}td,th{border:1px solid #e0e0e0;padding:5px 10px;vertical-align:top}.source{position:absolute;left:60px;top:644px;padding-right:175px;font-size:15px;letter-spacing:0;line-height:18px}q{display:block;font-size:60px;line-height:72px;margin-left:20px;margin-top:100px;margin-right:150px}q:before{content:"“";position:absolute;display:inline-block;margin-left:-2.1em;width:2em;text-align:right;font-size:90px;color:silver}q:after{content:"”";position:absolute;margin-left:.1em;font-size:90px;color:silver}div.author{text-align:right;font-size:40px;margin-top:20px;margin-right:150px}div.author:before{content:"—"}article.smaller p,article.smaller ul{font-size:20px;line-height:24px;letter-spacing:0}article.smaller table{font-size:20px;line-height:24px;letter-spacing:0}article.smaller pre{font-size:15px;line-height:20px;letter-spacing:0}article.smaller q{font-size:40px;line-height:48px}article.smaller q:before,article.smaller q:after{font-size:60px}.build>*{transition:opacity .2s ease-in-out .2s}.to-build{opacity:0}.twitter-tweet{letter-spacing:0;transform:scale(3.2)!important}html{box-sizing:border-box;--yellow: #fabf46;background:#000 url(https://syntax.fm/static/background.jpg)}*,*:before,*:after{box-sizing:inherit}h1,h2,h3,h4,h5,h6{color:#fabf46;font-weight:900;line-height:auto;text-shadow:5px 5px 0 #000;text-align:center;text-wrap:balance}p,a,li{text-shadow:4px 3px 0 rgba(0,0,0,.3);margin:15px 0;text-align:center}p,li,small{color:#fff;font-weight:400;font-size:80px;letter-spacing:1px;line-height:1.2}.sub{transform:skew(0,-2deg);margin-top:10px;font-weight:200;color:#fff!important;font-size:60px}h2+.sub{transform:none}small{font-size:25px}h1{transform:skew(0,-1deg) rotateY(10deg);font-size:200px;color:#fabf46;letter-spacing:-2px;line-height:1}h1 a{text-decoration:none;font-size:20px;color:#000;padding-left:10px}ul{text-align:left;margin-left:100px}h2{font-size:90px;line-height:1.2;margin:0;font-weight:900}h2.title{font-size:70px}h2 a{color:#fabf46}h2.skew{transform:skew(0,-4deg);display:inline-block}h2+img{margin-top:20px!important}.large{font-size:200px}.big{font-size:250px}.medium{font-size:150px}.huge{font-size:450px}h3{font-size:70px;color:#fabf46;line-height:1.5}h4{color:#fabf46;font-size:50px}.halves{width:100%}.half{width:50%}img.wide{width:100%;height:auto;max-height:none}img.high{width:auto;height:100%;max-height:1200px}video.high{width:auto;height:100%;min-width:0}.hl{color:#fabf46}mark{background:#fabf46;color:var(--black);text-shadow:none;padding:0 10px;color:#000}.emoji{font-size:116px;font-family:serif}body.square .slides>article{width:1920px;height:1080px;margin-left:-960px;margin-top:-540px;border-radius:0;border:1px solid #fff;background:#000}body.square .slides>article h2{font-size:110px}body.square .slides>article p,body.square .slides>article li,body.square .slides>article small{font-size:30px}body.square .slides>article .big{font-size:180px}body.square .slides>article .large{font-size:140px}body.square .slides>article .huge{font-size:220px}.itm{background:var(--yellow);color:#000;padding:15px}.alignment{height:700px;width:700px;border:10px solid #f00}pre{text-align:left;padding:50px;font-family:Operator Mono,Dank Mono,Courier New,Courier,monospace;font-weight:300;font-size:30px;line-height:1.2}iframe[src*=twitter]{width:550px;height:300px!important;background:transparent;transform:scale(2);border:0}img.fit{width:100%;height:100%;object-fit:contain;max-height:none}article:has(img:only-child){padding:0;grid-template-rows:minmax(0,1fr);align-content:stretch!important}article:has(img:only-child) img{width:100%;height:100%;max-height:63cqh;object-fit:contain}article:has(h3+img):not(:has(:nth-child(3))){gap:0;display:grid;grid-template-rows:auto minmax(0,1fr)}article:has(h3+img):not(:has(:nth-child(3))) img{width:100%;height:100%;object-fit:contain}.columns{display:flex;align-items:center;gap:100px}.balance{text-wrap:balance}input[type=checkbox]:has(+img.blur){display:none}input[type=checkbox]:checked+img.blur{filter:blur(0px)}.blur{filter:blur(10px)}.bubbles span{line-height:1;font-size:35px;background:#ffffff1a;padding:10px 20px;border-radius:40px;cursor:pointer;-webkit-user-select:none;user-select:none}.bubbles span.selected{background:#ffc600;color:#000;text-shadow:none} 2 | -------------------------------------------------------------------------------- /docs/assets/syntax-wes1-BjX7csmy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/docs/assets/syntax-wes1-BjX7csmy.png -------------------------------------------------------------------------------- /docs/assets/syntax-wes1-answer-hgtmDVIt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/docs/assets/syntax-wes1-answer-hgtmDVIt.png -------------------------------------------------------------------------------- /docs/assets/syntax-wes2-answer-xCvaWvLb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/docs/assets/syntax-wes2-answer-xCvaWvLb.png -------------------------------------------------------------------------------- /docs/assets/syntax-wes2-pQlg2jIZ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/docs/assets/syntax-wes2-pQlg2jIZ.png -------------------------------------------------------------------------------- /docs/assets/syntax-wes3-Dz3FTo3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/docs/assets/syntax-wes3-Dz3FTo3x.png -------------------------------------------------------------------------------- /docs/assets/syntax-wes3-answer-DpFGVv44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/docs/assets/syntax-wes3-answer-DpFGVv44.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Syntax Live 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 16 | 19 |
20 |
21 |

Hi, I'm Scott Tolinski

22 |

Denver, Co 🇺🇸

23 |

@stolinski 𝕏 and Gram

24 |
25 |
26 | 27 |

Hi, I'm Christopher James

28 |

Denver, Co 🇺🇸

29 |

@codinggarden 𝕏 and Gram

30 |
31 |
32 |

33 | Hi, I'm
Wes Bos 34 |

35 |

Hamilton, On 🇨🇦

36 |

@wesbos 𝕏 and Gram

37 |
38 | 39 |
40 |

Syntax Error™

41 |

Spot the syntax error. We need $NUM of you to line up!

42 |
43 | 44 |
45 |

#1

46 |

TypeScript

47 |
48 | 49 |
50 | Syntax Error 1 51 |
52 | 53 |
54 | Syntax Error 1 55 |
56 | 57 |
58 | Syntax Error 1 59 |
60 | 61 |
62 | Syntax Error 1 63 |
64 | 65 | 66 |
67 | Syntax Error 2 68 |
69 |
70 | Syntax Error 2 71 |
72 | 73 | 74 |
75 | Syntax Error 3 76 |
77 |
78 | Syntax Error 3 79 |
80 | 81 |
82 |

#2

83 |
84 |
85 |

#3

86 |
87 |
88 |

#4

89 |
90 |
91 |

#5

92 |
93 |
94 |

#6

95 |
96 |
97 |

#7

98 |
99 |
100 |

#8

101 |
102 |
103 |

#9

104 |
105 |
106 |

# 0

107 |
108 | 109 |
110 |

CSS Battle!

111 |

SWITCH EVERY 60 SECONDS!

112 |
113 | 114 |
115 |

The Plan For Today

116 |
117 |
118 | 125 |
126 |
127 | 128 |

Q+EH-Coming up!

129 |

130 | pigeonhole.at/SICK 131 |

132 |
133 | 134 |
135 |

.map()
.filter()
.reduce()

136 |

137 | We give each other a chained map/filter/reduce, and the other person must find out what 138 | the output is. 139 |

140 |
141 |
142 |

For Scott

143 | 147 |
148 |
149 |

Answer

150 | 154 |
155 |
156 |

For Wes

157 | 161 |
162 |
163 |

Answer

164 | 168 |
169 |
170 | 171 | 172 | -------------------------------------------------------------------------------- /images/cj_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/cj_1.png -------------------------------------------------------------------------------- /images/cj_1_answer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/cj_1_answer.png -------------------------------------------------------------------------------- /images/cj_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/cj_2.png -------------------------------------------------------------------------------- /images/cj_2_answer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/cj_2_answer.png -------------------------------------------------------------------------------- /images/cj_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/cj_3.png -------------------------------------------------------------------------------- /images/cj_3_answer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/cj_3_answer.png -------------------------------------------------------------------------------- /images/scott_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/scott_1.png -------------------------------------------------------------------------------- /images/scott_1_answer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/scott_1_answer.png -------------------------------------------------------------------------------- /images/scott_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/scott_2.png -------------------------------------------------------------------------------- /images/scott_2_answer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/scott_2_answer.png -------------------------------------------------------------------------------- /images/scott_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/scott_3.png -------------------------------------------------------------------------------- /images/scott_3_answer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/scott_3_answer.png -------------------------------------------------------------------------------- /images/sentry.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/syntax-wes1-answer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/syntax-wes1-answer.png -------------------------------------------------------------------------------- /images/syntax-wes1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/syntax-wes1.png -------------------------------------------------------------------------------- /images/syntax-wes2-answer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/syntax-wes2-answer.png -------------------------------------------------------------------------------- /images/syntax-wes2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/syntax-wes2.png -------------------------------------------------------------------------------- /images/syntax-wes3-answer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/syntax-wes3-answer.png -------------------------------------------------------------------------------- /images/syntax-wes3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wesbos/Syntax-Live/95375c89b16b380c278704d92e3982ee5f79b2e4/images/syntax-wes3.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Syntax Live 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 16 | 17 |
18 |
19 |

Hi, I'm Scott Tolinski

20 |

Denver, Co 🇺🇸

21 |

@stolinski 𝕏 and Gram

22 |
23 |
24 | 25 |

Hi, I'm CJ

26 |

Denver, CO 🏔️🇺🇸

27 |

@CodingGarden 𝕏 @w3cj.com 🦋

28 |
29 |
30 |

31 | Hi, I'm
Wes Bos 32 |

33 |

Hamilton, On 🇨🇦

34 |

@wesbos 𝕏 and Gram

35 |
36 | 37 |
38 |

Syntax Error™

39 |

Spot the syntax error.

40 |
41 | 42 |
43 | Syntax Error 1 44 |
45 | 46 |
47 | Syntax Error 1 48 |
49 | 50 |
51 | Syntax Error 1 52 |
53 | 54 |
55 | Syntax Error 1 56 |
57 |
58 | Syntax Error 1 59 |
60 |
61 | Syntax Error 1 62 |
63 | 64 |
65 |

Syntax Error™

66 |

We need 6 of you to line
up to compete against us!

67 |
68 | 69 |
70 |

#1

71 |
72 | 73 | 74 |
75 | Syntax Error 2 76 |
77 |
78 | Syntax Error 2 79 |
80 | 81 | 82 |
83 |

#2

84 |
85 | 86 |
87 | Syntax Error 1 88 |
89 | 90 |
91 | Syntax Error 1 92 |
93 | 94 |
95 |

#3

96 |
97 | 98 |
99 | Syntax Error 1 100 |
101 | 102 |
103 | Syntax Error 1 104 |
105 | 106 |
107 |

#4

108 |
109 | 110 |
111 | Syntax Error 3 112 |
113 |
114 | Syntax Error 3 115 |
116 | 117 |
118 |

#5

119 |
120 | 121 |
122 | Syntax Error 1 123 |
124 | 125 |
126 | Syntax Error 1 127 |
128 | 129 |
130 |

#6

131 |
132 | 133 |
134 | Syntax Error 1 135 |
136 |
137 | Syntax Error 1 138 |
139 | 140 |
141 |

CSS Battle!

142 |

SWITCH EVERY 60 SECONDS!

143 |
144 | 145 |
146 |

Which one?

147 |
148 | 149 | 150 | 151 |
152 |
153 | 154 |
155 |

Q+EH-Coming up!

156 |

@ 7:30pm

157 |

Networking until then...

158 |
159 | 160 |
161 |

Thanks!

162 |
163 |
164 | 165 | 166 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "syntax-live", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "slides.js", 6 | "directories": { 7 | "example": "examples" 8 | }, 9 | "scripts": { 10 | "start": "vite", 11 | "build": "vite build --out-dir docs --base=/Syntax-Live//" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "@parcel/transformer-pug": "^2.12.0", 17 | "@parcel/transformer-stylus": "^2.12.0", 18 | "parcel-bundler": "^1.12.4", 19 | "vite": "^6.3.5" 20 | }, 21 | "packageManager": "pnpm@9.10.0+sha1.216899f511c8dfde183c7cb50b69009c779534a8" 22 | } 23 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # SYNTAX LIVE 2 | 3 | You can view the slides at 4 | 5 | YAAAAAA 6 | 7 | First ya do a `npm install` 8 | 9 | Then ya do a `npm start` 10 | 11 | Then you shake it all about 12 | 13 | you do the hokey pokey 14 | 15 | and you edit `index.html` 16 | 17 | that's what it's all about! 18 | -------------------------------------------------------------------------------- /scripts.js: -------------------------------------------------------------------------------- 1 | if (navigator.userAgent.includes('Firefox')) { 2 | document.body.classList.add('firefox'); 3 | } 4 | 5 | const options = { 6 | threshold: [0, 1.0], 7 | }; 8 | 9 | const callback = entries => { 10 | entries.forEach(entry => { 11 | if (entry.isIntersecting && entry.target.parentElement.classList.contains('current')) { 12 | entry.target.play(); 13 | } else { 14 | entry.target.pause(); 15 | } 16 | }); 17 | }; 18 | 19 | const observer = new IntersectionObserver(callback, options); 20 | 21 | // get a list of all videos on the page 22 | const videos = document.querySelectorAll('video'); 23 | // Observe each of those elements 24 | videos.forEach(video => observer.observe(video)); 25 | -------------------------------------------------------------------------------- /slides.js: -------------------------------------------------------------------------------- 1 | /* 2 | Google HTML5 slides template 3 | 4 | Authors: Luke Mahé (code) 5 | Marcin Wichary (code and design) 6 | 7 | Dominic Mazzoni (browser compatibility) 8 | Charles Chen (ChromeVox support) 9 | 10 | URL: http://code.google.com/p/html5slides/ 11 | */ 12 | 13 | // var PERMANENT_URL_PREFIX = 'http://localhost/demos/talks/snow/'; 14 | 15 | let PERMANENT_URL_PREFIX = window.location.origin + window.location.pathname; 16 | 17 | // var PERMANENT_URL_PREFIX = window.location.href.split('/index.html')[0] + '/' 18 | 19 | let SLIDE_CLASSES = ['far-past', 'past', 'current', 'next', 'far-next']; 20 | 21 | let PM_TOUCH_SENSITIVITY = 15; 22 | 23 | let curSlide; 24 | 25 | /* ---------------------------------------------------------------------- */ 26 | /* classList polyfill by Eli Grey 27 | * (http://purl.eligrey.com/github/classList.js/blob/master/classList.js) */ 28 | 29 | if (typeof document !== 'undefined' && !('classList' in document.createElement('a'))) { 30 | 31 | (function(view) { 32 | let classListProp = 'classList', 33 | protoProp = 'prototype', 34 | elemCtrProto = (view.HTMLElement || view.Element)[protoProp], 35 | objCtr = Object; 36 | (strTrim = 37 | String[protoProp].trim || 38 | function() { 39 | return this.replace(/^\s+|\s+$/g, ''); 40 | }), 41 | (arrIndexOf = 42 | Array[protoProp].indexOf || 43 | function(item) { 44 | for (let i = 0, len = this.length; i < len; i++) { 45 | if (i in this && this[i] === item) { 46 | return i; 47 | } 48 | } 49 | return -1; 50 | }), 51 | // Vendors: please allow content code to instantiate DOMExceptions 52 | (DOMEx = function(type, message) { 53 | this.name = type; 54 | this.code = DOMException[type]; 55 | this.message = message; 56 | }), 57 | (checkTokenAndGetIndex = function(classList, token) { 58 | if (token === '') { 59 | throw new DOMEx('SYNTAX_ERR', 'An invalid or illegal string was specified'); 60 | } 61 | if (/\s/.test(token)) { 62 | throw new DOMEx('INVALID_CHARACTER_ERR', 'String contains an invalid character'); 63 | } 64 | return arrIndexOf.call(classList, token); 65 | }), 66 | (ClassList = function(elem) { 67 | let trimmedClasses = strTrim.call(elem.className), 68 | classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []; 69 | for (let i = 0, len = classes.length; i < len; i++) { 70 | this.push(classes[i]); 71 | } 72 | this._updateClassName = function() { 73 | elem.className = this.toString(); 74 | }; 75 | }), 76 | (classListProto = ClassList[protoProp] = []), 77 | (classListGetter = function() { 78 | return new ClassList(this); 79 | }); 80 | // Most DOMException implementations don't allow calling DOMException's toString() 81 | // on non-DOMExceptions. Error's toString() is sufficient here. 82 | DOMEx[protoProp] = Error[protoProp]; 83 | classListProto.item = function(i) { 84 | return this[i] || null; 85 | }; 86 | classListProto.contains = function(token) { 87 | token += ''; 88 | return checkTokenAndGetIndex(this, token) !== -1; 89 | }; 90 | classListProto.add = function(token) { 91 | token += ''; 92 | if (checkTokenAndGetIndex(this, token) === -1) { 93 | this.push(token); 94 | this._updateClassName(); 95 | } 96 | }; 97 | classListProto.remove = function(token) { 98 | token += ''; 99 | let index = checkTokenAndGetIndex(this, token); 100 | if (index !== -1) { 101 | this.splice(index, 1); 102 | this._updateClassName(); 103 | } 104 | }; 105 | classListProto.toggle = function(token) { 106 | token += ''; 107 | if (checkTokenAndGetIndex(this, token) === -1) { 108 | this.add(token); 109 | } else { 110 | this.remove(token); 111 | } 112 | }; 113 | classListProto.toString = function() { 114 | return this.join(' '); 115 | }; 116 | 117 | if (objCtr.defineProperty) { 118 | let classListPropDesc = { 119 | get: classListGetter, 120 | enumerable: true, 121 | configurable: true, 122 | }; 123 | try { 124 | objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); 125 | } catch (ex) { 126 | // IE 8 doesn't support enumerable:true 127 | if (ex.number === -0x7ff5ec54) { 128 | classListPropDesc.enumerable = false; 129 | objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); 130 | } 131 | } 132 | } else if (objCtr[protoProp].__defineGetter__) { 133 | elemCtrProto.__defineGetter__(classListProp, classListGetter); 134 | } 135 | })(self); 136 | } 137 | /* ---------------------------------------------------------------------- */ 138 | 139 | /* Slide movement */ 140 | 141 | function getSlideEl(no) { 142 | if ((no < 0) || (no >= slideEls.length)) { 143 | return null; 144 | } 145 | return slideEls[no]; 146 | 147 | } 148 | 149 | function updateSlideClass(slideNo, className) { 150 | let el = getSlideEl(slideNo); 151 | 152 | if (!el) { 153 | return; 154 | } 155 | 156 | if (className) { 157 | el.classList.add(className); 158 | } 159 | 160 | for (let i in SLIDE_CLASSES) { 161 | if (className != SLIDE_CLASSES[i]) { 162 | el.classList.remove(SLIDE_CLASSES[i]); 163 | } 164 | } 165 | } 166 | 167 | function updateSlides() { 168 | for (let i = 0; i < slideEls.length; i++) { 169 | switch (i) { 170 | case curSlide - 2: 171 | updateSlideClass(i, 'far-past'); 172 | break; 173 | case curSlide - 1: 174 | updateSlideClass(i, 'past'); 175 | break; 176 | case curSlide: 177 | updateSlideClass(i, 'current'); 178 | break; 179 | case curSlide + 1: 180 | updateSlideClass(i, 'next'); 181 | break; 182 | case curSlide + 2: 183 | updateSlideClass(i, 'far-next'); 184 | break; 185 | default: 186 | updateSlideClass(i); 187 | break; 188 | } 189 | } 190 | 191 | triggerLeaveEvent(curSlide - 1); 192 | triggerEnterEvent(curSlide); 193 | 194 | window.setTimeout(() => { 195 | // Hide after the slide 196 | disableSlideFrames(curSlide - 2); 197 | }, 301); 198 | 199 | enableSlideFrames(curSlide - 1); 200 | enableSlideFrames(curSlide + 2); 201 | 202 | if (isChromeVoxActive()) { 203 | speakAndSyncToNode(slideEls[curSlide]); 204 | } 205 | 206 | updateHash(); 207 | } 208 | 209 | function buildNextItem() { 210 | let toBuild = slideEls[curSlide].querySelectorAll('.to-build'); 211 | 212 | if (!toBuild.length) { 213 | return false; 214 | } 215 | 216 | toBuild[0].classList.remove('to-build'); 217 | 218 | if (isChromeVoxActive()) { 219 | speakAndSyncToNode(toBuild[0]); 220 | } 221 | 222 | return true; 223 | } 224 | 225 | function prevSlide() { 226 | if (curSlide > 0) { 227 | curSlide--; 228 | updateSlides(); 229 | } 230 | } 231 | 232 | function nextSlide() { 233 | if (buildNextItem()) { 234 | return; 235 | } 236 | 237 | if (curSlide < slideEls.length - 1) { 238 | curSlide++; 239 | updateSlides(); 240 | } 241 | } 242 | 243 | function triggerEnterEvent(no) { 244 | let el = getSlideEl(no); 245 | if (!el) { 246 | return; 247 | } 248 | 249 | let onEnter = el.getAttribute('onslideenter'); 250 | if (onEnter) { 251 | new Function(onEnter).call(el); 252 | } 253 | 254 | let evt = document.createEvent('Event'); 255 | evt.initEvent('slideenter', true, true); 256 | evt.slideNumber = no + 1; // Make it readable 257 | 258 | el.dispatchEvent(evt); 259 | } 260 | 261 | function triggerLeaveEvent(no) { 262 | let el = getSlideEl(no); 263 | if (!el) { 264 | return; 265 | } 266 | 267 | let onLeave = el.getAttribute('onslideleave'); 268 | if (onLeave) { 269 | new Function(onLeave).call(el); 270 | } 271 | 272 | let evt = document.createEvent('Event'); 273 | evt.initEvent('slideleave', true, true); 274 | evt.slideNumber = no + 1; // Make it readable 275 | 276 | el.dispatchEvent(evt); 277 | } 278 | 279 | /* Touch events */ 280 | 281 | function handleTouchStart(event) { 282 | if (event.touches.length == 1) { 283 | touchDX = 0; 284 | touchDY = 0; 285 | 286 | touchStartX = event.touches[0].pageX; 287 | touchStartY = event.touches[0].pageY; 288 | 289 | document.body.addEventListener('touchmove', handleTouchMove, true); 290 | document.body.addEventListener('touchend', handleTouchEnd, true); 291 | } 292 | } 293 | 294 | function handleTouchMove(event) { 295 | if (event.touches.length > 1) { 296 | cancelTouch(); 297 | } else { 298 | touchDX = event.touches[0].pageX - touchStartX; 299 | touchDY = event.touches[0].pageY - touchStartY; 300 | } 301 | } 302 | 303 | function handleTouchEnd(event) { 304 | let dx = Math.abs(touchDX); 305 | let dy = Math.abs(touchDY); 306 | 307 | if (dx > PM_TOUCH_SENSITIVITY && dy < dx * 2 / 3) { 308 | if (touchDX > 0) { 309 | prevSlide(); 310 | } else { 311 | nextSlide(); 312 | } 313 | } 314 | 315 | cancelTouch(); 316 | } 317 | 318 | function cancelTouch() { 319 | document.body.removeEventListener('touchmove', handleTouchMove, true); 320 | document.body.removeEventListener('touchend', handleTouchEnd, true); 321 | } 322 | 323 | /* Preloading frames */ 324 | 325 | function disableSlideFrames(no) { 326 | let el = getSlideEl(no); 327 | if (!el) { 328 | return; 329 | } 330 | 331 | let frames = el.getElementsByTagName('iframe'); 332 | for (var i = 0, frame; (frame = frames[i]); i++) { 333 | disableFrame(frame); 334 | } 335 | } 336 | 337 | function enableSlideFrames(no) { 338 | let el = getSlideEl(no); 339 | if (!el) { 340 | return; 341 | } 342 | 343 | let frames = el.getElementsByTagName('iframe'); 344 | for (var i = 0, frame; (frame = frames[i]); i++) { 345 | enableFrame(frame); 346 | } 347 | } 348 | 349 | function disableFrame(frame) { 350 | frame.src = 'about:blank'; 351 | } 352 | 353 | function enableFrame(frame) { 354 | let src = frame._src; 355 | 356 | if (frame.src != src && src != 'about:blank') { 357 | frame.src = src; 358 | } 359 | } 360 | 361 | function setupFrames() { 362 | let frames = document.querySelectorAll('iframe'); 363 | for (var i = 0, frame; (frame = frames[i]); i++) { 364 | frame._src = frame.src; 365 | disableFrame(frame); 366 | } 367 | 368 | enableSlideFrames(curSlide); 369 | enableSlideFrames(curSlide + 1); 370 | enableSlideFrames(curSlide + 2); 371 | } 372 | 373 | function setupInteraction() { 374 | /* Clicking and tapping */ 375 | 376 | var el = document.createElement('div'); 377 | el.className = 'slide-area'; 378 | el.id = 'prev-slide-area'; 379 | el.addEventListener('click', prevSlide, false); 380 | document.querySelector('section.slides').appendChild(el); 381 | 382 | var el = document.createElement('div'); 383 | el.className = 'slide-area'; 384 | el.id = 'next-slide-area'; 385 | el.addEventListener('click', nextSlide, false); 386 | document.querySelector('section.slides').appendChild(el); 387 | 388 | /* Swiping */ 389 | 390 | document.body.addEventListener('touchstart', handleTouchStart, false); 391 | } 392 | 393 | /* ChromeVox support */ 394 | 395 | function isChromeVoxActive() { 396 | if (typeof (cvox) == 'undefined') { 397 | return false; 398 | } 399 | return true; 400 | 401 | } 402 | 403 | function speakAndSyncToNode(node) { 404 | if (!isChromeVoxActive()) { 405 | return; 406 | } 407 | 408 | cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true); 409 | cvox.ChromeVox.navigationManager.syncToNode(node); 410 | cvox.ChromeVoxUserCommands.finishNavCommand(''); 411 | let target = node; 412 | while (target.firstChild) { 413 | target = target.firstChild; 414 | } 415 | cvox.ChromeVox.navigationManager.syncToNode(target); 416 | } 417 | 418 | function speakNextItem() { 419 | if (!isChromeVoxActive()) { 420 | return; 421 | } 422 | 423 | cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true); 424 | cvox.ChromeVox.navigationManager.next(true); 425 | if (!cvox.DomUtil.isDescendantOfNode(cvox.ChromeVox.navigationManager.getCurrentNode(), slideEls[curSlide])) { 426 | let target = slideEls[curSlide]; 427 | while (target.firstChild) { 428 | target = target.firstChild; 429 | } 430 | cvox.ChromeVox.navigationManager.syncToNode(target); 431 | cvox.ChromeVox.navigationManager.next(true); 432 | } 433 | cvox.ChromeVoxUserCommands.finishNavCommand(''); 434 | } 435 | 436 | function speakPrevItem() { 437 | if (!isChromeVoxActive()) { 438 | return; 439 | } 440 | 441 | cvox.ChromeVox.navigationManager.switchToStrategy(cvox.ChromeVoxNavigationManager.STRATEGIES.LINEARDOM, 0, true); 442 | cvox.ChromeVox.navigationManager.previous(true); 443 | if (!cvox.DomUtil.isDescendantOfNode(cvox.ChromeVox.navigationManager.getCurrentNode(), slideEls[curSlide])) { 444 | let target = slideEls[curSlide]; 445 | while (target.lastChild) { 446 | target = target.lastChild; 447 | } 448 | cvox.ChromeVox.navigationManager.syncToNode(target); 449 | cvox.ChromeVox.navigationManager.previous(true); 450 | } 451 | cvox.ChromeVoxUserCommands.finishNavCommand(''); 452 | } 453 | 454 | /* Hash functions */ 455 | 456 | function getCurSlideFromHash() { 457 | let slideNo = parseInt(location.hash.substr(1)); 458 | 459 | if (slideNo) { 460 | curSlide = slideNo - 1; 461 | } else { 462 | curSlide = 0; 463 | } 464 | } 465 | 466 | function updateHash() { 467 | location.replace(`#${ curSlide + 1}`); 468 | } 469 | 470 | /* Event listeners */ 471 | 472 | function handleBodyKeyDown(event) { 473 | switch (event.keyCode) { 474 | case 39: // right arrow 475 | case 13: // Enter 476 | case 32: // space 477 | case 34: // PgDn 478 | nextSlide(); 479 | event.preventDefault(); 480 | break; 481 | 482 | case 37: // left arrow 483 | case 8: // Backspace 484 | case 33: // PgUp 485 | prevSlide(); 486 | event.preventDefault(); 487 | break; 488 | 489 | case 40: // down arrow 490 | if (isChromeVoxActive()) { 491 | speakNextItem(); 492 | } else { 493 | nextSlide(); 494 | } 495 | event.preventDefault(); 496 | break; 497 | 498 | case 38: // up arrow 499 | if (isChromeVoxActive()) { 500 | speakPrevItem(); 501 | } else { 502 | prevSlide(); 503 | } 504 | event.preventDefault(); 505 | break; 506 | } 507 | } 508 | 509 | function addEventListeners() { 510 | document.addEventListener('keydown', handleBodyKeyDown, false); 511 | } 512 | 513 | /* Initialization */ 514 | 515 | function addPrettify() { 516 | return; 517 | let els = document.querySelectorAll('pre'); 518 | for (var i = 0, el; (el = els[i]); i++) { 519 | if (!el.classList.contains('noprettyprint')) { 520 | el.classList.add('prettyprint'); 521 | } 522 | } 523 | 524 | var el = document.createElement('script'); 525 | el.type = 'text/javascript'; 526 | el.src = `${PERMANENT_URL_PREFIX }prettify.js`; 527 | el.onload = function() { 528 | // prettyPrint(); don't need it! 529 | }; 530 | document.body.appendChild(el); 531 | } 532 | 533 | function addFontStyle() { 534 | return; // NONONONON 535 | let el = document.createElement('link'); 536 | el.rel = 'stylesheet'; 537 | el.type = 'text/css'; 538 | el.href = 539 | 'http://fonts.googleapis.com/css?family=' + 'Open+Sans:regular,semibold,italic,italicsemibold|Droid+Sans+Mono'; 540 | 541 | document.body.appendChild(el); 542 | } 543 | 544 | function addGeneralStyle() { 545 | var el = document.createElement('link'); 546 | el.rel = 'stylesheet'; 547 | el.type = 'text/css'; 548 | el.href = `${PERMANENT_URL_PREFIX }styles.css`; 549 | document.body.appendChild(el); 550 | 551 | var el = document.createElement('meta'); 552 | el.name = 'viewport'; 553 | el.content = 'width=1100,height=750'; 554 | document.querySelector('head').appendChild(el); 555 | 556 | var el = document.createElement('meta'); 557 | el.name = 'apple-mobile-web-app-capable'; 558 | el.content = 'yes'; 559 | document.querySelector('head').appendChild(el); 560 | } 561 | 562 | function makeBuildLists() { 563 | for (var i = curSlide, slide; (slide = slideEls[i]); i++) { 564 | let items = slide.querySelectorAll('.build > *'); 565 | for (var j = 0, item; (item = items[j]); j++) { 566 | if (item.classList) { 567 | item.classList.add('to-build'); 568 | } 569 | } 570 | } 571 | } 572 | 573 | function handleDomLoaded() { 574 | slideEls = document.querySelectorAll('section.slides > article'); 575 | 576 | setupFrames(); 577 | 578 | addFontStyle(); 579 | // addGeneralStyle(); do it myself 580 | addPrettify(); 581 | addEventListeners(); 582 | 583 | updateSlides(); 584 | 585 | setupInteraction(); 586 | makeBuildLists(); 587 | 588 | document.body.classList.add('loaded'); 589 | } 590 | 591 | function initialize() { 592 | getCurSlideFromHash(); 593 | 594 | if (window._DEBUG) { 595 | PERMANENT_URL_PREFIX = '../'; 596 | } 597 | 598 | if (window._DCL) { 599 | handleDomLoaded(); 600 | } else { 601 | document.addEventListener('DOMContentLoaded', handleDomLoaded, false); 602 | } 603 | } 604 | 605 | // If ?debug exists then load the script relative instead of absolute 606 | if (!window._DEBUG && document.location.href.indexOf('?debug') !== -1) { 607 | document.addEventListener( 608 | 'DOMContentLoaded', 609 | function() { 610 | // Avoid missing the DomContentLoaded event 611 | window['_DCL'] = true; 612 | }, 613 | false 614 | ); 615 | 616 | window._DEBUG = true; 617 | let script = document.createElement('script'); 618 | script.type = 'text/javascript'; 619 | script.src = '../slides.js'; 620 | let s = document.getElementsByTagName('script')[0]; 621 | s.parentNode.insertBefore(script, s); 622 | 623 | // Remove this script 624 | s.parentNode.removeChild(s); 625 | } else { 626 | initialize(); 627 | } 628 | -------------------------------------------------------------------------------- /styles.styl: -------------------------------------------------------------------------------- 1 | // sink by AomAm from the Noun Project 2 | // Weight by viraj from the Noun Project 3 | 4 | @import "_deps" 5 | // @import "_code" 6 | 7 | yellow = #FABF46 8 | orange = #FF9D00 9 | purple = #2E0067 10 | blue = #193549 11 | grad = linear-gradient(30deg, #d2ff52 0%, #03fff3 100%) 12 | 13 | html { 14 | box-sizing: border-box; 15 | --yellow: #FABF46; 16 | background: black url("https://syntax.fm/static/background.jpg"); 17 | } 18 | 19 | *, *:before, *:after { 20 | box-sizing: inherit; 21 | } 22 | 23 | 24 | // Mixin 25 | h1,h2,h3,h4,h5,h6 26 | color yellow 27 | font-weight 900 28 | line-height: auto 29 | text-shadow 5px 5px 0 alpha(black, 1) 30 | text-align: center 31 | text-wrap balance 32 | 33 | p, a, li 34 | text-shadow 4px 3px 0 rgba(0,0,0,0.3) 35 | margin 15px 0 36 | text-align: center 37 | 38 | p, li, small 39 | color white 40 | font-weight 400 41 | font-size 80px 42 | letter-spacing: 1px 43 | line-height: 1.2 44 | 45 | .sub 46 | transform skew(0, -2deg) 47 | margin-top 10px 48 | font-weight 200 49 | color white !important 50 | font-size 60px 51 | 52 | h2 + .sub 53 | transform none 54 | 55 | small 56 | font-size 25px 57 | 58 | h1 59 | transform skew(0, -1deg) rotateY(10deg) 60 | font-size 200px 61 | color yellow 62 | letter-spacing -2px 63 | line-height: 1 64 | a 65 | text-decoration none 66 | font-size 20px 67 | color black 68 | padding-left 10px 69 | 70 | ul { 71 | text-align: left; 72 | margin-left: 100px; 73 | } 74 | 75 | h2 76 | font-size 90px 77 | line-height 1.2 78 | margin 0 79 | font-weight 900 80 | &.title 81 | font-size 70px 82 | a 83 | color yellow 84 | &.skew 85 | transform skew(0, -4deg) 86 | display: inline-block 87 | 88 | h2 + img 89 | margin-top 20px !important 90 | 91 | 92 | .large 93 | font-size 200px 94 | 95 | .big 96 | font-size 250px 97 | 98 | .medium 99 | font-size 150px 100 | 101 | .huge 102 | font-size 450px 103 | 104 | h3 105 | font-size 70px 106 | color yellow 107 | line-height 1.5 108 | 109 | h4 110 | color yellow 111 | font-size 50px 112 | 113 | .halves 114 | width 100% 115 | 116 | .half 117 | width 50% 118 | 119 | 120 | img.wide 121 | width 100% 122 | height auto 123 | max-height none 124 | 125 | img.high 126 | width auto 127 | height 100% 128 | max-height 1200px 129 | 130 | video.high 131 | width: auto; 132 | height: 100%; 133 | min-width: 0; 134 | 135 | .hl 136 | color yellow 137 | 138 | 139 | mark 140 | background yellow 141 | color black 142 | color var(--black) 143 | text-shadow none 144 | padding 0 10px; 145 | color: black; 146 | 147 | 148 | .emoji 149 | font-size 116px 150 | font-family serif 151 | 152 | 153 | // Smaller Screens 154 | body.square 155 | .slides 156 | & > article 157 | w = 1920 158 | h = 1080 159 | width w px 160 | height h px 161 | margin-left (w/2) * -1px 162 | margin-top (h/2) * -1px 163 | border-radius 0 164 | border: 1px solid white 165 | background black 166 | h2 167 | font-size 110px 168 | p, li, small 169 | font-size 30px 170 | .big 171 | font-size 180px 172 | .large 173 | font-size 140px 174 | .huge 175 | font-size 220px 176 | 177 | .itm { 178 | background: var(--yellow); 179 | color: black; 180 | padding: 15px; 181 | } 182 | 183 | .alignment { 184 | height: 700px; 185 | width: 700px; 186 | border:10px solid red; 187 | } 188 | 189 | pre 190 | text-align left 191 | padding 50px; 192 | font-family: 'Operator Mono', 'Dank Mono', 'Courier New', Courier, monospace 193 | font-weight: 300 194 | font-size: 30px 195 | line-height: 1.2 196 | 197 | iframe[src*="twitter"] 198 | width: 550px; 199 | height: 300px !important; 200 | background: transparent; 201 | transform: scale(2) 202 | border 0 203 | 204 | 205 | img.fit { 206 | width: 100%; 207 | height: 100%; 208 | object-fit: contain; 209 | max-height: none; 210 | } 211 | 212 | /* 213 |
214 | 215 |
216 | */ 217 | article:has(img:only-child) { 218 | padding: 0; 219 | grid-template-rows: minmax(0, 1fr); 220 | align-content: stretch !important; 221 | & img { 222 | width: 100%; 223 | height: 100%; 224 | max-height: 63cqh; 225 | object-fit: contain; 226 | } 227 | } 228 | 229 | /* 230 |
231 |

232 | 233 |
234 | */ 235 | 236 | article:has(h3 + img):not(:has(:nth-child(3))) { 237 | gap: 0; 238 | display: grid; 239 | grid-template-rows: auto minmax(0, 1fr); 240 | img { 241 | width: 100%; 242 | height 100% 243 | object-fit: contain; 244 | } 245 | } 246 | 247 | .columns { 248 | display: flex; 249 | align-items: center; 250 | gap: 100px; 251 | } 252 | .balance 253 | text-wrap balance 254 | 255 | 256 | input[type="checkbox"]:has(+ img.blur) 257 | display none 258 | input[type="checkbox"]:checked + img.blur 259 | filter blur(0px) 260 | .blur 261 | filter blur(10px) 262 | 263 | 264 | .bubbles 265 | span 266 | line-height:1 267 | font-size:35px 268 | background rgba(255,255,255,0.1) 269 | padding: 10px 20px 270 | border-radius: 40px 271 | cursor: pointer 272 | user-select: none; 273 | &.selected 274 | background #ffc600 275 | color black 276 | text-shadow: none 277 | 278 | -------------------------------------------------------------------------------- /syntax-error.tsx: -------------------------------------------------------------------------------- 1 | const people = [ 2 | { name: 'wes bos', age: 32 }, 3 | { name: 'scott tolinski', age: 34 } 4 | ]; 5 | 6 | const names = people.map(({ 7 | name, 8 | parts = name.split(' '), 9 | first = parts[0], 10 | last = parts[1] }) => { first, last })); 11 | 12 | // 13 | 14 | function Podcast({ mp3Url }) { 15 | const [volume, setVolume] = useState(1); 16 | const audioRef = useRef(); 17 | return
18 | setVolume(parseFloat(e.target.value))} value={volume}/> 19 | 20 |
21 | } 22 | 23 | 24 | // Three 25 | 26 | console.log(`What a year ${new Date() .getFullYear()} was!`}) 27 | 28 | 29 | // React Miami 30 | import React from 'react'; 31 | 32 | const students = [ 33 | { name: 'Wes', score: 2 }, 34 | { name: 'Scott', score: 3 }, 35 | { name: 'CJ', score: 4 }, 36 | ]; 37 | 38 | const output = students 39 | .map((student) => ({ ...student, points: student.name.length * student.score })) 40 | .filter(({ points }) => points % 2) 41 | .reduce((acc, student) => acc + student.points, 0); 42 | 43 | console.log(output); 44 | 45 | // Syntax Error 1 For Scott: TypeScript. FIX 46 | type User = { id: number; name: string }; 47 | 48 | type UserDocument = User & { 49 | _id: string; 50 | createdAt: Date; 51 | }; 52 | 53 | export default async function saveUser(user: User): Promise { 54 | const response = await fetch('/users', { 55 | method: 'POST', 56 | body: JSON.stringify(user), 57 | }); 58 | 59 | return response.json(); 60 | } 61 | 62 | type Podcast = { 63 | id: number; 64 | title: string; 65 | }; 66 | 67 | 68 | // Syntax Error 2 For Scott: TSX 69 | function PodcastCard({ podcast } { podcast: Podcast } = { podcast: { id: 69, title: 'Syntax' } }) { 70 | return ( 71 |
72 |

{podcast.title}

73 |

{podcast.id}

74 |
75 | ); 76 | } 77 | 78 | // Syntax error 3: CSS 79 | const css = /* md*/ ` 80 | 81 | 82 | .wiggle { 83 | --move: 10px; 84 | transform: translateX(calc(var(--move) * -1px)) translateY(var(--move)); 85 | } 86 | 87 | .child { 88 | background: red; 89 | :is(:hover, :focus) & & { 90 | background: blue; 91 | } 92 | } 93 | 94 | 95 | 96 | `; 97 | 98 | type Sandwich = { 99 | name: string; 100 | ingredients: string[]; 101 | } 102 | 103 | type Pizza = { 104 | name: string; 105 | toppings: string[]; 106 | } 107 | 108 | type PreparedFood = T & { 109 | expires: Date; 110 | } 111 | 112 | const pizza: PreparedFood = { 113 | name: 'Pizza', 114 | toppings: ['cheese', 'pepperoni'], 115 | expires: new Date(Date.now() + 1000 * 60 * 60 * 24), 116 | } 117 | --------------------------------------------------------------------------------