The Best Way to Learn AI Is To Build Stuff

by Tyronne on July 24, 2025

Going down the AI tutorial rabbit hole isn’t the best way to learn AI.

To really sharpen your AI skills you need to start building applications.

Check out the video below for my thoughts about this matter…

Here are some cool AI-based project ideas, categorized by their focus and increasing complexity:

I. Foundational & Beginner-Friendly Projects (Great for learning the basics):

Spam Email Detector: A classic project to learn text classification. You’d train a model to distinguish between legitimate and spam emails based on content, sender, etc.
Handwritten Digit Recognition: This is a fundamental computer vision project. Using datasets like MNIST, you train a model (often a Convolutional Neural Network – CNN) to identify handwritten digits (0-9) from images.
Sentiment Analysis: Analyze text (e.g., movie reviews, social media posts, product reviews) to determine the emotional tone (positive, negative, neutral). This is a great introduction to Natural Language Processing (NLP).
Simple Chatbot: Create a basic chatbot that can respond to pre-defined user queries. You can start with rule-based systems and then explore more advanced NLP techniques.
Image Classification (e.g., Cat vs. Dog Classifier): A popular entry point into computer vision. You train a model to categorize images into specific classes.
Movie Recommendation System: Build an algorithm that suggests movies to users based on their viewing history and preferences, often using collaborative filtering techniques.
Autocorrect Tool: Develop a simple tool that suggests corrections for misspelled words. This introduces you to basic NLP and string manipulation.

II. Intermediate Projects (Building on foundational skills):

Object Detection System: Go beyond simple image classification to identify and locate multiple objects within an image or video, drawing bounding boxes around them. Frameworks like TensorFlow with SSD or YOLO models are common here.
Language Translation Model: Develop a system that translates text from one language to another. This involves more complex NLP techniques, often using sequence-to-sequence models and attention mechanisms.
Stock Price Prediction: Use historical stock data to train a machine learning model (e.g., LSTM networks for time-series data) to forecast future stock prices.
Fake News Detector: Build an AI model to identify misleading or false information in news articles or social media posts. This often involves NLP and classification techniques, sometimes utilizing pre-trained models like BERT.
Resume Parser AI Project: Develop an AI system that can extract key information (name, contact, education, skills, experience) from resumes, useful for recruitment.
Personalized Recommendation System (beyond movies): Apply recommendation algorithms to other domains like products, music, or news articles, considering user behavior and preferences.
Traffic Sign Recognition: Train a computer vision model to accurately identify and classify traffic signs from images, addressing real-world data variability.

III. Advanced & Trending Projects (More complex, often with practical applications):

AI-Powered Medical Diagnosis System: Develop models that can assist in diagnosing diseases from medical images (e.g., pneumonia detection from X-rays) or patient data.
Autonomous Driving Simulation: Create a system that trains vehicles to navigate complex traffic scenarios, integrating robotics and machine learning.
Generative AI (Art/Music/Text Generation): Explore creating original content using AI models like Generative Adversarial Networks (GANs) or Large Language Models (LLMs) for generating images, music compositions, or human-like text.
AI-Based Fraud Detection System: Build an AI system to identify fraudulent activities in financial transactions, leveraging anomaly detection and classification.
Intelligent Video Surveillance System: Use AI to analyze real-time video feeds for security and monitoring purposes, such as detecting unusual activities or identifying individuals.
Smart Agriculture System: Integrate AI with IoT devices to monitor crop health, predict yields, and optimize farming practices.
Real-time Sports Analytics System: Analyze live sports data using AI to provide insights, predict outcomes, or enhance broadcasting.
Conversational AI for Customer Service (Advanced Chatbots/Voice Assistants): Build more sophisticated conversational agents that can understand nuanced queries, maintain context, and provide human-like responses, potentially integrating with voice assistants.

Tips for choosing a project:

Start with your interests: Pick a topic you’re genuinely curious about. This will keep you motivated.
Consider your skill level: Begin with simpler projects to build a strong foundation before tackling more complex ones.
Look for available datasets: Many projects rely on publicly available datasets (e.g., Kaggle, UCI Machine Learning Repository).
Think about real-world problems: Projects with practical applications are often more engaging and impactful.
Utilize open-source tools and frameworks: Libraries like TensorFlow, PyTorch, Scikit-learn, and OpenCV provide powerful functionalities for AI development.
Don’t be afraid to start small: Break down large ideas into smaller, manageable sub-projects.

Check out some awesome offers below:

Get Bluehost hosting for as little as $1.99/month (save 75%)…https://bit.ly/3C1fZd2

Let me and my team build you a money making website or blog…https://bit.ly/tnrwebsite_service

Join my Patreon for one-on-one coaching and help with your coding…https://www.patreon.com/c/TyronneRatcliff

Buy me a coffee https://buymeacoffee.com/tyronneratcliff

{ 0 comments }

Don’t Leave Your Users Hanging: Master Fetch Timeouts with Promise.race

by Tyronne on July 18, 2025

We’ve all been there: staring at a loading spinner that never seems to stop.

In web development, a common reason for such frustration is a network request that takes too long or, worse, never responds.

While fetch is a powerful API for making network requests, by default, it will wait indefinitely for a response.

This isn’t ideal for user experience or application stability. What if you could tell your fetch request, “Hey, if you don’t hear back within X milliseconds, just give up”?

Good news! You can, and it’s surprisingly elegant using a combination of the fetch API and Promise.race. Let’s dive in.

The Problem: Indefinite Waits

Imagine you’re fetching user data:

fetch('https://api.example.com/user/123')
  .then(response => response.json())
  .then(data => console.log('User data:', data))
  .catch(error => console.error('Error fetching user data:', error));

This code works fine for successful and immediately failing requests.

But what if api.example.com is having a bad day and just… hangs?

Your user’s loading spinner will spin forever, and your application might appear frozen.

The Solution: Racing Your Fetch Against a Timeout Promise

The core idea is simple: we’ll create two promises and race them against each other using Promise.race().

Your Actual fetch Promise: This is the promise returned by your fetch(url) call.
A Timeout Promise: This is a custom promise that will reject after a specified delay.

Whichever promise settles first (either the fetch succeeding/failing, or the timeout kicking in) will determine the outcome of our combined operation.

Let’s build the fetchWithTimeout utility function:

/**
 * Fetches a resource from the network with a specified timeout.
 * If the fetch request does not resolve within the given duration,
 * the returned Promise will reject with a timeout error.
 *
 * @param {string} url - The URL of the resource to fetch.
 * @param {number} timeoutMs - The maximum time (in milliseconds) to wait for the request.
 * @returns {Promise<Response>} A Promise that resolves with the Fetch Response
 * or rejects with an Error if it times out or fails.
 */
function fetchWithTimeout(url, timeoutMs) {
  // 1. The actual fetch request, which returns a Promise
  const fetchPromise = fetch(url);

  // 2. A Promise that will reject after 'timeoutMs' milliseconds
  const timeoutPromise = new Promise((_, reject) => {
    // We only care about rejection for this promise, so 'resolve' is ignored (conventionally named '_')
    setTimeout(() => {
      reject(new Error('Request timed out!')); // Reject with a specific timeout error
    }, timeoutMs);
  });

  // 3. Race the fetch promise against the timeout promise
  //    Whichever settles first (resolves or rejects) determines the outcome.
  return Promise.race([fetchPromise, timeoutPromise]);
}

How It Works Under the Hood

Let’s trace the execution:

const fetchPromise = fetch(url);: As soon as fetchWithTimeout is called, the network request to url is initiated. fetchPromise is now a pending Promise waiting for the server’s response.
const timeoutPromise = new Promise(...): Simultaneously, we create a second, independent Promise. Inside this promise, a setTimeout is scheduled. After timeoutMs milliseconds, if that setTimeout fires, it calls reject(new Error('Request timed out!')), causing timeoutPromise to become rejected.
return Promise.race([fetchPromise, timeoutPromise]);: This is where the magic happens. Promise.race creates a new “master” promise.
- Scenario A: fetchPromise wins the race (request completes in time).If the fetchPromise resolves (e.g., the server responds quickly with a 200 OK) or rejects (e.g., a network error occurs) before timeoutMs passes, then Promise.race immediately adopts that outcome. The setTimeout that was scheduled for timeoutPromise will still fire later, but its reject call will have no effect on the already-settled Promise.race result.
- Scenario B: timeoutPromise wins the race (request takes too long).If timeoutMs passes before fetchPromise settles, then timeoutPromise rejects first. Promise.race immediately adopts this rejection, and your .catch() block will receive the “Request timed out!” error. The original fetchPromise might still be pending and silently complete later in the background, but your application will have moved on.

Putting `fetchWithTimeout` into Practice

Here’s how you’d use this utility function in your application:

// Example Usage: Fetching data with a 500ms timeout
fetchWithTimeout('https://api.example.com/data', 500)
  .then(response => {
    // Check if the network response was OK (status 200-299)
    if (!response.ok) {
      // If response is not OK, throw an error to trigger the .catch block
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // Parse the JSON body. This also returns a Promise.
  })
  .then(data => {
    console.log('Data successfully fetched within timeout:', data);
    // Render your data here
  })
  .catch(error => {
    // This block catches:
    // 1. "Request timed out!" errors
    // 2. Network errors during the fetch itself
    // 3. HTTP errors (e.g., 404, 500) from the .then(response => ...) block
    // 4. JSON parsing errors
    console.error('An error occurred during fetch:', error.message);

    // You can check the error message to distinguish timeout
    if (error.message === 'Request timed out!') {
      console.log('Please check your internet connection or try again later.');
    }
  });

// Example of a slow request (simulated)
// This URL will likely take longer than 50ms to respond, triggering the timeout
fetchWithTimeout('https://jsonplaceholder.typicode.com/posts/1', 50)
  .then(response => response.json())
  .then(data => console.log('Slow data fetched (should not happen):', data))
  .catch(error => console.error('Expected timeout error for slow request:', error.message));

// Example of a fast request (this should succeed)
fetchWithTimeout('https://jsonplaceholder.typicode.com/todos/1', 2000) // Generous timeout
  .then(response => response.json())
  .then(data => console.log('Fast request succeeded:', data))
  .catch(error => console.error('Fast request error:', error.message));

Important Consideration: True Aborting (`AbortController`)

While our fetchWithTimeout function effectively stops your code from waiting for a slow request, it’s crucial to understand that it does not inherently abort the underlying network request itself in the browser.

The browser might still continue to download data in the background, consuming bandwidth and resources, even if your application has moved on.

For true, resource-saving cancellation of fetch requests, you would use the AbortController API.

This is a more advanced topic but is the gold standard for robust cancellation.

For many simpler scenarios, however, the Promise.race pattern provides a perfectly acceptable and easy-to-implement timeout solution.

Conclusion

Implementing fetch timeouts with Promise.race is a powerful technique to enhance the reliability and user experience of your web applications.

By gracefully handling unresponsive servers, you prevent frustrating hangs and provide immediate feedback to your users.

Add this pattern to your asynchronous JavaScript toolkit, and keep those loading spinners turning only when they truly need to!