Mobile Emulation on Google Chrome

If you want to see what your web page will look like on a mobile device and also do debugging during development on your desktop, here is a very useful resource for you.

Google Chrome allows you to emulate different mobile devices, screen resolutions, user agents and things like touch screen, geolocation and the accelerometer.

To enable Mobile Emulation on Google Chrome, open the Developer Tools, go to Settings and enable "Show 'Emulation' view in the console drawer".

 

Then, press 'Esc' to bring up the Developer Tools console drawer and finally select the Emulation tab. You'll find four sections: Device, Screen, User Agent and Sensors.

 

A quick test to understand this powerful feature can be done by simply navigating to www.google.com, select a device (i.e. Google Nexus 5) and then click Emulate. You'll be able to see that Google Chrome will show you the mobile optimized version of the Google website.

 

To go back to the original settings, just hit Reset and you'll see the regular Google Chrome rendering of the web page.

 

Have fun playing with the other features!

 

 

Searching for the same thing over and over again...

I have to admit that I very often run queries on Google for things I've searched before and many times I end up with the exact same results. I'm also a big fan of Evernote where I keep my notes organized per project, topic, event, place, etc...

Luckily, the Evernote Web Clipper has a feature that seems to solves the issue above allowing you to simultaneously search on Google and also on your Evernote notes.

To enable that capability all you have to do is to right-click in the Web Clipper and then make sure you have the Related Results checkbox enabled. I believe this is available only in Google Chrome and Apple Safari for now.

Evernote Web Clipper Related Results to add simultaneous search capabilities with Google

On your next Google search, you should be able to see results similar to the following picture (with the Evernote results boxed in to the right).

Checking for WebSocket Support on Your Web Browser

It’s frustrating to execute some code and don’t see anything happening after that. But, depending on the web browser you or the end user running your application is using that may be impacting the WebSocket functionality at this point since not all current browsers in use support HTML5 WebSocket natively yet.

So, let’s take a look on some techniques to make the web browser supports WebSocket.

We are going to use the JavaScript console available in all web browsers to start with the WebSocket support investigation. Each web browser has a different way to initiate the JavaScript console but if you’re using the suggested web browser (Google Chrome) take a look on the following resource to learn more about it (https://developers.google.com/chrome-developer-tools/docs/overview).

If you open your browser’s interactive JavaScript console and evaluate the expression window.WebSocket you should see the WebSocket constructor object:

 function WebSocket() { [native code] }

which means that your web browser supports WebSocket natively.

The same test above in some other browsers comes back blank or undefined indicating no native support.

If you want to add that capability for WebSocket support to your application or on our sample client code, you can use the following approach.

By just adding the following conditional check to your code before you try the WebSocket connection then it would be enough to tell you if the web browser supports WebSocket natively.

if (window.WebSocket){
     console.log("BROWSER SUPPORTED");
} else {
     console.log("BROWSER NOT SUPPORTED");
}

If your target web browser doesn't support HTML5 WebSocket and you want to have that amazing capability on your application, it's time for you to look into some vendors like Kaazing where you have WebSocket emulation that enables any browser (modern or not) to support the HTML5 WebSocket standard APIs.

From the developers perspective they can work in a fully transparent environment, using the client libraries that enable them to simply code against standard WebSocket APIs. And from the end-user point of view, they interact with a WebSocket application that Kaazing’s WebSocket emulation technology kicks in when native WebSocket support is unavailable, giving the user a seamless experience.

There are several web sites available on the Internet to help you with compatibility, not only WebSocket, but also HTML5 features in general. To mention a couple of them, you can navigate to http://caniuse.com/ or http://html5please.com/ and check for the HTML5 feature you want to use on the target web browser manufacturer and/or version.