DEV Community: Lorenzo Zarantonello

Bifrost AI Gateway Would Have Saved My App

Lorenzo Zarantonello — Tue, 28 Jul 2026 06:57:54 +0000

I was showing ChefExtract to some friends when it started returning error 404 for specific operations linked to AI.

After some embarrassment, I went home to figure out the problem: The model I used for those specific operations had been deprecated.

And just like that, my app was failing.

But I learned my lesson: relying entirely on one API creates a single point of failure (not rocket science).

The easiest fallback mechanism would be to rely on a backup model. But these increase maintenance, and it doesn’t scale well. A better fix relies on AI gateways.

What is an AI gateway?

An AI gateway is a middleware layer that sits between your application and the LLM providers. Instead of your code calling OpenAI or Anthropic directly, it calls the gateway, and the gateway forwards the request.

Concretely, a gateway buys you four things:

One API for many providers. Write your code once, switch between GPT, Claude, Gemini, or a local model without rewriting anything.
Automatic failover. If your primary provider fails or deprecates your model (as it happened to me), requests reroute to a backup. Users never see a 404.
Cost control and caching. Budgets, rate limits, and cached responses for repeated queries, enforced in one place instead of scattered across your codebase. This is especially useful when relying on models from different providers.
Observability. Every request is logged, timed, and priced, so “why is our AI bill so high?” becomes a query instead of an investigation. Once again, this is especially useful when dealing with multiple models from different providers.

This is exactly what my app needed. Failover alone would have turned my deprecated-model incident into a non-event.

Enter Bifrost

There are many AI gateways, but eventually I explored one called Bifrost because it is open source and you can see how it operates under the hood.

Bifrost is an open-source AI gateway built by Maxim AI and written in Go.

Bifrost bridges your app to more than 20 providers: OpenAI, Anthropic, AWS Bedrock, Google Vertex, Azure, Groq, Mistral, and even local models via Ollama. This is more than enough to handle failovers.

Also, another good thing is that getting started is a one-liner:

npx -y @maximhq/bifrost

That launches the gateway with a web UI at localhost:8080. Then you change one line in your existing code:

# Before
base_url = "https://api.openai.com"
# After
base_url = "http://localhost:8080/openai"

That’s it. Your code keeps working, and you’ve just gained failover, load balancing, and observability without touching your business logic.

Core features

For my needs, Bifrost AI gateway is the real deal here. These are the main features and how I use them:

Drop-in replacement. Bifrost speaks the OpenAI, Anthropic, and Gemini API formats, so the existing SDKs work unchanged. This was important for me not to change the code too much.
Automatic fallbacks. This is the main reason to adopt an AI Gateway. Define a chain like gemini-3.6-flash then gpt-5.6-sol, and more as backup if you want. Bifrost switches providers automatically when one fails. This is the feature that would have saved my app.
Load balancing across keys. Distribute traffic over multiple API keys, so no single key hits its rate limit. I am not pretending this would be used by everyone. But in a few cases, I’m distributing traffic to stay within the free tier. This is real money I’m not spending.
Semantic caching. Similar questions get cached answers, cutting both latency and cost for repetitive workloads. Big model providers offer these off the shelf so I am not sure how much this helps. But most likely, it doesn’t harm more than a few microseconds of latency.
Built-in observability. Native Prometheus metrics and OpenTelemetry tracing, plus a dashboard that shows every request in real time. I think most personal projects don’t care about this. However, as soon as they grow, this kind of observability can be very helpful.
MCP gateway. Bifrost acts as both an MCP client and server, so it can connect AI models to external tools and expose those tools to clients like Claude Desktop and Cursor with allow-lists controlling who can use what. For a solo developer or a small team, this is already a complete package.

Built-in observability and the MCP Gateway can be more useful for enterprise users. And this is what sets Bifrost apart.

If the project grows, then Bifrost scales very well.

Scalability

For many, scalability is boring and a secondary thought until a client asks you to provide audit logs, RBAC and provision users through SSO.

Scalability isn’t just about requests per second. It is organizational scale: what happens when AI access goes from three engineers experimenting to two hundred people across twelve teams, and someone in finance asks why the AI spend has no owner.

Bifrost has an Enterprise option just for that. What I find elegant is how they compose into a single pipeline.

Access Profiles. Reusable policy templates allow providers, model whitelist, budget, rate limits, even permitted MCP tools attached to a role. Every user in that role inherits those settings.
User Provisioning (OIDC + SCIM). Most startups don’t think about this until a customer won’t sign a contract unless they get authentication through SSO. Bifrost supports SSO via OIDC and real-time provisioning via SCIM 2.0, mapping Okta, Microsoft Entra, or Google Workspace groups into Bifrost roles and teams.
Role-Based Access Control. Three system roles ship out of the box — Admin, Developer, Viewer + custom roles with view/create/update/delete toggles. As soon as you get enterprise customers, this is the way to go.
Audit Logs. Every administrative action is recorded. This is the boring part that delays contracts. Is your startup SOC 2, GDPR, HIPAA compliant? Audit logs don’t make you compliant by themselves, but you won’t get through those audits without them.

Obviously, this is in the paid Enterprise tier, not the open-source core. But I’d rather use A free version that allows me to scale as I need, rather than one that doesn’t.

The takeaway

In my opinion, Bifrost might be overkill if you’re a solo dev using a single LLM provider and a single model. However, as soon as you start connecting different models from different providers, you should consider it to get fallback mechanisms, one unified API and caching off the shelf.

AI gateways are becoming what load balancers became twenty years ago: boring, invisible, and mandatory plumbing.

My 404 incident was small, a deprecated model and some embarrassment. But it’s the same failure mode, in miniature, that takes down production systems at scale.

A gateway turns that entire category of problem into configuration.

Bifrost makes a strong case on both fronts: a fast, free, open-source core for developers, and serious governance machinery for the organizations that come after them.

Overall, if your app talks to more than one model, changing one base URL is a very cheap insurance policy.

Stop Paying $20/month. Use NVIDIA Build: 80+ Free AI Models

Lorenzo Zarantonello — Wed, 17 Jun 2026 10:08:29 +0000

This is a TLDR of a longer article where I tried multiple free AI models on Cursor and VS Code, through Cline.

The service is called NVIDIA NIM e.g. NVIDIA Inference Microservices.
It lives at build.nvidia.com.

The catalog contains over 100 AI models, many of them free and hosted on NVIDIA's own DGX Cloud infrastructure. The list includes names you already know:

MiniMax,
Kimi,
DeepSeek,
GLM,
GPT-OSS, and more.

Get Your Free API Key

Just go to build.nvidia.com and create a free account. You'll need to verify your email and possibly your phone number.

Once you're in, navigate to your account settings and generate an API key. Save it, because you only see it once. It looks like this:

nvapi-xxxxxxxxxxxxxxxx

You get 1,000 free inference credits on signup, with up to 5,000 available on request, and a rate limit of 40 requests per minute. No credit card required.

Use the API key with Cursor

Read about some of the issues with Cursor.

In Cursor, go to Settings → Models, enable the OpenAI API key toggle, paste https://integrate.api.nvidia.com/v1 as the override base URL, and add your nvapi- key.

Use the API key with Cline

Setup takes under two minutes:

Install Cline from the VS Code or Cursor Marketplace
Open Cline settings and select OpenAI Compatible as the provider
Set the base URL to https://integrate.api.nvidia.com/v1
Paste your nvapi- key
Enter the model ID from the NVIDIA catalog (e.g. moonshotai/kimi-k2.6). Remember to get an API key for the model.

Cut Your Claude Token Consumption By 70x

Lorenzo Zarantonello — Wed, 03 Jun 2026 11:58:17 +0000

A recent open-source tool can help you cut your token consumption by up to 70x!

The tool is called Graphify and is enjoying a well-deserved hype!

What Graphify Does Differently

Graphify directly addresses token consumption in a simple and smart way.

You run it once.

It reads your entire project using an AST parser (tree-sitter, which supports 31 languages) and builds a knowledge graph that maps relationships, dependencies, and the most interconnected concepts in your code.

From that point forward, your AI agent doesn’t re-read files. It navigates the graph.

The benchmark from the author: 70x fewer tokens consumed per session!

All of that boils down to three output files:

graph.html — an interactive visualization you can open in any browser
GRAPH_REPORT.md — a readable summary of key concepts and surprising connections
graph.json — the full queryable graph for agents to use directly

Three More Reasons To Use It

Obviously, the first and most important reason is the reduction of token consumption. But this is not the only one.

It’s not just for Claude Code. Cursor, Codex, OpenCode, Copilot CLI, Gemini CLI, GitHub Copilot Chat, Aider — the list goes on. If your agent can read files, it can query the graph. The tool supports over 15 platforms out of the box.
Every relationship in the graph has a confidence tag. EXTRACTED — pulled directly from the code. INFERRED — logically deduced. AMBIGUOUS — uncertain. This is the kind of honesty most AI tools quietly skip. You always know what was found versus what was guessed. Then you can use Claude itself or other AIs to fix it.
It identifies “god nodes.” God nodes are the most connected concepts in your project, the cornerstones, or the pieces that everything else flows through. If you’ve just inherited a large codebase you didn’t write, god nodes are the first place you look, the busiest intersections. It’s the architectural map you never had time to draw.

On top of these reasons, the GitHub repo has over 53,000 stars.

That’s a positive, strong signal.

Once you try Graphify, you change the way you approach a codebase: the graph approach changes how you think about AI-assisted development.

Instead of dumping context, you query it.

How to Install It

Requirements: Python 3.10+ and uv. That’s it.

uv tool install graphifyy
graphify install

Then open your AI assistant and type /graphify.

And that’s it.

MIT license. Free. Open source.

I hope your $20 plan will take you further!

Chrome extensions suggestions? Plain JS or template/framework?

Lorenzo Zarantonello — Thu, 22 May 2025 08:31:06 +0000

Lovable vs Bolt — What's Best?

Lorenzo Zarantonello — Wed, 14 May 2025 08:16:34 +0000

I decided to compare Lovable and Bolt on the same task.

For this test, I didn’t require any external connection e.g. no DB, APIs, etc. However, the app I wanted is more complex than a simple landing page.

Here is my unfiltered point of view.

As a bonus, we can get 200k more tokens if you sign up for Bolt with this referral link! Let's do it!

Prompt

A detailed input increases the chances of a good first outcome. This is hands down the first and most important take-away, IMO.

Here is the initial prompt I used:

Create a word search game with a 5x5 grid where words can be found 
horizontally, vertically and diagonally.

For inspiration, draw from classic word search puzzle designs with a modern, 
clean interface that's both engaging and user-friendly.

For this first version, implement:

- A 5x5 letter grid with randomly generated puzzles
- Words placed horizontally, vertically or diagonally
- Word selection by clicking/tapping and dragging
- A selected letter changes the background color to a darker shade
- A word list to find. By default, 
  the word list is hidden and it can be toggled to be visible
- Visual feedback when a word is found. All the letters 
  of that word change their background color to a green shade
- Responsive design that works on mobile and desktop
- Game completion detection and celebration

For the color palette, I'm thinking:
Primary: #8B5CF6 (purple)
Secondary: #F97316 (orange)
Accent: #0EA5E9 (blue)
Background: #F6F6F7 (light gray)
Text: #1A1F2C (dark)
Highlight: #D6BCFA (light purple)
While Lovale is a pretty straightforward tool, Bolt immediately offers more customization, like the following. Also, it offers the possibility to use AI to enhance the prompt.

For the sake of a good comparison, I simply used the prompt above with both Lovable and Bolt (Bolt offers more customizations).

While Lovable failed to create a working prototype, Bolt crushed it.

Lovable — I could partially play with the app. Clicking a letter would change its background color, but clicking again would not revert it to the original color (To be fair, I didn’t ask for it). Once all words were selected, nothing would happen.
Bolt was simply working. I would need to drag the cursor to select the letters, and it would not work by clicking. So that is something that could be improved. However, the app works fine with one prompt! UI & Design See for yourself below.

UI, dragging issues, and smooth implementation

Lovable seems to follow the prompt quite well, and the UI is good for a first try.

This was expected, as in a previous experiment with Lovable, the design turned out to be pretty good on the first try.

However, it has a strange behaviour that, I guess, tries to emulate a dragging selection. When I click on a letter and move the cursor over other letters, it selects those as well.

The dragging selection is not good.

On the other side, Bolt shows a good UI.

Even though it doesn’t quite follow some instructions, like the Background: #F6F6F7 (light gray), the UI looks pretty good and better organized than Lovable.

So, at this point, Lovable doesn’t quite work, or at least it is not a ready prototype, while Bolt is almost done!

Chatting with AI

It’s time to use the chat to fix the issues.

Lovable chat was helpless. That’s it, not much to add because I quickly ran out of my five daily credits (more on pricing below). It seems the chat pretends to fix the issue, while nothing changes.
Bolt chat was helpless. I ran out of credits before I could get the app to select words by clicking one letter at a time. While Bolt chat couldn’t help much, the starting point seems promising! Words are placed horizontally, vertically, and diagonally as requested in the prompt.

The dragging selection is smooth and doesn’t create issues like I experienced with Replit.

Very good result for a quick MVP!

Pricing

Both platforms offer a free plan.

Lovable plans

5 free credits a day. Lovable offers 30 free credits a month and a maximum of 5 per day. One credit is one prompt.
$25/month for 130 credits. The next plan is $25/month, with only monthly billing. That gives you 130 credits e.g. 100 credits, on top of the 30 credits you get with the free plan. So, that’s about 130 prompts/messages per month.
Lovable doesn’t seem to offer a yearly plan.

Bolt

150k free tokens. Bolt offers 150k free tokens, and you can get 200k more tokens if you sign up with this referral link. (If you sign up with the referral link, I will also get 200k tokens at no cost to you) Having said that, the way tokens are consumed is hard to understand and compare with Lovable (More on usability below)
$20/month with 10M tokens. Roughly, I consumed 150k tokens with the initial prompts and three follow-up prompts. Which means I should get about 250/300 prompts/month. However, this is a guess, at the moment. Does a similar plan (430 credits) cost $100/month in Lovable?
Bolt offers an $18/month yearly plan.

All these things are my interpretation, and you should check for yourself before paying.

Lovable vs Bolt

It is also worth comparing the two from a usability point of view.

Lovable seems much more intuitive, and it shows a greater attention to detail. For example:

Lovable

Lovable has a “Dev Mode” that lets you toggle between the visual preview of your app to an IDE-like view. They even got bullied by Figma for using the term Dev Mode. Figma tells AI startup to stop using the term ‘Dev Mode’
Very straightforward pricing plan. It’s easy to understand what you get. However, why not include a yearly plan?
Lovable requires a GitHub repo to interact with code through an AI assistant. This might create some friction for non-developers.

Bolt

It is fairly easy to toggle between the Preview and the Code view
The pricing plan is a bit of a mystery. It is hard to understand what a token is worth. Conversely, it is reasonable to assume that different requests consume more or less “power” e.g. API call?
Conclusion
Style-wise, Lovable and Bolt produce good-looking applications.

If you get your app working on the first prompt, Lovable is your tool! However, I found the chat quite unreliable for fixing issues or adding functionalities.

The same can be said about Bolt! The chat didn’t quite improve the app, and consumed the tokens quite fast.

However, I am happy with Bolt’s improvements since the last time I tried it out. Good work there!

Also, surprisingly, Bolt is the only one offering a referral mechanism!
If you enjoyed this article, let's show it by joining Bolt with this referral link to get us both 200k tokens!

Strawberry AI Browser Will Blow Your Mind

Lorenzo Zarantonello — Thu, 24 Apr 2025 12:54:36 +0000

What Is Strawberry?

According to their website, “Strawberry is a browser with built-in AI assistants that work alongside you on any website.”

I am telling you, this is an understatement!

This is not another regular product jumping on the AI bandwagon by plugging in a chatbot using OpenAI.

Strawberry is a browser like Chrome and Edge, but it comes with something called Companions.

Companions are AI agents that can do tasks online autonomously while you do other things!

Let’s See A Real Example — Strawberry, Get Me Venues Data

Here is a real case example.

I had to get some social data (Email, Instagram, TikTok) for some restaurants I found on Google Maps.

Now, at scale, you could use the Google Maps API but they don’t give you Instagram and TikTok data.

Thanks to Strawberry, I could do it quickly and effectively!

No need to mess with APIs, no need to find a way to match restaurant names and their social handles on some table.

The prompt

Here is my prompt:

For each of these restaurants, find me an email, 
phone number, Instagram handle and TikTok profile if available, 
Return the data in a table format with the following columns: 
Restaurant name, email, phone, Instagram, TikTok

As you can see, I was using the companion named Lora, which is available on the left panel.

Lora is the standard companion and it works crazy well, although I didn’t set up any

instructions,
memories, or
skills

Think of these as context and what ChatGPT calls memory!

The research

Look at the tabs!

Strawberry autonomously opened those tabs to search for the info I asked.

When I took the screenshot, it just started with Google Maps and then went on with more tabs to research social media info for each of the restaurants.

On top of that, there is a natural dialogue with the companion on the left panel.

I find it useful for unexpected situations, like the following:

Based on the research results, 
I can now present the information in a table format. 
But first, 
let me run one more search batch to confirm Ave Mario's phone number 
which wasn't found in the first batch.
Now, I know there might be a problem with a venue called Ave Mario.

While Strawberry finishes the work, I can work in another tab as usual, which is pretty cool.

The result

See for yourself!

It created the table as I wanted, and it explained the exceptions and so on!

This took maybe a minute or two.

The entire process would take me maybe 30 minutes, so let’s say I saved 90% of the time it would normally take.

More Use Cases?

Well, the potential is really limitless!

These are a few things I came up with:

Open my Instagram page and get the description of the first three posts in my feed. If there is a … more text, click on more to read the entire text
Open [pretty much any social] and write the following post…
Given this Reddit post, read the question, and for each of the first three replies, come up with an appropriate follow-up question or sentence — You can see where this is going for marketing purposes

Why Should You Care About Strawberry?

Well, Strawberry will change the way people work and carry out tasks.

Until now, developers and programmers could create software to do repetitive tasks.

Now everyone can do it!

A few things stood out:

This is going to be huge for workflow automation — Any browser-based task — data entry, email drafting, research, etc — can be automated, saving hours.
Contextual Learning — Strawberry’s AI Companions get smarter over time, learning my preferences and way of working.
Approval-Based Actions — This is really good if you need to work with socials and automate some tasks on the go. Strawberry always asks for approval before executing actions.

Conclusion

The AI Browser revolution is here, and Strawberry is leading the charge.

By integrating intelligent assistants directly into a browser, Strawberry automates tasks and workflows, saving you time.

In a recent update, it is even possible to update videos of how to carry out a task and the Companion will follow the video as instructions!

This is pretty revolutionary and I will write more about it as I explore Strawberry.

Three Ways to Fight AI Crawlers

Lorenzo Zarantonello — Thu, 03 Apr 2025 14:49:20 +0000

Until recently, websites were pushing for web crawlers to index their content properly.

Now, a new type of crawler, AI crawlers, is changing the game, with negative repercussions on open source content and increasingly on companies that rely on content.

Here is how to fight back.

Why AI Crawlers Are Bad For The Internet As We Know It

In short:

Spikes in costs for the website owners
Outages or performance issues for the users
DDoS outages — In the worst cases

Eventually, you get to the case of the founder of TechPays.com, where he noticed an over 10x increase in data outbound and over 90% of the traffic was AI crawlers.

Why Is This A Problem?

Because the content is scrapped for free and will then be sold to you through OpenAI, Meta AI, and whatever.

Three Ways to Fight AI Crawlers

So here are three ways to fight AI crawlers with their pros and cons.

Using JavaScript
Deploying AI Tarpits and Labyrinths
Rate Limiting and Advanced Filtering

Using JavaScript

It seems AI crawlers struggle with JavaScript-heavy websites!

AI crawlers like GPTBot (OpenAI), Claude (Anthropic), and PerplexityBot have difficulty processing, or don’t process at all, JavaScript-rendered content.

While they fetch JavaScript files, they don’t execute the code, which results in useless content from the scraper's point of view.

Fight AI Crawlers Deploying AI Tarpits and Labyrinths

Tarpits are tools designed to trap AI crawlers in an endless maze of content, wasting their computational resources and time while protecting your actual content.

These tools create dynamic networks of interconnected pages that lead nowhere, effectively preventing crawlers from accessing legitimate content.

Fight AI Crawlers Using Rate Limiting and Advanced Filtering

Setting up geographical filtering with challenges (like CAPTCHAs or JavaScript tests) for visitors from countries outside your target market can significantly reduce unwanted crawler traffic.

A few examples:

The sysadmin of the Linux Fedora project had to block the entire country of Brazil to combat aggressive AI scrapers!
The founder of TechPays.com also tried this before moving to stronger measures like turning on Cloudflare’s AI crawler block

Find more techniques to deal with AI crawlers, but this is a pretty good starting point.

Final Considerations

Most likely, a good approach consists of a combination of several techniques like IP blocking and Cloudflare’s AI crawler blocking.

Furthermore, tarpit technologies and advanced rate limiting seem to be more robust against aggressive crawlers.

Obviously, you don’t want to block completely all AI crawlers because it could potentially hide your content from human visitors who rely on AI-powered searches to find your site.

What Is React Compiler?

Lorenzo Zarantonello — Wed, 23 Oct 2024 13:16:23 +0000

React compiler is a new experimental compiler that promises to revolutionize the way React applications are optimized for performance.

You can read and listen to this article in a podcast format at this free Medium link.

What Is A Compiler?

In short, a compiler is a program that translates one programming language (the source language) into another (the target language).

A compiler translate a source language into a target language

For example, JSX and TSX are compiled into JavaScript (with Babel or others) for the browser to understand the code.

Why A New React Compiler?

One of the main reasons I have heard is Performance Optimization.

Sometimes, React applications suffer from unnecessary re-renders, leading to performance issues.
Developers can optimize the code using memorization, callbacks, and the like. But often this translates into a cluttered component filled with memoization calls.

What is the React Compiler solution?

Briefly speaking, React Compiler should automatically optimize your code, reducing the need for manual performance optimization.

As a consequence, React Compiler should improve app responsiveness.

Let’s dive into it.

What Is React Compiler?

React compiler is an experimental compiler already available in React 18. It is, and most likely will be, an optional tool even in React 19.

Using React Compiler in React 18 requires some manual configuration but you can already try it.

The React Compiler is designed to work within the ecosystem of React 19

Install React Compiler

While React Compiler is used in production at Instagram, it is open-sourced as beta and available on React 17+.

The compiler comes with a strongly recommended eslint plugin that shows the compiler analysis in the editor.

You can use the eslint plugin even if you are not using React Compiler.

React Compiler Healthcheck

Before installing React Compiler it is recommended to check compatibility.

Run the following command:

npx react-compiler-healthcheck@beta

to get a result like below:

Output of npx react-compiler-healthcheck@beta
Output of npx react-compiler-healthcheck@beta

A higher number of compiled components is a good thing. That is the number of components that can be successfully optimized.

My StrictMode is not enabled but having this enabled and followed means a higher chance that the Rules of React are followed.
So we should probably keep it enabled.

Finally, react-compiler-healthcheck checks for known libraries that are incompatible with the compiler. I have none, but MobX will give you problems. It won’t work.

Installing React Compiler

Install React Compiler using npm:

npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

Or, if you’re using Yarn:

yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

You should also add the eslint plugin to the config. In my case, it is a .eslintrc.js file.

module.exports = {
  plugins: [
    'eslint-plugin-react-compiler',
  ],
  rules: {
    'react-compiler/react-compiler': "error",
  },
}

Once eslint plugin is set up correctly, you might get some warnings about the Rules of React. You can update them on the spot or later.

The only difference is that in the second case, React skipped optimizing that component or hook.

You can read and listen to this article in a podcast format at this free Medium link.

Angular Is Your Best Shot To Land A Frontend Job

Lorenzo Zarantonello — Thu, 17 Oct 2024 07:59:56 +0000

According to the 2024 Stack Overflow Developer Survey, most people who learn to code learn React.

Learners Market

Not too bad, many jobs position requires React.
However, look at the following table.

This table tells you how many people are learning a certain framework among the people who are learning to code.

React — 36.6%
Next.js — 17.9%
Flask — 17.3%
Django — 14%
Vue — 11%
Svelte — 10%
Angular — 9%

Do you see anything strange?
Maybe not.

Let's look at the job market.

Job market

I did a quick search on LinkedIn.
Clearly, it's not a bulletproof statistical analysis but maybe it can give you a hint.

This table shows the number of jobs mentioning a certain framework in the US, Germany, and India (LinkedIn).

Conclusions

As I said, this is a very rough exercise.

Job positions requiring Angular are second to React and well ahead of any other frontend framework.
Only 8% learn Angular, while 30% to 40% of job positions require Angular.

Given this asymmetry, Angular might be your best shot at landing a front-end job.

Free link to the full post.

Three Examples of How AI Expands Developers' Roles

Lorenzo Zarantonello — Tue, 13 Aug 2024 11:56:00 +0000

Here are three tools to expand developers' roles and productivity. You can start to use them right now.

GitHub Copilot - Generic Developer Assistant
JIRA AI - Developers Expand Into Product Owners
EarlyAI - Your AI Test Engineer

GitHub Copilot - Generic Developer Assistant

By now, every developer should know Copilot. So, I won't spend too many words about it.
It's a generic coding assistant that can support your development activities.
It's not perfect but here are a few use cases I like:

Quick questions without leaving my IDE
Create mock data to display something

JIRA AI expands developers' roles into Product Owners

Now, JIRA doesn't really shine among developers. JIRA is a Frankenstein project management tool developed by Atlassian to "do a lot of things".

Sometimes, I feel that JIRA gets undeserved criticism because the problems come from the inability to master and use the tool efficiently rather than from its flaws.

Atlassian, the company behind JIRA, hopped on the GenAI train enabling AI editing across Atlassian products.

Now this might seem like prompt engineering. But I was positively surprised when with this flow:

Write a good technical prompt describing the problem
JIRA AI broke down the problem into smaller actionable sub-tasks
Each sub-task was correctly assigned to a newly created ticket

In such a workflow, technical knowledge is very relevant, and that knowledge is too often missing in non-technical POs.

EarlyAI by Early provides an AI test engineer to every developer

Having an AI test engineer by your side has never been easier.
If Copilot is a generic coding assistant, EarlyAI is super focused on unit tests and closer to becoming an AI agent for the specific task of high-quality unit test generation.

EarlyAI creates entire test suites in one click.

Honestly, I find the phrasing "30 green unit tests in less than a minute" an understatement. At the moment, I am migrating a Next.js project from using Pages Router to App Router.

Since it was supposed to be "just a side project" I didn't write tests.

Now, the project has grown quite a bit, and touching code and libraries without proper testing is guaranteed to cause some issues down the line.
In this case, I am using EarlyAI to cover my blind spots while migrating the project.

Here is an example of the generated test suite EarlyAI created.

// addDocument.early.test.ts

import { db } from "../../firebase";
import { collection, doc, setDoc, getFirestore } from "firebase/firestore";
import { addDocument } from "../addData";

// Mocking the Firestore functions
jest.mock("firebase/firestore", () => ({
  collection: jest.fn(),
  doc: jest.fn(),
  setDoc: jest.fn(),
  getFirestore: jest.fn(),
}));

describe("addDocument() addDocument method", () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe("Happy Path", () => {
    test("should add a document successfully to the specified collection", async () => {
      // Arrange
      const collectionName = "events";
      const event = { name: "Test Event" };
      const mockResult = { id: "123" };
      (setDoc as jest.Mock).mockResolvedValue(mockResult);

      // Act
      const { result, error } = await addDocument(collectionName, event);

      // Assert
      expect(collection).toHaveBeenCalledWith(db, collectionName);
      expect(doc).toHaveBeenCalled();
      expect(setDoc).toHaveBeenCalled();
      expect(result).toBe(mockResult);
      expect(error).toBeNull();
    });
  });

  ...
});

And the successful test run.

Was it perfect the first time? No.
Despite that, it probably saved me 1h or so for each test suite and got me to a good position in one click.
I am sure the team will keep improving the product and will naturally add E2E tests with time.

Conclusions

Given the current trajectory of developers' roles and responsibilities, we could extrapolate that every developer will be empowered and expected to do more.

Any generic coding assistant, JIRA AI, and EarlyAI can expand individual developers' capabilities to become team leaders with a team of AI agents in different disciplines (Coding, Product, Testing).

This is also true for indie hackers! The cost of creating software, hosting websites, and using DBs has never been cheaper. On top of that, more and more AI agents can support developers across different tasks.

Overall, every individual developer will be supported by AI to create more complex and quality software, at unprecedented speed.

Next.js - App Router

Lorenzo Zarantonello — Tue, 30 Jul 2024 13:40:00 +0000

In previous posts, I tried Next.js using the Pages router. In this post and the following, I am exploring the new App router.

Creating The Application

To create a project with Next.js version 14, you simply need to start a command from the terminal by using

npx create-next-app@latest

The "latest" option will download the latest version of the framework. All project dependencies will be installed, and then you will be asked to enter the project's name.

I kept the default selection, meaning that we will use

TypeScript
Tailwind CSS
ESLint
The app Router

Note that all project files will be available in the root folder because there won't be a src folder.

Once the installation is complete, navigate inside the project folder. In my case:

cd next14-app-router

and start the server that will serve your Next.js app on http://localhost:3000/ with the command

npm run dev

You can see this and other commands in the script object of the package.json file in the root folder of your application (in my case, inside the folder named next14-app-router).

Also, the dependencies object shows I am using version 14.0.1 of next which allows us to install Next.js.

Now that the project is running, it is worth it to get an idea of the files and folders that were created by default.

Application folders and files

From top to bottom, we have:

.next - Stores cache files to speed up the development and build process. It also contains server files to handle server-side-rendering (SSR), and other minified files to serve the app.
app - Contains components, logic, and routes of your application. We will mostly work inside the app folder.
public - Contains images you use in your app (e.g. static files)
.eslintrc.json - Configuration file for lining
.gitignore - Defines what should not be tracked by git
next-env.d.ts - TypeScript declaration to improve type-checking
next.config.js - Configuration file for Next.js
package.json & package-lock.json define your project dependencies
postcss.config.js, tailwind.config.ts, tsconfig.json - Configuration files, respectively for CSS, Tailwind, and TypeScript compiler
README.md - Can be used to explain your project or include relevant info

The app folder

Inside the app folder, you can see a favicon file that is used to add an icon to the tab of the browser in which the app is running.

global.css

A global.css file sets CSS rules that will be used throughout the Next.js project. You can add more CSS by using Tailwind where you need it or by using CSS Modules that will allow you to keep the CSS separate from the JavaScript/TypeScript code.

The global.css file is imported in layout. tsx which is also called the RootLayout component.

layout.tsx

In Next.js, a layout is a component that represents a part of the UI shared among multiple pages. A layout is a good place to manage some global state, global style, or place components that should be displayed on every page (or route) within your Next.js application—for instance a navigation menu.

In the following example, the text I'll be there for you will be there for you on every page of your app because it is part of the RootLayout component.

// layout.tsx

...
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div>I'll be there for you</div>
        {children} // pages passed as children components
      </body>
    </html>
  );
}

Layouts receive the individual pages as children components, through the "children" property. The children property is handled automatically when you navigate to a specific page, allowing the page to be injected directly into the layout.

By default, a layout is applied to all pages in the "pages" directory of your project.

Think of the Layout component as a wrapper for every other component in your Next.js app.

For completeness, I should mention that layout.tsx in RootLayout does a few more things.

It imports the Inter next font and assigns it to the inter variable. Then it is passed as a class to the body element to be used as a default font in the app.
In so doing, Next.js simplifies the way you get and use Google fonts in the app. Find more about font optimization.

It imports Metadata so you can easily set the metadata of your app. If you change the title of the metadata object you will change the title of the tab in which your app is running.

// layout.tsx

...
export const metadata: Metadata = {
  title: "Next14 App Router",
  description: "Generated by create next app",
};
...

You can see these changes in the developer console under the Elements tab inside the head tag. See the bottom of the following image.

page.tsx

The file page.tsx is a default page that contains the Home component.
By default, the initial app will pass the Home component as a child of RootLayout.

By changing Home to the following, you will have a new starting point for your app.

// page.tsx

export default function Home() {
  return <main>Hello Next.js</main>;
}

If you see horizontal lines, just go to global.css and remove the style assigned to the body class so it looks like this:

// global.css

...
body {
  color: rgb(var(--foreground-rgb));
}Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed

At this point, your app should show the sentences "I'll be there for you" coming from RootLayout and "Hello Next.js" from Home.

Warning

You might notice a warning in your console. If the warning is "Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed" or something similar, it means one or more extensions are adding some code to your app while it is executed on the browser.

It is good practice to disable extensions while developing but you can also set the suppressHydrationWarning attribute to true in the body tag in RootLayout.

<body className={inter.className} suppressHydrationWarning={true}>

OneEntry Headless CMS: How To Use It?

Lorenzo Zarantonello — Thu, 27 Jun 2024 08:50:26 +0000

In the CMS context, the term "headless" points to the absence of a front-end or presentation layer. Instead, a headless CMS works with an API (Application Programming Interface), which empowers users to render content on the front end of their choice.

For example, let's say you want to use OneEntry headless CMS for your international e-commerce store. To get started, you would need to take the following steps

1) Set Up OneEntry Headless CMS & Create a New Project

Start by creating a OneEntry account or signing into an existing one. After that, you'll be able to start a new project for your eCommerce store. This will entail selecting a name for it and picking the pricing plan that matches your goals best.

2) Add Content

Before starting to work with the API, you will need to add content to your new project via the "Content Management" section. In this case, it would mean inputting such details as:

Product images
Item descriptions
Pricing information

What's more, since the e-commerce we are discussing is supposed to cater to an international audience, you would also need to set up localization for multiple languages and regions.

3) Set Up APIs or SDKs

Now, your task is to establish communication between your front end and OneEntry CMS via APIs or the SDK.
Add content manually, through the API or the SDK.

API

If you decide to use the API, begin by generating authentication API keys. They will serve as the gateway to secure and authenticate your interactions with the headless CMS.

You will also need to configure the API endpoints within OneEntry CMS, which will enable your e-commerce store to seamlessly fetch data.

SDK

If you decide to use the SDK, just run the handy command:

npm install oneentry

At this point, you simply need to import the defineOneEntry function and start using the methods you need as shown in the usage documentation.

4) Build Your E-Commerce Store

The next step is to select a front-end framework for your e-commerce store. This is also the time when you build all the essential e-commerce features like product pages, the shopping cart, and the checkout page.

After that, you can use the API keys and endpoints to integrate OneEntry CMS data into your eCommerce front end.
This integration allows for dynamic fetching and real-time display of product information.

Similarly, if you opted for the SDK, you have a similar degree of flexibility by using multiple methods, for instance, getProductsPageById, getProductByIdfilterProduct, and so on.

5) Test Your E-Commerce Website & Deploy It

Before your e-commerce site goes live, it is crucial that you thoroughly test it and ensure proper data retrieval from the headless CMS. Once you are sure everything works as it should, you are ready to deploy your store to the hosting platform of your choice.

Finally, remember that the journey doesn't end post-deployment. Regularly audit content with the help of OneEntry CMS's user-friendly interface to keep product information and other relevant data up-to-date.

Main Benefits of OneEntry Headless CMS

If you would like to learn more about the setup process, check out the step-by-step instructions provided on the OneEntry website and YouTube channel!

Yet, even without going further into detail, it is clear to see that one of this system's key benefits is its straightforward implementation.
Some other advantages OneEntry boasts compared to other headless CMSs in the market are:

User-friendly interface
Easy-to-scale backend
Fast API, along with clear documentation and responsive support
PostgreSQL, MySQL, and MongoDB bases
Intuitive content management logic
Virtual storage on state-of-the-art servers
Simple export of products and services from YML or CSV files
Daily backups and advanced cybersecurity measures

In short, OneEntry wants to position itself as a one-stop solution for all your content management needs, regardless of how multifaceted they are.

Final Take

OneEntry Headless CMS offers several features that can help you boost your content management processes. It is versatile and the OneEntry team is adding even more features to make the product more compelling.
After all, its use cases expand way beyond e-commerce platforms. OneEntry headless CMS could be used for:

Corporate websites
Blogs and journals
Mobile apps
Educational platforms
Digital exhibitions & interactive installations
Omnichannel commercial platforms
Portfolios
Service offerings

I will explore and write more about this solution, but in the meantime feel free to give it a try.

DEV Community: Lorenzo Zarantonello

Bifrost AI Gateway Would Have Saved My App

What is an AI gateway?

Enter Bifrost

Core features

Scalability

The takeaway

Stop Paying $20/month. Use NVIDIA Build: 80+ Free AI Models

Get Your Free API Key

Use the API key with Cursor

Use the API key with Cline

Cut Your Claude Token Consumption By 70x

What Graphify Does Differently

Three More Reasons To Use It

How to Install It

Chrome extensions suggestions? Plain JS or template/framework?

Lovable vs Bolt — What's Best?

Prompt

UI, dragging issues, and smooth implementation

Chatting with AI

Pricing

Lovable plans

Bolt

Lovable vs Bolt

Lovable

Bolt

Strawberry AI Browser Will Blow Your Mind

What Is Strawberry?

Let’s See A Real Example — Strawberry, Get Me Venues Data

The prompt

The research

The result

More Use Cases?

Why Should You Care About Strawberry?

Conclusion

Three Ways to Fight AI Crawlers

Why AI Crawlers Are Bad For The Internet As We Know It

Why Is This A Problem?

Three Ways to Fight AI Crawlers

Using JavaScript

Fight AI Crawlers Deploying AI Tarpits and Labyrinths

Popular Tarpit Solutions

Fight AI Crawlers Using Rate Limiting and Advanced Filtering

Final Considerations

What Is React Compiler?

What Is A Compiler?

Why A New React Compiler?

What is the React Compiler solution?

What Is React Compiler?

Install React Compiler

React Compiler Healthcheck

Installing React Compiler

Angular Is Your Best Shot To Land A Frontend Job

Learners Market

Job market

Conclusions

Three Examples of How AI Expands Developers' Roles

GitHub Copilot - Generic Developer Assistant

JIRA AI expands developers' roles into Product Owners

EarlyAI by Early provides an AI test engineer to every developer

Conclusions

Next.js - App Router

Creating The Application

Application folders and files

The app folder

global.css

layout.tsx

page.tsx

Warning

OneEntry Headless CMS: How To Use It?

1) Set Up OneEntry Headless CMS & Create a New Project

2) Add Content

3) Set Up APIs or SDKs

API

SDK

4) Build Your E-Commerce Store

5) Test Your E-Commerce Website & Deploy It

Main Benefits of OneEntry Headless CMS

Final Take