DEV Community: skidee

Debloat OPPO A15s

skidee — Sat, 22 Nov 2025 17:53:58 +0000

This is the list of packages that you can remove safely.
after a year of usage after debloat, my device is working totally fine

Step 1: setup the debloater https://beebom.com/how-remove-bloatware-android-phone

Step 2: select and remove the following packages

com.android.fmradio com.android.providers.partnerbookmarks com.coloros.gamespace com.coloros.gamespaceui com.coloros.musiclink com.facebook.appmanager com.facebook.services com.facebook.system com.google.android.apps.googleassistant com.google.android.apps.maps com.google.android.apps.nbu.files com.google.android.apps.nbu.paisa.user com.google.android.apps.photos com.google.android.calendar com.google.android.googlequicksearchbox com.google.android.keep com.google.android.onetimeinitializer com.google.android.printservice.recommendation com.heytap.browser com.heytap.cloud com.heytap.mcs com.heytap.pictorial com.mediatek.atmwifimeta com.mediatek.mdmconfig com.oppo.partnerbrowsercustomizations com.oppo.quicksearchbox

Debloat Samsung A50

skidee — Sat, 22 Nov 2025 17:46:45 +0000

This is the list of packages that you can remove safely.
after 2 months of usage after debloat, my device is working totally fine

Step 1: setup the debloater https://beebom.com/how-remove-bloatware-android-phone

Step 2: select and remove the following packages

com.android.chrome com.android.dreams.phototable com.android.providers.partnerbookmarks com.aura.oobe.samsung com.dsi.ant.plugins.antplus com.dsi.ant.sample.acquirechannels com.facebook.appmanager com.facebook.services com.facebook.system com.google.android.apps.tachyon com.google.android.feedback com.google.android.gms.location.history com.google.android.googlequicksearchbox com.google.android.onetimeinitializer com.google.android.printservice.recommendation com.google.android.projection.gearhead com.google.ar.core com.hiya.star com.knox.vpn.proxyhandler com.microsoft.appmanager com.opera.max.preinstall com.samsung.android.aircommandmanager com.samsung.android.app.camera.sticker.facearavatar.preload com.samsung.android.app.clipboardedge com.samsung.android.app.cocktailbarservice com.samsung.android.app.reminder com.samsung.android.app.routines com.samsung.android.app.settings.bixby com.samsung.android.app.simplesharing com.samsung.android.app.spage com.samsung.android.app.taskedge com.samsung.android.app.tips com.samsung.android.app.watchmanagerstub com.samsung.android.arzone com.samsung.android.bixby.agent com.samsung.android.bixby.agent.dummy com.samsung.android.bixby.service com.samsung.android.bixby.wakeup com.samsung.android.bixbyvision.framework com.samsung.android.dynamiclock com.samsung.android.easysetup com.samsung.android.fmm com.samsung.android.game.gamehome com.samsung.android.game.gametools com.samsung.android.icecone com.samsung.android.kidsinstaller com.samsung.android.knox.analytics.uploader com.samsung.android.knox.attestation com.samsung.android.livestickers com.samsung.android.mateagent com.samsung.android.mdm com.samsung.android.mdx.kit com.samsung.android.net.wifi.wifiguider com.samsung.android.networkdiagnostic com.samsung.android.privateshare com.samsung.android.rubin.app com.samsung.android.samsungpass com.samsung.android.samsungpassautofill com.samsung.android.samsungpositioning com.samsung.android.scloud com.samsung.android.sdk.handwriting com.samsung.android.service.peoplestripe com.samsung.android.setupindiaservicestnc com.samsung.android.smartcallprovider com.samsung.android.spaymini com.samsung.android.stickercenter com.samsung.android.svcagent com.samsung.android.svoiceime com.samsung.android.visionintelligence com.samsung.knox.securefolder com.samsung.rcs com.samsung.storyservice com.sec.android.app.chromecustomizations com.sec.android.app.quicktool com.sec.android.app.ringtoneBR com.sec.android.diagmonagent com.sec.android.preloadinstaller com.sec.android.widgetapp.easymodecontactswidget

Set Up Shadcn Canary with Tailwind CSS 4 in a React Vite Project (JavaScript Only)

skidee — Sun, 16 Feb 2025 09:20:57 +0000

create a react project using vite:
```
npm create vite@latest
```
(choose React and then JavaScript in options)
install tailwind css
```
npm install tailwindcss @tailwindcss/vite
```
(installs tailwind css v4 by default)

add the "tailwind plugin", "resolve" and "path" in the vite.config.json

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

import tailwind at the top of src/index.css :
```
@import "tailwindcss";
```

create a file called jsconfig.json in the root directory

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

install shadcn canary
```
npx shadcn@canary init
```
i chose “zinc”, then “yes” for css variables, and then “use —force”

checkout the difference between Default and New York theme in shadcn and colors it provides.

now select “use —force” whenever u install a component
example: npx shadcn@canary add button

make sure to replace @latest with @canary

src/App.jsx :

   import './App.css'
   import { Button } from './components/ui/button'

   function App() {
     return (
       <>
         <Button variant="default">Button</Button>
       </>
     )
   }

   export default App

do npm run dev

That’s how you install and configure Shadcn Canary with Tailwind CSS 4 in a React Vite JavaScript project without TypeScript. Whether you were searching for "How to install Shadcn with Tailwind CSS 4 in a React Vite project (No TypeScript)" or "Shadcn Canary setup with Tailwind CSS 4 and Vite in a React project (JavaScript only)," this guide covers everything you need to get started.

How to use Shadcn with React (JavaScript, No TypeScript)

skidee — Sun, 16 Feb 2025 09:01:10 +0000

create a react project using vite:
```
npm create vite@latest
```
(choose React and then JavaScript in options)
we'll use tailwind 3.4.1 coz tailwind v4 is not properly compatible with shadcn yet:
```
npm install -D tailwindcss@3.4.1 postcss autoprefixer`
```

initialize tailwind config:
```
npx tailwindcss init -p
```

at the top of index.css add these directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

edit tailwind.config.js and make it look like this:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

create a jsconfig.json file in root directory of project and paste this:

{
     "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
 }

install shadcn
```
npx shadcn@latest init
```
(i chose “new york”, then “zinc” and then “use —force” option)

checkout the difference between Default and New York theme in shadcn and colors it provides.

edit the vite.config.json:

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

now u can install shadcn components and use them

select “use —force” whenever u install a component

preview:

example usage:

src/App.jsx :

import './App.css'
import { Button } from './components/ui/button'

function App() {
  return (
    <>
     <Button variant="default">Button</Button>
    </>
  )
}

export default App

That’s how you install and use Shadcn in a React project (JavaScript only, No TypeScript). Whether you were searching for "How to use Shadcn with React (JavaScript, No TypeScript)" or "Set up Shadcn in a React project without TypeScript," this guide covers everything you need to get started.

Weather widget / component in Next.js

skidee — Tue, 16 Jul 2024 12:23:30 +0000

Dynamic Weather Widget

Follow these steps to integrate a dynamic weather widget into your Next.js project.

Step 1: Create an API Route

Inside your app folder, create a new folder named api.
Inside the api folder, create a subfolder for your weather route (e.g., weather).
Add a file named route.js inside the weather folder.

You can find the code for route.js here.

Make sure to change the name of the city in the code as needed:

Step 2: Add the Environment Variable

Go to the OpenWeatherMap website, create an account, and navigate to the My API keys section in your profile to generate an API key.

It might take a few minutes for the API key to activate and start working.

Create a file named .env in your project folder and add the environment variable with your API key:

If you are hosting the project on Vercel:
Add the environment variable during deployment, or if the project is already deployed, add it through the project dashboard

Step 3: Create a Weather Component

Create a folder named components in your project folder.
Inside the components folder, create a file named Weather.js.
Add the code from here to Weather.js.
Install the dependencies by running the following command in project folder terminal:

   npm install swr framer-motion @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core

Step 4: Import and Use the Weather Component

Import the Weather component in the file where you want to display the widget.

   import Weather from './components/Weather';

Add the Weather component in your JSX:

   <Weather />

The weather widget should now be integrated and look similar to this:

It's just straight text, no css around it.

Markdown file Rendering in Next.js

skidee — Fri, 16 Feb 2024 19:30:44 +0000

First I created the website using npx create-next-app (with all default options)

then installed marked by running npm install marked in the project directory

then added a README.md file inside public folder

(I tried keeping the readme file in other locations but it didn't worked even after writing the correct path)

The code for rendering the md file:

"use client"
import React, { useState, useEffect } from "react";
import { marked } from 'marked';
import '@/app/Bookmarks/styles.css'

const Bookmarks = () => {
  const [readmeContent, setReadmeContent] = useState("");

  useEffect(() => {
    const fetchReadme = async () => {
      try {
        const response = await fetch("/README.md");

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const textContent = await response.text();
        const parsedContent = marked(textContent);

        setReadmeContent(parsedContent);
      } catch (error) {
        console.error("Error fetching README.md:", error);
      }
    };

    fetchReadme();
  }, []);

  return (
    <>
      <div className="mx-auto py-16">
        <p className="text-start text-5xl px-11">Read / Watch Laters</p>
      </div>

      <div className="px-11 mb-10">
        <hr className="px-10 w-3/3 mb-10 "></hr>
            {/* Render the parsed Markdown content with styling */}
            <div   
            dangerouslySetInnerHTML={{ __html: readmeContent }}   
            className="markdown"></div>
      </div>
    </>
  );
};

export default Bookmarks;

since I created a separate CSS file for this page, I linked it by writing import '@/app/Bookmarks/styles.css'

but if you are writing the CSS in globals.css file, which is inside app folder, then the path will be import '@/app/globals.css'

CSS for styling the links, headings, text etc.:

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: black;
  color: white;
}

.markdown {
  @apply space-y-4; /* Add vertical space between elements */
}

/* headings */
.markdown h1 {
  @apply text-5xl font-bold; 
}

.markdown h2 {
  @apply text-3xl font-semibold; 
}

.markdown h3 {
  @apply text-2xl font-semibold; 
}

.markdown h4 {
  @apply text-xl font-semibold; 
}

/* links */
.markdown a {
  @apply text-blue-500; 
}

/* paragraphs */
.markdown p {
  @apply leading-relaxed; 
}

/* blockquotes */
.markdown blockquote {
  @apply bg-gray-100 border-l-4 border-blue-500 px-4 py-3 my-4; 
}

/* code blocks */
.markdown pre {
  @apply bg-gray-800 text-gray-200 p-6 rounded-md; 
}

/* horizontal rules */
.markdown hr {
  @apply border-t-2 border-gray-300 my-8; 
}

/* tables */
.markdown table {
  @apply table-auto border-collapse border border-gray-300; 
}

/* table headers */
.markdown th {
  @apply p-4 border border-gray-300 bg-gray-200 font-semibold; 
}

there are better ways to do styling of markdown content using tailwind but I'm going with this method for now.

do let me know in the comments if there are simpler and efficient methods for it.

Make Linux Mint terminal look like Ubuntu terminal

skidee — Fri, 22 Sep 2023 17:25:16 +0000

Here is how to make linux mint terminal look like GNOME terminal:

On top left of your terminal go to Edit → Preferences

Copy these settings:

Color code for the purple background: #2C001E

Final result:

My Experience with HacktoberFest 2020

skidee — Sat, 31 Oct 2020 11:00:55 +0000

🌴 About me

Hi I'm Harshit, a self learning computer science beginner who likes creating stuff. 🐢
I joined this beautiful Dev community, It is filled with awesome resources and people who write articles and I also want to share my experiences, cool resources and solutions of some problems.

📜 Background

I'm new to this open source community, have been working on some opensource projects since july 2020 :)

🐇 Progress

My brother advised me to start learning about open source contribution and he was the person who shared me this awesome HacktoberFest opportunity...and i actually learned a lot about open source stuff and also completed the hacktoberfest.

✨ Contributions

since I'm a beginner I started with some basics (beginner friendly repos)...here is the list of contributions I have made :

1. cloud haiku :

This repository is made by digital ocean organisation where you have to write a unique haiku by yourself.

2. First bit :

First-Bit is also a beginner friendly repo which teaches you the fork -> clone -> edit -> PR workflow.

3. code for cause :

Another beginner friendly repo to take pledge to code for cause.

4. First Contributions :

A repo with basic tutorial on how to get started with opensource contribution.

🎀 Reflections

Overall the experience was nice and exciting. This was my first time participating in hacktoberfest, It helped me a lot in expanding my knowledge about opensource. I'll participate again next year and will try to do some more high quality contributions.