teleren/devto huggingface dataset:
10 Free Public APIs for developers you need to use for your next projects
Tags: webdev, javascript, programming, beginners
Published: 2021-08-17 13:32:51

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

### 1. New York Times

Provides news

🔗https://developer.nytimes.com/?ref=apilist.fun

### 2. Cat Facts

Daily cat facts

🔗https://alexwohlbruck.github.io/cat-facts/?ref=apilist.fun

### 3. GeoName API

Geographical database covers all countries and contains over eleven million placenames that are available for download free of charge

🔗http://www.geonames.org/export/?ref=apilist.fun

### 4. Food API

Let’s you access over 330,000 recipes and 80,000 food products

🔗https://spoonacular.com/food-api

### 5.  Fixer. io

Exchange rates and currency conversion

🔗https://fixer.io/?ref=apilist.fun

### 6. Currencylayer

Exchange rates and currency conversion

🔗https://currencylayer.com/documentation?ref=apilist.fun

### 7. Adorable Avatars

Generate random cartoon avatars

🔗https://adorable.io/?ref=apilist.fun

### 8. Ipstack

Locate and identify website visitors by IP address

🔗https://ipstack.com/?ref=apilist.fun

### 9. Random Facts API

Get random Facts on different topics

🔗https://fungenerators.com/api/facts/?ref=apilist.fun

### 10. Superhero API

Get all SuperHeroes and Villians data from all universes under a single API

🔗https://superheroapi.com/?ref=apilist.fun

_I hope found this useful and if you did please let me know. If you have any questions feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)._
Um errinho em Elixir
Tags: elixir, erlang
Published: 2021-08-11 15:10:21

Elixir não é uma linguagem perfeita, claro.

O "erro" que vou comentar aqui está na função [Enum.at/3](https://hexdocs.pm/elixir/1.12/Enum.html#at/3).

Deixa explicar melhor. Se eu tenho uma lista com 5 elementos:
```elixir
[:a, :b, :c, :d, :e]
```
e eu perguntar a você qual é o terceiro elemento, obviamente você vai me responder que é o `:c`.


Mas se eu usar [Enum.at/3](https://hexdocs.pm/elixir/1.12/Enum.html#at/3) da seguinte forma:
```elixir
Enum.at([:a, :b, :c, :d, :e],3)
```
o resultado vai ser:
```elixir
iex> Enum.at([:a, :b, :c, :d, :e],3)
:d
```

Interessante é que é um "erro" (coloco entre aspas por não ser um erro de verdade mas sim uma escolha que eu acredito ser errada) que [não veio do Erlang](https://erlang.org/doc/man/lists.html#nth-2):
```erlang
> lists:nth(3, [a, b, c, d, e]).
c
```

O Maxsuel Maccari explicou [neste tweet](https://twitter.com/maxmaccari/status/1425476422425092106?s=20) a razão provável deste erro estar em Elixir. Ruby faz isso. Veja [aqui](https://ruby-doc.org/core-2.7.0/Array.html) e abaixo:

```ruby
arr = [1, 2, 3, 4, 5, 6]
arr[2]    #=> 3
arr[100]  #=> nil
arr[-3]   #=> 4
```

Ruby adiciona requintes de crueldade permitindo índices negativos.
#14) Explain Closures in JS❓
Tags: javascript, webdev, beginners, career
Published: 2021-08-11 16:24:51

✅A Closure is the combination of function enclosed with refrences to it's surrounding state.
`OR`
✅A Closure gives you the access to an outer function's scope from an inner function.
✅Closure are created every time a function is created.
✅It is an ability of a function to remember the variables and function declared in it's outer scope.

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

Let's talk about the above code👇
💠The function `car` gets executed and return a function when we assign it to a variable.
`var closureFun = car();`

💠The returned function is then executed when we invoke closureFun:
`closureFun();`

💠Because of closure the output is `Audi is expensive💰🤑`
When the function _car()_ runs, it sees that the returning function is using the variable _name_ inside it:

`console.log(name + " is expensive💰🤑");`

💠Therefore car(), instead of destroying the value of name after execution, saves the value in the memory for further reference.

💠This is the reason why the returning function is able to use the variable declared in the outer scope even after the function is already executed.

✔This ability of a function to store a variable for further reference even after it is executed, is called Closure. 
__________________________________________________________________
How to Install Elementor Pro in WordPress 2021
Tags: wordpress, programming, php, webdev
Published: 2021-08-11 16:48:56

How to Install Elementor Pro in WordPress 2021 | How to Buy Elementor Pro

To Buy and Install Elementor Pro version in WordPress follow these steps:

1. Go to the elementor.com website link
2. Go to pricing and choose 'essential plan' for the Elementor Pro WordPress Plugin.
3. Create a new account to download the Elementor Pro version.
4. After filling in the billing details, download the elementor Pro Plugin

**How to Install the Elementor Pro - Vodeo Tutorial!**

{% youtube ERQn0Vh84ik %}

5. After complete the downloading, open WordPress, go to plugins, and click add new.
6. Upload the downloaded zip file of Elementor Pro Plugin and install.
7. After installation activates the Plugin.
8. Must install elementor now, to use the pro version of Elementor Plugin.
9. Now, connect and activate the plugin with provided license key.
10. Congratulations! Elementor Pro is activated and ready to use.
Best Programming Stuff.
Published: 2021-08-20 15:21:28

I  have seen some of the programming stuff article on internet as usual sharing it with you guys...Some of the websites are having affiliate links.

## 1. Best Monitors For Programming ##

When programming or coding for long periods, it's essential to have a comfortable monitor to keep eye strain to a minimum.

1. [Best Monitor For Programming](https://suggestedstuff.com/best-monitors-for-programming-in-india-2021/)

2. [Best Monitor For Programming](https://www.rtings.com/monitor/reviews/best/by-usage/programming-and-coding)

3. [Best Monitor for Programming & Coding (2021 Update)](https://www.guru99.com/best-monitor-programming.html)

## 2. Best Keyboard For Programing ##

As developers we don’t need many tools to work, many would say that we just need a laptop or computer, and even though that’s true, there’s a difference between having the minimum required to work to have the tools that you need to work comfortably, productive and healthy.

1. [List of Best keyboard for programming India 2021](https://cmsinstallation.blogspot.com/2021/04/best-keyboards-for-programming-in-2021.html)

2. [8 Best Keyboards for Programming in India 2021](https://www.thecrazyprogrammer.com/2020/09/best-keyboards-for-programming-in-india.html)

3. [Best Keyboard for Programming & Coding in 2021](https://www.guru99.com/best-keyboards.html)

## 3. Best Mouse For Programing ##

Programmer, Gammers, and coders spend their whole day with computers. So they have comfortable things for use. A standard mouse is irritating to use for a long time. A mouse that puts your hand in an unprejudiced position is maybe the best way to reduce these problems you just have to find a vertical or trackball mouse. Here, I've listed the Best mouse for programming.

1. [7 Best Mouse For Developer / Gaming / Coding](https://cmsinstallation.blogspot.com/2021/05/7-best-mouse-for-developer-gaming-coding.html)

2. [Best MOUSE for Programming & Coding (2021 Updated List)](https://www.guru99.com/best-mouse-programming.html)

3. [The best mouse of 2021: 10 top computer mice compared](https://www.techradar.com/in/news/computing-components/peripherals/what-mouse-10-best-mice-compared-1027809)
Pandas Core Components - The Data Frame Object

Tags: dataframe, pandas, series, columns
Published: 2021-08-11 19:11:05

• The DataFrame Object
• 1. Constructing a DataFrame From a Series Object
• 2. Constructing a DataFrame From a Dictionary
• 3. Constructing a Dataframe by Importing Data From a File
The DataFrame Object #
In the previous lesson, we learned about Series. The next fundamental
structure in Pandas that we will learn about is the DataFrame. While a Series
is essentially a column, a DataFrame is a multi-dimensional table made
up of a collection of Series. Dataframes allow us to store and manipulate
tabular data where rows consist of observations and columns represent
variables.
There are several ways to create a DataFrame using pd.DataFrame() . For
example, we can create a DataFrame by passing multiple Series into the
DataFrame object, we can convert a dictionary to a DataFrame or we can
import data from a csv file. Let’s look at each of these in detail.
1. Constructing a DataFrame From a Series Object #
We can create a DataFrame from a single Series by passing the Series object as
input to the DataFrame creation method, along with an optional input
parameter, column, which allows us to name the columns:
import pandas as pd
data_s1 = pd.Series([12, 24, 33, 15],
 index=['apples', 'bananas', 'strawberries', 'oranges'])
# 'quantity' is the name for our column
dataframe1 = pd.DataFrame(data_s1, columns=['quantity'])
print(dataframe1)
2. Constructing a DataFrame From a Dictionary #
We can construct a DataFrame form any list of dictionaries. Say we have a
dictionary with countries, their capitals and some other variable (population,
size of that country, number of schools, etc.):
dict = {"country": ["Norway", "Sweden", "Spain", "France"],
 "capital": ["Oslo", "Stockholm", "Madrid", "Paris"],
 "SomeColumn": ["100", "200", "300", "400"]}
data = pd.DataFrame(dict)
print(data)
We can also construct a DataFrame from a dictionary of Series objects. Say we
have two different Series; one for the price of fruits and one for their quantity.
We want to put all the fruits related data together into a single table. We can
do this like so:
import pandas as pd
quantity = pd.Series([12, 24, 33, 15],
 index=['apples', 'bananas', 'strawberries', 'oranges'])
price = pd.Series([4, 4.5, 8, 7.5],
 index=['apples', 'bananas', 'strawberries', 'oranges'])

df = pd.DataFrame({'quantity': quantity,
 'price': price})
print(df)
3. Constructing a Dataframe by Importing Data From a File #
It’s quite simple to load data from various file formats, e.g., CSV, Excel, json
into a DataFrame. We will be importing actual data for analyzing the IMDB-
movies dataset in the next lesson. Here is what loading data from different file
formats looks like in code:
import pandas as pd
# Given we have a file called data1.csv in our working directory:
df = pd.read_csv('data1.csv')
#given json data
df = pd.read_json('data2.json')
We have only just scratched the surface and learned how to construct
DataFrames. In the next lessons we will go deeper and learn-by-doing the
many methods that we can call on these powerful objects.
How to use Sunburst Chart in Excel 365? ~ Easy Tricks!!
Tags: usesunburstchart
Published: 2021-08-18 12:54:50

---
title: How to use Sunburst Chart in Excel 365? ~ Easy Tricks!!
published: true
date: 2021-08-11 16:43:45 UTC
tags: UseSunburstChart
canonical_url: https://geekexcel.com/how-to-use-sunburst-chart-in-excel-365-easy-tricks/
---

Have you ever tried to **Use Sunburst Chart** on your Excel sheet? Do you have any good methods for solving this task in Excel? Here I will introduce you to some quick tricks to deal with this problem. Let’s get them below!! Get an official version of MS Excel from the following link: **[https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)**

## Create Sunburst Chart

- You need to **enter the data** in the Excel spreadsheet.
- For instance, we have created a list of **student mark list for each subject**.

![](https://geekexcel.com/wp-content/uploads/2021/08/student-marklist-1.png)<figcaption>List of student mark list for each subject</figcaption>

- Then, you have to **select the data** in Excel worksheet.
- Now, you need to go to the **Insert tab**.
- After that, you have to click on the **Insert Hierarchical charts** under the **Chart** section.

![](https://geekexcel.com/wp-content/uploads/2021/08/Click-on-insert-hirerachical-chart.png)<figcaption>Click on the Insert Hierarchical charts</figcaption>

- Finally, you need to select **Sunburst Charts.**

![](https://geekexcel.com/wp-content/uploads/2021/08/click-on-sunbrust-chart-1024x382.png)<figcaption>Sunburst chart</figcaption>

## Wind-Up

Hope you like this article on **how to Use Sunburst Chart In Excel 365**. Let me know if you have any **doubts** regarding this article or any other Excel/VBA topic.

Thank you so much for visiting  **[Geek Excel](https://geekexcel.com/)!! **If you want to learn more helpful formulas, check out [**Excel Formulas**](https://geekexcel.com/excel-formula/) **!! **
Main and Master repo in Github - How to solve
Tags: devjournal, github, devops, 100daysofcode
Published: 2021-08-12 07:26:48

I had a problem before where there are two branches in my github rep:

*main*
*master*

Although both should have the same function (as main replaced master), a 'master' branch was instantly created when I try to push my local repo to remote repo.

After some digging, I found a simple solution. Here's what I did:
 
```bash
Eden Jose@EdenJose MINGW64 ~/Desktop/Git/1-KodeKloud (master)
$ git branch -m master main

Eden Jose@EdenJose MINGW64 ~/Desktop/Git/1-KodeKloud (main)
$ git branch
* main

Eden Jose@EdenJose MINGW64 ~/Desktop/Git/1-KodeKloud (main)
$ git push -f --set-upstream origin main
Total 0 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/joseeden/KodeKloud_Tasks.git
+ 6a54f03...4fe82a2 main -> main (forced update)
Branch 'main' set up to track remote branch 'main' from 'origin'.

Eden Jose@EdenJose MINGW64 ~/Desktop/Git/1-KodeKloud (main)
$ git branch -a
* main
remotes/origin/main
remotes/origin/master

git push origin --delete master
```

You can check out more about this in the links below:

- [*My Github repo has 'main' and 'master' branches - what is their purpose?*](https://stackoverflow.com/questions/65020647/my-github-repo-has-main-and-master-branches-what-is-their-purpose)

- [*5 steps to change GitHub default branch from master to main*](https://stevenmortimer.com/5-steps-to-change-github-default-branch-from-master-to-main/)
🏀 Animación de cards al estilo Jordan 🏀
Tags: css, html, github, figma
Published: 2021-08-13 04:16:22

![Banner animación cards Jordan](https://res.cloudinary.com/www-ismyt-com/image/upload/v1628822848/IMAGENES/GITHUB/header-jordan-animation_c1is5k.svg)
<br>

Este diseñ fue creado usando unicamente css y html, lenguajes de programaciones sobre los cuales se fundamente la web.
<br>

Abajo te explico como utilizar este diseño en tu web o relacionados otros de tus elementos para crear una mejor experiencia de usuario.
<br><br>
### Veamos como se ve el diseño final
<br>

![Cover de diseño final cards jordan](https://res.cloudinary.com/www-ismyt-com/image/upload/v1628826735/IMAGENES/GITHUB/preview-jordan-cards-animation_rgmjdl.png)

## ¿Conocimiento importantes para el desarrollo?

* CSS / Position Relative
```
.card {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10000;
    transition: 0.6s;
}
```
* CSS / Position Absolute
```
img {
    position: absolute;
    max-width: 280px;
    left: 20px;
    top: 80px;
    transform: rotate(-35deg);
    transition: 0.5s;
}

```

* CSS / Hover Selector 

```
.contenedor:hover .card img {
    left: 20px;
    top: 40px;
    transition: 0.5s;
}
```

* CSS / ::Before and After Pseudo ELements
```
.contenedor:hover::before {
    width: 250px;
    height: 250px;
    right: -35px;
    top: -30px;
}
```

> Sí no conoces CSS te costará mil veces .

<br>
<br>

## El código en Javascript que permite cambiar las zapatillas
<br>
Es bien sabido que javascript es el lenguaje por mucho mas usado en la web, pero para generar dinamismo esto puede servirte como un compoente y de esa forma te permite generar ids, enlaces dinamicos entre otras cosas para que tus compoentes sean totalmente reactivos o simplemente integrar la card a un motor de plantilla o lo que quieras hacer con ella.
<br>

* Código en js

```
btnMorado.addEventListener("click", () => {
    document.getElementById("imagen").src = "img/awesome-shoes-violet.png";
});
```

Qué simplemente detecta el elemento y te permite cambiar dinamicamente la imagen previamente almacenada en el repo, o generar una función para extraer estos datos desde el backend y generar ids personalizados de forma dinamica y no manual que es mi caso particular.

<br><br>


Este es mi correo profesional ***jose@joseamaya.tech***, si me escribes te aseguro que tendrás una respuesta.

Atentamente, 


### Link al repo: [Github Repo](https://github.com/syntaxter/ui-animation-cards-jordan)
### Link a la demo: [Demo](https://syntaxter.github.io/ui-animation-cards-jordan)
<br>
![Foto de perfil](https://res.cloudinary.com/www-ismyt-com/image/upload/v1628821040/IMAGENES/GITHUB/profile_qcrojr.png)

**José A. Amaya**
# Como funciona os navegadores web?
Tags: braziliandevs, beginners
Published: 2021-08-19 13:49:35

Existem muitas coisas do nosso dia a dia que não pensamos sobre o funcionamento, quando iniciamos nossa carreira de tecnologia, às vezes, não temos tempo ou curiosidade, ou caminhos neuronais para entender algumas coisas por debaixo dos panos. Aprender o funcionamento dos navegadores foi assim para mim. O intuito desse post é trazer de maneira simples esse funcionamento e se tiver curiosidade, aconselho fortemente ler os links que eu indico ao final do post. 

Quando pedimos algo ao servidor com o enter na URL, passamos por todos os processos apresentados nos últimos posts, e ao chegar essa resposta, começa o processo de renderização, cada tipo de código passa por analisadores diferentes, verificando sintaxe e as instruções daquele trecho do código, é criada uma árvore (algumas, na verdade) com esses atributos que são chamados _nós_ e eles têm o papel de identificar o lugar, cor e características de cada componente. Caso os analisadores encontrem alguma inconsistência eles consideram o documento como inválido e dependendo da gravidade, não renderizam o componente ou até o site na tela. 

O HTML por não ser uma gramática livre de contexto, não pode ser analisado facilmente, então durante a construção da árvore DOM ela é modificada algumas vezes durante o processo e existem algumas tolerâncias de sintaxe inválida.  

Para mudanças dinâmicas, os navegadores tentam executar o mínimo de ações, usando a árvore, porém algumas modificações podem precisar de um recalculo de tudo, novo layout e nova pintura de toda a árvore, um exemplo disso seria a mudança de tamanho da fonte.

Além disso, cada navegador tem um motor de renderização diferente com especificidades e alguns consideram estilos pré-estilizados do usuário, fazendo com que desenvolvedores front-end não tenham um minuto de paz. risos. 

Os navegadores evoluiriam muito, assim como as ferramentas para a criação de conteúdo dos mesmo, além dos sites cada vez mais dinâmicos,  algumas das aplicações desktop que você utiliza no seu dia a dia, também utilizam motores dos navegadores, como Spotify, Discord e muitas outras.

Se você ficou interessado sobre navegadores: 

1. [Como os navegadores funcionam: bastidores dos navegadores modernos](https://www.html5rocks.com/pt/tutorials/internals/howbrowserswork/)
2. [Como os motores de navegadores modernos funcionam?](https://medium.com/valestart/como-os-motores-de-navegadores-modernos-funcionam-38c4d266f284)
3. [Como os navegadores processam os códigos de uma página web?](https://canaltech.com.br/navegadores/como-os-navegadores-processam-os-codigos-de-uma-pagina-web/)

Se você gostou do post, comenta algo que você sempre quis saber como funciona embaixo dos panos!
How To Enable Real-Time Merge Conflict Detection in IntelliJ
Tags: webdev, programming, productivity, git
Published: 2021-08-23 11:52:16

Ah, the dreaded resolve conflicts popup. You've finished crafting the perfect code, just a quick merge in of master (ahem, main) before you submit your PR, and then... 💥


![img-1-full.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629385750547/721xAlFE_.png)

If only there was an early warning system for merge conflicts so you could be better prepared or even avoid the conflicts in the first place I hear you say? Well if you are an IntelliJ user today is your lucky day!

Firstly, you'll need to install and set up [GitLive](https://plugins.jetbrains.com/plugin/11955-gitlive). Then if you right click the gutter on IntelliJ, you will see the option to “Show Other's Changes”.


![img-2-full.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629381420172/JVuFzhdCH.png)

It will be disabled if the file open in the editor is not from git or there are no other changes to it from contributors working on other branches (aka you are safe from conflicts). If it's enabled there will be one or more change indicators in the gutter of the editor.

![img-3-full-2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629386027868/TLFjoPsMb.png)

These will show you where your teammates have made changes compared to your version of the file and even update in real-time as you and your teammates are editing.
 
![key indicators-dark.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629718675385/q7tgwkk83.png)

If you've made a conflicting change you will see the bright red conflict indicator. These conflicts can be uncommitted local changes you have not pushed yet or existing changes on your branch that conflict with your teammates’ changes.
 
Click your teammate’s icon in the gutter to see the diff between your version and theirs, the branch the offending changes are from, and the issue connected to that branch if there is one.


![img-5-full-3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629386020142/OYnNBrg8F.png)

From this popup you can also cherry-pick your teammate’s change directly from their local version of the file. For simple conflicts this can be a quick way to resolve them as identical changes on different branches will merge cleanly.
 
Unfortunately, it's not always possible to resolve a conflict straight away but with the early warning, you'll be better prepared, avoiding any nasty surprises at merge time! 

Check out [this blog post](https://blog.git.live/gitlive-11.0-Real-time-merge-conflict-detection) or the [GitLive docs](https://docs.git.live/docs/mergeconflicts/) if you want to learn more.
SDC: DBs and Servers
Published: 2021-08-19 14:53:22

###Here's where I am on SDC:

 - I've got my API routes in shape.

 - I've got an Express server and a Postgres server active and listening on different ports on localhost.

 - My Postgres server is seeded with the data in imprecisely defined tables.

 - My Express server can retrieve data from the DB with queries that approximate the shape of the API we're replacing.

This morning I spun up two EC2 instances - one for the API (Express) and the other for the DB. The former is about as bare bones as it gets - I created the barest test db/table/record but I can confirm that a Postman request to my remote API creates a connection to the *also* remote DB that serves it the query result that it returns to Postman.

###Here's what's next:

I'm setting aside tuning my tables and queries for now. I think those will take some nitty-gritty work, but those are within my current comprehension. 

Some bigger questions are looming.

Here's where it gets fun and where I'm charting totally new territory.

I know I'll need to:
 - get my data onto my EC2 Postgres instance.
 - scale horizontally by using more instances.
  - is that db instances or service (API) instances?
 - load balance to use those instances efficiently
 - stress test by sending automated requests

Those are just some of the high level things and I really don't know how any of it will go.