Spatacoli Blog

  1. Windows CompactOverlay Mode

    The Creators Update of Windows is coming soon. One of the new features coming with it is a way to keep your UWP app on the screen above all other windows. It’s called CompactOverlay mode, but you probably know it better as Picture-in-Picture.

    All of the examples that I’ve found online of how to do CompactOverlay mode (all? I mean all one of them) is written in C#. In my work on a day to day basis I work in JavaScript. Converting from C# to JavaScript in this case is fairly easy.

    First you want to check and see if CompactOverlay mode is supported:


    Then you’ll want to switch to the CompactOverlay mode. In this example it’s based on a click of a button:


    What this will give you is a small window containing your app! That’s the first step. From here you can customize the experience by specifying the height and width of the window:


    There are other great things you can do like specify a different display to be used while in CompactOverlay mode. I recommend reading the blog entry on Microsoft and if you have any questions about conversion to JavaScript give me a shout @spatacoli.

  2. Visual Studio Code Tips and Tricks

    Visual Studio Code has quickly replaced Sublime as my editor of choice. Well, second only to Visual Studio itself that is. Code is very customizable. To the point that I have different configurations on each of my main computers. Kind of a drag.

    Anyway, Microsoft has put together quite the list of Tips and Tricks for using Visual Studio Code. It can be found on GitHub. This should be recommended reading for all users of Visual Studio Code.

    Now back to my problem. I have a lot of settings that are customized on my main desktop and I want to synchronize them across all my machines. Shan Khan created an extension to do just that. It is called Settings Sync and can be found in the Marketplace.

  3. Bower is Dead

    Starting from a blank piece of paper or an empty notepad can be a daunting task. Where do I start? How do I get to the productive place? Most of the help that I find on the Internet start with, “Run these 15 npm install commands and then copy this code into these files.” Sure, doing that gets you to someone’s productive place, but rarely does it get me to my productive place. Also, you are now bound to that person’s setup for all future projects. I don’t like that especially as the web is a fluid landscape and changes all the time.

    This changing landscape is what bought me to my problem that I am trying to solve right now. There are many tools available to download and install JavaScript frameworks. In the case of ASP.NET 5 some of the guidance shows using NPM and Bower. Using Bower for the front end, client side scripts and libraries and NPM to help manage all the development time stuff.

    Bower has the advantage over classical NPM in that it produces a flat tree of dependencies. NPM would nest the dependencies and create quite the tree. NPM 3 though creates as flat a tree as it can. When coding we are taught to “Don’t Repeat Yourself” or DRY. Well if we aren’t supposed to repeat ourselves in code, why would we do it in the tools we end up using. The real crazy part of all of this is that we use NPM to install Bower. NPM can be used to install all of the frameworks that I use so why not just use it instead of Bower?

    This started in my mind because there was a Tweet that I can’t find right now stating that Bower is dead and we should all use NPM. That’s great news. It’s one less tool that I have to keep sharp in my tool belt. Turns out that the Bower group is alive and kicking and looking for more volunteers.

    Where was I going with all of this? Right, I don’t want to use Bower anymore. Don’t get me wrong here. Bower is great. You can specify a .bowerrc file and in it tell Bower where to put the libraries you download so they are immediately available. Like in the /wwwroot/libs folder. NPM always puts its downloads in the node_modules directory. This requires an extra step in Gulp to get the libraries moved into the specified folder.

  4. Microsoft Surface Touch Keyboard

    This week was a big week for Microsoft. The Surface Pro 4 and the Surface Book came out. Along with them came a host of new accessories including a new Type Cover for the Surface Pro 4. This keyboard/cover is also compatible with the Surface Pro 3 and that is why I was so excited about it and got one.

    As I may have mentioned earlier, this keyboard is full size chicklet style and utilizes Microsoft’s vast knowledge of building keyboards. It is an amazing addition to my Surface Pro 3. The action on the keys is perfect for me, and the key spacing is the same as we get on full size keyboards. The keys are backlit and it has a Function lock key so that the Function keys can be active all the time and not just when pressing an Fn key.

    This keyboard that I got also includes a fingerprint reader for Windows Hello. What does that mean? I can sign into Windows with just the touch of my finger, and it is fast too. The Surface securely stores my fingerprint and allows me to sign into Windows by touching the fingerprint reader. I’ve used fingerprint readers in the past, just they were always a bit slow in the processing time. Windows Hello, however, is lightning fast. It is certainly much faster that typing in my password every time I unlock my PC.

    There is also IR and Iris scanners that work with Windows Hello. In fact the Surface Book and Surface Pro 4 come with the IR camera needed for this feat. The new Lumia Phones, the 950 and the 950XL, also come with the IR camera needed for Windows Hello on the phone. With the camera you just look at your phone or computer and you are signed in.

    This new keyboard is amazing and I highly recommend it for anyone with a Surface Pro 3 or Surface Pro 4.

  5. Links of the Week

    The first link I have this week is Future Visions by Microsoft. It is a collection of original science fiction stories based on projects currently being researched in Microsoft Research. It isn’t  available until November 17th, 2015, but it promises to be really good. I’ll be sure to add this to my reading list.

    The second link I have is Small Basic from Microsoft. My daughter came to me earlier this week and said she wanted to learn how to program. I showed her Scratch, but I think she was unimpressed with the drag and drop style of it. So then I showed her Small Basic which is a project that I’ve read about before and see quite often mentioned on Twitter. It is a lot like the BASIC that I learned when I was her age and she seems to be enjoying it.

    The third link for this week is a discussion of Project Westminster. Project Westminster is a programming method to turn your web site into a Windows 10 app.

    The next link that I have today is “Using JavaScript frameworks from your C#/UWP application.” This is utilizing Edge’s JavaScript engine, called Chakra, inside your C# application. The idea is that every week thousands of new frameworks become available for JavaScript. Many of them are really good and should be used inside applications. A C# developer can now route code through the Chakra engine to run these frameworks. The author does a simple example and it is fairly straight forward to get this component running in your C# Application.

    As I mentioned in my previous blog entry, I got a new keyboard for my Surface Pro 3 that includes a fingerprint reader for use with Windows Hello. I couldn’t get it working right away because I didn’t have the updated firmware on my Surface Pro 3. Before I figured that out though I had a read through this page on “Troubleshooting problems with Windows Hello on Surface.” It is very informative and well worth the read if you are going to use Windows Hello on your Surface. Keep in mind that using Windows Hello may reduce your battery life.

    That’s it for this week. Just five links. I will write again soon.