Curran Kelleher has a couple of videos and and excellent little website called 50 AngularJS examples, with tiny but complete HTML code illustrating each example. The first few are pure HTML and jQuery-less DOM manipulation, then the rest to go into AngularJS with a little Backbone for comparison. You can even navigate through examples using arrow keys. An excellent means of presenting information I’m thinking about stealing!

The two videos don’t have any table of contents, so I created one:

Part 1

Example 1

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=691

 

Example 2

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=725

 

Example 3

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=790

 

Example 4

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=812

 

Example 5

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=852

 

Example 6

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=890

 

Example 7 (First AngularJS example) Introduces angular, discusses cdnjs.com

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1032

 

Example 8

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1256

 

Example 9

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1291

 

Example 10

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1317

 

Example 11

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1457

 

Example 12: Fascinating discussion of how AngularJS propagates values

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1548

 

Example 13

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1642

 

Example 14

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1725

 

Example 15

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=1822

 

Example 16

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2004

 

Example 17

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2030

 

Example 18

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2266

 

Example 19

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2345

 

Example 20

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2402

 

Example 21

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2547

 

Example 22

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2722

 

Example 23

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2831

 

Example 24

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2872

 

Example 25

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=2932

 

Example 26

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3052

 

Example 27

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3161

 

Example 28

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3290

 

Example 29

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3331

 

Example  30

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3345

 

Example 31

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3380

 

Example 32

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3453

 

Example 33, Routing (says Example 32)

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3469

 

Example 34

https://www.youtube.com/watch?v=TRrL5j3MIvo#t=3489

 

Example 35

https://www.youtube.com/watch?feature=player_detailpage&v=TRrL5j3MIvo#t=3771

 

Part 2

Example 36

https://www.youtube.com/watch?feature=player_detailpage&v=6J08m1H2BME#t=467

 

Example 37

https://www.youtube.com/watch?feature=player_detailpage&v=6J08m1H2BME#t=555

 

Example 38

https://www.youtube.com/watch?feature=player_detailpage&v=6J08m1H2BME#t=712

 

Example 39

https://www.youtube.com/watch?feature=player_detailpage&v=6J08m1H2BME#t=821

 

Example 40

https://www.youtube.com/watch?feature=player_detailpage&v=6J08m1H2BME#t=1069

 

Example 41

https://www.youtube.com/watch?v=6J08m1H2BME#t=1224

 

Example 42

https://www.youtube.com/watch?v=6J08m1H2BME#t=1319

 

Example 43

https://www.youtube.com/watch?v=6J08m1H2BME#t=1468

 

Example 44

https://www.youtube.com/watch?v=6J08m1H2BME#t=1666

 

Example 45

https://www.youtube.com/watch?v=6J08m1H2BME#t=1810

 

Example 46

https://www.youtube.com/watch?v=6J08m1H2BME#t=2137

 

Example 47 (introduced while on Example 46)

https://www.youtube.com/watch?v=6J08m1H2BME#t=2731

 

Example 48

https://www.youtube.com/watch?v=6J08m1H2BME#t=2821

 

Example 49

https://www.youtube.com/watch?v=6J08m1H2BME#t=3110

 

Example 50

https://www.youtube.com/watch?v=6J08m1H2BME#t=3186

Here is a copy-and-paste HTML5 app template that will no doubt evolve. Because it uses CDNs to load jQuery and Bootstrap you can copy and paste it as is. You don’t need to create local directories with them. (Updated to include charset declaraction May 3, 2015)

Copy and paste this HTML5 app template using Bootstrap and jQuery

If you want to bang out a quick HTML5 app that uses Bootstrap and/or jQuery
just copy and paste this code. Normally you’d have to copy several files
to local directories, but that problem is eliminated through the use of
CDNS (cloud services) to fetch the files.

Features

  • Uses Bootstrap for clean styling across browsers
  • Uses jQuery for consistent behavior across browsers
  • Automatically finds latest version of jQuery
  • Robust: Includes checks to ensure jQuery and Bootstrap are present

What to be careful of

  • Because only the latest jQuery is specified, behavior could change subtly
  • Watch for newer versions of Bootstrap and change source accordingly
  • It is possible that either CDN could go out of business, in which case
    you’d have to store jQuery or Bootstrap locally
  • It’s probably better to use local versions of both libraries in production
    so that test results remain consistent

 

 
Download source to HTML5 App Template with Bootstrap and jQuery loaded from CDNs v1.01

 

This Program Clones Itself

 

Here’s a page using Bootstrap and JQuery that clones its own source code, starting with the <head> tag

It uses Bootstrap for cosmetic purposes. Obviously the core code is here:

$('#sourceListing').text( $("html").clone().html() ) ;

Screen shot of the program in action:

This Program Clones Itself

This recipe how to resize the HTML5 canvas dynamically when the size of the browser window changes. Weirdly, the HTML canvas element defaults to a fixed 300 pixels wide by 150 pixels high, and that won’t change for compatibility reasons. It’s right there in the W3C spec at http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#the-canvas-element.

Complete HTML Code for Resizing the Canvas Dynamically

You came here for the code, so here it is. Click here to see it in action (http://htmlcheats.com/wp-content/uploads/2013/06/resizecanvas.html), though it doesn’t look like much. The canvas is stretched to fit the browser window and a blue border displays around the edge; resize the browser window to see.  An explanation follows.

 

How it Works

The key is to register an event listener, which is a way to respond to changes in the DOM. There are many possible events one can listen to. In this case it’s one that fires when the window resizes. The event listener calls a method of your choice, in this case, one to resize the canvas and to draw a border around it. There are also a few practical issues regarding  program initialization and HTML styling. We’ll cover those briefly too.

<style> issues: overflow and display

The <style> section is pretty self-explanatory but two parts bear explanation. overflow: hidden is required because otherwise scrollbars would display. Sometimes they’re useful but for this example they only get in the way. display: block makes the canvas act like a <div> as opposed to a <span>. That is, it ensures nothing displays on either size of the canvas.

<canvas> naming and getElementById()

To draw on an HTML page you need a <canvas> tag somewhere between the <body> and </body> tags. You need to give it an ID in quotes, and that ID will be used by the getElementById() DOM method so make sure the two match up.   Normally an ID should contain one or more characters, but no spaces. The ID should be unique on the page; no other element should use it.

Add a document ready function

If you’re new to Javascript and DOM programming this construct may look odd:

It is an anonymous (unnamed) function that executes once, and theoretically only when the HTML page has been fully loaded. An HTML page is a complex and wonderful thing. It has headings and paragraphs of text, which must be loaded into the DOM. It may images or other media files, which must also go there.

It may also have Javascript that manipulates the DOM. However, the HTML specification doesn’t promise that assets will be loaded  in the order they appear on the page. It’s possible that Javascript will load earlier than some other assets, and try to manipulate elements on the page that are not yet recognize by the DOM.

So before using Javascript on the DOM, you need what is traditionally called a document ready function. Due to the nature of the HTML spec, variations in browsers, and the asynchronous nature of the loading of web page elements, determining whether the document is ready takes far more than a line of code or two.

The “theoretically” part mentioned above is that you have no assurance in this example that the document has been loaded. Here it doesn’t matter because the file is so small. However, any real-life HTML app using Javascript will have something very much like that anonymous function designed to run.

The most common document ready function looks almost exactly like the example above. It’s from JQuery:

If you’re wondering what document ready code that doesn’t require JQuery looks like, Stackoverflow takes on the issue at http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery. Reading it gave me an anxiety attack. In production code, I’d strongly recommend you stick to JQuery or something like it to determine document readiness.

Get the canvas from the DOM and obtain its graphic context

To draw on the canvas, you must get access to the DOM by declaring a Javascript variable (htmlCanvas, in this case) and call the DOM’s getElementById method, passing the ID of the canvas tag to it.

Then, you need to get its graphics context, a reference to the drawing surface itself. Use the getContext('2d') method call for that. Yes, there’s a 3D context too. It’s called ‘webgl’ but isn’t germaine to this task.

Start responding to window resize events

The goal is to redraw the canvas when the browser window dimensions change. That’s the event listener. In this example the user-defined function resizeCanvas() is called each time the browser’s resize event is triggered.

Connecting the event to the resizeCanvas() method only needs to happen once. It’s placed in the intialize() function along with resizeCanvas() because the resize event doesn’t get fired on window creation.

Resize canvas based on window dimensions

Remember that while Javascript is a complete, general-purpose language, it runs in the context of the browser’s window object. You are no doubt very familiar with the best-known method of the window object, which is alert(). Two properties of the window object are its current width and height, innerWidth and innerHeight. These are used to draw the canvas at maximum size when the window object’s dimensions change:

Redraw canvas after it’s been resized

The redraw() function gets called from the resizeCanvas() event. In production code this would be more interesting than drawing a bordered canvas. In a graphics editor, for example, it would redraw the image and perhaps a toolbar.

Summary

This skeleton is everything you need for an app that needs a resizable canvas. It:

  • Adds HTML markup for a canvas element with a unique ID (‘c’ in this example)
  • Declares a Javascript variable named htmlCanvas with a reference to that canvas’s ID using the DOM’s getElementById() method
  • Gets a graphics context to draw on (the variable named context)
  • Calls a user-defined function called initialize() in this example that gets access to the browser’s resize event
  • Which creates an implicit loop, calling the user-defined resizeCanvas() method when the browser window changes size
  • As long as the page is active the context remains available for graphics operations

 

 

This is a simpleminded approach to creating consistent headers and footers across a multi-page site using Bootstrap.js and Javascript includes. There is probably a better, more Bootstrappy way to do it but this should be robust and is certainly easy to understand.

We start with a minimal but complete Bootstrap site, as described in Bootstrap tutorial: Using Bootstrap.js with a CDN:

We’d like to put a footer like this at the bottom of every page, but without having to copy and paste the HTML every time. The solution is including a Javascript file that writes to the HTML document.

The advantage is that if you want to change the footer, you’ll only have to change it in one place. The disadvantage is that instead of writing pure HTML, you will be writing Javascript to generate that HTML. The translation is almost mechanical, but you’ll have to watch the syntax to make sure you nest single quotes in double quotes or vice versa.

You could break the footer up into smaller pieces using the Javascript string concatenation operator, which products the string "hello, world" from the expression "hello, " + "world". It’s not necessary at the moment, but it will make sense later. The previous listing could just as well look like this. They would produce the equivalent HTML output.

First, a seemingly pointless exercise to illustrate the first step toward creating our footer. Let’s use Javascript to generate HTML right in the home page. The relevant lines are 48-50.

These lines output HTML directly to the document. Run this example and view source on it. Pointless because you could do the same thing in HTML with no Javascript. The previous listing shows you all in one place what you’re now going to do in separate files.

Create a file named footer.js containing the following code exactly. It will look very much like the previous HTML listing, but the code is moved into its own file. The name footer.js has no special meaning. You could call it anything.

 

Beware of single vs. double quotes

Be careful when you type it in. Note that double quotes and single quotes have been swapped. To see why, let’s just say we’re writing the opening div tag. If you write something like document.write("<div class="footer">") then Javascript will get confused. It will think the second double-quote mark, the one after the = sign, is closing the string. So you have to nest double quote strings inside single quoted strings, as in document.write("<div class='footer'>") Save the following as index1.html, and make sure it’s in the same directory as footer.js:

Save the following as about1.html, in the same directory as index1.html and footer.js. Pay attention to the highlighted lines in this example and the previous one.

Run this example and click the About link. Notice that they both have the same footer. It is not explicitly in the  HTML, and is instead being generated by Javascript.

Final cleanup: Generating the Header

Using Javascript to output a single line of HTML is… whelming. Let’s take on something more interesting: the header code. Save the following as header.js:

Eliminate those same lines from index1.html. Save the following as index.html:

And do something similar with index1.html. Save the following as about.html:

Run the finished version of index.html and click the About link. View source on each. Note that both index.html and about.html now have both header and footer supplied by Javascript files. They are no longer inline HTML.

 

Not sure this is the absolute minimum. The HTML5 spec is big and browsers are tolerant. Close enough.