javascript page 3 - Dave's Blog


Shout Text Windows 8 App Development Notes

2013 Jun 27, 1:00

My first app for Windows 8 was Shout Text. You type into Shout Text, and your text is scaled up as large as possible while still fitting on the screen, as you type. It is the closest thing to a Hello World app as you'll find on the Windows Store that doesn't contain that phrase (by default) and I approached it as the simplest app I could make to learn about Windows modern app development and Windows Store app submission.

I rely on WinJS's default layout to use CSS transforms to scale up the user's text as they type. And they are typing into a simple content editable div.

The app was too simple for me to even consider using ads or charging for it which I learned more about in future apps.

The first interesting issue I ran into was that copying from and then pasting into the content editable div resulted in duplicates of the containing div with copied CSS appearing recursively inside of the content editable div. To fix this I had to catch the paste operation and remove the HTML data from the clipboard to ensure only the plain text data is pasted:

        function onPaste() {
var text;

if (window.clipboardData) {
text = window.clipboardData.getData("Text").toString();
window.clipboardData.setData("Text", util.normalizeContentEditableText(text));
shoutText.addEventListener("beforepaste", function () { return false; }, false);
shoutText.addEventListener("paste", onPaste, false);

I additionally found an issue in IE in which applying a CSS transform to a content editable div that has focus doesn't move the screen position of the user input caret - the text is scaled up or down but the caret remains the same size and in the same place on the screen. To fix this I made the following hack to reapply the current cursor position and text selection which resets the screen position of the user input caret.

        function resetCaret() {
setTimeout(function () {
var cursorPos = document.selection.createRange().duplicate();;
}, 200);

shoutText.attachEvent("onresize", function () { resetCaret(); }, true);
PermalinkCommentsdevelopment html javascript shout-text technical windows windows-store

Windows Store on Windows 8 Fun For Independent Developers

2013 Jun 24, 1:00
Having worked on Windows 8 I'm not in a neutral position to review aspects of it, however I'll say from a high level I love taking the following various positives from smart phone apps and app stores and applying it to the desktop:
  • Independent developers can easily publish apps.
  • One trusted place for a user to find apps.
  • User can trust apps are limited to a declared set of capabilities.
  • One common and easy way for users to buy and try apps.
  • Easy mechanism for independent developers to collect revenue.
Relieving the independent developer of software development overhead, in this case Windows taking care of distribution and sales infrastructure is wonderful for me with my third party developer hat on. This combined with my new found fun of developing in JavaScript and the new Windows Runtime APIs means I've been implementing and finishing various ideas I've had - some for fun and some for productivity on my Surface. Development notes to follow.
PermalinkCommentsstore technical windows windows-store

math - What is JavaScript's Max Int? What's the highest Integer value a Number can go to without losing precision? - Stack Overflow

2013 Feb 5, 11:23

In JavaScript numbers are 64bit floating point numbers which have 53 bits of mantissa. That means you can accurately represent [-2^53, 2^53] as integers in JavaScript. Aka [-9007199254740992, 9007199254740992].

PermalinkCommentsjavascript math integer technical programming

Welcome to TypeScript

2012 Oct 1, 6:41

TypeScript is a typed superset of JavaScript that adds interfaces, and type safety and compiles to JavaScript. In VS this means you get much better auto completion suggestions.  Watch the Channel9 video.

PermalinkCommentstechnical javascript typescript Microsoft programming programming-language

Stripe CTF - XSS, CSRF (Levels 4 & 6)

2012 Sep 10, 4:43

Level 4 and level 6 of the Stripe CTF had solutions around XSS.

Level 4


> Registered Users 

  • <% @registered_users.each do |user| %>
    <% last_active = user[:last_active].strftime('%H:%M:%S UTC') %>
    <% if @trusts_me.include?(user[:username]) %>

  • <%= user[:username] %>
    (password: <%= user[:password] %>, last active <%= last_active %>)
  • Issue

    The level 4 web application lets you transfer karma to another user and in doing so you are also forced to expose your password to that user. The main user page displays a list of users who have transfered karma to you along with their password. The password is not HTML encoded so we can inject HTML into that user's browser. For instance, we could create an account with the following HTML as the password which will result in XSS with that HTML:

    This HTML runs script that uses jQuery to post to the transfer URI resulting in a transfer of karma from the attacked user to the attacker user, and also the attacked user's password.


    Code review red flags in this case included lack of encoding when using user controlled content to create HTML content, storing passwords in plain text in the database, and displaying passwords generally. By design the web app shows users passwords which is a very bad idea.

    Level 6



    def self.safe_insert(table, key_values)
    key_values.each do |key, value|
    # Just in case people try to exfiltrate
    # level07-password-holder's password
    if value.kind_of?(String) &&
    (value.include?('"') || value.include?("'"))
    raise "Value has unsafe characters"



    This web app does a much better job than the level 4 app with HTML injection. They use encoding whenever creating HTML using user controlled data, however they don't use encoding when injecting JSON data into script (see post_data initialization above). This JSON data is the last five most recent messages sent on the app so we get to inject script directly. However, the system also ensures that no strings we write contains single or double quotes so we can't get out of the string in the JSON data directly. As it turns out, HTML lets you jump out of a script block using no matter where you are in script. For instance, in the middle of a value in some JSON data we can jump out of script. But we still want to run script, so we can jump right back in. So the frame so far for the message we're going to post is the following:

PermalinkCommentscsrf encoding html internet javascript percent-encoding script security stripe-ctf technical web xss

SkullSecurity » Blog Archive » Stuffing Javascript into DNS names

2012 Aug 27, 4:25

dnsxss tool helps you inject via DNS

…what it does is, essentially, respond to DNS requests for CNAME, MX, TXT, and NS records with Javascript code. … how about SQL injection?

PermalinkCommentssecurity technical javascript dns sql

Brainfuck beware: JavaScript is after you! | Patricio Palladino

2012 Aug 10, 10:18

“tl;dr I just made a tool to transform any javascript code into an equivalent sequence of ()[]{}!+ characters. You can try it here, or grab it from github or npm. Keep on reading if you want to know how it works.”

JavaScript has some crazy implicit casts.

PermalinkCommentstechnical humor programming javascript obfuscation


2012 Jun 22, 9:19

jQuery plugin that blindly removes lines with errors and recompiles until it works  

PermalinkCommentstechnical humor javascript programming coding jquery

Web Intents

2012 Jun 15, 8:05

This page is a high-level overview of the project and provides guidence on how to implement the intents in your applications without the need for the you to understand the entire spec.

PermalinkCommentstechnical programming web web-intents html javascript

Working with files in JavaScript, Part 5: Blobs

2012 Jun 5, 4:13

How to create Blobs directly and via BlobBuilder.

PermalinkCommentsblob javascript programming technical web web-browser

Line Simplification

2012 Jun 3, 12:47

Neat demo of Visvalingam’s line simplification algorithm in JavaScript applied to a map of the US.

To simplify geometry to suit the displayed resolution, various line simplification algorithms exist. While Douglas–Peucker is the most well-known, Visvalingam’s algorithm may be more effective and has a remarkably intuitive explanation: it progressively removes points with the least-perceptible change.

PermalinkCommentsline-simplification demo technical javascript

Code: Flickr Developer Blog » Parsing Exif client-side using JavaScript

2012 Jun 1, 2:51

Flickr parses the exif out of images using Web Workers, and Blob (File API)!

PermalinkCommentsjavascript blob exif image technical programming dom webworker web-browser

Working with files in JavaScript, Part 4: Object URLs

2012 Jun 1, 2:50

On the topic of blobs and createObjectURL.  Woo blobs!

PermalinkCommentsjavascript blob dom web-browser technical programming

Clippy.JS - Add Clippy and friends to any website (

2012 May 29, 6:15

A great JS API to add Clippy or other agents to your website!  Make them talk, dance, gesture, etc

PermalinkCommentshumor microsoft js javascript web

PowerShell Equivalents for JavaScript Array Functions

2012 May 15, 3:30


input | %{ expression($_) }
input | %{ [void]expression($_) }
input | ?{ expression($_) }

Close to built-in

if (input | ?{ expression($_) }) { ... }
if (-not input | ?{ !expression($_) }) { ... }
[array]::lastIndexOf(input, value)

Write it yourself

function reduce($fn, $a, $init) { $s = $init; $a | %{ $s = &$fn $s $_; }; $s; }
PermalinkCommentsjavascript powershell array technical

The Lazy Man's URL Parsing (

2012 May 7, 12:41

Web apps really make obvious the lack of URI APIs in the DOM or JavaScript.  This blog post goes over using DOM API side effects to resolve relative URIs and parse URIs.  An additonal benefit of this mechanism is that you avoid security issues caused by mismatched behavior between the browser’s URI parsing and your app’s URI parsing.

PermalinkCommentstechnical uri api dom browser hack url web-browser

Raising the bar on web uploads

2012 Apr 25, 5:00

Flickr’s new HTML5-ish photo upload feature technical overview.

PermalinkCommentstechnical html html5 javascript css3 css flickr file-upload


2012 Apr 20, 3:38

Web app for making diagrams like Visio.  Export your results as SVG, PNG, PDF and others.

PermalinkCommentstechnical diagram web-app javascript web visio svg

JavaScript in JavaScript (js.js): smaller, faster, and with demos (

2012 Apr 19, 3:36

Unlike Inception, running a JS engine in a JS engine does not make the inner JS engine go faster.

PermalinkCommentstechnical javascript programming interpretter

Image Error Level Analysis with HTML5

2012 Apr 16, 1:59

Javascript tool says if a photo is shopped. It can tell by looking at the pixels. Seriously. Links to cool presentation on the theory behind the algorithm behind the tool:

PermalinkCommentstechnical javascript jpeg photoshop
Older EntriesNewer Entries Creative Commons License Some rights reserved.