DEV Community: Utitofon Samuel

Fixing Foundry Install Errors — The Fastest Shortcut

Utitofon Samuel — Mon, 29 Dec 2025 08:58:20 +0000

If you're setting up Foundry and trying to install via:

curl -L https://foundry.paradigm.xyz | bash

…you might hit the annoying error:

error: download of config.json failed
Caused by: [28] Timeout was reached (Connection timed out)

Or even worse — foundryup never installs and every command returns:

foundryup: command not found

You’ll start Googling, clearing Cargo cache, tweaking DNS, and doing everything except actually writing Solidity.

After an hour of fighting it, here’s the real fix:

🧠 The Solution (No BS)

Use a VPN.
That’s it.

WSL sometimes has terrible routing to GitHub CDN endpoints depending on your ISP. Cargo fails, curl fails, wget fails — and it’s not your fault.

I turned on Surfshark → re-ran the install → it worked instantly.

🎤 TL;DR

If you ran into this issue, just use a VPN bro. END

Fixing AOS and Tailwind CSS Compatibility Issues in Nuxt 4: A Developer's Journey

Utitofon Samuel — Mon, 08 Sep 2025 02:26:08 +0000

When working with modern web frameworks, module conflicts can be frustrating roadblocks that consume hours of development time. Recently, I encountered a particularly tricky issue while setting up a Nuxt 4 project with both the nuxt-aos module and @nuxtjs/tailwindcss module. What seemed like a straightforward setup quickly turned into a debugging nightmare when Tailwind CSS stopped working properly, color mode functionality broke, and AOS animations refused to animate.

If you've stumbled upon this post, chances are you're facing similar issues. Let me walk you through the problem and the solution that finally got everything working seamlessly.

The Problem: When Modules Collide

I was building a Nuxt 4 application that required:

Tailwind CSS for styling and responsive design
Color mode functionality for dark/light theme switching
AOS (Animate On Scroll) for smooth scroll animations

Initially, I installed both the nuxt-aos module and @nuxtjs/tailwindcss module, expecting them to work together harmoniously. Instead, I encountered:

Tailwind CSS classes not applying - Styles weren't loading correctly
Color mode switching broken - Dark/light theme toggle stopped functioning
AOS animations not working - Scroll animations weren't triggering

The root cause appeared to be module initialization conflicts and CSS loading order issues between the automated module configurations.

The Solution: Manual Plugin and CSS Configuration

After extensive debugging, I discovered that the issue stemmed from module conflicts and initialization timing. The solution involved:

Removing the nuxt-aos module from the modules array
Creating a custom AOS client plugin for proper initialization
Manually configuring Tailwind CSS with explicit CSS file paths

Here's the complete working configuration:

1. Updated Nuxt Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: [
    '@nuxt/icon',
    '@nuxt/image',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/color-mode',
    '@nuxtjs/supabase',
    'nuxt-swiper',
    '@vueuse/nuxt',
    ['@nuxtjs/google-fonts',{
      families: {
        Inter: '100..900'
      }
    }],
    // Note: nuxt-aos module removed from here
  ],
  supabase: {
    redirect: false,
    redirectOptions: {
      login: '/auth/login',
      callback: '/auth/confirm',
      exclude: ['/', '/auth/login', '/auth/confirm', '/auth/register', '/auth/forgot-password', '/auth/reset-password'],
      saveRedirectToCookie: true
    }
  },
  css: [
    'aos/dist/aos.css',
    '~/assets/css/tailwind.css',
  ],
  tailwindcss: {
    cssPath: [
      '~/assets/css/tailwind.css',
      {
        injectPosition: 'last'
      },
    ],
  },
  app: {
    pageTransition: { 
      name: 'page', 
      mode: 'out-in' 
    }
  }
})

2. Custom AOS Client Plugin

Instead of relying on the nuxt-aos module, I created a custom client-side plugin:

// plugins/aos.client.ts
import AOS from 'aos'
import 'aos/dist/aos.css'

export default defineNuxtPlugin(() => {
  AOS.init({
    // Global settings:
    disable: false,
    startEvent: 'DOMContentLoaded',
    initClassName: 'aos-init',
    animatedClassName: 'aos-animate',
    useClassNames: false,
    disableMutationObserver: false,
    debounceDelay: 50,
    throttleDelay: 99,

    // Per-element settings:
    offset: 120,
    delay: 0,
    duration: 400,
    easing: 'ease',
    once: false,
    mirror: false,
    anchorPlacement: 'top-bottom',
  })

  const refreshAos = () => AOS.refresh()
  const refreshHardAos = () => AOS.refreshHard()

  return {
    provide: {
      refreshAos,
      refreshHardAos,
    },
  }
})

3. Explicit Tailwind CSS File

I created a dedicated Tailwind CSS file with explicit directive imports:

/* ~/assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Key Insights and Why This Works

1. Module Initialization Conflicts

The nuxt-aos module was interfering with Tailwind CSS initialization. By removing it and creating a custom plugin, I gained full control over when and how AOS initializes.

2. CSS Loading Order

Explicitly defining the CSS path in the Tailwind configuration with injectPosition: 'last' ensures that Tailwind styles load after other CSS, preventing style conflicts.

3. Client-Side Plugin Benefits

The .client.ts suffix ensures AOS only initializes on the client side, preventing SSR hydration mismatches that could break animations.

4. Provide/Inject Pattern

The plugin exposes refreshAos() and refreshHardAos() methods globally, allowing you to manually refresh AOS when needed (useful for dynamic content).

Usage in Components

With this setup, you can now use AOS animations in your components normally:

<template>
  <div>
    <div data-aos="fade-up" data-aos-duration="1000">
      This will fade up on scroll
    </div>
    <div data-aos="slide-left" data-aos-delay="200">
      This will slide from left with delay
    </div>
  </div>
</template>

You can also programmatically refresh AOS when needed:

<script setup>
// Access the provided methods
const { $refreshAos, $refreshHardAos } = useNuxtApp()

// Refresh AOS after dynamic content changes
const loadMoreContent = async () => {
  await fetchMoreData()
  $refreshAos()
}
</script>

Additional Dependencies

Don't forget to install the AOS package directly:

npm install aos
# or
yarn add aos
# or
pnpm add aos

Conclusion

Module conflicts in Nuxt can be tricky to debug, but understanding the underlying initialization and CSS loading processes helps identify solutions. By taking manual control over AOS initialization and explicitly configuring Tailwind CSS paths, we achieved a stable setup where:

✅ Tailwind CSS classes work perfectly
✅ Color mode switching functions correctly
✅ AOS animations trigger smoothly
✅ All modules coexist without conflicts

This approach gives you more control over your dependencies while maintaining the benefits of Nuxt's module ecosystem. Sometimes the best solution is to step back from automated configurations and implement things manually with a deeper understanding of what's happening under the hood.

Have you encountered similar module conflicts in your Nuxt projects? Share your experiences and solutions in the comments below!

Happy coding! 🚀

Building a Dynamic Gradient Tab Indicator in Flutter

Utitofon Samuel — Tue, 20 Aug 2024 10:33:21 +0000

Customizing UI components like tab indicators in Flutter can be an exciting journey. However, unexpected roadblocks can arise. This post shares my experience with creating a gradient tab indicator and the debugging process when it wouldn't shift with tab changes.

The culprit? A missing x-offset update. The solution involved dynamically adjusting the indicator's position based on the current tab's location using offset.dx in the _CirclePainter class.

From this post, you should understand the importance of dynamic positioning for UI elements and thorough debugging practices for a flawless Flutter experience

Setting up a cloud storage with flutter, hanko and supabase.🔥🔥

Utitofon Samuel — Sat, 28 Oct 2023 14:23:37 +0000

I developed a simple cloud storage to store various file types, documents, images, audio. It is secured with hanko auth and the files are stored on supabase. To get started you download the apk file from the website van-files. It is currently only available for android devices. Some devices may have restrictions against installing apps from unknown sources, to fix that you can visit this link. Once the app is installed on your device, you can create an account and start using your free cloud storage as you please.

WEB 2.0 & 3.0, What's the difference?

Utitofon Samuel — Wed, 02 Mar 2022 22:37:34 +0000

Brief

Over the past years, the internet has changed the world and the lives of people. Most don't go a day without some kind of interaction with the internet be it social media, online shopping, gaming, and the world wide web have solidified a place in all our lives, but it's always changing.

Web 2.0 (a.k.a. “The document Web or social web”) is a static controversial writable phrase of the worldwide web (WWW). It uses keyword search to find information powered by search engines. It facilitates interactions between the users and their sites.

On the other hand, web 3.0 (a.k.a “The metadata Web or intelligent web” is a highly mobile, three-dimensional executable phrase of the worldwide web (WWW) with interactive services, dynamic applications and “machine-to-machine” interaction. It is a semantic web that focuses on individuals using content management systems along with artificial intelligence.

With this massive adoption in place, we must follow along or afford to be left behind. Sites like Blockgames, Nestcoin, Zuriteam and even Youtube have an abundance of resources and mentors to help everyone tech inclined or not to key in to the many use cases of web 3.0.

What is BuildContext in Flutter

Utitofon Samuel — Sun, 16 Jan 2022 00:24:25 +0000

If you're just picked up flutter, you must have written the word buildcontext more than a dozen times. If you don't know what it means and what it does, here's a quick explanation for you

Widget trees

While learning flutter, you must have been told that everything in flutter is a widget, this is true to some extent but that is out of context here. These widgets are stacked together to form a widget tree. Let's take vuejs for example. You build micro components and stack them together to form a single tree, same in react, svelte, angular and so on.
Applying this ideology in flutter, your texts, buttons, cards, columns all form the widget tree, with some members having sub trees. You cant have a tree without a root, and in our case a root widget. From these root widget we stack our small widgets to form our app.

Each widget has its own buildcontext. The text, button scaffold all have a unique buildcontext once created. This buildcontext is used to to track each widget in the tree and locate them and their position in the tree.
In our basic example below,


    Scaffold(
      body: Center(
        child: Text("Home"),
        ),
      ),
    );

the Scaffold is the root widget with its unique buildcontext, its descendant the center widget has its unique buildcontext and same goes for the Text widget inside the center widget.

The widget tree rendered by a widget is returned from the build method, so for our previous stack, its build function returns it's widget tree alongside its buildcontext in order.

build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Text("You are Logged in succesfully"),
        ),
      ),
    );
  }

For basic projects like the counter app, the root widget will be the MyApp widget and from it comes the widget tree. The picture below is a profiler and debugger for dart called. For better performance while coding, start by installing the flutter and dart extensions on vscode.

We have seen that BuildContext is crucial in understanding how Flutter works. It helps to order our widget tree behind the scene in their hierarchical order. To build apps confidently, we need to understand every single concept of the flutter framework.
Follow me on GitHub for real implementations on flutter, vuejs and your favorite frameworks

FIXING THE CORE-JS ERROR

Utitofon Samuel — Fri, 30 Jul 2021 21:33:53 +0000

The core-js error is usually caused by an update or change in the current core-js version. A quick fix is usually to change the core-js version in package.json to the latest which is @3.15.2 or whichever is right now.
quick fixes you can do

copy the code in this github repo and paste in the file directory in node modules.

If the error still persists

run npm clear cache. Add --force add the end if necessary.
Close all IDE instances if any error still persists.
run npm i core-js@3.15.2

Hope this helps.

Prettier-Eslint Error -Solution by Utitofon Udoekong

Utitofon Samuel — Mon, 21 Dec 2020 22:53:01 +0000

I encountered the prettier/prettier error above in my nuxt.js project and tried a few things in fixing it.

Firstly, I changed the rules for prettier in the .eslintrc.js file to
rules: {
'prettier/prettier': 0,
}.

Secondly, I created a .prettierignore file in my root directory. It works just like a gitignore file.
I then added the following syntax

With that being done, the nuxt server should reload and the error should be gone. Hope this helps