Developing and shipping production-ready applications to the web today couldn't be easier than with Next.js and Vercel. It provides a world-class developer experience right out of the box and is optimized for powering high-performance production workloads. Read on to get an overview of what makes Next.js so compelling to work with and how easy it is to get your work deployed to production. Installation and Setup Make sure you have npm installed on your system: node -v && npm -v You should see the respective version numbers printed to the console. If not, you can go to the official No ..read more

Apple announced a Sign in with Apple service at its WWDC developer conference in June 2019. If you're familiar with social login with Google or Facebook, it's very similar. Most of these identity services use OAuth and OpenID Connect (OIDC), and Apple's implementation is similar. Today I'd like to show you how to develop a mobile application with Ionic, add OIDC authentication, retrieve the user's information, and add social login (aka federated identity) with Apple and Google. I'll even show you how to test it in a phone simulator, as well as on your device. Prerequisites: Node 12+ A sense o ..read more

In this tutorial, you’ll learn how to scan infrastructure-as-code as part of your code review process. Using Terraform, GitHub Actions, and Bridgecrew, we’ll show you how to find, fix, and prevent cloud misconfigurations. Infrastructure-as-code (sometimes referred to as infrastructure code or abbreviated as IaC) is used to automate infrastructure deployment, scaling, and management using machine-readable configuration files. Using infrastructure-as-code Before we dive in, let’s talk a bit about the use cases of infrastructure-as-code frameworks like Terraform. Terraform provides ready-made inf ..read more

The creator of Node.js, Ryan Dahl has authored a new framework for designing web applications. He went back and fixed some mistakes he made in hindsight, taking advantage of new technologies that were not available at the time he originally wrote Node. The result is Deno (pronounced DEH-no), a framework for writing "Node-like" web applications in TypeScript. Here, I will walk you through creating a basic web application with authentication. You can find almost all the information you need at the Deno website—along with information on all the third-party libraries that are currently available f ..read more

Building responsive web apps involves the cumbersome task of adding media queries in CSS. Thanks to the rapid advancements in CSS and CSS-in-JS libraries, web responsiveness is only a few lines of code away. This three-part series explains how to use the React component gatsby-image to create a responsive banner-and-grid gallery with remote, optimized images sourced from Cloudinary. Specifically: Part 1 explains how to build an optimized webpage by leveraging Cloudinary’s gatsby-transformer-cloudinary plugin and gatsby-image, sourcing and transforming responsive remote images in a GatsbyJS ..read more

Part 1 of this series chronicles the process of using remote images from Cloudinary in GatsbyJS projects through GraphQL queries. Here in part 2, you’ll learn how to — Leverage remote images stored in Cloudinary and served through an optimized content delivery network (CDN). Serve fluid or fixed images with gatsby-image. Render images for responsiveness and optimize them with gatsby-image. Transform those images with Cloudinary. For instance, we can quickly change this penguin image: Specifically, this part guides you through two processes: Fetch an image from Cloudinary with the getFluid ..read more

Even though a picture is worth a thousand words, as the English adage goes, it costs a pretty penny to store and deliver images online. Hence the common goal of many modern web-development tools to minimize the impact of images and other media assets on site performance. This post, part 1 of a three-part series, shows you how to build an optimized webpage by leveraging gatsby-transformer-cloudinary plugin and gatsby-image, ultimately sourcing and transforming responsive remote images in a GatsbyJS project. Here are the steps: Install GatsbyJS and its dependencies. Set up the project configura ..read more

You've built a React app, but now you need to deploy it. What do you do? First, it's probably best to choose a cloud provider as they're typically low-cost and easy to deploy to. Most cloud providers offer a way to deploy a static site. A built React app is just JavaScript, HTML, and CSS. They're static files that can live on pretty much any web server. In fact, with JSX (HTML in JS) and Styled Components, you could even say it's just JavaScript! Docker is the de facto standard to build and share containerized applications. You can use it to package your apps and include many open source web s ..read more

One of the most stellar open API's out there is the NASA Astronomy Picture of the Day. In today's article, we are going to mess around with that API and build an application that displays the photo of the day, the title of that photo, the current date, and some information about the picture. What We Will Be Building Using the NASA Open API: Astronomy Picture of the Day (APOD), we will be building an application that displays the information that is provided by that API. The information we will display is: The photo The photo's title Current date Information on the photo We will be building o ..read more

If you're looking for a quick and easy way to persist your application data, look no further than Airtable. Airtable is basically an excel sheet like database that has tons of flexibility and a GUI for inspecting/creating data. I've used Airtable as the DB for a few of my demo apps recently, and I love it. There are other great options like Firebase, for example, but Airtable seems the easiest for me. In this article, let's explore how to create a base (Airtable's word for a database) and then perform CRUD (Create, Read, Update, and Delete) operations against it in two different ways, raw HTTP ..read more