teleren/devto huggingface dataset:
Setting up `pre-commit` in a Django project
Tags: django
Published: 2024-06-28 11:04:26


**Step 1: Install Required Tools**

First, make sure you have the required tools installed in your Python environment:

```sh
pip install isort black flake8 pre-commit
```

Save the dependencies in your `requirements.txt` file:

```python
# requirements.txt (28.06.2024)

black==24.4.2
flake8==7.1.0
isort==5.13.2
pre-commit==3.7.1
```

**Step 2: Create a Pre-Commit Configuration File**

Create or update a file named `.pre-commit-config.yaml` in the root of your project:

```yml
# .pre-commit-config.yaml (28.06.2024)

repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v4.6.0
    hooks:
      - id: trailing-whitespace
      - id: end-of-file-fixer
      - id: check-added-large-files


  - repo: https://github.com/PyCQA/isort
    rev: 5.13.2
    hooks:
      - id: isort


  - repo: https://github.com/psf/black
    rev: 24.4.2
    hooks:
      - id: black


  - repo: https://github.com/pycqa/flake8
    rev: 7.1.0
    hooks:
      - id: flake8


  - repo: local
    hooks:
      - id: django-check
        name: Run Django Check
        entry: python manage.py check
        language: system
        pass_filenames: false
        types: [python]
```

**Step 3: Configure flake8**

Create or update a `setup.cfg` configuration file to customize flake8 and `isort` behavior:

_Ensure that `isort` is configured to be compatible with `black`. `isort` has a setting to make it play nicely with `black`.

Include the following configuration for `isort` to make it work with `black`. You can place these settings in an `isort` configuration file like `.isort.cfg`, `pyproject.toml`, or any other configuration file `isort` supports._

```python
# setup.cfg (28.06.2024)

[flake8]
max-line-length = 99
exclude = **/migrations/*,venv
extend-ignore = E203, W503

[isort]
profile=black
```

**Step 4: Set up Pre-Commit**

Run the following command to set up the pre-commit hooks:

```sh
pre-commit install
```

This command installs the pre-commit hooks defined in your .pre-commit-config.yaml file. Now, every time you try to commit code, the hooks will run automatically to ensure the code adheres to the specified quality checks and formatting rules.

results in something like:
```sh
(venv) ➜  project git: ✗ pre-commit install
pre-commit installed at .git/hooks/pre-commit
```

**Step 4.1: Update all pre-commit hooks:**

Ensure all hooks are up-to-date by running: 

```sh
pre-commit autoupdate
```


**Step 5: Running Pre-Commit Manually (Optional)**

You can also run the pre-commit hooks manually at any time with the following command:

```sh
pre-commit run --all-files
```

By following these steps, you create a robust pre-commit hook system that enforces code quality and style consistency across your Django project. This helps catch issues early and ensures a more maintainable codebase.
Ibuprofeno.py💊| #127: Explica este código Python
Tags: python, learning, spanish, beginners
Published: 2024-06-28 11:00:00

## **<center>Explica este código Python</center>**
#### <center>**Dificultad:** <mark>Fácil</mark></center>

```py
x = {1, 2, 3}
x.add(10)
print(x)
```

* **A.** `{10, 1, 2, 3}`
* **B.** `{1, 2, 3}`
* **C.** `{10}`
* **D.** `Ninguno de los anteriores`

---

{% details **Respuesta:** %} 

👉 **A.** `{10, 1, 2, 3}`

Para agregar items a un conjunto se debe usar el método `add()`.
Se verifica que el item a agregar no exista en el conjunto, si existe entonces no lo agrega.



 
{% enddetails %}
Ibuprofeno.py💊| #128: Explica este código Python
Tags: python, beginners, spanish, learning
Published: 2024-06-28 11:00:00

## **<center>Explica este código Python</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark></center>

```py
x = {"a", "b", "c"}
x.remove("x")
print(x)
```

* **A.** `{}`
* **B.** `{"a", "b", "c"}`
* **C.** `KeyError`
* **D.** `SyntaxError`

---

{% details **Respuesta:** %} 

👉 **C.** `KeyError`

Para poder eliminar items de un conjunto usamos el método `remove()`.

Si el item a eliminar no existe en el conjunto entonces regresamos un `KeyError`. 

Por ejemplo, para eliminar el item `a` tendriamos:

```py
x = {"a", "b", "c"}
x.remove("a")
print(x) # {'b', 'c'}
```



 
{% enddetails %}
Implementing User Authentication with React Hooks and Firebase
Tags: javascript, react, firebase, authentication
Published: 2024-06-28 10:00:32


At [Itself Tools](https://itselftools.com), we've learned a great deal through our journey of developing over 30 dynamic websites using Next.js and Firebase. Today, I'll walk you through an essential piece of functionality if you're considering adding authentication to your React applications: user login using Firebase.

## Understanding the Code

Here is the React hook that facilitates user authentication using Firebase Auth:

```javascript
import { useCallback } from 'react';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

const useLogin = () => {
  const auth = getAuth();
  const login = useCallback(async (email, password) => {
    try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      return userCredential.user;
    } catch (error) {
      console.error('Failed to login', error);
      throw error;
    }
  }, [auth]);

  return { login };
};

export default useLogin;
```

### Step-by-Step Breakdown

1. **Import Necessary Modules**: We start by importing `useCallback` from React, which will help in memoizing the login function to prevent unnecessary re-renderings. Then, we import `getAuth` and `signInWithEmailAndPassword` from Firebase, which are essential for authentication processes.

2. **Initialization of Authentication**: `getAuth()` is called to initialize the authentication service from Firebase which provides the context for our operations.

3. **Creating the Login Function**: We use the `useCallback` hook to define our login function. This function is wrapped in a `useCallback` to ensure it only recomputes if `auth` changes. Inside, we use the `signInWithEmailAndPassword` function, passing the `auth` instance along with the provided email and password.

4. **Error Handling**: Our function contains a try-catch block to handle errors effectively. In the event of login failure, the error is logged, and then re-thrown, possibly to be caught by a parent component or error boundary for appropriate handling.

5. **Exporting the Hook**: The `login` method is returned wrapped in an object, making it easily accessible when the hook is used in other parts of the application.

## Conclusion

Integrating Firebase with React Hooks like `useCallback` offers a robust solution for managing user authentication in your React applications. For those interested in seeing this code within a live application, feel free to explore our full-fledged web applications at [Find the Right Adjectives](https://adjectives-for.com), [Disposable Email Service](https://tempmailmax.com), and [Pronunciation Dictionary](https://how-to-say.com). These platforms further showcase the integration of various web technologies, delivering powerful and practical utilities for everyday use.

Happy Coding!
Why we don't use RemoteWebDriver driver = new ChromeDriver()
Tags: webdriver, remotewebdrive, inheritance
Published: 2024-06-28 09:42:23

### Introduction:
This is more of an Object Oriented Programming interview question rather than a Selenium WebDriver question.

First of all, there is absolutely **no problem** with a browser driver object being referenced by RemoteWebDriver instance variable. There will never be any problem with the automation testing framework script, until and unless Selenium decides to deprecate RemoteWebDriver (very unlikely).

Now let's quickly see the Selenium WebDriver hierarchy.

**_SearchContext_** interface : It has 2 methods - findElement(By locator) and findElements(By locator).

**_WebDriver_** interface : It extends SearchContext interface. So it has to override both the SearchContext methods. Along with that, it provides its own abstract methods.

**_WebElement_** interface : It extends SearchContext interface. So it automatically overrides both of its parent interface's methods. Along with that, it provides its own abstract methods.

**RemoteWebDriver** class : It implements WebDriver interface. So it overrides all the methods of WebDriver and SearchContext interfaces.

### RemoteWebDriver : the 1st Concrete class in WebDriver API hierarchy :
💡

> A concrete class is a class in which, all methods, including overridden and its own methods, are implemented.

> All methods from its parent and grandparent interfaces are implemented in RemoteWebDriver class. This is the concept of Inheritance in Object Oriented Programming. RemoteWebDriver and subsequent child classes such as ChromeDriver, EdgeDriver etc. are essentially inheriting properties of WebDriver. _The properties are declared in WebDriver interface. How these properties should work are defined in RemoteWebDriver class_.

### Using RemoteWebDriver instead of WebDriver :
The way we use the WebDriver API in our automation testing framework, there is no fundamental difference in WebDriver and RemoteWebDriver functionality-wise.

```
RemoteWebDriver driver1 = new ChomeDriver();
driver1.get("https://google.com");
//or,
WebDriver driver2 = new ChromeDriver();
driver2.get("https://google.com");
```
Here, both driver1 and driver2 will have same methods available to them. It won't affect any functionalities within the framework.

### Why we don't write RemoteWebDriver = new ChromeDriver() :
According to object oriented programming, we should,

> "code to interfaces"

That means, we should be able to maintain abstraction in our code as much as we can. Even though there is nothing wrong with writing RemoteWebDriver = new ChromeDriver(), we are exposing the implemented class here, rather than hiding it.

For better readability, we write WebDriver driver = new ChromeDriver(). We are concerned about what a method does, rather than how it does it. This level of abstraction can be achieved by creating driver object referenced by instance of the interface.

Thanks and Happy learning!
The Ultimate Guide to SVG Code Formatter: Boosting Your Web Graphics Efficiency
Published: 2024-06-28 10:44:45







https://ovdss.com/apps/svg-code-formatter


Introduction to SVG
Scalable Vector Graphics (SVG) is a powerful image format used to create two-dimensional vector graphics. Unlike raster images (such as JPEGs or PNGs), SVG images are scalable to any size without losing quality. This makes them perfect for responsive web design, where images need to look crisp on any device.


Why SVG Formatting Matters
When working with SVGs, especially if you're editing the code manually or integrating it into web projects, maintaining clean and readable code is crucial. Proper formatting not only enhances readability but also makes debugging and collaboration more manageable. This is where an SVG code formatter comes into play.


Benefits of Using an SVG Code Formatter
Improved Readability: Properly formatted SVG code is easier to read and understand. Indentation, line breaks, and consistent use of spaces or tabs help developers quickly grasp the structure and components of the SVG.
Easier Debugging: Well-formatted code makes it easier to identify errors. Misplaced tags or attributes can be spotted quickly when the code is organized logically.
Enhanced Collaboration: In team environments, maintaining a consistent code style across all SVG files helps all team members understand and work with the code more efficiently.
Optimization: Some SVG code formatters also include optimization features that remove unnecessary code, reducing file size without compromising quality.

Conclusion
An SVG code formatter is an essential tool for web developers and designers working with SVG files. It ensures your SVG code is clean, readable, and optimized, which ultimately leads to better performance and easier maintenance. Whether you prefer online tools, IDE plugins, or command-line utilities, integrating an SVG code formatter into your workflow will significantly enhance your productivity and the quality of your web graphics.
Mastering Gel Polish Application: Techniques for Professional Results
Tags: design
Published: 2024-06-28 10:44:43


Want to save more by doing your gel manicure yourself at home? But with the help of the right product and techniques, you can do this on your own in only a little over half an hour. Learning tips for perfecting the application of gel polish



Benefits of Gel Polish


Gel polish is suitable for individuals who love their nails to both last and be shiny. Gel polish is unlike regular sticky liquids which are kept up with a special light to make them solid and strong. It can be worn up to three weeks without damage making it an excellent choice for low-maintenance nails.



New Things in Gel Polish


Gel polish is no exception, the beauty world as a whole evolves over time Thanks to new formulas and applications of gel nail polish, it keeps becoming easier and less damaging to the nails. I have now seen some acrylic nail extension brands where you can use "no-light" gel polish, which means no special lamp. This is not just more convenient; it's also safer, as this reduces the risk of exposure to skin from visibility into undesirable UV light.



Safety Tips for Gel Polish


As long as you are sticking to the specific instructions, in general gel polish is safe. Use only in a well-ventilated area and avoid contact with skin. DO NOT APPLY GEL POLISH ON IRRITATED SKIN OR CUTS. Do not continue to use the material, and in case you have itching or redness remove the gel polish immediately using a special remover and if necessary consult a doctor.



How to Apply Gel Polish


It's quite easy to use the cat eye gel polish, if you know how. Buff your nails gently and trim those cuticles. Put a foundation under UV-lamp to for drying. From there put on your favorite or any color you want and dry it again. Apply a second coat of mascara if needed. Top everything off with a top coat, and finish drying. The stickiness can be whisked off with a cotton ball and rubbed down (gently) with alcohol or gel cleanser.



Quality Matters


The best gel polish and tools to make your manicure look, feel the most professional as possible now recurrences longer response. Opt for brands that have a reputation of long lasting formulas. Order a UV or LED lamp to aid the drying process, ensuring your nails dry quickly and won't smudge easily.



Applying Techniques


Change up your gel polish manicure with some different techniques like ombre, glitter, or stencils. Designs you certainly like Anyone can design it and Experiment about what kind of stuff suits your style best. So have fun and get creative with your nails!



So, all in all it means you don't need to waste your time or money going out of the house for a gel nail treatment. You can easily get the nails of salon quality simply by following some safety tips and also using good uv gel nail polish products. Mix and match colors for a fresh look that mirrors your style personality. Enjoy painting your nails!
Methods of Array in Javascript
Tags: javascript, array, frontend, learning
Published: 2024-06-28 10:40:37


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



**push(): Adds one or more elements to the end of an array and returns the new length.
pop(): Removes the last element from an array and returns that element.
shift(): Removes the first element from an array and returns that element.
unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.
concat(): Returns a new array that combines two or more arrays.
slice(): Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).
splice(): Changes the contents of an array by removing or replacing existing elements and/or adding new elements
filter(): Creates a new array with all elements that pass the test implemented by the provided function.
join() : The join() method joins all elements of an array into a string.**
Experience the Magic: Guy Bavli Live in Ft. Lauderdale!
Published: 2024-06-28 10:39:41

Prepare for an evening filled with wonder and amazement! On July 6th, 2024, renowned mentalist Guy Bavli will take the stage at the Riverside Hotel in Ft. Lauderdale. Famous for his astounding telekinesis, mind reading, and incredible predictions, Guy Bavli promises a night you won't forget.
What to Expect:
Telekinesis: Witness objects move as if by magic, defying the laws of physics.
Mind Challenges: Test your wits against the master with mind-bending challenges.
ESP: Experience mind reading live, right before your eyes.
Amazing Predictions: Be astounded as he accurately predicts your thoughts and actions.
Event Details:
Date: July 6th, 2024
Day: Saturday
Time: 8:00 PM
Location: Riverside Hotel, 620 East Las Olas Boulevard, Fort Lauderdale, FL 33301
Ticket Options:
General Seating + 1 Drink: $68.00
Dinner at WildSea Restaurant + Show Ticket + Reserved Seating + 1 Drink: $100.00
VIP Package:
Dinner at WildSea
Show
VIP Private Table & Seat
1 Drink
Price: $120.00
VIP Private Table & Seat + 1 Drink: $90.00
Don't miss out on this extraordinary night of magic and entertainment! Seats are limited, so secure your tickets now. Come witness the incredible Guy Bavli, the Master of the Mind!

Get Your Ticket Here
Chapter-4 Cron Jobs With Shell Script
Published: 2024-06-28 10:16:10

1 How to use cron jobs in ubuntu.

Go to your ubuntu server.

Step- #date >>>>>> Check your system current date and time.

Step-2#crontab -l >>>>>> Check which user set for cron job

Step-3#crontab -e >>>>>> Open Crontab file.

:--

Minutes Hour Day/Month Month Day/Week

12              9            *                *               *    

    echo "This is test cronfile" > /home/ubuntu/test.txt
:--

Step-4#12 9 * * * echo "This is test cronJob" > /home/ubuntu/test.txt

**************************************************************************

2 How to run backup Shell script using Cron Job.

#crontab -e >>>>> Open Crontab file.

* * * * *bash /home/ubuntu/script/check_disk.sh >> /home/ubuntu/check.log.txt

Cat /home/ubuntu/check.log.txt

'*************************************************************************
Elevating Style Necklace For Women
Published: 2024-06-28 09:44:30

Indulge in the world of exquisite **[necklaces for women](https://johori.com/collections/necklace)** at Johori, where each piece is a manifestation of elegance and timeless beauty. Our curated collection is a celebration of craftsmanship and style, offering a diverse range of necklaces that cater to every taste and occasion. Explore the allure of our necklaces for women and discover the perfect piece to enhance your style.
How to share tailwind configuration between nuxt layers
Tags: nuxt, vue, tailwindcss, javascript
Published: 2024-06-28 09:40:56




# While working in the [nuxt-layer-monorepo](https://github.com/leamsigc/nuxt-monorepo-layers) I encounter a issue with the tailwind styles:



- UI Layer have a tailwind config file and override the default tailwind CSS configurations
- Then using the UI Layer in the Content layer

> Tailwind configurations got reset to the base for some reason, even that the layers' config should be use



So the solution that I found and is currently working is just to create a new `tailwind.config.ts` in the Content layer

and put the following on it:


```ts
import twc from "@local-monorepo/ui/tailwind.config"


export default twc
```


Basically importing the tailwind config from the UI Layer and using that in the Content layer.


### Note

This is working for me, but please if there is a better way kindly let me know.


***Happy hacking!*




{% gist https://gist.github.com/leamsigc/68d3f891d9298c35de273caa2b21e453 %} 


> Working on the audio version


[The Loop VueJs Podcast](https://podcasters.spotify.com/pod/show/the-loop-vuejs)
Ruby on Rails reselect and rewhere lets you optimize performance
Tags: webdev, rails, database, performance
Published: 2024-06-28 09:37:36

Enhance your Rails queries with ActiveRecord's `reselect` and `rewhere` methods!
1. `reselect`: Streamline your data retrieval by dynamically adjusting the SELECT clause in your queries. Instead of rewriting entire queries, reselect lets you optimize performance by selecting only the necessary columns. Perfect for efficient data fetching and cleaner code!. like
`Post.where(category:'Technology').reselect(:title, :created_at)`
2. `rewhere`: Modify existing WHERE clauses on-the-fly without starting from scratch. Whether adapting filter criteria or handling dynamic data conditions, `rewhere` empowers developers to build adaptable queries for dynamic data filtering and efficient querying. like
`User.where(active: true).rewhere(last_login_date: Date.today - 7.days)`
Apache Airflow
Published: 2024-06-28 09:36:36

## I. Kiến trúc của Airflow


![Basic architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dxtqwubumj4woexsfxs.png)


**1. Các component chính:**
- **Scheduler**: Trái tim của Airflow, chịu trách nhiệm lên lịch và thực thi các DAGs. Nó liên tục kiểm tra các DAGs và xác định các tasks cần thực thi dựa trên các dependencies và thời gian lên lịch.
- **Executor**: Chịu trách nhiệm thực thi các tasks. Airflow cung cấp nhiều loại executors như LocalExecutor (thực thi tasks trên máy chủ Airflow), CeleryExecutor (thực thi tasks trên các worker riêng biệt), KubernetesExecutor (thực thi tasks trên cluster Kubernetes), v.v.
- **Webserver**: Cung cấp giao diện web để quản lý, theo dõi và debug các DAGs.
- **Metadata Database**: Lưu trữ thông tin về các DAGs, tasks, logs, v.v. Airflow hỗ trợ nhiều loại database như PostgreSQL, MySQL, SQLite.
- **DAGs** (Directed Acyclic Graphs): Đại diện cho các luồng công việc trong Airflow. Mỗi DAG bao gồm một tập hợp các tasks được kết nối với nhau theo thứ tự thực thi.
Tasks: Các đơn vị công việc nhỏ nhất trong Airflow. Mỗi task đại diện cho một tác vụ cụ thể, ví dụ như chạy một script Python, gửi email, v.v.
- **Operators**: Các lớp Python được sử dụng để định nghĩa các tasks trong DAGs. Airflow cung cấp nhiều loại operators cho các tác vụ phổ biến như BashOperator, PythonOperator, EmailOperator, v.v.

**2. Deploying Airflow components**
- Trên Single machine chỉ gồm components scheduler và webserver
- Trên Distributed environment - các components sẽ chạy trên các machines khác nhau (điều này cũng góp phần tăng tính bảo mật)


![Distributed architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x42rkzsw0hyzdgh5quhu.png)



## II. Cơ chế hoạt động
- **Scheduler** (Lên lịch): liên tục kiểm tra các DAGs và xác định các tasks cần thực thi dựa trên các dependencies và thời gian lên lịch.
- **Executor** (Thực thi): nhận các tasks từ Scheduler và thực thi chúng trên các worker.
- **Monitoring** (Theo dõi): Airflow theo dõi tiến trình của các tasks và ghi lại thông tin vào Metadata Database.
- **Error Handling** (Xử lý lỗi): Airflow xử lý các lỗi xảy ra trong quá trình thực thi tasks và có thể retry, skip hoặc fail các tasks dựa trên cấu hình.

<u>_References:_</u>
https://airflow.apache.org/docs/apache-airflow/stable/core-concepts/overview.html#architecture-diagrams