teleren/devto huggingface dataset:
JPA with Spring Boot
Tags: spring, jpa, java
Published: 2020-11-08 06:47:55

To use [JPA with Spring](https://dev.to/eidher/jpa-with-spring-6il) we need to implement 4 steps:
1. Define mapping metadata in entities
2. Define an EntityManagerFactory bean
3. Define Transaction Manager and DataSource beans
4. Define Repository/DAO

With Spring Boot, it automatically creates a DataSource, an EntityManagerFactoryBean, and sets up a JpaTransactionManager. So, to use JPA with Spring Boot we just need to implement 2 steps:

#Annotate domain classes

```java
@Entity
@Table(name="T_ACCOUNT")
public class Account {

    @Id
    @Column(name="ID")
    private Long entityId;

    @Column(name="CREDIT_CARD")
    private String creditCardNumber;
    ...
}
```

#Define repositories as interfaces

```java
public interface AccountRepository extends Repository<Account,Long> {

	public Account findByCreditCardNumber(String creditCardNumber);
}
```

Spring Data will implement at run-time scans for interfaces extending Repository<T,ID>. Besides, it will implement CRUD methods (extending CrudRepository<T,ID>), paging and sorting (extending PagingAndSortingRepository<T,ID>), among other subinterfaces. See [Repository documentation](https://docs.spring.io/spring-data/commons/docs/current/api/org/springframework/data/repository/Repository.html)

#Using CrudRepository and custom query (JPQL)

```java
public interface AccountRepository extends CrudRepository<Account,Long> {

	public Account findByCreditCardNumber(String creditCardNumber);
	
	@Query("SELECT a FROM Account WHERE a.email NOT LIKE '%@%'")
	public List<Account> findInvalidEmails();

}
```

#Using the repository

```java
public class AccountServiceImpl implements AccountService {

	private AccountRepository accountRepository;

	public AccountServiceImpl(AccountRepository accountRepository) {
		this.accountRepository = accountRepository;
	}

	@Transactional
	public Account getAccount(String creditCardNumber) {
		return accountRepository.findByCreditCardNumber(creditCardNumber);
	}
	
	@Transactional
	public void saveAccount(Account account) {
		accountRepository.save(account);
	}
}
```
DataGridView AutoFilter
Tags: excel, csharp, filter, datagrid
Published: 2020-11-08 06:20:57

![The Scrolling Horror](https://miro.medium.com/max/1400/1*OEN-b7sStrR48HPCrnhMyQ.gif)

**- Are you tired of scrolling that cursor over a huge record?**

**- Feeling uncomfortable searching records?**

**- Does your client blame you for getting multiple records with in a single click?**

Fear no more, [DataGridView AutoFilter](https://medium.com/@anynomous/datagridview-autofilter-621f80f71b63) assists you to carry out such problems.
Forwarding Phone's GPS
Tags: gps
Published: 2023-01-06 01:13:26

---
title: Forwarding Phone's GPS
published: true
date: 2020-11-08 05:58:11 UTC
tags: GPS
canonical_url: https://brandonrozek.com/blog/phonegpsforward/
---

Sometimes I wish to open up [Marble](https://marble.kde.org/) which an a mapping application and see my current location on the globe. My laptop, however, doesn’t have a GPS module in it. Though I realized that I carry around a device that does… My phone.

Tiago Shibata wrote a great Android application called [GPSd Forwarder](https://www.f-droid.org/en/packages/io.github.tiagoshibata.gpsdclient/) which allows you to forward the NMEA data from your phone’s GPS to another device over UDP. The user interface of the app is really simple and only requires you to put an ip address and a port of the device you want to stream the GPS data to.

For sake of example, let’s say we’re sending UDP packets to the ip address of 192.168.0.86 and a port of 29998.

As a good sanity check, let’s make sure that the computer is receiving those UDP packets.

```
nc -lu 29998

```

You should see a constant stream of output that looks similar to:

```
$GNGSA,A,2,324,,,,,,,,,,,,1.2,0.9,0.8,3*05

```

Then we need a piece of software that knows how to process this NMEA message. For that we use `gpsd`.

To install,

```
sudo apt install gpsd gpsd-clients

```

For the purposes of this demo, we’ll disable the automatic socket daemon and tell gpsd to listen on the udp port 29998.

```
sudo systemctl stop gpsd.socket
sudo gpsd -N udp://*:29998

```

To sanity check that gpsd is processing the data, you can make sure there’s output in `gpsmon`.

Finally to hook this into Marble, go to Settings -> Panel -> Location. Then in the location pane change the Position Tracking option to “gpsd”.
Digital Currency from TheNewBoston Channel (#1)
Published: 2020-11-08 05:57:56

https://www.youtube.com/watch?v=Dgj_OStjD1Q&ab_channel=thenewboston


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vcbgvagt6q4sbl79ycuz.png)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ba7elp2spabdwo0q3bie.png)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gyquqkdpw403nbxfj2o3.png)
My first experience in contribution to Open-Source
Tags: hacktoberfest, hacktoberfest2020
Published: 2020-11-08 05:47:35

## My Experience
First of all it was an wonderful experience of participating in [HacktoberFest](https://hacktoberfest.digitalocean.com/) 2020 and contributing to open source projects. This is my first time in HacktoberFest.
I got to know about the HacktoberFest through some social media. After that I made a research on it about how to register, how to contribute, how to find projects, how to make PR's and so on. Then I registered for the event and searched for projects which sync with my skills to contribute. I am good at web development and design things I found projects related to it to contribute.
I also got help from the HacktoberFest, one my project needed some feature to be added to it. I listed it under HacktoberFest projects to contribute. Then I got help from some participant, it was great thing. It was amazing October with Hacktober.

## What I Learned From Hacktoberfest
When I made contribution to the projects, my skills are improved. I got 3 projects to add contents for the website and 1 projects to design hero images for developer learning courses. I improved my knowledge on HTML, CSS, Github, Git and designing in Figma. And increased my efficiency of working, by working on that projects I got. It encouraged me to work on other extra projects and I will be looking to contribute more for the open source in future.
Whatever the project we get, we have to make valuable contribution to it. Then only it brings value to both the event we are participating and the skills we have learned.

Finally, Thank you [Digital Ocean](https://www.digitalocean.com/) for the amazing HacktoberFest Event.
Flutter Magic Widget - Container
Tags: flutter, android, ios, webdev
Published: 2020-11-08 05:09:50

_Hello, dev_

>This is my first POST where we will be exploring Flutter's Magic Widget **_"Container"_**.

First of all, the Container widget is the most widget used in Flutter.
It is basically the base layout for any basic app.
The Container widget takes one child, which can be any widget of flutter, can be adjusted as per the dev's will. Very easy to use.
Can be given a border, border-radius, color, decoration, gradient, static color, and many more to look for in flutter.

The Container Widget is a must use for a FlutterDev. It offers many options for a dev. A very helpful widget.

For More Info on Widgets of Flutter, Checkout my YT Channel:
[Bits & Bytes Programming](https://www.youtube.com/channel/UCJoCVftMcKPs5UeO0vfu6kQ)
Stream Input and Output
Tags: cpp, beginners, computerscience, oop
Published: 2020-11-08 05:01:18

---
title: Stream Input and Output
published: true
description: Understanding stream I/O and working with std::cout
tags: cpp, beginner, computerscience, oop 
cover_image: https://images.unsplash.com/photo-1527489377706-5bf97e608852?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2627&q=80
series: Programming 101 with C++
---

# Stream I/O

**The Standard Library** provides us with the functionality for input/output (I/O) where input and output can be -

* keyboard/screen
* files - read from a file and write to another (or the same file)
* other sources/targets that support stream I/O

Stream I/O is different from **"record"** I/O or **"fixed"** I/O as in it cannot be used to - 

* create a database, or
* read one line in the middle of a file

C++ supports stream I/O with **operators**. Operators in programming are similar to what we see in mathematics, for example in 2 + 2, '+' is the operator adding the two operands.

* To send character to **cout** (pronounced c-out), use the **<<** (from) operator.

> std::cout << "Hello!";

* For line break (or enter) use the *escape sequence* **'\n'**.

> std::cout << "Hello!\n";

is same as writing

> std::cout << "Hello!" << '\n';

# Comments
Comments in code help the reader of your code understand why some things in your code are as the way they are. You may also be reading your code again after a few days, weeks or months and comments help in understanding why some logical decision was made.

To add a single line comment in C++, use two forward slashes (//)

> // This is a comment

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5a2qth0cex8qcfqic6kn.png)

* Double and single quotes are different 

### Don't ask for the impossible
* 3/0
* "hello" + 2

* Also remember to save your changes before you run :)

Now, try to write a program that prints out a combination of words and numbers across multiple lines.

Please leave out comments with anything you don't understand or would like for me to improve upon.

Thanks for reading!
Generating an Inclusive Array Between Two Numbers
Tags: javascript, es6, functional, webdev
Published: 2020-11-08 03:33:44

---
title: Generating an Inclusive Array Between Two Numbers
published: true
description: Generating an inclusive array between two numbers using ES6 Array Methods
tags: javascript,es6,functional,webdev
---


I wrote a simple little function using ES6 array methods to generate an inclusive array between two given numbers. Handy for a handful of applications.

Happy to get the community's feedback.

```javascript
function sequential(to, from = 0) {
    return Array.from(Array(to + 1).keys()).slice(from)
}
```
Today I woke up early to develop.
Tags: react, sqlite, glitch, heroku
Published: 2020-11-08 02:49:17

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5l48pqzp5xcefekbnuoj.jpg)

Today I woke up early to develop.

I ran into a problem because I can't get Heroku CLI working due to proxy issues. I decided to try Glitch.

However, pushing to Glitch is not the easiest thing. If you develop locally, one way to push to Glitch is through Github. However, if you use SQLite locally, there isn't a direct way to sync your local database with the database on Glitch. You have to use some tricks to go around. In this case, you have to upload the database separately from other code as a static asset to your Glitch project. And you use `wget` in the Glitch project's terminal to put that database file into the correct folder. And you need to write some code to help the server to find the database file in different places in different environments (i.e. local v.s. Glitch).

The task was to merge my Express backend with the React front end. I did not know how I can achieve that. But it turns out to be quite easy. All you need to do is to use `npm run build` to build the React app and then move the output to the server app's folder and let the server app serve the front end app as static files.

I did all these development on my Windows machine. It's far from a happy business to adapt to PowerShell or cmd as someone who's more familiar with Linux bash. Even though both PowerShell and cmd belong uniquely to Windows, they have different ways to set environment variables. And they have different ways to combine several shell commands. I really don't enjoy the variances.

2020.11.8
Why JavaScript is an easy programming language to start developing?
Published: 2020-11-08 02:32:55

JavaScript is domaining the web these days. When I started programming I have never used it, but now that I realize of the power of this language, it's amazing and here are three reasons:

1.- You don't need a compiler to run a simple application.
   - Yeah! You don't need to install a program like Visual Studio or Visual Studio Code to start programming. The only thing you need, it's the browser.

2.- Learning a new programming language is the most tedious thing for a developer, but I think JS could help for new developers. JavaScript (JS) sintax is easy to learn and there are many courses on the web to start to study it.

3.- Learning JavaScript could help you to understand about logic and sintax even of other ones. 

Well, that's all, this post is focused in new developers! :)
Validating JWTs in Web APIs
Tags: jwt, authentication, applicationsecurity, microservices
Published: 2020-11-09 11:29:18

---
title: Validating JWTs in Web APIs
published: true
date: 2020-11-08 00:00:00 UTC
tags: jwt,authentication,applicationsecurity,microservices
canonical_url: https://authress.io/knowledge-base/how-to-verify-jwt-in-web-app
---

![Unlocking JWT security in web apps](https://cdn-images-1.medium.com/max/1024/1*Q0QL5Set9r1_l6Amld55dw.png)

Securing a web application or api requires actually validating the access token that is being used. When using JSON web tokens (JWTs), there are two mechanisms for doing this. But the core of the solution requires inspecting that JWT, understanding who the authority is, and using that authority for verification.

The properties or fields in a JWT are called claims. JWTs contain an **ISS** claim. This is the **Issuer**. The issuer is the **authorization server** (AS) which is marked by the issuer. As such the AS provides a full document about how JWTs are constructed and how to verify them. This document must always be found at [**https://${Issuer}/.well-known/openid-configuration**](https://%24%7BIssuer%7D/.well-known/openid-configuration) (according to [RFC 8414](https://tools.ietf.org/html/rfc8414)). Here’s a [real life example](https://login.authress.io/.well-known/openid-configuration).

What’s more is that the openid configuration may inform you of an **introspection** endpoint. By passing the token there the AS will tell you if the token is a valid one. However, not only is this optional, it is expensive since the results can not be cached. If you are verifying 1000s of tokens per second, it is far too prohibitive to verify them like that.

JWTs are signed, that means they have a signature which allows them to be verified. With the signature, they also contain a **kid** which specifies which public key was used to sign the token and create the signature.

A better alternative is to use the issuer, kid, and signature to verify the token. To do this get the relevant [JSON Web Keys](https://tools.ietf.org/html/rfc7517) (JWK). Use the issuer to get the keys, find the right key using the kid, and then verify the signature using the key. Therefore keys allow you to self verify the token much faster and the keys themselves are cacheable, that means that you can avoid frequent API calls by using the JWKs. This still has a similar problem as the **introspect** endpoint; that is you are implicitly trusting the **issuer**. So step one becomes:

After that, verify to token, just break open the token grab associate JWK and verify the signature:

{% gist https://gist.github.com/rhosys-service-account/c74e9670541d6bfc8b99d0a7ea121d5d.js %}

_Originally published at_ [_https://authress.io_](https://authress.io/knowledge-base/how-to-verify-jwt-in-web-app) _on November 8, 2020._

* * *
AWS Essentials ~ Sharing IT while Learning It!
Tags: aws, cloud, labs, spanish
Published: 2020-11-08 02:22:25

# Los Esenciales de AWS

Compartiendo, a media que se aprende, la experiencia de iniciarse sobre AWS:

La creación de la cuenta, la gestión de usuarios, los servicios básicos, y algunos laboratorios "esenciales"

## Secciones
   * [i. Getting Started ~ Creando la Cuenta](#ch-1)
   * [ii. Getting Started ~ Account Best Practices](#ch-2)
   * [iii. Getting Started ~ Billing Alarms ~ Setup](#ch-3)
   * [vi. Getting Started ~ Billing Alarms ~ Reacting to](#ch-4)




### i. Getting Started ~ Creando la Cuenta <a name="ch-1"></a>

Alta de la Cuenta, Alias de Gmail, MFA (Multi Factor Authorization)

{% youtube UDzAnbHxpbM %}

### ii. Getting Started ~ Account Best Practices <a name="ch-2"></a>

Buenas prácticas sobre la cuenta, creación de usuarios y grupos. Otorgar permisos con IAM. MFA sobre usuarios

{% youtube XX9ktfLF1CI %}

### iii. Getting Started ~ Billing Alarms ~ Setup <a name="ch-3"></a>

Buenas prácticas sobre la cuenta, primer Demo, creando una Billing Alarm. Servicio SNS

{% youtube t-QxXVzR8PU %}

### iv. Getting Started ~ Billing Alarms ~ React <a name="ch-4"></a>

Reaccionando a una Billing Alarm. AWS Cost Explorer y CloudTrail

{% youtube 4w0XisYY3u0 %}



## Siguientes (en W.I.P.)

- Lab2 ~ Crean un sitios estáticos en S3 y con EC2
- Lab3 ~ Creando los usuarios y grupos desde AWS CLI [Github Source](https://github.com/Pabloin/AWS-Essentials/blob/master/x-users/users_add.sh)
- Lab4 ~ Creando una VPC desde cero
- Lab5 ~ ... en Work In Progress 





Estos son los primeros, la idea es seguir sumando más ...

Happy Learning!
Pablo



## Recursos

* [AWS Essentials ~ Github Fuentes] (https://github.com/Pabloin/AWS-Essentials)

* [AWS Essentials ~ Lista en youtube]
(https://www.youtube.com/playlist?list=PLMLI9YiS7TLsEEAN-IOU6kz7-DSNsOLu8)
Lottie Animations for React
Tags: react, javascript, tutorial
Published: 2020-11-08 02:16:55

Who doesn't love animations? They're fun, engaging, and versatile. In this post, I will introduce [Lottie](https://lottiefiles.com/featured) animations and how to implement them into your React website. 

<a href="https://imgur.com/6JX6Hb1"><img src="https://i.imgur.com/6JX6Hb1.gif" title="" /></a>

### What is a Lottie?
A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform. They are small files that work on any device and can scale up or down without pixelation.

### Integrating Lottie into React App
##### Step 1: install the library 
`npm install --save react-lottie`

##### Step 2: select an animation from [LottieFiles](https://lottiefiles.com/featured)
You can download it as a JSON or use the Lottie Animation URL.
Personally, I prefer to download and store it in a folder in my application. 
Here's an example of the file structure:
![](https://i.imgur.com/WvwBH1sm.png)

##### Step 3: create a Lottie.js file in src
The code inside that file should look like this:
```
import React from "react";
import Lottie from "react-lottie";

export default function LottieAnimation({ lotti, width, height }) {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: lotti,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
    <div>
      <Lottie options={defaultOptions} height={height} width={width} />
    </div>
  );
};
```

##### Step 4: import your Lottie into the component you want to return the animation:

```
import React from 'react';
import LottieAnimation from '../Lottie';
import home from '../Animation/dev.json';

const Example = () => {

    return ( 
         <div className='example'> 
           <LottieAnimation lotti={home} height={300} width={300} />
        </div>
    )
}

export default Example; 
```

> Note: This example implies that you then add `<Example />` into render in App.js 

<hr> 

That's it! Your beautiful Lottie animation should now render to your site!

As always, feedback and discussion is welcome. :information_desk_person:
tsParticles 1.18.11 released
Tags: news, showdev, javascript, webdev
Published: 2020-11-08 02:04:00

# What a `tsParticles` patch release post? Are you crazy?

I don't usually post about [tsParticles](https://github.com/matteobruni/tsparticles) patch releases, but this time I'll do an exception.

A frequently asked question for `tsParticles` and `particles.js` was about using the library without breaking buttons, links, and any other interactive elements of the web page.

Well, thanks to version `1.18.11` this will be a lot easier and many configurations that were not possible before are now possible (Impossible is nothing, anyone?)

# How to configure this awesome feature?

Your options will need some updates:

```javascript
{
  /* your awesome config */
  backgroundMode: {
    zIndex: 100, // any value >= 0 is good
    /* if you want elements above particles 
       just set a bigger z-index in your css */
    enable: true
  },
  interactivity: {
    /* if you have detect_on, replace it */
    detectsOn: "window" /* "parent" is still good
                           "canvas" won't work */
  }
}
```

# Demo

Want to see it in action because you won't believe this?

Check out below

{% codepen https://codepen.io/matteobruni/pen/MWeqxNL %}

You can see particles above 

# Read more

If you want to read more about all the `1.18.x` features you can read more [here](https://dev.to/matteobruni/tsparticles-1-18-0-released-7gk)

# GitHub

If you like `tsParticles` support it with a ⭐️ on GitHub, you can find the link below

{% github matteobruni/tsparticles %}
Decomposition
Tags: codequality, computerscience, computationalthinking
Published: 2020-11-08 01:37:57

> "There are no big problems in programming. Only small problems and those that haven't been broken up yet."

# Why decomposition

Decomposition allows us to move at incredible speeds. We know it's better to focus on one task at a time. Focusing on one *small* task at a time has even more advantages:

- Routine energy boosts
- A routine sense of accomplishment
- Easier hand off mid-story
- Easier to take brakes
- Easier distraction management
- Faster velocity

# How to decompose?

**Start with a big problem** like: "I need to find a bug in my web app." 

Then **find smaller problems** which will lead you to resolving the problem. With this problem, I would think: "I know there's a frontend, server, and data layer... The bug could be in any of those."

Now we have 3 smaller problems instead of 1 big one. When I try to tackle big problems, I find myself reviewing all of the code multiple times. By tackling one of these smaller problems, we can remove a section of code entirely and narrow our focus to productive exploration.

When you find you're stuck with a big problem again, **repeat**. Let's say we find out the front end is relatively simple. As is the datalayer. Neither contains the bug we're tracking. The server method is 1000 lines long and has 6, 1000 line subroutines. This is a big problem. There are two ways we could break this new big problem down further.

1. Binary search: run down to line 500 and see if it occurs. Then run down to 250, 125, and so on till you pinpoint the problem.
1. Break it up by subroutine. Take each one individually and find whether the problem is occuring in that area. Once you find which routine it's happening in, figure out how to break it up from there.

Both of these techniques are useful in different situations. Without more context, we don't know which one will be applicable.

## Review

1. Find a big problem.
1. Break that problem up into smaller problems.
1. Repeat steps 1 + 2.

# Agile

Decomposition pre-coding is just as effective as during a code session. I was talking to my scrum master, Andy, last week about epics, features, and stories. 

He said that an epic is a big goal we're trying to accomplish like, "Add authentication to the web app." A feature would be one feature required for the epic like, "Add a button for sign in." And a story would be one portion of the feature like, "Get the button to show up" or "Add a method to the backend to receive the login request."

I like the definitions Andy uses because they align well with decomposition. When you start to work on a story, it can already be decomposed into a small unit of work.

# Where to go from here

The next time you run into a big problem, remember: there are no big problems in programming. There are only small problems and those that haven't been broken up yet.