teleren/devto huggingface dataset:
EventDispatch(er) vs. EventEmitter
Tags: javascript, node, eventdriven
Published: 2021-11-16 17:34:01

### <u>Intro</u>

**EventTarget** interface stands on top of the user-agent (browser), just like the **EventEmitter** class on top of Node.js or Genetics on top of Human Anatomy , you got the idea . Without Events processes (*a process is a very important concept and even a whole module in Node.js context*) could not happen . **Process**es are closely coupled with **Signals** (*in Node.js system calls that works internally via various built-in modules such as file system (fs) module , or child_process module & it’s also recognized as syscalls , which as mentioned in my previous articles – Node.js is closely related to Unix/Linux*) . Before getting into specificity , let’s underline a feature common for both user-defined (*a.k.a. synthetic*) types of event[s] triggered in-advance , instead of waiting for built-in events being triggered within specified condition met to **true** e.g. submit initiates a client **GET/POST** request within HTTP server .

---

### <u>EventDispatch(er)</u>

> Open the console on codesandbox to see result :

{% codesandbox eventdispatch-er-1-c7sqb %}

### <u>EventEmitter</u>

> Press Run (green) button to see in action :

{% replit @projektorius96/EventEmitter-1 %}

Edge case of `.nextTick()` to pay extra attention at in Node.js – read more on [Nodejs.org/api](https://nodejs.org/api/events.html#awaiting-multiple-events-emitted-on-processnexttick)

---

### <u>Articles to read</u>

- [Concept of Process, Syscalls, etc.](http://www.it.uu.se/education/course/homepage/os/vt18/module-2/)

- [Child process review](https://dev.to/projektorius96/multitasking-in-nodejs-child-process-review-447d)
Top 5 Reasons to use Seaborn for Data Visualizations
Tags: datavisualization, jupyternotebook, datascience, pandas
Published: 2021-11-29 16:40:22

---
title: Top 5 Reasons to use Seaborn for Data Visualizations
published: true
date: 2021-11-16 17:24:40 UTC
tags: datavisualization,jupyternotebook,datascience,pandas
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/600/1*XWk-C0OFu4N8ZE4XdxN3og.png)](https://medium.com/dunder-data/top-5-reasons-to-use-seaborn-for-data-visualizations-34523b357b2a?source=rss----c2aa71d9ec41---4)

[Continue reading on Dunder Data »](https://medium.com/dunder-data/top-5-reasons-to-use-seaborn-for-data-visualizations-34523b357b2a?source=rss----c2aa71d9ec41---4)
How to create ecommerce store with PHP and MySQL
Tags: php, ecommerce, javascript, beginners
Published: 2021-11-16 17:10:14

Get started with eCommerce website development from scratch with my new basic eCommerce development script

https://www.youtube.com/watch?v=1yNKebDqO6o

Download Source Code: https://www.biggidroid.com/product/basic-ecommerce-php-mysql/

Features:
Admin Dashboard
Cart Page
Checkout Page
Customer Account Page
Login Page
Registration Page
Category Page
Support Product Image Compression
Payment Gateway Included
and many more …
Time complexity of two by two comparison
Tags: optimization, comparison, math, algorithms
Published: 2021-11-16 16:51:27

You have probably been faced with a very simple and common problem: comparing unique elements in a list, two by two, when the order doesn't matter.

Comparing _n_ elements with _n_ elements is going to have a complexity of _n²_. But when the order doesn't matter, comparing element A to B is the same thing as comparting B to A, so the complexity is going to be less than _n²_.

For this algorithm all we have to do is to implement a for loop that increments the initial position each time we finish comparing to the remaining items in the list.

###But the question remains: How faster is it going to be in theory?

I didn't know the complexity of this second approach, so [I googled it](https://stackoverflow.com/questions/18859430/how-do-i-get-the-total-number-of-unique-pairs-of-a-set-in-the-database) and it turns out that it is _n(n-1)/2_, where n is the number of elements. Now I wanted to know how faster it was going to be relative to _n²_. 

So all I had to do was to divide both complexities to see how they grow relative to each other. See the graph below:

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

It turns out that when _n_ goes to infinite, this value goes to 2. So that means that the second approach is about two times faster.

Now it is obvious to me that it is 2 times faster. I mean, each comparison should appear twice. For example, we have the elements A, B, and C so we would have AB, AC, BA, BC, CA, CB. Half of those are the same comparison when the order doesn't matter.

In this case if I had been smarter I wouldn't have needed to do any calculations. However, this very same exercise of comparing different algorithmic complexities can be useful for you when your theoretical gains are not that obvious, and this information might help you decide if the complexity of the implementation outweighs the gains in processing time.
Injeção de Dependência
Published: 2021-11-16 16:48:41

O que é injeção de dependência? O que ela tem a ver comigo? O que ela come?

A injeção de dependência é uma prática essencial nos dias de hoje. Apesar de eu falar sobre ela no âmbito do Android, ela é utilizada em todas as linguagens orientadas a objeto, pois ela fornece um fraco acoplamento entre as entidades, permitindo que a sua aplicação possua uma boa arquitetura. Ela também possui um papel fundamental nos testes automatizados, pois permite quer façamos a troca das dependências sem realizar nenhuma modificação nas classes.

# Vamos de exemplo
Imagine um carro. O carro possui uma dependência de um motor. Nós podemos representar dessa forma no Kotlin:

``` kotlin
class Car {
    
    private val engine = Engine()

    fun start() {
        engine.start()
    }
}
```

Nesse caso o motor está definido dentro do carro. Temos um acoplamento forte, pois o carro só permite um tipo de motor. Essa relação cria uma dificuldade caso eu queira um motor diferente. Nos testes automatizados, caso eu queira criar um FakeMotor() isso também não seria possível. 
Mas com uma alteração já podemos ver algo diferente:

``` kotlin
class Car(private val engine: Engine) {
   fun start() {
      engine.start()
   }
}
```

Aqui já podemos dizer que temos uma injeção de dependência! Quando recebemos o Engine como parâmetro permitimos diferentes implementações como um EletricMotor ou um FakeMotor no caso de um teste automático. A forma demostrada acima é chamada de **Injeção de Construtor**. No Android podemos fazer de outra forma com Kotlin:

```kotlin
class car {

   lateinit var engine: Engine

   fun start() {
      engine.start()
   }
}

fun main(args: Array) {
   val car = Car()
   car.engine = Engine()
   car.start()
}
```

Essa segunda forma é chamada se **Injeção de Setter**. Como Algumas classes são instanciadas por sistema, como Activities ou Fragments, as vezes não é possível se utilizar da Injeção por Construtor.

Essa é a forma manual de injeção de dependência. Agora imagine que você precisa instanciar todas a partes de um carro? Muita coisa né? Pra isso existem bibliotecas como o Dagger ou o Hilt que podem ajudar a fazer isso de forma automática criando um Graph em memória. Mas isso é assunto para um próximo artigo. A lição valiosa importante aqui é gerar um acoplamento forte da sua classe, pois isso engessa o seu modelo e torna qualquer teste e qualquer refatoração um trabalhão no futuro!
Proyecto 3: Pensamientos 1
Published: 2021-11-16 16:39:21

Hablando sobre el proyecto 3, aunque empecé hace un par de días, de momento es un reto. Es bastante difícil comprender algunos conceptos que se están tomando de referencia del libro. De momento estoy teniendo problemas comprendiendo el stack allocation ya a la hora de programarlo, creo que es el concepto que menos comprendo cómo implementar.

Otra cosa que se me hace confusa de momento es el address y register descriptors. De momento, estoy manejando diccionarios (k: String, v: String[]), entonces sería fácil acceder al registro o dirección por medio de la llave y consultar a qué lugares está haciendo referencia por medio de la lista que tiene como valor. Creo que es una manera sencilla de manejar esto, pero quizás se complica algo para getReg, pero aún no lo implemento.
Pensamientos 2: Proyecto 2
Published: 2021-11-16 16:37:08

Generalmente, siguiendo la especificación del libro del dragón, no enfrenté tantos problemas al implementarlo. Sin embargo, lo que NO estaba especificado en el libro del dragón, fue considerablemente difícil de implementar, principalmente structs.

Estoy bastante atrasado en esta entrada, nunca la terminé. Pero en general, este proyecto no causó tantos problemas. Quizás el mayor problema que experimenté además de lo mencionado anteriormente, fue realizar las especificaciones por medio de un Listener. Me dio problemas un par de veces debido a que a veces las reglas debían producir labels hasta la segunda salida de método por ejemplo. Entonces para estos casos, había que manejar banderas internas para saber cuando fue la segunda salida o algo similar. En esta parte del proyecto, definitivamente se beneficiaba utilizar un Visitor.
DevBox 1.3.0 🎉 
Tags: news, productivity, startup, webdev
Published: 2021-11-16 16:33:58

Hi 👋

I'm excited to announce that [DevBox](www.dev-box.app) 1.3.0 is out! It's a big milestone for the project, with **4 new tools**, bug fixes and the **web application**.

> DevBox is a desktop application / browser extension / web application of useful tools for developers. If you are curious, check out the [introductory post](https://dev.to/gdotdesign/devutils-everyday-utilities-for-the-everyday-developer-4m) and [website](www.dev-box.app).

## Web Application

DevBox is now available as a web application on [app.dev-box.app](https://app.dev-box.app) with **10 tools to use for free** 🎉 the other **30 tools** that can be used with a subscription.

## New Tools

There are **4 new tools** in this release:

- Added **Color Contrast Calculator** tool.
- Added **Data URI Generator** tool.
- Added **Hash Generator** tool.
- Added **HMAC Hash Generator** tool.

My favorite new tool is the **Color Contrast Calculator** with which you can calculate if the given text is readable on a background:

![Color Contrast Calculator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44f33nxf79o7xdftup1g.png)

## Behind the Scenes

Development wise this release had its challenges:

**Make sure that the application works in different platforms / environments (web application, desktop applications, extensions)**

I needed to separate the source code for the core of the application - basically the tools. Once that done, I could build separate versions of it: **desktop application / extension**, **public web application (with the free tools)**, **private web application (all tools)**

**Make sure that the web application loads fast.**

Previously the application's size wasn't a factor since all the assets were bundled for the desktop application.

I refactored the code to only load scripts when they are needed. This makes the initial loading times fast. Once a script is loaded then it's cached, so future uses are instantaneous. 

**Allow users to subscribe to the application.**

This was the biggest part. I've built a web server in Crystal which is basically serves the public application (free tools only) when logged out and the private application (all tools) when logged in.

Payment wise I've implemented Stripes checkout sessions - they provide a nice UI to purchase and manage subscriptions.

Users don't need to have passwords instead they log in with a link sent through an email which they used to pay for the subscription.

------

Let me know your feedback in the comments 🗨️ 🙏
1 line of code: How to clean an Array
Tags: javascript, webdev, productivity, codequality
Published: 2021-11-16 16:29:26


```javascript
const clean = arr.filter(item => !!item || item === 0 || item === false);
```
Returns a new array without `empty strings`, `NaN`, `null`, `undefined` items.


---

## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---
Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---
Iterating collections and arrays in parallel by setting thread priority
Tags: java, tutorial, programming
Published: 2021-11-16 16:11:19

Through the underlying configurable [**BackgroundExecutor**](https://dev.to/bw_software/optimizing-cpu-usage-by-performing-tasks-in-parallel-4ojg) the **IterableObjectHelper** component is able to iterate a collection or an array in parallel and execute an action on each iterated item giving also the ability to set the threads priority. Before starting to use this component  we need to add the following dependency to our pom.xml:

{% gist https://gist.github.com/Roberto-Gentili/536ee2d3f775030d46d82a008da10dbe.js %}

… And now let’s see the code:

{% gist https://gist.github.com/Roberto-Gentili/14d4344f9756490a3dafce4eb52521ad.js %}
React: Giving Elements a Unique Key Attribute
Tags: javascript, react, webdev, beginners
Published: 2021-11-16 16:01:52

* Remember when you create an array of elements, each one needs a `key` attribute set to a unique value. React uses these keys to keep track of which items are added, changed, or removed. This helps make the re-rendering process more efficient when the list is modified in any way.
* Code:
```React
const frontEndFrameworks = [
  'React',
  'Angular',
  'Ember',
  'Knockout',
  'Backbone',
  'Vue'
];

function Frameworks() {
  const renderFrameworks = null; // Change this line
  return (
    <div>
      <h1>Popular Front End JavaScript Frameworks</h1>
      <ul>
        {renderFrameworks}
      </ul>
    </div>
  );
};

```
* Here FreeCodeCamp wants us to map the array `Frameworks()` to an unordered list, much like in the last challenge. Let's finish writing the `map` callback to return an li element for each framework in the `frontEndFrameworks` array.

* Answer:
```React
function Frameworks() {
  const renderFrameworks = frontEndFrameworks.map(l => <li key = {l}>{l}</li>); 
```


####Note: 
* Keys only need to be unique between sibling elements, they don't need to be globally unique in your application.
Best of Both Worlds: How navigation works in Next.js
Tags: nextjs, react, javascript, webdev
Published: 2021-11-16 16:01:45

## Server-Side Rendering, Client-Side Navigation
Next.js is best known for being an SSR (Server-Side Rendering) framework, but it does support client-side navigation. This means you can expect a partial reload when navigating between your pages, just like with a regular SPA app. Great in terms of user experience!

But wait. With client-side navigation, the new page is rendered by JS on the client side rather than on the server side. Does this really make sense for an SSR framework? 

After all, the whole point of using an SSR framework is to avoid client-side rendering, so that web crawlers can index the entire page even if they don't run JS, which results in a better SEO result.

This turns out not to be a problem for Next.js nagivations. In fact, if you disable JS in your browser ([here is how in Chrome](https://developers.google.com/web/tools/chrome-devtools/javascript/disable)), you will see that page navigation still works in your Next.js website.

## How Does It Actually Work?
What's really happening is, every `<Link>` component in Next.js has this `<a>` tag under the hood. When you click on the link, some JS will run to render the new page and prevent the default `<a>` navigation.

When JS is disabled, client-side navigation won't work, but the default `<a>` navigation still works. The new page will be rendered on server side, then fetched and reloaded on the client side. And that's exactly what web crawlers need to navigate between your pages. 

## Best of Both Worlds
The Next.js navigation really is the best of both worlds:

| Traditional Website | SPA | Next.js |
|--|--|--|
| Worse User Experience | Better User Experience | As Good As SPA！|
| Better SEO Results| Worse SEO Results| As Good As Traditional Website!|
AG Grid Tip: HeaderNames
Published: 2021-11-16 15:51:23

Did you know that you don't always have to provide a `headerName` to your column definitions in AG Grid? 

Why? AG Grid will do a best guess at providing a human readable header based off your field name. So make sure you are not doubling your configurations by manually setting the same header name that the grid provides for you.

### Simple Field Names

For example, if your field is `athlete` then AG Grid will capitalise it to give the header name `Athlete`. 

```ts
columnDefs:  ColDef[] = [   
  { field: 'athlete' }
];
```
![Athlete Header Name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vex0tggyzymim256t5x.png)

### Camel Cased Fields

If your field is `myCustomFieldName` then AG Grid will provide this header name for your column: `My Custom Field Name`. 

```ts
columnDefs:  ColDef[] = [   
  { field: 'myCustomFieldName' }
];
```
![My Custom Field Name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/un2dh3r5zm11fuocl0kt.png)

As you can see the default header name is produced by splitting on capital letters and capitalising the first which is often what you want.

### Manual Header Names

Of course you can always override the default and set the `headerName` property manually but only do this when you need to and keep you column definitions clean!

```ts
  { field: 'athlete', headerName: 'Best Athlete' } 
```

![Using HeaderName](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ftnc8m0olj6r0140s68.png)

### ValueGetter Header Names

You can also use the callback `headerValueGetter` which is useful for customising the header based on the callback parameters. 

```ts
  { field: 'athlete', headerValueGetter: (params) => 'New Athlete' 
```
![Using headerValueGetter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnn5xmhl31gckkpv4knt.png)

For further reference see these properties in the [AG Grid Docs](https://ag-grid.com/angular-data-grid/column-properties/#reference-header)


{% youtube oZaXyAmnLpM %}
Tiếng anh của mấy ông DEV việt nam, buồn cười phết.
Published: 2021-11-16 15:47:44

---
title: Tiếng anh của mấy ông DEV việt nam, buồn cười phết.
published: true
description: Tiếng anh của mấy ông DEV việt nam, buồn cười phết
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Ukm, DEV tốt nhưng ngoại ngữ quá tệ, ở đây ý mình nói là speaking, listening, còn read hay write thì có công cụ hỗ trợ mình rồi. Việc còn lại làm sao luyên speaking, listening và phát âm chuẩn Anh - Anh, Hay chuẩn Anh - Mỹ cho tốt thôi.

Đi làm khoảng 10 năm (cho các công ty outsource, chủ yếu làm trong teams có người Việt quản lý và làm các dự án Âu mỹ. RỒi thời gian thôi qua, Khi 1 ông DEV có khả năng dev dự án với mọi công nghệ để đáp ứng mọi ví trí, mọi công việc của dự án yêu cầu. Từ Frontend - Backend - Build server nhỏ - Datatabse - System design - UI/UX - DEVOPS. Đi tài liệu chủ yếu là English Nhưng bảo giới thiệu 1 câu bằng tiếng Anh thì không nói được. Mình viết bài này chắc cũng nhiều người giống như mình hiện tại. Nói chung buồn lắm. Đi phỏng vấn thử 1 vài JOB yêu cầu English rất ngại vì cảm thấy tự ti. Không dám deal lương cao như 1 số bạn có English tốt. Mặc dù kĩ năng CODER thần thành.

Nhiều lúc tự dặn lòng cần phải đầu tư thêm thười gian hằng ngày để học nhưng lại vì công việc bận rộn,bận cầy cuốc mà bỏ giở việc học. 50 năm cuộc đời sống là để đi là. Cứ cho là còn 40 năm nữa để làm việc đi. Nhưng nếu chấp nhận làm 1 công ty chỉ yêu cầu kĩ năng phổ thông không yêu cầu tiếng Anh thì chắc sớm bị công ty thay máu thôi. Công ty luôn thích tuyển người trẻ, người mới để dễ sai bảo và có lời hơn. Giữ và nuôi người cũ tốn kém quá. Nhất là khoảng lương thưởng cuối năm. Giấu không được đâu, mặc dù mồm người ta nói là không nói nhưng sau đó người biết hết, rồi so đo, ganh tị nhau với ánh mắt đéo thích mặc dù thực tế ông làm nhàn vãi Lìn ra ý mà nhận lương cao hơn tôi. Đấy cơ bản đi làm thuê ăn lương mấy công ty méo công bằng lắm, Nên muốn tìm công ty nào tốt tốt tí nhảy/

30 rồi méo nói được tiếng Anh, mất nhiều cơ hội làm việc những JOB remote, JOB FReelancer, Đọc yêu cầu thì kĩ năng để làm không thiếu nhưng lại thiếu cái ngôn ngữ để giao tiếp. Ôi cái ĐCM cuộc đời, sao tôi dốt tiếng ANh thế này. 


ĐM DEV đéo biết tiếng ANH.
React: Change Inline CSS Conditionally Based on Component State
Tags: javascript, webdev, beginners, react
Published: 2021-11-16 15:41:13

* In this post, FreeCodeCamp will talk about combining applications of conditional rendering and the use of inline styles. You can also render CSS conditionally based on the state of a React component. To do this, you check for a condition, and if that condition is met, you modify the styles object that's assigned to the JSX elements in the render method.
* Code:
```React
class GateKeeper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ input: event.target.value })
  }
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    // Change code below this line

    // Change code above this line
    return (
      <div>
        <h3>Don't Type Too Much:</h3>
        <input
          type="text"
          style={inputStyle}
          value={this.state.input}
          onChange={this.handleChange} />
      </div>
    );
  }
};
```
* Here we have a simple controlled input component with a styled border. You want to style this border red if the user types more than 15 characters of text in the input box.

*Answer:
```React
  render() {
    let inputStyle = {
      border: '1px solid black'
    };
    if (this.state.input.length > 15) {
       inputStyle.border = '3px solid red'
    }
```
####Notes:
* When you set a style object based on a condition, you describe how the UI should look as a function of the application's state. There is a clear flow of information that only moves in one direction. This is the preferred method when writing applications with React.


Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/react
Submission for GitHub Actions Hackathon '21
Tags: actionshackathon21, python, turtle, github
Published: 2021-11-16 15:40:28

### My Workflow:

https://github.com/Anugya-Gogoi/Snake-Game


### Submission Category: 
Wacky Wildcards


### Yaml File or Link to Code:

`{% https://github.com/Anugya-Gogoi/Snake-Game/tree/main/.github/workflows %}`