teleren/devto huggingface dataset:
How to Bypass YouTube's Anti-Ad Blocker Popup with Ublock Origin
Tags: youtube, ublock, bypass, adblocker
Published: 2023-10-29 20:01:53

## Introduction:

Are you tired of the constant interruptions while trying to watch your favorite YouTube videos due to the annoying anti-ad blocker popup? I have the solution for you. In this post, I'll guide you through the steps to bypass YouTube's anti-ad blocker popup using the Ublock Origin browser extension. It's a quick and easy process that will ensure you can enjoy ad-free videos hassle-free.

### **Step 1: Download Ublock Origin**

The first step is to download Ublock Origin, a free and open-source browser extension. You can get it from the official website, [ublockorigin.com](ublockorigin.com). Ublock Origin is compatible with major browsers like Firefox, Chrome, Opera, Edge, and more.

- [**Chrome**](https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm)
- [**Firefox**](https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/)
- [**Microsoft Edge**](https://microsoftedge.microsoft.com/addons/detail/ublock-origin/odfafepnkmbhccpbejgmiehpchacaeak)
- [**Opera**](https://addons.opera.com/en/extensions/details/ublock/)
- [**Manual install**](https://github.com/gorhill/uBlock/releases)


### **Step 2: Open the Ublock Origin Dashboard**

After successfully installing the Ublock Origin extension, you'll notice its icon in your browser. Click on the icon to open the Ublock Origin dashboard.


### **Step 3: Purge All Caches**

Inside the Ublock Origin dashboard, navigate to the "filters lists" tab. Here, you should see an option to purge all caches. Click on it. This step ensures that you have the latest and cleanest filters for optimal ad-blocking performance.

### **Step 4: Update Filters**

With the caches purged, it's time to update your filters. Simply click the "update now" button in the dashboard. This action will ensure that Ublock Origin is using the most up-to-date filter lists to block ads effectively.

### **Step 5: Verify with "match ublock" Website**

To confirm that Ublock Origin and its filters are in sync with YouTube's anti-ad blocker detection script, visit the "match ublock" website. This website will inform you if the latest version of Ublock Origin matches YouTube's anti-ad blocker measures. If there's a match, you're all set to enjoy YouTube ad-free!

[Check status](https://drhyperion451.github.io/does-uBO-bypass-yt/)


## **Conclusion:**

By following these simple steps, you can say goodbye to YouTube's pesky anti-ad blocker popup and enjoy your favorite content without interruptions. Don't forget to help others discover this solution by leaving a comment or liking the video that provided this helpful guide. Happy ad-free watching!

🙋‍♂️💻[More about Autor](https://github.com/ekurtovic81) 🖱️💻
Setting Up a Modern Frontend Build Process with Rollup for SASS and JavaScript
Tags: webdev, javascript, beginners, css
Published: 2023-10-29 19:03:06

[Rollup](https://rollupjs.org/) is a strong module bundler that is great at tree shaking and making efficient code. I will show you how to use Rollup to bundle SASS and JavaScript in a frontend build process.

## Prerequisites
You must install Node.js and npm on your computer.

## Getting Started

Initialize a new project:

```Bash
mkdir rollup-sass-js-setup
cd rollup-sass-js-setup
npm init -y
```

Install the necessary dependencies:

```Bash
npm install rollup rollup-plugin-sass rollup-plugin-terser --save-dev
```

## Setting up the Rollup Configuration

Create a **`rollup.config.js`** file in the root of your project and set up the configuration:

```Javascript
import sass from 'rollup-plugin-sass';
import { terser } from 'rollup-plugin-terser';

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife', // Suitable for <script> tags in browsers
    },
    plugins: [
        sass({ output: 'dist/styles.css' }), // Output CSS to a file
        terser() // Minify JavaScript
    ]
};
```

## Setting up the SASS

Let's create a simple SASS file. First, create a **`src`** directory:

```bash
mkdir src
```

Next, create a **`styles.scss`** file inside the src directory:

```SCSS
// src/styles.scss
$primary-color: #3498db;

body {
  background-color: $primary-color;
  font-family: Arial, sans-serif;
}
```

## Setting up the JavaScript

Create an **`index.js`** file inside the **`src`** directory:

```Javascript
// src/index.js
import './styles.scss';

console.log('Hello, Rollup!');

```

## Setting up the HTML

Create an **`index.html`** file in the root of your project:

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rollup SASS/JS Setup</title>
    <link rel="stylesheet" href="dist/styles.css">
</head>
<body>
    <script src="dist/bundle.js"></script>
</body>
</html>
```

## Building the Project

Now that everything is set up, you can run Rollup to bundle your JavaScript and compile your SASS:

```Bash
npx rollup -c
```

This will generate a **`bundle.js`** and **`styles.css`** in the **`dist`** directory.

## Conclusion

Setting up a modern frontend build process with Rollup is straightforward. You can easily bundle your JavaScript and compile your SASS with a few settings. This setup ensures that you have a lean and optimized codebase, ready for deployment. As your project grows, you can add more tools and preprocessors using Rollup's plugin system.
🔒 Authenticate with Session-Based Auth in Django, Bootstrap, React & Vite
Tags: react, django, vite, bootstrap
Published: 2023-10-29 18:36:59

Hey there! 🌟 
Today, we're embarking on an epic web development adventure, and you're in for a treat! 🎉 This tutorial is all about crafting a rock-solid session-based authentication system using Django, React, and the turbo-charged Vite build tool. 
Get ready to lock down your web applications like a pro! 🔒💻

{% youtube GnU7y-9D71Y %}

What's in Your Toolbox?
Before I plunge into the coding waters, let's make sure your toolkit is well-stocked:

Python: The versatile workhorse for our Django backend. 🐍
Django: Our trusty web framework, designed to make user authentication a breeze.
Node.js: The powerhouse behind server-side JavaScript sorcery. 🌐
React: Your go-to library for crafting pixel-perfect user interfaces. 💡
Vite: The lightning-fast builder that will supercharge your development process. 🚀

Let's start ...

1- Demystifying Authentication
Our journey kicks off with a deep exploration of the captivating world of authentication. 
🌐 We'll unravel the mysteries of cookie token-based authentication vs. session-based authentication. 
It's like comparing secret treasure maps to uncover the best route for your web security journey. 🗺️🔑

In this tutorial also, I have touched on web security including the notorious Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF). 
🦹‍♂️🧙‍♀️ And, most importantly, we'll equip you with the knowledge and tools to combat these threats like a cybersecurity superhero! 💪💻
-------------------------------------------------------------------

2- Crafting a Secure Django Backend
Now, let's roll up our sleeves and get our hands dirty building a fortress-worthy Django backend. 
Think of it as constructing a castle with all the security features to protect your web kingdom. 🏰🛡️

You'll be diving into the server-side authentication logic and writing the secret codes that will safeguard your realm. It's like creating impenetrable barriers for your digital treasure chest! 💎🗝️

But wait, there's more to come in this incredible journey. We'll explore React, Vite, Bootstrap styling, and put our session-based authentication system to the test. 
------------------------------------------------------------------

I hope you will enjoy the tutorial, don't hesitate to ask me anything in case you have any questions or doubts 💪💻

Thank you and I will see you in the next one.
A.B.
Placeholder Maintainer
Tags: hack23maintainer
Published: 2023-10-29 18:16:16

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

### Intro
<!-- Share a bit about yourself as a maintainer. Is this your first Hacktoberfest, or have you maintained in others? Feel free to embed your GitHub account by using {% embed LINK %} -->

### Project
<!-- Tell us about the repository that you hosted. What processes did you set up to review and merge pull requests? Feel free to embed your GitHub repo by using {% embed LINK %} -->

### Highs and Lows
<!-- What were some of your biggest accomplishments or light-bulb moments this month? Did any problems come up that seemed impossible to fix? How did you adapt in those cases?  -->

### Growth
<!-- What was your skillset before Hacktoberfest 2023 and how did it improve? Have your project goals changed since publicly maintaining it? -->
My Wagtail Adventure
Published: 2023-10-29 18:12:01


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxpb8m0hus10n2ixmxqf.jpg)
I've been learning about Wagtail. Their website https://docs.wagtail.org/en/stable/, helped me understand the basics, and their code on GitHub, https://github.com/wagtail/wagtail.org, showed me how it works.

I got interested in their "Wagtail.org website accessibility". They aim to enhance website accessibility for all users. I know a bit about Django, Python, and accessibility principles, so I want to help.

I learned that working together and talking to others is important. The Wagtail community is all about helping each other, and it inspired me.

I can't wait to start helping with the Wagtail project. I'm sure I'll learn a lot and make a difference.
Placeholder Maintainer
Tags: hack23maintainer
Published: 2023-10-29 18:05:45

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

### Intro
<!-- Share a bit about yourself as a maintainer. Is this your first Hacktoberfest, or have you maintained in others? Feel free to embed your GitHub account by using {% embed LINK %} -->

### Project
<!-- Tell us about the repository that you hosted. What processes did you set up to review and merge pull requests? Feel free to embed your GitHub repo by using {% embed LINK %} -->

### Highs and Lows
<!-- What were some of your biggest accomplishments or light-bulb moments this month? Did any problems come up that seemed impossible to fix? How did you adapt in those cases?  -->

### Growth
<!-- What was your skillset before Hacktoberfest 2023 and how did it improve? Have your project goals changed since publicly maintaining it? -->
How to force Light / Dark Mode in iOS?
Tags: ios, swift, howto, beginners
Published: 2023-10-29 18:01:01

Starting in iOS 13, Apple made a systemwide Dark Mode option available. There are cases when we might want to force only the light mode user interface. This can be done by adding the following entry to the Info.plist of the app.

```
<key>UIUserInterfaceStyle</key>
<string>Light</string>
```

Similarly to force dark mode user interface:
```
<key>UIUserInterfaceStyle</key>
<string>Dark</string>
```

[UIUserInterfaceStyle](https://developer.apple.com/documentation/bundleresources/information_property_list/uiuserinterfacestyle) has the following possible values:
1) Automatic (default value if we do not add `UIUserInterfaceStyle` key explicitly)
2) Light (forces light mode user interface)
3) Dark (forces dark mode user interface)

I hope this short post is helpful.
Happy coding :)
How to Push a Local Repository to GitHub: Step-by-step Guide for Beginners
Tags: webdev, beginners, github, git
Published: 2023-10-29 17:57:00

When you're getting started with Git as a beginner, one of the things you will need to get familiar with how to push a local repository (this is a storage location where you keep files, codes and data that relate to your project ) from your PC to GitHub.
In this article, I’ll walk you through a step-by-step process of seamlessly transferring your project from your local storage to GitHub. Whether you're a seasoned developer or just getting started with version control, I'll provide you with clear instructions and insights to ensure your local repository is successfully uploaded, allowing you to collaborate, share, and make changes with ease. Let's dive into the world of repository synchronization and harness the power of GitHub for your projects.
To push a local repository to GitHub, follow these steps;
**Create** **a** **Repository** **on** **GitHub**: Firstly, log in to your GitHub account, navigate to your profile, and then click on the “Repositories” tab. After that, click on the “New” button to create a new repository, give it a suitable name, description and other required additional settings.
**Initialize** **Git** **in** **Your** **Local** **Directory**: If you haven’t already, access the terminal on your PC(mostly in your code editor), using the terminal navigate to your local project directory run the following command to initialize Git.
 
![initialize git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfko4b0tqmuurdbrqmq0.png)
 
**Add** **and** **Commit** **Your** **Files**: Use git add to stage your files you, and use git commit to commit them with a message: 
![commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcblb65pf08do883l91v.png)
 
**Connect** **your** **Local** **Repository** **to** **your** **GitHub** **Repository**: Use the following command to connect the local repository to the remote repository (the one you created on GitHub).
 
![connect local repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2u4cntr0fcnny1iwk8gf.png)
**Push** **to** **GitHub**: Now push your commits to the GitHub repository using the ‘git push’ command. 
![push to github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2u2le3hhs98ut9jnggp6.png)

If you’re using a different branch other than “master”, replace “master” with the appropriate branch name.
 
**Authentication**: You might be required to provide your GitHub username and password for authentication, but alternatively you can use SSH keys for secure authentication.

If you follow these instructions correctly, your local repository will be successfully pushed to GitHub and you can view them on GitHub.
**Disclaimer**: These instructions will only work if you have already installed Git and set up on your local machine.
Introducing Link Management Inspired by Docusaurus
Published: 2023-10-29 17:44:46

Hello, friends! Today, I'd like to tell you about a new feature I made for my tool. I was really inspired by how Docusaurus, a popular tool, does things. Let's dive in!


## What's My New Thing?

I made a new part for my tool. It does two main things:

1. **Looking at Links**: It looks at all the links in a piece of writing to see if they work.
2. **Finding Broken Links**: If a link doesn't work, my tool will tell you!

## Docusaurus Gave Me an Idea!

Docusaurus is like a big brother tool. It has a smart way to handle links in writings. After seeing how Docusaurus works, I got an idea for my tool.

## How Are They Alike?

Remember when we talked about this before? Here's how the two are alike:

### 1. **Checking Links**:

- **Docusaurus**: Docusaurus checks every link to make sure it works.
  
- **My Tool**: My tool does the same thing. It checks every link to see if it's correct.

### 2. **Telling You About Bad Links**:

- **Docusaurus & Our Chat Before**: Docusaurus will tell you if a link is broken.
  
- **My Tool**: My tool does that too! If a link is broken, it will let you know.


That's my story of how I made a new part for my tool. It's like giving it a new toy to play with. Thanks, Docusaurus, for the cool idea! And thank you for joining me on this fun journey.


[you can find the code I got inspired by here](https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-utils/src/markdownLinks.ts)
[My Tool](https://github.com/mnajibi/tml)
Fresh on the block
Tags: beginners, newbie
Published: 2023-10-29 17:43:28

I am writing this post to keep myself in check and informed. I chose a random article and gave it a read and I understood little to nothing about it. The article basically gives a few examples of cross-browser devtools as well as similar shortcuts you have access to. https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/
How I solved “Page not found” on my react projects deployed on netlify
Tags: webdev, react, netlify, discuss
Published: 2023-10-29 17:41:55

During my journey after completing learning React, I’ve been working on side projects and I always use React Router for SPA. By the way, I had this issue(below) everytime I deploy them on netlify just when I try to refresh the website or just navigate to the specific path.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/576s9l43ru6yr7ulb14v.png)

So in this article, I did my research that I'm going to share with you to get over this issue, then navigate your website or SPA without any issues out of your codes

### When does it show up

This issue shows up every time you try to refresh your website or anytime you want to navigate through a specific path indirectly, i mean by modifying the address. This issue occurs because netlify, by default, expects server-side routes rather than client-side routes.

### How to solve it

So to solve this issue you have to set a redirect rule to netlify. Just go to your project, in which you used react-router, then in your public folder create a file and name it *_redirects* (without any extension).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k84flbddo1l03l5fon5m.png)

After the creation, just click on that file then write down this line of code.

`/*  /index.html 200`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olvlbb83hjko5kvtb5yl.png)

Just this rule ensures that all requests are directed to your react application’s entry point, allowing react-router to handle the routing correctly.

Make sure that the __redirects_ file is placed in the public folder, netlify will automatically recognizes and uses this file during the deployment process to handle custom redirect rules. The file have to be in the version of your project on netlify in order to get detected by netlify.



Follow me for more tips and tricks,  **HAPPY CODING ;)**
Nuxt 3 Starter
Tags: nuxt3, firebase, tailwindcss, pinia
Published: 2023-10-29 17:24:49

Hi,

Just a share of my Nuxt 3 Starter here :

[Github Link](https://github.com/skribascode/Nuxt3-starter)

This starter Nuxt3 use Firebase for authentication with Google and Email/Password.

User is sync with Pinia.

A simple UX with Tailwind.

Enjoy ;-) !
"Using AWS is like having a superhero sidekick for your IT team, just a great internet connection required!" 😄
Published: 2023-10-29 16:52:58

As we embrace the digital age, AWS is the engine that drives innovation and transformation. The cloud isn't just a service; it's a gateway to infinite possibilities. Whether you're a startup with big dreams or an enterprise seeking to modernize, AWS provides the tools and support to make those dreams a reality.

Join us in this exciting journey as we leverage the power of AWS to innovate, grow, and shape a future where the possibilities are as vast as the cloud itself. 🚀☁️ #AWS #CloudComputing
Enhancing the Weather App with Weekly Forecasts
Tags: opensource, productivity, html, javascript
Published: 2023-10-29 16:25:20

The Weather App i a straightforward yet useful tool for finding out the current weather in any place. It did have one drawback, though it was limited to the most recent meteorological information, More was exactly what users were calling for a weekly weather prediction to help them better organize their schedules.
"Integrate Weatherbit Forecast API" [Issue #20](https://github.com/ThanushaMandala/weatherApp/issues/20), contained the key to enabling this new feature. By integrating the Weatherbit prediction API and adding a "Get Weekly Forecast" function to provide customers a longer prediction for the future week, this issue aims to improve the Weather App.
The Journey started by Examining the Weather App's GitHub source. To get a complete picture of the project's state, I thoroughly examined the source, the README and the open problems.
I started by editing the HTML to give an ID for the js code about the weekly forecast logic. This made it possible for consumers to utilise the new function with ease. I inserted a Weatherbit API key into the JavaScript code that I had acquired. Making API queries and obtaining forecast data required this. Changing the JavaScript code to retrieve and show the weekly forecast data from the Weatherbit API was the main component of the solution. I put error handling into place to provide users helpful warnings when something goes wrong. This had improved the User Experience and maintained a clear Interface. 

This is last PR blog of @hacktoberfest2023 #hacktoberfest, I loved being a part of the fest and thank you for the learning.
LETS CREATE OUR FIRST CHROME EXTENSION
Tags: webdev, programming, beginners, tutorial
Published: 2023-10-29 16:10:15

## Hello, everyone! Welcome back to my channel.
Today, we will learn how to create a simple Chrome extension from scratch.

**The task is to create an extension that will display random quotes each time it's clicked.**

{% youtube mLAb6_LZmYU %}

![chrome extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8457v5yjlgw90z0ttb2q.png)

![chrome extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otc1mt22rn2rln0o8ag4.png)

### Pre-requisites of building a Chrome extension
You only need basic knowledge of HTML, CSS and Javascript to start building your first Chrome extension.


### The Manifest file
This file is a special file. It contains information about the Chrome extension. It is a .json-type file.

It must mandatorily contain the following:

- The Manifest version
- The name of the extension.
- The version of the extension.

### Let's get started!
Now that we understand the basics, let's start building the Chrome extension.

### Create a new folder

Make a new folder and create a file named Manifest.json in it.
The following are the contents of the Manifest.json file. Put these contents in the file.

```
{
    "name":"quotes Of the day",
    "description":"Get a quote every day",
    "version":"1.0",
    "manifest_version":3,
    "action":{
"default_popup":"quotes.html",
"default_icon":"1.jpg"
    }
}
```

### Write the HTML file

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <p>Get a quote every day to stay motivated </p>
    <p id="quote">My Quotes</p>
    <p>@ishratjahanpinky2023 </p>

    <script src="index.js"></script>
</body>

</html>
```
### Add some styles in the CSS file; that's optional if you want to add.

### Write the JavaScript file

We will be using quotable.io API to get the quotes randomly.

```
const getQuotes = async () => {
  try {
    const res = await fetch("http://api.quotable.io/random");
    const data = await res.json();
    const myQuotes = document.querySelector("#quote");
    myQuotes.innerHTML = data.content;
  } catch (error) {}
};

window.addEventListener("load", () => {
  getQuotes();
});
```
### Trying our extension

- Go to your Chrome browser and type chrome://extensions
- Turn the developer mode on by toggling the switch.
- Click on the _load unpacked_ button
- Select the folder where you have made the extension.
- That's it! Your extension should now be visible on the page.
- If you click on the puzzle icon in the corner, our extension should be visible.

That's it.


## We just created a basic Chrome extension! Congrats!


[LETS CREATE OUR FIRST CHROME EXTENSION ](https://youtu.be/mLAb6_LZmYU)