Forem: Shan Asif

Avoid storing files in the Database: Here is what you should do.

Shan Asif — Fri, 04 Jul 2025 03:35:40 +0000

If you're storing entire .jpg, .png, or .pdf files directly in your database...

You might want to pause. 🛑

Storing full files as BLOBs or Base64 in your DB can:

→ Slow down performance

→ Inflate database backups

→ Make scaling a nightmare

What’s a better way?

Store only file metadata in your database like:

→ filename,

→ mimetype

→ size

→ key (if exists)

→ and most importantly, the file URL/path (For Quick Lookups)

Then store the actual files in:

→ Object storage (S3, Firebase Storage, Digital Ocean Droplet etc.)

→ Your own secure file server

This pattern:

→ Improves security

→ Speeds up performance

→ Makes file management modular and scalable

Bonus: Always store the MIME type (image/jpeg, image/png, application/pdf, etc) in the database instead of plain extensions like PDF, PNG.

Step-by-Step Guide to Running DeepSeek R1 AI Locally

Shan Asif — Sat, 25 Jan 2025 15:48:00 +0000

Imagine having a smart assistant that works entirely on your computer—keeping your data private, saving money, and working even without the internet. That’s DeepSeek R1, a powerful AI tool similar to ChatGPT(OpenAI o1) or Claude but designed to run directly on your machine. Follow this simple guide to get started in minutes!

Why Run DeepSeek R1 on Your Computer?

100% Private: Your data never leaves your device.
Free Forever: No hidden fees or subscriptions.
Works Offline: No internet? No problem!
Customizable: Choose the version that fits your computer’s power.

What You’ll Need

Computer Specs:

Note: I tested 14b and 32b on a Mac mini m4 pro base model (14b works great, but 32b was not working).

Step 1: Install Ollama (Your AI Assistant Tool)

Ollama is free software that lets you run AI models like DeepSeek R1.

Here’s how to get it:

Go to Ollama’s website.
Download the version for your computer (Windows, Mac, or Linux).
Install it like any normal app—just follow the prompts!

Check if it works:

Open your computer’s terminal (Don’t panic! It’s just a text command tool).
Type ollama list and press Enter. If you see no errors, you’re good!

Step 2: Download Your DeepSeek R1 Model

DeepSeek R1 comes in different sizes. Start small if you’re unsure!

Open your terminal again.
Copy and paste one of these commands based on your computer’s power:

Models:

1.5B (Basic laptops) ollama run deepseek-r1:1.5b
8B (Most users ✅) ollama run deepseek-r1:8b
14B+ (Powerful computers) ollama run deepseek-r1:14b

Wait for the download to finish—this might take a few minutes.

Step 3: Pick the Right Model for Your Computer

Got a regular laptop? Stick with 1.5B or 8B.
Powerful gaming PC or Mac? Try 14B or higher for smarter responses.
Not sure? Start with 8B—you can always switch later!

Step 4: Get a Friendly Chat Interface (No Coding!)

Chatbox turns the AI into a simple chat window.

Here’s how:

Download Chatbox from chatboxai.app
Install it, then open the app.
Go to Settings → Model Provider → Choose Ollama.
In the “API Host” box, type: http://127.0.0.1:11434
Select “DeepSeek R1” from the menu—you’re ready to chat!

Note: I have also downloaded a few other models like llama3.2 and codellama:13b. You can easily do that through ollama.

Step 5: Test Your AI Assistant

Try questions like:

“How do I make a chocolate cake?”
“Write a birthday email for my boss.”
“Explain gravity like I’m 5 years old.”

Slow responses? Switch to a smaller model in Ollama.

Pro Tips for Better Results

Close other apps (like games or video editors) while using DeepSeek R1.
For Mac/Linux users: Update your system software for best performance.
Stuck? Restart Ollama by typing ollama serve in your terminal.

What Can DeepSeek R1 Do?

Write code, stories, or emails
Solve math problems
Answer trivia questions
Help brainstorm ideas

Final Thoughts

DeepSeek R1 puts cutting-edge AI directly on your computer—no internet or fees required. Whether you’re a student, writer, or just curious, this guide helps you start safely and simply. Experiment with smaller models first, and upgrade as you get comfortable. Happy exploring! 🚀

Share with others if you found this guide helpful!

Session vs Cookie

Shan Asif — Fri, 20 Dec 2024 08:12:49 +0000

Sessions and cookies are both used to store information about users, but they have different characteristics and purposes:

Cookie:

Where it's stored: On the user's browser.
Purpose: To remember information about the user, such as login details or preferences, across different browsing sessions.
Lifetime: Can persist for a long time, depending on how they are set up (until they expire or are deleted).
Use case: Often used for tracking, remembering login status, or storing user preferences.

Example:

When you visit an online store and it remembers your login details or your preferences (like language settings), that's done using cookies.

You might close the browser and come back later, and the website still remembers you because the cookie is still there.

Session:

Where it's stored: On the server.
Purpose: To keep track of a user's activity while they are visiting a website.
Lifetime: Typically lasts only as long as the user's visit to the website. It ends when the user closes the browser or logs out.
Use case: Often used for maintaining a user's state and information while they navigate a site, like keeping items in a shopping cart.

Example:

When you add items to a shopping cart on an e-commerce site, that information is stored in a session. If you leave the site or close your browser, the cart might be empty when you return.

The information is kept on the website's server and disappears when you leave or log out.

Session and Cookies Often Work Together:

1. Session Management:

When you visit a website, a session is created on the server to keep track of your activities and data during your visit. This session is identified by a unique session ID. This session ID is sent to the user's browser as a cookie.

2. Using Cookies to Store Session IDs:

To link your browser to this session on the server, the server typically sends a cookie to your browser with the session ID.
Your browser stores this cookie, and every time you make a request to the server (like clicking a link or submitting a form), it sends the cookie back to the server.
This way, the server knows which session belongs to you and can provide the correct data and experience.

3. Persistence Across Visits:

Even though sessions are temporary, cookies can allow for persistence across visits.

For example, if you log in and select "Remember Me," the site might use a cookie to store your login status so you don’t have to log in again on future visits.

Authentication vs Authorization

Shan Asif — Fri, 20 Dec 2024 07:57:47 +0000

Authentication and authorization are two important concepts in website security, and they serve different purposes:

Authentication:

What it is: It's the process of verifying who someone is.

Example: When you log into a website using your username and password, you are proving your identity. This is authentication. It answers the question, "Are you who you say you are?"

Authorization:

What it is: It's the process of determining what someone is allowed to do.

Example: Once you've logged in, the website checks what actions you can perform, like viewing your profile, modifying data, or accessing certain sections. This is authorization. It answers the question, "What are you allowed to do?"

In simple terms, authentication is about checking your identity, while authorization is about checking your permissions.

Request vs Response Headers

Shan Asif — Thu, 12 Dec 2024 19:17:46 +0000

In HTTP communication, headers are used to pass additional information with requests and responses. Here’s a comparison between response headers and request headers:

Request Headers

Definition: These are the headers sent by the client (usually a web browser) to the server with an HTTP request.
Purpose: They carry information about the client and its environment. This can include details like what type of data the client can process, what languages it prefers, and any cookies it might have stored.

Common Examples:

Accept: Specifies the media types that are acceptable for the response (e.g., text/html, application/json).
User-Agent: Provides information about the client software initiating the request (e.g., browser type and version).
Authorization: Contains credentials for authenticating the client with the server.
Host: Indicates the domain name of the server and, optionally, the TCP port number.

Response Headers

Definition: These are the headers sent by the server back to the client in response to an HTTP request.
Purpose: They provide information about the server's response, such as metadata about the returned content and instructions on how to handle it.

Common Examples:

Content-Type: Indicates the media type of the resource (e.g., text/html, image/png).

Set-Cookie: Sends cookies from the server to be stored on the client.
Cache-Control: Provides caching directives for both requests and responses (e.g., no-cache, max-age=3600).
Server: Identifies the software used by the origin server (though this can be hidden for security reasons).

Get specific properties from an array of Objects in JavaScript

Shan Asif — Sat, 31 Aug 2024 11:09:37 +0000

Get Specific Properties from an Array of Objects in JavaScript Using Map.

Key Points:

→ Purpose: Creates a new array by applying a function to each element of an existing array.

→ Returns a New Array: The original array remains unchanged; a new array is generated.

→ Chainable: Can be combined with other array methods like filter and reduce.

→ Not for Side Effects: Primarily used for data transformation, not for modifying external variables.

→ Example: Easily transforms arrays, such as doubling numbers.

→ Performance: More efficient and cleaner than traditional loops for creating new arrays.

If you want to learn the execution of map array method with examples:

On YouTube → Get specific properties from an array of Objects

Remove Object from Array using JavaScript Filter (Easy Tutorial)

Shan Asif — Tue, 27 Aug 2024 12:54:54 +0000

Key Points:

→ Creates a New Array: Returns a new array containing elements that pass the test defined by the provided function.

→ Non-destructive: Does not modify the original array; it leaves it unchanged.

→ Callback Function: Takes a function that receives each element and returns true or false to keep or remove the element.

→ Chaining: Can be combined with other array methods like map() and reduce() for complex operations.

→ Use Cases: Ideal for filtering out elements based on specific conditions, such as excluding certain values or objects.

Tutorial Remove Object from Array → on YouTube

5 Project ideas for NextJS

Shan Asif — Thu, 19 Oct 2023 10:13:40 +0000

Level up your NextJS skills.

Check out these great project ideas:

Clinic Management System
Marketplace Application
Budget Planner
SEO Ready Blog App with CMS
LMS (Learning Management System)

💡 Tip: Boost your projects with the power of OpenAI models!

NextJS Tip ⚡ Better Website Optimization with Smarter Font Management

Shan Asif — Thu, 19 Oct 2023 09:42:30 +0000

NextJS Tip ⚡ Better Website Optimization with Smarter Font Management

If you're still using the old manual method of adding links inside the next/head.

Stop doing that; instead, utilize next/font, which lets you optimize your fonts easily and efficiently.

During build time, CSS and font files are downloaded and self-hosted with other static assets.
No requests are sent to Google by the browser.
next/font optimize fonts and remove network requests for improved privacy and performance.
This means you can optimally load web fonts with zero layout shift

Follow me for more NextJS | ReactJS Tips & Simplified Code Snippets

⚡️ Check Active Links & Sub-Links in NextJS

Shan Asif — Thu, 19 Oct 2023 07:49:21 +0000

⚡️ Check Active Links & Sub-Links in NextJS

You can use usePathname() to determine if a link is active.
Check if the current pathname matches the href of the link OR the sub-link

Quick Notes:

usePathname() is a Client Component hook that lets you read the current URL's pathname.
It returns a string of the current URL's pathname

Example:

/dashboard → '/dashboard'
/dashboard?v=2 → '/dashboard'
/blog/hello-world → '/blog/hello-world'

Follow for more NextJS | ReactJS Tips & Simplified Code Snippets

Create a JavaScript Tool to Generate Acronym from User Input

Shan Asif — Wed, 13 Sep 2023 18:30:36 +0000

The code provided is a JavaScript function called getAcronym that takes a string of words as input and returns the acronym formed from the first letter of each word.

What is Acronymn?

An acronym is a word formed from the initial letters of a phrase or a series of words. It is used as a shorter way to represent a longer phrase or name.

Here’s a step-by-step explanation to generate Acronym:

The getAcronym function is defined using the arrow function syntax (const getAcronym = (words) => { ... }).
The input string words is split into an array of words using the split method and the space delimiter (words.split(" ")). This creates an array where each element represents a word in the input string.
The map method is used to iterate over each word in the array. For each word, a callback function is executed, which extracts the first character of the word using the charAt(0) method and converts it to uppercase using the toUpperCase method (word.charAt(0).toUpperCase()). This creates an array of uppercase letters representing the first letters of each word.
The join method is used to combine all the elements of the array into a single string. The empty string "" is used as the separator (array.join("")). This results in a string that represents the acronym formed by concatenating the uppercase letters.
The acronym string is returned as the output of the getAcronym function.

In the example usage, the getAcronym function is called with the input string “Fear of missing out”. The resulting acronym “FOMO” is then logged to the console using console.log(acronym).

Debugging is like being the detective in a crime movie

Shan Asif — Sat, 02 Sep 2023 12:34:07 +0000

Debugging is like being the detective in a crime movie, except the crime scene is your own code, and the culprit is usually a missing semicolon.