teleren/devto huggingface dataset:
Generate the requirements.txt file automatically.
Tags: python, coding, tutorial
Published: 2023-08-20 06:06:26

**Hi 🙂🖐**

In this post i will share with you how to Generate the requirements.txt file automatically.

I will use a tool called **Pipreqs** it is very easy to use.

## step 1

install pipreqs `pip install pipreqs`

## step 2

Open your code editor and write any script to test. I will write this for the test.

```python

import moviepy.editor as mp
import colored

from PIL import Image
from pyfiglet import figlet_format

print(colored.stylize(figlet_format('Testscript. ;)'), colored.fg(50)))

def test(image_path):
    img = Image.open(image_path)

```

If you are using Vscode, you can write **pipreqs**
in the terminal.

If you havent terminal in your code editor 
open the cmd and write `pipreqs /home/project/location`

For more information 
https://stackoverflow.com/questions/57907655/how-to-use-pipreqs-to-create-requirements-txt-file

**result**

requirements.txt file

```
colored==2.2.3
moviepy==1.0.3
Pillow==9.5.0
Pillow==10.0.0
pyfiglet==0.8.post1

```


**Now we're done 🤗**

**Don't forget to like and follow 🙂**

**Support me on PayPal 🤗**
https://www.paypal.com/paypalme/amr396
Day 4/100- Immersed in Learning and Hotel Management Project
Tags: cpp, programming
Published: 2023-08-20 05:25:58

Hello everyone,

Day 4 of this coding journey has been all about diving deep into the world of coding and learning valuable lessons along the way. 🚀

I continued my journey with the hotel management project, and let me tell you—it's been a whirlwind of discoveries. As I work on this project, I'm gaining a wealth of insights into various concepts and the practical application of coding.

One thing that stood out today was the power of revisiting concepts. I had to circle back to object-oriented programming to achieve the desired output, and let me tell you, the "aha" moment was real. It's a reminder that every challenge is an opportunity to refine our skills and expand our knowledge base.

The best part? It's been a whole lot of fun. Coding isn't just about syntax; it's about creativity, logic, and the thrill of bringing an idea to life through code.

As I wrap up today's update, know that I'm still deep in the process of perfecting my hotel management project. The journey continues, and I can't wait to see where it leads.

Keep coding and exploring,
Sivaraghavi
Allow Only Numbers in Textbox in Reactive Form Angular
Published: 2023-08-20 05:20:43

For several reasons, we need to validate the input field to enter only numbers. In this article, we will see how to allow users to enter only numbers in the input area in angular application. To use the below approach a developer should have basic understanding of reactive form.

Here in the example below, I will use a Reactive form. The same will work for angular 6, angular 7, angular 8, and further versions. 


At first import Reactive form module in module.ts file

``````imports: [

....

ReactiveFormsModule

...

],``````

Now, let's have a look at the code inside component.ts file

``````import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
 
@Component({
  selector: 'app-root',
  template: `<div class="container">
    <form [formGroup]="addForm" (ngSubmit)="submit()">
    <div class="form-group">
    <label for="mobile">Mobile</label>
    <input formControlName="mobile" id="mobile" type="text" class="form-control">
    <div *ngIf="f.mobile.touched && f.mobile.invalid" class="alert alert-danger">

    <div *ngIf="f.mobile.errors.required">mobile is required.</div>
    <div *ngIf="f.mobile.errors.pattern">Enter only number.</div>
    </div>
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
    </form>
   </div>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
  addForm:FormGroup;
  constructor(
    private fb : FormBuilder
  ){ }
 
  ngOnInit(){
    this.addForm = this.fb.group({
      mobile: ['', [Validators.required, Validators.pattern("^[0-9]*$")]]
    })
  }
 
  get f(){
    return this.addForm.controls;
  }
 
}``````

Let me know your thoughts over email **pankaj.itdeveloper@gmail.com.** I would love to hear them and If you like this article, share it with your friends.

This article is originally posted over [jsonworld](jsonworld.com)
What are the differences between UglifyJS and JShaman?
Tags: javascript
Published: 2023-08-20 04:41:30

What are the differences between UglifyJS and JShaman?

UglifyJS is primarily used for compressing JS code and reducing its size. JShaman, on the other hand, is specifically designed for obfuscating and encrypting JS code, with the aim of making it unreadable, obfuscating functional logic, and encrypting hidden data or characters in the code. It is used for code protection. 

Therefore, they are completely different. It is just that UglifyJS also has some obfuscation capabilities, which often leads people to mistakenly believe that it is also an obfuscation and encryption tool.

To demonstrate the difference between the two with an example: Example, file name: example.js, code:

```
var x = {
    baz_: 0,
    foo_: 1,
    calc: function() {
        return this.foo_ + this.baz_;
    }
};
x.bar_ = 2;
x["baz_"] = 3;console.log(x.calc());
```

Using UglifyJS for compression, command:

> uglifyjs example.js -c -m --mangle-props

```
-c enables compression
-m enables obfuscation
```


The result will be:


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


```
var x={o:0,_:1,l:function(){return this._+this.o}};x.t=2,x.o=3,console.log(x.l());
```

As you can see, UglifyJS removes line breaks, and changes long variable names to short ones, achieving compression without affecting code readability. The functional logic remains clear.

Using JShaman for obfuscation and encryption will result in unreadable and chaotic code.


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


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


Of course, whether using UglifyJS for compression and obfuscation, or using JShaman for obfuscation and encryption, it will not affect the normal use of the code.
79 berufliches Vorwärtskommen: Der Vorteil.
Tags: deutsch, career, motivation, discuss
Published: 2023-08-20 04:36:00

Moin Moin,

eine günstige Begleiterscheinung, die man hat…
Diese kann beispielsweise ein gutes Langzeitgedächtnis sein oder ein sehr guter Umgang mit Menschen, was sich in der Team-Arbeit günstig ausdrückt. Dies kann auch sein, dass man einen besonderen Blick für Ästhetik hat – im Konkreten, zum Beispiel bei UI-Design, oder auch im Abstrakten, zum Beispiel bei Software-Architekturen. Es kann auch eine Verknüpfung aus mehreren einzelnen Begleiterscheinungen sein.

Was auch immer der eigene Vorteil ist, wichtig ist, dass man ihn kennt und nutzt. Dies so, denke ich, dies bringt einen mit Freude auf dem Karriere-Weg voran. Denken wir doch an diejenigen, die wir für erfolgreich halten, so sind diese besonders gut in mindestens einer Sache. Entsprechend sieht es aus mit denjenigen, die uns bisher auf unserem Karriere-Weg geholfen oder begleitet haben, seien dies Verwandte, Freunde oder Lehrer. Einige von Ihnen können vielleicht besonders gut zuhören oder haben einfach ein ansteckendes Vertrauen in einen gehabt – all dies können Vorteile sein.

1) Hast du dich bereits damit beschäftigt was für Vorteile du hast ( im Vorzug anderen gegenüber )?
2) Meinst man sollte sich auf seine Vorteile ( / Stärken ) konzentrieren?

Lass uns mittels Kommentaren austauschen.

Beste Grüße,
Mustafa

Oder auch mittels E-Mail: mustafa.kevin.dwenger@posteo.de
Betreff: Austausch
Bare Metal vs Virtual Machine vs Containers
Tags: scor32k, virtualmachine, computerscience, containers
Published: 2023-08-20 03:27:55

> I was scrolling through yt and found an [interesting channel](https://www.youtube.com/@ByteByteGo) you can follow too. This blog elaborate one of the video from this channel.

In this blog, we wil understand the simple differnce between **Bare Metal vs Virtual Machine vs Containers**, with simple *diagram*

## Bare Metal

![bare metal](https://imgur.com/2zl8ehM.png)

## Virtual Machine

![vms](https://imgur.com/12pNeCr.png)

## Container

![container](https://imgur.com/JAoKZ8m.png)


---

If the article helps you, leave a like, follow, or anything 🙂.  
You can follow me on [LinkedIn](https://www.linkedin.com/in/abhishekpathak32/), [GitHub](https://github.com/scorcism), [Dev.to](https://dev.to/scorcism) and [hashnode](https://scorcism.hashnode.dev/).

**Bye**
Intro to Python: Day 12 - OOP - Calling a parent method
Tags: python, webdev, beginners, programming
Published: 2023-08-20 03:22:44

*Hi there 👋 I'm a New York City based web developer documenting my journey with React, React Native, and Python for all to see. Please follow my dev.to profile or [my twitter](https://twitter.com/stonestwebdev) for updates and feel free to reach out if you have questions. Thanks for your support!*

Today is another article on the concept of Object Oriented Programming in Python.

The fact that a child class can inherit data through variables, and actions through methods, from a parent class is a main reason why OOP is powerful. This is called single inheritance and refers to a direct relationship from parent to child class.

In order for a child component to inherit a parent component's methods, you must first instantiate the child Class with the parent's constructor using the `super()` method. For example, let's say a Truck class inherits from a Vehicle class:

```python
class Vehicle:
    def __init__(self, color):
        self.color = color

    def get_color(self):
        return self.color

class Truck(Vehicle):
    def __init__(self, color, horsepower):
        super().__init__(color)
        self.horsepower = horsepower
```

Here we see that we use the `super()` method to call the parent's constructor function. But this method is built in. Now let's say we want to get the color of the truck using the parent's `get_color()` method. In order to call it, we must use the `super()` method again, but this time for a non-built-in method.

```python
class Truck(Vehicle):
    def __init__(self, color, horsepower):
        super().__init__(color)
        self.horsepower = horsepower

    def compliment_car(self):
        truck_color = super().get_color()
        print(f"Hey love that {truck_color} truck you have!")
```

This is how we can use the parent Vehicle's get_color() method on the child Truck class.

**If you like projects like this and want to stay up to date with more, check out my Twitter [@stonestwebdev](https://twitter.com/stonestwebdev), I follow back! See you tomorrow for another project.**
Leveling Up: Navigating the Junior to Senior Software Engineering Journey in Lara Camp Conference
Tags: webdev
Published: 2023-08-20 02:12:22

လာမယ့် Lara Camp Conference မှာ DDD with Laravel ပြောဖို့အစကတွေးထားပေမဲ့ ခုက Field ထဲမှာ Junior Level မှာ Stuck နေတဲ့သူတွေအတွက်ကော၊ Mid Senior တွေအတွက် Level Up ဖို့အတွက် “Leveling Up: Navigating the Junior to Senior Software Engineering Journey” Topic ကိုပြောဖို့ ရှိပါတယ်။

[https://lara.camp/](https://lara.camp/)

![Image](https://aungmyatmoe.me/uploads/Screenshot%202023-08-15%20at%2011.33.33%E2%80%AFPM.png)
Main method in C#9 and later
Published: 2023-08-20 01:32:24

In C#9 and later, it is not necessary to explicity include Main() in a console application.

## In C#9 and later
```C#
// See https://aka.ms/new-console-template for more information
Console.WriteLine("Hello, World!");
```

## Prior to C#9
```
using System;
name MyApp // Note: actual namespace depends on the project name.
{
   internal class Program
  {
      static void Main(string[] args)
      {
          Console.WriteLine("Hello World!")
      }
   }
}
```
Prepare-se para o Futuro: Por que Investir num curso na área de Tecnologia?
Tags: ia, ai, career
Published: 2023-08-20 01:21:36

O futuro da humanidade é tecnológico. A tecnologia está cada vez mais presente em nossas vidas e, portanto, é importante que as pessoas estejam bem preparadas para acompanhar essa evolução. Por isso, fazer cursos de tecnologia é uma escolha inteligente para quem quer ter sucesso profissional.

Por que Investir em Tecnologia?

A tecnologia tem se tornado cada vez mais importante no mundo de hoje e, portanto, investir nela é uma excelente forma de se preparar para o futuro. A tecnologia está presente em praticamente todos os setores da economia, desde o setor de serviços até o setor industrial. Além disso, a tecnologia também está sendo usada para automatizar processos e aumentar a produtividade. Por esses motivos, investir em tecnologia é uma ótima forma de garantir o sucesso profissional.

Cursos Tecnológicos: Uma Escolha Inteligente.

Fazer cursos de tecnologia é uma excelente forma de se preparar para o futuro. Os cursos de tecnologia oferecem um conhecimento profundo e atualizado sobre as últimas tendências e ferramentas tecnológicas. Além disso, os cursos de tecnologia também ajudam os alunos a desenvolver habilidades e competências que são cruciais para o sucesso profissional. Por esses motivos, fazer cursos de tecnologia é uma escolha inteligente para quem quer ter sucesso profissional.

A tecnologia é o futuro da humanidade e, portanto, é importante que as pessoas estejam bem preparadas para acompanhar essa evolução. [Fazer cursos de tecnologia é uma ótima forma de se preparar para o futuro, pois eles oferecem um conhecimento profundo e atualizado sobre as últimas tendências e ferramentas tecnológicas.](https://corujaocursosonline.com.br/category/informatica/) Além disso, os cursos de tecnologia também ajudam os alunos a desenvolver habilidades e competências que são cruciais para o sucesso profissional. Por esses motivos, fazer cursos de tecnologia é uma escolha inteligente para quem quer ter sucesso profissional.
Como usar a propriedade overflow: hidden em CSS
Tags: css, webdev, programming
Published: 2023-08-20 01:11:55

Olá a todos! Hoje, vou mostrar como você pode usar a propriedade CSS overflow: hidden para controlar o que acontece quando o conteúdo de um elemento excede seus limites.

Em CSS, a propriedade overflow determina o que acontece com o conteúdo que não cabe dentro de um contêiner. Existem várias opções para definir a propriedade overflow, incluindo visible, hidden, scroll, e auto.

Neste post, vou focar na opção hidden.

Quando você define a propriedade overflow como hidden, qualquer conteúdo que exceda os limites do contêiner será cortado e não será visível. Vamos ver como isso funciona com alguns exemplos.

Exemplo 1: Ocultando uma imagem grande
Suponha que você tenha uma div com largura e altura fixas de 100px e, dentro dela, você deseja colocar uma imagem que tem 200px de largura e 200px de altura.

```
<div class="overflow-hidden" style="width: 100px; height: 100px;">
  <img src="large-image.jpg" alt="A large image" style="width: 200px; height: 200px;">
</div>
css
Copy code
.overflow-hidden {
  overflow: hidden;
}
```

Neste exemplo, a imagem será cortada para caber dentro da div, e você só verá a parte da imagem que cabe dentro dos limites da div.

Exemplo 2: Ocultando texto longo
Outro exemplo comum é quando você tem um contêiner com uma quantidade limitada de espaço, mas o texto dentro do contêiner é muito longo.


```
<div class="overflow-hidden" style="width: 150px; height: 50px;">
  Este é um texto muito longo que não caberá completamente dentro deste contêiner.
</div>
css
Copy code
.overflow-hidden {
  overflow: hidden;
}
```
Neste exemplo, o texto que não cabe dentro do contêiner será cortado e ocultado.

Conclusão
A propriedade overflow: hidden é uma ferramenta útil para controlar o que acontece com o conteúdo que excede os limites de um contêiner em CSS. É especialmente útil quando você quer garantir que o conteúdo não se estenda além de um contêiner de tamanho fixo. Espero que este post tenha ajudado a entender melhor como usar esta propriedade em seu próprio trabalho de design e desenvolvimento web.

Espero que este exemplo de post de blog tenha sido útil para você! Se você tiver alguma pergunta ou precisar de mais informações, não hesite em entrar em contato.
Another year another skill
Tags: pandas, python, datascience, beginners
Published: 2023-08-20 01:03:50

Completed the FreeCodeCamp course on Data Analysis with the help of python, pandas and numpy.

Next project is likely some personal tools that may evolve into a public project. Don't stay tuned! I'm highly irregular 😼


[Azurebyte's Data Analysis With Python Certification](https://www.freecodecamp.org/certification/azurebyte/data-analysis-with-python-v7)
Responsive masonry layout for React
Tags: layout, masonry
Published: 2023-08-20 14:33:33

---
title: Responsive masonry layout for React
published: true
date: 2023-08-20 00:56:00 UTC
tags: Layout,Masonry
canonical_url: https://reactjsexample.com/responsive-masonry-layout-for-react/
---

# React Layout Masonry

> ![Responsive masonry layout for React](https://reactjsexample.com/content/images/2023/08/Code_2023-08_09-50-36.jpg)
> 
> React Layout Masonry is a flexible and customizable React component for creating dynamic and fixed/responsive masonry layouts.

[View Demo](https://sibiraj-s.github.io/react-layout-masonry/)[View Github](https://github.com/sibiraj-s/react-layout-masonry?ref=reactjsexample.com)

## Installation

You can install React Layout Masonry using npm, pnpm or yarn:

```
npm install react-layout-masonry
```

or

```
pnpm install react-layout-masonry
```

or

```
yarn add react-layout-masonry
```

## Usage

### Fixed Columns Layout

Here’s an example of how to use React Layout Masonry with a fixed number of columns in your React application:

```
import Masonry from 'react-layout-masonry';

const FixedColumnsMasonry = () => {
  return (
    <Masonry columns={3} gap={16}>
      {items.map((item) => {
        return <Item {...item}>
      })}
    </Masonry>
  );
};

export default FixedColumnsMasonry;
```

### Responsive Columns Layout

Here’s an example of how to use React Layout Masonry with responsive columns in your React application:

```
import Masonry from 'react-layout-masonry';

const ResponsiveColumnsMasonry = () => {
  return (
    <Masonry columns={{ 640: 1, 768: 2, 1024: 3, 1280: 5 }} gap={16}>
        {items.map((item) => {
        return <Item {...item}>
      })}
    </Masonry>
  );
};

export default ResponsiveColumnsMasonry;
```

### Column Props

The `columnProps` prop allows you to apply additional props to the container of each column. Here’s an example:

```
<Masonry
  columns={3}
  gap={16}
  columnProps={{
    className: 'custom-column',
    style: { backgroundColor: 'lightgray' },
  }}
>
  {/\* ... \*/}
</Masonry>
```

## Props

- `columns` (number or object, required): The number of columns in the masonry layout, or an object with breakpoints and corresponding column counts.
- `gap` (number, optional): The spacing between columns and rows in pixels. Defaults to 0.
- `columnProps` (object, optional): Additional props to be applied to each column, such as className for styling.

## Examples

For examples, usage and customization options, please refer to the [stories](https://github.com/sibiraj-s/react-layout-masonry/blob/master/stories) directory in this repository.
A customizable tooltip component for React applications
Tags: tooltip
Published: 2023-08-20 14:33:39

---
title: A customizable tooltip component for React applications
published: true
date: 2023-08-20 00:49:00 UTC
tags: Tooltip
canonical_url: https://reactjsexample.com/a-customizable-tooltip-component-for-react-applications/
---

# Get Tooltip React
 ![A customizable tooltip component for React applications](https://reactjsexample.com/content/images/2023/08/Get-Tooltip-React.jpg)

A customizable tooltip component for React applications.

## Installation

You can install the `get-tooltip-react` package using npm:

```
npm install get-tooltip-react
```

## Usage

Import the Tooltip component and use it in your React application:

```
import React from "react";
import { Tooltip } from "get-tooltip-react";
import "get-tooltip-react/dist/style.css"; // Don't forget to import the CSS for styling

function App() {
  return (
    <div className="App">
      <h1>Tooltip React Component</h1>

      <div className="container">
        <Tooltip
          tooltiptext="This is a tooltip!"
          position="top"
          bg="#172554"
          textColor="#93c5fd"
          delay={500}
          arrow
        >
          <button className="tooltip-btn">Hover Me</button>
        </Tooltip>

        <Tooltip tooltipText="Another tooltip">
          <span>Hover over me too!</span>
        </Tooltip>
      </div>
    </div>
  );
}

export default App;
```

## Props

The Tooltip component accepts the following props:

- children: ReactNode (required) – The content that triggers the tooltip.
- tooltiptext: string (required) – The text to display in the tooltip.
- position: one of [“top”, “bottom”, “left”, “right”] – Position of the tooltip (default: “bottom”).
- bg: string – Background color of the tooltip (default: “black”).
- textColor: string – Text color of the tooltip (default: “white”).
- delay: number – Delay before showing the tooltip (in milliseconds, default: 0).
- arrow: boolean – Whether to show an arrow on the tooltip (default: false).

## GitHub

[View Github](https://github.com/khuranamanan/get-tooltip-react?ref=reactjsexample.com)
Django Dev Journey #5
Tags: django, python, webdev, productivity
Published: 2023-08-20 00:25:00

##Portfolio Published, The Friends We Made Along The Way..

### Finally, my first baby came to life.
I have been studying web development for a while now ..
Got to a place where I can say that I'm Django Developer, Not the best but still a one. I deployed my portfolio a few hours ago on render.
Everything that I used to create this project:

- Programming Languages: Python, HTML(MarkUp Language), CSS
- Framework: Django
- VCS: Git
- Package Management: Pipenv
- PostgreSQL
- render.com
- And many small packages like WhiteNoise for staticfiles serving, Psycopg Database Adapter and CKeditor...

Don't be fooled by the start of the article, my portfolio definitely isn't my first Django project, but it's the first however to be deployed and fully working and ready to be used.



After reading the books of William S. Vincent about Django, which, taught me a lot about web-development with Django. I came to the conclusion that there is no website that is up and running today with one or two technologies not even 4.


Which is a fantasy that I have to admit that I had before starting with web development. Another thing that I have to admit is that I underestimated the amount of work a front-end developer does in the creation of a fully functioning website.


Other things that I never thought of practically before making this project are the security concerns of launching a website and I said practically, because, of course I thought about the security of my website before and how to prevent any damage and cyber attack to happen, but never thought of exactly HOW can I protect it.


As the saying from my country goes.. Live another day, learn another thing ..
After learning about all of the things I mentioned above, I realized that I really over evaluate myself when I think of how much I know about web development.


But personally, I think that this is the way you go, if I was to discourage myself and put myself down I would have never learned and never earned. I think that you should think of an educational material as easy before you start learning it and confronting its difficulties. And even then, you should talk yourself out of fearing those obstacles and remind yourself that within the right amount of time you can conquer every concept of a matter if you are really willing to put the effort.


_**And after going through all the storms of ignorance, you'll forget your pain, discover that the tools you learned about are the friends you made along the way and enjoy the sunrays of knowledge.**_

[My Portfolio](https://jawdat-portfolio.onrender.com/)