html

I've been running this site for about 18 years now and the code I post has been in much the same format since it was started. The code is rendered onto the page using a <code> element and (mostly) syntax highlighted using a JavaScript plugin.

I make use of sites like Codepen and JSFiddle quite a bit, and often link to those sites to show examples of the code in use. Those sites got me thinking about the static nature of the code examples on this site. I have been writing more front end code recently, but static code examples aren't the best way of showing these features in action. I can (and have) uploaded images and gifs of the feature in action, but those images are many times the size of the code examples in question and serve only to bloat the page.

What I would really like to do is allow active code examples, or a code sandbox, to be injected into the page. This would allow users to interact with code examples rather than them just being static. A valuable learning tool for any site.

I was working on a web page generation program recently and was looking for a way to present different versions of the same page with slight differences in the markup and styles. Although using the iframe element came to mind I wasn't keen on rendering out lots of different versions of the page and then referencing them individually in each iframe. I did think about creating using an API to send back each page on request but I thought that this might just overcomplicate the program.

After a little bit of research I came across the srcdoc attribute of the iframe, which solved the problem quite neatly.

The iframe is normally used with a src attribute, which points to some external page. The following example will render the page at example.com within the page.

PhoneGap is a free and opensource framework for developing mobile applications. It is a great way of creating applications that work across multiple devices including iOS, Android, Blackberry, Windows and others. It works by rendering HTML pages using a browser, which means that you can create applications using just HTML and JavaScript. It also allows you to interact with elements of the phone like the camera and accelerometer through JavaScript using a simple API.

I recently set about trying to use this system to create an application, and as I have an Android phone I started by creating a simple Android app. The PhoneGap website has a number of getting started guides, including what software you need to get started. I found that they were a little wrong for getting started in Android. I am running OSx so the instructions here might not work for you, but they should be fine for most *nix based systems.

To get a webpage to refresh every few seconds you can use a meta tag with the attribute http-equiv and a value of refresh. The number of seconds to delay can be put into the content attribute. This meta tag (as will all meta tags) goes into the head section of the document.

Here is an example that refreshes the page every 2 seconds.

<meta http-equiv="refresh" content="2" />

It is also possible to make the browser refresh to another page by including the string:

url=url or filename

Within the content attribute. Here is an example that redirects the page to google.com after a 5 second delay.

<meta http-equiv="refresh" content="5;url=http://www.google.com" />

The reverse of turning ASCII text into HTML is to convert HTML into ASCII. And to this end here is a little function that does this.