Tuesday, 29 November 2016

View GWT emulated Long in browser developer tools

Problem:

I would like to see the long value of a GWT emulated Long in my browser's developer tools.

I already know how to pause and debug my web app, but when I inspect a Long value, it looks similar to {h:0, m:544, l:54210}.

Solution:

Imagine that we have an emulated Long value: myLongVal={h:1, m:234, l:567}

To translate this to a human-readable Long (in most, but not all cases), type the following in the developer tools console:

myLongVal.h*Math.pow(2,44) + myLongVal.m*Math.pow(2,22) + myLongVal.l

(See screenshot)

Notes:

This was verified to work in GWT 2.7. Your mileage may vary for other versions.

The above method should work for Long values that are low enough. However, overflow may occur for larger emulated Long values as the cast to a Javascript double does not cover as many bits as a long integer.

Note that if you have a browser that actually supports 64-bit integers or larger, you might be able to use the following:

(myLongVal.h << 44) + (myLongVal.m << 22) + myLongVal.l

References:

Sunday, 27 November 2016

Chrome CPU throttling

Problem:

I would like to slow down, or throttle Chrome to test my web app's responsiveness. My computer is too fast to represent devices in the real world.

Solution:

Enable CPU throttling in Chrome Developer Tools:

  • F12 to open developer tools in Chrome
  • click on the "Timeline" tab
  • click the CPU throttling drop-down (beside the trash can/garbage collect icon) (see image below)
  • select your desired throttle speed

Notes:

This was verified to work in Chrome version 54. Your mileage my vary with different versions and on different machines.

Also note that while this may help simulate and uncover some performance issues for scripts during development, it may not completely simulate issues experienced on slower devices. Using a virtual machine, or a real test machine would generally be preferred for more comprehensive testing.

Nonetheless, a big "thank you" to the Chrome developers for including such a useful feature :)

References:

Package-level javadoc comments

Problem:

How can I add package-level javadoc comments to my Java project?

Solution:

  • In your package's directory, add a file named "package-info.java"
  • In this file, include the package-level javadoc comment, as well as the package declaration

Example:

myprojectroot/mypackage/package-info.java:

/**
 * Provides an example package-level javadoc comment.
 * 
 * @since 1.0
 */
package myprojectroot.mypackage;

Additional hints:

  • in Eclipse, you can create this file by adding a "new file" to the package (instead of a new Java class, etc.)

References:

Copy local scope variables in Chrome developer tools

Problem:

I would like to use Chrome developer tools to access local scoped variables when debugging Javascript applications.

I am already familiar with debugging with using developer tools, including setting breakpoints and pausing code execution.

How to reminder:

  • set break point to pause execution within the desired scope
  • to access the local scope variable, type it in the console while script execution is still paused in the desired scope (see image below)

Notes:

This was verified to work in Chrome version 54. Your mileage may vary using other versions.

Sunday, 20 November 2016

Clear icon cache in windows 7/8/10

Problem:

I want to clear the Windows icon cache because a Windows shortcut is currently displaying an old, incorrect icon.

Solution:

  • press [Windows Key]+R (to get the run dialog)
  • in windows 7/8, run the command: ie4uinit.exe -ClearIconCache
  • in windows 10, run the command: ie4uinit.exe -show

Additional notes:

This was verified to work in Windows 7 and Windows 10 without requiring a restart. Your mileage may vary.

References:

Thursday, 24 December 2015

BlackBerry Link El Capitan USB connection unstable

Problem:

My BB10 BlackBerry device won't back up using BlackBerry Link in OS X El Capitan. The USB connection keeps dropping. USB is fine with all of my other devices.

Solution:

  • Make sure BlackBerry Link is installed, and your Mac has been restarted
  • Make sure your BlackBerry is plugged into your Mac via USB
  • Navigate to Apple Logo (top right) -> System Preferences -> Network
  • At the bottom of the list on the left, click the plus button + (this will add a network interface)
  • In the "Interface" drop down, note any BlackBerry interfaces that haven't already been added to the list (in the case of this machine, it was "BlackBerry (en4)")
  • Add the BlackBerry interface, and then hit "Apply"
  • Open BlackBerry Link, it might ask for your device password and then connect properly
  • If successful, operations such as backup will now work without dropping

Notes:

This was verified to work using OS X 10.11.2 (El Capitan), a BlackBerry Passport, and BlackBerry Link 1.2.2 (build 32). Your results may vary.

Some operations, such as syncing photos, might not work (i.e. iPhotos has now been replaced by Photos, and syncing photos requires iPhoto; other changes apply).

Additionally, the above steps worked on a machine with a fresh install of BlackBerry Link, and without BlackBerry Blend installed. If the above steps work or do not work with both software installed, please follow the links in the references section for more information.

References:

Monday, 7 December 2015

Snap SVG to whole pixel using CSS

Problem:

In most modern browsers and IE newer than IE9, how do I snap an SVG drawing container to the nearest sub-pixel?

Solution

Use the following CSS, where 'your-svg-container' is replaced by the actual ID or style class of your drawing inside your website.

#your-svg-container {
    /* svg */
    transform: translate(0, 0);
}

Notes:

This SVG style rule appears to work in many modern browsers. It can be useful if a website contains a SVG drawing that has elements that align to whole pixels, such as a grid. If such a drawing lands on a fraction of a pixel, it can appear blurry, depending on the browser's rendering engine.

This blurry alignment can happen when non-pixel alignment techniques are used, such as aligning to units such as em, %, or pt, or using computed alignment such as centered alignment (i.e. your drawing will be blurry upon every odd or even page size).

References:

Monday, 6 April 2015

Export open tabs in Chrome without a plugin (in order to share them with someone)

Problem:

How can I export open Chrome/Chromium tabs in order to share them? I have a bunch of tabs that a friend has opened in Chrome on my computer as part of some research that they were doing, and they would like to have a list of the opened tabs to continue working on their own computer.

Solution:

There are a few ways to share open tabs in Chrome. However, one of the easier ways to do this without a plugin is to simply bookmark all open tabs into a new bookmark folder, edit the saved bookmarks, export the bookmarks to a HTML file, and then share the HTML file. The file can be imported back into Chrome on another computer.

  • To bookmark all opened tabs, select in the main menu: Bookmarks -> Bookmark All Tabs
  • To edit the bookmarks: In the Bookmark Manager, create a new folder for the tabs and then edit out the ones you don't want to share
  • To export (while in the bookmark manager): 1) select a folder, 2) do one of the following (depending on your version of Chrome):
    • Click 'organize' (top of the right-hand side of the manager) -> Export Bookmarks to HTML file, or
    • Click the gear button -> Export Bookmarks

Importing these bookmarks in Chrome follows a similar process:

  • (main menu) -> Bookmarks -> Bookmark Manager
  • Organize -> Import Bookmarks from HTML File

References: