whole - Dave's Blog

Search
My timeline on Mastodon

Tiny browser features: JSBrowser zoom

2018 May 10, 3:49

JSBrowser is a basic browser built as a Win10 JavaScript UWP app around the WebView HTML element. Its fun and relatively simple to implement tiny browser features in JavaScript and in this post I'm implementing zoom.

My plan to implement zoom is to add a zoom slider to the settings div that controls the scale of the WebView element via CSS transform. My resulting zoom change is in git and you can try the whole thing out in my JSBrowser fork.

Slider

I can implement the zoom settings slider as a range type input HTML element. This conveniently provides me a min, max, and step property and suits exactly my purposes. I chose some values that I thought would be reasonable so the browser can scale between half to 3x by increments of one quarter. This is a tiny browser feature after all so there's no custom zoom entry.

<a><label for="webviewZoom">Zoom</label><input type="range" min="50" max="300" step="25" value="100" id="webviewZoom" /></a>

To let the user know this slider is for controlling zoom, I make a label HTML element that says Zoom. The label HTML element has a for attribute which takes the id of another HTML element. This lets the browser know what the label is labelling and lets the browser do things like when the label is clicked to put focus on the slider.

Scale

There are no explicit scale APIs for WebView so to change the size of the content in the WebView we use CSS.

        this.applyWebviewZoom = state => {
const minValue = this.webviewZoom.getAttribute("min");
const maxValue = this.webviewZoom.getAttribute("max");
const scaleValue = Math.max(Math.min(parseInt(this.webviewZoom.value, 10), maxValue), minValue) / 100;

// Use setAttribute so they all change together to avoid weird visual glitches
this.webview.setAttribute("style", [
["width", (100 / scaleValue) + "%"],
["height", "calc(" + (-40 / scaleValue) + "px + " + (100 / scaleValue) + "%)"],
["transform", "scale(" + scaleValue + ")"]
].map(pair => pair[0] + ": " + pair[1]).join("; "));
};

Because the user changes the scale at runtime I accordingly replace the static CSS for the WebView element with the script above to programmatically modify the style of the WebView. I change the style with one setAttribute call to do my best to avoid the browser performing unnecessary work or displaying the WebView in an intermediate and incomplete state. Applying the scale to the element is as simple as adding 'transform: scale(X)' but then there are two interesting problems.

The first is that the size of the WebView is also scaled not just the content within it. To keep the WebView the same effective size so that it still fits properly into our browser UI, we must compensate for the scale in the WebView width and height. Accordingly, you can see that we scale up by scaleValue and then in width and height we divide by the scaleValue.

transform-origin: 0% 0%;

The other issue is that by default the scale transform's origin is the center of the WebView element. This means when scaled up all sides of the WebView would expand out. But when modifying the width and height those apply relative to the upper left of the element so our inverse scale application to the width and height above aren't quite enough. We also have to change the origin of the scale transform to match the origin of the changes to the width and height.

PermalinkCommentsbrowser css-transform javascript JS jsbrowser uwp webview win10

Retweet of eastwes

2015 Dec 8, 7:07
Forget the $2M, this is easily the most interesting part of the whole deal between Wu-Tang and Martin Shkreli. pic.twitter.com/5nSshXhjnJ
PermalinkComments

Tweet from David_Risney

2015 Aug 26, 1:36
In season finale the big twist for Mr Robot will be that it was secretly the movie Fight Club the whole time.
PermalinkComments

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

Unicode Character Set Mappings

2012 Jun 11, 2:36

A leaf directory in a whole set of files that map from character set byte value to Unicode code point.  This one is a set of Microsoft character set byte mappings, but there are other vendors in there too.

PermalinkCommentstechnical unicode charset

The Blowholes - Summerbaby (Pete & Pete Reunion 2-24-12) (by...

2012 Mar 2, 4:48


The Blowholes - Summerbaby (Pete & Pete Reunion 2-24-12) (by matt00092)

Via http://www.avclub.com/articles/inside-the-adventures-of-pete-and-pete-reunion,70177/

PermalinkCommentsmusic pete-and-pete video

A whole Richard Feynman Talks collection by Brian Norgard...

2012 Feb 29, 10:19


A whole Richard Feynman Talks collection by Brian Norgard contains wonderful videos like this.

PermalinkCommentsrichard-feynman video science

URI Percent Encoding Ignorance Level 2 - There is no Unencoded URI

2012 Feb 20, 4:00

As a professional URI aficionado I deal with various levels of ignorance on URI percent-encoding (aka URI encoding, or URL escaping).

Getting into the more subtle levels of URI percent-encoding ignorance, folks try to apply their knowledge of percent-encoding to URIs as a whole producing the concepts escaped URIs and unescaped URIs. However there are no such things - URIs themselves aren't percent-encoded or decoded but rather contain characters that are percent-encoded or decoded. Applying percent-encoding or decoding to a URI as a whole produces a new and non-equivalent URI.

Instead of lingering on the incorrect concepts we'll just cover the correct ones: there's raw unencoded data, non-normal form URIs and normal form URIs. For example:

  1. http://example.com/%74%68%65%3F%70%61%74%68?query
  2. http://example.com/the%3Fpath?query
  3. "http", "example.com", "the?path", "query"

In the above (A) is not an 'encoded URI' but rather a non-normal form URI. The characters of 'the' and 'path' are percent-encoded but as unreserved characters specific in the RFC should not be encoded. In the normal form of the URI (B) the characters are decoded. But (B) is not a 'decoded URI' -- it still has an encoded '?' in it because that's a reserved character which by the RFC holds different meaning when appearing decoded versus encoded. Specifically in this case, it appears encoded which means it is data -- a literal '?' that appears as part of the path segment. This is as opposed to the decoded '?' that appears in the URI which is not part of the path but rather the delimiter to the query.

Usually when developers talk about decoding the URI what they really want is the raw data from the URI. The raw decoded data is (C) above. The only thing to note beyond what's covered already is that to obtain the decoded data one must parse the URI before percent decoding all percent-encoded octets.

Of course the exception here is when a URI is the raw data. In this case you must percent-encode the URI to have it appear in another URI. More on percent-encoding while constructing URIs later.

PermalinkCommentsurl encoding uri technical percent-encoding

Remember when they killed off Superman?  One of the guys behind...

2012 Feb 5, 12:37


Remember when they killed off Superman?  One of the guys behind Chronicle has made this video explaining that whole thing.  Kind of like Drunk History but less drunk and more nerdy (via Death and Return of Superman)

PermalinkCommentssuperman hero comic-book humor video

Copyright King: Why the "I Have a Dream" Speech Still Isn't Free (vice.com)

2012 Jan 17, 9:37

There’s weird stuff you’d think is public domain but isn’t including Martin Luther King Jr.‘s “I Have a Dream” speech. FTA: ”If you want to watch the whole thing, legally, you’ll need to get the $20 DVD.

That’s because the King estate, and, as of 2009, the British music publishing conglomerate EMI Publishing, owns the copyright of the speech and its recorded performance.”

PermalinkCommentscopyright mlk speech public-domain

Nintendo Game Maps

2011 Sep 28, 10:22They've got maps from your favorite NES games as giant images. I'm using SMB3 1-1 as my desktop background. I've got a four monitor setup now and so its tough to find desktop backgrounds but Mario levels easily cover my whole desktop.PermalinkCommentsgame videogame map nintendo nes

Junkyard Jumbotron: join all your screens into one big one, no software install needed - Boing Boing

2011 Mar 14, 4:30A web service to turn multiple web browsing devices into one larger screen. Panning and zooming on one screen (for phones) changes the whole picture.
PermalinkCommentsqrcode web video ui tv

Where's Walden? » Whole-text DOM functionality and Acid3 redux

2010 Mar 18, 7:15This article describes the largest problem with the Acid3 test: "Acid3 often didn’t test things web authors wanted, but instead it tested things that were broken or not implemented regardless whether anyone truly cared."PermalinkCommentsacid3 web browser html dom test technical

A Whole Lotta Nothing: This is kind of awesome

2010 Feb 22, 8:39Live webcast hall of mirrorsPermalinkCommentshumor video recursive fail webcast

Kempa.com » Absolutely surreal excerpt from a New Yorker profile of Vampire Weekend

2010 Jan 6, 1:58Tom DeLonge tries to sell Vampire Weekend a website. "...this whole thing reads like a scene from a modern-day Spinal Tap. Weird music industry insanity crossed with internet startup hucksterism with a dash of awkward standoffishness. I love it. All of this is heightened by the fact that BOTH parties are being followed by separate documentary film crews, who are filming the insanity. How weird is that?"PermalinkCommentsinternet music vampire-weekend band documentary via:waxy

Thanksgiving 2009

2009 Nov 29, 1:32

Pre Thanksgiving DinnerSarah and I had Thanksgiving dinner at our house the Sunday before. Sarah's parents and siblings came as well as my parents who came up for the a handful of days. It was our first time hosting Thanksgiving so I was a little nervous, but my parents helped us setup and get ready so of course it went well! I cheated a bit: I ordered a turkey online from Whole Foods where you can just tell them when you want to pick it up, they have it cooked and ready including garnish and you just need to warm it up. When we moved in together Sarah and I each had slightly different small dining room tables. Thankfully they're roughly the same height and width and we could put them together end to end and seat everybody with no room to spare. On actual Thanksgiving day we went over to Rachel & Anson's lovely new place for Thanksgiving and the annual game of Trivial Pursuit.

PermalinkCommentsturkey whole foods thanksgiving holiday

YouTube - JavaScript: The Good Parts

2009 Oct 28, 11:02"This session will expose the goodness in JavaScript, an outstanding dynamic programming language. Within the language is an elegant subset that is vastly superior to the language as a whole, being more reliable, readable and maintainable." Zeke recommended listening to his talks.PermalinkCommentsgoogle video technical douglas-crockford javascript programming presentation jslint web browser

Whole Earth Discipline: An Ecopragmatist Manifesto | Brain Pickings

2009 Oct 18, 2:23TED video of Stewart Brand: "The book tackles three of today’s most profound transformations — climate change, urbanization and biotechnology — in a way that’s part practical guide to damage control, part prescriptive inspiration for a more efficient society, part bold anthem of design-thinking. And if Brand’s track record is any sign at all, Whole Earth Discipline may well become one of the (counter)cultural classics of our generation."
PermalinkCommentsstewart-brand climate-change biology biotech urban ted video ecology

YouTube - Louis Vuitton "SUPERFLAT MONOGRAM"

2009 Jul 9, 10:53"...but the inside of his stomach is gateway to a psychadelic wonderland." Need I quote more? The whole thing made me think of a rather upbeat and trippy episode of Lain. Also, one of the repeating noises in the soundtrack made me think I was finishing a lap in Mario Kart.PermalinkCommentsvideo art ad commercial anime animation louis-vuitton superflat Takashi-Murakami cute psychadelic

"Your business card is CRAP!"

2009 Apr 20, 5:49PermalinkCommentshumor video via:boingboing viral business-card
Older Entries Creative Commons License Some rights reserved.