Core Types: *Only use the lowercase form of type designations for number, string, boolean, object and symbol.

  • number
  • string
  • boolean
  • object
  • Array string[]
  • Tuple — an array with specific number and types of elements. e.g. role: [2, ’sports’]
  • Enum -
  • enum Role { ADMIN, READ_ONLY, AUTHOR)
  • any — anything goes (like vanilla js), good for using when you’re not quite sure yet.
  • unknown — similar to any but better choice.

Tuple — we want to specify the type structure: <key>: [ number, string ]. Warning — push can be used with a tuple!

In JS +result === parseInt(result) forces to…


Image for post
Image for post
Puxi, Shanghai — photo by Rick Glascock

React Router is the most popular package for setting up client side navigation within your single page app, and will be even better once Version 6 is officially released (smaller footprint, easily nested routes, and more!). But React Router isn’t magic, but rather built on a browser’s native window object’s APIs.

The Window interface is the container for all of the browser’s inner workings — DOM, JavaScript, global variables. It’s the mother ship.

The Window object represents the currently opened tab in a browser (or sometimes the entire browser window). …


I’ve been adding a list sharing feature to my Cart Compass app that required me to restructure how an individual list item object was structured. Initially the item object was linked to a master item, the master item part of a master list of items linked to a user’s account, items that are remembered and called up when building future lists, with the name and category embedded. My initial plan was to link items to actual lists with this master item. In this way, when the fields of the master item were edited, the instances in lists would dynamically update.

All well and good, except that this meant when accessing a shared list from another user, not only the list’s items would need to be accessed, but the original user’s master list items would also need to be available. …


Image for post
Image for post
Photo by Markus Spiske on Unsplash

The holidays are a time for giving. How can we, as developers, use our experience to give back to the community? What can we bring to the table? Our stock in trade allows us, through the internet, to connect many people. We can provide access to information, data, media, as well as a way for that information to be organized, filtered and sorted easily. All of this can be done relatively inexpensively compared to pre-internet days.

We live in a market driven society. Technological innovation has created opportunities for entrepreneurs and consumers alike. The public sector has lagged behind in taking advantage of the technological advances of the past 30 years, in particular, government services have been slow to rollout the kind of well designed, well connected digital infrastructure that is possible with modern technology. Whether due a shortage of investment, lack of interagency cooperation, or daunting security concerns, the government sector, in many cases, has not yet realized the potential of the modern internet and data technology to provide quality services for the members of society who most need help. …


I was recently working on error handling between the API and frontend of a single page shopping list app I’ve been designing and would like to share some simple strategies I used in the process.

The app’s backend is built with Node.js/Express connected to MongoDB via Mongoose, an ORM (object relation mapping) package for MongoDB. The front end is built with React.js whose local state is managed by Redux. The API calls are made via actions managed by thunk.

The following outlines how I set up validation for the User model to be used when a new user is created. Mongoose ships with some basic validation and sanitation for fields. Required is the most useful. The second argument of the required property is a custom message (I chose ‘An email is required’). …


Ranking and Ordering objects by Category

Image for post
Image for post
XinJiang, China — Rick Glascock

Here’s a challenge whose solution lets us use a variety of JavaScript’s features.

The Challenge: Given a group of numeric scores, between 0 and 100, compile the scores into a table that shows the percentage of the scores that fall in the various categories. Unrepresented categories should not be included in the results. The results should be sorted first by their percentage (to 2 decimal places) of the overall set of scores and next by the categories rank.

The categories and their respective score ranges:
Exceeding: 91–100
Meeting: 81–90
Passing: 71–80
Emerging: 61–70
Failing: 0–60

The sample set of scores [92, 83, 65, 63] would yield:
Emerging: 50.00%
Exceeding: 25.00%
Passing: 25.00% …


No doubt, one of the more basic concepts to grasp in javascript is the difference between the three available variable declaration keywords, var, let and const. The three types of declarations are similar enough to cause some confusion. I will lay out a series of similar code fragments exploring the outcomes of using each of these keywords in an attempt to solidify the difference with concrete examples.

I encourage you to first try to figure out the output before looking at the answers below or running the code snippets.

A comparison:

Image for post
Image for post

Although var is still present in many code examples, and as such needs to be understood, let and const were meant to replace var. For a number of reasons they offer better control over your variables. …


Last week I outlined route planning for an Node.js/Express/MongoDB API. This week I will outline one approach to securing the API that includes hashing user passwords and creating tokens to authenticate API requests from the client. Another solution to this problem would be to use Google’s FireBase authentication service, that takes care of sign in, and session token creation and verification out of the box. While this turnkey approach is tempting, I think building security from the ground up is important to understanding the fundamentals for yourself.

Image for post
Image for post
Yunnan, China — Rick Glascock

I install two packages to handle security:

BCrypt is used to create and verify hashed password. Hashed passwords cannot be used if your database is hacked and the hashed passwords exposed, but can be used to verify submitted passwords of users. …


Image for post
Image for post

A few weeks ago I wrote a post about designing Mongoose schemas for a MongoDB that I am porting from a Postgres API I built a few months back. The project, Cart Compass, is a virtual shopping cart that allows users to create lists and then dynamically reorder them in a way that will guide quickly through the supermarket aisles.

I spent last week setting up the routes in Express to see how well the nested Mongoose schemas function at delivering requested data from the database to the React client.

Initial Setup

Heading over to VSCode’s terminal I install Express 4.14.1. I also install the node.js CORS package, which enables cross-origin resource sharing between resources. By default, browsers won’t allow servers from the same origin to talk, the situation we find ourselves in when working locally in development mode with say, an Express server running serving the APIs and a React site all running at localhost. This behavior is for security, but won’t be an issue running things locally. Installing the CORS package allows us to by pass this restriction. …


Image for post
Image for post

As developers we like to build things, to get our hands dirty. Writing code, debugging, testing, deploying are all part and parcel of our process. But in our rush to construct we can forget the benefit of seeing the forest through the trees before hacking away at the branches. The investment we make in planning will help create a clear path that ultimately minimizes the number of wrong turns we make while building our apps, and if we should stray off course, provides a solid framework to get back on track.

Let’s look at steps we can take to help focus the planning stages of our coding projects. …

About

Rick Glascock

After years of teaching music in Austin, Shanghai and Yangon, I’m making a career change to my other passion, software development.

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