The First Windows 10 Bridge: Project Westminster

westminsterPosterImg_InvariantCulture_Default

Hello Developers!

We are nearing the official launch of Windows 10 and the pace of Build releases has been speeding up in the past month to the fast ring. Last week, 2 releases (Build 10159 and 10162). The developer SDK is catching up as well, and on July 1st Microsoft released a new Windows 10 SDK Preview and the associated Windows 10 Mobile emulators. This SDK is to be used in conjunction with Windows 10 Insider Preview (Build 10158). The new Preview SDK contains bug fixes and changes to the API surface area.  You can download it from the Windows 10 Developer Tools page.

Which means, you can develop apps for Windows 10 if you haven’t started yet. There is a great Microsoft Virtual Academy course, A Developer’s Guide to Windows 10 that can get you up to speed. Windows 10 will be an exciting release for developers, with support for Universal Windows apps that run across all Windows 10 devices. The SDK allows you to develop for Windows 10, but it isn’t the only way to run apps on Windows 10. At Build 2015, Microsoft announced 4 new ways to get apps into the Windows 10 Store. Developers can reuse their Web code, Windows desktop applications (.NET code), Android apps (Java and C++), and iOS apps (Objective C). Collectively, these 4 ways are called Universal Windows Platform Bridges. These platform bridges consist of a toolkit of three components: developer tools, Store ingestion processing, and Universal Windows Platform runtime frameworks.

The First Platform Bridge: Project Westminster

Yesterday, Microsoft released Project Westminster, the first of the Universal Windows Platform Bridges.  Project Westminster basically allows to leverage their existing web development workflow and publish their responsive websites to the Windows 10 Store as Windows apps. These published websites are called Hosted Web Apps, since the majority of the content is being served from the website.
This Platform bridge also makes it even easier to integrate a web app with Windows features like Cortana voice commands and authentication. Because, the platform capabilities are only available when the site is running as a Universal Windows Platform App in the App Host on Windows 10. The web app will not be able to call platform APIs when navigated to in Microsoft Edge or other browsers.

If you want to learn more details about this platform bridge, how it works and its capabilities you can check this blog post by the Windows Apps Team.

I will leave you with this short video on creating Hosted Web Apps with Project Westminster

Posted in Windows 10 Tagged with: ,

Check if your website is mobile friendly

Hola!

mobile-checkerToday, I came across a great tool for web developers! The tool is by W3C and called “The Mobile Checker“, it provides you with an emulation close to what your Web app looks like on different kinds of mobile devices, including tablets and smartphones. So, you can have a better idea on how mobile friendly your website is. This is critical, if you want your website to appear in search results on mobile devices, especially after Google and Bing started favoring mobile-friendly websites in their search results.
You want your website/web app to be relevant on the mobile devices, you gotta make sure it works better on mobile devices.

The Mobile Checker provides a new and helpful experience of mobile Web development. The project is available on GitHub and is still in Alpha at the time of writing, you can join and contribute https://github.com/w3c/Mobile-Checker

If you are curious about how it works, the Mobile Checker is a basically a JavaScript Web application built with Node.js and Selenium WebDriver. The tool uses the web browser emulator API and other powerful technologies to simulate a Web browser on a mobile device. The authors/founders claim that this tool contrary to most of the current online mobile emulators, can provide an emulation close to what your Web app looks like on different kinds of mobile devices, including tablets and smartphones.

Put it to the test and feel free to let me know how it compares to the emulator that is available through the browser developer tools on Microsoft Edge  and Chrome.

Cheers!

Posted in Web Development Tagged with:

How to run localhost websites on Microsoft Edge

Hello!
You might have already heard that Windows 10 will run Microsoft Edge an all-new browser that’s built to give you a better web experience. Microsoft Edge is the browser for the modern web. If you are developer you might be really interested in the Dev center for the new browser, you can check it on this link http://dev.modern.ie/. There you will find lots of tools and resources and you can also:

  • Check Platform Status
  • Test and debug your site with free tools
  • Explore Demos
  • View standards roadmap
  • Give feedback and suggest features
  • Get Support

Anyways, back to the main topic. How to run/debug a localhost website on Microsoft Edge. You most likely will run/debug a website locally on Edge since it the default Browser of Windows 10. Problem arises when you do so and you will have an error, something like the following screenshot(Build 10130):

 

This happens because Edge runs as a Windows modern app different from IE and thus it is has network isolation by default for security reasons. In order to resolve this issue, we need to enable loopback and debug the localhost server by running the following command from an elevated shell (which I found in the FAQs page on MSEdge Dev) :

For Build 10158 or newer:

CheckNetIsolation LoopbackExempt -a -n=Microsoft.MicrosoftEdge_8wekyb3d8bbwe

For previous builds:

CheckNetIsolation LoopbackExempt -a -n=Microsoft.Windows.Spartan_cw5n1h2txyewy

The previous command uses the App container name parameter “n“.

You can read more on loopback exemption and network isolation in Windows Runtime apps on this MSDN article.

Happy browsing!

Posted in Web Development Tagged with: ,

Microsoft Hololens to bring Science Fiction to Science Fact

HololensRover_0_1

Today I came across a great post by NASA, talking about their collaboration with Microsoft Hololens to develop Sidekick, a new project using commercial technology to empower astronauts aboard the International Space Station (ISS).

Project Sidekick will use Microsoft HoloLens to provide virtual aid to astronauts working off the Earth, for the Earth. NASA mentioned on their website that a pair of the devices is basically scheduled to launch on SpaceX’s seventh commercial resupply mission to the IS station on June 28. To test Sidekick, NASA and Microsoft engineers went on board NASA’s Weightless Wonder C9 jet.

HoloLens’s cutting edge technology could help drive future exploration and give new capabilities to the men and women conducting critical science missions on the International Space Station. It might even one day allow future explorers requiring greater autonomy on the journey to Mars.

In summary, Sidekick with its holographic computing aims at enabling station crews with support when and where needed. This new capability could reduce crew training requirements and increase the efficiency at which astronauts can work in space.

Aboard NASA’s Weightless Wonder C9 jet, the teams from both sides went on testing Project Sidekick and the Microsoft HoloLens to ensure they function as expected in free-fall, in advance of their delivery to the microgravity environment of the space station.

Reading the post by NASA, I learned that Sidekick has two modes of operation. The first is “Remote Expert Mode,” which uses Skype, product of Microsoft, to allow a ground operator to see what a crew member in space are seeing, provide real-time guidance, and draw annotations into the crew member’s environment to coach him or her through a task. Until now, crew members have relied on written and voice instructions when performing complex repair tasks or experiments. But Microsoft Hololens, can change of all of that and revolutionize it!

The second mode is “Procedure Mode,” where by it augments standalone procedures with animated holographic illustrations displayed on top of the objects with which the crew is interacting. This type of capability could actually reduce the amount of training that future crews will need and could be an invaluable resource for missions deep into our solar system, where communication delays complicate difficult operations.

It is an exciting journey and NASA expects that astronauts on the station will first use Sidekick by the end of the year.

Sidekick also will first be used very soon where it will be evaluated during the NASA Extreme Environment Mission Operations (NEEMO) 20 expedition set to begin July 21 when a group of astronauts and engineers live in the world’s only undersea research station, Aquarius, for two weeks. The Aquarius habitat and its surroundings offer a convincing analog for space exploration.

The Sidekick project is not the only collaboration between Microsoft and NASA, it is a part of a larger partnership between the two to explore applications of holographic computing in space exploration. Earlier this year, they announced a collaboration to develop software called OnSight, a new technology that will enable scientists to work virtually on Mars using the same HoloLens technology. NASA’s Jet Propulsion Laboratory (JPL) in Pasadena, California, led the development of Sidekick and OnSight. You can read more on the official post by NASA, here is the link to that post.

I will leave you with this cool video which shows members from Microsoft Hololnes team testing project Sidekick on board the Weightless Wonder C9 jet.

 

 

Posted in Uncategorized

VorlonJS remote debugging and testing tool for JavaScript

VorlonJS

Hello Developers!
Working with the web, there is a lot of heavy-lifting done on the front-end with JavaScript. Now, scripts take  a considerable amount of time to debug and test on different browsers and devices. You need a tool that is easy to set up, platform-agnostic and extensible. There is a tool out there with these specs! VorlonJS, is that tool which allows you to remotely load, inspect, test and debug JavaScript code running on any device with a web browser.
It is a new, open source, extensible and platform-agnostic tool for remotely debugging and testing JavaScript. It is powered by node.js and socket.io.  Vorlon.js itself is a small web server you can run from your local machine, or install on a server for your team to use, that serves the Vorlon.JS dashboard and communicates with your remote devices. Vorlon is written in typescript, which is compiled with gulp (if you are wondering ) and you can find the source-code here on this GitHub repo https://github.com/MicrosoftDX/Vorlonjs. Vorlon.js can be extended with plugins which may add features to both the client and the dashboard, such as: feature detection, logging, and exception tracking.

Getting started with Vorlon.js is as easy as the following steps:
Install and run the Vorlon.JS server from npm

$ npm i -g vorlon
Once Vorlon.JS is done installing, you can now run the server:
$ vorlon
The Vorlon server is running

With the server is running, open http://localhost:1337 in your browser to see the Vorlon.JS dashboard.
The last step is to enable Vorlon.js by adding the following script tag to your web app:

<script src="http://localhost:1337/vorlon.js"></script>

Finally, when you open you app you should see your client appear on the dashboard.

To make it even simpler, you can also open this sample page, which already has this script tag in it, to test your dashboard.

The team there has already shipped vorlonjs 0.0.15 with some great additions:

  • Plugins
    • New plugin: XHR Panel to track xhr calls
    • Add envelope and commands for messages between dashboard and client
    • New control bar component available for plugins
    • Moving all CSS to LESS
    • Huge improvements for DOM Explorer
    • Loaded on demand
    • Direct inner text edit
    • Attributes display and edit
    • Hover coloration
    • Edit content as HTML
    • right-click context menu on DOM node (with shortcuts to attribute, HTML edit, …)
    • settings panel to define behavior
    • search nodes by CSS selectors
    • refresh through MutationObserver, if available in client browser
    • view layout info (margin, padding, size)
    • computed styles panel
    • Improvements on console plugin
    • history for commands
    • support for logging objects and console.dir
    • filtering on console entries
    • Moving catalog.json to /server/config.json
  • Core
    • New option to remove socket.io from vorlon.js in catalog.json file
    • Simplified plugin description in catalog.json file

Check it out, it is a very cool and powerful tool. A total must for web developers honestly.

Happy Scripting!

Posted in Web Development Tagged with: ,

Join 1 other subscriber

My books

Rami Sarieddine's books on Goodreads
JavaScript Promises Essentials JavaScript Promises Essentials
reviews: 3
ratings: 8 (avg rating 3.62)

Developing Windows Store Apps with Html5 and JavaScript Developing Windows Store Apps with Html5 and JavaScript
reviews: 2
ratings: 3 (avg rating 5.00)

Follow me on Twitter

Archives

Skip to toolbar