teleren/devto huggingface dataset:
Why list keys matter
Tags: react, listsandkeys, index
Published: 2020-06-30 02:51:57

As I was going through KCD's Beginner React course on egghead, I decided to explore more fully why the key matters in a React list.

Let's take as a quick example a list of inputs:

```jsx
const [list, setList] = useState([
    {id: 1, value: 'agape'},
    {id: 2, value: 'philia'},
    {id: 3, value: 'storge'},
  ])
const remove = id => setList(list => list.filter(li => li.id !== id))
return <>
  {list.map(item => (
    <div style={{marginBottom: 20}}>
      <button onClick={() => remove(item.id)}>remove</button>
      <label>{item.value}</label>
      <input defaultValue={item.value} />
    </div>
  ))}
</>
```

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

[codesandbox](https://codesandbox.io/s/kind-vaughan-zuuhe)

We'll of course notice that familiar warning in the console because of the absence of a key to identify each item returned from map.

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

But precisely why?

If I click remove button on the bottom most item (storge) I notice it is removed appropriately from state and React removes it respectively from the DOM.

However, if I click to remove the second item (philia), something weird happens:

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

Our React dev tools show us that the remove function correctly adjusted our state.

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

So what is going on?

Well it's an indexing/state problem.

> If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

So if we are creating a list of items without keys:

```jsx
<div>agape</div>
<div>philia</div>
<div>storge</div>
```

React has to think about these in some kind of order:

```jsx
<div>agape</div> // key 0
<div>philia</div> // key 1
<div>storge</div> // key 2
```

But if we delete the second item, things get a little weird:

```jsx
<div>agape</div> // key 0
<div>storge</div> // key 1
```

Now storge is at index 1 instead of 2. React says no problem. Index 1 from your JSX (storge) is the same as index 1 (philia) in the DOM. But that is not the case. This is why I said there is an index/state misalignment.

1. removes the third DOM element (because there are only two)
2. matches the "storge" JSX to the "philia" div and updates a portion of it that it sees is different (i.e., the label).

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

Optimally we want React to nuke the correct DOM element (philia) and then simply update the storge DOM element. If we provide each list item with a key, React can do that because now it isn't depending on unstable indexes.

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

### Source/further reading
[Lists and Keys](https://reactjs.org/docs/lists-and-keys.html)
[Reconciliation keys](https://reactjs.org/docs/reconciliation.html#keys)
[Index as a key is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318)
Making humans understand me.
Tags: python, datascience, matplolib
Published: 2020-06-30 04:14:32

So I was wondering accross the internet. And came accross a very useful python library called matplotlib. O_o. Somehow a thought came accross my mind that i can use this to make humans understand my outputs visually. So i tried and made a github repository for the same. https://github.com/arhantbararia/pyplot
New FREE Ebook: A Quick Guide to Expert .NET Reporting Tools
Tags: dotnet, reporting, reports
Published: 2020-07-02 09:27:11

---
title: New FREE Ebook: A Quick Guide to Expert .NET Reporting Tools
published: true
date: 2020-06-30 03:59:49 UTC
tags: dotnet, reporting, reports  
canonical_url: https://www.telerik.com/blogs/free-ebook-quick-guide-to-expert-dotnet-reporting-tools
---

Visualizations have been helping people understand data for centuries. Clear and accurate reporting tools play a pivotal role in any business decision today and help companies digitize and streamline their reporting process.

Today’s data visualization tools, also called reporting tools, go beyond the standard charts and graphs used in the earlier periods. They can display data in more sophisticated ways such as infographics, dials and gauges, geographical maps, heat maps, and detailed bar, pie, and other charts. This is due to the advancement of digital information in today’s business environment.

Business processes and people are moving information at incredible speeds thanks to the adoption of digital information. This has forced businesses to adopt digital workflows to exchange information quickly. An example of this might be stock brokerage or bank transactions are done all digitally with the only bottleneck being data transfer rates.

An organization like a bank or an accounting firm or any other company which uses data for business decisions requires reporting tools that meet specific criteria to operate these high-end digital workflows. A proper reporting solution is of the utmost importance to ensure streamlined processes and accurate information is delivered.

[Our guide to expert .NET reporting tools](https://www.telerik.com/campaigns/reporting/wp-ebook-expert-.net-reporting-tools) was just published and **it is ready for FREE download.**

In this ebook, Eric Rohler, Senior Technical Engineer at Progress, offers a six-step framework to help you choose the best reporting tool for your organization. He reviews the main functionalities of reporting solutions and shares best practices for everything you need to know to deliver beautiful, powerful, interactive and reusable reports. 

Learn how to apply the top six criteria when assessing a reporting tool:

- Presentation
- Powerful
- Productive
- Pliable
- Performant
- Price

Deep dive in different stages of reporting—from report creation to styling to data sources to integration to rendering and accessibility. Take advantage of expert advice on successful integration between Reporting tools and web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, Angular, React and more) or desktop applications (WPF, WinForms, UWP) and many practical examples and use cases.

[Download FREE Reporting Ebook](https://www.telerik.com/campaigns/reporting/wp-ebook-expert-.net-reporting-tools)

If you download the ebook, we’ll soon follow up with an invitation to a dedicated reporting webinar and more materials on the topic. Stay tuned!
A simple way to detect if browser is on a mobile device with Javascript
Tags: javascript, mobile, browser
Published: 2020-06-30 03:45:10

Sometimes we need a little Javascript code snippet to detect if user use mobile device, the simplest way is detecting its browser user agent.

We use the regular expression test to detect if browser is a mobile device like:

```javascript
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  // true for mobile device
  document.write("mobile device");
}else{
  // false for not mobile device
  document.write("not mobile device");
}
```

demo is on codepen:

https://codepen.io/timhuang/pen/MWKEZMJ

Reference:

https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device
Convert Wikipedia Articles into Mind Maps
Tags: mindmapping, mindmap, wikipedia
Published: 2020-06-30 03:35:25

There’s a new web app that makes use of Wikipedia’s information format to draw a symbolic structure, which allows its users to gain a deeper understanding of the article.

![Abstraxo’s Auto generated mind map from Wikipedia’s article on dolphins](https://dev-to-uploads.s3.amazonaws.com/i/dyir5kr9ed6lcv29o0zl.png)

The **[Abstraxo](https://abstraxo.com)** web app have recently had a new and interesting feature released. Named “Wiki Import”, it allows users to search Wikipedia articles, select them, and let the app draw symbolic structures, known as mind maps from the articles.

During the search phase, once the user finds the relevant page (article), pressing the `Load` button will make the app attempt to fetch and parse the article. If successful, the article is transformed into a mind map.

![Search phase](https://dev-to-uploads.s3.amazonaws.com/i/5y8corkdy333yvzb5h1i.png)

You can start using the app now, along with the new feature on [abstraxo.com]((https://abstraxo.com))
#discuss #codenewbie
Published: 2020-06-30 03:15:11

hi #DEVcommunity! i'm revamping my portfolio site and wondering how this 'about me' section sounds. i don't have a traditional software dev trajectory so i'm trying to express my value and experience best i can. i'm open to other feedback about my portfolio as well. i'm working on adding more projects, and per recommendations, i'll be changing up the color theme (was told it's too bold) and removing the blog section until i have more content.

https://purplexm0ss.netlify.app
I created toast.log, a browser extension to see console errors as toast notifications.
Tags: showdev
Published: 2020-06-30 03:10:46

---
title: I created toast.log, a browser extension to see console errors as toast notifications.
published: true
description: Be aware of errors, warnings, and logs that are happening on your website without having to open the browser's console. See logs in a toast notification format and find out bugs you didn't know existed.
tags: #showdev
cover_image: https://i.imgur.com/R8R1tqU.png
---

Last month I had an idea to make a browser extension to see the console logs like toasts (temporary popups notifications).

So I made a proof of concept, [posted on Twitter](https://twitter.com/gvrizzo/status/1259526899996360705), and BOOM! It had over 1,100 likes and 160 pre-orders! People liked it a lot, so I made it :)

🍞 [toast.log](https://toastlog.com) is a browser extension that listens to your console and displays logs, warnings, and errors in a toast notification format - so you don't need to open your console.


[![toastlog.com](https://i.imgur.com/Ir0j5A2.gif)](https://toastlog.com)


✨ [toast.log](https://toastlog.com) is especially useful for:
- Discovering bugs you didn't know existed;
- Saving your time;
- Having more space on your screen when debugging your console;
- Having some fun seeing the logs of the websites you're browsing.

💰 [toast.log](https://toastlog.com) is a paid extension. Along with CSS Scan and CSS Scan Pro, this is my full-time work, so you'll always receive updates! 🙌

🎁 To celebrate the launch day, we're running a limited 50% offer on the website!
https://toastlog.com

🙏 I’m excited to share it with you and genuinely interested in hearing what you think about it.

💌 Thanks to everyone that already bought it and supported my work!
If you have any ideas or suggestions, I'm all ears.
Using F# and DDD to create an online card game [On hold]
Tags: programming, domaindrivendesign, functional, fsharp
Published: 2020-06-30 03:01:31

---
title: Using F# and DDD to create an online card game [On hold]
published: true
date: 2020-06-30 02:43:40 UTC
tags: programming,domaindrivendesign,functionalprogramming,fsharp
canonical_url: 
---

![Books](https://cdn-images-1.medium.com/max/1024/0*h_3nd87IIKRd8Naz)<figcaption>Photo by <a href="https://unsplash.com/@kaimantha?utm_source=medium&amp;utm_medium=referral">Claudia Wolff</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>

This would be the third post of a series of posts about domain-driven design and functional programming with F#. Last week was crazy and I didn't post anything and it was difficult to study DDD too.

Even though the third post was almost done, I decided to put this series of posts on hold for some days. The reason is that I noticed that, since it's my first time studying DDD, I still need to re-read some parts of [the book](https://www.amazon.com/Domain-Modeling-Made-Functional-Domain-Driven/dp/1680502549) to understand them better before continuing with the implementation otherwise I will get confused (and also confuse others) by forcefully writing something.

Since I'm writing this series primarily for myself, I won't bother pausing it for now. I'll continue the studies and then I'll start posting again as soon as I understand it a little bit better, maybe next Monday.

- [◀️ Part 1](https://dev.to/andremw/using-f-and-ddd-to-create-an-online-game-card-547c-temp-slug-1627209)
- [◀️ Part 2](https://dev.to/andremw/using-f-and-ddd-to-create-an-online-card-game-part-2-27nl)
Monitoring and Performance Wrap Up - June 2020
Tags: monitoring, performance, bestofdev
Published: 2020-06-30 02:30:07

Hi! I'm Helen, one of your friendly mods looking after the #monitoring and #performance tags. 

At the end of each month, I'll be showcasing some of the great posts, projects, and insights from the Dev community. 

-------------------------

Kicking us off this month is Abdisalan, who makes the case that offset has its place, but not as a tool for pagination. Check out the post and comments for more efficient alternatives.

--------------------------

{% link https://dev.to/abdisalan_js/1-sql-query-you-should-stop-using-1e5k %}

---------------------------

Ivo then makes a case for moving away from OFFSET and LIMIT when building reliable systems. If you are struggling with performance check out the advice to ensure your server can store data in memory and paginate effectively.

--------------------------

{% link https://dev.to/ivoecpereira/why-you-shouldn-t-use-offset-and-limit-for-your-pagination-610 %}

---------------------------

Next, Rhymes and Molly from the Dev team share how they used jemalloc when facing memory troubles. This alternative memory allocator can be used by multithreaded Ruby apps, like Dev.to

-------------------

{% link https://dev.to/devteam/how-we-decreased-our-memory-usage-with-jemalloc-4d5n %}

---------------------------

We then move on to JavaScript, I/O operations, and CPU-intensive tasks. By understanding their use cases, one can confidently identify the correct tools for maximizing JavaScript concurrency.

-----------------------------

{% link https://dev.to/somedood/javascript-concurrency-avoiding-the-sequential-trap-7f0 %}

---------------------------

Our next post from the Linkurious team details how they decided to give WASM a try and run a thorough benchmarking project before jumping on the bandwagon.


--------------------------


{% link https://dev.to/linkuriousdev/to-wasm-or-not-to-wasm-3803 %}

---------------------------

Our next post from Trishul gives an introduction on web workers. Check it out for more on how to use them for CPU intensive operations while the UI is free and responsive.

---------------------

{% link https://dev.to/trishul/get-started-with-web-workers-1kgm %}

---------------------------

To finish up we have a post from Bruno who takes on performance issues with Bullet. It’s very difficult to catch every N + 1 in every query we build and it’s even harder to detect cases where we should no longer preload data.

--------------------------

{% link https://dev.to/brunvez/rails-n-2-queries-4p2h %}


----------------------------

That's all for this month! For more, check out the #monitoring and #performance tags.

--------------------------
weird and curious things in javascript
Tags: javascript, typescript, node, deno
Published: 2020-06-30 02:28:17

javascript was the first programming language I learned, but javascript is not a very intuitive language.

in this post list some curiosities of javascript and I will try to explain them.

### #1

#### which goes first the egg or the chicken according to javascript.

If we take an array with two strings, one an emoji from an egg and the other that from a chicken and use the order function, how is it ordered?

```javascript

["🥚", "🐔"].sort(); // ?

```
the answer is

```javascript

["🐔", "🥚"]

```
why?

javascript uses utf-16 for character encoding, when comparing the two emojis it does so using its utf-16 number and the chicken emoji has a lower number than the egg emoji and the chicken is placed first. it is for this reason that the uppercase characters when passing the classification function remain at the beginning since they have a smaller number in the utf-16 encoding.


### #2

What happens if you add 0.1 + 0.2 and then compare that sum with 0.3?

```javascript

0.1 + 0.2 === 0.3 // false

```
This occurs because the calculations are done with base 2 and the calculations cannot be completely accurate.


what happens behind is that it makes the following comparison

```javascript

const sum = 0.1 + 0.2;

sum.toFixed(24); // 0.300000000000000044408921

sum === 0.3 // false

```
for this reason the comparison returns false, this problem is not exclusive to javascript, other languages ​​like python and ruby ​​have this problem.

if you want to work with extreme precision with numbers in javascript, the latest versions of js can now be used [bigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt)

### #3

What is the result of the following instruction?

```javascript

"b" + "a" + + "a" + "a"

```
the answer is
```javascript

"b" + "a" + + "a" + "a"    // baNaNa

```
This is evaluated as

```javascript

("b") + ("a") + (+ "a") + ("a") // baNaNa 🍌

```
by type coercion if we add the plus symbol to a string it will try to make it a number and since the letter "a" is not a number this returns NaN or (Not a Number) the other letters being concatenated resulting in the word baNaNa.

### #4

we all know that we can comment code in javascript in two ways.

```javascript

// single comment

/*
multi line comment
*/

```

but did you know that it is possible to comment using html comments.

```html

<!---
const baf = "😲";
--->

```
this is possible for javascript interoperability within html.
Snippet: Making your buttons fully accessible
Tags: a11y, html, jquery, javascript
Published: 2020-06-30 01:41:13

I'd always been under the (mistaken) impression that buttons, in order to be accessible, needed to listen to click events and the enter key - but my bubble was unexpectedly burst by reading [the specs](https://webaim.org/techniques/keyboard/).

In order to be truly accessible, buttons should activate on both the `enter` key, *and* the `space bar`. So, if you're like me and you're a) lazy and b) lazy, you can accomplish this pretty easily with a snippet like this one:

```js
// Enable space and enter activation on buttons
$("button, a.button, a.btn").on("click tap keydown", function(event) {
  if (event.type === 'click'){
    return true;
  } else if (event.type === 'keydown') {
    let code = event.charCode || event.keyCode;
    if ((code === 32)|| (code === 13)){
      $(event.target).get(0).click();
    }
  } else {
    return false;
  };
});
```

Let's break down what this does.

```js
$("button, a.button, a.btn")
```
Select elements that are buttons, or that act like buttons:

```js
.on("click tap keydown", function(event) {
```
Here we put the events we wish to capture, and then grab the event object. It's important to include 'click' here, even though we really want key presses, because:

```js
if (event.type === 'click'){
  return true;
} ...
```
We want to allow interaction events to work as normal if they are clicks, so let's catch them.

```js
} else if (event.type === 'keydown') {
  let code = event.charCode || event.keyCode;
  if ((code === 32)|| (code === 13)){
    $(event.target).get(0).click();
  }
} else {
  return false;
};
```
Okay, now we get to the key presses, and the magic! First, let's make sure we're dealing with a keypress. If we are, then we need to see _which_ key was pressed, since we only care about 2 keys. Depending on the event, we might get a code different ways, so we'll check `event.charCode` and `event.keyCode`. 

If the code returned is `32` then the user pressed the space bar, and code `13` corresponds to the enter key. 

```js
$(event.target).get(0).click();
```
This is the magic right here - this will find exact the button that was interacted with and fire off a good old-fashioned `click` event, making the button activate.

Remember when I said that we need to include `click` as a captured event? That's because we might be dealing with a fake button (such as an anchor tag with `role="button"`), and by being explicit, we're making sure not to introduce bugs unintentionally, and clicks remain working as normal.

That's my method!  Do you have your own?  Let me know!

---

**Edit**:  Thanks to [Andrew Nevins](https://dev.to/anevins12) for reminding me that `keypress` is depreciated!
Primeros Pasos con Angular.
Tags: angular, javascript, typescript, tutorial
Published: 2020-06-30 01:13:21

No vamos a entrar en que es Angular, vamos directamente en manejar y crear un proyecto angular con Angular 9.  Los comandos a emplear serán con Angular CLI:
* ng new: Crear un nuevo proyecto con todas las librerías necesarias.
* ng generate: Para generar los elementos, componentes, rutas, etc que necesita el proyecto; evitando repetir código o hacerlo manualmente.
* ng serve: Es para correr la aplicación en el localhost.
* Test y Lint permiten correr pruebas unitarias.

###Extensiones de VSCode recomendadas
* Prettier. 
* TSLint. 
* Angular 8 Snippets.
* Angular 9 Snippets.
* ES6 Snippets
* ESLint
* Bracket Pair Colorizer 2.  
* Babel ES6/ES7.
Aumentar el tamano maximo de caracteres por linea (default: 80) para pasarlo a 140.
En Settings.json de usuario o Workspace.
```json
  "prettier.singleQuote": true,
  "prettier.printWidth": 140,
```

#Instalacion
Suponiendo que tienes instalado NPM LTS,
Instalar Angular Cli
```
npm install -g @angular/cli
```
#Crear un Proyecto
Instalado previamente el CLi, ahora crearemos un proyecto, en este caso lo llamare AngularTypescript.
```
ng new Angular-Typescript
```
A las preguntas respondemos:
* Yes, a la pregunta si queremos el routing de Angular.
* Seleccionamos el Styling (ej. SCSS).

Creara entonces todos los archivos necesarios basados en Typescript, toda la configuración de angular estará en angular.json; también un .gitignore para evitar las rutas que serian carga para el repositorio.

En la carpeta src, los assets donde pondremos las imágenes, etc.  Environments serán todos los ambientes tanto de desarrollo, produccion, stagging, etc; esto permite identificar las diferentes rutas a servidores y demás.  En la carpeta app estana los primeros components y archivos para el funcionamiento de la aplicación.

#Configurando el Proyecto.
Desactivamos el cache de la consola de Chrome.  Con la consola abierta, settings, network, Disable Cache. 

Si es necesario hacer un downgrade se puede hacer a las versiones de Angular, o por temas de compatibilidad al rxjs; después hacer un:
```
npm update
```
Finalmente para correr el proyecto se ejecuta:
```
ng serve
```
Esta compilación rápida para desarrollo, para subir al repositorio o a producción deberá hacerse un Build.  Vamos a la dirección del localhost en el puerto 4200.
![First Project in Angular 10](https://dev-to-uploads.s3.amazonaws.com/i/nmyui2k2arr61yxrqm8e.png)

Continuaremos con una integración de Angular con FireBase, posteriormente haremos la integración con AWS.
Laravel-final-logger
Tags: laravel, php, logger
Published: 2020-06-30 01:09:54

Laravel-final-logger provides unique and consistent formats throughout log (all Http, Ajax requests & responses), payload (all Http, Ajax requests & responses), and server-side error log. Also, you can nullify any children properties to reduce the size of logged files.

https://github.com/Andrew-Kang-G/laravel-final-logger