Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

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.

Read More

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.

Read More

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.

Read More

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.

Read More

Test Password Strength with RegEx in a React Application

While some organizations think it is up to the user to protect themselves by choosing strong usernames and passwords, the developer can help influence good password choices by including it in the design of the application. For example, the developer could include bars, percentages, or colors to help dictate quality of a password as the user enters it into a form.

A lot of us know a weak password is short and contains either alpha or numeric, but never both. We also know strong passwords include symbols as well as variations of character case-sensitivity. So how can we check for these things in the application?

In this tutorial we’re going to make use of regular expressions to test the quality of a password. This is going to be done with simple JavaScript in a React application.

Read More

Developing Alexa Skills with MongoDB and Golang

The popularity of Amazon Alexa and virtual assistants in general is no question, huge. Having a web application and mobile application isn’t enough for most organizations anymore, and now you need to start supporting voice operated applications.

So what does it take to create something for Alexa? How different is it from creating a web application?

In this tutorial we’re going to see how to create an Amazon Alexa Skill, also referred to as an Alexa application, that interacts with a MongoDB cluster using the Go programming language (Golang) and AWS Lambda.

Read More

Generate Images from HTML with Gulp and Puppeteer

Have you ever needed to generate an image from your HTML? Whether it be for design purposes or for marketing purposes with social media, knowing how to get a screenshot of your HTML design without manually taking the screenshot can be a great thing.

A use-case I was interested in was around feature graphics for each of my blog posts. Sure I could open a graphic design tool like Affinity Photo, or use the same feature graphic for every tutorial, but what if I wanted to automatically generate them based on certain criteria?

In this tutorial we’re going to see how to use Puppeteer to take screenshots of our HTML through a headless Gulp task.

Read More