Text to be edited here
Output of parser, if any, here In shallow waters, shrimps make fools of dragons.
Copyright ©2014 Dan at Hypervariety.com

Hypervariety


2/9/14 Hello, world! "Welcome to Hypervariety."
           —Dan at Hypervariety dot com 2/9/14 Bubbles! I have quite a task ahead of me. Luckily, I am a pretty good programmer. My first trick is called the Bubble, and it's simply the ability to conjure up a bubble that doesn't interfere with what you're doing. If you I'm a bubble, and I can be hidden and shown. you can see your first bubble.

There is a fine point about how bubbles work: This bubble disappears right away if you stop hovering over its link.hover over me and then hover over meThis bubble stays visible when you mouse over it.
That's kind of important if you want to select its text.
Even This button even has its own bubble! is okay. for an explanation. (bug note)There is an annoying little bug that happens when you scan
the mouse between the trigger and the bubble, and also,
bubbles don't auto-wrap at the screen edge. 2/9/14 HTML Not counting all the modern hooplah, which takes a long time to learn and be comfortable with, HTML (hyper-text markup language) is probably as simple as a format can ever get. You type text into your editor with the keyboard like a human being. You add minimal style, the best kind, to the text via little control codes called tags. You match "open" and "close" tags around the text you want to affect, like this:
<B> bold text </B>
<I> italic text </I>
<U> underlined text </U>

And to break the line, use <BR /> by itself. bold text italic text underlined text And to break the line, use
by itself.
There is a small conceit concerning whitespace (which means strings of spaces, tabs, and linefeeds); the browser normally shows whitespace as a single space no matter how much you use, so you gotta break lines manually with <BR/>.

That's approximately all you need for basic human-to-human communication through a browser. Once you pass that point things become significantly more complex and you have to kick your brain up a notch, but almost anyone should be able to handle that. 2/9/14 The two-sided editor I am currently writing this blog in an HTML design utility, and the basic workflow I have found to be most efficient on the balance is to edit one large file containing all my markup, style, and scripts together. The file is syntax-colored, automatically by the program, which lets me scroll around to utilize my spatial memory.

Its core language is HTML5. This is an open format for modern browsers that is actually three technologies crammed together in the same place: HTML for basic markup, CSS for more style, and Javascript for programming. In the medium term I often mentally 'finalize' some of my style and programming work, which I then copy and paste off to separate files accessible through the main one which contains the HTML served to your browser from Hypervariety.com.

Since I've already cracked your mind wide open by showing you my Bubbles, let's go ahead and make my blog a lot more interactive. The four most basic tags (<B>, <I>, <U>, <BR />) ought to be enough for us to communicate with each other. I would like to see two boxes next to each other: one for text and one for code; but each showing the same thing, just in two different formats; and you should be able to edit one and see your changes in the other!

Edit the code here:
Edit the text here:
A statement in italics might not stand out much.

But see how boldface attracts the eyeball?

Type in either side and see.

Once I'm actually in there editing, I can see that side-by-side manipulation is not ideal because it's a bit confusing. However, it's a quick way to learn the basics.

A consequence of using < and > for a special purpose in the code is, all of a sudden you might wonder, how to make < and > show up in the text (for example, to write i <3 you)! The answer is that they must be encoded themselves, with yet another trick. You sandwich a code between an ampersand and a semicolon: &lt; means less-than and &gt; means greater-than. &amp; is an ampersand itself. You can embed tons of little symbols that aren't on a keyboard this way: © µ ÷ ¼ Å. Copy and paste those to see their encoding. 2/10/14 My method There is a structure to this blog that is given to it by the tags. If you looked at the code (which there's no reason to do) you'd see each post represented as nested tags: 

<blog_entry>
	<timestamp>
		February 29th
	</timestamp>
	<contents>
		Flappin' my gums about somethin'.
		<U>Underlining things</U> perhaps? <BR /> Bye!
	</contents>
</blog_entry>
February 29th Flappin' my gums about somethin'. Underlining things perhaps?
Bye!

The tags used ( <blog_entry>, <timestamp> and <contents> ) exist nowhere in the HTML spec. But as part of the futureproof nature of the hypertext standard, you can wrap text in any tags you prefer and the browser doesn't complain. In fact, HTML5 will happily allow you to define, on a page by page basis, how the browser should render the text in custom tags. At the beginning of the blog, I asked the browser to produce a few small accents. The timestamp appears on the right in a soft shadow and extra pixels create a margin.

As a nice side-effect of this method, my request is all in one place, at the beginning of the blog file. The browser applies changes to each blog post automatically, making each post a bit more readable. You can even change the styling after the page is already loaded.

Let's invent a methodology. We'll call it the templates method. Begin with a standard, blank blog post containing all the features of the finished ones – like we would begin with a blank wedding invitation – this blank blog post is called the template. Blog posts, which can be loaded as part of the page, or created on the fly as needed, automatically receive the same styling. Simple, elegant, that's the whole method! 2/11/14 Roundie Embedded in this blog post is a template for a colorful button, called roundie. A roundie contributes a bright background and a big readable font to the text it surrounds, and reacts to mouse clicks by depressing itself. Title of roundie 
<templates>
	<roundie>
		Title of roundie
	</roundie>
</templates>

<roundie>Click me, reader!</roundie>   Click me, reader!
I confess that the templates method is more elaborate than what I just showed you, but you don't have to know about the computer science necessary to let HTML use templates – that kind of tech can be stored away in files. I had to test different browsers, and not everything is always quite perfect (older versions of Microsoft Internet Explorer were notorious for their out-of-spec behavior). The result of my work is quite unimpeachable, however: you can use the roundie template exactly as I did above to produce the button above!

Remember roundie is just a template. There are infinite variations that are possible. This one has a white background.
Here is one that changes its contents:click me to find out what time it is.
This one contains text with basic <B>, <I>, and <U> tags: Using text is a total piece of cake! 2/17/14 Outside and inside The templates method is good for staying organized. Describing a <blog_entry> as having a <timestamp> and a <contents> inside it can free ourselves to think in terms of the individual parts. A blog entry's timestamp is the date it was posted to the blog – and that's separate from its contents – and they both 'belong' to the blog entry. The structure of the template mirrors the perception of how we think of it, and that's a very good thing. This can get fun.

put "hello!" into the timestamp in this blog_entry put the date into the timestamp in this blog_entry

If you can't puzzle out what these roundies actually do, click them. It comes down to three little tasks:
  1. Figure out out what this blog_entry is. It's the blog_entry containing the roundie you clicked. Then...
  2. Locate the timestamp of (1) we know is inside (1). Then...
  3. Put the quoted text into the timestamp in (2). Done.
 2/17/14 Properties Here's another roundie that performs a new trick: get any word in "pink orange lightBlue"
set the background of me to it

What is going on here?

Well, any word in "pink orange lightBlue" is a color chosen at random. The choice is made every time the mouse click is processed, so it's always a different color. That's what we're going to change the background to.

The background is called a property of the roundie. It is not a tag, as there is no <background></background> you have to put in the roundie – it does not appear in a textual way. You can specify a background as an HTML attribute called data-background. Here's an example: 
<roundie data-background="lightGray">Gray as the day.</roundie>   Gray as the day.
Here is a monster. Clicking this is a tour de force of checking, asking, and changing.
ask "The current background is " my background ". Would you like to change it now?"
if not then exit

ask "Well, what would you like to change it to?" with my background
if not then exit
set the background of me to it

You might notice that if you set the new color to an empty string, it turns back to the default color, yellow. Setting properties to empty text (or "" with nothing between the quotes) clears them, which means they take on the default value set in the roundie template.

And here's a roundie that has a bubble. Hold the mouse cursor over it: I have a bubble Color:
Title:

2/22/14 Web decor Web decor is simple and functional. The little input bits are commonly called controls.
A checkbox control:
Radio buttons:
Popup menu:
The controls are sometimes put together into a form, which can be submitted back to the server.

Input: dots, password:
3/4/14 Editor v2 Remember the side-by-side text editor from earlier? I can do better! And I did. So, you try it out.

B I U strike · View HTML · ·
Here's a new editor. The style buttons in its toolbar support bold, italic, underline text, and a new style, strike.

This one switches between the text and HTML with the "View HTML" button (modern browsers show a neat effect).

And maybe the best part is: when you make changes, it saves the changes to the browser's local storage! So even if you quit your browser and come back, it's still stored! To clear your changes, hit the Start Over button.
3/10/14 Parsing We can take the ability to apply styles a lot farther by using a feature supported by HTML5: a tag with the unfortunate name of <div contenteditable>. It creates a word processing area inside the page, but it's definitely not a complete word processing application. If you start looking for the Font and Style menus in the browser, you might be searching for a while. Double negative for file management (no saving, no opening files).

Still, you can type in it, copy and paste, and use the mouse and keyboard. And with some pre-arranged help from a parser, this text editing area can automatically react to changes by restyling itself according to specific rules.

Here's a field with a parser involving colors. In the field, the browser watches the text editing process. The typist's changes trigger color changes, which are performed behind the scenes, smoothly displaying the results to you. Try editing it yourself:
This colors words red, orange, yellow, green, blue, purple, or "aqua" as you type! Click in here and try it!

Parsers can have more functionality than just pretty colors. In the process of scanning the text to paint it, they can perform other actions. Here's a field that will perform quick arithmetic calculations. It supports basic math (+, -, *, /, (), ^) and correctly deals with operator precedence. You can input your numbers and operations in words or classic symbols, so "ten minus three" would be fine. Anything the parser doesn't understand will be grayed out and not used.
1 + 2 * 3^(five minus 2)
math = sum? (.* [gray] -> "") sum = t:(sum plus product) -> "sum(" t ")" / t:(sum minus product) -> "diff(" t ")" / product product = t:(product times factor) -> "product(" t ")" / t:(product slash factor) -> "divide(" t ")" / factor factor = v:value caret f:factor -> "power(" v "," f ")" / value value = " "* v:(."0123456789"+ / "(" s:sum ")" -> s / literal) " "* -> v literal = "zero"->"0" / "one"->"1" / "two"->"2" / "three"->"3" / "four"->"4" / "five"->"5" / "six"->"6" / "seven"->"7" / "eight"->"8" / "nine"->"9" / "ten"->"10" plus = ("+" / "plus") -> "+" [blue] minus = ("-" / "minus") -> "-" [blue] times = ("*" / "times") -> "*" [blue] slash = ("/" / "divided" " "+ "by") -> "/" [blue] caret = ("^" / "to" " "+ "the" " "+ "power" " "+ "of") [blue]

When I commented that parsers use specific rules, I wasn't kidding, was I? No, not kidding. The computer science behind text parsing is quite deep but it can be learned. There's no need to go over it all right now, except to deliver two reassuring facts about parsing that define the category of programming that they're in.
  1. Every time the same parser sees the same text, it works the same way. (The 'no surprises' guarantee.)
  2. A "bad" parser won't break the whole web page. (The 'no hangs' guarantee.)
Because of these guarantees, you can play around with parsers and watch the result of your attempts live, in real-time. The rules of parsing are very simple, kind of like how the rules of chess are very simple, but there is an infinite world of possibilities associated with the outcome. Like any good hobby, it brings me some real satisfaction to get a parser working successfully. 3/16/14 Accounts Maintaining the value of the text field in the browser's local storage is nice. It's stored privately with respect to other web sites you visit, so the data's between you and me only. Let's take it to the next level: private user accounts on a Hypervariety.com server.

As webmaster, I've registered secure.hypervariety.com, which communicates via HTTPS, the secure version of the web protocol. Although recent developments have indicated that certain supposedly trusted entities have been compromised(and there is no reason to assume I haven't been either), HTTPS is based on the math of prime numbers that people far smarter than me have confirmed to be solid. In any case, the only things you need to start an account on my server is to make up a name and password — no email, no credit card.

From being logged in, the browser receives the ability to upload and download text. Your account can store many pieces of text, each associated to a name (the editor's name is blog-storetest). You start off editing the saved data if you're logged in.

B I U strike · View HTML Not logged in Log in or out
Click to store the text on secure.hypervariety.com. Select this to automatically re-upload upon a change
3/26/14 Mathematics This field supports math that is more advanced. You can type up arithmetic expressions with the usual plus (+), minus (-), times (*), divided by (/), and to the power of (^). You can use parenthesis to control the order of operations. The numbers can have decimal points and negative signs. And you can use the equals sign (=) to make equations, with variables, which can then be solved (where possible).

12 in per foot=feet=ft
5280 ft is 1 mile
60*60 sec is 1 hr=hour
snail speed is two in/sec
x mile/hr = snail speed

pi = 3.141596
area foot^2 = pi (7 in)^2
Facts:
 4/7/14 Marching Ants Marching ants, sometimes called marquee, is a classic effect designed to show that something is selected, such as an icon, or an area in an image. I'd like to make a quick template that implements this effect, and automatically supports being dragged around the page following the mouse — I think it could be useful...

You can click & drag me, and resize me from my edges

...but HTML5 supports more than that. How about some fun with roundies? Drag this roundie directly into the box below. Go ahead!
Do you like clicking the roundies to move them around? You may have a mind that likes to solve puzzles geometrically. Good eye!

I don't know if you noticed (since I'm not looking over your shoulder) how they sort of blend in with the text processing capabilities of the browser, with those shift-clicking abilities. You can click and drag them around their edges and corners, and you can even double-click on a roundie to get at its contents. If you're done with one or just don't like it, delete it with the keyboard. 4/23/14 Wow! In the last couple of months, I've posted a dozen entries, each a bonsai bonzai programming adventure. What a strange path it's taken, but still understandable as I read it back. I began the blog all the way yester February in the midst of a chemistry class, then all the way up to late April. The leaves on the trees here are beginning to attract sunshine now. I've been very busy; if there have been some changes with you, I hope they've been good.

A little criticism might help me out, and I'm sure public discussion could expand a few minds. The ability to push a comment onto the end of a blog post, signed by your account if you're logged in or an impromptu throwaway name if not, would be excellent. The blog would have to collect the forms uploaded somehow, and include and store your IP address to prevent spam (all blogs do it!)
What's your name?

Comment:

Show Comments
(download them)
But how is it done? Here we need two new capabilities. To post, you need to be able to push to my account, not your own. As account holder, I had better not let you post to just any file in my domain, and I must control what kind of tags get up there, too. To read, I have to be able to collect all those files and send them along with the blog to be displayed, but not as raw HTML.

So, the answer is the single fun button called Publish. It submits the form, which will be associated with this web page, which can then send them back to you. 5/1/14 Type into this post
I'm fixing a lot of old blog posts and restyling the nice text. The thing about errors and fixing blog posts is this: when you have an error in functionality of one post, it usually doesn't affect the other posts. My method seems pretty sound.

I'm also happy with the way scripting works. It's easy to declare a Javascript handler for a roundie. Colored text works well and the field is flexible about what I want to throw at it.
reset say 'Will this script work?' say it umm, say it 'Hello', say it say 1 + 2*3 ask "What's going on?" with "Nothin' really" ask "What's going on?" with "Nothin' really"
say it 5/2/14 Twisty little passageways Words mean things, and sometimes explaining their relationships can be complex.
It's easy to get hung up on semantics, but they're the only game in town. So let's make a code. The code works like a game of tag, and Bold is it. You know, that. The code is melodiously what that is. Clear as mud...
ask "Want to change the headline?"
if not, then exit

ask "What's the new headline?" with "New Headline Here"
put it into reply

headline in this blog_entry, this blog_entry's headline, the headline of this blog_entry

put reply into that

insert a new roundie into it
put "I'm a new roundie" into that
set the background of it to (ask "what color roundie" with "green")

execute 5/19/14 Linear algebra In school you might have touched on linear algebra, where you solve variables and equations. It's much more fun when someone else does your homework. This field which you can editDo your own homework for a change. figures out the answers from the top down. It puts answers on the left, and reasons (when it's not obvious) on the right.

3+2+10-1

x + 2y + 3z = 34
y + 2z = 19
x + z = 10

x - z = -4
x = 1000
x+y + 1
× 5/20/15 Home improvement Well, I've added a few interesting modifications to the home page earlier this month. Hopefully they're robust enough to survive for a while. Enjoy.