Hella Web3 US expertise + Filipino Cost-Effectiveness

Open-Source Web3 Ethereum Projects at Hella Labs

Wed, 13 May 2026 06:29:35 +0000

Open Source Web3 Ethereum Projects

Hella Labs supports several Ethereum open-source projects. These projects specialize in test automation.

Projects:

Foundry Anvil Testcontainers Nodejs

This repository provides a Testcontainers module for Node.js to run a customized Anvil node in your E2E tests.

This Typescript module provides a Fluent API style method of configuring and starting the Anvil node. And during your test execution, the module provides a viem test client and streamlined helper methods to interact with the node.

Get started with Foundry Anvil Testcontainers Nodejs by following the steps below.

Install:

pnpm add -D @hellaweb3/foundryanvil-testcontainers-nodejs

Setup:

describe("AnvilContainer", () => {
  let container: StartedAnvilContainer;

  beforeAll(async () => {
    const options = new AnvilOptions()
      .logs.verboseLogs(LogVerbosity.Five)
      .logs.jsonLogFormat()
      .account.withRandomMnemonic()
      .evm.autoImpersonate();

    container = await new AnvilContainer(options).start();
  }, 60000);

  afterAll(async () => {
    if (container) await container.stop();
  });
});

Check out the docs for more info.

Wiremock Testcontainers Nodejs

wiremock-testcontainers-nodejs is a Typescript nodejs library that spins up a WireMock instance with Testcontainers. It provides a fluent API to configure and start WireMock containers, including support for loading mappings and files from recorded Wiremock sessions.

Get started with Wiremock Testcontainers Nodejs by following the steps below.

Install:

pnpm add -D @hellaweb3/wiremock-testcontainers-nodejs testcontainers

Setup:

import { WiremockContainer } from "@hellaweb3/wiremock-testcontainers-nodejs";

describe("E2E Test", () => {
  let container;

  beforeAll(async () => {
    container = await new WiremockContainer()
      .withMappings("./test/__mocks__/wiremock")
      .start();
  }, 60000);

  afterAll(async () => {
    await container.stop();
  });

  it("should interact with WireMock", async () => {
    const url = container.rpcUrl;
    // Your test logic here
  });
});

Check out the docs for more info.

Ethereum Transaction Explorer TUI

A terminal(TUI) Ethereum transaction explorer built with Go and the Bubble Tea TUI framework. Fetch, display and explore details for any Ethereum transaction hash using the Etherscan API V2 all in your terminal.

Built with bubbletea, bubbles, and lipgloss.

https://github.com/anataliocs/etherscan-tui-go

Help make ethereum more secure with better test automation.

Thanks for reading and supporting open source. Post your comments below!

On-Chain Ethereum Data via WebSockets with Ethers.js, RxJS and Nest.js

Fri, 16 Jan 2026 06:29:35 +0000

On-Chain Ethereum Data via WebSockets with Ethers.js, RxJS and Nest.js

Blockchain data is by nature, streaming event-based data. It’s a perfect fit for Reactive Streams with RxJS, and data streaming technologies like Websockets and Server Sent Events.

Let’s walk through how to build superfast dApps and offload the heavy lifting to a Nest.js backend. This Nest.js backend allows the client to be much thinner and allows the backend business logic to serve multiple clients such as web, mobile, native and various dev tools and analytics.

Using NestJS will allow us to re-use our components with NestJS built-in functionality to create a structured, modular way of exposing Websockets, REST API, Server Sent Events and GraphQL for multiple chains such as Ethereum, Solana and Bitcoin in a single service.

The approach detailed here is modular and re-usable, and we will be re-using the same components in future articles to demonstrate this technique with Solana, Bitcoin, and other chains.

Thin clients have:

Much faster initial load times
Drastically lower JS bundle download sizes
Faster & more responsive UX
Usability across even low-powered devices
Better SEO b/c load time is a factor
Less exposed attack surface exposed locally

⭐️ Some notes on ultra-thin clients vs full front-end frameworks:

While the ultra-thin clients techniques demonstrated in this tutorial may not be ideal for some production dApps, you should spend time considering if stuffing a bunch of business logic into an already bloated ReactJS app is really the right choice for your users.

ReactJS is a great full-featured framework for complex UIs with teams working on them but may not be the right choice for a prototype, hackathon project or early-stage project.

You can read more about the clean separation of the presentation/UI layer and business logic Martinfowler.com and here.

Every application has its own needs and tradeoffs, and we hope you learn some new techniques to apply to your dApp in this article.

Why Websockets

WebSockets reduce overhead up to ~98.8% compared to HTTP, by eliminating repeated handshakes, large headers payloads and by leveraging smaller message frames.

Vs HTTP Polling: WebSockets can handle up to ~390–400x more requests per second. Latency is reduced by up to ~1/3. Payload size can be ~500x-1000x smaller.

Websockets can be a huge advantage when it comes to time-sensitive, event-driven applications.

The haves paid for nanoseconds; the have-nots had no idea that a nanosecond had value.

- Michael Lewis(Author of Flash Boys)

Getting Started with Nest.js

NestJS is a comprehensive Node.js framework for building reliable, and super scalable server backends.

Learn more about Nest.js.

You can follow along with the following GitHub Repo.

Open this repo in a GitHub Codespace Devcontainer to follow along!

The nestjs-typeorm-full-example is also a template repo so you can make a copy by clicking the Use this template button. Otherwise, follow the NestJS Quickstart in the project README.

Integrating Ethers.js

Ethers.js is the current most widely used library for interacting with the Ethereum ecosystem.

Check out the Ethers.js Docs.

First we will review the NestJS module to encapsulate the library and handle its lifecycle and configuration.

Ethers Sdk Config

Full example: ethersSdkConfig.ts

The config file provides a strongly typed interface for configuring the module.

ethersSdkConfig.ts

export interface EthersSdkConfig {
    rpcServerUrl: string;
    network: string;
    apiKey?: string;
}

Ethers Sdk Module Definition

Full example: ethersSdk.module.ts

The module file provides the structure for configuring the module using the registerAsync() function.

This is a widespread pattern for NestJS modules.

ethersSdk.module.ts

@Module({imports: [ConfigModule]})
export class EthersSdkModule {
    static registerAsync(options: EthersSdkModuleAsyncOptions): DynamicModule {
        return {
            module: EthersSdkModule,
            imports: [ConfigModule],
            providers: [
                {
                    provide: CONFIG_OPTIONS,
                    useFactory: options.useFactory,
                    inject: [ConfigService],
                },
                EthersSdkService,
            ],
            exports: [EthersSdkService],
        };
    }
}

Ethers Sdk Service

Full example: ethers.sdk.service.ts

The service file provides an interface to a reusable singleton instance of a Provider for other classes to use.

The constructor initializes the EthersJS Provider.

ethers.sdk.service.ts constructor

export class EthersSdkService extends SdkServiceBase<EthersProvider> implements SdkService {
    // ...
    private readonly _rpcServerUrl: string;
    private network: string | ethers.Network;

    constructor(
        private _configService: ConfigService,
        @Inject(CONFIG_OPTIONS) private options: ethersSdkConfig.EthersSdkConfig,
    ) {
        super(`Ethers SDK Rpc Server is not initialized.`);
        this._rpcServerUrl = options.rpcServerUrl;
        this.network = options.network;
        this._rpcServer = new ethers.JsonRpcProvider(
            this._rpcServerUrl + options.apiKey,
        );
    }

    // ...
}

Various functions are exposed to allow other classes to access Ethers.js functionality.

ethers.sdk.service.ts function example

export class EthersSdkService extends SdkServiceBase<EthersProvider> implements SdkService {
    // ...

    getBlock(blockHashOrBlockTag: ethers.BlockTag): Promise<BlockOrNull> {
        return this._rpcServer.getBlock(blockHashOrBlockTag);
    }

    // ...
}

Lifecycle hooks manage various lifecycle events in managing the server.

ethers.sdk.service.ts lifecycle hook example

export class EthersSdkService extends SdkServiceBase<EthersProvider> implements SdkService {
    // ...
    async onModuleInit() {
        this.network = await this._rpcServer.getNetwork();
        this.connected();
        this.logger.log(
            `Ethers SDK Rpc Server Status: ${this._rpcServerStatus} - RPC Server URL: ${this._rpcServerUrl}`,
        );
    }

    // ...
}

Ethers Sdk Service Configuration

The function registerAsync() configures the dynamic EthersSdkModule asynchronously at runtime.

app.module.ts excerpt

EthersSdkModule.registerAsync({
    imports: [ConfigModule],
    useFactory: (configService: ConfigService) =>
        ({
            network: 'Mainnet',
            rpcServerUrl: configService.get<string>('ETHERS_RPC_SERVER_URL'),
            apiKey: configService.get<string>('ETHERS_RPC_API_KEY'),
        }) as EthersSdkConfig,
    inject: [ConfigService],
})

Using the EthersSdk Module

The EthersSdk module is a reusable component that can be used anywhere in your service.

Ethers Service Constructor

The EthersSdkService is injected into the EthersService as a dependency.

ethers.service.ts excerpt

@Injectable()
export class EthersService {
    // ...
    constructor(private readonly ethersSdkService: EthersSdkService) {
    }

    // ...
}

Ethers Service getFinalizedBlocksJson Function

The EthersService defines a function that invokes getFinalizedBlock() and transforms the response into a FinalizedBlock.

ethers.service.ts excerpt

export class EthersService {
    // ...
    readonly _getFinalizedBlocksJson: () => Promise<FinalizedBlock> =
        async (): Promise<FinalizedBlock> => {
            const blockOrNull = await this.ethersSdkService.getFinalizedBlock();
            if (blockOrNull === null) {
                return {} as FinalizedBlock;
            }

            return {
                blockNumber: blockOrNull.number,
                date: blockOrNull.date ?? '',
                hash: blockOrNull.hash ?? '',
            } as FinalizedBlock;
        };
    // ...
}

Ethers Service getFinalizedBlocksJson Function

This function finalizedBlocksStreamForWebsocket passes the _getFinalizedBlocksJson() arrow function to buildWsResponse() with the generic type FinalizedBlock.

The returned WsResponse<FinalizedBlock> is then wrapped into an Observable stream of data using from().

ethers.service.ts excerpt

export class EthersService {
    // ...
    finalizedBlocksStreamForWebsocket(): (
        n: number,
    ) => Observable<WsResponse<FinalizedBlock>> {
        return (n: number): Observable<WsResponse<FinalizedBlock>> =>
            from(buildWsResponse<FinalizedBlock>(n, this._getFinalizedBlocksJson));
    }

    // ...
}

Message Utilities buildWsResponse Function

The function buildWsResponse() creates a WsResponse object and sets the data field to the results of the passed in function _getFinalizedBlocksJson()

message-utils.ts excerpt

export async function buildWsResponse<DataType>(
    n: number,
    sdkFunction: () => Promise<DataType>,
): Promise<WsResponse<DataType>> {
    return {
        type: 'events',
        data: await sdkFunction(),
    } as unknown as WsResponse<DataType>;
}

Websocket Gateway Event Listener

The onEvent() function is decorated with the @SubscribeMessage('ethers-subscribe-blocks') annotation that listens for incoming websocket messages that have event: "ethers-subscribe-blocks" in the payload.

It performs the following:

Validates that the data is the correct JSON shape matching WebSocketSubscribeDto
Then returns a new stream of data based on the topic included in the DTO payload
A stream of WsResponse JSON objects are emitted with the data depending on the topic

ethers.gateway.ts excerpt

@WebSocketGateway(81, {cors: {origin: '*'}})
export class EthersGateway {
    // ...
    @SubscribeMessage('ethers-subscribe-blocks')
    onEvent(
        @MessageBody(new ValidationPipe()) payload: WebSocketSubscribeDto,
    ): Observable<WsResponse<BlockNumber | FinalizedBlock | WsError>> {
        switch (payload.topic) {
            case 'block-number':
                return this.newBlocksStream();
            case 'finalized-blocks':
                return this.finalizedBlocksStream();
            default:
                return errorMsgWsResponse(payload);
        }
    }

    // ...
}

Websocket Gateway finalizedBlocksStream

The function finalizedBlocksStream() uses the RxJS function interval(5000) to create an Observable stream of data that emits every 5 seconds.

On each emission, the finalizedBlocksStreamForWebsocket() service function is called that emits a stream of finalized block data which is merged into the interval stream.

Then the stream is de-duplicated using the distinct function, which emits data with a unique block number.

ethers.gateway.ts excerpt

export class EthersGateway {
    // ...
    private finalizedBlocksStream() {
        return interval(5000)
            .pipe(mergeMap(this.ethersService.finalizedBlocksStreamForWebsocket()))
            .pipe(distinct(({data}) => data.blockNumber));
    }

    // ...
}

Front-end Client

The thin client consists of a single .html file and a .js file.

Front-end Client - HTML

The ws-finalized-blocks.html file allows a user to subscribe to a websocket stream of finalized blocks.

The dynamic elements are:

The article element with the id messages is appended with websocket data
The send-message-button subscribes to websocket messages
The close-connection-button closes the websocket stream

ws-finalized-blocks.html excerpt

<div>
    <article>
        <strong>Emitted Events - Finalized Blocks</strong>
        <p>
            <ins id="connection-status"></ins>
        </p>
        <progress id="progress-bar"></progress>
        <article id="messages"></article>
    </article>
    <div role="group">
        <button id="send-message-button"
                title="Send websocket message to subscribe to Finalized Blocks">
            Subscribe to Finalized Blocks
        </button>
        <button class="secondary" id="close-connection-button"
                title="Close websocket connection">
            Close Connection
        </button>
    </div>
</div>

Front-end Client - Javascript

The wsFinalizedBlock.js defines the basic logic to:

Establish a websocket connection
Send and receive websocket messages
Close the connection

A WsConnect object is instantiated passing in:

The websocket endpoint
The name of the event on sent websocket messages
The function used to generate block explorer links, createLinkEth

wsFinalizedBlock.js excerpt

const websocket = new WsConnect(
    'ws://localhost:81',
    'ethers-subscribe-blocks',
    createLinkEth,
);

A click event listener is attached to the button with the id, #send-message-button. When the button is clicked, the sendMessage() function on the WsConnect object is invoked subscribing to the 'finalized-blocks' stream of data via websocket.

wsFinalizedBlock.js excerpt

document.querySelector('#send-message-button').addEventListener('click', () => {
    console.log('Sending message to subscribe to finalized blocks');
    websocket.sendMessage('finalized-blocks');
});

A click event listener is attached to the button with the id, #close-connection-button. When the button is clicked, the closeConnection() function is called.

wsFinalizedBlock.js excerpt

document
    .querySelector('#close-connection-button')
    .addEventListener('click', () => {
        console.log(
            'Closing finalized blocks websocket connection: User Requested',
        );
        websocket.closeConnection('User Requested');
    });

Front-end Client - WsConnect Class

The WsConnect abstracts away common functions used in all websocket clients.

The constructor initializes the object and creates a new WebSocket(url) using the standard The WebSocket API

wsConnect.js excerpt

export class WsConnect {
    // ...
    constructor(url, eventName, linkFunction) {
        this.url = url;
        this.socket = new WebSocket(url);
        this.eventName = eventName;
        this.linkFunction = linkFunction;
        this.setEventHandlers();
    }

    // ...
}

The setEventHandlers() parses the returned websocket messages from the backend service and formats them for display. The raw JSON data is displayed as well as a link to etherscan built using the passed in linkFunction().

export class WsConnect {
    // ...
    setEventHandlers() {
        this.socket.onmessage = (msg) => {
            const data = JSON.parse(msg.data).data;
            const message = document.createElement('div');
            message.appendChild(document.createTextNode(msg.data));
            message.appendChild(document.createElement('br'));
            const link = this.linkFunction(data);
            message.appendChild(link);
            message.appendChild(document.createElement('hr'));
            document.querySelector('#messages').appendChild(message);
        };
    }

    // ...
}

The sendMessage() function sends a websocket message to subscribe to the desired topic.

export class WsConnect {
    // ...
    sendMessage(topic) {
        this.socket.send(
            JSON.stringify({
                event: this.eventName,
                data: {
                    client: 'vanilla.js',
                    topic: topic,
                },
            }),
        );
    }

    // ...
}

The closeConnection() function closes the websocket connection.

export class WsConnect {
    // ...
    closeConnection(reason) {
        this.socket.close(1000, reason);
        document.querySelector('#connection-status').innerHTML = '';
        document.querySelector('#progress-bar').value = 0;
    }

    // ...
}

Conclusion

Thanks for reading!

We walked through a performant, reactive dApp with WebSockets, Ethers.js, RxJS, and NestJS. This approach has a clean separation the client and a robust backend service capable of handling real-time blockchain data streams.

The backend service can then be re-used for other front-end clients, such as desktop, terminal, mobile apps, analytics, and dev tooling.

Some Key Takeaways to Consider

While there is no one right answer for every application, we hope you learned some new techniques in this article.

Benefits:

Thin Client: Reduced bundle sizes, faster load times, and better performance across devices
Reactive Streams: Perfect fit for blockchain’s event-driven nature using RxJS Observables
WebSocket Efficiency: Up to 98.8% overhead reduction and 390-400x more requests per second compared to HTTP polling
Modular Design: Reusable NestJS modules that can easily extend to multiple blockchain networks

Concepts:

Clean Separation: Business logic resides in the backend, keeping frontend focused on presentation
Real-time Data: Efficient streaming of blockchain events with automatic deduplication
Scalability: Single backend service can serve multiple client types (web, mobile, analytics tools)

The modular, reactive approach demonstrated here provides a clear example of a unique way of writing dApps that can scale efficiently with a snappy, responsive UX.

Thanks again for reading and be sure to post your comments below!

Pure CSS Animated Gradient Background and More!

Tue, 05 Aug 2025 06:29:35 +0000

CSS Tricks - Pure CSS Animated Gradient Background and More

Let’s take a look at how to create a animated background with no Javascript and just plain CSS.

Keep your code simple & manageable, with super fast page loads leveraging Pure CSS animations.

Build a lean, mean site without the hassle and overhead of node.js, npm, react/next.js, Vercel etc.

The best code is no code at all.

- Jeff Atwood(Founder of StackOverflow)

Live Example on CodePen

Animated Gradient Background

Now let’s check out a live example on CodePen!

CodePen is an amazing free resource for developers! Check out CodePen Challenges to learn more!

See the Pen 🌈 Pure CSS Animated Gradient Background by Chris Anatalio (@anataliocs) on CodePen.

https://codepen.io/anataliocs/pen/KwdWQqB

You can build super slick features and animations for your site + blog with just Jekyll, Vanilla JS and CSS/Sass hosted on Github Pages(Like this site!)

https://github.com/hella-web3/hella-site-base

Open this site in a Github Codespace Devcontainer to check out how it works!

The CSS @keyframes rule is the secret sauce for these slick animations that don’t require a single line of JS!

Check out the CSSKeyframesRule docs for more info.

Keyframes control intermediate steps at explicitly set breakpoints in the animation sequence. These steps are also called waypoints and give more control then transitions. Learn more about declaring Keyframes here.

Keyframes Example:

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

In this example we can see keyframes at 0%, 50% and 100% with the background-position property used to define the background image position style for each keyframe.

As you can see, you define specific CSS styles that change over time as the animation progresses.

You can change the angle, position, color or any number of properties over the course of an animation’s duration.

Clever use of CSS functions likelinear-gradient used with ::before or ::after pseudo-elements with properties like box-shadow can create really complex and visually dramatic effects!

This gives you an incredible amount of power and versatility in creating novel animations and interactivity that can really make your UIs that much more intuitive and just plain fun to use.

When a UI just clicks for users, it really is a joy!

Programming isn’t about what you know; it’s about what you can figure out.

- Chris Pine

It is just so intuitive, fun and powerful to create cool new effects with just plain old CSS.

Not that long ago it was a pain just to get stuff centered.

Neon Button Animations

Satisfying Unique Button Hover Animations

You have so much creative freedom to create all different types of animations and behaviors that don’t just look cool but also contribute to a intuitive UX!

In this example, for the first button, we use the :hover pseudo class along with the box-shadow property to create a simple glow mouse-over hover.

The more complex examples, leverage :before, :after, :hover:before and :hover:after pseudo elements to create more unique effects using properties such astransition, box-shadow and background-color.

Live CodePen Example

See the Pen Neon Button Animation by Chris Anatalio (@anataliocs) on CodePen.

https://codepen.io/anataliocs/pen/ZYbKXqV

Box Shadow On-Hover Example:

.btn-1 {
  border: none;
  background-color: #ff9aff;
  box-shadow: 0 0 5px #ef97e8;
}
.btn-1:hover {
   box-shadow: 0 0 10px #ef97e8, 0 0 20px #ef97e8, 0 0 20px #fff inset;
}

The opportunities for creativity are endless!

Much More Fun then a Plain Old Spinner

Eye-Catching Loading Animations with Pure CSS

You can get super creative with really expressive loading animations.

See the Pen Neon Grid Loaders by Chris Anatalio (@anataliocs) on CodePen.

Pure CSS Simulated IDE Coding

This is probably the coolest thing I’ve seen though. Simulating an actual IDE with syntax highlighting with just CSS.

See the Pen Editor Illustration by Chris Anatalio (@anataliocs) on CodePen.

Think twice before spinning up a React app next time you have a static site to build.

I’ve been a long-time fan of Gatsby but this super lean stack has really won me over :)

Clean code is code that is easy to read, easy to understand, and easy to modify.

- Robert C. Martin(Uncle Bob)

Macbook Stickers as Dynamic Interactive Elements

At first, glance, it just looks like a img of a Macbook.

But hover over a sticker and you’ll see each one is actually a interactive element!

See the Pen Personal Concept by Chris Anatalio (@anataliocs) on CodePen.

https://codepen.io/anataliocs/pen/LEpWQNP

I hope you had as much fun as I did walking through the amazing creativity present in our OSS community <3

It’s truly never been a better time to be a developer :D

Hats off to Mozilla and the OSS community for making this stuff happen and hammering away at this stuff until they just really nail it from a developer experience standpoint. Such a joy to work with and spin up a cute, animated, responsive site in just a couple days :D

Thanks for reading! Check out more CodePen here!

What are your favorite Pure CSS animations? Let me know in the comments below!