teleren/devto huggingface dataset:
XML Based Setter Injection in Spring 6
Tags: spring, springboot, eclipse, setter
Published: 2023-07-05 13:05:44

For Detailed overview watch video

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


create project


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


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


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



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

Directory structure

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

```
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.test</groupId>
	<artifactId>Spring6Setter</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<properties>
		<maven.compiler.source>1.8</maven.compiler.source>
		<maven.compiler.target>1.8</maven.compiler.target>
	</properties>
	<dependencies>
		<!-- https://mvnrepository.com/artifact/org.springframework/spring-context -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>6.0.9</version>
		</dependency>

	</dependencies>
</project>
```




Student

```
package com.test;

public class Student {
	
	private Integer id;
	
	private String name;
	
	//constructor
	public Student() {
		super();
	}
	
	//getter and setter methods
	
	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	//generate toString
	
	@Override
	public String toString() {
		return "Student [id=" + id + ", name=" + name + "]";
	}
	
	
	
	
}

```



config.xml

```
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">

    <bean id="st" class="com.test.Student">
    	<property name="id" value="2"/>
    	<property name="name" value="jhon"/>
    </bean>

</beans>
```


Test

```
package com.test;

import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

public class Test {
	public static void main(String[] args) {
		
		ApplicationContext ctx = new ClassPathXmlApplicationContext("config.xml");
		
		
		//get the bean
		
		Student st = ctx.getBean("st",Student.class);
		
		//print the st 
		//it will internally call toString
		System.out.println(st);
		
		//lets run the app
		//press ctrl + f11
	}
}

```
Wednesday Links - Edition 2023-07-05
Tags: java, jvm, json, percentiles
Published: 2023-07-05 12:11:58

Gathering the streams (13 min)🌊
https://cr.openjdk.org/~vklang/Gatherers.html

How Datadog calculates percentiles (3 min)🐕
https://twitter.com/BdKozlovski/status/1675557351493890048

An Interesting Concurrency Bug (6 min)🧠
https://mizosoft.github.io/2023/06/22/an-interesting-concurrency-bug.html

Improving JSON parsing performance in opensearch-java (4 min)📄
https://opensearch.org/blog/opensource-perf

RestClient from Spring 6.1 (30 sec)🛏️
https://twitter.com/sdeleuze/status/1676156815824809985
Vuejs 3 Style Guide
Tags: vue, javascript, programming, frontend
Published: 2023-07-05 12:10:30

To be able to write a code in Vuejs 3 framework following the best practices and the standards provided, you should keep in mind this priority based rules:

A - Essential
B - Strongly Recommended
C - Recommended 
D - Use with caution

## Priority A Rules: Essential

- Use multi-word component names
- Use detailed prop definitions
- Use :key when using v-for in template
- Avoid v-if with v-for
- Use component-scoped styling

## Priority B Rules: Strongly Recommended

- Component files means each component should be in its own file
- Single-file component filename casing (always PascalCase or always kebab-case)
- Base component names should have a specific prefix, such as Base, App, or V
- Tightly coupled component names for child should use parent component name as a prefix
- Order of words in component names means that Component names should start with the highest-level (often most general) words and end with descriptive modifying words
- Self-closing components `<MyComponent/>` or 
`<my-component></my-component>`
- Component name casing in templates means component names should always be PascalCase in Single-File Components 
- Full-word component names
- Prop name casing
- Simple expressions in templates
- Simple computed properties
- Quoted attribute values
- Directive shorthands

## Priority C Rules: Recommended

- Empty lines in component/instance options if the options can no longer fit on your screen without scrolling
- Single-file component top-level element order `<script>`, `<template>`, and `<style>` tags consistently, with `<style>` last, because at least one of the other two is always necessary.

## Priority D Rules: Use with Caution

- Element selectors with scoped
- Implicit parent-child communication

Curious to know more about Vue Style guide, check this details documentation in the following link: https://vuejs.org/style-guide/
Procuro programador!!
Published: 2023-07-05 12:03:37

Boa tarde, procuro algum programador para fazer um seguinte código: 
Com dimensões e pontos dados, criar um mapa com esses pontos, plotar eles junto com o gráfico de corredores, que serão o caminho permitido.
Com isso feito, usar o algoritmo Astar e tps para achar a melhor rota entre os pontos que devem ser feitos de forma automática ao identificar o semelhante num arquivo json.
No final mostrar o mapa com os pontos e o caminho das rotas ponto a ponto com o melhor caminho entre elas.
A parte bruta do programa já está feita, faltam algumas coisas como só andar pelos caminhos permitidos e a automação dos semelhantes do json e da lista de pontos.
Wpp: +5521975759906
Mail: matheusfg99@gmail.com
copy/paste/cut on vim using ctrl+c/ctrl+shift+v/ctrl+x
Tags: vim
Published: 2023-07-05 11:48:47

```
" paste with ctrl + shift + v . because ctrl + v is for block mode. you can use <C-V> if you want ctrl + v , but then no block visual selection, which is useful 
nmap <C-S-V> "+gP
imap <C-S-V> <ESC><C-V>ia

" copy selection
vmap <C-C> "+y

" cut selection
vnoremap <C-X> "+ygvd

" Also for best experience you will need, to use this with mouse support.
set mouse=a
```
Power of E-commerce App Development for Business
Tags: ecommerceappdevelopment, onlineappdevelopmentcompany
Published: 2023-07-05 11:20:37

Offline stores can only operate with local customers, But in E-commerce, you can do business across the whole country that has no boundaries. These days people almost avoid roaming around the street instead of roaming on social media platforms. An E-commerce platform allows you to advertise on social media and reach your product and connect to a vast targeted audience.

In order to know about the buying ability of a customer, an online E-commerce App is considered for that and the store owner can customize everything, owners can add photos and videos and even offers and unique features also can visualize in the app so that the user feels better to use of your eCommerce App.

The stock fulfillment and the stock status can be always updated in the inventory of your eCommerce store App, You will be notified when the list is running low, And the customers also can know the limited products and they can be asked to place orders at least earliest are possible in Ecommerce App.

## Benefits of E-commerce App 

Broader Customer Base

Connect to Customers via Social Media

Inventory Synchronization

Cost planning

Target Audience

Control in The Owner’s Hand

Brand Visibility

E-commerce is a diversifying platform. A step-by-step process can make your app more efficient for handling various tasks. 

The pandemic has efficiently bought offline disabilities to all of us. In these times online business helps with better sales and every business owner moved on to an Ecommerce App development for their store, Because Ecommerce stores are more reliable and continue to serve the customers even in difficult times.

Fire Colours is a prominent [e-commerce business development company](https://firecolours.com/ecommerce-website-development-company) in the competitive world. We develop e-commerce Apps with updated technology and tools with talented developers, testers, and graphic designers in our team. In the end, we provide a well-performing e-commerce app with a high level of quality assurance to enable a bug-free Ecommerce platform as per your requirements. contact us for launching your eCommerce business.
Multi-Role System in Laravel
Tags: laravel, php, mysql
Published: 2023-07-05 11:20:36

In Laravel, you can implement a multi-role system by utilizing various built-in features and techniques. Here's a general approach to implementing a multi-role system using Laravel:

- Database Setup: Start by setting up your database tables. You'll need at least three tables: `users`, `roles`, and `role_user `(a pivot table to establish a many-to-many relationship between users and roles).

```php
users
- id
- name
- email
- password

roles
- id
- name

role_user
- role_id
- user_id
```

- Define Models and Relationships: Create the corresponding models for your tables and define the relationships between them.

```php
// User.php
public function roles()
{
    return $this->belongsToMany(Role::class, 'role_user');
}

public function hasRole($role)
{
    return $this->roles->contains('name', $role);
}

// Role.php
public function users()
{
    return $this->belongsToMany(User::class, 'role_user');
}
```

- Middleware: Create a middleware to check if a user has the required role to access specific routes or perform certain actions.

```php
// RoleMiddleware.php
public function handle($request, Closure $next, $role)
{
    if (!auth()->user()->hasRole($role)) {
        abort(403, 'Unauthorized');
    }

    return $next($request);
}
```

- Route Protection: Apply the middleware to the routes that require specific roles.

```php
// web.php
Route::group(['middleware' => ['auth', 'role:admin']], function () {
    // Routes accessible only to users with 'admin' role
});

Route::group(['middleware' => ['auth', 'role:editor']], function () {
    // Routes accessible only to users with 'editor' role
});
```

- User Registration and Role Assignment: When registering a user, assign a default role to them.

```php
// RegisterController.php
protected function create(array $data)
{
    $user = User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => Hash::make($data['password']),
    ]);

    $user->roles()->attach(Role::where('name', 'default')->first());

    return $user;
}
```

- Checking Roles in Views: You can also check a user's role in your views to conditionally show or hide content.

```php
// dashboard.blade.php
@role('admin')
    <!-- Show admin-specific content -->
@endrole

@role('editor')
    <!-- Show editor-specific content -->
@endrole
```

This is a basic outline of implementing a multi-role system in Laravel. You can further customize and extend it based on your specific requirements. Additionally, consider exploring Laravel's authorization policies and gates for more fine-grained control over user permissions.
Serve your website's static content from S3 through CloudFront.
Tags: aws, cloudcomputing, website, devops
Published: 2023-07-05 11:19:14

To reduce the traffic from your webserver, you can serve your static content from S3 by using CloudFront.

**Service Requirement:**

- S3
- CloudFront

**S3 bucket creation and configuration:**
Create a S3 bucket by providing a unique name and allowing the public access. Then go to the permission tab, edit the bucket policy, and allow the get object action. You can do it by using the policy generator tool.


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

Generate the policy and copy the policy. 

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

Now use this policy in your bucket policy. 


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

To mitigate the CORS error, you can allow Headers, Methods, Origins and Expose Headers. 


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

Now upload your content in this bucket. 


**CloudFront distribution create and configuration:** 

Select your S3 in the origin domain field and choose ssl certificate from the from the drop-down list if you have. Then create the distribution.   


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

**Assign rule in the load balancer:**

Finally, from the load balancer, redirect the static traffic to  CloudFront and rest of traffic to web server. 


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

**Wrap up**
In this blog, I try to show you how we can serve static content from S3 by using CloudFront. It will reduce your web server traffic, increase site performance, and reduce the cost.
CSS Only Accordion with animations
Tags: tailwindcss, css, webdev, html
Published: 2023-07-05 11:16:03

These days CSS has a lot of cool features and you can really do a lot without javascript!

I though we have all the parts for creating an animating accordion. So set off to do it, here's what i've come up with:

```html
<div class="bg-slate-700 text-white">
  <div>
    <details class="group peer">
      <summary class="flex cursor-pointer justify-between px-4 py-5">
        <h2 class="text-body-1">Title 1</h2>
        <svg class="inline-block h-6 w-6 transition-transform group-open:rotate-180" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
      </summary>
    </details>
    <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 peer-open:grid-rows-[1fr]">
      <ul class="overflow-hidden">
        <li class="px-4 py-2">Item 1</li>
        <li class="px-4 py-2">Item 2</li>
      </ul>
    </div>
  </div>
</div>
```

TL; DR; Play around with the code here:

https://play.tailwindcss.com/uUGBz7pYh9

Here's an explanation:

- First we have a wrapper `div`, we really only need this to group this together in our minds or when using with other things to have one group rather than two root elements.
- `<details>` component is a nice way to have an accordion without any javascript, but it lacks a way to animate the content.
 - we use the `group` class so that we can animate the icon
 - we use the `peer` class so that we can animate the content
 - we can't use the slot as it would only animate the open state, also couldn't even get that to work nicely hence we create a sibling.
- the sibling `<div>` uses the `grid-template-rows` to animate the height from `0` to `auto`, this alone is a **cool CSS trick**.
 - the first child has to have the overflow-hidden class as otherwise the 0fr will show the content.
- there is a few lines of custom css to hide the native arrow
Event Handlers in React
Tags: react, javascript
Published: 2023-07-05 10:55:17

Event handlers play a crucial role in making React applications interactive and responsive. They allow us to capture and respond to user actions, such as clicks, input changes, or keyboard events. While similar to JavaScript event listeners in concept, they differ in that event handlers in React are mainly focused on components rather than individual elements on the DOM, use different syntax, and can directly update component state using hooks like useState or by invoking methods on class components.

**What are event handlers?**
Event handlers in React are functions that are responsible for handling and responding to specific events triggered by user interactions or other actions within a React component. They allow developers to define custom behaviors or actions to be executed when an event occurs, such as a button click, input change, or keyboard press. 


```
import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

```

Above is an example of the event `onClick` , with the event handler function `handleClick`. When the button is clicked, the `handleClick` function is called, and it updates the count state, increasing it by 1. This in turn executes the setCount(count + 1) statement which updates the value of the count state variable by incrementing it. Because of this and the nature of React, the component is automatically re-rendered upon a change to the state, causing React to update the rendered output and display the updated value of count in the `<p>` element.
 

In conclusion, event handlers are essential in React for capturing user interactions and enabling interactivity in your applications. Whether it's handling button clicks, input changes, or keyboard events, event handlers provide a powerful mechanism for adding interactivity to React applications. By defining event handler functions and associating them with specific JSX elements or components, developers can control component behavior, update component state, or trigger other actions in response to user interactions. Because of the versatility and ease of use of event handlers, developers can easily create user interfaces that respond fluidly to user actions, enhancing the overall user experience.
Launching 1gpt 🤖
Tags: chatgpt, gpt3, tooling, ai
Published: 2023-07-05 10:11:44

>TLDR; 
>`1gpt` is an opensource github repo. 
>It has collection of latest useful `GPT, Ai, LLM tools`.
>Both Free & paid


visit - [https://bit.ly/1gpt](https://bit.ly/1gpt)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

![Ai tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4amconhc9ryhdjhupbo.png)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

## Good news - 

If you want to add your favourite tool, you just a PR away. Open it [here](https://github.com/parammittal16/1gpt/pulls).
And once your PR is merged it will reflect on the website.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


![contribution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ent0jwt8skhl2yc1tdn5.png)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


## Happy Contributing 🚩

And don't forget to star the repo ⭐️ and share with friends.

Cheers 🍺
procedural terrain v0.0 - it all started from here:
Tags: proceduralgeneration, opengl, cpp, gamedev
Published: 2023-07-05 10:09:19


OpenGL + C++
First experiments with procedural terrain generation using OpenGL and C++.
![Perlin noise perturbed grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45sqhijx8evdf9ucew67.png)
Form Validation in JavaScript | JavaScript Form Validation Tutorial
Tags: html, css, javascript
Published: 2023-07-05 10:07:55

Form Validation in JavaScript

hey everyone hope you all of fine, recently, I've made the project using JavaScript. It's basic project, but it's very helpful and beneficial for everyone who interested in HTML, CSS and JavaScript.

Today I'm going teach with you how to Add Form Validation in JavaScript for beginners, inside the project, you will learn how to use HTML and CSS to design that.

Once we designed the Form, then we are going to work with JavaScript to validate the input fields, email, password etc.

once you watch the complete tutorial, hope you will learn a lot new things from it. hope this tutorial is helpful and beneficial for  you. 

{% embed https://www.youtube.com/watch?v=RjtarcWFc6A %}
How to Make a Website With Login and Register | HTML CSS & JS
Tags: html, css, javascript, tutorial
Published: 2023-07-05 10:05:53

How to Make a Website With Login and Register | HTML CSS & JS

let's talk about how to make a website with login and register from using HTML CSS and JavaScript.

inside the website, you will able to learn how to display the login form and also we will learn how to use JavaScript to hide and display the modal.

Inside the modal, we will use login and signup from. So, hope this tutorial is helpful and beneficial for you.

{% embed https://www.youtube.com/watch?v=HfPLlQpkk-s %}
How to Add Context Path to a Spring Boot Application
Tags: webdev, beginners, springboot, tutorial
Published: 2023-07-05 09:51:12

---
title: How to Add Context Path to a Spring Boot Application
published: true
tags: Webdev, beginners, springboot, tutorial
canonical_url: https://stacktips.com/articles/add-context-path-to-a-spring-boot-application
---


{% youtube 7HqtH3L9erE %}

In this article, we will explore how to add a context path to your Spring Boot application. 

Let's dive right in!

First, let's understand what a context path is. 

In a Spring Boot application, the context path represents the base URL for accessing your application. By default, it's set to '/', 

For example, in the following code snippet

```dart
@RestController
@RequestMapping(value = "/products")
public class ProductController {

    @GetMapping
    public List<Product> getProducts() {
        return ResponseEntity.ok(productService.getProducts());
    }

    @GetMapping(value = "/{productId}")
    public Product getProduct(@PathVariable(value = "id") Long id) {        
	  //Your service logic goes here..
      return product;
    }
```

To test this locally, we need to hit 

```dart
http://localhost:8080/products
http://localhost:8080/products/{productId}
```

But sometimes, you might want to change the path to make it more meaningful or to avoid conflicts. 

To change the context path, you need to add the following property to your `application.properties` file.

```properties
server.servlet.context-path=/api/1.0
```

Alternatively, if you're using the application.yaml file, you can do this

```yaml
server:
   servlet:
     context-path: '/api/1.0'
```

Now with this, you run your application and you will be able to access the endpoints with a new URL

```dart
http://localhhost:8080/api/1.0/products
http://localhhost:8080/api/1.0/products/{productId}
```

I hope this helps! Let me know if you have any other questions in the comments below.