In one of my last blogs I wrote about creating a polyline from multiple markers (you can read it here). In the app I display the distances from the created marker as a label. It serves the purpose but it looks a little distracting and, to be frank, a bit unrefined. This is the original look:

It will look a lot better if the distance information is only shown on demand. Well, I also want to see more of that cheeky golf cart icon. Something like this:

Do you want to know the weather before walking your dog? The target audience of my dog poop tracker app are dog owners who spot piles not picked up by other dog owners. Naturally, weather condition comes to mind as dog walking is by default an outdoor activity. During these brutal subzero winters days in Chicago, maybe showing a -5F feels-like temperature will incentivize some to keep the walk short to avoid the unnecessary torture, to human or pooch.

Since weather condition or forecast is something people take a quick glance of and move on, we don’t need it to…

When we display Google Maps, especially when we zoom in at local level, we usually want it to center on a certain location on the map so it receives the treatment of prominence. Unless you are displaying the entire world map, zooming and centering appropriately will likely affect the visual impact of the displayed map and its associated information.

Here I have a map displaying all the dog poops littered around the neighborhood. In order to show the users their neighborhoods are getting the attention, the center of the map is the zip code of the registered user. In one…

If someone reads programs written in JavaScript, one would definitely wonder about the abundance of these symbols in the code . They are literally everywhere. Symbols like these can be used to encase different actions performed by the programming language. In the case of JavaScript, there are quite a few different types. Let’s take a look at a few of them.

There are a few of them in the above example. The most basic one in JavaScript is to use to denote the start and end of a function or statement. The pair on line 53/70 marks the start and…

Here in the U.S., regardless of where you live or work, there is no escape from zip codes. Every address in this country has a zip code attached to it. Google Maps is very handy as you can type a zip code in the search box and the map displays where it is. So, what if you want to display a map in your app and center it based on the center of the zip code entered. Google API provides many Maps related functions and here is one can be used.

What you get back in the JSON is…

I live in the city, so on a pleasant sunny day it is always a joy to see plenty of people walking their dogs of different shapes and sizes. However, it is equally annoying to see dog poops of different shapes and sizes littered all over the sidewalk not picked up by dog owners. Is this a huge problem or is it just a minor annoyance magnified by my disgust? …

When someone clicks a button to delete a displayed data element, the general practice in a React/Redux application is to update the Redux store by removing the data element deleted from the backend database. However, there are times when it’s convenient to update both the Redux store and the local state.

In here, we have a page that displays a number of foursomes with each having the option to be removed by clicking on the remove button offered on each foursome. Before looking into the operation of the codes, let’s understand the structure of the components in question here.

Filtering display data using a dropdown list is probably the most common method. Let’s break it down and take a look at how it is done.

Here I have a list of events with dates and golf courses. If I want to allow users to see only those events associated with a certain golf course, I undoubtedly need a dropdown list of course names to allow them to pick the one they want to focus on.

Before we can do anything with the selection process, we need to build the content of the list first.

After working on apps using React/Redux, sometimes I wonder if the hassle of setting up Redux is worthwhile. As you know setting up Redux requires a bit of effort. First we have to set up the Redux store upfront, followed by the infrastructure needed to manipulate the data in the store (e.g. the reducers). Once all that is done, we can now have one component alter the data within the store and some other component can display that new data from the store. Let’s review a pure React app without Redux and see how things are different.

Here is a…

React is a framework created by Facebook to make web development easier and more consistent. If you ever wonder how a React website works under the hood, here is a quick examination of the behind-the-scene code that drives this type of application.

An app or website built using React is still governed by the basics of web application in general. Fundamentally, it is still HTML displayed by the browser of your choice. We, obviously, don’t write HTML line by line in a React application as there are plenty built-in tools that generate the HTML codes for us.

If you have…

Ivan Luk

Used to manage software development in financial services. Recently acquired skills include full stack development and DNA extraction/sequencing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store