Tag: javascript

Create a Stream Countdown Timer for Twitch with JavaScript

March 24, 2020 Nic Raboy

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

February 26, 2020 Nic Raboy

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.

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

February 14, 2020 Nic Raboy

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

February 11, 2020 Nic Raboy

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.

Test Password Strength with RegEx in a React Application

February 5, 2020 Nic Raboy

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.

Generate Images from HTML with Gulp and Puppeteer

December 5, 2019 Nic Raboy

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.

Maps and Location Services with HERE by Example, Released

November 27, 2019 Nic Raboy

I'm pleased to announce that a new course has been published, this time on the subject of maps and various location services. This course titled, Maps and Location Services with HERE by Example, focuses on building web applications using JavaScript and products by HERE Technologies.

In this course you'll see many step by step examples on how to work with interactive maps, geocode and reverse geocode locations, calculate different types of routes, and more.