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.

The Polyglot Developer is Live on Twitch

I am pleased to announce that The Polyglot Developer is now a part of Twitch when it comes to streaming developer content live!

So what can you expect when it comes to the Twitch channel?

Think webinar, but without all the marketing nonsense that typically comes with them. Twitch streams are live, not at all formal, and an opportunity for the community to engage with the presenter as things happen on the stream. In other words, instead of leaving a comment on a blog post or YouTube video, you can ask questions and provide feedback as things happen, not only to the presenter, but to other members within The Polyglot Developer community.

So how do you get involved and what does this mean for the other education channels?

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.

Interacting with a GraphQL API with Golang

You might remember that I’ve done quite a bit of content when it comes to developing GraphQL APIs with the Go programming language (Golang). Heck, I’ve even written a book and published a course on the subject. However, in everything I’ve done thus far, I haven’t demonstrated how to interact with a GraphQL using Golang.

Sure, a lot of the time you’ll be using something like React, Angular, or Vue to interact with your web service, but that doesn’t mean you’ll never need to query a GraphQL API from Go or execute a mutation.

In this tutorial we’re going to see some quick examples on how to make HTTP requests with GraphQL queries using Golang.

Scale, Crop, and Zoom Images in a React Web Application

If you’ve been keeping up with the blog, you might remember a few tutorials I wrote around the Cropper.js library for JavaScript applications. In these tutorials I demonstrated how to manipulate images in Angular as well as Vue.js web applications. While the tutorials were more or less the same, the framework was different, which resulted in some differences in the code used.

So what if we were building a React application and needed to manipulate images prior to uploading them to a server?

In this tutorial we’re going to see how to use Cropper.js to crop images within a React web application. While we won’t be uploading these images to a remote server for storage, such as a task can be easily accomplished with a bit of imagination.

Make HTTP Requests with Axios or Fetch in a React Web Application

In most client facing applications there’s a need to consume data from remote web services, also referred to as APIs. This is because there is a separation of backend and frontend logic in modern applications, not specific to the web. With JavaScript, there are quite a few options when it comes to making HTTP requests, some of which I explored in my previous tutorial titled, Execute HTTP Requests in JavaScript Applications.

What if we wanted to execute HTTP requests using a popular framework like React?

In this tutorial, we’re going to look at what it takes to make HTTP requests and consume data from remote web services using React and simple JavaScript.