a picture showing temperature sensor and fan connected to grove shield


IOT is the next technological wave and we all would be riding it weather we want or not. As a technologist by hobby and profession I like idea of everything I interact with being smarter and it is quickly turning into reality. You are right, we are just getting started and we have a long way to go use the Internet of Things to make everyone’s life’s easier, more comfortable and save money as we still do not fully understand how we would manage a lot of things like interactions, interconnections and most importantly security of these millions of devices across the internet and constantly communicating.


However we will explore more about all of these as we go along this adventure. In this series we will be playing with Photon and Grove components and see where this journey takes us.


Here is what I ordered and will be using in this series

A Particle Photon – $19 (Photon)

Grove Kit for Photon – $49 (Grove Shield for Photon)

Grove Mixer Pack V1 – $29 (Grove Mixer Pack V2)


This would give us enough devices to play with. This is all we need for the entire tutorial however you do not need to order all of this, you could also order individual parts for the adventure you like as well.


If you already have knowledge of electronics than you might get the photon Starter kit and components that you need and use soldering and or jumper wires to make the circuit for your self.


If you are not good with electronics and or just lazy like me then here is the minimum of what you need to play along with the recipes in this series

1 Particle Photon

1 Grove Photon Shield

Individual Grove Components


Enough about starter information, let’s get started with our First Adventure


Fan with button



  • Photon
  • Grove Shield for Photon
  • Mini Fan
  • Button
  • Cardboard


Let’s Get Cracking

  • Place the Photon on the Grove shield if you have not already done so and connect the USB port to the power.
a picture showing placement of photon on the grove shield

Photon Grove Shield


  • Now lets adds the connector wires to port A4 and D2
a picture showing connector wires to Grove shield

Connector Wire Photon

  • Connect the Button to the connector wire on D2
a picture showing the grove button

Grove Button

  • Connect the Mini Fan converter to connector on A4 and connect the Mini Fan to the 2 wire port on Fan connector
a picture showing grove mini fan assembly

Grove Mini Fan Assembly

  • This is how the final assembly should look like.
a picture showing a fan and button connected with photon

Mini Fan with Button

  • And now we would need to write some code to make this work. To start coding you would either need to login to your cloud IDE (Particle Build) or create a new project in your local particle Dev IDE (Particle Local IDE)


  • Now when you press the button the Fan should start spinning.
a picture showing running IOT fan through button


Smart Fan – Runs when it’s hot


  • Photon
  • Grove Shield for Photon
  • Mini Fan
  • Cardboard
  • Temperature Sensor

Lets make this fan smarter. We would use the temperature sensor to tell us the temperature and when its hot the fan will start spinning automatically.

  • Remove the connection of the button and add the temperature sensor at A0 in the Grove Shield
a picture showing connectors at A0 and A4 in Grove Shield

A4 and A0

  • This is how the final assembly would look like

a picture showing temperature sensor and fan connected to grove shield

Run fan when its hot


Run Fan through internet or when it’s hot

In the this adventure we will make this fan even smarter by able to receive commands through the internet so that we could start it through a browser.

Lets change our code to include a local variable and also expose a cloud function which would internally call the function to control the fan. Also we will alter the condition for turning on and off the fan to include the command given tough internet.



Now let us create a simple html page to turn on and off our Fan



a picture showing controlling fan from internet

Control Fan Through Internet


Hope you had fun doing the project. Any questions, comments and feedback are most welcome.

A Picture showing driver driver closup of hand out of Nvidia AI Car


While opposed to the typical way to deal with working self-driving autos, Nvidia didn’t program any categorical question discovery, mapping, way arranging or control parts into this auto. Somewhat, the auto learns all alone to make all fundamental inside representations important to guide, by simply observing human drivers.

The automobile effectively explores the growth site while liberating all of us from making particular finders for cones or different articles present at the website. Also, the auto can drive out and about that is congested with grass and shrubs without the need to make a vegetation recognition platform. All it takes is around twenty illustration operates driven by people at various times of the afternoon. Figuring out how to drive during these head boggling situations exhibits new skills of profound nerve organs systems.

The auto also figures out how last but not least its driving conduct. This video incorporates a form that demonstrates an automobile that was prepared just on California streets but effectively driving itself in New Jersey.



The only future of web applications is with SSL and TLS however this is a nightmare for me and many other web application developers. When we moved all our applications to use secure communications always it became difficult to debug the web application and web api. Luckily Wireshark helps us solve this problem. Currently any secure traffic captured by Wireshark looks like this.


a picture showing normal packet capture using WireShark

Normal SSL Traffic Capture


The previous versions allowed to decrypt the secure traffic that used RSA only if the private key could be provided to Wireshark but it is no longer possible to decrypt traffic with just the private keys. This is where Session Key Logging comes into the picture. The browsers that we care about (Chrome and Firefox) support logging symmetric session key which is then used by Wireshark to decrypt the secure traffic.


Enable Session Key Logging

  • This could be done by simply by adding an environment variable. To add an environmental variable in Windows go to Computer Properties. One way to reach there is by Right-Clicking the My PC and select Properties.


a picture showing how to open computer properties

My PC Properties


  • Then Select Advanced System Setting


a picture showing where to click to open Advanced System Settings

Advanced System Settings



  • Followed by selecting Environment Variables
a picture showing where to click to open Environment variable sin Windows

Environment Variables


  • Now add a new User Environment Variable.


a picture showing way to add new user environment variable SSLKEYLOGFILE



    Note – Restart your browser so that the log file is created.

  • Now that we have our environment variable setup. Let go to Wireshark and configure it read these keys to decrypt traffic. To do that go to Edit –> Preferences


a showing where to open wireshark preferences from menu

Wireshark preferences menu


  • Navigate to Protocols –> SSL. Browse to the path where you specified the log file to be created and select the file.
a picture showing where to specify the session keys log file in wireshark

wireshark ssl keys


  • Now we are all set to decrypt the secure traffic in wireshark. Start capturing traffic with Wireshark and select any TLS or SSL packet to decrypt.


a picture showing normal ssl packet details captured by wireshark

Normal SSL Traffic Capture


  • But when you move to the Decrypted SSL you would be able to see the decrypted traffic.


a picture showing decrypted packet in wireshark

Decrypted Packet


Hope this helps you with your work with secure web packets.


Any questions, comments and feedback is always welcome.


All of us need to capture the screenshot of the browser one time or another and I have used many third party freemium extensions over time but nothing could be as good as something built in to the browser itself.

Chrome now includes a way to capture the screen shot through Dev Tools. To Open Dev Tools Press F12 or  Ctrl + Shift + I or from the hamburger menu in Chrome select More Tools –> Developer Tools

a picture showing how to open Developer Tools in Chrome form hambuger menu

Developer Tools


Click on device toggle to select device mode


a picture should where to toggle device mode in Chrome

Device Toggle


Select the Device to capture the screenshot

a picture showing where to select device in chrome device mode window

Device Select


Go to 3 dots menu on the right and select Capture Screenshot.


a picture showing where to find the Capture Screenshot option

Capture Screenshot


And volla. there you have your screenshot.


a picture of the screenshot capture in chrome with device selected as iPhone

Sreenshot iPhone


Note – If you not want the device border then you could disable it from the 3 dots menu in the right


a picture showing where to hide the device frame in chrome

Hide Device Frame


I know what you are thinking. What if I want the screenshot in a desktop / laptop browser size and not a device. There is a simple way to do that. In the Device selection menu select Responsive


a picture showing where to select Device as Responsive in Chrome device menu in dev tools

Responsive Device


Now drag to resize the area of the responsive device and then click on capture screenshot.


a picture showing the points to grab to resize responsive area in chrome device

Resize Device


Ans here is your screenshot.


a screenshot capture using chrome

Screnshot Responsive


Hope this helps you. Any feedback, questions and comments are welcome.


In this blog post we are going to talk about the basics and new features in ASP.NET 5 and Visual Studio 2015 by creating our favourite Hello World Program.

Visual Studio 2015 is a File based project system now which means that when we add a file in the file system then it is automatically picked up and a dynamic compilation happens that could result in faster refresh and faster build behind the scenes. This is possible because of the Rosyln compiler https://github.com/dotnet/roslyn.
In the newer version of Visual studio we can develop applications with the full featured .Net framework as well as the Cloud Optimized Core CLR. The idea of designing this new Core CLR is to make the application with fast startup, low memory usage and high throughput (I wonder why this is not the default framework always). Core CLR is designed to work on the  environments other than windows as well like Linux and OSX. Core CLR is available as a nuget package and hence could be deployed as part of the application itself but keep in mind, this being an optimized CLR might be missing types available in the full features .NET framework.


The newer version of ASP.NET has taken steps towards unification by combining ASP.NET MVC + WebAPI into one class itself which means that it would have only one base controller for both.




MVC 6 does not rely on the System.Web anymore and also the minimum size of the HttpContext is reduced to 2kb from 30kb. Let’s create our favourite project HelloWorld in ASP.NET 5


New ASP.NET 5 Project

New ASP.NET 5 Project

Make sure you select the Web Application under ASP.NET 5 Templates. and Uncheck the Host in Cloud checkbox for now.

Hello World ASP.NET 5 Project

Hello World ASP.NET 5 Project


Now let’s navigate to the Controllers folder of the project in the File Explorer and create a new file named HellowWorldController.cs

New Controller

New Controller

You would notice that this file is automatically refreshed in the solution


File Explorer Sync

File Explorer Sync

Now let’s add some code to this controller to see it in action.


Build and run the project by pressing Ctrl + F5 and change the url to call the controller that we just created.




This was certainly less painful as we do not have to remember what files we created in the file system (Not that I do, Git takes care of all that) as Visual Studio automatically takes care of that.

Now if we change the controller and save the file and then refresh the browser, my changes are reflected which was not the case before while working with C# files.

Run ASP.NET 5 After File Save

Run ASP.NET 5 After File Save


The root of the website is not longer the root of the project. By default the root of the website is wwwroot folder which contain all the static resources of the Website (including the bin folder for dlls) by default. We can add more static resources here as well. This allows a clear separation between the files that need to deployed to webserver and the configuration files.


WebRoot wwwroot

WebRoot wwwroot

By default the views also reference resources from the webroot (~) of the website.

Reference Webroot wwwroot

Reference Webroot wwwroot


We could change it by modifying the webroot in the project.json file.We will also notice the new way of declaring dependencies.

Change Webroot wwwroot

Change Webroot wwwroot

However the dependencies that could be added in project.json has be 100% .NET dependencies. We could include these dependencies using the good old Manage Nuget Packages option.


Manage Nuget Packages

Manage Nuget Packages

or we could hand type the dependencies in the project.json files itself and intellisense would help us out there. We could specify the version we want to target or add empty string (“”) to use the latest always.

Add nuget reference manually

Add nuget reference manually

Once we do that and save the project.json file we would see that the References section in the solution explorer will show the progress of getting and mapping the package that we just added. And at last building the project.

Auto Build

Auto Build


If you look further down in the project.json file you would see in the framework section that both full featured dotnet and dotnet core frameworks have been included. This will make visual studio build the solution against both the framework which could be beneficial when we are supporting multiple frameworks.


Target Multiple Frameworks

Target Multiple Frameworks

When we run the project in the local system it would run against only one of the framework so to check which framework we are running against we could go to the project properties we could select the framework.

Select One Framework

Select One Framework


When we are working in the solution on anything like say in the HelloWorldController I want to return the current date and time using timezone then we could see the information of availability in intellisence.

Package Availability

Package Availability


We could use the # defined symbols to write code against specific frameworks. Like we could use #dnx451 for dotnet framework and #dnxcore50 for core framework.



Use # directive

Use # directive

Now if you see the in the current solution of the project you would not find the packages that are listed as dependencies. The reason is because they are present under the user profile folder in .dnx folder.


Framework Location

Framework Location

When you go inside the .dnx folder you would see the packages folder where all the packages referenced by the current project and all the other projects will be present so that all of them could be reusable.

Packages Location

Packages Location


You would also see a runtimes folder where we could see the available runtimes which are x64 and x86 versions of both full dotnet framework and core framework.


Runtime Location

Runtime Location


Any questions, comments and feedback are always welcome.