teleren/devto huggingface dataset:
Learn the SVG linear gradient axes
Tags: svg, gradient, pen, javascript
Published: 2023-11-08 20:32:39

This week, I found myself struggling to understand the meaning of the various properties that define the gradient direction of a linear gradient in SVG. There are four axes that affect the direction of the gradient: x1, x2, y1, and y2. While a balanced gradient may be simple, creating an oblique gradient may be a more complex task.

Today, I want to share a unique experiment I've created on CodePen that allows you to define the axes of an SVG linear gradient (x1, x2, y1, y2) in real-time. Not only can you experiment with these axis values, but you can also see the changes reflected instantly in the interface, making it a powerful tool for web designers and developers.
{% codepen https://codepen.io/witty_code/pen/BaMWaBB %}

**Getting Started**:

1. **Pick Your Colors**: Choose the two colors you want to see in the gradient. You will be able to see the changes reflected in real-time in the interface.

2. **Interactive Controls**: These interactive controls allow you to adjust the values of the axes: x1, x2, y1, and y2. The updated data appears above the input fields and is reflected in real time in the form of SVG in the interface.

3. **Visual Aid**: In addition to the real-time updates, a red line within the gradient provides a visual representation of the gradient's direction, making it easier to grasp how your adjustments impact the final result.

4. **Copy the result** the text field below the SVG element contains the full SVG code with your changes, you can now copy it to your project or explore the changes in the code that composes the SVG element

**Use Cases**:

This experiment has numerous practical applications for web development:

- Creating visually appealing backgrounds with custom linear gradients.
- Fine-tuning the direction of gradients to match your design's aesthetics.
- Learning and teaching about SVG linear gradients interactively.

If you have any questions or ideas for improvement, please don't hesitate to reach out.
TOP - Objects and Object Constructors
Tags: javascript, top, hdtop
Published: 2023-11-08 20:20:51

[TOP](https://www.theodinproject.com/lessons/node-path-javascript-objects-and-object-constructors)

## Introduction
There are multiple ways to **define objects** but in most cases, it is best to use the **object literal** syntax as follows:

```
const myObject = {
  property: 'Value!',
  otherProperty: 77,
  "obnoxious property": function() {
    // do stuff!
  }
};
```

There are also **2 ways to get information** out of an **object**:

1. **dot** notation `myObject.property; // 'Value!'`
2. square **bracket** notation `myObject["obnoxious property"]; // [Function]`

Which method you use will depend on context. Dot notation is cleaner and is usually preferred

you cannot use variables in dot notation:

```
const variable = 'property';

myObject.variable; // this gives us 'undefined' because it's looking for a property named 'variable' in our object

myObject[variable]; // this is equivalent to myObject['property'] and
```

## Lesson overview
This section contains a general overview of topics that you will learn in this lesson.

- How to write an object constructor and instantiate the object.
- Describe what a prototype is and how it can be used.
- Explain prototypal inheritance.
- Understand the basic do’s and don’t’s of prototypal inheritance.
- Explain what `Object.create` does.
- Explain what the `this` keyword is.

## Object constructors
  
When you have a specific type of object that you need to duplicate like our player or inventory items, **a better way to create them is using an object constructor**, which is a **function** that looks like this:

```
function Player(name, marker) {
  this.name = name;
  this.marker = marker;
}
```
and which you **use by calling the function** with the keyword `new.`

```
const player = new Player('steve', 'X');
console.log(player.name); // 'steve'
```
Just like with objects created using the Object Literal method, you can **add functions to the object**:

```
function Player(name, marker) {
  this.name = name;
  this.marker = marker;
  this.sayName = function() {
    console.log(name)
  };
}

const player1 = new Player('steve', 'X');
const player2 = new Player('also steve', 'O');
player1.sayName(); // logs 'steve'
player2.sayName(); // logs 'also steve'

```

## Exercise

- Write a constructor for making “Book” objects
- Your book objects should have the book's **title**, **author** and number of **pages**, and whether or not you have **read** the book
- Put a function into the constructor that can report the book info like so:

```
theHobbit.info(); // "The Hobbit by J.R.R. Tolkien, 295 pages, not read yet"

```
{% codepen https://codepen.io/hdcodesdev/pen/rNPyqve %}

## The prototype
AWS TO XAMPP
Published: 2023-11-08 20:11:17

Hello  All,

Hope everyone is doing good.

I have a website hosted in AWS EC2, I want to run the same in XAMPP so that i can make changes to the source code. I have the files downloaded to my pc.Please can someone give me step by step instructions on how to this. Note that it is a PHP Laravel Project.

Thank You.
Testing the package live before publish with npm link
Published: 2023-11-08 20:09:49


Regarding the challenges I have been engaged in for a long time, one of them was live testing of packages before deploying them to the npm environment. Since the projects were heavy and numerous, using Monorepo was not a viable option.
I decided to use the npm link, but there was a problem. With every change, I had to rebuild (because if I wanted to apply live changes to the packages, I would get an "invalid hook" error) and this drained my energy. Eventually, I found a solution.

## What is npm link?

It is a command in npm that allows you to temporarily link your software packages to other projects. By using this command, you can observe the changes made to a package in other projects that are linked to it without the need to publish and reinstall the package every time.
In other words, with npm link, you can use a package you are currently developing as a linked package in another project, and the changes you make will immediately be visible in the relevant projects. This is very useful when you need to work on multiple projects simultaneously that require the use of a common package.

## Prerequisites and Configurations:

To test a package with npm link, you need to consider two points:
First, the package should not be installed in the project.
Secondly, you need to modify this part of the package's package.json as follows:

before:

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

after:


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

If you look carefully, you will see that instead of ./dist/packageName.es.js, this is ./src/index.jsx.
In this way, we are trying to make them understand that our criterion is index file changes, not build changes

packageName means the name of the local package

Third, in the vite.config of the main project, tell it to use the project's own React, not the React package, with this code.


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

`import path from "path"`
`resolve: {
    alias: {
      react: path.resolve(__dirname, "./node_modules/react"),
    },
  },
`
I use Vit, if you use Webpack, you must define the React path from the node module.

## how to use

Execute this command in the package

`npm link`

Run the following command in the project

`npm link packageName`

packageName means the name of the local package
Now, any changes you make will be applied live without the need to run a command

When the test is finished, link the package from the project and you can use the published version after publication.

`npm unlink packageName`
Easy Testing in Python with pytest
Published: 2023-11-08 19:49:53

Hi friends in code!

I've been tinkering with testing in Python using a super handy tool called pytest. It’s a straightforward way to check that your code is doing its job correctly. I want to share my journey, and perhaps you'll get the testing bug too (the good kind)!

## Why pytest?

For my project, pytest turned out to be a no-brainer. It’s user-friendly for both new and seasoned coders and packs a punch in utility. You can learn more about pytest and what it can do for you by visiting [pytest's documentation](https://docs.pytest.org/en/stable/).

## Setting Up the Scene

Getting pytest up and running was like prepping a new gadget — do it once, and you reap the benefits every time thereafter. Here's what I did:

1. **Installation**: I added pytest to my virtual environment using `pip install pytest`.

2. **Organizing Tests**: All my test files found their home in a `tests` directory, neatly packaged and easy for pytest to recognize.

3. **Writing Tests**: Crafted each test with the attention it deserves, ensuring they interrogate my code in all the cunning ways I could muster.

4. **Running the Show**: A simple `pytest` command in my terminal and voila, it's showtime for testing!


## Learnings and Surprises

### The Lightbulb Moments

Setting up test "fixtures" felt like unlocking a new level in a game. It prepared my test environment in a snap.

### The Bug Hunt

Yes, I encountered bugs — sneaky ones that played hide and seek with file names and logic. But catching them was oddly satisfying.

### The True Value of Testing

I used to push testing aside, but not anymore. It's an investment in the sanity of your future self and the clarity for anyone who picks up your code.

## Contributing to the Garden

I also updated the `CONTRIBUTING.md` in my project repository with instructions on how to use pytest for any new contributors. It’s a small step towards collective code quality and helps maintainers understand how to run and write tests, ensuring everyone’s on the same page.

## In Conclusion

Imagine pytest as a compass for your coding journey. It points you in the right direction and ensures you don't lose your way. If you haven't begun testing, now's a great time to start. It's not just about finding bugs; it’s about creating a map for others to follow in your footsteps with confidence. 

Take the plunge, start with pytest, and you might just find it’s a key part of your development toolkit.

Happy coding!
If you want to use ChatGPT — GPT-4 Classic version here how to use
Tags: chatgpt, gpt4, gpt, openai
Published: 2023-11-08 19:49:09

https://chat.openai.com/gpts/discovery

https://chat.openai.com/g/g-YyyyMT9XH-chatgpt-classic


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ve3cgu808djx5bc06v16.png)
apache-nifi-ms-sql-and-kerberos-authentication with active directory account
Tags: nifi
Published: 2023-11-08 19:48:35

apache-nifi-ms-sql-and-kerberos-authentication

Anyone successfully configured sql server kerberos authentication from NIFI?
I tried Nathan Baldie and other posts I found googling, but none of them work. 
Any pointers or inputs greatly appreciated.
Below is my error message from my controller service:
Failed to establish Database Connection: java.sql.SQLException: Cannot create PoolableConnectionFactory (The TCP/IP connection to the host servername=<my sql server>, port <my port> has failed. Error: "null. Verify the connection properties. Make sure that an instance of SQL Server is running on the host and accepting TCP/IP connections at the port. Make sure that TCP connections to the port are not blocked by a firewall.".)


Below are some articles I followed and I tried without any success.

https://nathanlabadie.com/apache-nifi-ms-sql-and-kerberos-authentication/
https://www.exabeam.com/information-security/apache-nifi-sql-server-and-kerberos-authentication/
GSoC 2023 : A Tale of Passion❤️‍🔥, Perseverance😣, and Personal Growth🚀🚀
Published: 2023-11-08 19:46:11

Hi, I am Abhishek Tiwari, an engineering guy👨‍💻 from India. Everyone has its own journey and yes I have mine, I started open-source contribution in October 2022, ya you are right! with HactoberFest ( for that cool t-shirt 👕), and meanwhile also HackSquad hackathon with my team we merged around 100+ PRs!!. 
And this is the start of journey, after that I contributed to Mozilla Firefox ( 22+ PRs and even 2 Bugs!😎 ) and some other well known projects. During this I came to know about GSoC, GSoD, SoB and so many other programs. But I coosen GSoC.

Thinking Why? Let's Discuss

# **What is GSoC**
GSoC is an annual program by Google that requires you to dedicate your complete summer to work on a coding project ( Non - Coding projects are also there )under an organisation. At that time, the most exciting thing about GSoC for me was getting a stipend (but the real treasure is the work experience)
```
Know more about stipend [here](/)
For India it is 3000$ for large project and 1500$ for small and medium
```

# **
Fass Sauna
Published: 2023-11-08 19:43:56

Eine Fasssauna als Bausatz ist zweifellos eine stilvolle und faszinierende Option, um Ihrem Garten, Ihrem Grundstück oder Ihrem Ferienhaus eine einzigartige Atmosphäre und eine entspannende Wellness-Oase hinzuzufügen. In diesem Artikel werden wir die verschiedenen Aspekte und Vorteile einer Fasssauna als Bausatz genauer betrachten und warum sie eine so attraktive Option für Saunaliebhaber und Naturliebhaber darstellt.

1. Natürliches und rustikales Erscheinungsbild:
Eine Fasssauna als Bausatz verleiht Ihrem Außenbereich ein rustikales und natürliches Erscheinungsbild. Das runde Design des Fasses fügt sich harmonisch in die Umgebung ein und vermittelt den Eindruck, als ob die Sauna schon immer dort gestanden hätte. Dieses ästhetische Merkmal macht sie besonders ansprechend für diejenigen, die die natürliche Schönheit ihres Grundstücks bewahren möchten.

2. Einfache Montage:
Der Bausatzansatz macht die Installation einer Fasssauna im Vergleich zu maßgefertigten Saunen wesentlich einfacher. Die Bausätze werden in der Regel mit detaillierten Anleitungen geliefert und erfordern keine fortgeschrittenen handwerklichen Fähigkeiten. Mit ein wenig handwerklichem Geschick können Sie Ihre Sauna in kürzester Zeit einsatzbereit haben.

3. Anpassungsfähigkeit:
Fasssaunen als Bausatz sind in verschiedenen Größen und Konfigurationen erhältlich. Sie können die Größe und Ausstattung Ihrer Sauna nach Ihren individuellen Bedürfnissen und Ihrem verfügbaren Platz anpassen. Dies ermöglicht es Ihnen, eine Sauna zu gestalten, die perfekt zu Ihrem [Fass Sauna](https://delmare-wellness.de/produkt/fass-sauna/) passt.

4. Umweltfreundlich:
Fasssaunen sind oft umweltfreundlicher als herkömmliche Saunen, da sie weniger Energie verbrauchen, um auf die gewünschte Temperatur zu kommen. Das Holz, aus dem die Fasssaunen hergestellt werden, ist ein nachwachsender Rohstoff, der zu einer positiven Ökobilanz beiträgt.
BEST METHOD TO CONNECT TO AWS EC2 INSTANCE
Tags: aws, community
Published: 2023-11-08 19:42:24


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

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

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

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

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

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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swp03hey39aqgzixxhe2.png)
Next JS might be exposing your backend environment variables
Tags: webdev, nextjs, javascript, env
Published: 2023-11-08 19:37:17

I recently got embarrassed by next.js at work when some API keys were found on the client-side browser cache. Even though these variables were used on the backend side, they were being exposed and it was quite confusing to me. I later did extensive research and discovered a rule of thumb to use in future to avoid such a scenario in future. I wrote this post to help you avoid such a scenario and to share the rule I came up with. 

## The problem

Apparently, it is not a good idea to share variables between the client and server. This was the root problem for me. Here's an example of what I did.

I had a backend file called say `utils.ts` which was getting values from the `.env` as below:

```javascript
const environment = {
    someApiURL: `${process.env.SOME_API_URL}`,
    someClientKey: "someClientValue"
};

export default environment;
```

Then on the client, we use the `someClientValue` as below:

```javascript
import environment from "@/utils.ts"

export default function App(){
    const [state,setState] = useState(environment.someClientKey)

    return <div>{state}</div>
}
```

In the examples above, the client build will also include the `someApiURL` and even expose its value from the `.env` to the client. To confirm this, we can open the browser dev tools, go to sources tab and into `_next/static/pages/chunks/thepageyourcurrentlyin` and try to search the `someApiURL`. You will find the `.env` value exposed.

## Fix

The fix is as simple as to not mix server variables with client variables. Except that more often than not, you will not be keen enough. For me, I came up with a rule of thumb to separate frontend and backend utility and config functions to different folders so I'm always sure.

This might not seem as a common or significant issue until you expose your company's credentials to potential hackers.

Hope this helps someone.
Tree Shaking in JavaScript: Boost Web Performance
Tags: javascript, programming, react, learning
Published: 2023-11-08 19:15:09

Exciting News! 🌟 Just published my latest article on Medium, titled "**Tree Shaking in JavaScript Applications: Boosting Performance with Dead-Code Elimination.**" 🚀 Dive into the world of web optimization and discover how tree shaking can transform your JavaScript applications.


💻 Explore the article here: [https://kartikbudhraja.medium.com/tree-shaking-in-javascript-applications-boosting-performance-with-dead-code-elimination-35c44eb94e2d](https://kartikbudhraja.medium.com/tree-shaking-in-javascript-applications-boosting-performance-with-dead-code-elimination-35c44eb94e2d)


I hope this article has provided you with valuable insights into the world of tree shaking and its applications in JavaScript development. If you found this information helpful, please consider sharing it with your network. Stay updated with more insightful content by following me on [LinkedIn](https://www.linkedin.com/in/kartikbudhraja/).
Top 10 Most Secure Linux Distros
Tags: linux, cloud, devops, beginners
Published: 2023-11-08 18:58:16

The type of Linux distribution you choose is important. It's like the foundation of your computer use, managing how everything in your computer works together. If it doesn't have good security, your computer could be at risk. But don't worry, there are many Linux options available. You can pick one that fits your security needs best. 

## 1. Qubes OS

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

## 2. Tails

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

## 3. Parrot Security OS


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



## 4. Kali Linux


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


## 5. Whonix


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


## 6. Linux Kodachi


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


## 7. BlackArch Linux


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


## 8. Heads OS


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


## 9. PureOS


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


## 10. Alpine Linux


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


---



✔ [Join our Channel on WhatsApp](https://short.firstfinger.in/whatsapp-invite) for more like this.
Day 84: Location
Tags: webdev, frontend, 100daysofcode, html
Published: 2023-11-08 18:46:16


### What is the Web Location API?

The Web Location API is a browser-based interface that allows web applications to access a user's geographical location. It provides a standardized way for developers to retrieve this information, with the user's consent, of course, to respect their privacy.

### Getting Started 
To begin using the Web Location API, you need to request permission from the user to access their location. 

```javascript
if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const latitude = position.coords.latitude;
      const longitude = position.coords.longitude;
      console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
      // Your code to utilize the location data goes here
    },
    (error) => {
      console.error(`Error getting location: ${error.message}`);
    }
  );
} else {
  console.log("Geolocation is not supported.");
}
```

### Tips 

#### 1. Handling Errors Gracefully
Ensure your application has appropriate error handling in case users deny permission or if geolocation services are unavailable.

#### 2. Accuracy Considerations
Understand that location accuracy might vary based on the user's device and environment. Account for this in your application's logic.

#### 3. Privacy Concerns
Always prioritize user privacy. Ask for location access only when necessary, and inform users why their location is needed.

### Usage

#### 1. Location-Based Services
- **Mapping Applications**: Utilize geolocation to provide directions, locate nearby points of interest, or display the user's current position on a map.
- **Localized Content**: Offer location-specific content or services based on the user's whereabouts.

#### 2. E-commerce and Delivery
- **Store Locator**: Help users find nearby physical stores or branches.
- **Delivery Tracking**: Track deliveries and provide real-time updates to customers.

#### 3. Social and Networking Platforms
- **Check-Ins**: Enable users to check in at locations.
- **Geotagged Posts**: Allow users to attach location information to their posts.