The solution is see.js. It is a simple debugger that I've written that lets you interact with an eval closure that you can insert at any scope you want to view. In Javascript it is pretty common to use closures to encapsulate a lot of state - even your whole program. With see.js, you can write clean code like this without losing the ability to debug.

More details below.

Below is the default (polar azumithal) projection. It places the equator on the unit circle, the south pole at infinity, and the prime meridian on the real line towards +1. Because the south pole is at infinity, there is a large distortion of sizes as you go south of the equator. However, the map is conformal, which means that locally, all angles are still accurate.

Here is a zoom-in on Greenwich, London at +0.35 on the polar projection. On the same projection, here is a zoom-in on Adelaide, Australia. Even though the southern hemisphere seems grossly large on the whole-plane rendering, it still looks correct locally.

The Mercator projection is the most well-known conformal projection, and here it can be rendered using e^iz. Other projections such as the classical azimuthal stereographic and the Lagrange projectections are also just other complex-valued functions.

Read about other conformal projections here.

Can you find functions that implement other interesting projections?

While reading some complex number proofs I wanted one, but online I could only find installable software or Java applets (to be avoided because of security problems). So I wrote a Javascript conformal map viewer, which you can see here (click here to view it as a full page - it is about 1000 lines of javascript on a single page, and it is a nice example of doing canvas rendering with web workers):

The starting function "(z)" is the identity function, and shows how the tool colors the complex plane, with a ring at |z| = 1 and a small circle at |z| < 1/16, and 1/16th unit colored checkers on the rest of the plane. There is also a colored circle shown towards infinity, at |z| > 16. Colors are turquoise in the positive direction, red in the negative, gold-green in the "+i" direction, and they get darker as you go out towards infinity. The tool draws a quick fuzzy preview; wait a minute for it to complete the computation for a clear antialiased rendering. Lots of other functions can be typed into the box. For example, notice that |z|*e^(i*arg(z)) is the same as z.

Try visualizing the complex values in z^2, sin(z), e^z, log(z), sech(z), arctan(z), z^3-1, sin(z^3-1)/z, Jacobi elliptical functions sn(z,0.3), the Gamma function gamma(z), or a polynomial to squeeze a circle into a square 0.926(z+7.3857e-2 z^5+4.5458e-3 z^9).

Or try this: iter(z+z'^2,z,12). Recognize it?

Worth a listen. It is hard to remember how long ago 1983 was. Jobs speaks about science-fiction ideas such as using computers as a new communication medium; interactive street maps based on photos of every intersection; the balance of privacy and openness in politics; the concept of an online app store; digital imagery; voice recognition; management at Apple; and his strategy for Apple's next decade.

We want to put an incredibly great computer in a book that you can carry around with you, that you can learn how to use in 20 minutes... We really want to do it with a radio link in it, so you don't need to hook up to anything and you're in communication with all these larger databases and other computers.

Remember, in 1983, PCs had no networking and no GUIs, and in his lecture, he had to explain "what is a computer program", and the nutty idea of displaying proportional fonts on computers.

On the pent-up economic problems in China:

Everything the Party does to fix things in the short term only makes matters worse in the long term by setting off property prices again. Take the recent cut in interest rates, which was done to boost domestic consumption, which won’t boost itself until the Party sorts out the healthcare system, which it hasn’t the money for because it has been invested in American debt, which it can’t sell without hurting the dollar, which would raise the value of the yuan and harm exports, which will shut factories and put people out of work and threaten social stability.

On the decline of community and civic culture:

Traditional family culture, thanks to 60 years of self-serving socialism followed by another 30 of the “one child policy,” has become a “me” culture. Except where there is economic benefit to be had, communities do not act together... In the small rural village where we live I am not asked about my health or that of my family, I am asked how much money our small business is making, how much our car cost, our dog.

On the implications of Chinese racism and exceptionalism:

Leadership requires empathy, an ability to put yourself in your subordinate’s shoes. It also requires decisiveness and a willingness to accept responsibility. Believing themselves to be unique, the Chinese find it almost impossible to empathise. Controlled by people with conflicting interests, China’s government struggles to be decisive in domestic issues, let alone foreign ones....

On the education:

The domestic Chinese lower education system does not educate. It is a test centre. The curriculum is designed to teach children how to pass them.... Schools do not produce well-rounded, sociable, self-reliant young people with inquiring minds. They produce winners and losers. Winners go on to college or university to take “business studies.” Losers go back to the farm or the local factory their parents were hoping they could escape.

Kitto also points out that the biggest property bubble on the planet (in China) seems to be caused by the unreliability of Chinese banks and stock markets, and the inability of Chinese to invest overseas due to the restrictions on yuan exchange, leaving property as the only place to park savings. My wife points out that Chinese have always liked to buy land; at any rate, Chinese property is a bubble of gigantic proportions and the government does not seem to have any way to deflate it.

Kitto seems to share the view that, without more inspired leadership, a terrible cliff is on the horizon for China.

Worth a read.

(Also, here is a contrary opinion by an American expat.)

What is the true value of omega?

Strassen's discovery touched off a flurry of research. In the following two decades, bounds on omega were improved and tuned until 1987, when Don Coppersmith and Shmuel Winograd reduced the exponent to 2.3755. That low exponent has stood as the best upper-bound for omega for 24 years.

Although the Strassen and C-W algorithms are not practical for most real-world problems, the theoretical work shows that matrix multiplication is fundamentally simpler than we would naively assume. It hints that the mathematical world has a gap in knowledge with respect to the fundamental operation of composing linear operations. Some believe (or hope) that matrix multiplication will ultimately be shown to be O(n²). But for decades nobody has been able to get the exponent lower than 2.3755 - until now.

The Race for a Better Omega is On Again

A few days ago, Virginia Vassilevska Williams published a paper achieving an exponent lower than 2.3727, improving the bound by 0.0028 and importantly showing that C-W is not the end of the story. She credits Andrew Stothers for doing thesis work last year that pointed the way to breaking the C-W record. Then she describes an algorithm that beats upon the Stothers algorithm bound further, and she describes a general method to generate further algorithms that have low exponents.

Why did it take so long to make this next improvement? In her words, "with each new tensor power, the number of new values that need to be analyzed grows quadratically. For the eighth tensor power for instance, 30 separate analyses are required! Prior to our work, each of these analyses would require a separate application of the CW techniques. It would have required an enormous amount of patience to analyze larger tensor powers, and since the third tensor power does not give any improvement, the prospects looked bleak."

Her paper (here) is an example of a breed of modern mathematics that has grown to be comfortable with using computers as a tool. Not only does she drive computer algebra systems to crack formulas with a higher level of complexity than would be practical to do when working by hand: she describes algorithms for creating algorithms, driving computers to sift through large numbers of permutations, hunting for the best ideas.

Links. The Paper; RJ Lipton's blog entry; New Scientist.

All of these trends point in the same direction. Within the next decade - before my children are in the workforce - the cost advantages of outsourcing U.S. manufacturing to China will have evaporated, and the U.S. economy will begin to look very different again. The change will happen quickly.

A report from BCG summarizing this thinking has been making the rounds and is worth a read.

My opinion: it is a good time to be an American exporter and a bad time to be an importer. Good time to be a manufacturer and a bad time to be a retailer. If you can make a profit exporting goods to China today, then you are going to be rolling in profits in the next decade.

A list of top U.S. exporters by container volume is here. This list is dominated by high-volume low-value exports (trash and paper). Missing are companies like Boeing or Intel that do not use a lot of container space. What would be more interesting would be a good listing of exporters by dollar value.

There are two problems: first, the generality of jQuery selectors is an unnecessary concept to know before you even know what a function is. And second, the punctuation is too much for inexperienced typers to type: shift-4 for dollar, shift-9 and shift-0 for smooth parentheses, a choice to decide between single and double quotes, and don't forget shift-3 for the hashmark.

So I am considering giving kids a template that starts all their programs with a call to $.setupids() where idvars is a function defined as follows:

$.setupids = function setupids(prefix) {
  prefix = prefix || '';
  $('[id]').each(function(j, item) {
    window[prefix + item.id] = $('#' + item.id);
  });
};

The idea is that after $.setupids();, every HTML element that has an id of "r" has a corresponding global variable "r = $('#r');" which is the jquery selecting that element (not just the bare element).

<script src="/lib/jq.js"></script>
<img id="a" src="/public/asteroid.gif">
<img id="r" src="/public/rocket.png">
<script>
$.setupids(); // supplied in the template
a.move();
r.turnto(a);
</script>

Click here to see a demo.

]]> 2011-10-15T10:03:48-05:00 http://davidbau.com/archives/2011/10/10/learning_to_program_with_jquery.html What is the best programming language to learn first? The right answer in today's world is Javascript - with jQuery. Javascript is the most widely supported programming language in the world. It has readable algebraic syntax and simple typing that... 413@http://davidbau.com/ What is the best programming language to learn first? The right answer in today's world is Javascript - with jQuery.

Javascript is the most widely supported programming language in the world. It has readable algebraic syntax and simple typing that is forgiving for beginners. With its good support for closures, objects, and literals, it is an elegant little language with room to grow.

The main disadvantage of Javascript is its odd and unreliable GUI-oriented standard library, the HTML DOM. But jQuery has fixed that. With its efficient, robust design, jQuery has far outstripped all its rivals as the "version 2" DOM. Today, jQuery is approaching the universality of Javascript itself.

But is jQuery accessible to beginners?

This Fall I will be testing that question. Together with several Google friends, I'm teaching a learn-to-program course to a group of 17 sixth graders (we're doing it as part of the Citizen Schools program where every child in the Dorchester public middle school is required to participate in an after-school program).

The theme of the class is "web game programming" - a popular topic. We are using Javascript and jQuery on Chromebooks along with a small set of jQuery extensions including jquery-turtle, described below. We have ten hours to get the kids from "hello world" to creating their own games.

In our first two hours, we've explored the Javascript debugger and made our own webpages. Hour three is coming up. It will be our first exercise in making a simple game with some scaffolding.

Here is the example for class 3.

What's New

This version is still svelte, clocking in at 91 lines of python code (plus comments and tests). Version 3.3 changes the following from v2:

• The old class-template idioms in the original version have been removed; they were slow and unwieldy. Now it's just @stringfunction and @unicodefunction.
• Common uses of $ in javascript no longer need to be escaped in templates. Jquery $. and $( are very common, and regular expressions often have $/ and $' and $", so all these sequences now pass through the template without escape.
• Line numbers are aligned exactly so that both syntax errors and runtime errors in exception traces are reported on the correct line of the template file in which the code appears.

Together these small changes - particularly accurate error line numbers - make @stringfunction much more usable for composing large templates for website development.

Usage

Usage is unchanged: just annotate a python function with @stringfunction or @unicodefunction, and then put the template text where the docstring would normally be. Leave the function body empty, and efficient code to concatenate the contents will be created.

  from templet import stringfunction
  
  @stringfunction
  def myTemplate(animal, body):
    "the $animal jumped over the $body."
  
  print myTemplate('cow', 'moon')

This is turned into something like this:

  def myTemplate(animal, body):
    out = []
    out.append("the ")
    out.append(str(animal))
    out.append(" jumped over the ")
    out.append(str(body))
    out.append(".")
    return ''.join(out)

There are just six constructs that are supported, all starting with $:

• $myvar inserts the value of the variable 'myvar'
• ${...} evaluates the expression and inserts the result
• ${[...]} runs a list comprehension and concatenates the results
• ${{...}} executes enclosed code; use 'out.append(text)' to insert text
• $$ an escape for a single $
• $ (at the end of the line) is a line continuation

All ordinary uses of $ in the template need to be escaped by doubling the $$ - with the exception of (as mentioned above) $., $(, $/, $', and $".

Philosophy

The philosophy behind templet is to introduce only the concepts necessary to simplify the construction of long strings in python; and then to encourage all other logic to be expressed using ordinary python.

A @stringfunction function can do everything that you can do with any function that returns a string: it can be called recursively; it can have variable or keyword arguments; it can be a member of a package or a method of a class; and it can access global imports or invoke other packages. As a result, although the construct is extremely simple, it brings all the power of python to templates, and the @stringfunction idea scales very well.

Beyond simple interpolation, templet does not invent any new syntax for data formatting. If you want to format a floating-point number, you can write ${"%2.3f" % num}; if you want to escape HTML sequences, just write ${cgi.escape(message)}. Not as brief as a specialized syntax, but easy to remember, brief enough, and readable to any python programmer.

Similarly, templet does not invent any new control flow or looping structures. To loop a template, you need to use a python loop or list comprension and call the subtemplate as a function:

 @stringfunction
 def doc_template(table):
   """
   <body>
   <h1>${ table.name }</h1>
   <table>
   ${{
     for item in table:
       out.append(self.row_template(item))
   }}
   </table>
   </body>
   """

If you prefer list comprehensions, it is slightly more brief:

 @stringfunction
 def doc_template(table):
   """
   <body>
   <h1>${ table.name }</h1>
   <table>
   ${[self.row_template(item) for item in table]}
   </table>
   </body>
   """

The design encourages simple templates that read in straight-line fashion, an excellent practice in the long run. Although when invoking subtemplates you need to pass state, of course you can use @stringfunction to make methods and pass state on "self", or use object parameters.

Details and Style

Some tips/guidelines for using these annotations.

Whitespace can be important inside HTML, but for python readability you often want to indent things, so @unicodefunction / @stringfunction gives you a few tools:

1. It identifies the number of leading spaces that are uniformly used to the left of the template and strips them.
2. It strips the first line of the template, if empty.
3. It allows you to use a $ at the end of a line for a line continuation.

So my recommended style for multiline templates is:

• indent template text in the function as if it were python code.
  
• use a python triple-quote and put the opening quote on its own line.
  
• never indent HTML tags - they just get too deep, so put them all at column 0.
  
• when nesting gets confusing, for readability, just put one tag on each line.
  
• liberally use $ continuations if layout demands no-whitespace.
  
• indent code inside ${{ and then put }} on its own line (a newline right after a closing }} is eaten).
  

Relative indenting for python code inside ${{...}} is preserved using the same leading-space-stripping trick as is used for the templates themselves, so you can indent embedded python as normal, and you can start the indenting at whichever column feels natural. I usually indent embedded python by one more level.

In the unusual case where it is necessary to emit text that has leading spaces on every line, you can begin the template with a continuation line with the $ in the column that you want to treat as column zero.

One question is whether the opening """ should be on the same line as the def or its own line. Either style is supported - for line number purposes, the program source is just scanned to discover the position of the opening quote - but for clarity I usually put the opening quote on its own line.

For example, if you want to achieve all on one line the following:

<tr><td class="..."><a class="..." href="/foo/bar/...">....</a></td><td class="...">...</td></tr>

Then you could use:

@unicodefunction
def table_row(row_data):
  """
  <tr>$
  <td class="${col1_class} def">$
  <a class="${link_class}"$
   href="/foo/bar/${cgi.escape(filename, True)}">$
  ${cgi.escape(link_text})}$
  </a>$
  </td>$
  <td class="${col2_class}">$
  ${{
    if (enrolled): out.append('enrolled')
  }}
  ${cgi.escape(label_text)}$
  </td>$
  </tr>
  """

Done. Now call.jsonlib.com/fetch supports a "&method=" CGI argument that you can set to PUT or DELETE, and Anthony reports that it's working fine for accessing the API. (Does anybody know of any simple public HTTP servers out there that will echo your request so that it can be easily tested? At most URLs, using these unusual methods will just give you a 405 error.)

Access-Control-Allow-Origin

Another change is that call.jsonlib.com now supports cross-domain access via XHR (not just jsonp) on browsers that support the Access-Control-Allow-Origin header.

The problem with JSONP is that you can only use the GET method, not POST, so all of your submitted data must fit in a URL string. Some browsers, servers, and proxies may have trouble handling URL strings longer than about 2K, so this means you cannot use JSONP to reliably submit long chunks of data.

The solution is to go back to using traditional XHR techniques, but to tell your browser that cross-origin access is OK using the Access-Control-Allow-Origin header. This header is supported on modern browsers (FF, Chrome, Safari, Opera, and IE8+).

You can write code like the following (jQuery) to use the POST method to interact with jsonlib:

$.post('http://call.jsonlib.com/fetch',
  { url: 'http://davidbau.com/data/animals' },
  function(m) { output(m); },
  'json');

The above just uses POST to talk to jsonlib, and asks jsonlib to do a GET, but obviously you can use a POST to ask jsonlib to do a POST or a PUT as well.

Sniffing Character Encodings

The other update is logic for sniffing encodings. Since call.jsonlib.com always returns its contents as JSON unicode strings, it needs to understand how to convert responses from arbitrary other encodings. For text documents, it now uses BeautifulSoup and the chardet library to automatically detect encodings and convert text and html documents to unicode. This behavior can be overridden using the &encoding= CGI argument.

Examples: fetching utf-8 smart quotes and fetching cp-1252 smart quotes.

Non-text documents are treated as iso-8859-1 which is the simplest way use unicode 0-255 codepoints as a way of storing a bytestream (example: fetching a jpeg.)

The information-dominated 21st century is different from the nuclear-tipped 20th. In today's world, the power of the message is what matters.

Will historians see the 21st century as a second Enlightenment?

When Google released the goo.gl URL shortener API recently, they did not provide a JSONP API, so it is not convenient to make goo.gl URLs directly from Javascript. But then I wanted to implement a goo.gl-based "Save As Short Url" feature in the save box of Heidi's Sudoku Chrome App. The app is 100% Javascript and isn't even hosted on its own web server. What to do?

It is easy to do cross-domain HTTP by bouncing JSONP requests off call.jsonlib.com. With jsonlib, invoking the goo.gl API is just a few lines of code.

How To Do It

Here is how the goo.gl API works:

1. You assemble a JSON string containing your long URL in the 'longUrl' field.
2. This string must be POSTed to the googleapis server, with Content-Type "application/json".
3. The response is JSON that will have your short URL in the 'id' field.

In Javascript, it is inconvenient to POST data that is not formatted as "application/x-www-form-urlencoded", and it is hard to use cross-domain HTTP requests that do not return script-formatted JSONP services. However, call.jsonlib.com solves both of these problems easily.

Here is the code for a goo.gl shortener wrapper that shows how it can be done with a single call to jsonlib.fetch:

<script src="http://call.jsonlib.com/jsonlib.js"></script>
<script>
function googlurl(url, cb) {
  jsonlib.fetch({
    url: 'https://www.googleapis.com/urlshortener/v1/url',
    header: 'Content-Type: application/json',
    data: JSON.stringify({longUrl: url})
  }, function (m) {
    var result = null;
    try {
      result = JSON.parse(m.content).id;
      if (typeof result != 'string') result = null;
    } catch (e) {
      result = null;
    }
    cb(result);
  });
}
// Make a short URL for a nicely written book.
googlurl('http://www.amazon.com/Numerical-Linear-Algebra-Lloyd-'
       + 'Trefethen/dp/0898713617', function(s) { alert(s); });
</script>

Voila! Short URLs in a single function call.

Play with the code here if you like.