Visually Showing Atlas Search Highlights with JavaScript and HTML

When it comes to finding specific words or phrases within text, you’re probably going to want to use a natural language search option like full-text search (FTS). Sure, you could probably create a complicated and difficult-to-maintain set of regular expressions to search within text, but that is an option that most developers don’t want. Not to mention it won’t cover the full scope of what a natural language processor typically accomplishes.

In a previous tutorial titled Building an Autocomplete Form Element with Atlas Search and JavaScript, I wrote about searching for recipes, as they are being typed, in MongoDB Atlas using the autocomplete operator. While this tutorial accomplished the job quite well, it didn’t elaborate on what exactly was being matched for any given term.

In this tutorial, we’re going to see how to use Atlas Search and work with the highlight data to visually show any matches on the terms in a user facing application. Highlighting is a powerful tool with Search to allow your users to find the exact text that they want in its proper context.

Building an Autocomplete Form Element with Atlas Search and JavaScript

When you’re developing a web application, a quality user experience can make or break your application. A common application feature is to allow users to enter text into a search bar to find a specific piece of information. Rather than having the user enter information and hope it’s valid, you can help your users find what they are looking for by offering autocomplete suggestions as they type.

So what could go wrong?

If your users are like me, they’ll make multiple spelling mistakes for every one word of text. If you’re creating an autocomplete field using regular expressions on your data, programming to account for misspellings and fat fingers is tough!

In this tutorial, we’re going to see how to create a simple web application that surfaces autocomplete suggestions to the user. These suggestions can be easily created using the full-text search features available in Atlas Search.

Create a Stream Deck Plugin to Interact with Webhooks

I recently jumped on the hype train when it comes to streaming and picked up an Elgato Stream Deck. If you’re unfamiliar, these devices are essentially hotkey peripherals with LCD adjustable keys that allow you to quickly perform certain tasks. Could a keyboard shortcut get the job done? For a lot of tasks, definitely, but the Stream Deck software is where the magic comes in.

The Stream Deck software allows you to connect certain services or multi-stage shortcuts to a specific key, something a standard keyboard shortcut probably won’t do well. In addition, you’re able to design your own actions using simple JavaScript and HTML.

In this tutorial, we’re going to see how to create a Stream Deck action, one that sends HTTP requests to remote webhook services, using JavaScript.

Searching for Nearby Points of Interest with MongoDB and Mapbox

When it comes to location data, MongoDB’s ability to work with GeoJSON through geospatial queries is often under-appreciated. Being able to query for intersecting or nearby coordinates while maintaining performance is functionality a lot of organizations are looking for.

Take the example of maintaining a list of business locations or even a fleet of vehicles. Knowing where these locations are, relative to a particular position isn’t an easy task when doing it manually.

In this tutorial we’re going to explore the $near operator within a MongoDB Realm application to find stored points of interest within a particular proximity to a position. These points of interest will be rendered on a map using the Mapbox service.

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.

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.