teleren/devto huggingface dataset:
Something new i learn
Tags: csharp, dotnet, beginners, programming
Published: 2022-07-29 23:35:00

Today on my job
I did a logger of request and responses that don´t use a lot of processing from the server. I used a system of [Middlewares](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/middleware/?view=aspnetcore-6.0) and [BackgroundServices](https://docs.microsoft.com/pt-br/dotnet/api/microsoft.extensions.hosting.backgroundservice?view=dotnet-plat-ext-6.0) on ASP.NET Core 3.1

I just have a lot of fun.
My Hacking Journey
Tags: cybersecurity, pentesting, ethicalhacking, linux
Published: 2022-07-29 22:54:17

This blog is basically for me to keep record of my progress in Ethical Hacking and Cybersecurity in general, but it may also help anyone starting to get into this world as well.

So a brief introduction of myself, I'm a Systems Analysis Technician and I've worked all of my career (about 3 years of experience in total) in SysAdmin/DevOps roles. At the moment I'm working as a DevOps Engineer but I'm broadening my horizons and taking a deep dive into Ethical Hacking and Pentesting which, honestly, just look cool to me. I want to look as cool as Elliot Alderson does in Mr. Robot!

I started a couple of days ago with [HackTheBox](https://www.hackthebox.com/), as of now I've only pwned 2/4 of the Tier 0 Starting Point machines. It's been very fun so far, the platform asks questions about tools and command line utilites and if you pay close attention, the questions you're answering are the solution to hacking the machines!

It's not much of a straight forward process and it'll be hard for anyone not familiar with Linux and usage of the command line. But don't stress if you're not familiar with this, there is no time limit and the platform gives you hints, also you can just google and do your research to complete the tasks if you need to. 

Keep in mind that these are skills that probably most if not all Penetration testers dominate and use on a day to day basis, so I believe you'll have to learn it at some point if you want to pursue this path.

I'm using Kali Linux and connecting to the HackTheBox VPN with openvpn, it's as simple as running a command like this:
`openvpn path/to/your/openvpn_file.ovpn`

For the first machine, I connected via `telnet` after discovering open ports using `nmap`. After that, all I had to do was just use `cat` read the `root_flag.txt` file and that was the value I needed to complete the "pwning" of the machine! Then for the second machine, I also used `nmap` to find open ports and to find the version of FTP that was running on the open port, logged in via FTP and also read the `root_flag.txt` but with the `less` command as it seems `cat` is not available in the FTP command line.

These are my first steps, I'll continue blogging my progress as I keep pwning machines!
Better Cater - Super easy-to-use catering software
Tags: saas, software, webapp, food
Published: 2022-07-29 21:46:20

Rated #1 by Catering Teams. You're busy as it is. You don't have time to learn a complicated piece of software. You need something that's easy to use, helps you manage your catering business, and gets out of the way. And that's what Better Cater is here for. It's got everything you need, without all the extra bells and whistles. Incredibly simple and at an unbeatable value. Try our FREE 30-day trial today.

https://www.bettercater.com
Day 111: Coaching day
Published: 2022-07-29 21:31:06

Hi!
Today was a coaching one and I was helping a friend learning about DOM manipulation, event listeners, browser logic, things like that for me I learned a the basics of JavaScript and jumped over to React before I was confident with DOM manipulation so I learned a thing or two as well. we solved a frontend mentors challenge and it was fun therefore I plan to work another challenge tomorrow if I spare some time. tomorrow I may have someone else coming over for a coaching session as well but I still have unfinished stuff with my weekly task so I plan to work on them tomorrow and maybe work on my Daily UI challenges by Sunday

Signing off....
Angular Testing with @Input
Tags: angular, testing, input
Published: 2022-07-29 21:03:14

---
title: Angular Testing with @Input
published: true
description: Angular Testing with @Input
tags: angular, testing, input
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

I was struggling to test nested with observables and testing emits.
I was looking at a few posts on [medium](https://betterprogramming.pub/testing-angular-components-with-input-3bd6c07cfaf6), however it didn't cut it when I needed it to work.
A simple fix that I found on [stack overflow](https://stackoverflow.com/a/63839668/10576489) helped a lot.
I didn't even use a textcomponentfixture class. It was a bit too complicated.

Following the guide on Stackoverflow and using SpyOn emits we can achieve a good test.

So the first thing you want to do is setup the test and a SpyObj inside your `beforeAll` method in your test suite.

```
let spyEmit: jasmine.SpyObj<EventEmitter<Project>>

beforeAll(() => {
            spyEmit = jasmine.createSpyObj('EventEmitter', ['emit']);
        });
```

Make sure you have the spyEmit in your describe.

Then you have to make sure you set the default EventEmitter in your `beforeEach`


So before you run your `fixture.detectChanges();` make sure you set you fake EventEmitter.

```
...
 fixture = TestBed.createComponent(ProjectFormComponent);
            component = fixture.componentInstance;
            component.projectDataReturn = spyEmit;
...
```

This is so that it reflects this code in the parent component:

```
...
 @Output() projectDataReturn = new EventEmitter<Project>();
 ...
 ```
 
 Now when you run your code can use a fake spy
 
 ```
  ...
  spyEmit.emit.and.callFake((project) => {
                expect(project).toEqual({...fakeProject, id: "old1"});
            });
   ...         
```

This allows you to capture the call and check it for each test units.

Of course you can run `expect(spyEmit.emit).toHaveBeenCalled();` to check if the fake method has been called.
Keycloak 19.0.1 + Mysql + Docker - Configuração simples de um docker-compose.yaml
Tags: keycloak, mysql, docker, kurybr
Published: 2022-07-29 20:33:39

---
title: Keycloak 19.0.1 + Mysql + Docker - Configuração simples de um docker-compose.yaml
published: true
description: Aprenda a subir um container do Keycloak e do Mysql utilizando o Docker-compose de forma direta.
tags: keycloak, mysql, docker, kurybr
cover_image: https://repository-images.githubusercontent.com/11125589/bd31cf00-70f4-11e9-9fb2-4f241568e586
# Use a ratio of 100:42 for best results.
---


Oi Pessoal, para configurar uma imagem simples do Keycloak com Mysql vou deixar um exemplo de `docker-compose.yaml` para facilitar a vida de vocês

docker-compose.yaml
```yaml
version: '3'

services:
  db:
    container_name: db_mysql
    image: mysql:latest
    environment:
      - MYSQL_ROOT_PASSWORD=root_pwd
      - MYSQL_USER=admin
      - MYSQL_PASSWORD=pa55word
    ports:
      - "3306:3306"
    volumes:
      - .docker/db/mysql:/var/lib/mysql
  keycloak:
    container_name: keycloak
    image: quay.io/keycloak/keycloak:19.0.1
    environment:
      - KEYCLOAK_ADMIN=admin
      - KEYCLOAK_ADMIN_PASSWORD=admin
      - KC_DB=mysql
      - KC_DB_USERNAME=admin
      - KC_DB_PASSWORD=pa55word
      - KC_DB_URL_HOST=db
      - KC_DB_URL_PORT=3306
      - KC_DB_SCHEMA=keycloak
    ports:
      - 8080:8080
    command: start-dev
    depends_on:
      - db
```

Ao subir a imagem do mysql crie um banco chamado `keycloak` ele será usado pelo container do Keycloak para salvar as configurações do sistema.

Caso na primeira vez que subir os containers der o seguinte erro no container do Keycloak  `Unknown database 'keycloak'` significa que o keycloak tentou acessar o schema mas ele ainda não tinha sido criado.

Nesse caso só certifique-se de ter criado o schema no Mysql e rode novamente. 

Se tudo der certo, conseguirá acessar http://localhost:8080/ e agora é só se divertir desbravando.

![Tela de acesso do Keycloak](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1sohzsvrfn4gxi0ulnsi.png)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2022-07-29 20:25:02

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there! 


Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Discovering some [great new music](https://dev.to/music-discussions)... or whatever else might spark joy ❤️ 

---

Have a wonderful weekend!


![Cats partying](https://media.giphy.com/media/W8krmZSDxPIfm/giphy.gif)
How to use prevState of React.useState()
Tags: typescript, javascript, react, usestate
Published: 2022-07-29 19:16:00

## What is "prevState"?
The "prevState" as the name already says (Previous State), get the previous state of your useState hook, this can be used when you have an array in initial state and want to inherit the existing values to add some new values, for example.

##How to use?
For this tutorial i created a simple react checkboxes project in **CodeSandbox.io** to demonstrate, [click here to see](https://codesandbox.io/s/prevstate-tutorial-d5bzw3).

Basically we have a data mock with an array of objects
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1ow8jcnklzfx43uylco.png)

After this we have our App component which have a simple useState hook initializing with an empty array
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9f0cn1g9s9otl2ma2mb2.png)

This state hook basically will store an array with the values which we will select in the checkboxes below, inside the app component.

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

This will render the app component like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1435m07a7vhgjyorqyh6.png)

Realize that in the checkbox input we have a function called "toggleOption"
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3y03d9q6ai2b73vchnzl.png)

This function is responsible to add the item inside our selected state array.

## Understanding the function
Let's understand deeper this function...
At the App component in input element of our checkboxes, we are using the function passing the name as parameter

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

Let's go to the function
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/niowd9dvvmkbz9fnpo71.png)

We are just receiving the previous state of our selected state and assigning the new values, we have also a filter wich remove the items that are equals.

## Testing it
To test this i'm using a simple React.useEffect passing our selected state array as dependency.

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

Testing it in CodeSandBox

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

Checking Example 1 

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

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

Unchecking Example 1
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70g5jaqxrgpsns9nxurg.png)
 
 
##Done!
Feel free to check out this code in CodeSandBox [clicking here](https://codesandbox.io/s/prevstate-tutorial-d5bzw3)
python dictionary
Published: 2022-07-29 19:10:36

my_dict=[{'s':1,'t':2},
        {'s':2,'t':3},
        {'s':3,'t':1},
        {'s':4,'t':5},
        {'s':5,'t':6},
        {'s':6,'t':4}]
convert above list to
output=[{'s':1,'t':2,'id':1},
        {'s':2,'t':3,'id':1},
        {'s':3,'t':1,'id':1},
        {'s':4,'t':5,'id':2},
        {'s':5,'t':6,'id':2},
        {'s':6,'t':4,'id':2}]
info - we are giving same id first 3 dictionaries in list because they belong to same network.(if you plot graph). same with next 3 dictionaries
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gh65ddys2f2dn5p2rnj4.jpeg)
javascript dictionary
Published: 2022-07-29 19:08:48

my_dict=[{'s':1,'t':2},
        {'s':2,'t':3},
        {'s':3,'t':1},
        {'s':4,'t':5},
        {'s':5,'t':6},
        {'s':6,'t':4}]
convert above list to
output=[{'s':1,'t':2,'id':1},
        {'s':2,'t':3,'id':1},
        {'s':3,'t':1,'id':1},
        {'s':4,'t':5,'id':2},
        {'s':5,'t':6,'id':2},
        {'s':6,'t':4,'id':2}]
info - we are giving same id first 3 dictionaries in list because they belong to same network.(if you plot graph). same with next 3 dictionaries
Callback Function
Tags: javascript, webdev
Published: 2022-07-29 19:06:54

Hi guys,

Today we are going to discuss the **Callback function**. 


Callback is the one of the weird concept if you people are coming from the **C** programming language.

>**_Callback_** is nothing but a function which is passed as an parameter to the other function and being used  inside that(the function where it is passed as an parameter.) function

**Example**

> function greeting(name) {
  alert('Hello ' + name);
}

> function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

> processUserInput(greeting);
     
[Example Source](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)

**Snippet Explanation :**

* First the **proceessUserInput** method executes which takes **greeting** function as an parameter, Where the first line of the method asks as to type the name.

* Second line where the **greeting**(callback) function calls which the function inside the other function.

* It takes name output from the **processUserInput** and alerts the greeting message.

**OUTPUT**

Please enter your name.  John

Hello John


That's it :smiley: 

Thanks! for reading

Comment your feedback to boost up :muscle: my writing
Explain AWS Cognito Authorizers Like I'm Five
Tags: cognito, aws, authentication
Published: 2022-07-29 18:55:28

I am developing a react native mobile app. I want my user to login in one device with once account. If a  user tries to login to another mobile device with same account, he should be logout from the first mobile device. but official docs of AWS cognito provide two options either logout or global logout. In global logout it logs user out from device 1 and 2 both. what is expected If a user logs in second mobile device it should automatically be logout from the other one.

Please see the attached SDK link.
[https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityServiceProvider.html#globalSignOut-property ](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityServiceProvider.html#globalSignOut-property )
SDK: [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityServiceProvider.html#globalSignOut-property ](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityServiceProvider.html#globalSignOut-property )
Givenly - Gorporate gifting and swag management made easy
Tags: ecommerce, gifting, swag
Published: 2022-07-29 18:51:03

Givenly helps enterprise organizations streamline, centralize, and automate their gifting and corporate swag programs. Our specialty is creating, building, and sending custom employee and client swag packs at scale for any company. Schedule hundreds of gifts in seconds from a nationwide network of vendors. A year’s worth of gifting, done with a few clicks of the mouse. Employee and Client holiday gifting done right!

https://www.givenly.com
How to Add Google Fonts to a Tailwind Project
Tags: tailwindcss, css, javascript
Published: 2022-07-29 18:32:15

---
title: How to Add Google Fonts to a Tailwind Project
published: true
description: Learn how to easily use any Google font in your Tailwind project
tags:
- tailwind
- css
- javascript
cover_image: https://www.elvisduru.com/static/how-to-add-google-fonts-tailwind/banner.jpeg
# Use a ratio of 100:42 for best results.
---

Learn how to add, and use google fonts in your Tailwind project in simple steps.

[Add Google fonts to Tailwind Project](https://www.elvisduru.com/blog/how-to-add-google-fonts-tailwind)
React Native OTP auto fill problems at Deploy time using react-native-read-sms npm package
Published: 2022-07-29 18:05:00

if u are using **react-native-read-sms**.  [(https://www.npmjs.com/package/react-native-read-sms)](url)
this library for auto fill OTP in your react native android Project then play store reject your Application because this library is ask for messages Read Permissions.
Ultimate CSS3 Animations Series: Rotate()
Published: 2022-07-29 17:50:00

We’ll cover the following:

* 📐 Setup
* ⏱ Clockwise Rotation
* 🕗 Anticlockwise Rotation
* 🏌️‍♂️ Let’s See in Action
* ⛳ Next

[Here is the previous series of this course.](https://codewithshahan.medium.com/list/the-ultimate-css3-animations-series-16edfb443752)

## 📐 Setup
Let's create a new file index.html inside a folder. Then create a new div with the class name "card" and we will apply `rotate()` method to this card.

> Note: Don’t be confused with the word function or method. They are the same. In CSS there is no difference between these two concepts. Some developers may call them functions and others may call them methods.

Rotation is the circular movement of an object around an axis of rotation. A three-dimensional (3D) object may have an infinite number of rotation axes.

## ⏱ Clockwise Rotation
Let’s create a new file called styles.css and link this file to your HTML. Now, let's target our card class in CSS and write the following code:

```css
 transfrom: rotate(25deg) 
```

![clock wise rotation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6it9or9e4m9kuh4wqd8.png)

## Anticlockwise Rotation
The following card example rotates the card element counter-clockwise with -25deg:

```css
transfrom: rotate(-25deg) 
```


![Anticlockwise rotation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adgrqwfbg5o17g3h1cs3.png)

## 🏌️‍♂️Let’s See in Action
To see things clearly we will use this function in the hover state.

The following example will rotate the card element clockwise with 25 degrees:

**HTML**

```html
 <html>
<head>
</head>
<body>
<div class="card">
<p>I am CSS Card</p>
</div>
</body>
</html>
```

**CSS**

```css
body {
//your code...
}

p {
//your code...
}

.card {
//your code...
}

.card:hover {
transform: rotate(25deg); /* Use a negative value to rotate  counterclockwise */
}
```
> Note: Here, we used a positive value to rotate the element in the clockwise direction and a negative value can be used to rotate it in the counter-clockwise direction.

## ⛳Next
Next, we will learn how to use `scale()` function to make an element larger or smaller.

**👓 Special**
If you’re interested in frontend development using the JavaScript programming channel, you can subscribe to my [YouTube Channel](htts://www.youtube.com/c/programmingwithshahan).

Thanks for watching and see you in the next series.

* Follow me on [twitter](https://www.twitter.com/codewitshahan).
* Follow me on [instagram](https://www.instagram.com/codewithshahan).
10 Free Websites that are so Valuable they feel illegal to know.
Tags: programming, beginners, productivity, career
Published: 2022-07-29 17:33:33

## **1. [TinyWOW:](https://tinywow.com/)**

Get free versions of tools you usually pay for. Includes free versions of:
• Adobe Acrobat Pro (PDF editor)
• Photoshop (image editor)

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

## **2. [Jenni AI:](https://jenni.ai/)**

An AI auto-writing tool that automatically writes your essays and emails for you. 
All you have to do is give it a title and a couple of sentences.

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

## **3. [Temp-mail:](https://temp-mail.org/en/)**

Temp-mail gives you a temporary email and inbox to help you sign up for websites and avoid all the spam down the line.

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

## **4. [Quillbot:](https://quillbot.com/)**

Quillbot is a paraphrasing website that rewrites everything as plagiarism-free text.
Super handy if you're in college.

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

## **5. [Loom:](https://www.loom.com/)**

A nifty little tool that lets you record your screen and yourself at the same time, so you can explain things just the way you want to.

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

## **[6. Otter AI:](https://otter.ai/)**

Have trouble taking notes in meetings?
Otter records your meetings and automatically transcribes them to text.

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

## **[7. Pexels:](https://www.pexels.com/)**
An awesome website that lets you download high-quality stock images for all your work and personal projects.

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

## **[8. Remove.bg:](https://www.remove.bg/)**
An insane tool that lets you easily remove the background from your image and add in any background you like.

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

## **[9. Convertio:](https://convertio.co/)**
This website lets you convert files to any format you want for free.

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

## **[10. Microcopy:](https://www.microcopy.me/)**
An awesome resource that helps you find persuasive headlines and slogans for your emails, websites, and much more.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzx4fsynhav03kubkiq6.png)
July 29th, 2022: What did you learn this week?
Tags: discuss, weeklyretro, weeklylearn
Published: 2022-07-29 17:24:50

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

![David Schitt from Schitt's Creek saying "This is a teachable moemnt for all of us"](https://media.giphy.com/media/Q8rwlNTcDAU3MuUzd7/giphy-downsized-large.gif)

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

Photo by <a href="https://unsplash.com/@flipboo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Philippe Bout</a> on <a href="https://unsplash.com/s/photos/learn?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>