Color Calibrate Your Monitor

When designing a web app or map, it is important to realize that the colors you see on your monitor may not be the same colors somebody else sees on their monitor or mobile device.  Perhaps you may have noticed that one of your monitors looks a little “off” compared to a second monitor, or maybe a map you designed looks different on screen when compared to a printed copy.  This is because your monitor color settings may not be calibrated correctly.  Most modern flat panel monitors will have on-board controls to adjust various display settings like brightness, sharpness, and contrast. Often they will come with preset options like “theater mode” or “game mode.” These work well for the average consumer, allowing them to quickly pick a color setting that looks good for their preferences.  However, if you’re doing color sensitive work – cartography, web development, photography, etc – you don’t want the monitor to just “look good,” you need your monitor to display as close to true colors as possible.  This will ensure that content created on your computer will display as accurately as possible when viewed on a wide array of devices – devices which may or may not have been properly color calibrated by their user.

So how do you color calibrate a monitor?  There are two basic ways to do this, the first involves purchasing a device that can sense the color output of your monitor and automatically adjust settings.  These devices are very accurate, but are more aimed at professional photographers and others who perform extremely color sensitive work.

The second method for color calibrating a monitor involves using test images and adjusting various hardware and software settings.  This method is sufficient for most web developers and GIS professionals, and depending on the make and model of the monitor, should yield sufficiently accurate color display.  If you’re using Windows, there are some basic built in settings accessible via Control Panel > Display > Calibrate Color:

This wizard will take you through some easy to follow steps and will yield a rough monitor calibration.  More information is available from digitaltrends.com, including information on performing the same task in MacOS.

I prefer to fine tune the calibration on my monitors a bit more, however. I use some test images from lagom.nl that allow me to properly adjust settings on both the monitor itself, as well as settings in the operating system or video card settings application.  Here is the first test image, which assists in adjusting contrast.  When properly calibrated, a monitor should display roughly equal steps in brightness over the full range from 1 to 32 for each color:

Adjust the contrast setting on your monitor until you can just barely see the first color bar, and you can also see a division between each subsequent color bar.  Here is a link to the complete set of monitor test images – each image tests a different setting and gives some instructions on what setting to adjust:

http://www.lagom.nl/lcd-test/

If you are using an NVIDIA graphics card, they provide some excellent utilities and information on how to properly calibrate monitor color:

https://www.geforce.com/whats-new/guides/how-to-calibrate-your-monitor

Advertisements

Browser diversity is good for the web

Develop for the web, not for a browser! Here’s a good quick read about why having a single web browser for all operating systems and devices would not be a good thing:

medium.com/samsung-internet-dev/because-browser-diversity-is-good-for-the-web-910d1cbcdf3b

The article also included this quote from Steve Jobs that I found kind of interesting:

“What’s the point of focusing on making the product even better when the only company you can take business from is yourself?”

Competing browsers are part of what drives innovation on the web. Developing for the ever-changing hardware and software landscape of the web is definitely a challenge. It is important to test websites thoroughly – you want your users to have a good experience regardless of the device and browser they are using.

 

Linking to another page using target=”_blank” can hinder performance and pose a security risk

I recently learned that using target="_blank" to have links open in a new tab causes the new page to run on the same process as your page. If the new link is executing large chunks of JavaScript, your page’s performance may also suffer.  But in addition to a potential performance hit, using  target="_blank" is also a security vulnerability.  Using rel=noopener is recommended.  This will prevent the newly opened page from accessing your window object via window.opener.

<a href="http://mylink.com" target="_blank" rel="noopener">My Link</a>

WordPress began implementing this when adding a hyperlink to text and selecting the “Open link in new window/tab” checkbox.  It does not appear that rel=noopener is supported by Edge at this time.

Here is some more info on rel=noopener:

developers.google.com/web/tools/lighthouse/audits/noopener

Here are a few examples demonstrating the security vulnerability and how the page that is linked to can manipulate the original page.

mathiasbynens.github.io/rel-noopener

jakearchibald.com/2016/performance-benefits-of-rel-noopener

You Might Not Need jQuery

Here’s a cool website I found that shows how to do some common tasks using both jQuery and plain vanilla JavaScript:

youmightnotneedjquery.com

I thought it was kinda cool to see what exactly some of the common jQuery functions are actually doing behind the scenes with JS and CSS.  Sometimes I like to keep things as simple as possible, especially for smaller adhoc apps.  Once upon a time I had a small app that needed to make just one single POST request.  Instead of including jQuery as a dependency in the project and written something like this:

$.ajax({
 type: 'POST',
 url: '/my/app/url',
 data: myData
});

I used some plain JS instead like this:

var request = new XMLHttpRequest();
request.open('POST', '/my/app/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(myData);

Check out the GitHub repo as well for lots more examples.