The goal of this tutorial is to develop a mindset that is universally applicable to any AI tool you use.

Introduction to Developing with AI Assistants

Adding custom instructions to ChatGPT is a great way to personalize its responses.

Custom Instructions in ChatGPT

Conversing with an AI assistant can help you make informed decisions about your technical stack.

Making Technical Decisions with AI

An AI assistant can help you explore unfamiliar topics and guide you in the right direction.

Exploring Unfamiliar Topics with ChatGPT

Install GitHub Copilot

Using AI assistants like GitHub Copilot can be a game-changer when it comes to writing tests for your code.

Writing Tests with GitHub Copilot

Generate realistic test data effortlessly for efficient database seeding with the help of your AI assistant.

Realistic Database Seeding with AI

Prompt AI for fetch request code, address issues, and optimize development tasks seamlessly.

Simplify API Interaction with AI Assistants

Gain insights, explanations, and bug identification with AI assistants, streamlining your understanding in your codebase.

Understanding Code with AI

Quickly grasp and navigate APIs with your AI assistant. Learn to filter errors, such as Chrome extensions in Sentry, with ease. Verify solutions for accuracy.

Navigating APIs Documentation with AI

Paste error messages into AI chat for quick potential causes and troubleshooting steps, expediting the debugging process

AI-Driven Debugging - Deciphering Errors

Describe in English, let AI generate SQL. Simplify database interactions.

AI-Simplified SQL Queries

Automate git commits with AI. Paste your diff, streamline version control.

Simplifying Git Commit Messages

Explore how AI aids in decoding slang, understanding emojis, and strategizing responses, making social media interactions more informed and strategic.

AI Assistants for Social Media Dynamics

Gain insights into the role of AI assistants in web development. Exciting possibilities await as these tools evolve for more efficient and creative projects.

Concluding AI Assistance for Web Developers

Real World Examples

AI Assistants

Recreate an interactive cards UI with Tailwind CSS.

Fluid Hover Cards with Tailwind CSS

Understanding how to employ Flexbox for crafting fluid, horizontally adaptable UIs with reusable elements.

Overview of the Cards Grid

JavaScript's Array methods provide a quick way to create a list of items.

Use a Loop to Quickly Create a List

A step-by-step guide on how to fetch and display images dynamically in a gallery.

DynamicallyAdd Images to the Cards

Positioning and Styling Text in Cards

Adding a background gradient can enhance the readability of text laid over vibrant images.

Enhance Text Readability with a Gradient

By adding some classes to the cards, we can hide and reveal text on hover.

Hide and Reveal Text on Hover

Learn a CSS Grid technique to animate elements from zero to their full height on hover.

Use CSS Grid to Animate Elements with Dynamic Height

Add an interactive hover effect that changes the opacity of text.

Animate Text Opacity

Update the effect so the hovered card expands and the other cards shrink using Flexbox.

Animate A Card's Width on Hover with Flexbox

Setting a fixed width for card text will prevent line break jumps when the card expands and contracts.

Prevent Line Break Jumps with Fixed Widths

This was an iterative process, but there are two main takeaways that you should keep in mind when working on your own projects.

Concluding the Fluid Hover Cards Tutorial

Implementation

Learn how to deploy a Node.js application that persists data to multiple regions.

Intro to Deploy Distributed Apps with Node.js & Fly

Fly.io is the service we'll use for deploying our app. The first step is signing up for an account. 

Signing Up for Fly.io

We will deploy to Fly with Docker. A Dockerfile is used to tell Docker the steps to take to run our app.

Setting Up Docker

With the Dockerfile ready to go, let's deploy our app to Fly.

Deploying to Fly with Docker

Fly.io

Project Setup and First Deployment

Currently the counter state is reset to zero after every deployment. Creating a persistent volume with Fly solves this problem.

Persist Application Data Between Deployments

While not a replacement for testing, Fly offers health checks to prevent broken code from being deployed.

Adding Deployment Health Checks

Fly allows you to SSH into your app's virtual machine and run commands. Updating the Dockerfile to create a shortcut script makes the process run more smoothly.

Add a SQLite Console Shortcut with the Dockerfile

Configure GitHub Actions for Automatic Deployment

A staging environment is useful for play testing before pushing changes to production. This can be quickly set up with GitHub Actions and Fly

Add a Staging Environment

Persisting Data and Automatic Deployment

Deploying sites to multiple regions is less of a challenge than handling data. Fortunately Fly makes it easy to prepare for multi-region data.

Prepare for Multi-Region Data with LiteFS

If you're migrating to LiteFS from an existing application, you may have data you'd like to keep. Luckily, there's an easy process for importing it into LiteFS.

Import Existing Data into LiteFS

The Consul lease type provides a resilient solution in case the primary instance of our application goes down.

Set Up the Consul Lease Type

In order to make sure only our primary region attempts to write data, we'll set up a proxy server configuration for LiteFS

Set Up a Proxy Server for Multi-Region Database Support

With all the setup in place, it's time to scale our deployment to multiple regions, and test to confirm it's working as expected.

Free Web Development Tutorials

A collection of exercise-driven, in-depth Web Development tutorials.

AI Assistants

Fluid Hover Cards with Tailwind CSS

Deploy Web Applications All Over the World

Learn in person at Epic Web Conference

Learn in person at Epic Web Conference

Follow EpicWeb.dev