Real-Time Location Changes with MongoDB Realm, Change Streams, and Mapbox

When it comes to modern web applications, interactions often need to be done in real-time. This means that instead of periodically checking in for changes, watching or listening for changes often makes more sense.

Take the example of tracking something on a map. When it comes to package shipments, device tracking, or anything else where you need to know the real-time location, watching for those changes in location is great. Imagine needing to know where your fleet is so that you can dispatch them to a nearby incident?

When it comes to MongoDB, watching for changes can be done through change streams. These change streams can be used in any of the drivers, including front-end applications with MongoDB Realm.

In this tutorial, we’re going to leverage MongoDB Realm change streams. When the location data in our NoSQL documents change, we’re going to update the information on an interactive map powered by Mapbox.

Scan for Broken Links on a Website with JavaScript

Building a website isn’t a difficult task in a lot of circumstances, but maintaining a website is a totally different story. When it comes to larger scale websites or blogs such as The Polyglot Developer, content can become out of date at any time, and it’s more likely to happen the longer the content appears on the site.

Stale content and content that doesn’t work, whether that be through links, formatting, or something else, can severely damage how you rank in search results and the overall growth of your website.

Let’s dig a little deeper into links for example.

You’re probably going to have links on your website, whether they be internal or external in terms of where they route to. As your website evolves, or as the external websites evolve, those links might change and break. Broken links create a poor experience, something that Google and other search engines take into consideration when it comes to search engine optimization (SEO).

In this tutorial, we’re going to use simple JavaScript to find all of the broken links on an entire website, not just the current page.

TPDP E37: Writing Tests in a Development Project

I’m pleased to announce that the latest episode of The Polyglot Developer Podcast has been published!

In Writing Tests in a Development Project, the topic is testing and it features repeat guest Corbin Crutchley, author and co-founder at Unicorn Utterances.

Writing tests can often feel overwhelming, or a chore, and it prevents a lot of developers from including them when developing, but the goal of the episode is to break things down and make it easier to understand and implement.

If you’ve been curious about the different types of tests to include in the development process, whether that be unit tests, integration tests, end to end tests, or something else, this is the podcast episode for you.

Location Geofencing with MongoDB, Stitch, and Mapbox

For a lot of organizations, when it comes to location, geofencing is often a very desirable or required feature. In case you’re unfamiliar, a geofence can be thought of as a virtual perimeter for a geographic area. Often, you’ll want to know when something enters or exits that geofence so that you can apply your own business logic. Such logic might include sending a notification or updating something in your database.

MongoDB supports GeoJSON data and offers quite a few operators that make working the location data easy.

When it comes to geofencing, why would you want to use a database like MongoDB rather than defining boundaries directly within your client-facing application? Sure, it might be easy to define and manage one or two boundaries, but when you’re working at scale, checking to see if something has exited or entered one of many boundaries could be a hassle.

In this tutorial, we’re going to explore the $near and $geoIntersects operators within MongoDB to define geofences and see if we’re within the fences. For the visual aspect of things, we’re going to make use of Mapbox for showing our geofences and our location.

Static Website Deployments to MongoDB Stitch with Hugo, Git, and Travis CI

MongoDB Stitch can do quite a few things, some of which include GraphQL, functions as a service, and triggers. However, another awesome feature is in its ability to host static HTML, JavaScript, and CSS, the core components to any static website.

Static websites are becoming more popular due to their performance and how inexpensive it is to host them at scale. Popular generators include Hugo, Jekyll, 11ty, because of how easy it is to write and maintain in a format like Markdown and convert to HTML.

In this tutorial we’re going to see how to create a static hosted website using Hugo and automatically deploy changes to Stitch through a continuos deployment pipeline consisting of Git and Travis CI.

Create a Stream Countdown Timer for Twitch with JavaScript

As you’ve probably seen, I’ve been ramping up The Polyglot Developer on Twitch, when it comes to live streaming developer content. What might not be obvious to the viewer of the live streams is the technical effort that’s involved in making the stream possible. For example, how do you position all the stream elements on the screen, or for that matter, broadcast a stream at all?

One of the things that took me a while to figure out was in regards to a countdown timer. I was broadcasting streams with a “Starting Soon” screen, but viewers didn’t actually know when the stream would start. Does “Starting Soon” imply a minute from now or ten minutes from now? Since I’m using Open Broadcast Studio (OBS), a countdown timer didn’t exist, so I had to go out and create one.

In this tutorial, we’re going to see how to create a countdown timer that can be used in your OBS project, or any project for that matter. We’re going to do this with simple JavaScript and HTML.

Querying a GraphQL API in a React Web Application

GraphQL is becoming all the rage, what with being able to query an API like you can query a database. There are two aspects when it comes to GraphQL development, the first being around creating GraphQL APIs and the other around creating applications that can query those APIs.

If you’ve been keeping up, you’re probably already familiar with my courses, Web Services for the Go Developer, and Web Services for the JavaScript Developer. In these courses we saw how to create a GraphQL API. Looking at things in the other direction, you might remember my tutorials, Query a GraphQL API on Android and iOS with NativeScript and Angular, and Query A GraphQL API with Vue.js and Axios, which demonstrated how to query a GraphQL in an Angular or Vue.js application.

This time around we’re going to explore another popular framework. We’re going to see how to query a GraphQL API from within a React application using a variation of methods.