Forem: Areeb ur Rub

New way to get portfolio inspirations

Areeb ur Rub — Sun, 01 Mar 2026 04:45:31 +0000

If you’re searching for portfolio inspiration, developer portfolio examples, or designer portfolio website ideas, here’s a new way to discover them.

Try Now : stash-or-pass.com

I built Stash or Pass a simple platform where you can review portfolio websites in one place.

Instead of opening 20 tabs from Google searches like:

“best developer portfolios”
“portfolio website inspiration”
“creative portfolio examples”
“UI/UX portfolio case study examples”

You can browse everything in one structured flow.

How It Works

Stash or Pass lets you:

🔎 Browse Portfolios in Swipe style inteface

You get access to high-quality developer, designer, and creative portfolios ready for inspiration, and swipe on them to Stash (save) or Pass (skip)

⭐ Discover Top-Rated Portfolios

There’s a Top Stash section where you can see which portfolio websites people have rated the highest.
This helps you quickly find what the community considers the best portfolio designs.

🏆 Portfolio Leaderboard

You can view a leaderboard of the most appreciated portfolios great if you want to analyze what makes a portfolio stand out (layout, animation, storytelling, case studies, etc.).

🚀 Add Your Own Portfolio

You can submit your own portfolio website and get listed.
Once added, you can see how people rate it and where it stands on the leaderboard.

This makes it useful not just for inspiration but also for feedback and visibility.

Why This Is Useful If You’re Building a Portfolio

If you’re:

Redesigning your personal website
Creating a developer portfolio from scratch
Building a UI/UX portfolio
Improving your case study structure
Looking for modern portfolio website trends

This platform gives you a focused place to explore high-quality portfolio examples without getting lost in random blog lists.

Instead of bookmarking everything and forgetting it later, you can quickly review, compare, and learn from the best.

If you’re currently working on your portfolio and need real, high-quality inspiration this might help.

Would love to hear your thoughts and feedback 🚀

Using 1Password CLI to Manage Multiple GitHub SSH Keys in a Terminal-Only Debian Setup

Areeb ur Rub — Wed, 23 Jul 2025 15:24:19 +0000

When working on a headless server or terminal-only environment, managing multiple GitHub SSH keys securely can be challenging — especially when you’re using 1Password. This guide walks you through setting up 1Password CLI to handle SSH keys for multiple GitHub accounts, all without a graphical interface.

📦 Prerequisites

Debian or any Linux distro with a terminal
1Password CLI installed (op)
SSH installed and working (ssh, ssh-agent, ssh-add)
SSH keys (private + public) already stored in 1Password for each GitHub account
Public keys added to the corresponding GitHub accounts

🧩 Step-by-Step Setup

🔹 1. Ensure `ssh-agent` Is Running

Before using any keys, make sure the SSH agent is active:

eval "$(ssh-agent -s)"

To make this automatic, add it to your ~/.bashrc, ~/.zshrc, or shell init file:

echo 'eval "$(ssh-agent -s)"' >> ~/.bashrc

🔹 2. Load SSH Keys from 1Password CLI

Use the 1Password CLI to securely fetch your private key and load it into ssh-agent.

For each GitHub account (say personal and work), run:

# Replace <item-id> with your 1Password item ID
op item get "<item-id>" --field "private key" > ~/.ssh/id_personal
chmod 600 ~/.ssh/id_personal
ssh-add ~/.ssh/id_personal

Repeat for your work account:

op item get "<item-id>" --field "private key" > ~/.ssh/id_work
chmod 600 ~/.ssh/id_work
ssh-add ~/.ssh/id_work

💡 Note: If the key format causes errors (e.g., libcrypto errors), regenerate the key in 1Password using OpenSSH format and re-fetch it.

🔹 3. Configure `~/.ssh/config` for Multiple GitHub Accounts

Create or edit your SSH config file:

nano ~/.ssh/config

Add the following:

Host github-personal
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_personal
  IdentitiesOnly yes

Host github-work
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_work
  IdentitiesOnly yes

This tells SSH which identity (key) to use when you refer to GitHub using the alias github-personal or github-work.

🔹 4. Clone Repositories Using Host Aliases

Now that SSH knows which key to use, you can clone repositories like this:

For your personal GitHub account:

git clone git@github-personal:yourusername/repo.git

For your work GitHub account:

git clone git@github-work:yourorg/repo.git

This ensures the correct key is used without conflicts.

✅ Final Verification

To test whether each setup works correctly:

ssh -T github-personal

Expected output:

Hi yourusername! You've successfully authenticated, but GitHub does not provide shell access.

Likewise, for work:

ssh -T github-work

🧠 Bonus: Automate the Workflow

You can wrap the op commands and ssh-add calls in a script and run it after logging in:

#!/bin/bash
eval "$(ssh-agent -s)"
op signin my.1password.com myemail@example.com my-secret-key
op item get "github-personal-key" --field "private key" > ~/.ssh/id_personal
chmod 600 ~/.ssh/id_personal
ssh-add ~/.ssh/id_personal
# Repeat for work

Or add to your shell profile with appropriate session caching.

🛡️ Conclusion

Using the 1Password CLI with ssh-agent gives you a secure and flexible way to manage multiple GitHub SSH identities in a terminal-only setup. Whether you're working across multiple accounts or teams, this setup keeps your keys safe and your workflow efficient — all without ever touching a GUI.

Building NextJs project, should I use tRPC or Server Actions with React Query?

Areeb ur Rub — Mon, 15 Jul 2024 22:52:52 +0000

Seeking Suggestions: tRPC vs. Next.js Server Actions for a Next.js Project

// Detect dark theme var iframe = document.getElementById('tweet-1812948845044900179-896'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1812948845044900179&theme=dark" }

Both options seem promising, especially since I plan to use React Query and need type-safe query functions. I’d love to get some insights and suggestions from the community on which path to take.

I am comparing in this way

Both have Type Safety
Both can be Integrated with React Query
Both can be easily used, but tRPC have to be installed and initialised on other hand Server Actions can be simply used by simply creating functions with "use server" directives.

Seeking Your Advice

It's clear that Server Actions are easier to implement and solves the problem the thing is that I am unable to figure out the trade offs I will be having by not using tRPC.

I'd love to hear about your experiences and recommendations. Your insights will be helping me make an informed decision. Please share your thoughts in the comments below!

Thanks in advance for your help!

Boost Your Tailwindcss Development with Flow Launcher's Tailwindcss Docs Extension

Areeb ur Rub — Tue, 21 Feb 2023 04:07:05 +0000

Tailwindcss is a popular CSS framework that offers a range of utility classes to speed up web development. With its extensive documentation, it's easy to look up the different classes and their usage. However, accessing this information can be time-consuming, especially if you're working on a project that requires constant reference to the Tailwindcss documentation.

This is where Flow Launcher comes in. Flow Launcher is an open-source productivity tool for Windows that allows users to quickly search and launch apps, files, and websites. With its powerful plugin system, Flow Launcher can be extended to include additional functionality, making it even more useful for developers.

Download Flow Launcher Here : Download

Recently, I created a Tailwindcss Docs Extension for Flow Launcher, which helps you to search through Tailwind classes and access the Tailwindcss documentation. This extension makes it easy to find the right class for your project and access its documentation, all without leaving Flow Launcher.

areeburrub / tailwindcss-flow-launcher-plugin

A Flow Launcher plugin that let you search tailwindcss classes and open their docs in your browser — just type tw and simply search

Flow Tailwind Docs

Search tailwindcss classes and open their docs in your browser — just type tw and simply search

Built with flow-launcher-helper

Installation

Install the plugin from the Plugin Store or via pm install tailwindcss. After installation you will be prompted to install/select Node.js if you have not done so.

View on GitHub

To install the Tailwindcss Docs Extension for Flow Launcher, you first need to download and install Flow Launcher. Once you have Flow Launcher installed, you can install the extension by typing "pm install Tailwindcss" in the Flow Launcher search box. This will download and install the extension, and you'll be ready to use it.

To use the Tailwindcss Docs Extension, simply type "tw" followed by the class name you're looking for in the Flow Launcher search box. For example, if you're looking for the "text-center" class, you would type "tw text-center" in the search box. The extension will display a list of matching classes, along with their documentation, if available.

The Tailwindcss Docs Extension for Flow Launcher is a useful tool for any Tailwindcss developer. It helps to speed up development by making it easy to find the right class and access its documentation. With its simple installation process and powerful search capabilities, it's a must-have tool for any developer working with Tailwindcss.

In conclusion, if you're a Tailwindcss developer looking for a faster and more efficient way to search for classes and access documentation, be sure to check out the Tailwindcss Docs Extension for Flow Launcher. It's an excellent tool that can help you save time and improve your productivity.

Shortcut to connect Bluetooth device [Windows 10]

Areeb ur Rub — Sun, 17 Oct 2021 05:07:29 +0000

Now it's a pre-defined feature [UPDATED]

Windows made some updates and after that you can easily open the connect tab using

Windows + K

Life before Windows added this feature

If you use a Windows Machine and have a Bluetooth audio device then you can understand the pain of connecting it to the PC.

It usually happen that we wanted to watch a video but the audio device isn't connected and to connect it we have to go through
settings > bluetooth > then connect
which in itself consume much time for a little thing.

It is not something we called simple like in Android or Mac where there's a notification center.

Windows Action Center

Some people might know about it but many don't that Windows also have something called action center from where you can get basic controls of PC.

In the action center there's an option called Connect , it allows you to connect to all external devices.

Now, this was also not efficient to me as this method also includes so many clicks.
Action center > connect > connect device
But it is easier than the previous one where we have to open the settings and the connect.

Creating a shortcut

Now it's time to make it much easier, so first of all we can use keyboard shortcuts instead of manually clicking using the mouse.

To open the Action center there's a shortcut predefined in Windows which is (Windows + A) but there's no shortcut to open the connect menu so we have to create one

Now it's depends on you that you want to implement a shortcut to open the connect tab or are you okay with using the action center

I want to make things more easier and decided to make a shortcut

To create a shortcut right click on the desktop and hover over new then click on shortcut as shown in the image above

It will open the shortcut wizard as shown above
Now enter the location given below

%windir%\explorer.exe ms-settings-connectabledevices:devicediscovery

This will directly open the connect tab

Enter the name of the shortcut and press Finish, you successfully created the shortcut try opening it it will open the connect menu instantly

Time to create a Keyboard shortcut, for that right click on the shortcut and open properties
Now click the shortcut key option and press a combination using Shift, Alt, Ctrl + a letter. I made it CTRL+SHIFT+C
Now connect your device rapidly

Done

Now you can connect your devices hassle free, hope it helped you and made your life easier.

Follow for more

Connect with me on Linked in :connect

First 2 Weeks Experience | Hacktoberfest 2021

Areeb ur Rub — Thu, 14 Oct 2021 15:04:52 +0000

I always wanted to contribute in Open Source project and Hacktober Fest gives me this chance.

I Registered my self on the very first day it was available (30th Oct) and started to find some good projects to contribute to.

First Commit

After registering, I was surfing the Hacktoberfest website and found one video in the resource section which showed me how to contribute.

So, I contributed to the repo which was less about coding but more about how to contribute on github.

I was already knowing about git and GitHub so it wasn't hard for me to get started

The project was that, every contributor have to write a Haiku (A Japanese format for poem) and then ask for a pull request

Other Contributions

After getting how open source works I started finding projects of my interest which is Web Development.

The thing which I noticed here is that, making a project from zero is more comfortable than working on someone else project and trying to fix something or add some new stuffs.

But working on someone else project is fun as it forces to learn new things because at first you can't know everything.

I also came to know that working directly on production level projects can be difficult as everyone wanted to contribute to those, so will not get any easy issues or bugs easily.

So, I tried doing some good projects which I found on Hactoberfest discord server and also found some from GitHub search.

Progress

I did my all 4PRs, and now I am finding some good project which I will do for fun.

You can suggest me some projects related to Web Development (if you can).

My Tech Stack:

React

Node JS

Flask

Firebase

and HTML/CSS/JS (my brain screaming don't mention it DUMB!)

Contributions

Projects I have contributed by now are:

do-community/cloud_haiku

Areeb ur Rub added a Haiku #1704

areeburrub posted on Oct 06, 2021

Hey, I added a Haiku to this repo.

View on GitHub
vikhyatsingh123/Naruto-Shippuden

added toggle button for dark-mode #371

areeburrub posted on Oct 10, 2021

Hey, it's Areeb I have added a toggle button replacing the simple static button for dark mode. and also deleted some repeating codes for NAV bar and did some other minor fixes too.

Happy Hacktober 2021

View on GitHub
Rishit30G/Personal-Portfolio

Changes to Navbar #20

areeburrub posted on Oct 10, 2021

I have changed the padding and added drop shadow which gives it a effect

View on GitHub
Alitindrawan24/2048

Added Try Again and Changed UI #3

areeburrub posted on Oct 11, 2021

I have made some style changes

Try Again Button

I have a added a try again button, now after game over new game can be started from there only

Added a How to Play

Some people don't know how to use 2048 that's why added a how to play card.

Changed Colors and Stylings

The website was looking too dull that's why I added some colors to it. Now It looks good.

View on GitHub

Reflections

I think Hacktoberfest is a great way to start open source journey, till now I haven't made any good connections yeah but I am looking for some good projects and people whom I can work with.

5 Chrome Extension to make Web Dev more Interesting

Areeb ur Rub — Sat, 10 Jul 2021 01:36:29 +0000

Ever Happened that you wanted to make a project and surfing over internet to find similar websites to get inspirations, so for that you need some tools which I have listed here these are so useful to me and popular as well so might know about some.

WhatFont

Beside Comic Sans and monospace there are many fonts and to choose the right topography can be sometimes pretty daunting and for that we WhatFont

WhatFont will help you Identify the font used in the websites.

Fonts Ninja

WhatFont is get but it don't give much information if you want more like sample text or more info about the font then use font ninja it's feels like an upgrade from what font

Font Ninja have a better UI and I use this rather What Font

ColorZilla

When we are done with font we need colors for them so for that we have ColorZilla it works as a color picker and tells the color we point at.

Here's an tool for Choosing Colors for website

Use this tool to make color palette for your next project.

Areeb ur Rub ・ Jun 6 '21

CSS Peeper

It's so handy to use and basically you can check styling of each elements in a website.
Yeah it gives everything from fonts to margin.

Feels like an upgrade to inspect mode.

Wappalyzer

This extension will tell you which frameworks or plugins are being used in a website.

I have listed only 5 but there are many more useful extension that you might know share it with me and everyone here.

Follow me for more

Areeb ur RubFollow

NextJs | NextJs | Langchain + Langgraph | Python | TypeScript | Love of building things

Display cloud file on website - Firebase Basics Series - Part 10

Areeb ur Rub — Thu, 01 Jul 2021 18:18:54 +0000

Sorry about posting this one late I was working on this and drafted it for a while and thinking to post this one everyday and finally did it today.
Sorry for my procrastinating issues.

In the last post we were able to check whether our file is uploaded or not and also checked the upload process using a progress bar.

Now, when the file is uploaded after that we will create a entry in firestore database then we will be able to display the uploaded content on the website.

Adding data to firestore

In order order to get the files first we need to store details about the file and we will be using firestore database to store the file data.

The Data we will be saving for our Photogram Project will be

Uploaded By (Name and UID)
user id (uid)
heading for the post
Post Id
Upload Time
File Download Link

We have to update the database whenever new file is uploaded so we will create a function which take the download link and username then add the data to firestore.

We will call the function from the complete


    uploadTask.on('state_changed', 
        (snapshot) => {
            // Handle upload Progress 
        }, 

        (error) => {
            // Handle unsuccessful upload
        }, 

        () => {
            //Handle complete upload
            task.snapshot.ref.getDownloadURL().then((downloadURL) => {
            updateDatabase(downloadURL, firebase.auth().currentUser);
        });
        }
    );

And the update function will simply add the data to the database,

// Update Database Function
const db = firebase.firestore();
const dbRef = db.collection('posts');
const updateDatabase = (link,user) => {
 let post = {
     postid : makeid(7),
     heading:headingPhoto.value,
     By : user.displayName,
     uid : user.uid,
     img : link,
     time : firebase.firestore.FieldValue.serverTimestamp()
 }
 dbRef.add(post)
}

I use a snippet to generate random code which i got from here

const makeid = (length) => {
    var result           = '';
    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * 
 charactersLength));
   }
   return result;
}

Displaying data

There will be two page which will be displayed one in which all feeds will be visible and another in which only the posts in current user profile will be shown.

For that we will be using the .where query to get data in all feed we will display all posts and in user profile we will change it to .where('uid','==',user.uid)

By default we will subscribe to the all photos snapshots but if user select Profile we will unsubscribe to all and subscribe to the profile one so that if user uploads something, it's visible on the page.


var allfeedStatus = false;
var userfeedStatus = false;

// sub all will subscribe to all feed
subAll = () => {

    if(allfeedStatus == false){
        allfeed = dbRef.onSnapshot((querySnapshot) => {
            photoContainer.innerHTML = ''
            querySnapshot.forEach((doc) => {
                drawPhotos(doc.data().img,doc.data().By,doc.data().heading);
            });
        });
        allfeedStatus = true;
        userSection.hidden = true;
    }

    if(userfeedStatus){
        userfeed();
        userfeedStatus = false;
    }

}


// sub profile will subscribe to the profile feed
subProfile = () => {
    if(userfeedStatus == false){
        userfeed = dbRef.where('uid','==',auth.currentUser.uid).onSnapshot((querySnapshot) => {
            photoContainer.innerHTML = ''
            querySnapshot.forEach((doc) => {
                drawPhotos(doc.data().img,doc.data().By,doc.data().heading);
            });
        }); 
        userSection.hidden = false;
        userfeedStatus = true;
    }

    if(allfeedStatus == true){
        allfeed();
        allfeedStatus = false;
    }
}

subAll();

Also create a function draw post which will add the posts to the page.

Let's Test

The website is working and is hosted on firebase hosting check it on the link : photogram-on.web.app

Get the codes from my github repo : Photogram Github Repo

Follow me for more

Areeb ur RubFollow

NextJs | NextJs | Langchain + Langgraph | Python | TypeScript | Love of building things

Cloud Storage - Managing files user uploads - Firebase Basic Series - Part 9

Areeb ur Rub — Mon, 21 Jun 2021 18:30:09 +0000

In Previous post we successfully uploaded the user files to our cloud storage, but we haven't worked on what will happen after the file is uploaded.

Uploading Snapshot

Like every other firebase service we have used by now cloud storage also have snapshots, we can use it to check How much data is uploaded and also trigger some function as it completes.

If you don't know what are snapshots then no problems, it's just
a fancy term to given to changes that occur in firebase.
Read previous posts.

Subscribing to snapshot

To start getting snapshots first change the fileRef.put() into a variable.

var task = fileRef.put(file);

After changing it to a variable subscribe to the on snapshot it will give us the changes as file uploads.

    uploadTask.on('state_changed', 
        (snapshot) => {
            // Handle upload Progress 
        }, 

        (error) => {
            // Handle unsuccessful upload
        }, 

        () => {
            //Handle complete upload
        }
    );

Use the same order to create function,

progress
error
complete

getting a progress bar

We can get how much file is uploaded by simply using (snapshot.bytesTransferred / snapshot.totalBytes) * 100 this will give us the percentage of data transferred then we can easily change the style of progress bar.

(snapshot) => {
    // Observe state change events such as progress, pause, and resume
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    const upProgress = document.getElementById('upProgress');
    upProgress.style.width = progress + '%';
}

Getting the file link

In order to display the file we should have a link using which we can access files we can get that link in the complete part of function.

() => {
        // Handle successful uploads on complete
        task.snapshot.ref.getDownloadURL().then((downloadURL) => {
            console.log('File available at', downloadURL);
        });
        }

What Next:

In the next post we will see how to store these file data in the firestore database and display it on the main feed

Areeb ur RubFollow

NextJs | NextJs | Langchain + Langgraph | Python | TypeScript | Love of building things

Free Cloud File Storage - Firebase Basics Series - Part 8

Areeb ur Rub — Sat, 19 Jun 2021 18:28:01 +0000

My previous post told you about firestore and how we will use it for our new project which will take users photo and create a post with it.

In this post we will be implementing the cloud file storage to store user photos and finally will host it on firebase hosting.

I will not be discussing how to add data to firestore or how user-auth is working check previous posts for that

Creating a post

We can add a POPUP where user can upload image and then can post it, the popup will have a file input, progress bar, preview display and submit button.

Getting files from user

Skip this part if you are familiar with files in javascript
Give id to the an input file element and also create a img element where preview will be show then get them in our javascript

const uploadPhoto = document.getElementById('photo-input');
const preview = document.getElementById('preview');

Now, we will add an onchange event which will change the preview image you can use this snippet in various projects.

uploadPhoto.onchange = () => {
    var input = upPhoto;
    var url = upPhoto.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
     {
        var reader = new FileReader();

        reader.onload = (e) => {
           preview.src = e.target.result;
        }
       reader.readAsDataURL(input.files[0]);
    }
  }

Uploading files to cloud storage

Adding firebase cloud storage script

like every other Library we have to add storage also you can get it from the docs firebas-docs

<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-storage.js"></script>

After getting the library initialize firebase storage

const storage = firebase.storage();

Location of files

To upload any file we have to first decide a location where it will be stored and here also it is called reference,

const fileRef = storage.ref('FolderName/NewFolder/'+image.png)

Uploading a file

once reference is set then we can put our files to that reference,

var file = uploadPhoto.files[0];
//get the first file from the input file dom

fileRef.put(file); //Upload

Uploading files in our project

On the upload button click We are uploading the file to the storage.

uploadBtn.onclick = () => {
    var file = upPhoto.files[0];
    const fileRef = storage.ref('posts/' +makeid(6)+'-'+file.name)
    fileRef.put(file);
}

To avoid same file name I am using makeid function to generate random id, I got this snippet here

const makeid = (length) => {
    var result           = '';
    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * 
 charactersLength));
   }
   return result;
}

What Next:

For Now we are able to upload files in next post we will see how we can get files from cloud storage and how to update the progress bar.

Follow me:

Areeb ur RubFollow

NextJs | NextJs | Langchain + Langgraph | Python | TypeScript | Love of building things

Using Firestore database - Firebase Basics Series - Part 7

Areeb ur Rub — Fri, 18 Jun 2021 18:04:19 +0000

Till now we have already used Firebase Realtime Database and Firebase Authentication, now in this post I will tell you about Firestore.

While Firestore and Realtime databases are very similar, Firestore maintains data in a more structured manner and can also do more complex querying.

To choose between both you can take help of firebase docs as it gives you choices to choose and will tell you which one best fits in your need category, visit Firebase Docs/rtdb-vs-firestore

Create Database

You can go to the firestore section from your console and create a database that will be in test mode for now, but we will set rules later on.

Project to use it in

I like project based learning a lot so we will make another website, where user can login and upload pictures and other can see it.
This project will let us work with firestore and firebase file storage.

I made this layout for the website you can use your creativity for doing so.

Adding Firestore to project

First we have to add the CDN script of firestore from Firebase Docs

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>

Using Firestore

First we have to initialize the firestore in order to use it

const db = firebase.firestore();

Structure of database in firestore

Like .ref() in Realtime Db, firestore have .collection().
A collection can be of anything and a database can have many collection and each collection have documents.

A document is the place where all data is stored in a JSON like format.

Here's an example,

var areeb = db.collection('users').doc('areeburrub');

in this the variable areeb will contain all of my information stored in my user doc and can be accessed like JSON file.

Structuring the document totally depends on us it can be a simple one like this

first : Areeb"
last : "ur Rub"
born : 2002

or can be nested and have much more data like this

name :
    first : "Areeb"
    last : ur Rub"
Social:
    Instagram : areeb.ur_rub
    Linkedin : areeburrub
born : 1815

or A document which also have sub collection with there collection, if you are confused with structure of data in firestore then read this : firestore-Docs/data-model

Adding, Removing and Updating

it's very much similar to Realtime db

To Add data

db.collection('nameOfColl').add({name : 'AREEB'})

To Delete data

db.collection('nameOfColl').doc(uniqueId).delete();

To Update data

db.collection('nameOfColl').doc(uniqueId).update({
    fruite : 'PineApple',
    name : 'Areeb ur Rub'
});

More Features of Firestore

For now I am not introducing you to more features of firestore we will see it in next part.

Follow me

Areeb ur RubFollow

NextJs | NextJs | Langchain + Langgraph | Python | TypeScript | Love of building things

How do you like to learn programming languages?

Areeb ur Rub — Thu, 17 Jun 2021 18:07:18 +0000

Coders learn a lot in their early stages, and they continue to do so every day, but there are a variety of ways to learn.

Some people do it by Reading Documentation first some prefer to watch online tutorials and some learn by making some project.

Let me know what methods you have used to learn new things, and how you went about it.

My Methods

I enjoy project-based learning.
Eventually, we all have to implement the things, which is different from remembering syntax.

The more projects I build, the more I learn.

Forem: Areeb ur Rub

New way to get portfolio inspirations

How It Works

🔎 Browse Portfolios in Swipe style inteface

⭐ Discover Top-Rated Portfolios

🏆 Portfolio Leaderboard

🚀 Add Your Own Portfolio

Why This Is Useful If You’re Building a Portfolio

Using 1Password CLI to Manage Multiple GitHub SSH Keys in a Terminal-Only Debian Setup

📦 Prerequisites

🧩 Step-by-Step Setup

🔹 1. Ensure ssh-agent Is Running

🔹 2. Load SSH Keys from 1Password CLI

🔹 3. Configure ~/.ssh/config for Multiple GitHub Accounts

🔹 4. Clone Repositories Using Host Aliases

✅ Final Verification

🧠 Bonus: Automate the Workflow

🛡️ Conclusion

Building NextJs project, should I use tRPC or Server Actions with React Query?

Seeking Suggestions: tRPC vs. Next.js Server Actions for a Next.js Project

I am comparing in this way

Seeking Your Advice

Boost Your Tailwindcss Development with Flow Launcher's Tailwindcss Docs Extension

areeburrub / tailwindcss-flow-launcher-plugin

A Flow Launcher plugin that let you search tailwindcss classes and open their docs in your browser — just type tw and simply search

Flow Tailwind Docs

Installation

Shortcut to connect Bluetooth device [Windows 10]

Now it's a pre-defined feature [UPDATED]

Life before Windows added this feature

Windows Action Center

Creating a shortcut

Done

Follow for more

First 2 Weeks Experience | Hacktoberfest 2021

First Commit

Other Contributions

Progress

Contributions

Areeb ur Rub added a Haiku #1704

added toggle button for dark-mode #371

Changes to Navbar #20

Added Try Again and Changed UI #3

I have made some style changes

Try Again Button

Added a How to Play

Changed Colors and Stylings

Reflections

5 Chrome Extension to make Web Dev more Interesting

WhatFont

Fonts Ninja

ColorZilla

Use this tool to make color palette for your next project.

Areeb ur Rub ・ Jun 6 '21

CSS Peeper

Wappalyzer

Areeb ur RubFollow

Display cloud file on website - Firebase Basics Series - Part 10

Adding data to firestore

Displaying data

Let's Test

Areeb ur RubFollow

Cloud Storage - Managing files user uploads - Firebase Basic Series - Part 9

Uploading Snapshot

Subscribing to snapshot

getting a progress bar

Getting the file link

What Next:

Areeb ur RubFollow

Free Cloud File Storage - Firebase Basics Series - Part 8

Creating a post

Getting files from user

Uploading files to cloud storage

Adding firebase cloud storage script

Location of files

Uploading a file

Uploading files in our project

What Next:

Follow me:

Areeb ur RubFollow

🔹 1. Ensure `ssh-agent` Is Running

🔹 3. Configure `~/.ssh/config` for Multiple GitHub Accounts