teleren/devto huggingface dataset:
How to Create JavaScript Bubble Chart [Tutorial][IMDb Data][AnyChart JS]
Tags: javascript, webdev, bootcamp, learning
Published: 2020-03-11 09:15:24

---
title: How to Create JavaScript Bubble Chart [Tutorial][IMDb Data][AnyChart JS]
published: true
description: Read this tutorial from Wayde Herman, an experienced data visualization developer, to learn how we can make interactive Bubble Charts in JavaScript and bring them to life through customization, quickly and painlessly
tags: #javascript, #webdev, #bootcamp, #learning
canonical_url: https://www.anychart.com/blog/2020/03/03/bubble-chart-javascript-tutorial/
cover_image: https://i.imgur.com/3DmRSee.png
---
Read this tutorial from Wayde Herman, a data scientist and visualization developer, to learn how you can build [Bubble Charts in JavaScript](https://www.anychart.com/blog/2020/03/03/bubble-chart-javascript-tutorial/) and bring them to life through customization, quickly and painlessly. Uses the [AnyChart](https://www.anychart.com) JS charts library for example. All the JS bubble chart examples created along the tutorial are interactive and available with the full code.
More APIs to Practice Programming With
Tags: career, webdev, codenewbie, beginners
Published: 2020-03-11 08:58:49

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

If you want to practice front end development without building your own back end API, you have lots of choices. Here are some APIs that are free and easy to use, so that you don't have to waste time writing your own fake API to practice with.

# [Random Dogs](https://random.dog/woof.json)
The Random Dogs API just has one endpoint that returns a URL for a dog image. You can use this to practice writing simple apps if you're a complete newbie.

# [Random Cats](https://aws.random.cat/meow)
Like the Random Dogs API, the Random Cats API returns a URL for a cat image.

# [Behance](https://www.behance.net/dev)
The Behance API returns projects from the Behance website. Authentication is done with a free API key.

You can use it to search for projects, get users and comments for each project, and get collections.

It's a good API to practice using query strings and parameters since some endpoints use those to query for data.

# [Rijksmuseum](https://www.rijksmuseum.nl/en/api)
The Rijksmuseum API lets us search for art that has been uploaded to the Rijksmuseum database. To use it, you just have to sign up for an API key.

The API is free and it provides data for various art pieces in their collection, including artist, title, language, date, format, and more.

# [ClearBit Logo API](https://clearbit.com/docs#logo-api)
This API lets us get business logos for free. You can make 600 requests a minute with this API, which should be plenty of requests for a practice app. The Logo API is free.

It also has lots of data on companies, data for people that are associated with an email address, calculate risks of chargebacks for particular payments, endpoints for deanonymizing IP addresses by retrieving data via an IP address, and more. These APIs are paid as opposed to the logo API.

# Conclusion
These are very useful APIs for practicing with since they're free and easy to use. Now you don't have to think hard and take time to make your own back end to practice front end development
MJSQ 101: .concat()
Tags: codenewbie, javascript
Published: 2020-03-11 08:35:19

## More JavaScript Questions 101(MJSQ 101): 
Continuing from my original [blog post]("https://dev.to/danvyle/more-javascript-fundamentals-101-4d5d"), I give you more javascript 101 questions answered!:

Let's tackle another easy quick algorithm question this week:
## Make this work:  `duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]`]



#### The solution:
```js

function duplicate(arr) {
    return arr.concat(arr)
}

console.log(duplicate([1, 2, 3, 4, 5]))

//output: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

```

#### What do we know:
It looks like the input is `[1,2,3,4,5]` and the desired output is `[1,2,3,4,5,1,2,3,4,5]`.
It also looks like it's calling a function duplicate() to make this work.
We also know of a quick array method that can add one array onto another, it's called concat()

Here's an example:

```js

var arr = [8, 6, 7]
arr.concat[5, 3, 0, 9]

//output: [8, 6, 7, 5, 3, 0, 9]

```

#### Pseudocode:
* So we would need to write the `function` 
* and call it `duplicate(arr)` 
* so that it could take an argument, such as an array of `[1, 2, 3, 4, 5]` 
* and work with the `concat()` array method to add the original array to itself. 
* We would then return `arr.concat(arr)` 
* so that when we display the output or `console.log()the function, 
* the output will give you the input twice in a new array: `[1,2,3,4,5,1,2,3,4,5]`

Here's the solution again in case you are one of those models that can only scroll down.

```js

function duplicate(arr) {
    return arr.concat(arr)
}

console.log(duplicate([1, 2, 3, 4, 5]))

//output: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

```


That's all for today, please leave any comments/questions/corrections in the comments. Thanks!


###### Sources:
Huge huge thanks to github user: yangshun for aggregating the most popular JS, CSS and HTML questions and giving us his answers to it. My weekly blog posts are to go over several questions at a time to reinforce my knowledge of fundamental javascript as I grow my expertise in it. Many of my blog will be paraphrasing if not direct quotes from his github. Find his tech interview handbook [here]("https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md#whats-the-difference-between-call-and-apply") and please support him!

And an additional thank you to Flatiron alum: Marissa O. who is a badass developer at Forbes magazine for directing me to his blog!
Talk - A free video call app for the web
Tags: showdev, webrtc, p2p, video
Published: 2020-03-11 07:51:38

I created Hello (https://itshello.co) in 2018 and many people quickly started using it, but I have to sell it in 2019 as it was in autopilot mode and I didn't do any enhancement to it for a long time. I sold it, so that some else can pick it up and update it, but that did not happen, it's still in the same state as 2018.

Recently, there have been few enhancements in WebRTC and related APIs, but I couldn't update Hello now. So I created this separate app with those enhancements and stabilizations. I also added a stable screen sharing feature for supported devices.

Introducing "Talk - A free video call app for the web". https://usetalk.io

Though it does not get its own fancy domain name, it's stable, works 100% and supported by all the modern browsers in all the platforms (both desktop & mobile).

Check it out and let me know what you think.
On using arrow functions in PHP 7.4
Tags: php
Published: 2020-03-11 07:45:44

In PHP 7.4 a widely requested feature landed: [arrow function](https://stitcher.io/blog/short-closures-in-php). In this blogpost I'd like to show you how I like to use them.

Let's start with an example from the [Oh Dear](https://ohdear.app) codebase [I tweeted out](https://twitter.com/freekmurze/status/1236065696125247488) a few days ago.

In Laravel 6 and PHP 7.3 you could do this:

```php
public static function boot()
{
    static::boot();

    static::creating(
        function (Team $team) {
            return $team->webhook_signing_secret = Str::random(32);
        }
    );
}
```

In Laravel 7 and PHP 7.4 you can rewrite it to this:

```php
public static function booted()
{
   static::creating(fn (Team $team) => $team->webhook_signing_secret = Str::random(32));
}
```

In the code snippet above, a short closure is used. It's a bit beyond the scope of this post, but in Laravel 7, the `booted` lifecycle method was introduced, which will, unsuprisingly, be called we the model has booted. Using that method, you can lose the `static::boot();` call from the initial code snippet. 

A lot of people seemed to like it. Some didn't, and that's ok. When introducing new syntax, I don't think there's a single thing where all programmars will agree on. A comment I agree on however, is [the line lenght](https://twitter.com/michaeldyrynda/status/1236104078318391296). Luckily this can be easily fixed by moving the closure itself to it's own line.

```php
public static function booted()
{
   static::creating(
      fn (Team $team) => $team->webhook_signing_secret = Str::random(32)
   );
}
```

To make the line length shorter, you could opt to [remove the typehint](https://twitter.com/adamwathan/status/1236248177013030912). You could even [rename the `$team` variable](https://twitter.com/themsaid/status/1236258792255471618) to `$t`, this is pretty common practice in the JavaScript. Personally I live typehints and full variable names, so personally I stick to the code snippet above.

I think it would be silly to blindly switch to short closures wherever it is technically possible. The question you should keep in mind when converting a closure to a short one is: "Does this make the code more readable?". Of course, the answer is subjective. When in doubt, I recommend just asking your team members, they're the ones that will have to read your code too.

If you use PhpStorm you can easily switch between a normal and a short closurse, so you can quickly get a feel of how it reads.

![convert](https://freek.dev/uploads/media/short-closures/convert.gif).

Let's end by taking a look at an example where I think short closures really shine: in collection chains (thanks for the example, Liam).

{% twitter 1236435058006929409 %}
Writing readable PHP: decrease indentation by returning early
Tags: php
Published: 2020-03-11 07:43:53

When working older code, or code submitted through PRs, I sometimes see this pattern:

```php
public function doSomething($someParameter)
{
    /** can be any kind of test */
    if ($someParameter === 0) {
        // do the actual work
    }
}
```

At the beginning of the function, there's a test being performed. The actual work is in the `if` block.

This can be refactored by reversing the condition and using an early return.

```php
public function doSomething($someParameter)
{
    if ($someParameter !== 0) {
        return;
    }

    // do the actual work
}
```

Doing this has a couple of benefits:
1. A level of indention is lost. This alone makes it more pleasant to read. You don't need to keep in your head that the code is wrapped in something.
2. Using an early return is great for humans too. When somebody reading your code is interested in the case concerning the early return, he or she doesn't need further that that early return. In the first example, there could still be some code to be executed after the if block.
3. When you're respecting a line length limit (you should), you now have more characters available when performing the actual work.

This technique also works when there are multiple conditions. Consider this function:

```php
public function doSomething($someParameter, $someOtherParameter)
{
    /** can be any kind of test */
    if ($someParameter === 0) {
        if ($someOtherParameter === 0) {
            // do the actual work
        }
    }
}
```

By using early returns, you can rewrite it to something more readable.

```php
public function doSomething($someParameter, $someOtherParameter)
{
    if ($someParameter !== 0) {
        return;
    }

    if ($someOtherParameter !== 0) {
        return;
    }

    // do the actual work
}
```

You may be tempted to rewrite combine that if statement.

```php
if ($someParameter !== 0 || $someOtherParameter !== 0) {
```

In most cases, I don't do this for three reasons:
1. Personally, I need more brainpower to parse this.
2. It's easy to make mistakes (should I use `||` or `&&`) when there are more conditions
3. Using early returns is easier to debug. You could put a breakpoint or dump statement inside those if blocks. That way, you know which condition causes an early return.

This post summarised: whenever you see some code executed within an if block, check if you can reverse the condition to lose a level of indentation.
UI design trends for 2020
Published: 2020-03-11 07:29:56

The current technological ecosystem always affects the trends of the upcoming year. In 2020 the trends will match these needs more than ever before. They prioritize speed, simple page designs, mobile-first approach, and most significantly, seasoned up with artificial intelligence.

Below are some of the Latest UI Design Trends For 2020 -

- Full-screen

- smartphones

- Unique illustration and animation

- Storytelling

- AR

To know about more trends in 2020 visit http://bit.ly/38KuddD
ClojureScript HTTP data fetching
Published: 2020-03-11 07:29:27

In ClojureScript, there is a very helpful library that is a wrapper around XHR. It is called [cljs-http](https://github.com/r0man/cljs-http).

In order to use it, we have to use the `core.async` library. `core.async` was design to work on the JVM to handle concurrent threads. JavaScript is single threaded but the concept is the same: passing message.

## Simple HTTP request

It is  helpful to know how to get data from a server when building a website or an app. It is a simple use case so here is an example of a `GET` request:

```clojure
;; require core.async and cljs-http
(ns example.core
  (:require-macros [cljs.core.async.macros :refer [go]])
  (:require [cljs-http.client :as http]
            [cljs.core.async :refer [<!]]))

;; request
(go (let [response (<! (http/get "https://api.github.com/users"
                                ;; parameters
                                 {:with-credentials? false
                                  :query-params {"since" 135}}))]
      (prn  (:body response)))) ;; print the response's body in the console
```

By the way, if the server returns data as JSON, the response will be automatically converted to EDN. So there is no extra work than the piece of code outlined above.
Now that you have your data, you have to extract what you need. There is a good tutorial that talks about
[destructuring](http://xahlee.info/clojure/clojure_binding_forms.html).

## Core.async

The `go` macro is part of `core.async` library as well as `<!` function which is use to extract message from the channel.
You can read all about [concurrent process and channels here](http://www.braveclojure.com/core-async/).

All HTTP functions in `cljs-http` return a `core.async channel`.
When a request has completed or failed it is written on that channel.
The response can be extracted with the `<!` function inside a `go` block. I am not completely sure why but I know it has something to do with the fact that `go` is a macro. (If you know why, please leave a comment below).

## Custom Headers

Sometimes you need to add a header such as "Authorization" (Github requires it).

```clojure
(go
  (let [response (<! (http/post "https://api.github.com/graphql"
                                {:with-credentials? false
                                 :headers {"Authorization" "SuperSecretToken1234"}
                                 :json-params {:query "query { viewer { login }}"}}))]
      (prn (:data (:body response)))))
```

With that you can go and start testing ClojureScript to your heart's delight and with data coming from a server.

Happy prototyping...
Please ELI5 about POST / PUT / PATCH best practices
Tags: webdev, help, discuss
Published: 2020-03-11 06:56:08

It might be

- POST - Create NEW record
- PUT - If the record exists, update else, create a new record
- PATCH - update
- GET - read
- DELETE - delete

But, do you really ever use PUT requests?

Also, we have to consider **which can have `req.body`**. To my understandings, GET and DELETE shouldn't have BODY, so mine becomes

- GET - Simple query, like `?id={id}`
- POST - Complex query that needs `req.body` / file upload
- PUT - Create NEW record
- PATCH - Update
- DELETE - Delete

Another thing to consider, IDEMPOTENCY. Do I have care about it?

```
HTTP  Idempotency
GET     yes
POST    no
PUT     yes
PATCH   no*
OPTIONS yes
HEAD    yes
DELETE  yes
```

Why can't we use POST for everything?

Also, don't forget that there are also HEAD and OPTIONS.
Learn C language | C language Tutorial
Tags: c, tutorial
Published: 2020-03-11 05:51:13

C is a programming language and the program is a set of instructions or collection of statements, used to complete a certain task. And when many programs combined together, they form a Software (Software is the collection of integrated programs)

All the worlds' largest IT companies are run on C and C++, it's a fact. People use numerous C/C++ powered devices on a daily basis, whether they realize it or not. And programming, next to English,

C is a middle-level programming language & C++ is an enhancement to the all-purpose programming language of C.
The languages are used to communicate with each other and we  communicate to 
1. Share Ideas 
2. Say Something
3. To ask for work

And As we know this is programing language, so, it is used to communicate with the computer.

C is a programming language and the program is a set of instructions or collection of statements, used to complete a certain task. And when many programs combined together, they form a Software (Software is the collection of integrated programs). 

<a href="https://inquisite.liveup.xyz/complete-c-language-tutorial-for-free" target="_blank">Learning Programming languages</a> are not as simple as we think, it is not a cup of tea. If you really wanted to learn <a href="https://inquisite.liveup.xyz/complete-c-language-tutorial-for-free" target="_blank">C-language</a> or any other language, please don't skip this the basics because this is the only way to learn to program and called your-self "A Computer Programmer".

Here Is the complete for this tutorial:- https://inquisite.liveup.xyz/complete-c-language-tutorial-for-free
Annotations and Type Checking in Python
Tags: python, bestpractices, typesafety
Published: 2020-03-11 04:42:39

Python is a dynamically typed programming language. This means that type checking is done at run-time. `PEP484` introduced type hints, which makes it possible to add type hints to variables and function signatures.

Imagine a function `say_hello` that takes and returns a string. Without hints, this function would look like this:

```py
def say_hello(name):
    return "Hello " + name
```

It can be annotated as follows:


```py
def say_hello(name: str) -> str:
    return "Hello " + name
```

### Type Aliases

To define a function `itemize_names` that takes a list of names and returns a new list with names numbered from 1 to n. An implementation of the function can be found below:

```py
def itemize_names(names):
    return [f"{pos + 1}. {name}" for pos, name in enumerate(names)]
```

To annotate the function an alias can be created for names:

```py
from typing import List

NameList = List[str]

def itemize_names(names: NameList) -> NameList:
    return [f"{pos + 1}. {name}" for pos, name in enumerate(names)]
```

The typing module provides support for so much more, such as:

- Creating a new type
- Annotating a function that takes a callback
- Generics

You can find the [documentation here](https://docs.python.org/3/library/typing.html) to learn how to add type hints to your Python code.


## Type Checking

While you can add type annotations to your code, the Python runtime does not enforce type annotations. To demonstrate, the `say_hello` function defined earlier can be re-written like this without producing any change in functionality.

```py
def say_hello(name: str) -> int:
    return "Hello " + name
```
You will also not get a warning from Python.

To enforce type checks, there are a number of static type checkers available. I would be using `mypy`.

Let's install `mypy` to get those type checks we need. You can install `mypy` with this command:

```
$ python3 -m pip install mypy
```

To type check our `say_hello` function, let's say it is contained in the `say_hello.py` file:

```
$ mypy say_hello.py 

say_hello.py:2: error: Incompatible return value type (got "str", expected "int")
Found 1 error in 1 file (checked 1 source file)
```

Let's fix the error by changing expected return type to `str` and type check our file again:

```
$ mypy say_hello.py

Success: no issues found in 1 source file
```

The [mypy documentation](https://mypy.readthedocs.io/en/stable/introduction.html) provides all the information required on how to use `mypy` in your projects.

Thanks for reading.
Modularización de trigger de PSQL: parte 1
Tags: postgres, database, microservices
Published: 2020-03-11 04:33:16

Los triggers por tabla tienden a crecer en numero: conforme la aplicacion crece, surgen nuevos requerimientos y cambian lógicas de negocio. En algun momento la tabla tiene tantos trigger que algunos desarrolladores los separan por prefijos o por algun id. 


Si en la aplicacion conviven un numero de empresas, cada entidad de la base de datos puede tener diferentes lógicas de negocios. Los desarrolladores recurren a crear diferentes triggers por empresa. Si un trigger tiene una lógica que es única en un negocio, el control es mediante el id del negocio. Este control se vuelve mas complicado cuando ciertos negocios tienen la misma lógica y recurrimos a modificar el trigger para agregar la nueva empresa. 

Una manera para mejorar el control de lógicas de negocio es modularizarlo mediante una tabla. 


```sql

CREATE TABLE public.ad_module
(
    id serial,
    updated_at timestamp without time zone DEFAULT now(),
    created_at timestamp without time zone DEFAULT now(),
    name character varying(255) COLLATE pg_catalog."default",
    version numeric,
    CONSTRAINT module_pkey PRIMARY KEY (id)
)
WITH (
    OIDS = FALSE
)

```

Esta tabla es muy básica, solo tiene un nombre y la version. Un modulo puede tener muchos negocios, por lo tanto ocupamos una segunda tabla para tener una relación de una a muchos. 



```sql


CREATE TABLE public.ad_business_module
(
    id serial,
    business_id integer,
    ad_module_id integer,
    updated_at timestamp without time zone DEFAULT now(),
    created_at timestamp without time zone DEFAULT now(),
    CONSTRAINT ad_business_module_pkey PRIMARY KEY (id),
    CONSTRAINT ad_business_module_bus_fk FOREIGN KEY (business_id)
        REFERENCES public.businesses (id) MATCH SIMPLE
        ON UPDATE NO ACTION
        ON DELETE NO ACTION,
    CONSTRAINT ad_business_module_module_fk FOREIGN KEY (ad_module_id)
        REFERENCES public.ad_module (id) MATCH SIMPLE
        ON UPDATE NO ACTION
        ON DELETE NO ACTION
)
WITH (
    OIDS = FALSE
)
```

 La tabla ad_business_module tendrá n registro de empresas en el cual convivirán el misma lógica de negocio. Podemos crear el modulo Venta y en la tabla ad_business_module indicara que empresas comparten esa misma lógica de negocio. 

Si en la base de datos conviven un numero de empresas, es sumamente importante conocer a quien pertenece cada registro, es indispensable colocar un business_id a cada tabla de la base de datos. 

```sql

ALTER TABLE public.invoice
    ADD COLUMN business_id integer;

```

Cuando se cree, actualice o elimine un registro en cualquier tabla de la base de datos, por medio business_id conoceremos a quien pertenece ese registro. 

El mi siguiente blog hablare como modularizar los triggers usando la informacion de las tablas anteriores y como usar los esquemas de base de datos para agregar trigger modulo y esquema.
A[rg] Command Line Argument Parser for Go
Tags: ama, go
Published: 2020-03-11 04:25:48

I just recently finished my first open source project. It is a Go package to parse command line arguments. I really enjoyed writing it and wanted to share it with others. Please check it out on [Github](https://github.com/jrpalma/arg)

Please let me know what you think. I would appreciate it if you can share improvements, feature requests, or bug reports. Ask Me Anything!

Thanks folks!