Category: Web Development

Building an Autocomplete Form Element with Atlas Search and JavaScript

August 10, 2020 Nic Raboy

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

July 6, 2020 Nic Raboy

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

June 30, 2020 Nic Raboy

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

June 25, 2020 Nic Raboy

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

June 16, 2020 Nic Raboy

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

May 30, 2020 Nic Raboy

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

April 1, 2020 Nic Raboy

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.