DEV Community: JEFF

Create your own youtube video blocker chrome extension ... Easy Af 🥵

JEFF — Thu, 20 Feb 2025 17:53:39 +0000

Ever felt triggered by some videos in your youtube feed while scrolling randomly? here is your simple af solution. I have provided the code for the extension and steps how to host it .

Here is the source code for the project :-

jeff-rey619 / UtubeVedioBlocker-Exet

Simple extension to hide the videos with certain keywords in its "Title"

UtubeVedioBlocker-Exet

Simple extension to hide the videos with certain keywords in its "Title"

How to host the extension 1.Go to your extensions tab in my case edge://extensions/ 2.Turn on the developer mode . 3.Click "Load Unpacked" and select your extension folder.

BOOM YOUR'RE DONE

View on GitHub

🎯 What Does This Extension Do?

Lets you add keywords (e.g., "Programming tutorials" , "Pointers" , "Irfans-View").
Hides videos with those keywords in the title.
Saves your keyword list using Chrome Storage (so it's there even after a restart).

Allows you to clear the list whenever you want

HTML for Input – We use a simple HTML page where users can type in the keywords which we want to get out from our sight.

2.Chrome Storage – We store these forbidden words in Chrome's storage so they don’t vanish when you close the browser.

3.Since YouTube dynamically loads videos as you scroll, we run our script every 5 seconds to keep things clean.

Since being a former lazy guy I have kept the code in the most minimalistic form and there is only clear all button to clear the entire list if you want to clear any specific key word .

Go to DevTools (F12) -> Applications ->Extension storage -> search for "YouTube Video Blocker" which is the present in manifest.json file
->Sync -> Edit the list.

How to automate the process of enabling TCP/IP of a sql express server using Power shell scripting

JEFF — Wed, 21 Feb 2024 15:35:15 +0000

[reflection.assembly]::LoadWithPartialName("Microsoft.SqlServer.Smo")

$smo = 'Microsoft.SqlServer.Management.Smo.' 
$wmi = new-object ($smo + 'Wmi.ManagedComputer')

# Change the sql instance name accordingly .
$SQLInstance = 'SQLEXPRESS'

# URI for TCP/IP protocol
$tcpUri = "$($wmi.urn.value)/ServerInstance[@Name=`'$SQLInstance`']/ServerProtocol[@Name='Tcp']"
$tcpProtocol = $wmi.GetSmoObject($tcpUri)

# URI for Shared Memory protocol
$sharedMemoryUri = "$($wmi.urn.value)/ServerInstance[@Name=`'$SQLInstance`']/ServerProtocol[@Name='Np']"
$sharedMemoryProtocol = $wmi.GetSmoObject($sharedMemoryUri)

# Enable TCP/IP protocol
$tcpProtocol.IsEnabled = $true
$tcpProtocol.Alter()

# Enable Shared Memory protocol
$sharedMemoryProtocol.IsEnabled = $true
$sharedMemoryProtocol.Alter()

# Restart SQL Server service
Restart-Service "MSSQL`$$($SQLInstance)"
# Check if the protocols were enabled successfully
if (-not $tcpProtocol.IsEnabled -or -not $sharedMemoryProtocol.IsEnabled) {
   Write-Host "Error: Failed to enable TCP/IP or Shared Memory protocol."
   Write-Host "Press Enter to exit..."
   Read-Host
   exit 1
}

Write-Host "TCP/IP protocols enabled successfully."
```




This script is used to enable tcp/ip through powershell scripting .
Change the $SQLInstance according to your server name .

How to load react.js apps into existing ASP.NET , Simple AF 🥵

JEFF — Fri, 15 Sep 2023 04:42:56 +0000

In this post, I will show how to easily load react apps into existing ASP.NET applications, let it be js, jsx , tsx no barrier.

Note: I've used ASP.NET Web Forms.

Step 1:-

Take an existing react.js project or create a new one and keep it ready .

Step 2:-

Go to View > Terminal to open the command line and enter these commands to install your project's packages and webpack:

cd <ProjectName> npm install webpack webpack-cli

Step 3:-

Create a filename webpack.config.js in the root dir , and paste the following code.



const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const glob = require("glob");

module.exports = {
  entry: {
    "bundle.js": [
      ...glob.sync("build/static/?(js|css)/main.*.?(js|css)").map(f => path.resolve(__dirname, f))
    ],
  },
  output: {
    filename: "build/static/js/bundle.min.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
              name: "static/media/[name].[hash:8].[ext]",
            },
          },
        ],
      },

      {
        test: /\.(png|jpg|gif|svg)$/i,
        include: path.resolve(__dirname, "media"),
        use: [
          {
            loader: "file-loader",
            options: {
              name: "static/media/[name].[hash:8].[ext]",
            },
          },
        ],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

save it and

install the following dependencies
CSS loader:
npm install css-loader style-loader mini-css-extract-plugin
URL loader:
npm install url-loader
SVG loader:
npm install @svgr/webpack
Install process to avoid the "process is not defined" error:
npm install process

save it.

Step 4

Now come back to the root directory in cmd and build the react app.

npm run build

As we have already declared the build script in webpack.config.js file , we will get the build folder added with the bundled folder inside the dist > build >static> js.

for a succesfull build , here is the log

we can set the entry and output in the webpack.config file .

we can customize the output bundle file name and the folder.

Step 5

According to the path we set , we should have got a folder name dist created , inside which you can find build/static/js/bundle.min.js .

just copy the bundle file from there and add the bundle file inside the ASP.NET Project's root folder , its a best practice to create a folder and put that bundle file inisde the folder .

Step 6

After placing the bundle file , now create a new .aspx page and paste the script like this .



<%@ Page Title="About" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="TestReactWebApp.About" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div id="root"></div>
  <script src="Scripts/dist/build/static/js/bundle.min.js"></script>

</asp:Content>

Here I have my own folder structure inside the script tag , but You can change the folder structure according to your wish.

** Note that inside the .aspx page you can see the div tag with id root . inside the index.js of our react project , I have mentioned the getElementById as "root" **



import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Step 6
Build the asp project and run the server .

if you find the images are not loaded . hover over the images in the browser and using the developer tools and , try to locate the path , then add the exact path as folders in the root directory. Inside the folder , add the .svg file form the build/static/media folder in your react project and paste it.

This is how you can add the react project inside the ASP project easily . Feel free to ask any doubts , or if you find any issues , let me know , I will try my best to give solutions for you.

robots.txt

JEFF — Sun, 04 Jun 2023 16:51:49 +0000

robots.txt As a beginner in react , we all must have come across this robots.txt file when we create our react application. Most of us never bothered to know what it was and delete it , thinking it as a unnecessary file in our react app . Yaa I've also done it 😂 😂.

Now lets know what it is .
*Robots.txt file is a file located on your server that tells web crawlers which pages they can and cannot access. *

The pages we blocked , when the web crawler crawls in it , we get soft 404 as error.

The two action we can do is

Allow: /
Disallow: /

we can allow and disallow the pages to access.

Adding robots.txt file in your application , positively increases your app's SEO Performance . So Know the stuff and increase your apps SEO Performance right away with robots.txt . ☮️

LUCID DREAMS and PROGRAMING 🦄

JEFF — Wed, 12 Apr 2023 14:29:42 +0000

*Ever thought about finding a solution to a problem while you are actually sleeping ? *

Actually Yes ... We can think about a problem while sleeping and we can also find solutions for it , It can be achieved by_** lucid dreaming **_ . Its pretty cool Right ? with the amount of knowledge we have we can find solutions to our problems either coding or any other real life problems.. , it just takes some practise and some time ... and Boom now you got some extra time to solve problems ... Just think about it , when someone gives a task of finding a solution to a particular problem , You can actually say I'll think about it while I'm sleeping 🤣 , and it can also be achieved by lucid dreaming where we find the solution with our full conscious mind accessing all the memories , knowledge , stuffs etc . Just try it 🦄

GOOGLE LIGHT HOUSE

JEFF — Thu, 23 Mar 2023 11:12:35 +0000

*In the chrome dev tools most of us people would have like me would have only seen there is a tool called as"Light house"but never used it or even don't why it is used . For those people who has 0 % idea on what is Light house and how to use it , this blog is definitely is for YOU *

What is LIGHT HOUSE?

Google Lighthouse is an open-source and automatable auditing tool that enables developers to assess the performance, accessibility, SEO and coding best practices of their web applications.

"BASICALLY ITS AN AUDITING TOOL FOR THE UX OF THE WEB APP"

Let's look at how Google Lighthouse testing can be used.

Option 1:

Enter ‘web.dev ’ as your browser url and the official website for Google Lighthouse will appear.

Click on the “Measure” at the top of the page.

On the “Measure” page, enter the URL of your website and click on “Run Audit”. It will take a few minutes to audit your website and then display the detailed results.

Option 2:

You can also download the Lighthouse extension from the Chrome Web Store.

Just click on ‘Add to Chrome’ > ‘Add Extension.’
Open your website and click on the icon and a pop-up of Google Lighthouse will appear.
Go to the settings and select your desired categories.
Run the test.

This is how we can generate a report of the website OR web app

The FOUR main core aspects of the Reports are:

Performance
Accessibility
Best Practices
SEO(Search Engine Optimization)

The Score generally ranges from 0 to 100 , the score gets worser when it get near to zero and vice versa.

Lighthouse also provides some usefull insights to improve.