Posts

Browser Request Header Referer

I was helping one of our product managers build a prototype website that was linking to all kinds of URLs using Javascript window.open. This worked fine with localhost but when we tried to access it from another machine we were getting a 403 error on one of the URLs. I then looked at the request headers in Chrome, which you can do by bringing up the Network tab in the Debugger and refreshing the page and then clicking on the URL and the click on the Headers. When we typed the actual hostname vs localhost a 'referer' was being set which was causing the 403 error. The fix for this was to add or do the following before your window.open ... var meta = document.createElement('meta'); meta.name = "referrer"; meta.content = "no-referrer"; document.getElementsByTagName('head')[0].appendChild(meta);

Java Jackson JSON serialize and deserialize

Best list of example for serializing and serializing JSON using Jackson

Learn X in Y Minutes

I used create very good notes when I learnt a new programming language or API. But with work keeping me very busy I haven't had time do that. I recently bumped into this great website which is very handy when you are trying out something basic in a new language or environment and you just want a quick example. I also love the website name. Learn X in Y Minutes

Browser Feature support using caniuse.com

caniuse.com is one the website you want to use to see if a CSS, HTML or Javascript feature is implemented in which version of the browser. Example CSS grid support in caniuse

CSS Flexbox

One of the best comprehensive guides to CSS Flexbox CSS Flexbox are very useful for designing responsive web applications that adjust the layout based on the device i.e from a large desktop monitor to a smart phone. You can test the layout in Chrome by launching the Chrome Debugger and then changing the Device on the top left which will then launch a toolbar on your page that will let you flip through different devices such as iPad, iPhone X and so on.

Chrome/Chromium/Electron

The Chrome Browser does a new release every six weeks. The Chrome browser is built using the Chromium open source project. Chrome adds a few proprietary pieces like the Adobe Flash pluging but most of the code is from Chromium. Chrome runs each domain access using a separate process for security reasons. This also means that if a single tab hangs it does not effect the other tabs. Allthough I have had issues where an infinite javascript loop has required me restarting Chrome. Chromium uses the Blink rendering engine which forked from Webkit (which is used by Safari) in 2013. Electron used Chromium for building cross platform web based desktop applications. The Slack desktop application is based on Electron. Chorme and Chromium Podcast by Software Engineering Daily

Serverless Computing

Fn is a cloud agnostic open source serverless computing platform. CloudEvents is an attempt to standardize the serverless computing event model. One of the problems with Serverless computing is the cold start where it may take a while for a Docker Image to startup. This start time could be in the order of minutes if it is a complex Docker Image loading Java and starting up a large Java Function. Function Platforms Podcast

Javascript Callbacks, Promises, Signals and Events

I have been using Javascript signals for communicating between Javascript modules. I was looking into some more signals documentation and ran into this great blog that shows the difference between Callbacks, Promises, Signals and Events. I use all of them in the app that I am developing. Callbacks, Promises, Signals and Events Here is a link to a JSFiddle I created that shows how to chain Promises

Autonomous Cars

I was listening to the Autonomy with Frank Chen Software Engineering Daily Podcast . One very interesting point made was that the moat for companies like Uber and Facebook is their data. You can create a company that replicates their business but the new company will a data deficiency as they dont have all the social media connections that users have made on Facebook. Similarly Uber has an advantage in autonomous cars as they have already collected data on what trips users like to make so they now where best to locate charging stations. One of the problems with self driving cars is that they need maps that are more details than Google Maps. They need to know where the road medians are. One company that is doing that is Deep Maps Apollo is create a self driving open source platform like Android started in China by Baidu.

ES6 transpile to ES5

Most modern browsers support ES6 except for IE 11. If you want to use ES6 in your web app that needs to support IE11 then you you can use Babel to transpile from ES6 to ES5. See this blog post shows how you can use Webpack with Babel

JSON Beautify

Valid JSON requires that the keys be quoted e.g {"a": 10}. The problem is that if you have a large JSON text that you want the user to view and edit. The quotes makes the text verbose and hard to read. You can use JSON_mod2 to beatuify your JSON with the following call. var indent = 2; var dropQuotesOnKeys = true; JSON2_mod.stringify(jsonObj, null, indent, dropQuotesOnKeys);

Animated Condegram

One of the problems with a vertical or horizontal bar chart is that when you have a large set of values you waste a lot of empty space above the bar chart and you either end up with small bar widths or with a bigger bar width and a scroll bar. An alternative to this is to render the bar chart in a spiral.

JSON Schema Generator Validator

I am developing an Analytics Application where I want the user to be able to import and export various features of the application to JSON. The export is not a problem as I am constructing it in my code. The problem is on an import I need to validate the JSON schema. I found the following library that does a comprehensive job on the JSON schema validation. Another JSON schema validator JSON schema generator

Geospatial Problems

Other geo spatial probelms that I am working on is give a data set of locations how to show the correct map e.g if the data is for cities in France we dont want to see the Europe Map. So I build an index of locations to maps and I search the index with the narrowest match and show the other maps as an option that the user can select. Yet another problem I have to solve is to given a GeoJSON map display the label in the right location. The Mapping library I am using just places the label in a centered location based on a rectangle that covers all the polygons that define a region. This is a problem first for a country liked United States as it encompasses disparate states like Alaska, Hawaii. Since United States is a MulitPolygon in GeoJSON we can compute the area for all the polygons and then pick the largest polygon for labeling the region. Labeling a region is easy for a state like Colorado as it is a large square. It is a problem for a state like New Hampshire and Florida as th...

Spark Geospatial Analytics

Software Engineering Daily had a great podcast performing Geospatial Analytics using Magellan on Apache Spark which is a distribute Big Data Analytics engine. One of the common problems in geospatial is given a longitude and latitude how to find which zip code in the United states is this point is located in. So if you have a set of polygons that define the region for all the zip codes in the United States. Then this is basically a point in a polygon geometry problem. Since this is an expensive operation it does not make sense to check for say a location in Florida by checking all the zip code polygons in the US. They way Magellan solves this problem is by dividing the Earth into a recursive set of squares and then checking first if a point belongs in a square. We then have an index of all the zip codes in that square. Once we recursively descend down the squares we can start checking against a set of polygons that are in the square. Spark Geospatial Analytics podcast

Kubernetes Cloud Native Computing Foundation

Since my work commute has grown longer, it has given me an opportunity to listen to a lot more podcasts. I was listening to the Cloud Native Computing Foundation on Software Engineering Daily The Cloud Native Computing Foundation manages Kubernetes which is the open source container orchestration tool. The podcast was primarily about how the foundation manages the project. An interesting fact I picked up from the podcast was that Kubernetes is become the second most popular open source project after Linux. They display the test results against all the major cloud providers at their CI dashboard site

Computer Science in a Year

I head this on the Code Newbie Podcast. Vaidehi Joshi has blogged about her experience of trying to learn all the computer science basics in a year .  

Color Advice For Cartography

Image
Color Brewer is a great website for experimenting and learning about different considerations for designing color schemes for maps. This information is useful for other visualizations like tables, areas charts also. The three type of data sets you can work with are Sequential ordered data like population density Diverging, e.g population by age band Qualitative which means discrete values like Ethinicity Color Brewer

Data Storytelling using a Chord Diagram

Image
Below is a great data story telling visualization. It was the winner of the Kantar Information is Beautiful award Data Storytelling using a Chord Diagram

Mosaic Plot (Variable Width Bar Chart)

Image
We can use a variable width bar chart to visualize two qualitative variables. This is a type of a Mosaic Plot