Forem: Lorenzo Zarantonello

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.

Create A Simple Website with OneEntry Headless CMS

Lorenzo Zarantonello — Thu, 09 May 2024 07:46:07 +0000

Generally speaking, OneEntry Headless CMS offers a streamlined solution with user-friendly interfaces, and intuitive tools to simplify the website creation process.

Any website created with OneEntry is supported across different platforms and devices allowing for a mobile-first approach for the ones who want it.

Even though these characteristics make the creation of a multi-platform website very intuitive, the deployment can be trickier compared to traditional solutions like WordPress.

Anyway, here is my experience creating a website using OneEntry Headless CMS.

Registration and Plan Selection

First of all, register on the OneEntry Headless CMS website.
Head over to OneEntry and sign up for an account.
Upon registration, you'll receive a 100% free promo named "Free Plan Discount."

Thanks to this offer you can try OneEntry Headless CMS at no cost and without sharing any credit card details. In other words, it is possible to explore the platform's features without any financial commitment, which is definitely a positive aspect.

Once registered, you can add a project name and subdomain name. Finally, you can select a plan according to your needs.

Whether you’re a business owner looking to establish an e-commerce website or a developer seeking advanced customization options, OneEntry Headless CMS offers a range of plans to accommodate diverse requirements.

Once you’ve filled in the necessary details, sit back and relax while it creates your project. This automated process may take a few minutes.

Access Your Admin Panel

Once your project is up and running, it’s time to dive into the heart of OneEntry Headless CMS: The admin panel.

Click on your project card and go to the ‘Access’ tab.

Here you can see some info about your project. Click on the URL to access your admin panel. Here, you’ll be prompted to enter the login credentials sent to your registered email address during the registration process.

Let’s Build a Demo

Now that you have access to the admin panel, it is time to work on the website.

Let’s walk through the process of creating a dummy site with a nested menu and a contact form as an example.

1. Create Pages and Content

In the ‘Settings’ section, you’ll have the option to create pages for your website. Let’s start with the homepage. Enter a page name, such as ‘Home,’ and specify any additional attributes, such as header title and image.

Simply select the desired template, add the page title, and upload any necessary assets, such as logos or images. Thanks to the clear and intuitive interface, this is pretty simple and straightforward.

2. Implement the Contact Us Form

No website is complete without a Contact Us form.

In the following example, we begin by developing a form with fields for name, email, message, and a submit button.

Once the form is created, navigate to the ‘Managing Forms’ section to create a dedicated page for the contact form. Specify the page name, marker, and type (in this case, ‘form’), and then proceed to add the form to the page.

OneEntry Headless CMS offers a built-in form management tool, that allows for validations and other configurations to ensure that the form works as intended.

If you ever worked in web development, you know how form validation can be painful.

3. Set Up Nested Main Menu and Navigation

With all pages and content in place, it’s time to organize your website’s navigation.

We can start by creating a main menu through the ‘Main menu’ section, where you’ll have the option to create a primary navigation menu for the website.

On this page, you can add menu items and sub-items to create a nested menu using the intuitive interface.

Every page, form, and menu is also created to fit the wide variety of devices on the market so you will not need to care about mobile layout or responsiveness as they come by default.

While other CMS like WordPress rely on a myriad of themes and plugins, OneEntry Headless CMS has built-in solutions for the most common cases like building your own menu and forms.

Final Words

OneEntry Headless CMS offers a user-friendly and simple-to-use platform for creating web and mobile applications with ease. From registration to customization, the platform streamlines the entire website creation process, allowing users to bring their vision to life while reducing technical complexity.

I am pleased to see that the platform is regularly adding new features and pushing to simplify the whole development process even further.

Unlike other CMS, you won’t need to rely on third-party tools or plugins to get your work done. Furthermore, in the long term, you will only rely on one company and won’t need to update multiple themes, and plugins from other vendors.

OneEntry Headless CMS: What Is It?

Lorenzo Zarantonello — Fri, 22 Dec 2023 11:44:57 +0000

For quite a long time, traditional content management systems have been hampered by the challenges that come with re-sharing and reusing materials across platforms, developmental bottlenecks, and scalability issues.

However, the advent of headless CMSs has significantly altered the industry and provided users with numerous innovative features and greater flexibility.

In this article, we will take a look at OneEntry Headless CMS, a state-of-the-art headless CMS solution, and explain how it can be used compared to its traditional counterparts, from integration to implementation.

What Are Headless CMSs & How Do They Differ from Traditional Ones?

Before we delve into the specifics of OneEntry's solution, let's review what a headless CMS is.

The primary goal of a headless CMS is to provide a flexible and decoupled approach to managing and delivering content across various digital channels. Unlike traditional CMSs, which typically combine content creation and presentation in a monolithic system, their headless alternatives separate these two layers.

Some other key differences between headless and conventional CMSs that you need to be aware of include:

Front-end dependence. A headless CMS enables developers to use any front-end framework, providing greater flexibility for building websites, mobile apps, or other digital platforms. In the traditional CMS approach, on the other hand, the front end is often integrated into the content management system.
Scaling possibilities. Headless CMS systems are often more scalable as they can handle diverse front-end technologies and are not tied to a specific presentation layer. This makes them suitable for large and complex projects.
Adaptability to innovations. Headless CMS solutions are more adaptable to changing technologies and trends since they are not bound to a specific front-end architecture.

Yet, perhaps the most fundamental distinction between these two CMS types lies in their operational principles.

In a headless CMS, content is delivered via APIs, which allows it to be used in different contexts. In contrast, conventional CMSs typically deliver content in a specific, pre-defined way.

2 - GraphQL Core Concepts: Schema, Resolvers, Query, Apollo

Lorenzo Zarantonello — Thu, 23 Nov 2023 16:39:52 +0000

In this post, we will talk about the core concepts of GraphQL:

Schema,
Resolvers,
Query

In the next post, we will dive deeper into:

Mutations,
Subscriptions.

As said earlier, unlike REST APIs, GraphQL can use a single endpoint to fetch data from a GraphQL API.

In this sentence, you see the dual nature of GraphQL: "GraphQL is a query language for your API, and a server-side runtime for executing queries".

This is important to know because some terminology can be confusing e.g. a client queries the server is simply sending a request in a specific query format. The Query type defines the format from the GraphQL server.

In this post:

lowercase query defines an HTTP POST request.
Query with capital "C" indicates the Query type object in the GraphQL server.

As a side note, all GraphQL requests to the server are HTTP POST.

Let's see some examples to clarify the core concepts.

Schema

The schema is the rulebook that explains what is possible to retrieve from a GraphQL API. Formally, "the schema represents data objects with object types", graphql.com.

A graphQL schema is defined in a file in your backend.

For the sake of simplicity, I initialized a simple backend with npm init and I defined a schema in a file called index.js.

Here is a schema defining a Fruit.

// index.js

type Fruit {
  id: ID!
  name: String!
  quantity: Int!
  price: Int!
}

This is just an example. But it is enough to understand that a graphQL schema roughly resembles a TypeScript type (to me at least).

To be more precise, the object type Fruit, determines that fruits can have four fields: id, name, quantity, and price.

Each field has a type (scalar type).

id has type ID, which is a "special" String because GraphQl makes sure it is unique.
name is of type String,
quantity is of type integer,
price is of type integer

In GraphQL the type of a field (e.g. scalar type) can be one of the following: String, Int, Float, Boolean, and ID.

All fields are required.

The ! symbol indicates that the field is mandatory. In more formal terms, the field should never return null. Note that an empty list [] is empty and not null.

Read more about types (object, scalar, and lists).

"To let us query anything at all, a schema requires first and foremost the Query type. [...] the Query type acts as the front door to the service", graphQL.

The Query type is a special object type (like Fruit).
So, the first Query we add is

// index.js

type Fruit {
  id: ID!
  name: String!
  quantity: Int!
  price: Int!
}

type Query {
  allFruits: [Fruit!]!
}

Testing with Apollo Server

Since we are defining these things server-side, we can quickly test them by installing the Apollo server, as follows:

npm install @apollo/server graphql

Once the installation is completed, change index.js to require ApolloServer. We are also including some dummy data from graphql.com.

At the bottom, we are instantiating a new ApolloServer to which we pass the schema.

Finally, we start the server with startStandaloneServer.

const { ApolloServer } = require('@apollo/server')
const { startStandaloneServer } = require('@apollo/server/standalone')

let fruits = [
  {
    "id": "F2",
    "name": "blueberry",
    "price": 2,
    "quantity": 19
  },
  {
    "id": "F3",
    "name": "pear",
    "price": 79,
    "quantity": 36
  },
  {
    "id": "F1",
    "name": "banana",
    "price": 44,
    "quantity": 84
  }
]

const typeDefs = `
  type Fruit {
    id: ID!
    name: String!
    quantity: Int!
    price: Int!
  }

  type Query {
    allFruits: [Fruit!]!
  }
`
const server = new ApolloServer({
  typeDefs,
})

startStandaloneServer(server, {
  listen: { port: 4000 },
}).then(({ url }) => {
  console.log(`Server available at ${url}`)
})

Now, if you run node index.js you will start the GraphQL server in your terminal. You should see something like "Server available at http://localhost:4000/".

Click on http://localhost:4000/ to open Apollo Sandbox where you can test queries etc.

Resolver: Connecting client queries to schema

The Operation area on Apollo Sandbox allows us to try queries (query the GraphQL server) as if we would send requests from a client.

As an example, the following query (HTTP request) should return all fruit names, but it will fail.

query ExampleQuery {
  allFruits {
    name
  } 
}

In the schema we defined the object type Query as follows:

type Query {
    allFruits: [Fruit!]!
  }

but how do we get from the fruits array to allFruits?

We use resolvers.

Resolver Example 1

Here is one resolver:

const resolvers = {
  Query: {
    allFruits: () => fruits,
  },
};

So our index.js becomes:

...
let fruits = [...]

const typeDefs = `
  type Fruit { ... }

  type Query {
    allFruits: [Fruit!]!
  }
`
const resolvers = {
  Query: {
    allFruits: () => fruits,
  },
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
});
...

Why all of this?
Let's look at it from the client perspective. The client sends a request (a query):

query ExampleQuery {
  allFruits {
    name
  } 
}

The request wants the "name" Field for all objects in allFruits
The Query type in the schema acts as the front door and allows for queries that want allFruits. It also defines that queries to allFruits should return a non-null array of Fruit e.g. [Fruit!]!
The resolver picks up the request and returns the fruits array allFruits: () => fruits.

Resolver Example 2

Let's make another example assuming we want to get the number of fruit objects in the fruits array.

With a REST API, we would need to fetch the whole array and once we receive it, we would do something like fruits.length in the client device.

With GraphQL we can define another field in the schema type Query. The number of fruits is going to be an integer so the schema type Query becomes:

type Query {
    allFruits: [Fruit!]!,
    fruitsCount: Int!
  }

Now we created a new "door" called fruitsCount that will return an integer, e.g. the number of fruit objects in the fruits array.

Where do we get this number? We create a resolver for the fruitsCount field.

So that when a client pings the GraphQL API with a fruitsCount query, we return the number of fruit objects in the fruits array.

Let's update the resolver as follows:

const resolvers = {
  Query: {
    fruitsCount: () => fruits.length,
    allFruits: () => fruits,
  },
};

Now, if a client uses the following query, it will only get an object containing a number:

query ExampleQuery {
  fruitsCount
}

Resolver Example 3

Let's assume we want to find a fruit by its name.

We start by updating the type Query (the "door") in the schema:

type Query {
    fruitsCount: Int!
    allFruits: [Fruit!]!
    findFruit(name: String!): Fruit
  }

We then update the resolver to find and return a specific fruit

const resolvers = {
  Query: {
    fruitsCount: () => fruits.length,
    allFruits: () => fruits,
    findFruit: (root, args) => fruits.find((fruit) => fruit.name === args.name),
  },
};

The findFruit resolver is a bit different but you can read more about resolvers here.

A client could query the GraphQL API as follows to obtain the total number of fruit objects and some specific data on the "pear" object.

query ExampleQuery {
  fruitsCount, 
  findFruit(name: "pear"){
    id,
    name, 
    price,
  }
}

The JSON response would be:

{
  "data": {
    "fruitsCount": 3,
    "findFruit": {
      "id": "F3",
      "name": "pear",
      "price": 79,
      "quantity": 36
    }
  }
}

Query

GraphQL uses queries to retrieve data from a GraphQL API. Each query builds on Types and Fields. In the following example (from grapql.com) we run a Query to get fruits (Type) and prices (Field):

We want to get data of type "fruits"
For each fruit we get, we want the price field

"This query syntax begins with the query keyword, followed by an operation name that describes the request's purpose—like GetFruitPrices."

query GetFruitPrices {
  fruits {
    price,
    name
  }
}

The response is:

{
  "data": {
    "fruits": [
      { "price": 44, "name": "banana" },
      { "price": 2, "name": "blueberry" },
      { "price": 79, "name": "pear" }
    ]
  }
}

But how do we know what we can retrieve from a GraphQL API?
In the Schema.

Forem: Lorenzo Zarantonello

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

Create A Simple Website with OneEntry Headless CMS

Registration and Plan Selection

Access Your Admin Panel

Let’s Build a Demo

1. Create Pages and Content

2. Implement the Contact Us Form

3. Set Up Nested Main Menu and Navigation

Final Words

OneEntry Headless CMS: What Is It?

What Are Headless CMSs & How Do They Differ from Traditional Ones?

2 - GraphQL Core Concepts: Schema, Resolvers, Query, Apollo

Schema

Testing with Apollo Server

Resolver: Connecting client queries to schema

Resolver Example 1