teleren/devto huggingface dataset:
I don't remember the principles of OOP :D
Published: 2023-02-21 11:45:04

The interviewer asked me to describe the principles of Object-oriented Programming. I don't remember the answer? but should I remember all that? My opinion is I don't need to.

Is there any connection between remember what the definitions are and the right way to use them? I think they are far apart. You dont need to list every principle on the paper in order to implement OOP the good way.

We all know a Class can be inherited
We all know in some cases we don't want to expose everything to the outside, that's why we use `private` and `protected` for some of our methods and properties
We all know a method can be override
We all know a method could have multiple signatures
We all know when we have different entities but have the common behavior, we could use interface or AbstractClass...

What is Encapsulation, Inheritance, Polymorphism, Abstraction. Man give me 5 minutes for searching :D. I don't remember what they are, but if you ask me what is the problem in some lines of OOP codes, I might still get the right answer.

Could us in some points violate the principles? We could, but the thing is, we do the best way, not do as any principle tells us to do, the code might not be OOP, or might not be FP, but if it works and it works well, go for it.

What I want to emphasize is the way of learning programming, you don't need to remember all the definitions or all the terms, expecially if it doesnt have anything to do with a realworld problem, learn how to use them, and how to use them the efficient way.

Same thing happen to SOLID principles, you don't remember what S,O,L,I,D stands for but if you know how to follow those principles, that's more than enough.

When learning a programming concept, instead of what they are, learn how to utilize them and why we follow them.

Some might agree with me, some might say this post is just me excuses for not remembering one of the most famous set of principles in programming world.
What is Nextjs?
Tags: nextjs, beginners, programming, typescript
Published: 2023-02-21 11:44:05

Next.js is an open-source framework for building server-rendered React applications. It was developed by Vercel, and its popularity has been growing rapidly in recent years due to its ease of use and its many features.One of the key features of Next.js is its ability to render React components on the server, which improves performance and pro
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k97v241bnreuq2h39i3v.jpg)vides better SEO capabilities. This is achieved through a feature called Server-side Rendering (SSR), which allows the initial HTML markup to be generated on the server before being sent to the client.

Next.js also provides many other features, such as automatic code splitting, which allows your application to load faster by only downloading the code that is needed for each page. It also includes built-in support for static site generation, which allows you to generate your entire site as static HTML files that can be hosted anywhere.

Other features of Next.js include support for hot module reloading, easy deployment to platforms like Vercel and Heroku, and a wide range of plugins and integrations to extend its functionality.

Overall, Next.js is a powerful and flexible framework for building modern web applications with React, and it can be a great choice for developers looking to improve performance, SEO, and user experience.
html canvas scrolling and mouse position issue
Published: 2023-02-21 11:43:48

Problem. 
- I have to draw ellipses when I click mouse on html canvas
- The canvas is huge. maximum upto 1024px. 
- when I scroll down the page, the half of canvas is hidden.
- when I try to paint at such position, the coordinates where the ellipses are drawn don't match my mouse position. 

Before: 
```js
const { x, y, top, left } = this.ctx.canvas.parentNode.getBoundingClientRect();

this.offsetX = this.ctx.canvas.offsetLeft + x;
this.offsetY = this.ctx.canvas.offsetTop + y;
let mouseX = e.clientX - this.offsetX;
let mouseY = e.clientY - this.offsetY;

context.beginPath();
context.fillStyle = color;
    
        // Draw the ellipse
        context.ellipse(
            mouseX, mouseY, 
            size, size, 
            0, 0, Math.PI * 2
        );
context.fill();
context.closePath();
```

reference: https://stackoverflow.com/questions/72379573/get-canvas-pixel-position-from-mouse-coordinates

After
```js
const { bottom, height, left, right, top, width, x, y } = this.canvasWrapper.getBoundingClientRect();

const mouseX = (e.clientX - left) / width * this.canvas.width;
const mouseY = (e.clientY - top) / height * this.canvas.height;

```
How to Develop an EV Charging Station Finder App?
Tags: webdev, android, ios, beginners
Published: 2023-02-21 11:40:49

The **EV charging station finder app** development is not an easy process; it should include market research, development of functional features, adding a user-friendly interface, and others.

But developing a **mobile application** is a complicated process and requires high cost and time to avail and launch.
Fortunately, there is an alternative solution which is 'clone scripts'.

For example, the **Uber for X script** is a feasible solution that can be developed for the EV charging station finder app. It has a **customer app, service provider app (EV Charging Stations), and admin panel**.

Through these three elements, you can provide the best kind of service with the best electric vehicle charging station finder app.  

At the same time, you need to pay more attention to finding the best EV charging station finder app development company like **[SpotnRides](spotnrides.com)** to avail the best Uber for EV charging station finder app.
openGauss Creating a Database
Tags: opengaus, database
Published: 2023-02-21 11:39:38

After the database is installed, a database named postgres is generated by default. You need to create your own database.

Synt

## 
ax
`Create a database.`


CREATE DATABASE database_name;
View the database.

Run \l to view the existing database.

`\l`
Run \c + Database name to access the existing database.


`\c dbname`
Modify the database.


`ALTER DATABASE database_name RENAME TO new_name;`
Delete the database.


`DROP DATABASE database_name ;`

## 
Parameter Description
database_name

Specifies the name of the database to be created, modified, or deleted.

new_name

Specifies the new name of a database.

## Examples
Create the db_tpcc database.


`openGauss=# CREATE DATABASE db_tpcc;`
If the following information is displayed, the creation is successful:


`CREATE DATABASE`
Run \l to view the existing database.


`openGauss=# \l
                        List of databases
   Name    | Owner | Encoding  | Collate | Ctype | Access privileges
-----------+-------+-----------+---------+-------+-------------------
 db_tpcc   | omm   | SQL_ASCII | C       | C     |
 mydb      | omm   | GBK       | C       | C     |
 postgres  | omm   | SQL_ASCII | C       | C     |
 template0 | omm   | SQL_ASCII | C       | C     | =c/omm           +
           |       |           |         |       | omm=CTc/omm
 template1 | omm   | SQL_ASCII | C       | C     | =c/omm           +
           |       |           |         |       | omm=CTc/omm
(5 rows)`
Create a database (this does not mean that the database is used). You need to specify that the created database is used. Run \c + Database name to access the db_tpcc database.


`openGauss=# \c db_tpcc
Non-SSL connection (SSL connection is recommended when requiring high-security)
You are now connected to database "db_tpcc" as user "omm".
db_tpcc=#`
Switch to the postgres database.

`db_tpcc=# \c postgres`
Change the db_tpcc database name to tpcc.


`openGauss=# ALTER DATABASE db_tpcc RENAME TO tpcc;`
If the following information is displayed, the modification is successful:


`ALTER DATABASE`
Delete the tpcc database.


`openGauss=# DROP DATABASE tpcc;`
If the following information is displayed, the deletion is successful:


`DROP DATABASE`
openGauss Creating a Table
Tags: opengauss
Published: 2023-02-21 11:11:50

Create an empty table in the current database. The table will be owned by the creator. The same table can be stored in different databases. You can execute the CREATE TABLE statement to create a table.

## Syntax
`CREATE TABLE table_name 
    (column_name data_type [, ... ]);`

## Parameter Description

- table_name

Specifies the name of the table to be created.

- column_name

Specifies the name of the column to be created in the new table.

- data_type

Specifies the data type of the column.

## Examples
Run the following commands to create a table named customer_t1. The table columns are c_customer_sk, c_customer_id, c_first_name, and c_last_name. The data types of the table columns are integer, char (5), char (6), and char (8), respectively.


`openGauss=# CREATE TABLE customer_t1
(
    c_customer_sk             integer,
    c_customer_id             char(5),
    c_first_name              char(6),
    c_last_name               char(8),
    Amount                    integer
);`
If the following information is displayed, the table has been created:


` CREATE TABLE`
Hey People! Team Required for my first ever Hackathon.
Tags: beginners, design, hackathon
Published: 2023-02-21 11:03:00

Here's a hackathon that ends its registration **tonight**. This requires **<u>4 team members</u>**. I would like to team up to initiate my journey in hackathons. Have a look at the description on the website below :


Looking for responses asap!
{% embed https://unstop.com/hackathons/online-hackathon-competition-doon-university-du-dehradun-614148 %}
Java Training in Chennai | Java Course in Chennai with Job Assistance
Published: 2023-02-21 10:56:59

Get top-notch Java training from certified professionals with live projects and in-depth course content. Our [Java training in Chennai ](https://www.softlogicsys.in/java-training-in-chennai/)will give you the skills and knowledge to become a successful programmer. Get hands-on experience with our real-world projects and get certified to take your career to the next level. Our experienced instructors will help you gain the skills to become a successful Java developer. Join us today and get ready for your dream job!
Unlock Your Design Potential with Tailwind CSS
Tags: webdev, css, testing, techzpad
Published: 2023-02-21 10:55:22

Tailwind CSS is basically a utility-first CSS framework for quickly building custom user interfaces. It’s a highly customizable, low-level CSS framework that provides you with all the constructing blocks it’s essential to construct bespoke designs without any annoying opinionated kinds you have to battle to override.

The beauty of this factor known as tailwind is it doesn’t impose design specs or how your website ought to look, you merely carry tiny components collectively to assemble a personal interface that’s distinctive. What Tailwind merely does is take an ‘uncooked’ CSS file, process this CSS file over a configuration file, and produce an output.

Advantages of Tailwind CSS

1. No more silly names for CSS classes aIdsd’s.
2. Minimum lines of Code in CSS file.
3. We can customize the designs to make the components.
4. Makes the website responsive.
5. Makes the changes in the desired manner.
6. CSS is global in nature and if make changes in the file the property is changed in all the HTML files linked to it. But with the help of Tailwind CSS we can use utility classes and make local changes.
Read More Articles [Here](https://techzpad.com/what-is-tailwind-css)
IMPORT JAVA FUNCTION IN XSL FILE
Tags: xml, xsl, java, import
Published: 2023-02-21 10:54:39

Hello everybody,

I have a problem.

I would like to know if it is possible to import a Java function in a XSL file (eXtensible Stylesheet Language) and use this function in another XSL function.

I have done some test but I'm not able to do it.

Can you help me?
IMPORT JAVA FUNCTION IN XSL FILE
Published: 2023-02-21 10:52:24

Hello everybody,

I have a problem. 

I would like to know if it is possible to import a Java function in a XSL file (eXtensible Stylesheet Language) and use this function in another XSL function.

I have done some test but I'm not able to do it.

Can you help me?
ios flutter application
Published: 2023-02-21 10:47:30

I'm getting this error below warning in my Xcode 13.0

The iOS Simulator deployment
    target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions
    is 9.0 to 15.0.99.

![Errors i have been getting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1x3fy5exd0ez84xlc2tk.png)


My deployment target is 15.0

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kj9w2nw3owwsipdnmxsj.png)
Add a favicon to your Storybook application
Tags: webdev, storybook, tutorial
Published: 2023-02-21 10:47:22

Favicons, short for "favorite icons," are small images or icons that appear in the browser tab, bookmarks, and other areas of the browser UI. Adding a favicon to your Storybook application can help to:

- Improve branding and visual appeal: A well-designed favicon can help to reinforce your brand and make your Storybook application more visually appealing.

- Enhance user experience: Favicons can make it easier for users to find and recognize your Storybook application among multiple tabs or bookmarks, enhancing the user experience.

- Build trust and credibility: A favicon can also help build trust and credibility with your users by demonstrating attention to detail and a commitment to providing a professional and high-quality application.

Adding a favicon is a small but significant step that can help improve the user experience and make your Storybook application more memorable and distinctive.

So why not take this small but impactful step today and give your Storybook application that extra touch of visual appeal and professionalism?

---

To add a favicon for Storybook, follow these steps:

- **Create or obtain** a favicon file matching the [supported formats](https://en.wikipedia.org/wiki/Favicon#Image_file_format_support).

- **Place** the favicon file in the public folder of your Storybook project as defined in your [configuration](https://storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook-configuration).

- **Open** the *.storybook/manager-head.html* file in your project, or create it if it doesn't exist.

- **Add** the following code to the file to reference the favicon file:

```html
<link rel="shortcut icon" href="/favicon.ico">
```

- **Save** the file and restart your Storybook server. Your favicon should now be visible in the browser tab for your Storybook application.

**Warning**: The default Storybook favicon overrides the new one with Chrome by running the application locally.
Best Modular Kitchen Manufacturer in Lucknow | Sanitary Ware Dealers
Published: 2023-02-21 10:35:04


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

We at Naresh Traders pride ourselves on providing our customers with the best modular kitchen experience in Lucknow. With a wide selection of materials, styles, and finishes, our modular kitchen designs are the perfect option for anyone looking to add a touch of modern sophistication to their kitchen space. Our experienced kitchen design professionals will work with you to create a custom kitchen that perfectly fits your needs and budget. We will guide you through the entire process, from design and materials to installation.

[Best Modular Kitchen Manufacturer in Lucknow](https://nareshtraders.com/)
C++ Izoh.
Tags: tutorial, programming, beginners, cpp
Published: 2023-02-21 10:24:59

Assalamu aleykum hurmatli dasturchi bugun C++ dastrulash tilida izoh qoldirish haqida gaplashib olamiz! Boshlashdan oldin biz nima uchun Izoh dan foydalanishimiz kerak ekanligini bilib olishimiz zarur hisoblanadi. Shuni esda saqlab qoling. Izoh lar ochiq va yopiq turga bo'linadi!

C++ dasturlash tilida `"//"` belgidan so'ng izoh yoziladi. Bu belgi faqat bir qatorli izoh uchun amal qiladi. Bir nechta qator uchun qo'llashingiz mumkin. Buning uchun `"//"` ni har bir qatorda qo'lashingiz zarur bo'ladi.

**Misol uchun::**

```
// Bu izoh uchun yozildi.
// Ikkinchi qator izoh uchun yozilda.
cout << "Hello World";
```

C++ dasturlash tilida operator oxirida ham izoh sifatida yozib ketsak bo'ladi.

**Misol uchun::**

```
cout << "Salom Dunyo"; // Bu izoh (Chiqarish operatori)
```

C++ dasturlash tilida ko'p qatorli izoh.

`Ko'p qatorli sharhlar bilan boshlanadi /* va tugaydi */.`

Yozilgan kod o'rtasida /* bo'lgan barcha matn yoki operatorlar */ e'tiborsiz qoldirladi.

**Misol uchun::**

```
/* Bu izoh uchun yozilgan bo'lib
bir nechta qator uchun amal qiladi*/
cout << "Izoh qoldirishni o'rgandik";
```

`Ochiq Izoh` - Bu foydalanuvchiga ko'rinib turadigon izohlar sirasiga kiradi.Masalan Tizimga kirish vaqtida sizning login parolingizni to'gri yoki notug'ri ekanligini bildiruvchi xabarni misol keltirishimiz mumkin!

`Yopiq Izoh` - Bu dasturchilar o'rtasida qayta tushuntirish uchun hojat qolmasligi uchun dastur qismiga sharx sifatida qoldiriladigon izohlar hisoblanadi!

Izoh o'zi nima uchun qo'llaniladi?

1. Izoh C++ dasturlash tilini kodini tushuntirish uchun qo'llash mumkin!
2. Kodni o'qilishi uchun sharxlardan foydalanish mumkin.
3. Jamoa bo'lib ishlagan vaqtda kodingizni qayta jamoangizga tushuntirish zarur emas! chunki izoh qoldirib bir yo'la yozgan kodingizni tushuntirhis imkoniyatiga ega bo'lasiz!

Odatda, biz `//` qisqa ya'ni bir qatorli sharh uchun va `/* */` bir yoki bir nechta qatorli sharhlar uchun foydalanamiz.
7 ways to convert a String to Number in JavaScript
Published: 2023-02-21 10:15:18

**1. Using parseInt()**
parseInt() parses a string and returns a whole number. Spaces are allowed. Only the first number is returned.
This method has a limitation though. If you parse the decimal number, it will be rounded off to the nearest integer value and that value is converted to string. One might need to use parseFloat() method for literal conversion.
```
myString = '129' 
console.log(parseInt(myString)) // expected result: 129
a = 12.22
console.log(parseInt(a)) // expected result: 12
```
**2. Using Number()**
Number() can be used to convert JavaScript variables to numbers. We can use it to convert the string too number.
If the value cannot be converted to a number, NaN is returned.
```
Number("10");          // returns 10
Number(" 10  ");       // returns 10
Number("10.33");       // returns 10.33
```
**3. Using Unary Operator (+)**
The unary plus operator (+) precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already.
```
const x = 25;
const y = -25;
console.log(+x); // expected output: 25
console.log(+y); // expected output: -25
console.log(+''); // expected output: 0
```
**4. Using parseFloat()**
parseFloat() parses a string and returns a number. Spaces are allowed. Only the first number is returned.
```
parseFloat("10");        // returns 10
parseFloat("10.33");     // returns 10.33
parseFloat("10 20 30");  // returns 10
parseFloat("10 years");  // returns 10
parseFloat("years 10");  // returns NaN
```
**5. Using Math.floor()**
The Math.floor() function returns the largest integer less than or equal to a given number. This can be little tricky with decimal numbers since it will return the value of the nearest integer as Number.
```
str = '1222'
console.log(Math.floor(str)) // returns 1222
a = 12.22
Math.floor(a) // expected result: 12
```
**6. Multiply with number**
Multiplying the string value with the 1 which won’t change the value and also it will be converted to number by default.
```
str = '2344'
console.log(str * 1) // expected result: 2344
```
**7. Double tilde (~~) Operator**
We can use the double tilde operator to convert the string to number.

```
str = '1234'
console.log(~~str) // expected result: 1234
negStr = '-234'
console.log(~~negStr) // expected result: -234
```
Create a Windows Service from the Command Line
Tags: terminal, windows, service, commandline
Published: 2023-02-21 10:15:00

During my day-to-day job we create a lot of Windows Services, based on the .NET Worker Service. These need to be installed on server systems. Instead of installing them manually I use the following PowerShell script. 

You just need to fill in the variables for `$serviceName`, `$executablePath`, `$userName`, `$password` and `$description`.

```powershell
$serviceName = "My_Service_Name"
$executablePath = "C:\temp\Path_to_my_service.exe"
$userName = "My_User_Name"
$password = "My_Password"
$description = "My service description"

sc.exe stop $serviceName
sc.exe delete $serviceName
sc.exe create $serviceName binpath= $executablePath start= delyed-auto obj= $userName password= $password
sc.exe description $serviceName $description
```

**Note:** Please note that there are spaces between the sc.exe parameters equal sign and their values. This is on purpose.
basename prop in Reactjs
Tags: react, javascript, opensource
Published: 2023-02-21 10:13:19

The basename prop is used to provide a base URL path for all the locations in the application. For example, if you want to render your application at the /admin path instead of rendering at the root path /, then specify the basename prop in <BrowserRouter>:

<BrowserRouter basename="/admin">    <App /></BrowerRouter>
The basename prop now adds the base URL path /admin to the application. When you navigate using <Link> and <NavLink>, the basename path is added to the URL. For example, consider the following code with two <Link> components:

```
<BrowserRouter basename="/admin">   
 <div className="component">      
  <nav>         
      <Link to="/">Home</Link>  
      <Link to="/dashboard">Dashboard</Link>  
  </nav>   
 </div>
</BrowserRouter>
```
Install Pfetch on Termux
Tags: termux
Published: 2023-02-21 10:09:34

**Pfetch is** system information tool written in POSIX sh (from: https://github.com/dylanaraps/pfetch)

**How to Install**
1.Install Git
```bash
apt install git
```

2.Clone **pfetch** repositories
```bash
git clone https://github.com/dylanaraps/pfetch.git
```

3.Make pfetch script executable
```bash
install pfetch/pfetch $PREFIX/bin/
```

4.Executed!
```bash
pfetch
```

**What about _neofetch_, _screenfetch_, ...?**
I think you might already know, so I just want to share the other that familiar in desktop user for showing their beautify desktop.