javascript - Dave's Blog


Search

Tweet from David_Risney

Feb 1, 10:44
Chakra conversions between JavaScript objects and WinRT types: http://deletethis.net/dave/?uri=http%3A%2F%2Fdavescoolblog.blogspot.com%2F2016%2F01%2Fjavascript-types-and-winrt-types.html โ€ฆ I've just updated to note how IPropertySet works.
PermalinkComments

Unicode Clock

Jan 24, 2:00

I've made a Unicode Clock in JavaScript.

Unicode has code points for all 30 minute increments of clock faces. This is a simple project to display the one closest to the current time written in JavaScript.

Because the code points are all above 0xFFFF, I make use of some ES6 additions. I use the \u{XXXXXX} style escape sequence since the old style JavaScript escape sequence \uXXXX only supports code points up to 0xFFFF. I also use the method String.codePointAt rather than String.charCodeAt because the code points larger than 0xFFFF are represented in JavaScript strings using surrogate pairs and charCodeAt gives the surrogate value rather than codePointAt which gives the code point represented by the pair of surrogates.

"๐Ÿ•›".codePointAt(0)
128347
"๐Ÿ•›".charCodeAt(0)
55357

๐Ÿ•๐Ÿ•‘๐Ÿ•’๐Ÿ•“๐Ÿ•”๐Ÿ••๐Ÿ•–๐Ÿ•—๐Ÿ•˜๐Ÿ•™๐Ÿ•š๐Ÿ•›๐Ÿ•œ๐Ÿ•๐Ÿ•ž๐Ÿ•Ÿ๐Ÿ• ๐Ÿ•ก๐Ÿ•ข๐Ÿ•ฃ๐Ÿ•ค๐Ÿ•ฅ๐Ÿ•ฆ๐Ÿ•ง

The ordering of the code points does not make it simple to do this. I initially guessed the first code point in the range would be 12:00 followed by 12:30, 1:00 and so on. But actually 1:00 is first followed by all the on the hour times then all the half hour times.

PermalinkCommentsjavascript Unicode

JavaScript Types and WinRT Types

Jan 21, 5:35

MSDN covers the topic of JavaScript and WinRT type conversions provided by Chakra (JavaScript Representation of Windows Runtime Types and Considerations when Using the Windows Runtime API), but for the questions I get about it Iโ€™ll try to lay out some specifics of that discussion more plainly. Iโ€™ve made a TL;DR JavaScript types and WinRT types summary table.

WinRT Conversion JavaScript
Struct โ†”๏ธ JavaScript object with matching property names
Class or interface instance โžก JavaScript object with matching property names
Windows.Foundation.Collections.IPropertySet โžก JavaScript object with arbitrary property names
Any โƒ  DOM object

Chakra, the JavaScript engine powering the Edge browser and JavaScript Windows Store apps, does the work to project WinRT into JavaScript. It is responsible for, among other things, converting back and forth between JavaScript types and WinRT types. Some basics are intuitive, like a JavaScript string is converted back and forth with WinRTโ€™s string representation. For other basic types check out the MSDN links at the top of the page. For structs, interface instances, class instances, and objects things are more complicated.

A struct, class instance, or interface instance in WinRT is projected into JavaScript as a JavaScript object with corresponding property names and values. This JavaScript object representation of a WinRT type can be passed into other WinRT APIs that take the same underlying type as a parameter. This JavaScript object is special in that Chakra keeps a reference to the underlying WinRT object and so it can be reused with other WinRT APIs.

However, if you start with plain JavaScript objects and want to interact with WinRT APIs that take non-basic WinRT types, your options are less plentiful. You can use a plain JavaScript object as a WinRT struct, so long as the property names on the JavaScript object match the WinRT structโ€™s. Chakra will implicitly create an instance of the WinRT struct for you when you call a WinRT method that takes that WinRT struct as a parameter and fill in the WinRT structโ€™s values with the values from the corresponding properties on your JavaScript object.

// C# WinRT component
public struct ExampleStruct
{
public string String;
public int Int;
}

public sealed class ExampleStructContainer
{
ExampleStruct value;
public void Set(ExampleStruct value)
{
this.value = value;
}

public ExampleStruct Get()
{
return this.value;
}
}

// JS code
var structContainer = new ExampleWinRTComponent.ExampleNamespace.ExampleStructContainer();
structContainer.set({ string: "abc", int: 123 });
console.log("structContainer.get(): " + JSON.stringify(structContainer.get()));
// structContainer.get(): {"string":"abc","int":123}

You cannot have a plain JavaScript object and use it as a WinRT class instance or WinRT interface instance. Chakra does not provide such a conversion even with ES6 classes.

You cannot take a JavaScript object with arbitrary property names that are unknown at compile time and donโ€™t correspond to a specific WinRT struct and pass that into a WinRT method. If you need to do this, you have to write additional JavaScript code to explicitly convert your arbitrary JavaScript object into an array of property name and value pairs or something else that could be represented in WinRT.

However, the other direction you can do. An instance of a Windows.Foundation.Collections.IPropertySet implementation in WinRT is projected into JavaScript as a JavaScript object with property names and values corresponding to the key and value pairs in the IPropertySet. In this way you can project a WinRT object as a JavaScript object with arbitrary property names and types. But again, the reverse is not possible. Chakra will not convert an arbitrary JavaScript object into an IPropertySet.

// C# WinRT component
public sealed class PropertySetContainer
{
private Windows.Foundation.Collections.IPropertySet otherValue = null;

public Windows.Foundation.Collections.IPropertySet other
{
get
{
return otherValue;
}
set
{
otherValue = value;
}
}
}

public sealed class PropertySet : Windows.Foundation.Collections.IPropertySet
{
private IDictionary map = new Dictionary();

public PropertySet()
{
map.Add("abc", "def");
map.Add("ghi", "jkl");
map.Add("mno", "pqr");
}
// ... rest of PropertySet implementation is simple wrapper around the map member.


// JS code
var propertySet = new ExampleWinRTComponent.ExampleNamespace.PropertySet();
console.log("propertySet: " + JSON.stringify(propertySet));
// propertySet: {"abc":"def","ghi":"jkl","mno":"pqr"}

var propertySetContainer = new ExampleWinRTComponent.ExampleNamespace.PropertySetContainer();
propertySetContainer.other = propertySet;
console.log("propertySetContainer.other: " + JSON.stringify(propertySetContainer.other));
// propertySetContainer.other: {"abc":"def","ghi":"jkl","mno":"pqr"}

try {
propertySetContainer.other = { "123": "456", "789": "012" };
}
catch (e) {
console.error("Error setting propertySetContainer.other: " + e);
// Error setting propertySetContainer.other: TypeError: Type mismatch
}

Thereโ€™s also no way to implicitly convert a DOM object into a WinRT type. If you want to write third party WinRT code that interacts with the DOM, you must do so indirectly and explicitly in JavaScript code that is interacting with your third party WinRT. Youโ€™ll have to extract the information you want from your DOM objects to pass into WinRT methods and similarly have to pass messages out from WinRT that say what actions the JavaScript should perform on the DOM.

PermalinkCommentschakra development javascript winrt

Retweet of windowsblog

2015 Dec 4, 5:23
Microsoft Edgeโ€™s JavaScript engine to go open-source http://bit.ly/1XQB7BV 
PermalinkComments

Retweet of igrigorik

2015 Jul 26, 2:43
writing Promise-using API's: http://bit.ly/1KsMQ7X  - must read for all JavaScript and spec developers alike.
PermalinkComments

Retweet of bhalp1

2015 Mar 19, 6:57
Sometimes when I'm writing Javascript I want to throw up my hands and say "this is bullshit!" but I can never remember what "this" refers to
PermalinkComments

Tweet from David_Risney

2015 Mar 8, 6:11
Bi-monthly reminder that neither of JavaScript's equality operators (== and ===) are reflexive. http://dorey.github.io/JavaScript-Equality-Table/ โ€ฆ
PermalinkComments

Tweet from David_Risney

2015 Feb 16, 5:55
Issues with "be liberal in what you accept": "@manisha72617183: Because JavaScript! pic.twitter.com/CPCg6xxulF"
PermalinkComments

Retweet of JustRogDigiTec

2015 Feb 13, 6:54
Still on the fence if this is good for the web. Love the progress!! โ€œ@shanselman: Flash isn't dead. It's undead. http://www.hanselman.com/blog/JavaScriptHasWonRunFlashWithMozillaShumwayAndDevelopSilverlightInJSWithFayde.aspx โ€ฆโ€
PermalinkComments

Live coding in VR with the Oculus Rift, Firefox WebVR,...

2014 Oct 6, 2:45


Live coding in VR with the Oculus Rift, Firefox WebVR, JavaScript and Three.js

โ€œI built a live-coding web app for the Oculus Rift where you code in JavaScript using Three.js and watch the world change around you in real-time.โ€

PermalinkCommentsvideo programming javascript 3d vr oculus-rift technical

JS NICE: Statistical renaming, Type inference and Deobfuscation

2014 Jun 3, 9:36

JS NICE | Software Reliability Lab in ETH

JS NICE has indexed over 10,000 JavaScript projects from GitHub and then probabilistically infers newly suggested names and types for all of the local variables and function parameters of new JS.

PermalinkCommentstechnical javascript js coding

Cloud Share - New App

2014 May 23, 4:06

I've put a new app on the Windows Store: Cloud Share. It connects the web to your Windows 8 share charm.

I did the development on GitHub and quite enjoyed myself. I wasn't sure I liked the game-ification of development in GitHub's dashboard showing you your longest development streak in days. However I realized that it encourages me to do work on my personal project and anything that aids in holding my attention on and helping me finish these projects is a good thing.

PermalinkCommentsdevelopment github javascript JS technical windows

Debugging anecdote - the color transparent black breaks accessibility

2014 May 22, 10:36

Some time back while I was working on getting the Javascript Windows Store app platform running on Windows Phone (now available on the last Windows Phone release!) I had an interesting bug that in retrospect is amusing.

I had just finished a work item to get accessibility working for JS WinPhone apps when I got a new bug: With some set of JS apps, accessibility appeared to be totally broken. At that time in development the only mechanism we had to test accessibility was a test tool that runs on the PC, connects to the phone, and dumps out the accessibility tree of whatever app is running on the phone. In this bug, the tool would spin for a while and then timeout with an error and no accessibility information.

My first thought was this was an issue in my new accessibility code. However, debugging with breakpoints on my code I could see none of my code was run nor the code that should call it. The code that called that code was a more generic messaging system that hit my breakpoints constantly.

Rather than trying to work backward from the failure point, I decided to try and narrow down the repro and work forwards from there. One thing all the apps with the bug had in common was their usage of WinJS, but not all WinJS apps demonstrated the issue. Using a binary search approach on one such app I removed unrelated app code until all that was left was the app's usage of the WinJS AppBar and the bug still occurred. I replaced the WinJS AppBar usage with direct usage of the underlying AppBar WinRT APIs and continued.

Only some calls to the AppBar WinRT object produced the issue:

        var appBar = Windows.UI.WebUI.Core.WebUICommandBar.getForCurrentView(); 
// appBar.opacity = 1;
// appBar.closeDisplayMode = Windows.UI.WebUI.Core.WebUICommandBarClosedDisplayMode.default;
appBar.backgroundColor = Windows.UI.Colors.white; // Bug!
Just setting the background color appeared to cause the issue and I didn't even have to display the AppBar. Through additional trial and error I was blown away to discover that some colors I would set caused the issue and other colors did not. Black wouldn't cause the issue but transparent black would. So would aqua but not white.

I eventually realized that predefined WinRT color values like Windows.UI.Colors.aqua would cause the issue while JS literal based colors didn't cause the issue (Windows.UI.Color is a WinRT struct which projects in JS as a JS literal object with the struct members as JS object properties so its easy to write something like {r: 0, g: 0, b: 0, a: 0} to make a color) and I had been mixing both in my tests without realizing there would be a difference. I debugged into the backgroundColor property setter that consumed the WinRT color struct to see what was different between Windows.UI.Colors.black and {a: 1, r: 0, g: 0, b: 0} and found the two structs to be byte wise exactly the same.

On a hunch I tried my test app with only a reference to the color and otherwise no interaction with the AppBar and not doing anything with the actual reference to the color: Windows.UI.Colors.black;. This too caused the issue. I knew that the implementation for these WinRT const values live in a DLL and guessed that something in the code to create these predefined colors was causing the issue. I debugged in and no luck. Now I also have experienced crusty code that would do exciting things in its DllMain, the function that's called when a DLL is loaded into the process so I tried modifying my C++ code to simply LoadLibrary the DLL containing the WinRT color definition, windows.ui.xaml.dll and found the bug still occurred! A short lived moment of relief as the world seemed to make sense again.

Debugging into DllMain nothing interesting happened. There were interesting calls in there to be sure, but all of them behind conditions that were false. I was again stumped. On another hunch I tried renaming the DLL and only LoadLibrary'ing it and the bug went away. I took a different DLL renamed it windows.ui.xaml.dll and tried LoadLibrary'ing that and the bug came back. Just the name of the DLL was causing the issue.

I searched for the DLL name in our source code index and found hits in the accessibility tool. Grinning I opened the source to find that the accessibility tool's phone side service was trying to determine if a process belonged to a XAML app or not because XAML apps had a different accessibility contract. It did this by checking to see if windows.ui.xaml.dll was loaded in the target process.

At this point I got to fix my main issue and open several new bugs for the variety of problems I had just run into. This is a how to on writing software that is difficult to debug.

PermalinkCommentsbug debug javascript JS technical windows winrt

Creating type-safe properties with ECMAScript 6 proxies | NCZOnline

2014 Apr 30, 9:12

Clearly the one JS feature we all agree on is ubiquity.

After some experimentation, I discovered that itโ€™s possible to add type safety to JavaScript objects [via ES6 proxies] with just a few lines of code.

PermalinkCommentstechnical javascript es6 proxies

Internet Archive lets you play one of the earliest computer...

2014 Apr 28, 9:39


Internet Archive lets you play one of the earliest computer games Space War! emulated in JavaScript in the browser.

This entry covers the historical context of Space War!, and instructions for working with our in-browser emulator. The system doesnโ€™t require installed plugins (although a more powerful machine and recent browser version is suggested).

The JSMESS emulator (a conversion of the larger MESS project) also contains a real-time portrayal of the lights and switches of a Digital PDP-1, as well as links to documentation and manuals for this $800,000 (2014 dollars) minicomputer.

PermalinkCommentscomputer-game game video-game history internet-archive

Untrusted - a user javascript adventure game

2014 Apr 8, 6:53

The game is to figure out what constrained modifications you must make to beat the game.

PermalinkCommentstechnical programming javascript game

Promises/A+

2013 Dec 17, 9:03

What is good and common of all JS promise designs collected as Promises/A+

Promises/A+

An open standard for sound, interoperable JavaScript promisesโ€”by implementers, for implementers.

PermalinkCommentstechnical javascript

JavaScript Promises: There and back again - HTML5 Rocks

2013 Dec 17, 9:02

The ES6 form of Promises.

PermalinkCommentstechnical javascript

harmony:generators [ES Wiki]

2013 Dec 17, 9:01

Adds the yield keyword enabling you to write JS code that sort of looks like C# await.

Overview

First-class coroutines, represented as objects encapsulating suspended execution contexts (i.e., function activations). Prior art: Python, Icon, Lua, Scheme, Smalltalk.

PermalinkCommentstechnical javascript

FitBit and WebOC Application Compatibility Errors

2013 Aug 29, 7:17
I just got a FitBit One from my wife. Unfortunately I had issues running their app on my Windows 8.1 Preview machine. But I recognized the errors as IE compatibility issues, for instance an IE dialog popup from the FitBit app telling me about an error in the app's JavaScript. Given my previous post on WebOC versioning you may guess what I tried next. I went into the registry and tried out different browser mode and document mode versions until I got the FitBit software running without error. Ultimately I found the following registry value to work well ('FitBit connect.exe' set to DWORD decimal 8888).
Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION]
"Fitbit Connect.exe"=dword:000022b8

For those familiar with the Windows registry the above should be enough. For those not familiar, copy and paste the above into notepad, save as a file named "fitbit.reg", and then double click the reg file and say 'Yes' to the prompt. Hopefully in the final release of Windows 8.1 this won't be an issue.
PermalinkComments
Older Entries Creative Commons License Some rights reserved.