teleren/devto huggingface dataset:
Solve Automatically hCaptcha in your browser [FREE TRIAL]
Published: 2023-08-17 15:48:43

![Solve any hCaptcha in your browser](https://assets.capsolver.com/prod/images/post/2023-08-10/2f8603d8-4bcd-43c4-8a3f-aaf31467fe97.png)


# ☄️ Step 1: Obtain Capsolver API Key
Before you can solve hCaptcha in your browser, you need to have some requeriments to be able to solve hCaptcha.

**⚙️ Requeriments:**
- Capsolver API Key
- Funds in your API Key
- Capsolver Extension

## How you can obtain your API Key?
1. [Register on capsolver](https://dashboard.capsolver.com/passport/register) or [Login on capsolver](https://dashboard.capsolver.com/passport/login)
If you are already registered or logged, skip this step. 
2. Copy your API Key 
![](https://assets.capsolver.com/prod/images/post/2023-08-10/981efd6d-f295-475e-afe7-e09aaff54b10.png)

# 🤯 Step 2: Install Extension on your Chrome
1. [Download the extension](https://chrome.google.com/webstore/detail/capsolver-captcha-bypass/pgojnojmmhpofjgdmaebadhbocahppod)
2.  Paste the API Key that you previously copied.
   ![](https://assets.capsolver.com/prod/images/post/2023-08-10/6e9a5333-4a47-4454-8457-18ca531b242c.png)
3. Now you will be able to solve hCaptcha free / pro / enterprise without effort!
4. Go to [Demo hCaptcha Page](https://accounts.hcaptcha.com/demo) for check how good works 🥳!
How should I start?
Tags: testing, discuss
Published: 2023-08-17 16:59:05

If you were going to look at an application with fresh eyes, how would you test?

There is always a risk of being static and stale with your testing. Mind maps, heuristics, and mnemonics like [SFDIPOT](https://www.sharonob.com/blog/sfdipot).

Imagine yourself a beginner in software testing. Where could you start to investigate an application and find a problem?
Shrinking `node_modules`: Strategies to Reclaim Your Disk Space
Published: 2023-08-17 16:49:49

The `node_modules` directory is notorious for gobbling up disk space in JavaScript projects. If left unchecked, it can quickly balloon in size, consuming valuable storage. Here are seven strategies to keep it lean and free up disk space:

**1. Embrace `npm ci` for Clean Installs:**
   - When setting up a project from an existing `package-lock.json`, use `npm ci`. It removes the existing `node_modules` and installs dependencies afresh, ensuring no lingering, unnecessary packages occupy space.

**2. Prune Redundant Packages:**
   - Over time, you might accumulate packages that are no longer in use. After removing a package from `package.json`, run `npm prune` to ensure it and its orphaned dependencies are purged from `node_modules`.

**3. Limit Global Installations:**
   - While global installations can be convenient for CLI tools, be judicious. Only install packages globally that you use across projects to avoid multiple space-consuming installations.

**4. Visualize and Audit with `npm list`:**
   - Use `npm list` to get an overview of your dependencies. Spotting and removing unnecessary large packages can free up significant space.

**5. Deduplicate with `npm dedupe`:**
   - Redundant or duplicated packages can bloat `node_modules`. Run `npm dedupe` to consolidate and reduce the directory's size by eliminating these redundancies.

**6. Exclude from Version Control:**
   - Committing `node_modules` to version control not only bloats the repository but also your local clone. Always use a `.gitignore` file to keep `node_modules` out of version control.

**7. Regularly Update and Clean Cache:**
   - Keeping dependencies updated can sometimes reduce their size due to optimizations. Additionally, clear the npm cache periodically using `npm cache clean --force` to free up space taken by outdated or unused packages.

**Conclusion:**
The `node_modules` directory, while essential, doesn't have to be a disk space hog. By implementing these strategies, you can maintain a lean project environment, ensuring efficient use of storage and a smoother development experience.
MVC Architecture
Tags: mvc, webdev, javascript, react
Published: 2023-08-17 16:44:09

MVC is like a blueprint 🏗️ that outlines how your web development code should be organized. 🧩 It helps structure both the front-end and back-end components of your application. In MVC, "M" stands for Model, where business logic and entity code reside. "V" represents View, which blends view models with HTML for user interfaces. "C" stands for Controller, where you handle API routes and manage interactions. 🖥️

Use MVC when your project's functionality is interconnected 🤝 and you want a clear division between data handling, user interfaces, and application logic. It's often seen in single-page applications or projects with tightly coupled features.

On the other hand, Modular architecture divides your application into distinct modules 📦, allowing them to work independently. It's great when modules aren't closely related and the failure of one won't impact others. 🚀 This is particularly useful for scalability and easier maintenance.

Yes, you can blend MVC within a Modular pattern! 🤹‍♂️ Depending on your project's nature, you can structure each module following the MVC guidelines. This could help if certain modules have interrelated functionality and you want to maintain a consistent structure within them. Remember, it's all about choosing the right approach to suit your project's needs and maintainability. 🛠️
```
Admin
  |
   -Model
   -View
   -Controller
User
  |
   -Model
   -View
   -Controller
```
React useInView Hook - How to create useInView Hook in ReactJs
Published: 2023-08-17 16:41:13

Learn how to create a powerful useInView hook in React using the Intersection Observer API. Elevate your development skills as we guide you through step-by-step instructions to create a custom useInView hook. Enhance user experience, optimize performance, and effortlessly track element visibility in your React projects.

Follow this video to step-by-step instructions

{% embed https://youtu.be/lD2ZMqzGYgY %}


useInView.ts
```ts
import { useRef, useState, useEffect, RefObject } from 'react';

interface IOptions {
    root?: Element | null | undefined;
    rootMargin?: string,
    thresholds?: ReadonlyArray<number>
}

type useInViewType = {
    inView: boolean
    ref: RefObject<T> | null,
    observe: (element: RefObject<T>, callback: (entries: IntersectionObserverEntry[]) => void) => IntersectionObserver | null,
    unObserve: (observer: IntersectionObserver) => void
}

const useInView = (options: IOptions): useInViewType => {
    const [inView, setInView] = useState(false)

    const containerRef = useRef(null)

    const callback = (entries: IntersectionObserverEntry[]) => {
        const [entry] = entries
        setInView(entry.isIntersecting)
    }

    useEffect(() => {

        const _observer = new IntersectionObserver(callback, options)
        if (containerRef.current) _observer.observe(containerRef.current)

        return () => {
            if (containerRef.current) _observer.unobserve(containerRef.current)
        }

    }, [containerRef, options])

    // For Manual observers
    const observe = (element: RefObject<T>, callback: (entries: IntersectionObserverEntry[]) => void) => {
        const _observer = new IntersectionObserver(callback, options)
        containerRef.current = element.current

        return _observer
    }

    const unObserve = (observer: IntersectionObserver) => {
        if (containerRef.current) observer.unobserve(containerRef.current)
    }

    return {
        inView,
        ref: containerRef,
        observe,
        unObserve
    }

}

export default useInView;
```

Usage:
```ts

function App() {

	const [data, setData] = useState<any[]>([])
	const [page, setPage] = useState(1)

	const { ref, inView } = useInView({ thresholds: [2] })

	useEffect(() => {
		setData([...new Array(5 * page)])
	}, [page])

	useEffect(() => {
		if (inView) setPage(prev => prev + 1)
	}, [inView])

	return (
		<div className={styles.mainContainer}>
			{data.map((row: any, index: number) => {
				return <Card key={`card-${index.toString()}`} index={index} />
			})}

			<button ref={ref} className={styles.loadMore}>Load More</button>
		</div>
	)
}
```

Working Demo:
{% embed https://stackblitz.com/edit/vitejs-vite-ziybvq?file=src%2Fhooks%2FuseInView.ts %}
Aprenda a Programar com o 100DiasDeCódigo 👨‍💻
Tags: beginners, tutorial, productivity, codenewbie
Published: 2023-08-17 16:28:42

##Aprenda a programar com o 100DiasDeCódigo

Um erro comum entre os iniciantes em desenvolvimento de software é adquirir o hábito do estudo de novas tecnologias e aperfeiçoamento na habilidade da programação, manter a constância nos estudos é algo que exige muita disciplina e quando realizado da forma incorreta pode desmotivar muitos estudantes.

##O que é o 100DaysOfCode

O 100DaysOfCode é um movimento internacional originalmente conhecido pelo nome de #100DaysOfCode onde você se compromete publicamente a programar pelo menos 1 hora por dia e publicar seu progresso em qualquer rede social.

O intuito é você ir evoluindo na programação de forma constante gradualmente.

##100DiasdeCodigo para Brasileiros?

O nosso querido amigo Daniel Reis fundador da He4rt Developers está evangelizando a iniciativa aqui no Brasil através da hashtag 100DiasdeCodigo

##Como participar?

Você pode participar do desafio apenas se comprometendo publicamente a cumpri-lo e ao final do seu estudo você compartilha o que aprendeu com a Hashtag #100DiasdeCodigo.

Esse post é a minha forma de me comprometer publicamente com o desafio, e você topa participar também?

##Partiu 100DiasdeCodigo

Link do site do desafio para vocês 👇 
[Link]https://www.100diasdecodigo.dev/)
Hooking in to Devise controller actions
Tags: rails, devise, todayilearned, ruby
Published: 2023-08-17 16:25:26

Devise is a fantastic authentication gem in the Rails ecosystem that I'm learning more about every day!

I wanted to share how I was able to solve a problem effectively after reading some Devise source code, as it might come in handy for others.

## The problem
I was working on a project using the Devise addition `invitable` and I needed a way to update a user's profile after they accepted an invite so I could set the slug based on their name. When the user invite is created, we use a generic value as a filler for the name.

I had originally used an ActiveRecord callback, but this felt clunky. Not only was it difficult to understand what it was doing, the side effect of the callback happened on the `Profile` model! That would be hard to debug if it was your first time working on the app and something was going wrong with the Profile's slug generation.

I began searching for ways to do what I wanted without callbacks and I decided to take a look at the Devise controllers source code.

## The solve
It turns out, Devise anticipates that you might want to access a resource while it's doing its thing, and so almost every Devise controller action has a line like this:
```ruby
yield resource if block_given?
```

This is fantastic! Because we often inherit from the base Devise controllers, what this line does is let you access the resource under operation if you pass in a block:

```ruby
# sample controller
class Users::RegistrationsController < Devise::RegistrationsController
  def update
    super { |resource| ... }
  end
end
```

This was a game changer! I now had a great way to update the profile's slug with the user's provided name:

```ruby
# app/controllers/users/registrations_controller.rb
def update
  super { |user| user.profile.update(slug: user.full_name.parameterize) }
end
```

Just like that, I was able to get rid of an ActiveRecord callback! So, if you ever need to access the resource to do something inside a Devise controller, this is your ticket.
Learning to code with AI help
Published: 2023-08-17 16:09:02

Aw man these are going to really raw, unedited thoughts right now. I've been learning to code since late April 2023, only 4 months. I have a busy family life and a full time job but I don't feel my beginner skills are advancing to where I want them to be. I'm using GPT to generate practice problems in python and pandas since the beginning, and it is very helpful to explain what I'm stuck at or why my code sucks. I also have GitHub copilot, which I feel is not having me problem solve directly, I think that's where I'm feeling the most lag in development. So in my data pipeline I am using copilot to help generate the code if I just provide a comment. It's actually super sick AI technology, and does a pretty good job! Now it doesn't understand the macro of what I'm trying to do, but if you give it specific instructions it will read your script and really try to execute what your comment wanted. But when I find myself going back to beginner problems, my brain can't get through them! Or I feel too reliant on looking it up. I know all programmers do Google their problems, but copilot just generating some code that I never dreamed of, I don't think this is the best learning for me. I'm going to turn it off for now and try to get that muscle memory to be better at problem solving when prompts come up.
78 berufliches Vorwärtskommen: Zukunftszuversicht mitgestalten.
Tags: deutsch, career, motivation, discuss
Published: 2023-08-17 15:52:00

Moin Moin,

durch eine bewusste Planung, in der wir festlegen worauf wir hinarbeiten wollen, sorgen wir, denke ich, bereits für eine Zukunftszuversicht statt für eine Zukunftsangst.

Daher ermutige ich weiterhin zum Austausch diesbezüglich. Ich denke die Planung hat bereits begonnen. Je mehr wir werden, desto ausgeklügelter wird auch unsere Organisation. Lass uns jedoch erste Gedanken bereits sammeln.

Ich freue mich darauf.


Lass uns mittels Kommentaren austauschen.

Beste Grüße,
Mustafa

Oder auch mittels E-Mail: mustafa.kevin.dwenger@posteo.de
Betreff: Austausch
Solve Automatically funCaptcha in your browser [FREE TRIAL]
Published: 2023-08-17 15:49:04

![Solve any funcaptcha in your browser](https://assets.capsolver.com/prod/images/post/2023-08-10/4ef978da-fcdb-4723-bd7c-8e84bab7bed1.png)


# ☄️ Step 1: Obtain Capsolver API Key
Before you can solve Funcaptcha in your browser, you need to have some requeriments to be able to solve Funcaptcha.

**⚙️ Requeriments:**
- Capsolver API Key
- Funds in your API Key
- Capsolver Extension

## How you can obtain your API Key?
1. [Register on capsolver](https://dashboard.capsolver.com/passport/register) or [Login on capsolver](https://dashboard.capsolver.com/passport/login)
If you are already registered or logged, skip this step. 
2. Copy your API Key 
![](https://assets.capsolver.com/prod/images/post/2023-08-10/981efd6d-f295-475e-afe7-e09aaff54b10.png)
3. Save your api key in apikey.txt

# 🤯 Step 2: Install Extension on your Chrome
1. [Download the extension](https://chrome.google.com/webstore/detail/capsolver-captcha-bypass/pgojnojmmhpofjgdmaebadhbocahppod)
2. Paste the API Key that you previously copied
   ![](https://assets.capsolver.com/prod/images/post/2023-08-10/6e9a5333-4a47-4454-8457-18ca531b242c.png)
3. Now you will be able to solve FunCaptcha without effort!
4. Go to [Demo Funcaptcha Page](https://iframe.arkoselabs.com/B7D8911C-5CC8-A9A3-35B0-554ACEE604DA/index.html?mkt=en) for check how good works 🥳!
Solve Automatically reCaptcha in your browser [FREE TRIAL]
Published: 2023-08-17 15:48:07

![Solve reCaptcha in your browser](https://assets.capsolver.com/prod/images/post/2023-08-14/a8e0a940-beb4-4784-b29e-5789457bfa27.png)


# ☄️ Step 1: Obtain Capsolver API Key
Before you can solve reCaptcha in your browser, you need to have some requeriments to be able to solve reCaptcha.

**⚙️ Requeriments:**
- Capsolver API Key
- Funds in your API Key
- Capsolver Extension

## How you can obtain your API Key?
1. [Register on capsolver](https://dashboard.capsolver.com/passport/register) or [Login on capsolver](https://dashboard.capsolver.com/passport/login)
If you are already registered or logged, skip this step. 
2. Copy your API Key 
![](https://assets.capsolver.com/prod/images/post/2023-08-10/981efd6d-f295-475e-afe7-e09aaff54b10.png)

# 🤯 Step 2: Install Extension on your Chrome
1. [Download the extension](https://chrome.google.com/webstore/detail/capsolver-captcha-bypass/pgojnojmmhpofjgdmaebadhbocahppod)
2.  Paste the API Key that you previously copied.
   ![](https://assets.capsolver.com/prod/images/post/2023-08-10/6e9a5333-4a47-4454-8457-18ca531b242c.png)
3. Now you will be able to solve reCaptcha v2 / v3  / invisible / enterprise without effort!
4. Go to [Demo reCaptcha v2](https://www.google.com/recaptcha/api2/demo)
5. Go to [Demo reCaptcha v3](https://antcpt.com/score_detector/)
Systematic Layout Patterns for Rails Applications
Published: 2023-08-17 15:46:05

Here are some notes about using[ Lightning Design System's Layout Patterns](https://www.lightningdesignsystem.com/guidelines/layout/) with Rails and Tailwind.  Used on a [DEMO project](https://github.com/jrhicks/NMR)

![Workspace Layout General](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a29enp2yltinlordf00q.png)


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

![General Formula](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/164tge54dysvdnu28ub8.png)


![Demo App Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo64tq6hhi1bkpxgrhdp.png)


![Workspace Layout In the Wild](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d39m7sb76nw4r6kl9bfd.png)
Resolve 404 Errors in React Router with Apache's .htaccess
Tags: react, apache, routing, webdev
Published: 2023-08-17 15:45:13


---
title: "Resolve 404 Errors in React Router with Apache's .htaccess"
published: true
description: "Learn how to properly configure your Apache server to handle React Router's client-side routing and avoid the dreaded 404 on direct access."
tags: react, apache, routing, webdev
---

### Table of Contents

1. Background of the Issue
2. Why Does This Happen?
3. Solution: Apache's .htaccess Configuration
4. Detailed Explanation of the Configuration
5. Conclusion

---

#### 1. Background of the Issue
When building single-page applications with React Router, a common issue arises: direct access to internal page URLs often results in a 404 error. In this post, we'll explore a solution using Apache server configurations.

---

#### 2. Why Does This Happen?
React Router deals with client-side routing. Hence, when a server request is made to a URL that doesn't correspond to an actual file or directory, the server returns a 404 error.

---

#### 3. Solution: Apache's .htaccess Configuration
To address this issue, you can adjust the `.htaccess` file on your Apache server as follows:

```apache

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
```

With this configuration, any direct access to internal URLs will redirect to `index.html`, allowing React Router to handle the routing properly.

---

#### 4. Detailed Explanation of the Configuration
- `RewriteEngine On`: Enables the rewrite engine.
- `RewriteBase /`: Sets the base URL for rewriting to the root.
- `RewriteRule ^index\.html$ - [L]`: Allows direct access to `index.html`.
- `RewriteCond %{REQUEST_FILENAME} !-f` and `RewriteCond %{REQUEST_FILENAME} !-d`: Applies the next rule only if the requested path doesn't correspond to an actual file or directory.
- `RewriteRule . /index.html [L]`: For any path meeting the above conditions, redirect to `index.html`.

---

#### 5. Conclusion
React Router routing issues can be mitigated with the right server configurations. If you're using Apache, the above `.htaccess` configuration can enhance your user experience. If you found this helpful, please consider sharing and letting your fellow developers know!

---
Java Programming intelliJ Basics (Ternary operator)
Tags: java
Published: 2023-08-17 15:44:06

## Ternary operator:
Also known as _conditional operator_. It is a shorthand operator for if-else statement. it has three operands.

> Syntax: 
> Operand1 ? Operand2 : Operand3

The question mark (?) here represents to evaluate the condition. it acts as a delimiter between the condition and the expressions.
Here condition is an _operand 1_ and expressions are _operand 2_ and _operand 3_. The colon symbol (:) will test, if the first operand (_operand 1_) is true and returns the _operand 2_, otherwise it returns _operand 3_.

`Example: Ternary operator with an If-else statement`

```
public class SecondClass {

    public static void main(String[] args) 
    {
     int age = 20;

        boolean TheAgeis = (age == 20) ? true : false;
        
        if(age == 20) {

            System.out.println("Is an Adult");
        } 
        else {
            System.out.println("Still a kid");
        }
```
In the above code, at first the variable _age_ is set to 20, next checking whether the condition is true, if the condition that is _age_ is equal to 20 is true, it returns the output as **Is an Adult** otherwise it returns **Still a kid**. The above code can be simplified as follows.

`Example: Ternary operator without an If-else statement`

```
public class SecondClass {

    public static void main(String[] args) 
    {
     int age = 20;

        boolean TheAgeis = (age == 20) ? true : false;

        String s = (TheAgeis) ? "Is an Adult" : "Still a kid";

        System.out.println(s);
    }
}
```
Here after the condition is checked and if it results true, the statement to be printed, will be stored in the String variable _s_, which will display the output.
Catch-up!
Tags: hi, hello
Published: 2023-08-17 15:33:36

Hey everyone. I’ve been out for a while. I know, I’m sorry. I wasn’t here during the summer, but anyway, I’m back now! I am about to release a two-part series of articles about what I did over the summer. I was traveling, so I am sorry that I was not here. But I’m back, all 855 of you! I was gone and all of a sudden I am back and there’s 855 followers. I am so grateful for all of your continued support. Anyway, I’ve got two articles to write, so I’ll be back!
How to setup tailwind CSS with vite
Tags: tailwindcss, vite, react, webdev
Published: 2023-08-17 15:21:56




**Prerequisites:**
- Node.js and npm installed on your machine

**Step 1: Set Up Your Project**
Open your terminal and execute the following commands:

```bash
# Create a new Vite project with React template
$ npm create vite@latest my-project -- --template react
$ cd my-project
```

**Step 2: Install Tailwind CSS and PostCSS**
Next, install Tailwind CSS, PostCSS, and Autoprefixer as development dependencies:

```bash
$ npm install -D tailwindcss postcss autoprefixer
```

**Step 3: Initialize Tailwind CSS**
Generate the Tailwind CSS configuration file and initialize it:

```bash
$ npx tailwindcss init -p
```

**Step 4: Configure Tailwind**
Open the `tailwind.config.js` file and modify it as follows:

```javascript
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

**Step 5: Create Your Styles**
In the `src` directory, create a new file named `index.css`. Add the following content to it:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

**Step 6: Style Your React Component**
In the `src` directory, open the `App.jsx` file and update its contents as follows:

```jsx
import React from 'react';

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  );
}
```

**Step 7: Run Your Development Server**
Start the development server to see your app in action:

```bash
$ npm run dev
```

Open your browser and navigate to `http://localhost:3000`. You should see the "Hello world!" text styled according to the Tailwind CSS classes you applied.



### PostCSS

PostCSS is used in your project to enhance and optimize your CSS. It enables you to:

1. Apply modern CSS features and proposals.
2. Automatically add vendor prefixes using Autoprefixer.
3. Optimize and minimize your CSS for better performance.
4. Use a modular, plugin-based approach for customized transformations.
5. Ensure cross-browser compatibility for your styles.