Twine and Flex

As I work through the Udacity classes on front end web development, I’ve been discovering some pretty good resources on “Flexbox”, a very handy way to make text move around your web page in easily predictable ways that allow your designs to adapt to different sized screens (laptop, tablet, phone).
Here are some of my favorite links. They may help you as well:

In addition to that, I’ve been reading a great book from No Starch Press called “JavaScript for Kids” by Nick Morgan. I have also been looking around at a free, html-based interactive fiction (IF) language/platform called Twine. So I made a little (very basic) tutorial on JavaScript using Twine. JavaScript is Fun.

I had some programming issues making even this tiny script, because I started reading a tutorial on Twine 1.4 and then realized that it has moved to Twine 2.0.x, and changed the syntax. Now, I discovered, you can choose 3 formats for your markup. I chose one called SugarCube because the syntax made the most sense to me (other options are Harlowe and Snowman).

Twine is great fun because it lets you create a branching story in a graphical way; when you link two passages you actually see the link. Then it lets you leverage all the CSS and HTML and scripting language tricks you know to add functionality and cleverness and even more interactivity, images, even animated gifs. And you can test and debug it all before you make it live. Twine publishes its games as a self contained html page using a wiki format called Tiddlywiki. This makes them extremely quick to load and run in a browser.

Of course, having a good story is the crucial part.

One thought on “Twine and Flex”

  1. I love your enthusiasm! A quick warning about flexbox though: just realize that versions of Internet Explorer before 11 won’t support it properly.

    The Javascript adventure is hilarious, though I disagree with the premise, “Javascript is Fun” 😛

    Another great resource on JS is the book “Secrets of the JavaScript Ninja” by John Resig.

Leave a Reply

Your email address will not be published. Required fields are marked *