DEV Community: ツᎪʏᴜꜱʜ ᴋᴜᴍᴀʀ

🔥 Firebase Storage: Easy Setup & File Listing.

ツᎪʏᴜꜱʜ ᴋᴜᴍᴀʀ — Mon, 04 Aug 2025 08:18:07 +0000

"Firebase is a Backend-as-a-Service (BaaS) platform developed by Google that helps developers build web and mobile apps faster without managing traditional server-side infrastructure."

Step 1: Firebase Setup

1. Create a New Project

Click on “Add Project” or “Create Project”
Give your project a meaningful name (e.g., MyFirebaseStorageDemo)
Follow the guided steps and click Finish to set up the project.

2. Enable Firebase Storage

Go to the left sidebar and click on “Build > Storage”
Click “Get Started” and choose your storage location (pick the one closest to your users).

3. Upgrade to Blaze Plan

Go to Project Settings > Usage and billing.
Select Blaze Plan (first $1 is often free as part of a trial)

4. Set Storage Rule

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.time < timestamp.date(2025, 8, 23);
    }
  }
}

5. Upload Files on Cloud Storage

Create a folder after Clicking on Folder Icon at Right Corner.
Upload images file to the Folder.

Step 2: Add Firebase SDK to HTML.

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

Step 3: Import Firebase CDN in Javascript Block.

<script
<--Above Code-->
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.3.1/firebase-app.js";
import { getStorage, ref, listAll } from "https://www.gstatic.com/firebasejs/10.3.1/firebase-storage.js";
</script>

You can Find CDN in Firebase Documentation.

Step 4: Now Intialize Firebase config.

Go to https://console.firebase.google.com
Select your project
Click ⚙️ Settings (next to Project Overview)
Scroll down to “Your Apps”
Select Your Existing Web App.
Copy the firebaseConfig object shown on screen.
Copy and Paste firebaseConfig.
initialize using an App and Storage Variable.

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID"
};

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

Step 4: Listing Files from Folder in Firebase storage

const fileList = document.getElementById("fileList");
    const listRef = ref(storage, '');
    listAll(listRef)
      .then((res) => {
        res.items.forEach((itemRef) => {
          const li = document.createElement("li");
          li.textContent = itemRef.name;
          fileList.appendChild(li);
        });
      })
      .catch((error) => {
        console.error("Error listing files:", error);
      });

Step 5: Add the HTML Content.

<h2>File List</h2>
  <ul id="fileList"></ul>
<script>
<---Javascript Code from Here-->
</script>

Conclusion:

In this guide, we learned how to:

Set up and configure Firebase Storage in a web project
Apply temporary access rules for development
List all files stored in a folder (or root) using simple JavaScript
Display those files cleanly in the browser.

"Essential Bit Manipulation Techniques in C"

ツᎪʏᴜꜱʜ ᴋᴜᴍᴀʀ — Fri, 30 Aug 2024 08:29:51 +0000

Hey folks! This is my first post here on dev.to, and I’m excited to share some insights on Bit Manipulation Techniques. I hope you find this discussion useful and informative.

Here is the List of Bit Manipulation techniques

1. Bitwise OR(|) for Combining Bits:
Bits from multiple sources are combined using the bitwise OR operator (|).

example:

00001100 (12 in binary)
OR
00000111 (7 in binary)
————————————
00001111 (15 in binary)

2. Bitwise AND (&) for Masking and Extracting:
Bitwise AND is used to isolate specific bits from a combined value or check if certain bits are set. This technique can also be used to mask out unwanted bits.
example:

10101111 [175 (0xAF)]
AND
00111100 [60 (0x3C)]
——————————————
00101100 [44 (0x2C)]

3. Bitwise NOT (~)
The Bitwise NOT operation is a unary operation that inverts all bits of its operand. This means that each bit of the number is flipped: 1s become 0s, and 0s become 1s.
example:

00001100 (12 in binary)
~ (Bitwise NOT)
—————————————-
11110011 (-13 as Result in Binary)

3. Bitwise Shift (<<, >>) for Positioning:
Bitwise shift operations are used to move bits to specific positions within a value before combining or extracting them. This is useful for packing multiple values into a single variable.
example:

Operation: 12 << 2

00001100 (12 in binary)
Shift left by 2 positions
———————————————-
00110000 (48 in binary)

Operation: 12 >> 2
00001100 (12 in binary)
Shift right by 2 positions:
———————————————-
00000011 (3 in binary)

4. Bitwise XOR (^):
For each bit position, the XOR operation sets the result bit to 1 if exactly one of the corresponding bits in the operands is 1, but not both.
Example:

00001100 (12 in Binary)
XOR
00000111 (7 in Binary)
—————————————————
00001011 (11 as Result in binary)

5. Bit Masks for Flags:
Bit masks are used to set, clear, or toggle specific bits within a variable. Each bit in the mask represents a different flag or status bit.
example:

Operation: Bitwise OR to set FLAG_A

Initial State: 00001000 (8 in binary)
OR
FLAG_A: 00000001 (1 in binary)
—————————————————-
Result: 00001001 (9 in binary)

Operation: Bitwise AND with NOT of FLAG_B to clear FLAG_B

Initial State: 00001111
AND NOT FLAG_B: 11111101
—————————————————-
Result: 00001101 (13 in binary)

Bitwise XOR to toggle FLAG_C
Initial State: 00001101 (13 in binary)
XOR
FLAG_C 00000100 (4 in binary)
——————————————————-
Result: 00001001 (9 in binary)

6. Packing Bitfields:
Bitfields gives the utility to the User to pack multiple smaller integer values into a single variable. Bitfields are typically used within structs.
example:

Example for Packing Bitfields
Field1: 1010 (4 bits)
Field2: 0101 (4 bits)

Packed Value: 10100101 (165 in decimal)