diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/css/main.css | 64 | ||||
| -rw-r--r-- | static/js/main.js | 98 |
2 files changed, 149 insertions, 13 deletions
diff --git a/static/css/main.css b/static/css/main.css index 8bb8b6d..bb63995 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -5,6 +5,13 @@ html { font-size: 18px; } +/* blocks.css bug shim */ + +.fixed.inline.block { + pointer-events: none; + line-height: 1.5em; +} + /* resets */ html, @@ -58,15 +65,21 @@ footer { nav { margin: .8em 0; + width: 96%; + max-width: 400px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; } nav a { color: var(--block-accent-color); - margin: 0 1em; } header .subtitle { font-size: 1.2em; + line-height: 1.5em; } header .lang.block { @@ -77,7 +90,7 @@ header .lang.block { font-weight: normal; color: #fff; display: inline-block; /* for transforms */ - transform: rotate(-10deg); + transform: rotate(-10deg) translateY(6px); pointer-events: none; } @@ -92,7 +105,7 @@ header .lang.block { .editor .output, .editor .errors { width: 100%; - padding: .5em 1em; + padding: .8em 1em; border-bottom: 3px solid var(--block-text-color); box-sizing: border-box; } @@ -103,6 +116,7 @@ header .lang.block { .editor.block { padding: 0; + padding-top: 24px; } .editor .controls { @@ -118,6 +132,11 @@ header .lang.block { justify-content: flex-end; } +.editor .code { + padding: 0; + position: relative; +} + .editor .output { min-height: 5em; display: flex; @@ -130,11 +149,6 @@ header .lang.block { width: 100%; } -.editor .code { - padding: 0; - position: relative; -} - .editor .errors { color: var(--block-accent-color); } @@ -178,6 +192,40 @@ textarea.editor-input:focus { color: #777; } +main > h2 { + margin-top: 1.5em; +} + +main > p, +main > ul li { + line-height: 1.5em; +} + +main > ul li { + margin-bottom: .5em; +} + +main > p a { + color: var(--block-accent-color); +} + +footer { + margin-top: 2em; +} + footer a { color: var(--block-accent-color); } + +@media only screen and (max-width: 600px) { + header .subtitle { + line-height: 1.7em; + } + header .lang.block { + transform: rotate(-5deg) translateY(4px); + } + .filler, + textarea.editor-input { + font-size: .8em; + } +} diff --git a/static/js/main.js b/static/js/main.js index 3815538..7ff59b0 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,4 +1,6 @@ -const PROG_DEFAULT = `DISCOVER HOW TO factorial WITH n +const PROG_DEFAULT = `YOU WON'T WANT TO MISS 'Hello, World!' + +DISCOVER HOW TO factorial WITH n WE SAID WHAT IF n IS ACTUALLY 0 WE SAID @@ -10,7 +12,7 @@ WE SAID END OF STORY EXPERTS CLAIM result TO BE factorial OF 10 -YOU WON'T WANT TO MISS 'RESULT IS' +YOU WON'T WANT TO MISS 'Result is' YOU WON'T WANT TO MISS result PLEASE LIKE AND SUBSCRIBE`; @@ -21,6 +23,7 @@ const HEADLINES = [ `Shocking New Programming Language Bewilders Programmers at Google and Facebook!`, `Programmer Who Made Everything Now Predicts the Next Big Language!`, `The Secret Programming Language Every 10x Programmer Recommends!`, + `Programmers at Microsoft Hate This One Trick to Get Good at that Code Thing!`, ]; function randomHeadline() { @@ -56,7 +59,7 @@ class Editor extends Component { const nodes = new Parser(tokens).parse(); const env = new Environment({ print: s => { - this.output += s.toString() + '\n'; + this.output += s.toString().toUpperCase() + '!\n'; this.render(); }, }); @@ -73,7 +76,7 @@ class Editor extends Component { jdom`<button class="block" onclick=${this.handleReset}>Reset</button>`} <button class="accent block" - onclick=${this.handleRun}>Run!</button> + onclick=${this.handleRun}>Run this!</button> </div> <div class="code"> <div class="filler"> @@ -109,6 +112,10 @@ class App extends Component { <nav> <a href="https://github.com/thesephist/tabloid" target="_blank" noopener noreferer>GitHub</a> + <a href="#" onclick=${evt => { + evt.preventDefault(); + this.render(); + }}>Rewrite headline!</a> <a href="https://dotink.co/posts/tabloid/" target="_blank" noopener noreferer>Blog post</a> </nav> @@ -118,11 +125,92 @@ class App extends Component { </header> ${this.editor.node} <h2>What?</h2> + <p> + <strong>Tabloid</strong> is a turing-complete programming + language for writing programs in the style of clickbait news + headlines. + </p> + <p> + Here are <strike>a few things</strike>${' '}<strong>the Top Five + Most Popular Quirks and Features</strong> of the Tabloid + programming language <strong>(Number Four Will Shock You!)</strong> + </p> + <ul> + <li> + Print output with the keywords <code class="inline + fixed block">YOU WON'T WANT TO MISS</code> followed by an + expression. Everything printed by Tabloid is + <strong>automatically capitalized, and an exclamation point is + added.</strong> Why would you want anything else? + </li> + <li> + Declare a function by writing <code class="inline fixed + block">DISCOVER HOW TO ... WITH</code>. Truly, a more + gripping way to declare a function can't possibly exist! + </li> + <li> + Assign to a variable by writing <code class="inline fixed + block">EXPERTS CLAIM ... TO BE</code>. On the Internet, + anyone can be an expert, and Tabloid gives YOU the power to + wield that responsibility and declare anything you'd like! + </li> + <li> + To return from a function, simply write <code class="inline + fixed block">SHOCKING DEVELOPMENT</code>! You're going + to—gasp!—<strong>return</strong>? How shocking! + </li> + <li> + Every program must end with <code + class="inline fixed block">PLEASE LIKE AND + SUBSCRIBE</code>, because you have to grow your audience! <strong>Hashtag hustle</strong>. + </li> + </ul> <h2>But why?</h2> + <p> + Didn't want to do homework for my + <a href="https://cs186berkeley.net/" target="_blank">database + systems class</a>, and needed something to do to procrastinate. + Will I finish the homework? Did I get enough sleep? + </p> + <p>Stay tuned to find out!</p> <h2>Does it actually work?</h2> + <p> + Yes. Tabloid is a <strong>fully functioning, turing complete + programming language with an interpreter</strong> written in + JavaScript. Tabloid currently only supports numbers, strings, + and booleans, but with these elements, you can write any + program you'd want to write. You can edit and run the program above, or + <a href="https://github.com/thesephist/tabloid">see how it works for yourself</a>. + </p> + <p> + Before making Tabloid, I also created a more <strike>useful and + well-designed</strike>${' '}<strong>boring and unpopular</strong> + programming language, called <a href="https://dotink.co/" + target="_blank">Ink</a>. + </p> + <h2>How much is there?</h2> + <p> + Here's the full list of non-standard keywords that Tabloid + currently uses, in addition to standard operators like <code + class="inline fixed block">PLUS</code> and <code class="inline + fixed block">MINUS</code>. + </p> + <ul> + <li><code class="inline fixed block">DISCOVER HOW TO...WITH</code> declare a function</li> + <li><code class="inline fixed block">WE SAID</code> begin a block scope</li> + <li><code class="inline fixed block">A OF B, C</code> call function A with arguments B, C</li> + <li><code class="inline fixed block">WHAT IF...LIES!</code> an if-else expression</li> + <li><code class="inline fixed block">END OF STORY</code> end a block scope</li> + <li><code class="inline fixed block">EXPERTS CLAIM...TO BE</code> declare or assign to a variable</li> + <li><code class="inline fixed block">YOU WON'T WANT TO MISS</code> print output</li> + <li><code class="inline fixed block">IS ACTUALLY</code> is equal to</li> + <li><code class="inline fixed block">BEATS / SMALLER THAN</code> greater than / less than</li> + <li><code class="inline fixed block">SHOCKING DEVELOPMENT</code> return from a function</li> + <li><code class="inline fixed block">PLEASE LIKE AND SUBSCRIBE</code> end of program</li> + </ul> <footer> <p> - Tabloid is a project by + Tabloid is an overnight hack by <a href="https://thesephist.com/">@thesephist</a>, website built with <a href="https://github.com/thesephist/torus">Torus</a> |