teleren/devto huggingface dataset:
Spring Beans 🫘& Context
Tags: spring, beans, basics
Published: 2023-05-28 12:40:05

## Bean
A java class which is maintained by the spring framework, it is called as `Bean` in spring. Its fundamental building block of spring framework.

## How spring knows which class maintain as Bean?
We can configures the beans using the annotations or XML configurations in spring. Based on configurations available spring container instantiates and assembles them to become bean in spring. IoC container help to maintain the lifecycle of the beans.

## Spring Context
Context is memory location of web application in which all the objects instantiated by the framework are present and managed by the context framework.
By default spring dose not know all the objects in the application, based on the configuration spring will instantiate & maintain the object during the initialization so all the information related to those object is available inside spring context.
> If object dose not available in spring context then spring dose not know about the object.

## SpEL - spring expression language
It is the expression language provided by the spring framework to perform the operations such as manipulating object graph like setting, getting property values, property assignments & method invocations etc.
We made an app where you can host Sports games
Tags: webdev, javascript, react, productivity
Published: 2023-05-28 12:35:50

Sportyfun is a platform that allows sports enthusiasts to easily connect and find a game of their favorite sports. The platform aims to make it easier for players to discover new venues, connect with other players, and organize games. This is a significant problem for sports lovers who often struggle to find suitable places to play or connect with like-minded individuals.

Sportyfun was founded by a team of passionate sports enthusiasts who have experienced the challenges of finding places to play and connect with other players. The team realized that there was a need for a platform that could bring players and facilities together in one place. With this in mind, we set out to build Sportyfun.

Soon we started by researching the market and identifying the key pain points that sports enthusiasts face. We then set out to build a platform that could address these pain points. The team decided to use a modern tech stack consisting of Next.js, Prisma, Typescript, and Tailwind to build the platform.

We started by building a simple MVP (Minimum Viable Product) that allowed users to create a profile, search for venues, and connect with other players. We then tested the MVP with a small group of users to gather feedback and iterate on the platform.

As the platform evolved, we added more features such as the ability to host or join games, book venues, and find teams/players for a game. We also added monetization options such as premium subscriptions, B2B contracts, ads, play2earn, bets, and private payable games for athletes.

To ensure that the platform provided a great user experience, the team focused on creating a simple and intuitive interface. We also made sure that the platform was fast and responsive, using the latest technologies to optimize performance.

One of the unique features of Sportyfun is the ability for users to create offline sports events and viral challenges videos for social media. This not only provides an additional way for users to connect and engage with each other but also helps to promote the platform to a wider audience.

As Sportyfun gears up for its launch in the US this summer, the team is excited to see how the platform will be received by sports enthusiasts. The platform has the potential to revolutionize the way that players connect and play, making it easier for anyone to find a game of their favorite sports.
TIL you can convert media file extensions with ffmpeg
Tags: ffmpeg, convert, file, extensions
Published: 2023-05-28 12:30:26

You can convert a video clips file extension using [ffmpeg](https://ffmpeg.org/) like this:

```bash
$ ffmpeg -i chill.mp4 chill.wav
$ ll
-rw-r--r--  1 hello  world  84317363 21 Jun  2022 chill.mp4
-rw-r--r--  1 hello  world  49074254 28 May 13:13 chill.wav
```

You can also play directly from the terminal (which opens in a new window)

```bash
$ ffplay chill.mp4
```


![Streaming a video file using ffplay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/je49ta4rsbetlrntma9b.png)


And probably the most useful I found, which is to convert a video clip to a `.gif` for PRs/MRs

```bash
ffmpeg -i in.mov -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > out.gif
```

> Notes on the arguments:
> * `-r 10` tells ffmpeg to reduce the frame rate from 25 fps to 10
> * `-s 600x400` tells ffmpeg the max-width and max-height
> * `--delay=3` tells gifsicle to delay 30ms between each gif
> * `--optimize=3` requests that gifsicle use the slowest/most file-size optimization 

(full credits for this one go to this [README.md](https://gist.github.com/dergachev/4627207#instructions))
Flexbox "justify-content" visual representation🔥
Tags: webdev, beginners, tutorial, css
Published: 2023-05-28 12:22:52

Checkout this beautiful CSS flexbox `justify-content` visual representation by [Mads Brodt](https://www.linkedin.com/feed/update/urn:li:activity:7055894596777598976?utm_source=share&utm_medium=member_desktop)🤯

![Justify Content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkqcitarup5rvwibk8i7.jpg)

In case you have missed my CSS Flexbox illustration, click [here](https://dev.to/arafat4693/the-only-css-flexbox-illustration-you-will-ever-need-4nnf)

Do Like ❤️ & Share your feedback 🙌

**Visit**:
👨‍💻[My Portfolio](https://portfolio-khaki-iota-89.vercel.app/)
🏞️[My Fiverr](https://www.fiverr.com/sunnyislam990)
🌉[My Github](https://github.com/arafat4693)
🧙‍♂️[My LinkedIn](https://www.linkedin.com/in/arafat-freelancer)

Thanks for your support 💯
R and Python: A Tale of Two Data Science Languages.
Published: 2023-05-28 12:18:01

R and Python have been a point of contention for a while now in the field of data research. Although each language has its advantages and disadvantages, it is now possible to carry out the same duties in each of them, therefore their distinctions are becoming less polarized. In fact, depending on the work at hand, many data scientists utilize both languages interchangeably.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgp23qqevo0lw1wfawqd.png)
The vast library of statistical packages and functions available in R is one of the key justifications for using it. NumPy, Pandas, and Scikit-learn are just a few of the sophisticated data science libraries that Python has produced, and they all offer features that are comparable to those of R. Python also has the benefit of being a general-purpose programming language, which makes it more adaptable than R.

R’s excellent data visualization features are yet another justification for using it. However, Python has also created potent visualization libraries that can generate high-quality visuals, such Matplotlib, Seaborn, and Plotly.

The requirement to switch back and forth between the two languages is one of the major difficulties. The gap between R and Python can now be filled, nevertheless, with the aid of tools. A flexible and user-friendly program like scDIOR, for instance, quickly and successfully accomplishes single-cell data translation between R and Python . Additionally, reticulate enables users to call R functions from within Python, while libraries for Python like rpy2 enable users to call R functions from within Python.

The decision between R and Python ultimately comes down to the particular requirements of the project and the data scientist’s preferences. Both languages have advantages and disadvantages, therefore choosing one should be dependent on the project’s particular requirements. Both of these languages are widely utilized in the data science community, therefore knowing both of them is a benefit.

In conclusion, as both programming languages advance, the dispute between R and Python in data science is becoming less important. Despite the fact that there are still differences between the two, there are now tools that can help close the gap. R or Python should ultimately be chosen depending on the project’s unique requirements and the data scientist’s own preferences.
ChatGPT-4 vs Bard: What Are the Differences for PostgreSQL Developers?
Tags: postgres, postgressql, chatgpt, dbforge
Published: 2023-05-28 12:16:33

In the rapidly evolving world of artificial intelligence, it is essential for PostgreSQL developers to choose the perfect AI tool that will solve their queries with the utmost professionalism.

The article focuses on comparing ChatGPT-4 and Google Bard answers to a number of common questions related to SQL development - https://blog.devart.com/chatgpt-vs-bard-for-postgresql-developers.html

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kgsxgnfwozlzyr6g8n5.jpg)
Linting Proto Files With Buf
Tags: protobuf, linting, buf, tooling
Published: 2023-05-28 11:53:53

Recently, I had the chance to work on the proto files for one of my projects to define the contract for a service. Since this was a brand-new service, I had to set it up from scratch and learned how to write and format the proto files using best practices.

> What is proto? read more about protocol bufferes

There are different tools available for linting the proto files some of them are

1. protoc-gen-lint
2. prototool
3. buf - we have used the buf as a proto linter. Follow this for installation of buf.

## What is buf?
The buf CLI is a tool for working with Protocol Buffers. It has a variety of supported functions such as lint, breaking changes detection, formatter, etc.

## Format your protos
To improve readability and have standard formatting enabled across teams, buf provides the auto-formatting on proto files. This enables the files to be formatted correctly and with following the standards.

Use the following command to format your files.

```
buf format
```
This will produce any violations in formatting to the console.

To auto-format the files **in-place** with the difference in file changes, use the below command.

```
buf format -w --diff
```
## Detect code style checks
**Linter **- A static code analysis used to flag programming errors, bugs, stylistic errors, and suspicious constructs.

For proto files, it’s no different, to verify the new changes adhere to proto standards use the **buf linter**.

```
buf lint /path/to/proto/files/
```
This will produce any errors, warning to console if there are any violations in writing proto files. You can analyze and update the protofiles according to standard rules.

## Automatically lint with GitLab CI pipeline
Whenever there is a change in your repository, your CI pipeline will automatically run `buf lint` to check for any violations.

To check add the below code snippet to the `.gitlab-ci.yml`

```
stages:
  - lint

lint:
  stage: lint
  image: 
    name: bufbuild/buf:1.7.0
    entrypoint: [""]
  script:
    - buf lint

```
## buf configuration rules
buf supports three categories of rule configurations.

1. `MINIMAL`
2. `BASIC`
3. `DEFAULT`
By default, buf has `DEFAULT` linting configuration which has below details.

```
version: v1
lint:
  use:
    - DEFAULT
breaking:
  use:
    - FILE

```
Use `buf mod init` to generate `DEFAUTL` configuration rules for your project.

You can update this file with different rules as per the requirements.

```
 version: v1
 lint:
   use:
     - DEFAULT
   except:
     - PACKAGE_VERSION_SUFFIX
     - FIELD_LOWER_SNAKE_CASE
     - SERVICE_SUFFIX
   ignore:
     - google/type/datetime.proto
 breaking:
   use:
     - FILE

```
Hope this article gave understanding of how to use `buf` tool for formatting, linting your proto files. 
Happy learning!
Spring Inversion of Control & Dependency Injection 💉
Tags: spring, designpatterns, programming
Published: 2023-05-28 11:39:59

## Issue with traditional object handling

Traditionally, Objects are responsible for creating, maintaining objects they depends on. However creating the dependent objects incurs the coupling with other objects. More the objects it depends on more the coupling. This also leads to low flexibility, code duplicity, complexity in testing.
To overcome these issue and let the developer focus on individual component & let the framework handle the dependency IoC principle is introduced.

> IoC: stands for "Inversion of Control". Its a design principle irrespective of language.

## IoC to rescue
IoC, inversion of control dose not creates objects but specifies how the objects are being created. The control flow of the program is inverted using the principle, instead of programmer handling the control flow of program, external entity framework/entity controls the flow of the program.

The responsibility of object creation and management is inverted to an external entity knows as "IOC container" which is responsible for creating, managing, configuring objects & their dependencies.

## DI - Dependency Injection

Dependency injection is a pattern implemented on IoC principle to create loosely coupled objects, modularity & simplified application development.
DI framework manages object lifecycle, resolved dependencies, provides flexible & configurable environment for application development.
Spring framework utilizes the Dependency injection to control the flow of the program with help of configurations.

## Solves?
* Loosely coupled components
* Greater code flexibility & configurability
* Easier testing the individual components
* Dependency management between objects
* Separation of concerns

IoC and DI provide a range of advantages, these benefits result in the creation of cleaner and more maintainable codebases, empowering developers to construct applications that are robust, scalable, and easily maintainable.
How to access URL params in incoming request (Nextjs 13.4 Route handlers)
Tags: nextjs, api
Published: 2023-05-28 11:07:49

Let's see how we can have access to search (or query) params in incoming request in NextJS 13 `app` directory.

## The scenario
We are making an internal fetch api call to `http://localhost:3000/api/posts`. We are also trying to pass some query params like `http://localhost:3000/api/posts?skip=2&take=4` for pagination. If we have posts `[1, 2, 3, 4, 5, 6, 7, 8, 9]`, we want to skip `[1, 2]` and take `[3, 4, 5, 6]` only. The client code will look something like this:

```ts
const response = await fetch('http://localhost:3000/api/posts?skip=2&take=3')
```

> In other frameworks, we could simply do something like `req.query`.

## The problem
The problem was actually in the route handler part (solution is pretty easy). Here's the problem: 

```ts
// app/api/posts/route.ts
import { NextRequest } from 'next/server';
export async function GET(req : NextRequest) {
     // Property 'query' does not exist on type 'NextRequest'
     const params = req.query 
```
Here we could not access the `skip` and `take` part in our request url.

## The solution
We just have to convert the `req.url` which is a string, into a url object using `new URL()` with `req.url` as the input. Then we can easily access any part of url params like this:

```ts
export async function GET(req : NextRequest) {

  const url = new URL(req.url)

  const skip = url.searchParams.get("skip")
  const take = url.searchParams.get("take")


```
And there we have our search params. The typescript type is `string | undefined`.
Found solution for UVC Quanta 0408:4033 camera PROBLEM Ubuntu 23
Tags: ubuntu
Published: 2023-05-28 11:02:08

**_Found  solution for UVC Quanta 0408:4033 camera PROBLEM Ubuntu 23 for the users Who are buying laptop Acer Aspire A715-51G and installed Ubuntu _**


Go to your home directory and follow steps 

```
I finaly compile https:/ on ubuntu 23.04
Simply by:
git checkout HEAD~1 (first commit for 6.2 kernel, last for 6.3 kernel)
make
sudo rmmod uvcvideo
sudo insmod ./uvcvideo.ko
```
if you found error like this 

```
The kernel was built by: x86_64-linux-gnu-gcc-12 (Ubuntu 12.2.0-17ubuntu1) 12.2.0
You are using: gcc-12 (Ubuntu 12.2.0-17ubuntu1) 12.2.0
CC [M] /home/raj/uvc/uvc_driver.o
/home/raj/uvc/uvc_driver.c:17:10: fatal error: linux/usb/uvc.h: No such file or directory
17 | #include <linux/usb/uvc.h>
 ^~~~~~~~~~~~~~~~~
compilation terminated.
```
Then follow below steps again 

```
sudo apt-get install build-essential
git clone git clone  https://github.com/Kvalme/uvc.git
cd ./uvc/
git checkout 5ea688c
make
sudo rmmod uvcvideo
sudo insmod ./uvcvideo.ko

```
Now camera will work but if you reboot and again not working then run below command’s

```
sudo cp /lib/modules/$(uname -r)/kernel/drivers/media/usb/uvc/uvcvideo.ko{,.back}

sudo cp ~/uvc/uvcvideo.ko /lib/modules/$(uname -r)/kernel/drivers/media/usb/uvc/uvcvideo.ko

sudo reboot
```
Please share or comment if you like may this can help to buy external webcam for the ubuntu users who are using this webcam
Must-Have CSS Tools for Effortless Styling 🚀
Tags: css, webdev, design, tooling
Published: 2023-05-28 10:25:29

CSS plays a crucial role in web development, allowing us to style and design beautiful websites. While writing CSS from scratch is essential, leveraging CSS generators can significantly enhance your productivity and efficiency. In this article, we'll explore a collection of handy CSS generators that can streamline your styling workflow and save you time.

## 1. CSS Gradient Generators

Creating eye-catching gradients can be a time-consuming task. CSS gradient generators simplify this process by providing an intuitive interface to generate CSS code for stunning gradients. Some popular CSS gradient generators include:

- [Ultimate CSS Gradient Generator](https://www.colorzilla.com/gradient-editor/)
- [CSS Gradient.io](https://cssgradient.io/)
- [UI Gradients](https://uigradients.com/#Decent)

## 2. CSS Box Shadow Generators

Adding shadows to elements can elevate the visual appeal of your design. CSS box shadow generators enable you to create box shadows with various settings and get the corresponding CSS code instantly. Check out these handy CSS box shadow generators:

- [Box Shadow Generator](https://www.cssmatic.com/box-shadow)
- [CSS3 Generator](http://css3generator.com/)

## 3. CSS Animation Generators

CSS animations can bring life and interactivity to your web designs. However, creating complex animations manually can be challenging. CSS animation generators simplify the process by providing a visual interface to create and customize animations. Explore these CSS animation generators:

- [Keyframes.app](https://keyframes.app/)
- [Animista](https://animista.net/)
- [CSS Animation.io](https://cssanimation.io/)

## 4. CSS Grid Generators

CSS Grid is a powerful layout system that allows for flexible and responsive grid-based designs. However, setting up grid layouts manually can be time-consuming. CSS grid generators offer an easy way to generate CSS code for grid layouts, making your life easier. Here are some notable CSS grid generators:

- [Grid Layout Generator](https://grid.layoutit.com/)
- [CSS Grid Generator](https://cssgrid-generator.netlify.app/)

## Other Generators

- [Waves Generator](https://app.haikei.app/)
- [Buttons](https://cssbuttons.app/)
- [Beautiful Illustrations](https://designstripe.com/search/illustrations)

Using these CSS generators can significantly speed up your styling workflow and help you create visually appealing designs. Experiment with them, explore their features, and integrate them into your development process to unleash their full potential. Happy generating!
Anvar Mullabekov: Secrets of Overcoming Burnout
Tags: anvarmullabekov, mullabekov
Published: 2023-05-28 09:59:42

Anvar Mullabekov a businessman from Tashkent, believes that constant stress and overwork often lead to burnout, which in turn affects the effectiveness of entrepreneurial activities. However, Anvar Mullabekov, whose business is related to aviation in various countries around the world, knows how to deal with stress and maintain productivity.
The first secret to successful stress management is planning. Anvar Mullabekov knows how to effectively plan his time and find time for relaxation. He faced the challenge of high workloads back in his school years. As a boy, he studied in the physics and mathematics class of School No. 110 in Tashkent, deeply studied English, and participated in international English language Olympiads. It was during school that he learned to plan his time. Later, when Anvar studied in London, England, he continued to refine his planning skills. Engaging in business, Anvar perfected them, and it was this that helped him achieve success.
The second secret is physical exercise. Anvar started playing sports in his school years when he encountered high intellectual demands. Sports activities helped him cope with stress, emotionally relax, and increase productivity. Since childhood, Anvar Mullabekov played football and has been practicing Aikido for a long time. In 2015, he passed the examination for a 1st dan black belt under the instruction of Japanese teacher Yamada Hironobu Sensei, who holds an 8th dan black belt. In 2017, he was registered for the examination for a 2nd dan.
The third secret is music. Anvar Mullabekov believes that music can significantly help in combating stress. He prefers neoclassical music and started learning the piano to be able to play musical compositions himself. His favorite composers are Kirill Richter, Erik Satie, Philip Glass, and Rachmaninoff.
The fourth secret is travel. Anvar Mullabekov believes that travel can help broaden horizons, look at situations from a different perspective, and find new business ideas. He often visits different countries for business purposes but tries to use every opportunity to visit new interesting places. Anvar Mullabekov speaks several foreign languages. He particularly enjoys visiting the UAE, Singapore, and countries in Africa. In his immediate plans is the Latin American continent, specifically Brazil and Argentina.