java page 3 - Dave's Blog

Search
My timeline on Mastodon

Percent Clcok Windows Store App Development Notes

2013 Jul 11, 1:00

My third completed Windows Store app is Percent Clock which displays portions of a time span like the time of the day or time until your next birthday, as a percentage. This was a small project I had previously started as a webpage and converted and finished as an HTML JavaScript Windows Store app.

The only somewhat interesting aspect of this app is that its the first app for which I tried charging. I picked the minimum amount for price 1.49 USD as it is a simple app and unsurprisingly it has sold very poorly. I'm considering releasing new instances of the app for specific scenarios:

  • Death Clock: viewing your current age with respect to your life expectancy as a percentage.
  • New Year Countdown: percentage of the year until New Years.
PermalinkCommentsdevelopment javascript technical windows windows-store

Words with Hints Windows 8 App Development Notes

2013 Jul 4, 1:00

My second completed app for the Windows Store was Words with Hints a companion to Words with Friends or other Scrabble like games that gives you *ahem* hints. You provide your tiles and optionally letters placed in a line on the board and Words with Hints gives you word options.

I wrote this the first time by building a regular expression to check against my dictionary of words which made for a slow app on the Surface. In subsequent release of the app I now spawn four web workers (one for each of the Surface's cores) each with its own fourth of my dictionary. Each fourth of the dictionary is a trie which makes it easy for me to discard whole chunks of possible combinations of Scrabble letters as I walk the tree of possibilities.

The dictionaries are large and takes a noticeable amount of time to load on the Surface. The best performing mechanism I found to load them is as JavaScript source files that simply define their portion of the dictionary on the global object and synchronously (only on the worker so not blocking the UI thread). Putting them into .js files means they take advantage of bytecode caching making them load faster. However because the data is mostly strings and not code there is a dramatic size increase when the app is installed. The total size of the four dictionary .js files is about 44Mb. The bytecode cache for the dictionary files is about double that 88Mb meaning the dictionary plus the bytecode cache is 132Mb.

To handle the bother of postMessage communication and web workers this was the first app in which I used my promise MessagePort project which I'll discuss more in the future.

This is the first app in which I used the Microsoft Ad SDK. It was difficult to find the install for the SDK and difficult to use their website, but once setup, the Ad SDK was easy to import into VS and easy to use in my app.

PermalinkCommentsdevelopment technical windows windows-store words-with-hints

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.clearData("Html");
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();
cursorPos.select();
}, 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

Code

> 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.

    Notes

    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

    Code

    
    

    ...

    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"
    end
    end

    conn[table].insert(key_values)
    end

    Issue

    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

FuckItJS

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 (smore.com)

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

Built-in

map
input | %{ expression($_) }
forEach
input | %{ [void]expression($_) }
filter
input | ?{ expression($_) }
indexOf
input.indexOf(value)

Close to built-in

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

Write it yourself

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

The Lazy Man's URL Parsing (joezimjs.com)

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

Diagramly

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
Older EntriesNewer Entries Creative Commons License Some rights reserved.