teleren/devto huggingface dataset:
Keycloak instalação - P02
Tags: keycloak, postgres, ubuntu, nginx
Published: 2021-07-27 20:02:58

Com a nossa maquina virtual preparada, vamos proceder com a instalação do JDK para rodar o Keycloak e a instalação inicial do mesmo.  
vamos verificar se possuímos o java instalado, caso contraŕio, instalaremos a versão default do mesmo, uma vez que é necessário para rodar o Keycloak.

```bash
java -version
```
![verificando versão Java](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9q174olijbgjdzblwyp.png)

Como podemos ver, não possuímos o java instalado, procederemos com a instalação da versão padrão

```bash
sudo apt-get install default-jdk -y
```
Apos instalado, vamos verificar se esta tudo ok

```bash
java -version
```
![verificando versão Java](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxcbozjyayh5woip2ipn.png)

Agora vamos baixar e extrair os arquivos do keycloak
*No momento que escrevo esse artigo a versão mais recente é a 14.0

```bash
wget https://github.com/keycloak/keycloak/releases/download/14.0.0/keycloak-14.0.0.tar.gz
```
![Baixando Keycloak](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/im2zko95izipsxlsfgxu.png)

```bash
sudo tar -xvzf keycloak-14.0.0.tar.gz
```
Para uma melhor organização vamos criar uma pasta em /opt para rodar o keycloak 

```bash
sudo tar -xvzf keycloak-14.0.0.tar.gz
```

Vamos verificar se os arquivos estão no local correto 

```bash
ls /opt/keycloak/
```
![Listando diretório Keycloak](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wl1vuoie1swwfvfcw6a.png)

Nesse ponto estamos com o servidor pronto para execução inicial. No próximo artigo vou mostrar como executar de forma  standalone, ou seja, de forma autônoma sem depender de terceiros. Além disso os passos necessários para a configuração inicial. Como o servidor não possui interface gráfica, será necessário realizar um redirecionamento de porta via ssh em uma maquina com navegador para criar o usuário administrador.
What is an Open Source Community -- with Thierry Carrez
Tags: opensource, kubernetes, podcast, beginners
Published: 2021-07-27 19:50:55

##Listen to The OCTOpod: Conversations with SUSE's office of the CTO.##

Season One is **all about open source**: how to get involved in a community, diversity and inclusion in open source, how to start an open source company and more!

[Octopod Episode 1: What is an Open Source Community?](https://episodes.buzzsprout.com/x3fb1kpqf50yl06v52ww8x2543dp?)
{% spotify spotify:episode:74wVyvwig6hRKzrmj9ficS %}

In Episode 1 of the OCTOpod, Alan Clark talks with Thierry Carrez about open source communities: what they are, how they work and how you can get involved.


Trying to define what an open source community is might sound like a simple task, but it is a layered, nuanced collective with many moving parts. Thierry has been in the open source community for years and is currently the VP of engineering at the Open Infrastructure Foundation. In this episode, Thierry sheds light on some of the key traits that characterize open source communities. We hear about the importance of governance, principles, scope and documentation and find out how everyone, even those who do not code, can contribute. As Thierry notes, it is not about your technical ability, but rather about adding value where you can and being an engaged member of a community. Building a sustainable community requires effort, but that transparency and collaboration make it a worthwhile endeavor. 

> "It’s really not about code, it’s really not about being a technical rock star. It is really more about being useful to others.” 

Listen to the OCTOpod here or subscribe on your favorite podcast platform! And please share it with your friends! Learn more at [community.suse.com](https://community.suse.com).
Hackintosh(Big Sur 11.5) not loading Android Emulator
Tags: hackintosh, android, emulator, bigsur
Published: 2021-07-27 19:48:22

I finally got courage to go on ropes with OpenCore from Clover and update my hackintosh desktop to BigSur 11.5 . It was a smoother experience compared to doing updates for my poor old Dell laptop. Installed XCode and Android Studio for mobile development stuff, and put some other apps.

It all seemed to work fine until I finally tried installing and running an android emulator, for which it only gets stucked and not really launching anything. Looking around for answers, I saw some relative problems and solutions involving Big Sur and android emulator. I tried them all , from updating entitlements for qemu-system-x86_64 , deleting emulator lock files, install/reinstall Emulator from SDK, launching emulator on terminal, etc. But none seemed to work, thats when I finally realized back that its a hackintosh.

Solution:
So booted up to BIOS, looked over at the Virtualization support and enabled it, then boom! Android Emulator finally shows up.
Turning off virtualization is a recommended thing when installing a fresh Hackintosh, but it can then be enabled afterwards.
Day 6 of Training: Assignment React Js
Tags: javascript, react
Published: 2021-07-27 19:48:15

Today was my day 6 of Training in Ryaz. Apart from the Emoji-Interpreter. I had to make a recommendation app divided by different genres. So I decided to make a Anime recommendation app.

![Capture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3s24r1x58iwlj8f34oyv.PNG)
 
It is kinda similar to Emoji-Interpreter app, so not many problems occur during this project.

Live project is up on [sandbox](https://us9e4.csb.app/). Make sure to visit it guys!!, Also comment down below what you guys think that I need to watch that is totally banger.

Code for this project is updated on my [Github](https://github.com/SuryanshChopra/my-anime-recommendation)

AND THAT'S ALL!
call, apply and bind methods JavaScript
Tags: javascript
Published: 2021-07-27 19:47:54

Let's consider an object having a few properties and a method as below

```javascript
const person1 = {
  first: "will",
  last: "smith",
  role: "actor",
  getInfo: function () {
    console.log(this.first + " " + this.last + "is" + this.role);
  },
};

console.log(person1);
```
It consoles to
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7cswyztb1uyyxbxcxzq.png)
JavaScript attaches some behind the scenes things to objects.
Here with the **getInfo**, JS has attached certain methods including call, apply and bind.

Let's dig deep into them

Consider another object
```javascript
const person2 = {
  first: "taylor",
  last: "swift",
  role: "singer",
};
```
What if we want to use **getInfo** method on person2, rather than copying it, we can borrow it from person1 object (**function borrowing**)

```javascript
const person2 = {
  first: "taylor",
  last: "swift",
  role: "singer",
};

// function borrowing
person1.getInfo.call(person2)

// console
// taylor swift is singer
```
In the function borrowing, **this** points to the object passed within parathesis.

But generally, if method is to be used in multiple objects, we keep this outside the objects
```javascript
const person1 = {
  first: "will",
  last: "smith",
  role: "actor",
};

const getInfo = function () {
    console.log(this.first + " " + this.last + "is" + this.role);
}

getInfo.call(person1)

const person2 = {
  first: "taylor",
  last: "swift",
  role: "singer",
};

getInfo.call(person2)

// console
// will smith is actor
// taylor swift is singer
```

> side example,what if **getInfo** has its own arguments. Then **this** keyword points to first argument
```javascript
const person1 = {
  first: "will",
  last: "smith",
  role: "actor",
};

const getInfo = function (place) {
    console.log(this.first + " " + this.last + "is" + this.role + " from " + place);
}

getInfo.call(person1, "mars")

const person2 = {
  first: "taylor",
  last: "swift",
  role: "singer",
};

getInfo.call(person2, "earth")

// console
// will smith is actor from mars
// taylor swift is singer from earth
```

Moving towards **apply** method
Only difference between call & apply method is the way, we pass additional parameters to the method, for the above example, **apply** will work like this

```javascript
getInfo.apply(person1, ["mars"])
getInfo.apply(person2, ["earth"])
```
Now **bind** method

bind & call methods are also similar, **bind** method instead of invoking/calling it, it returns the copy of the method, which can be invoked later, let's see the example
```javascript
let info1 = getInfo.bind(person1, "mars")
info()

//or

getInfo.bind(person1, "mars")()

// console
// will smith is actor from mars
```
We call the above behaviour as **function currying**, more about this in the coming blog -- stay tuned
First Dev Log
Published: 2021-07-27 19:44:08

I'm not one who have a brand on my name, be it Youtube channel or anything. Hopefully this whole blogging experience really has some boosting effect of any kind.

Apparently, dev blog posts usually are in a somewhat teaching manner. Let's just note that for the succeeding post formats.

Lets try progress on Swift, Kotlin, and Cocos2dX next time.
Final project..
Published: 2021-07-27 19:15:27

My journey through Flatiron school is almost complete as I wrap up my React project. With the struggles endured during this project I feel it has made me a better developer and I am ready for what's next.

-Synopsis

My Project is for fighting game players to have notes on command so that they can remember what they need at any given time! As of right now I am supporting Mortal Kombat 11, Tekken 7, and Guilty Gear Strive!

-PROJECT FLOW

Starting off with a very generic home screen, can select between Creating/Viewing notes!

-Create

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4hervf9u5zjvfs20iee.PNG)

Creating a note will pull up a form depending on whether we view a character or a matchup note with the use of state. The data submitted by the form is then submitted via Redux-thunk.

-View

Upon selecting Viewing mode, users are asked to select the type and then the game separately in order to make the code easier to read.

-CharacterNoteSelect/MatchupNoteSelect

These components pull up a form that will dynamically retrieve the list of characters the selected game. Code snippets shown are for Character but are relatively the same for Matchup as well just little more code due to having to include another character!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6sk7nnlpm0b9npvlot96.PNG)
Upon mounting the component, I have redux actions to refresh the current note in redux, I then use a function to set up the form based off the game!

-NoteCard/MatchupNoteCard

These are my functional presentation components that display all the info to the client! 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz0hocpy4jswfquht6vk.PNG)
Using a little bit of destructuring, I displayed some information, but I needed the use of another component NoteList to take in each note of the character and put it in an array so that I can easily just display that array in my div!

Beyond this I also added functionality to add bullet points to a note as well!

-Conclusion

I plan on developing this application more and more and add exciting things like updates and user functionality! 

Creating this application helped me understand React to a deeper level than when I was reading material over it. With the struggles endured on this project, I am ready to face the challenges of the full-stack software development workforce.

Thank you Flatiron School for all your help.
How to Build Amazon Product Price Tracker using Python

Published: 2021-07-27 19:12:45

One of the most significant applications of Web Scraping in retail and e-commerce is in monitoring competitor product intelligence. This, when done well, can mean extra revenue and also will allow the retailer to ensure that they are always in the game and are not taken by surprise by anything the competition is doing.

https://youtu.be/7__2udOEKWY
Want to convert any SQL Query to Mongo DB Query - Shortcut
Tags: mongodb, sql, mysql, query
Published: 2021-07-27 19:10:50

Starting with Mongo DB and confused, how to proceed. MongoDB documents are a good way to proceed. 

But there is an alternative that you can follow. Open any mongoDB GUI tool. Like in my case, I am using free version of `No SQL Booster`.

Suppose you want to convert below query to mongo query:

```
select movies.title 
from movies 
inner join ratings on movies.movieId=ratings.movieId 
where movies.genres like '%Children%' 
and ratings.rating>3 
group by movies.title;
``` 
*Steps:*

####STEP 1: Connect your Mongo DB Query String, and select this SQL as shown in image:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ip1soquge2qodd37x6e.png)

####STEP 2: You wll see a text area with mb.runSQLQuery() as shown below. You can write any query, and click on Code. The code will be generated below as shown in image. Don't worry, it converts all the queries, doesnot connect on the database. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5lw7ti2tlij7ssx1rge.png)
namy.ai MVP DONE!
Tags: machinelearning, python, saas, javascript
Published: 2021-07-27 19:00:13

🎉🎉 Yaayyyyy! 🥳🎉

I just pushed the new version to GitHub, so happy!

www.namy.ai is at what I'd consider a proper "MVP" level.

WHAT: It's a domain name generator that's powered with AI.
WHY: I thought existing generators suck. Namerobot, Namekrea, Namelix, Google domains, etc... They all suck

HOW YOU CAN HELP: please check it out and give me some feedback?

Thanks! ❤️
Amazing Tricks to Learn JS faster
Tags: javascript, typescript, webdev, node
Published: 2021-07-27 18:39:23

Accept challenges, face them with courage and move ahead...
When you are trying to learn JavaScript or any coding skills in real-time, you often run into the same challenges! Agree? Sometimes it will distract your decision-making power or it may change your mindset about what to do next!

We will go step by step and it will make you more productive!
[Think Slower and You’ll Learn Faster](https://javascript.plainenglish.io/mind-blowing-tricks-to-learn-javascript-faster-3fdc27218044#43e4)
[Don’t Let Confidence Trick You into Forgetting Things](https://javascript.plainenglish.io/mind-blowing-tricks-to-learn-javascript-faster-3fdc27218044#273d)
[Don’t Let Future Decisions Stop You from Progressing Now](https://javascript.plainenglish.io/mind-blowing-tricks-to-learn-javascript-faster-3fdc27218044#eba2)
[Find Time to Code Using the Facebook Trick](https://javascript.plainenglish.io/mind-blowing-tricks-to-learn-javascript-faster-3fdc27218044#0726)
[Approach Practice with the Right Mindset](https://javascript.plainenglish.io/mind-blowing-tricks-to-learn-javascript-faster-3fdc27218044#1202)
[Write Complex Code in Plain Language First](https://javascript.plainenglish.io/mind-blowing-tricks-to-learn-javascript-faster-3fdc27218044#b6d7)
In the end, obviously — [A Conclusion](https://javascript.plainenglish.io/mind-blowing-tricks-to-learn-javascript-faster-3fdc27218044#21d1)


Read More on [Medium](https://javascript.plainenglish.io/mind-blowing-tricks-to-learn-javascript-faster-3fdc27218044).
[1] Notes on "Building Microservices" 
Tags: microservices, design, systems
Published: 2021-07-27 18:17:14

Currently reading [__Building Microservices: Designing Fine-Grained Systems__]
(https://www.oreilly.com/library/view/building-microservices/9781491950340/) and trying to curate notes for myself and some greater good :wink:. I'm trying to approach this in a minimalistic way keeping the essence of chapters intact.

## Introduction
### Small, and Focused on Doing One Thing Well
- Cohesion -  To have related code grouped together.
- Enforcing SRP by Uncle BOB
  - **Gather together those things that change for the same reason, and separate those things that change for different reasons.**
  - __Key rules__
     - Small enough and no smaller.
     - Is it codebase too big to be managed by a small team?

### Autonomous : Freedom to govern itself 
 - __Golden rule__: Can you make a change to a service and deploy it by itself without changing anything else?
 - Decoupling is an important aspect
   - Modelling the service right 
   - Choosing right good, decoupled APIs

## Key benefits
### Tech Heterogenity
  - Performance improvement can be done easily by consuming a new stack
  - Adopting new tech is easy - Start with a service with limited potential impact.

### Resilience : Capacity to recover quickly
 - __Key__ : Bulkheads (Barriers between services)
 - Service boundaries are obvious bulkheads
 - In monolithic, everthing stops at once. We run it on multiple machines to handle this scenario.
 - In microservices, building a system that handles total of failure of one service( and degrade functionality accordingly).

### Scalability
- Scaling is easier for micro than monolithic service. One aspect of complete service can be scaled individually.
- On-demand provisioning (like by AWS) on pieces that need it.

### Easy of deployment
- __Key factors__
  - Delta in subsequent releases
  - Avoiding High Risk, Large Impact deployments 
- Microservices mitigates above factors' bad consequences

### Organizational Alignment
-  Working on any one codebase to hit the sweet spot of team size and productivity.

### Composability
- Reuse of existing functionality
- Web, native application, mobile web, tablet app, or wearable device

### Replacibility optimization
- Scary Legacy code - vital and risky to replace
- Small service - Low cost to replace
Tools you need to write meta tags faster
Published: 2021-07-27 18:12:03

I have just completed learning about HTML Meta tags. I never thought that it can be so much powerful for SEO. I learnt about 20-30 meta tags, opergraph protocol and twitter cards. But after reading all thsese things , I Understood that I need to use some tools so that I can work faster. 
SO  , I am sharing some websites and tools whcih will help you to write better meta tags. Here is the list:

# General Meta tag generator
      * https://www.freemetataggenerator.com/
      * https://smallseotools.com/open-graph-generator/

# Opengraph Meta tag generator
       * https://metatags.io/

# A nice website to understand better about meta tags
       * https://www.metatags.org/

# Github Repository for collection of meta tags
       * https://gist.github.com/lancejpollard/1978404  
       * https://github.com/joshbuchea/HEAD
Creating vite vue ts template: Eslint and vue
Tags: vite, vue, eslint
Published: 2021-07-27 17:17:06

## Configure eslint for vue

1. From docs `https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser`

    > If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/package/babel-eslint) or [@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser), you have to use the `parserOptions.parser` option instead of the `parser` option. Because this plugin requires [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser) to parse `.vue` files, this plugin doesn't work if you overwrite the `parser` option.

1. `npm install --save-dev eslint-plugin-vue vue-eslint-parser`
1. Update `.eslintrc.js`
    ```diff
    -  parser: '@typescript-eslint/parser',
    +  parser: "vue-eslint-parser",
    +  // https://github.com/vuejs/vue-eslint-parser#parseroptionsparser
    +  parserOptions: {
    +    parser: "@typescript-eslint/parser",
    +  },
       plugins: ['@typescript-eslint'],
       extends: [
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',
    +    'plugin:vue/vue3-recommended',
         'prettier',
       ],
     }
    ```
1. Update `package.json`
    ```diff
    -    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
    +    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue"
    ```
1. Run `npm run lint`
1. Run `npm run format`
1. `git add -u`
1. `git commit -m 'install eslint-plugin-vue and vue-eslint-parser'`

## Links

-   https://eslint.vuejs.org/user-guide/
-   https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
-   https://github.com/vuejs/vue-eslint-parser
-   https://github.com/vuejs/vue-eslint-parser#parseroptionsparser

## Project

{% github https://github.com/imomaliev/vue-ts no-readme %}
Creating vite vue ts template: Make eslint and prettier play nice together
Tags: prettier, eslint, vue, vite
Published: 2021-07-27 16:58:28

## Install eslint-config-prettier

1. `npm install --save-dev eslint-config-prettier`
1. Add `'prettier'` to `.eslintrc.js`

    ```diff
    module.exports = {
      ...
      extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
    +    'prettier',

      ],
    }
    ```

1. Run `npm run lint`
1. Run `npm run format`
1. `git add -u`
1. `git commit -m 'install eslint-config-prettier'`

## Links

-   https://github.com/prettier/eslint-config-prettier#installation
-   https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/

## Project

{% github https://github.com/imomaliev/vue-ts no-readme %}
Codewars Return To Sanity JavaScript
Tags: javascript, beginners, tutorial, webdev
Published: 2021-07-27 16:58:17

This article explains how to solve the kata [Return To Sanity](https://www.codewars.com/kata/514a7ac1a33775cbb500001e/javascript) from Codewars in JavaScript.

## Instructions
>This function should return an object, but it's not doing what's intended. What's wrong?
### Provided Code
```javascript
function mystery() {
  var results =
    {sanity: 'Hello'};
  return
    results;
}
```
## Discussion
This kata is testing our understanding of the keyword [`return`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return).

The `return` keyword ends function execution and specifies what value the function outputs.

One point to consider: since `return` stops the function from running, any code after a return statement that is executed will not be run.

Another point to consider: if no value follows the `return` keyword, the function will return `undefined`.

A final point to consider: JavaScript has a feature called **automatic semicolon insertion**. Basically, writing semicolons in some places in JavaScript is optional. The compiler is smart enough to figure out where it needs to insert semicolons into your code so that it runs successfully. For example:
```javascript
// What you write
const firstName = "Nadia"
const lastName = "Montoya"

// What the compiler converts it to
const firstName = "Nadia";
const lastName = "Montoya";
```
This feature can have unintended consequences if you're not cognizant of it. For example in the below code, the compiler will insert a semicolon after `return` because nothing follows it on the same line.
```javascript
// What you write
function createAPersonObject() {
    return 
    {
        age: 28,
        name: "Dylan",
        hairColor: "brown",
        likesPineappleOnPizza: false
    }
}

// What the compiler converts it to (which will return undefined)
function createAPersonObject() {
    return;
    {
        age: 28,
        name: "Dylan",
        hairColor: "brown",
        likesPineappleOnPizza: false
    }
}
```
There are a lot of nuances when it comes to where you can omit semicolons in your code and count on automatic semicolon insertion to help you out. If you want to dive into the nitty gritty, I enjoyed reading [this article](http://www.bradoncode.com/blog/2015/08/26/javascript-semi-colon-insertion/).

## Solution
So the whole crux of the issue in this kata is that the `return` keyword is on a line by itself. We need to make sure automatic semicolon insertion doesn't make the function return `undefined` instead of `results`.
```javascript
function mystery() {
  var results =
    {sanity: 'Hello'};
  return results;
}
```
---
Hope you enjoyed the article!
Follow me on [LinkedIn](https://www.linkedin.com/in/dylanattal/) and [GitHub](https://github.com/DylanAttal)!