I Deployed My Own Cute Lil’ Private Internet (aka VPC)

Recently, I had the pleasure of attending DeveloperWeek in Oakland, CA. In addition to working the Akamai booth, making new friends, and spreading the good word of cloud computing, my teammate, Talia and I were tasked with creating a demo to showcase the new VPC product.

Background

A Virtual Private Cloud (VPC) enables private communication between two cloud compute instances, isolating network traffic from other internet users, thus improving security.

AI for Web Devs: Addressing Bugs, Security, and Reliability

Welcome back to this series where we have been learning how to build web applications with AI.

So far in this series, we’ve created a working app that uses AI to determine who would win in a fight between two user-provided opponents and generates text responses and images. It’s working, but we’ve been following the happy path.

AI for Web Devs: AI Image Generation

Welcome back to this series, where we are learning how to integrate AI products into web applications.

  1. Intro & Setup
  2. Your First AI Prompt
  3. Streaming Responses
  4. How Does AI Work
  5. Prompt Engineering
  6. AI-Generated Images
  7. Security & Reliability
  8. Deploying

In this post, we are going to use AI to generate images. Before we get to that, let’s add a dialog component to our app. This is a modal-like pop-up designed to show content and be dismissed with the mouse or keyboard.

AI for Web Devs: What Are Neural Networks, LLMs, & GPTs?

Welcome back to this series where we are learning how to integrate AI tooling into web applications. In the previous posts, we got our project set up and did some basic integration.

  1. Intro & Setup
  2. Your First AI Prompt
  3. Streaming Responses
  4. How Does AI Work
  5. Prompt Engineering
  6. AI-Generated Images
  7. Security & Reliability
  8. Deploying

So far we’ve built a very basic UI with a text area that takes whatever the user writes and sends it over HTTP to OpenAI’s API. When the streaming response returns, it updates the page with each bit of text as it arrives.

AI for Web Devs: Faster Responses With HTTP Streaming

Welcome back to this series where we’re building web applications with AI tooling.

  1. Intro and Setup
  2. Your First AI Prompt
  3. Streaming Responses
  4. How Does AI Work
  5. Prompt Engineering
  6. AI-Generated Images
  7. Security and Reliability
  8. Deploying

In the previous post, we got AI-generated jokes into our Qwik application from OpenAI API. It worked, but the user experience suffered because we had to wait until the API completed the entire response before updating the client.

File Upload Security and Malware Protection

Today we’re going to be wrapping up this series on file uploads for the web. If you’ve been following along, you should now be familiar with enabling file uploads on the front end and the back end. We’ve covered architectural decisions to reduce cost on where we host our files and improve the delivery performance. So, I thought we would wrap up the series today by covering security as it relates to file uploads.

In case you’d like to go back and revisit any earlier blogs in the series, here’s a list of what we’ve covered so far:

CDNs: Speed Up Performance by Reducing Latency

Welcome back to this series all about file uploads for the web. In the previous posts, we covered things we had to do to upload files on the front end, things we had to do on the back end, and optimizing costs by moving file uploads to object storage.

  1. Upload files with HTML
  2. Upload files with JavaScript
  3. Receive uploads in Node.js (Nuxt.js)
  4. Optimize storage costs with Object Storage
  5. Optimize performance with a CDN
  6. Secure uploads with malware scans

Today, we’ll do more architectural work, but this time it’ll be focused on optimizing performance.

Stream File Uploads to S3 Object Storage and Save Money

This is the fourth post in a series all about uploading files for the web. In the previous posts, we covered uploading files using just HTML, uploading files using JavaScript, and how to receive file uploads on a Node.js server.

  1. Upload files with HTML
  2. Upload files with JavaScript
  3. Receive uploads in Node.js (Nuxt.js)
  4. Optimize storage costs with Object Storage
  5. Optimize performance with a CDN
  6. Secure uploads with malware scans

This post is going to take a step back and explore architectural changes to reduce costs when adding file uploads to our applications.

File Uploads for the Web (2): Upload Files With JavaScript

Welcome back to this series about uploading files to the web. If you missed the first post, I recommend you check it out because it’s all about uploading files via HTML. The full series will look like this:

  1. Upload files With HTML
  2. Upload files With JavaScript
  3. Receiving File Uploads With Node.js (Nuxt.js)
  4. Optimizing Storage Costs With Object Storage
  5. Optimizing Delivery With a CDN
  6. Securing File Uploads With Malware Scans

In this article, we’ll do the same thing using JavaScript.

File Uploads for the Web (1): Uploading Files With HTML

Today we are kicking off the first article in a series all about uploading files to the web. In this article, we’ll start with the basics of using HTML. The full series will look like this:

  1. Uploading files with HTML
  2. Uploading files with JavaScript
  3. Receiving file uploads with Node.js (Nuxt.js)
  4. Optimizing storage costs with Object Storage
  5. Optimizing delivery with a CDN
  6. Securing file uploads with malware scans

Cancel Duplicate Fetch Requests in JavaScript Enhanced Forms

If you’ve ever used JavaScript fetch API to enhance a form submission, there’s a good chance you’ve accidentally introduced a duplicate-request/race-condition bug. Today, I’ll walk you through the issue and my recommendations to avoid it. (There is a video at the end if you prefer that.)

Let’s consider a very basic HTML form with a single input and a submit button.

How to Build Great HTML Form Controls

Today I'm going to show you all the things to consider when building the perfect HTML input. Despite its seemingly simple nature, there's actually a lot that goes into it.

How To Make the Control

Well, we need to start somewhere. Might as well start with the control itself.