Mirroring On MacBook Causes Page To Shrink

Here is the background

I usually stream movies on my MacBook Pro and then mirror it to my TV to make the viewing much enjoyable, obviously because of the screen size. Here is the setup, my Macbook Pro connected to my TV through a mini display port to HDMI cable. It’s a common setup when you want to connect your laptop to your TV or any display.

The problem?

The problem is when I connect my Macbook Pro to the TV, the Macbook Pro’s display will refresh and you should expect the display to be mirrored to the TV display. Yes, the mirroring happens but page turns into a display shrank into half. The shrank page is also mirrored in the TV display which does not happen to the rest of the open tabs. See below what I mean.

Page Shrank in Half

There are times I preload the movie like in Netflix or other stream sites so you can buffer the whole movie before starting to watch. Then the shrinking happens when you connect it to your TV. Not good.

It worked! Here is the trick

You can alway close and then open again the page that shrank but in case you encounter the issue you can always to do this trick to solve the issue. I tried to move the page, resize the page, minimize/maximize the page but it does not work. Then I tried to open the Developer Tools (Option + Command + I) and then close it.

Chrome Developer Tools Options Bar

It worked, the page goes back to full screen mode without opening or closing the page. Saving anything I buffered in the page. Cool.

Taking Visual Studio Code and ASP.Net 5 For A Spin

Visual Studio Code Setup

Visual Studio Code Download

https://code.visualstudio.com/Download

Visual Studio Code (VSCode) is the latest free cross platform lightweight IDE from Microsoft. Visual Studio Code and ASP.Net 5 are being released as free and open source.

Initial Impressions for Visual Studio Code

Pros:

  • Lightweight IDE
  • Support for many Languages with IntelliSense
  • Git Integration
  • Open Folder
  • Easy Split Window Navigation
  • User and Workspace settings in JSON

Cons:

  • Does not support regions for C#
  • Keeps hanging when you use on large .Net solutions (Open Folder)

ASP.Net 5 Setup

According to Microsoft, DNX was built entirely from the ground up. The ASP.Net 5 was also created from the ground up, meaning all ASP.Net 5 projects are DNX projects. Good thing to note is that ASP.Net 5 is not anymore based from System.Web.dll. Things are built around the concept of packages and on demand references.

Windows

In order to install and run ASP.Net 5 from Windows, you will need to install the DNVM (Version Manager), DNU (Utility) and DNX (Execution Engine). The steps to install them can be found from this link.

OSX

A very cool new feature of ASP.Net 5 is that it can run and be developed in other platforms. I was very excited to try and develop ASP.Net on a non-Windows machine. It gave me enough reason to buy and upgrade my MacBook Pro 2008 to MacBook Pro 2015 ;).

Just like in Windows, you will need to install the DNX, DNVM and DNU. But this time, since its on OSX, everything will be dependent on Mono (.Net Open Source Project). You can get Mono by installing through Homebrew (package manager) in OSX. Actually, it works backwards, in Homebrew when you install the latest ASP.Net and DNX it installs Mono automatically since its a required package of ASP.Net.

Linux soon!

I do not have now a Linux machine to try and install ASP.Net 5 so next time I will post my ASP.Net 5 adventures with Linux!

Sample Project ASP.NET 5

Omnisharp log – Error logged on opening the sample project

When opening the sample ASP.Net 5 DNX project with VS Code without first installing DNX, you will encounter an error logged under the Omnisharp log. This is a good way to know the sequence where it looks for the DNX framework.

Omnisharp log

The DNX framework can be installed on your system like what I did when I followed the steps to initially setup DNVM, DNU, DNX amongst others. But you can also, make available the different DNX versions in your local by getting and compiling them from the Github repository. This way, you can test different versions of DNX from your system. Running DNVM list will show you different versions installed in your machine.

Two versions of DNX

Running the sample apps

There are sample projects up in the ASP.NET repository. You can download or clone them from Github.

I tried to open and run the web application under the HelloMVC sample folder. This is a sample MVC ASP.NET 5 project which you can open in VSCODE.

Inside the project folder, you can execute

dnu restore

to make download the dependencies of the sample project. Visual Studio Code will also prompt you to do the restore.

DNU Restore VSCode Window

DNU Restore Complete

To execute and start the hosting of the project run the command

 dnx . web 

DNX WEB

Open a browser and go to http://localhost:5001/ and you will see the sample MVC ASP.NET 5 project running.

Sample ASP NET 5 Website running

You can do the same steps to setup, compile and run the web project in OSX. As long as you have DNX installed you can start and run ASP.NET 5 projects. I’m trying to follow the latest in DNX and ASP.NET as a whole in Github – http://www.github.com/aspnet and try to contribute if possible :) Thanks and until my next post!

Suppressed Exception On The Empty Catch Block

Test Results

When you investigate an issue or a problem you usually get the error or exception message first and then try to replicate that exception in a lower environment such as your local machine. What if there was an error but the application did not … [Continue reading]

Snipping Tool Slow Response On New Snip

I recently encountered the snipping tool slow response on new snip on my Windows machine. It is causing which I call COD or "cause of delay" when I'm doing my work and trying to finish on time. What happens is when you capture a screen using the … [Continue reading]

How To Setup A Chrome Extension For Inline Installation

Chrome-Extension-Inline-Installation-Developer-Dashboard.png

In my previous blog post, I made a Chrome extension to make JSFiddle default to jQuery library.  I already uploaded the extension to the Chrome developer dashboard but did not press the "Publish" yet. I want to try and setup a chrome extension for … [Continue reading]

Chrome Extension To Make JSFiddle Default To jQuery Library

Developer dashboard category and pricing option

Google is now forcing users to download and install Chrome extensions that are from the Web Store only. In my previous post How To Make JSFiddle Default To jQuery Library – Update   I was able to create an extension in developer mode of Chrome but … [Continue reading]