Forem: Eagle Dev

AI wrote this blog, surprising intro to Convex Backend

Eagle Dev — Sat, 25 Jan 2025 07:38:59 +0000

Let's discuss how good this was

I'm just letting ai write this because I'm bored, don't come after me in comments hahaha

Convex.js: The Backend Buddy You Didn't Know You Needed

In the bustling realm of web development, managing backends can often feel like juggling flaming torches—exciting but perilous. Enter Convex.js, your new best friend that makes backend management as smooth as butter on a hot pancake.

1. Reactive Data Queries: Your App's Pulse

Imagine your app's data is like a live concert, and you want every user to experience the same beat simultaneously. Convex.js offers reactive data queries that ensure all clients are grooving to the same tune in real-time.

Why It's Cool:

Automatic Updates: When your data changes, all subscribed clients get the memo instantly. No need for manual refreshes or complex polling mechanisms.

Example:

Let's say you're building a live chat application. You want all users to see new messages as they come in. Here's how you can set that up:

import { ConvexClient } from "convex/browser";
import { api } from "../convex/_generated/api";

const client = new ConvexClient(process.env.CONVEX_URL);

// Subscribe to the 'listAll' query in the 'messages' module
client.onUpdate(api.messages.listAll, {}, (messages) => {
  console.log("New messages:", messages.map((msg) => msg.body));
});

In this snippet, onUpdate subscribes to the listAll query in the messages module. Whenever there's a new message, it logs the updated list to the console. It's like having a personal assistant who whispers, "Hey, there's something new!" every time a message arrives.

2. Serverless Functions: Code Without the Load

Writing backend logic often means dealing with servers, deployments, and a sprinkle of headaches. Convex.js introduces serverless functions, allowing you to write your backend code without worrying about the underlying infrastructure.

Why It's Cool:

Simplified Development: Write your functions, and Convex.js handles the rest—scaling, execution, and all the nitty-gritty details.

Example:

Suppose you want to add a new message to your chat application. Here's how you can define a mutation function:

// convex/functions.js

import { mutation } from "convex/server";

export const sendMessage = mutation(async ({ db }, { body, userId }) => {
  const message = {
    body,
    userId,
    createdAt: new Date(),
  };
  await db.insert("messages", message);
});

And to call this mutation from your client:

import { useMutation } from "convex/react";

function ChatInput() {
  const sendMessage = useMutation("sendMessage");

  const handleSubmit = async (event) => {
    event.preventDefault();
    const body = event.target.elements.message.value;
    await sendMessage({ body, userId: "user123" });
    event.target.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="message" type="text" placeholder="Type your message..." />
      <button type="submit">Send</button>
    </form>
  );
}

Here, sendMessage is a mutation that adds a new message to the messages table. The ChatInput component uses this mutation to send messages when the form is submitted. It's like sending a letter without worrying about the postal service logistics.

3. Built-In Authentication: Security Made Simple

Security can be a daunting aspect of app development, but Convex.js has your back with built-in authentication. Whether you're dealing with email/password sign-ups or third-party OAuth providers, Convex.js makes user authentication straightforward and secure.

Why It's Cool:

Hassle-Free User Management: Implementing authentication becomes a breeze, allowing you to focus on building features rather than security protocols.

Example:

Integrating Auth0 for user authentication:

import { Auth0Provider } from "@auth0/auth0-react";
import { ConvexProviderWithAuth0 } from "convex/react-auth0";
import { ConvexReactClient } from "convex/react";

const convex = new ConvexReactClient(process.env.CONVEX_URL);

function App({ Component, pageProps }) {
  return (
    <Auth0Provider
      domain={process.env.AUTH0_DOMAIN}
      clientId={process.env.AUTH0_CLIENT_ID}
      redirectUri={window.location.origin}
    >
      <ConvexProviderWithAuth0 client={convex}>
        <Component {...pageProps} />
      </ConvexProviderWithAuth0>
    </Auth0Provider>
  );
}

export default App;

In this setup, Auth0Provider manages the authentication flow, and ConvexProviderWithAuth0 bridges Auth0 with Convex.js, ensuring that your users are authenticated seamlessly. It's like having a bouncer who knows all your VIPs by name.

4. TypeScript Support: Type Safety for the Win

For those who appreciate the structure and safety of TypeScript, Convex.js offers robust support, allowing you to write type-safe code that catches errors before they sneak into production.

Why It's Cool:

Enhanced Developer Experience: With TypeScript, you get autocompletion, type checking, and a more predictable codebase.

Example:

Defining a function with TypeScript:

// convex/functions.ts

import { mutation } from "convex/server";
import { Id } from "convex/values";

export const sendMessage = mutation(
  async ({ db }, { body, userId }: { body: string; userId: Id }) => {
    const message = {
      body,
      userId,
      createdAt: new Date(),
    };
    await db.insert("messages", message);
  }
);

Here, we've defined the sendMessage mutation with explicit types for body and userId. This ensures that anyone using this function will know exactly what types of arguments are expected, reducing the chances of runtime errors. It's like having a GPS that ensures you never take a wrong turn in your code.

5. Open-Source Client Libraries: Freedom to Customize

Convex.js provides open-source client libraries, giving you the flexibility to dive into the code, understand its workings, and even tailor it to your specific needs.

Why It's Cool:

Transparency and Control: Access to the source code means you can customize functionalities or contribute to the project, fostering a collaborative development environment.

Example:

Exploring the Convex.js GitHub repository:

# Clone the repository
git clone https://github.com/get-convex/convex-js.git

# Navigate to the project directory
cd convex-js

# Install dependencies
npm install

# Explore the codebase
code .

By cloning the repository, you can explore the inner workings of Convex.js, understand its architecture, and even propose changes or enhancements. It's like having the blueprints to a high-tech gadget, allowing you to tweak and tinker to your heart's content.

Wrapping Up

Convex.js is like the Swiss

Eagle here, I don't know why he used convex hull algorithm as reference, how accurate even is this.

And this was the cover art that was scraped hahaha

Over engineering a todo list app - Part 1

Eagle Dev — Tue, 14 Nov 2023 15:19:19 +0000

Table of content (for lazy people)

Backstory (kind of)
The need to over engineer
Technologies used
Progress report
- Finished stuff
Discussion

Backstory (kind of)

So well, recently I have been thinking to start doing expansion of my portfolio or whatever you call it (most probably resume).

I wanted to add some cool projects, starting from basic ones to advance ones. And ironically I came up with a TODO APP. Like literally, a so called cool, freaking Todo App.

Anyways, enough trash taking lets start some discussion on technical aspects and why my dumb mind wants to over engineer it.

The need to over engineer

(^^^ Not really)

So I came in the conclusion to create a todo app. I initially thought using simple react app using vite. Add a normal local storage based todo app and done. A new project ready in few days (well I'm too lazy to complete it fast).

But then, I came across some YouTube videos and something that was looking like a simple perfectly planned and about to finished project has changed forever.

So firstly, I came across this YouTube channel named, josh tried coding. And watched some videos which featured, some new tech's and softwares.

^^^ This above thing tempted myself to try these softwares like react-query v5, sonner, shadcn ui, next ui.

And guess what I see that my favorite coding youtuber has uploaded a tutorial featuring appwrite (ofc he's javascript mastery). And at the same time code with Antonio uploaded a video featuring notion clone.

Now what? I got tempted to try all these technologies. Well I chooses to try few of them and somehow I came up with the idea to create or atleast try to create an app which will be somewhat close to todoist but not same or that advance.

Now let's really talk about some technical stuff so that I'll atleast look somewhat smart

Technologies used

So I choose to use following technologies.

NextJs - as main framework
Appwrite - as backend to manage auth, databse and storage
Next Ui - as main component library
React Query - as main fetching thing
React hook form - most important element because whole app will require many forms

And that's it (may use many other useful tools in future, including adding pwa support)

Currently the web app is still in development

Progress report

Project is hosted for everyone on vercel.

Live Preview
Screenshot for lazy people

Finished stuff

Landing page
Signup and Login pages
Reset Password page
Basic project structure
App's main ui (in progress)

Well the source code is currently private, if this post receives a great feedback then I'll public the source so everyone will be able to interact and help (mostly guide) me through this project.

I'm taking about correcting me if I'm wrong or if I'm writing code with some bad practices. NOT SPOON FEEDINGS.

Discussion

I'm expecting your feedbacks (probably critics) on this project in comment.

Make sure to tell if you wanna see the source and help me throughout the process.

I'll be posting devlog kind of blog posts on this project if somehow dev.to's people like this dumb stuff that I'm doing.

Automating your repitative git commands the right way

Eagle Dev — Tue, 22 Aug 2023 11:51:23 +0000

1. What exactly is the problem?

2. Git commands are not much a hassle

3. Method 1: Creating a bash script
3.1. How to implement this solution?

4. Method 2: Using git alias command
4.1. How to implement this?
4.2. Some useful blogs and resources

5. Final thoughts

What exactly is the problem?

Well, we all have been using git commands a lot, while working on projects, I bet everyone has spammed git commit and git add . more than they've realized it.

Sometimes, writing long git commands can take up time, and writing them multiple times can build up frustration. Even some smaller commands can take time, which on compounding can show that you may have wasted hours by not using these shortcut tricks.

This blog post helps you to solve the exact problem. I'll show you different methods, to save your time and you can use any of the following depending on your workflow.

Git commands are not much a hassle

Well some of you may already come for me in comments saying these repitative git commands ain't that much hassle, but sometimes writing few letters less can help us not to lose sanity fast.

Let's talk about our first method

Method 1: Creating a bash script

We can indeed create a bash script which can help us to eliminate writing multiple commands. For e.g. you can eliminate writing git add ., git commit -m "", git push -u origin main, and do it using a single custom command.

Following is an example of how to eliminate writing above three commands:

#!/bin/bash

# Recommend to use!
# Advance script to automate repitative commands

currentBranch="$1"
message="$2"

# Check if current branch and commit message are provided
if [ -z "$currentBranch" ]; then
    echo "Usage: $0 <currentBranch> <commitMessage>"
    exit 1
fi

if [ -z "$message" ]; then
    echo "Usage: $0 <currentBranch> <commitMessage>"
    exit 1
fi

# Check if git command is available
if ! command -v git &> /dev/null; then
    echo "Git command not found. Aborting."
    exit 1
fi

# Check if the current directory is a Git repository
if ! git rev-parse --is-inside-work-tree >/dev/null 2>&1; then
    echo "Not inside a Git repository. Aborting."
    exit 1
fi

# Check if there are changes to commit
if [ -z "$(git status --porcelain)" ]; then
    echo "No changes to commit. Aborting."
    exit 1
fi

# Add all changes
git add .

# Commit changes
git commit -m "$message"

# Push changes to origin
git push -u origin "$currentBranch"

echo "Automated Git tasks completed successfully."

How to implement this solution?

Create a new file in your working directory named git-quick
Paste the above script in it
Make it executable using
```
chmod +x git-quick
```
Now you can run the file using
```
./git-quick
```

This was one of many use cases, you can automate other commands like this depending on your workflow.

Bonus: You can also make it usable anywhere by following the following guide:

But there'll some people who like to do multiple commits before pushing the code.

Well there's another method you may try, which includes using the git alias command.

Method 2: Using git alias command

git alias is probably the most useful command when it comes to save that hassle when it comes to type longer commands

For e.g: git push -u origin main can be easily simplified as git push or even git p. As simple as it gets!

How to implement this?

Well atlassian has a detailed guide related to using git alias command, you can check that out or here's a quick summary.

Aliases can be created by either using git config as shown below, or it can also be created by editing $HOME/.gitconfig for global path, for local you can edit ./.gitconfig of the active repository. Following is an demonstration about how to create aliases using both methods:

// By using 'git config' command
$ git config --global alias.co checkout

// By editing './.gitconfig' file (paste the below code)
[alias]
 co = checkout

You can use git alias to add short names to regular git commands.

$ git config --global alias.co checkout
// Can be used as git co

$ git config --global alias.br branch
// Can be used as git br

$ git config --global alias.ci commit
// Can be used as git ci

$ git config --global alias.st status
// Can be used as git st

You can also create some custom commands using git alias

git config --global alias.unstage 'reset HEAD --'

// This can make following two commands equivalent
$ git unstage fileA
$ git reset HEAD -- fileA

Some useful blogs and resources

Final thoughts

In order to become a Git Ninja you can use any of the two methods mentioned above depending on your workflow.

If you have some more tips that I may have missed, then feel free to share them in the comments.

If you found any mistake in this blog then correct me up in the comments.

Thank you for reading this far! ❣️

Follow me on Twitter @eagledev_ to recieve some useful tips and tricks.

I created an entire dynamic website with NextJs on android!

Eagle Dev — Tue, 05 Jul 2022 06:26:26 +0000

Context

So before beginning let me give you some context.
I'm develop websites on android! You'll ask why, simply because I don't have pc :(
In my learning period I have found many ways to code a perfect website on android, from generating an NextJs or ReactJs project to creating a responsive design to a perfect code editor. I have found a way for all of this!

Topic

Moving on to discussion, I recently finished working on a dynamic website for an eSports organization that is build using NextJs!

Many of you still won't belive it but ya this site is 100% responsive.

I'm looking forward to upload a blog on this topic, named "This is how I created a dynamic website on android"

Your Feedback

I want to know your opinions. Will you like to know about my development process? Will you like to know ky secret to make websites responsive and test responsiveness on android? Let me know in comments!

Do you use PNPM? If yes why?

Eagle Dev — Sat, 11 Jun 2022 16:59:31 +0000

PNPM is said to be most efficient package manager. I'm also thinking to switch from slower npm to faster PNPM.

Before switching I would like to know about pros and cons of PNPM.

Let me know in comments!

All you need to know about console.log()

Eagle Dev — Thu, 09 Jun 2022 08:14:06 +0000

Introduction

Currently every javascript developer is familier with console.log(), the most popular option for debugging in javascript.

As being popular, console object have some commonly used methods like:

console.warn()
console.error()
console.info()
console.table()

We'll learn more about this methods in today's article, and also we'll get ourself introduced about console.assert()

Console Methods

1. Console Warn

It is used to log warnings in the console. As shown in the image below, console.warn() have a unique yellow colour logging in console.

Example usage:

console.warn("This is a warning message");

2. Console Error

As per name, it is used to log errors in console. As per following image console.error() method logs a red coloured error message.

Example usage:

console.error("This is an error message");

3. Console Info

console.info() can be useful when you want to log some information in console. It logs a blue colored info message.

Example Usage:

console.info("This is an info message!");

Info message isn't displaying as mentioned because I'm using Eruda Console

4. Console Table

console.table() is useful when you want to display your array with data in a tabular form.

Syntax

console.table(data, columns)

table() method takes one argument i.e data, it must be an array or an object. It also takes an optional argument i.e columns, it select a subset of columns to display.

Understanding with Examples

1. The `data` parameter:

data parameter maybe an array and an object i.e. then represented in tabular form.

Example usage with array:

// passing an array
console.table(["eagle", "sparrow", "peacock"]);

Example usage with object:

// passing an object
const object = {
  name: "eagle",
  species: "bird"
}
console.table(object);

2. The `columns` parameter:

columns parameter selects a part of data that is then displayed. It can be also used for restricting displayed columns.

Example usage:

function Bird(name, emoji) {
  this.name = name;
  this.emoji = emoji;
}

const eagle = new Bird("Eagle", "🦅");
const sparrow = new Bird("Sparrow", "🐦");
const peacock = new Bird("Peacock", "🦚");

console.table([eagle, sparrow, peacock], ["emoji"]);

To notice the difference try this yourself by removing columns parameter i.e ["emoji"]

5. Console Assert

console.assert() is super useful for debugging. If an assertion gets failed then a trace is logged in console.

Syntax

// simple syntax
console.assert(assertion, msg);

// advance syntax
console.assert(assertion, obj1)
console.assert(assertion, obj1, obj2)
console.assert(assertion, obj1, obj2, /* ... ,*/ objN)

console.assert(assertion, msg, subst1)
console.assert(assertion, msg, subst1, /* ... ,*/ substN)

Understanding with Examples

Basic example using simple syntax

const x = 5, y = 4;
console.assert(x + y == 11, "Expression returned false");

We'll learn more about console.assert in a dedicated blog.

Conclusion

console object can be stated as heart of debugging in javascript. We tooked a look over all basic but useful methods of console object.

Thanks for reading

Follow me on instagram & twitter to stay connected!

Journey to C++

Eagle Dev — Sun, 09 Jan 2022 03:50:33 +0000

Motive

Many of you might be confused that what does it actually means, right?

Actually Journey to C++ is a GitHub Repository created so that peoples like you can post various C++ snippets and basic to advance level codes and master C++ along with community!

Know more on GitHub

EAGLE1309 / journey-to-cpp

A repository to learn c++ with community!

Journey to C++

Welcome to Journey to C++ a repository created for peoples who want to learn C++.

This repository contains C++ programs divided into categories. This repository is a updating repository.

Peoples like you are always welcome to add more codes!

Contributors are always welcome. Contribute to this repository to add more codes!

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct

View on GitHub

What will be benifits of Contribution?

You will get to learn more about c++ by examining program written by others
You will get better and better at c++ if you will practice it by writing more code
While coding with community you will get to know about some tricks that others use for faster development!

Hope you guys will like my small idea so that everyone who wants to learn c++ will get helped! Make sure to contribute and add your codes and snippets (divided into categories) now!

Web Development on android!

Eagle Dev — Sun, 12 Dec 2021 11:56:48 +0000

What is web development?

Web development is the work involved in developing a website for the Internet.

Is it possible on android?

The answer is yes! Web development is possible in android. Here on android there are many IDE and coding apps to do that!

Which is best App for web dev?

Here are list of top 3 apps I personally use for web development!

How can we get inspect element on android?

The answer is simple! There is an awesome open source console developed for android named Eruda

How to use Eruda in any browser?

Create a new bookmark.
Set any name
Set URL to

javascript:(function () { var script = document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();

Screenshot:

How to use inspect element?

To start console (inspect element) on any webpage just visit that webpage then search name of your saved bookmark and click to load it.

Screenshot 1:

Screenshot 2:

Click that setting icon to open your inspect element!

Here is a responsive website designed on android:

Eagle - Official Website

Forem: Eagle Dev

AI wrote this blog, surprising intro to Convex Backend

Let's discuss how good this was

Convex.js: The Backend Buddy You Didn't Know You Needed

1. Reactive Data Queries: Your App's Pulse

2. Serverless Functions: Code Without the Load

3. Built-In Authentication: Security Made Simple

4. TypeScript Support: Type Safety for the Win

5. Open-Source Client Libraries: Freedom to Customize

Over engineering a todo list app - Part 1

Table of content (for lazy people)

Backstory (kind of)

The need to over engineer

Technologies used

Progress report

Finished stuff

Discussion

Automating your repitative git commands the right way

Table of Contents

What exactly is the problem?

Git commands are not much a hassle

Method 1: Creating a bash script

How to implement this solution?

Method 2: Using git alias command

How to implement this?

Some useful blogs and resources

Final thoughts

I created an entire dynamic website with NextJs on android!

Context

Topic

Your Feedback

Do you use PNPM? If yes why?

All you need to know about console.log()

Introduction

Console Methods

1. Console Warn

2. Console Error

3. Console Info

4. Console Table

Syntax

Understanding with Examples

1. The data parameter:

2. The columns parameter:

5. Console Assert

Syntax

Understanding with Examples

Conclusion

Further reading

Thanks for reading

Journey to C++

Motive

Know more on GitHub

EAGLE1309 / journey-to-cpp

A repository to learn c++ with community!

Journey to C++

Contributing

What will be benifits of Contribution?

Web Development on android!

What is web development?

Is it possible on android?

Which is best App for web dev?

How can we get inspect element on android?

Here is a responsive website designed on android:

1. The `data` parameter:

2. The `columns` parameter: