Sandeep's Tech and Design Blog

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

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.

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

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

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

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.

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

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);

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.

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

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...

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

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

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 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

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

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

Instead of a single donut chart or a circular status meter gauge you can use a radial bar chart or pie gauge to display your chart in a more compact form Radial Bar Chart

A well designed color scale can help the user make better sense of their data. chroma.js helps with generating color scales that do a better transition for colors Mastering Multi-hued Color Scales with Chroma.js

I saw this wonderful visualization in the Time Magazine that breakouts how $10,000 in income taxes is spent by the US government. This visualization is very easy to understand and does a great job of breaking out hierarchies from an Agency such as the US military down to a more specific line item such as Nuclear Weapons. Also note the font weighting based on the number value.

A Cartogram is a geometric distortion of a thematic map using a variable such as population See an animation of cartogram as it transitions from a map to a population cartogram of the world here . Cartogram Wikipedia

We are typically used to seeing satellite imagery with a top down view. Planet.com's satellite now image the earth daily and are also taking oblique views. See these amazing photos in this blog Earths Wonders with oblique views