DEV Community: Osman Forhad

How to Solve tailwind css configuration not found

Osman Forhad — Mon, 18 Nov 2024 09:59:15 +0000

Recently i have been working in a React js project where also include vite and shadcn/ui
and once i go to setup my project with shadcn-ui and i just enterd npx shadcn@latest init command into my terminal.
after a few seconds its show me an warring like bellow:
tailwind css configuration not found

and then i thought what was the problem and looking for solution.
after a few times i understand, i have to declare in my global css file, that i am going to use talwind.
and then i go to my react project and then src folder and open index.css file.
and now in the top of the index.css file i imported this three library:
@tailwind base;
@tailwind components;
@tailwind utilities;

and then again entered npx shadcn@latest init command. now it successfully installed.

Note: i have so many times to try upload error and solutions screenshot, but i am not sure why devto blog can't enable to upload my images.

Thank you
Happy Coding
.
osman forhad
Full-Stack Developer💻 (Mobile App & Web App)
developer.osmanforhad@gmail.com

How to Enable Debug mode in WordPress

Osman Forhad — Wed, 06 Apr 2022 06:23:49 +0000

To enable debugging on your WordPress site, please follow the steps below.

1) Locating the wp-config.php file

2) Editing the wp-config.php file
Once your site files are open, you’ll need to open wp-config.php for editing. This will be located in the root folder of your site.

The wp-config file contains site-specific configuration settings, such as database information and, potentially, settings added by your hosting provider. For debugging, you’ll need to find this line of code (will generally be near bottom of file):

define( 'WP_DEBUG', true );

3) Adding your debug code
Copy and paste this code snippet over the line of code mentioned in Step 2.

`// Enable WP_DEBUG mode
define( 'WP_DEBUG', true );

// Enable Debug logging to the /wp-content/debug.log file
define( 'WP_DEBUG_LOG', true );

// Disable display of errors and warnings
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );

// Use dev versions of core JS and CSS files (only needed if you are modifying these core files)
define( 'SCRIPT_DEBUG', true );`

OR Follow Like Bellow Screen Shot:

.
Thank you
Happy Coding
.
osman forhad
Full-Stack Developer💻 (Mobile App & Web App)
developer.osmanforhad@gmail.com

Laravel artisan commands error : Failed to parse dotenv file due to an invalid name

Osman Forhad — Thu, 31 Mar 2022 19:45:58 +0000

every time I run php artisan commands I got this error
The environment file is invalid! Failed to parse dotenv file due to an invalid name.
.
to solve this i just replace the APP_NAME which is like below:
APP_NAME=MY Application
to
APP_NAME="MY Application"

and its solve my issues
.
Thank you
Happy Coding
.
osman forhad
Full-Stack Developer💻 (Mobile App & Web App)
developer.osmanforhad@gmail.com

React js Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API

Osman Forhad — Wed, 30 Mar 2022 19:38:41 +0000

Recently i have been working in a React js project its show me an warning in my Browser Console which is like below screen shot:

don't worry i will Show you How to Solve this type of warning.
When react js warning ReactDOM.render is no longer supported in React 18
is happen then my index.js file is look like bellow screenshot:

to solve the ReactDOM.render is no longer supported in React 18 Warning i just change my index.js file. after changed index.js file now my index.js is look like below Screen shot:

That's it now the warning is gone. so finally Browser console is look like:

Thank you
Happy Coding
.
osman forhad
Full-Stack Developer💻 (Mobile App & Web App)
developer.osmanforhad@gmail.com

The uri parameter to openUri must be a string mongoose.connection or mongoose.createConnection is a string (Solution)

Osman Forhad — Sun, 13 Mar 2022 06:36:13 +0000

i have been working in a Node js small project where i use MongoDB as Database and use mongoose as a Data Modeling Library.
but when i tried to connect to Database its show an which is: Mongoose Error The uri parameter to openUri must be a string-got undefined Make sure the first parameter to mongoose.connect
or mongoose.createConnection is a string
the actual error screen shot is:

after seen this type of error i want to fix why this is happen cause i am 100% confident that there is no any coding issues and i have written well organize code. so i try to find out the problem after few times i got what i did and what is my mistake and then i solve the issue and i decide to share this solution with all of you the internet people.
So, to solve The uri parameter to openUri must be a string-got undefined Make sure the first parameter to mongoose.connect
or mongoose.createConnection is a string
i go to my API index file and place the dbConfig.js file under the dotenv config file. so why dotenv because i have created env file and use dotenv libraray.
and now i want to show 2 screen shot where the first one is hold the Mongoose Error: mongoose.connect or mongoose.createConnection is a string
and the second one is the solution of this type of error i men to say what i exactly did to avoid this type of error.

1 . Screen shot of the code which generate Mongoose connection String error:

2. Screen shot of the code How i solve or avoid Mongoose connection String error:

this all solve my Mongoose Error: Connection String Error. and after solution the terminal scenario is:

.
That's it
Hope this will help you
Happy Coding
.
osman forhad
Full-Stack Developer💻 (Mobile App & Web App)
developer.osmanforhad@gmail.com

React-js-Identifier-has-Already-been-Declared-(solution)

Osman Forhad — Sat, 12 Mar 2022 05:02:17 +0000

i have been working in a React js small project the project purpose is Build QrCode Geneator.
So when i go to run this project i got an error which is Identifier-Text-has-Already-been-Declared
the errors screen shot is like bellow:

after seen this type of error i fell wonder and think why this is happen and then i try to find where is the problem, why this is happening. after thinking some time i realize and find what i did and that's all of my mistake. When i solve the issue i think it's very funny and interesting so i decide to share this with all of you internet people.

So why Identifier-Text-has-Already-been-Declared error happen: this all of my mistake i have declared my Component File Name is Text.js but Text is a React Component which i also call from React-bootstrap.. ha ha ... what a funny mistake i did. so what was the actual scenario. Please see The error scenario in below Screen shot:

So i solve this, How i solve this:
it's very easy i think you already understand how i was solve this.. ha ha ....
i just rename my component file from Text.js to Handler.js . cause Text is Component of React js and its a React js Own Component and we cant import any Component twice in React js.
and this is the Reason why i am getting React js Identifier already declared error
after solve the issue my source code scenario is like bellow screen shot:

and that's it
Happy Coding
.
osman forhad
Full-Stack Developer💻 (Mobile App & Web App)
developer.osmanforhad@gmail.com

System Design এর টুকি টাকি

Osman Forhad — Wed, 09 Mar 2022 16:42:35 +0000

System Design সফটওয়্যার ইঞ্জিনিয়ারিং এর এমন একটা গুরুত্ব ফিল্ড যাতে কাজ করতে হলে চারিদিকের চারটা চোখ খুলে নিয়ে ফিউচার সফটওয়্যার (বা প্লাটফর্ম) এর আপাদমস্তক গবেষনা করতে হয়।
সফটওয়্যারের (বা সফটওয়্যার প্লাটফর্মের) রিকয়ারমেন্ট এনালাইসিস করার পর আপনাকে

প্রোগ্রামিং ল্যাংগুয়েজ সিলেকশন নিয়ে চিন্তা করতে হবে
ফ্রেমওয়ার্ক কোনটা ইউজ করবেন সেটা নিয়ে ভাবতে হয়
ডাটাবেজ সিস্টেম কোনটা ব্যবহার করবেন সেটা নিয়ে চিন্তা করতে হয়
ডাটাবেজ ডিজাইন করার পিছনে বিস্তর মাথা খাঁটাতে হয়
অথেনটিকেশন ও অথোরাইজেশন কিভাবে হবে সেটা নিয়ে ভাবনা করতে হয়
দিন ও রাতের কোন সময়ে ইউজার বেশি থাকতে পারে সেটা এনালাইসিস করতে হয়
পৃথিবীর কোন লোকেশন থেকে আপনার সফটওয়্যার বেশি ব্যবহার হবে তা নিয়ে গবেষনা করতে হয়
এবার সেই লোকেশনের কোথাও একজায়গায় সার্ভার রাখতে হয় (সার্ভার কিনতে হয় বা সার্ভার ভাড়া করতে হয় যাই বলেন)
একাধিক সার্ভার থাকলে তাদের নিজেদের মধ্যে স্মুথ কমিউনিকেশনের জন্য আবার নেটওয়ার্ক ডিজাইন করতে হয়
সবগুলো সার্ভার এবং সার্ভারে ডেপ্লয় করা সফটওয়্যার কম্পোনেন্টকে সব সময় আপ এন্ড রানিং রাখার জন্য আবার আলাদা টুলস (ধরেন Kubernetes) কনফিগারেশনের বিষয় মাথায় রাখতে হয় ...

আরো কত কি যে মাথার মধ্যে দলা-মোচড় করতে হয় তার ইয়ত্তা নেই। এসমস্ত জ্ঞান আবার শুধু ক্লাস করে, ভিডিও দেখেই শিখে ফেলা যায়না। সময়ের সাথে হাতকে এলোপাতারি কাজ দ্বারা ঘষামাজা করতে করতে অর্জন হয়।

ndoe-js-cannot-find-module-error-solution or node:internal/modules/cjs/loader:936 throw err; ^(Solution)

Osman Forhad — Thu, 03 Mar 2022 08:03:37 +0000

trying to run node js project which is develop in express js and other necessary library. after writing code when i decide to run the project then i wrote the command npm start and alternatively nodemon command. its show me an error which is below screenshot:

after this happening i was thinking and search why this is happen and why terminal show me node:internal/modules/cjs/loader:936 throw err; ^
after wasting few times i find out and figured the mistake which is done by me. so i decide to share this with all of you guys (the internet people)
.
so what was the mistake did by me: it was a case of trying to run the file in node from the wrong location.
do you understand.? if answer is no. well i explain here don't worry: here rbac is my project directory and there i have another directory which name was server and inside the server directory i have a file which name also server.js, please keep in mind this is the main point of my mistake.
.
to run this project i need to hit** server.js file by using npm start or nodemon*. in this case i was open my termial inside my main directory which name rbc as i mentioned in previous line and from here i tried to hit server.js file but this file is not in this location. the actual location of server.js file is inside **rbac/server/server.js *
so the terminal show me node:internal/modules/cjs/loader:936 throw err; ^
and when i realize my mistake then i just move server.js file from rbac/server/server.js to rbac/server.js
and then open terminal inside the project root and then run nodemon or npm star and now it's working fine. finally my terminal look like below screenshot and this is the actual view which i want to see.

.
Happy Coding.
osman forhad
Full-Stack Developer💻 (Mobile App & Web App)
developer.osmanforhad@gmail.com

How to setup Side by Side Editing Layout in vs code

Osman Forhad — Sun, 20 Feb 2022 04:35:17 +0000

How to setup Side by side editing Layout in VS Code

.
You can open as many editors as you like side by side vertically and horizontally. If you already have one editor open, there are multiple ways of opening another editor to the side of the existing one:

Alt click on a file in the Explorer.
Ctrl+\ to split the active editor into two.
Open to the Side (Ctrl+Enter) from the Explorer context menu on a file.
Click the Split Editor button in the upper right of an editor.
Drag and drop a file to any side of the editor region.
Ctrl+Enter (macOS: Cmd+Enter) in the Quick Open (Ctrl+P) file list.

Whenever you open another file, the editor that is active will display the content of that file. So if you have two editors side by side and you want to open file 'foo.cs' into the right-hand editor, make sure that editor is active (by clicking inside it) before opening file 'foo.cs'.

By default editors will open to the right-hand side of the active one. You can change this behavior through the setting workbench.editor.openSideBySideDirection and configure to open new editors to the bottom of the active one instead.

When you have more than one editor open you can switch between them quickly by holding the Ctrl (macOS: Cmd) key and pressing 1, 2, or 3.

Tip: You can resize editors and reorder them. Drag and drop the editor title area to reposition or resize the editor.

VS Code Basic Layout Inception

.
VS Code comes with a simple and intuitive layout that maximizes the space provided for the editor while leaving ample room to browse and access the full context of your folder or project. The UI is divided into five areas:

Editor - The main area to edit your files. You can open as many editors as you like side by side vertically and horizontally.
Side Bar - Contains different views like the Explorer to assist you while working on your project.
Status Bar - Information about the opened project and the files you edit.
Activity Bar - Located on the far left-hand side, this lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled.
Panels - You can display different panels below the editor region for output or debug information, errors and warnings, or an integrated terminal. Panel can also be moved to the right for more vertical space.
Each time you start VS Code, it opens up in the same state it was in when you last closed it. The folder, layout, and opened files are preserved.

Open files in each editor are displayed with tabbed headers (Tabs) at the top of the editor region. To learn more about tabbed headers, see the Tabs section below.

Tip: You can move the Side Bar to the right hand side (View > Move Side Bar Right) or toggle its visibility (Ctrl+B).

.
Happy Coding.
osman forhad
Full-Stack Developer💻 (Mobile App & Web App)
developer.osmanforhad@gmail.com

React js Error message error 0308010C digital envelope routines unsupported(Solution)

Osman Forhad — Wed, 12 Jan 2022 18:31:57 +0000

basically this type of error happen from node runtime not from react js.
.
dont worry i will tell you why its happen.

at this time i am working with node js v17 which not LTS and this version is not compatible with some of webpack, and my previous Node version was v16 which is LTS. in here everything is okey. there is no any error.

If you use the current LTS version of Node.js then this error will not come.
but
.
to solve this i will not recommend you, to uninstall Node.js version 17+ and reinstall the Node.js version 16+. (This is most common solution but not exact)
but
if you wish you can do this.
.
so, what is the actual solution for
Error message error 0308010C digital envelope routines unsupported
in node v17.
trust me this is every simple and magical. please see below what it should be.

Go to In your package.json: and change this line

"start": "react-scripts start"
to

"start": "react-scripts --openssl-legacy-provider start"

you can see my screen shot, its not more than those previous 2 line.

Thank you
Happy Coding
.
osman forhad
Full-Stack Developer💻 (Mobile App & Web App)
developer.osmanforhad@gmail.com

How to remove a column from Laravel table using migration

Osman Forhad — Fri, 23 Jul 2021 16:47:41 +0000

I was working with Laravel framework and i create a laravel migration table and working with it but after some times i need to remove a column from my table and its should do using laravel migration. for that what was the process i deed. i want to share may knowledge with you.

for that the very first step was. i opened my terminal and navigate to project directory after that i was run below command on my terminal:

php artisan make:migration remove_categorrystatus_from_categories --table=categories

this command create a migration file for me and then i open this file and wrote my migration schema to remove a column from my database table. when i open the fle i saw there two function one is public function up and another is public function down.

To remove a column i updated those functions which is like bellow:
//the up function is
public function up()
{
Schema::table('categories', function (Blueprint $table) {
$table->dropColumn('categorrystatus');
});
}
//the down function is
public function down()
{
Schema::table('categories', function (Blueprint $table) {
$table->dropColumn('categorrystatus');
});
}

an then i go to my terminal and run below command:

php artisan migrate

which was remove the categorrystatus column from my catgories table
.
that's it. all are done
.
Happy Coding.
osman forhad

How to add a new column in Laravel table using migration

Osman Forhad — Fri, 23 Jul 2021 16:37:07 +0000

I was working with Laravel framework and i create a laravel migration table and working with it but after some times i need to add another column on my table and its should make using laravel migration. for that what was the process i deed. i want to share may knowledge with you.

for that the very first step was. i opened my terminal and navigate to project directory after that i was run below command on my terminal:

php artisan make:migration add_category_status_to_categories_table --table=categories

this command create a migration file for me and then i open this file and wrote my migration schema for add new column into my database table. when i open the fle i saw there two function one is public function up and another is public function down.

To add a new column i updated those functions which is like bellow:
//the up function is
public function up()
{
Schema::table('categories', function (Blueprint $table) {
$table->enum('category_status', ['active', 'deactive'])->after('category_slug')->default('active');
});
}
//the down function is
public function down()
{
Schema::table('categories', function (Blueprint $table) {
$table->enum('category_status', ['active', 'deactive'])->after('category_slug')->default('active');
});
}

all are set now i am ready to migrate my new column schema for that i go to my terminal and run below command:

php artisan migrate

and all are done now i seen the category_status column is added after category_slug column on my categories table.

that's it.
.
Happy Coding.
osman forhad