center - Dave's Blog

Search

Win10 PWA Terminology

2018 May 31, 8:26

Folks familiar with JavaScript UWP apps in Win10 have often been confused by what PWAs in Win10 actually are. TLDR: PWAs in Win10 are simply JavaScript UWP apps. The main difference between these JS UWP Apps and our non-PWA JS UWP apps are our target end developer audience, and how we get Win10 PWAs into the Microsoft Store. See this Win10 blog post on PWAs on Win10 for related info.

Web App

On the web a subset of web sites are web apps. These are web sites that have app like behavior - that is a user might call it an app like Outlook, Maps or Gmail. And they may also have a W3C app manifest.

A subset of web apps are progressive web apps. Progressive web apps are web apps that have a W3C app manifest and a service worker. Various OSes are beginning to support PWAs as first class apps on their platform. This is true for Win10 as well in which PWAs are run as a WWA.

Windows Web App

In Win10 a WWA (Windows Web App) is an unofficial term for a JavaScript UWP app. These are UWP apps so they have an AppxManifest.xml, they are packaged in an Appx package, they run in an App Container, they use WinRT APIs, and are installed via the Microsoft Store. Specific to WWAs though, is that the AppxManifest.xml specifies a StartPage attribute identifying some HTML content to be used as the app. When the app is activated the OS will create a WWAHost.exe process that hosts the HTML content using the EdgeHtml rendering engine.

Packaged vs Hosted Web App

Within that we have a notion of a packaged web app and an HWA (hosted web app). There's no real technical distinction for the end developer between these two. The only real difference is whether the StartPage identifies remote HTML content on the web (HWA), or packaged HTML content from the app's appx package (packaged web app). An end developer may create an app that is a mix of these as well, with HTML content in the package and HTML content from the web. These terms are more like ends on a continuum and identifying two different developer scenarios since the underlying technical aspect is pretty much identical.

Win10 PWA

Win10 PWAs are simply HWAs that specify a StartPage of a URI for a PWA on the web. These are still JavaScript UWP apps with all the same behavior and abilities as other UWP apps. We have two ways of getting PWAs into the Microsoft Store as Win10 PWAs. The first is PWA Builder which is a tool that helps PWA end developers create and submit to the Microsoft Store a Win10 PWA appx package. The second is a crawler that runs over the web looking for PWAs which we convert and submit to the Store using an automated PWA Builder-like tool to create a Win10 PWA from PWAs on the web (see Welcoming PWAs to Win10 for more info). In both cases the conversion involves examining the PWAs W3C app manifest and producing a corresponding AppxManifest.xml. Not all features supported by AppxManifest.xml are also available in the W3c app manifest. But the result of PWA Builder can be a working starting point for end developers who can then update the AppxManifest.xml as they like to support features like share targets or others not available in W3C app manifests.

PermalinkCommentsJS pwa uwp web

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

4 people are living in an isolated habitat for 30 days. Why? Science!

2016 Feb 1, 3:27

nasa:

This 30 day mission will help our researchers learn how isolation and close quarters affect individual and group behavior. This study at our Johnson Space Center prepares us for long duration space missions, like a trip to an asteroid or even to Mars.

image

The Human Research Exploration Analog (HERA) that the crew members will be living in is one compact, science-making house. But unlike in a normal house, these inhabitants won’t go outside for 30 days. Their communication with the rest of planet Earth will also be very limited, and they won’t have any access to internet. So no checking social media kids!

The only people they will talk with regularly are mission control and each other.

image

The crew member selection process is based on a number of criteria, including the same criteria for astronaut selection.

What will they be doing?

Because this mission simulates a 715-day journey to a Near-Earth asteroid, the four crew members will complete activities similar to what would happen during an outbound transit, on location at the asteroid, and the return transit phases of a mission (just in a bit of an accelerated timeframe). This simulation means that even when communicating with mission control, there will be a delay on all communications ranging from 1 to 10 minutes each way. The crew will also perform virtual spacewalk missions once they reach their destination, where they will inspect the asteroid and collect samples from it. 

A few other details:

  • The crew follows a timeline that is similar to one used for the ISS crew.
  • They work 16 hours a day, Monday through Friday. This includes time for daily planning, conferences, meals and exercises.  
  • They will be growing and taking care of plants and brine shrimp, which they will analyze and document.

But beware! While we do all we can to avoid crises during missions, crews need to be able to respond in the event of an emergency. The HERA crew will conduct a couple of emergency scenario simulations, including one that will require them to maneuver through a debris field during the Earth-bound phase of the mission. 

image

Throughout the mission, researchers will gather information about cohabitation, teamwork, team cohesion, mood, performance and overall well-being. The crew members will be tracked by numerous devices that each capture different types of data.

image

Past HERA crew members wore a sensor that recorded heart rate, distance, motion and sound intensity. When crew members were working together, the sensor would also record their proximity as well, helping investigators learn about team cohesion.

Researchers also learned about how crew members react to stress by recording and analyzing verbal interactions and by analyzing “markers” in blood and saliva samples.

image

In total, this mission will include 19 individual investigations across key human research elements. From psychological to physiological experiments, the crew members will help prepare us for future missions.

Make sure to follow us on Tumblr for your regular dose of space: http://nasa.tumblr.com

PermalinkComments

4 people are living in an isolated habitat for 30 days. Why? Science!

2016 Feb 1, 3:27

nasa:

This 30 day mission will help our researchers learn how isolation and close quarters affect individual and group behavior. This study at our Johnson Space Center prepares us for long duration space missions, like a trip to an asteroid or even to Mars.

image

The Human Research Exploration Analog (HERA) that the crew members will be living in is one compact, science-making house. But unlike in a normal house, these inhabitants won’t go outside for 30 days. Their communication with the rest of planet Earth will also be very limited, and they won’t have any access to internet. So no checking social media kids!

The only people they will talk with regularly are mission control and each other.

image

The crew member selection process is based on a number of criteria, including the same criteria for astronaut selection.

What will they be doing?

Because this mission simulates a 715-day journey to a Near-Earth asteroid, the four crew members will complete activities similar to what would happen during an outbound transit, on location at the asteroid, and the return transit phases of a mission (just in a bit of an accelerated timeframe). This simulation means that even when communicating with mission control, there will be a delay on all communications ranging from 1 to 10 minutes each way. The crew will also perform virtual spacewalk missions once they reach their destination, where they will inspect the asteroid and collect samples from it. 

A few other details:

  • The crew follows a timeline that is similar to one used for the ISS crew.
  • They work 16 hours a day, Monday through Friday. This includes time for daily planning, conferences, meals and exercises.  
  • They will be growing and taking care of plants and brine shrimp, which they will analyze and document.

But beware! While we do all we can to avoid crises during missions, crews need to be able to respond in the event of an emergency. The HERA crew will conduct a couple of emergency scenario simulations, including one that will require them to maneuver through a debris field during the Earth-bound phase of the mission. 

image

Throughout the mission, researchers will gather information about cohabitation, teamwork, team cohesion, mood, performance and overall well-being. The crew members will be tracked by numerous devices that each capture different types of data.

image

Past HERA crew members wore a sensor that recorded heart rate, distance, motion and sound intensity. When crew members were working together, the sensor would also record their proximity as well, helping investigators learn about team cohesion.

Researchers also learned about how crew members react to stress by recording and analyzing verbal interactions and by analyzing “markers” in blood and saliva samples.

image

In total, this mission will include 19 individual investigations across key human research elements. From psychological to physiological experiments, the crew members will help prepare us for future missions.

Make sure to follow us on Tumblr for your regular dose of space: http://nasa.tumblr.com

PermalinkComments

Retweet of NSA_PR

2015 Apr 1, 2:23
#FreeSnowden #WithThePurchaseOfAMediumOrLargeDataCenter
PermalinkComments

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

THE FIFTY-NINE-STORY CRISIS, The New Yorker, 5/29/95, pp 45-53

2011 Jun 5, 4:56"What's an engineer's worst nightmare? To realize that the supports he designed for a skyscraper like Citicorp Center are flawed---and hurricane season is approaching."PermalinkCommentsarticle history design business engineering

Multi-Stream Tuner Cards by Ceton

2010 Dec 8, 5:43This that lets your PC read four digital encrypted cable signals at once with a cable card from you cable company. This is cool although expensive. What frustrates me is the lack of choices in this area.PermalinkCommentscable cablecard hardware pc technical mediacenter

Hulu Desktop Integration Brings Hulu to Windows 7 Media Center

2010 Sep 25, 7:46PermalinkCommentswmc hulu win7 windows7 media television tv video

DVD Ripping and Viewing in Windows Media Center

2010 Aug 17, 3:05

I've just got a new media center PC connected directly to my television with lots of HD space and so I'm ripping a bunch of my DVDs to the PC so I don't have to fuss with the physical media. I'm ripping with DVD Rip, viewing the results in Windows 7's Windows Media Center after turning on the WMC DVD Library, and using a powershell script I wrote to copy over cover art and metadata.

My powershell script follows. To use it you must do the following:

  1. Run Windows Media Center with the DVD in the drive and view the disc's metadata info.
  2. Rip each DVD to its own subdirectory of a common directory.
  3. The name of the subdirectory to which the DVD is ripped must have the same name as the DVD name in the metadata. An exception to this are characters that aren't allowed in Windows paths (e.g. <, >, ?, *, etc)
  4. Run the script and pass the path to the common directory containing the DVD rips as the first parameter.
Running WMC and viewing the DVD's metadata forces WMC to copy the metadata off the Internet and cache it locally. After playing with Fiddler and reading this blog post on WMC metadata I made the following script that copies metadata and cover art from the WMC cache to the corresponding DVD rip directory.

Download copydvdinfo.ps1

PermalinkCommentspowershell wmc technical tv dvd windows-media-center

iPhone Dev Center: iPhone Application Programming Guide: The Core Application Design

2010 Mar 11, 4:26The iPhone application lifecycle.PermalinkCommentsiphone apple development technical sdk reference

Methods of Watching TV

2010 Feb 3, 1:09If you've got cable, Internet, and Netflix you end up with a large number of TV viewing options. Its nice to have the options but is there some way to collect and summarize my available options at any one time?

TV PC
Comcast TV Xbox 360 + Windows Media Center Windows Media Center
Comcast OnDemand Cable box Fancast
Hulu Xbox 360 + PlayOn + Windows Media Center Hulu
Netflix Watch Instantly Xbox 360 + Netflix App Netflix Watch Instantly
Netflix DVDs Xbox 360 PC
PermalinkCommentstv xbox 360 wmc dvr

Safari Dev Center: Safari Client-Side Storage and Offline Applications Programming Guide: HTML 5 Offline Application Cache

2010 Jan 26, 1:47Details on Safari and iPhone's HTML5 offline app cache.PermalinkCommentshtml web technical html5 cache safari iphone

GameSetWatch - 15th Annual Interactive Fiction Competition Winners Announced

2009 Dec 11, 9:00"Organizers for the 15th Annual Interactive Fiction Competition (IFComp 2009), a contest centered around short text adventures lasting under two hours, recently announced this year's winners: Rover's Day Out, Broken Legs, and Snowquest."PermalinkCommentsif interactive-fiction game fiction text

Latest ‘Square’ Details Include Free Dongles, Craigslist, Alyssa Milano | Epicenter | Wired.com

2009 Dec 7, 3:25Cool, I've been waiting for this: "Twitter creator Jack Dorsey’s Square application, which is like a smartphone PayPal for credit cards, attracted lots of warranted attention for its potential to enable peer-to-peer and merchant credit card transactions in the real world far beyond what’s capable today in most countries." Oh, never mind... "As a customer, all you need to buy from a Square merchant is a credit, debit or pre-paid card"PermalinkCommentscredit-card money via:louis cellphone square

Comcast Digital Switch Impact on My Windows Media Center

2009 Sep 25, 2:19

Amateur wireless station (LOC)Irritatingly out of line with what their commercials say, in my area Comcast, under the covers of the national broadcast digital switch, is sneaking in their own switch to digital, moving channels above 30 to their own digital format. Previously, I had Windows 7 Media Center running on a PC with a Hauppauge PVR500 which can decode two television signals at once setup to record shows I like. The XBox 360 works great as a Media Center client letting me easily watch the recorded shows over my home network on my normal TV.

Unfortunately with Comcast's change, now one needs a cable box or a Comcast digital to analog converter in order to view their signal, but Comcast is offering up to two free converters for those who'd like them. The second of my two free converters I hooked up to the Media Center PC and I got the IR Blaster that came with my Hauppauge out of the garage. I plugged in the USB IR Blaster to my PC, connected one of the IR transmitters to the 1st port on the IR Blaster, and sat the IR transmitter next to the converter's IR receiver. I went through the Media Center TV setup again and happily it was able to figure out how to correctly change the channel on the converter. So I can record now, however:

  1. I can only record one thing at a time now
  2. Changing the channel is slow taking many seconds (no flipping through channels for me)
  3. The Hauppauge card can't know if the channel change worked. So if it tries to change to HBO (I get it for free with one of the Comcast packages) which is encrypted and the converted won't show, the channel doesn't change but the PC doesn't know it and ends up recording some other channel.
To fix (3) I need to manually go through and remove channels I don't have from the Media Center. To fix (1) I may be able to get a second IR transmitter, a third digital converter, hook it up to one of the other inputs on my Hauppauge, and go back through the Media Center TV setup. There's no fix for (2) but that's not so bad. All in all, its just generally frustrating that they're breaking my setup with no obvious benefit.PermalinkCommentsdigital tv hauppauge mce cable windows media center comcast

Brier Dudley's blog | More on Comcast digital: TiVos, Media Centers, HD ...

2009 Sep 20, 10:44Grumble grumble...PermalinkCommentscomcast digital cable windows mediacenter tv television tivo

CableCARD now a go for homebrew home theater PCs - Ars Technica

2009 Sep 10, 5:52Just in time for Comcast switching channels above 30 to digital only. My current Windows Media Center setup will not function soon. How much do you think I'm going to have to spend to get it working now...PermalinkCommentscablecard cable tv windows mediacenter media technical

Kid Robot’s QR Code Scavenger Hunt - PSFK

2009 Sep 1, 4:59"...toy and apparel designers Kid Robot (with the help of creative ideas studio We Are Plus) have organized a mobile phone-based scavenger hunt in Manhattan centered around scanning QR codes."PermalinkCommentsqrcode phone scavenger-hunt toy advertising

You Deleted Your Cookies? Think Again | Epicenter | Wired.com

2009 Aug 17, 8:37Info on Flash cookies, US Govt websites cookie use, possible US Govt regulations on privacy/tracking users, plus a great zombie photo.PermalinkCommentszombie flash cookie wired privacy internet web browser politics government advertising google technical
Older Entries Creative Commons License Some rights reserved.