Day 6 is a good one. It introduces a bunch of concepts that are pretty important in a day-to-day life of a web developer. The idea is we’ve got a big list of cities from all over the world and you type into a box and the list limits itself based on what you type.

First up is fetch which is a pretty excellent API to making HTTP requests from javascript. The concept of promises is touched on which is pretty important, especially if you’ll be making API calls in javascript. I hope later days will go more into depth since so far I’ve been coming up with my own patterns in my work that I think are “ok” but could probably be better. The fetch call gets set up to go out to a github gist containing the JSON structure with the array of objects representing the 1000 cities (clever use of something that gives back a response just like an API but without needing to develop it).

The next concept introduced was regular expressions which I’m quite familiar with, having given talks about them at a number of conferences and user groups. One aspect I’ve always tried to be careful of is the use of user provided information in a regex but in this exercise, that is not something that is considered. I don’t know if that’s because it’s Javascript on the browser and that means that if you were to write a bad query it would only affect you, whereas a bad regex run on a server implementing an API could negatively affect all the users of the application. It’s something I may end up looking into more. The other part that’s different between the example and other languages I’ve used regex with is that the other languages use a delimiter and then the flags follow the final delimeter. I think that’s still the case if you use the /regex/ style in javascript, but the example uses new RegExp which keeps the regular expression and the flags separated.

The regular expressions are used both for filtering the list of cities but is also used to take large numbers (like city populations) and format them with commas. In this case, the regular expression is just given and it works, but no attempt to explain how it works or what it does is made. I don’t think this is the fault of the course, as it could easily take as long as several day’s worth of videos to get to the point where the regular expression can be understood if you don’t already have experience with them.

The final use of regular expressions are used to replace the search string with a highlighted version of the search string in the search results. Think highlighting Den in Denver, CO or in Providence, RI if you’ve type den.

All the rest of the code is setting up a couple of event listeners on the result of a couple of document.querySelector calls which are things that have all been done in previous days. So all in all, I’d say Day 6, while I didn’t learn about something I didn’t know before, is a really important one, and a great introduction to fetch and promises and a good start towards using regex.

On to day 7!