teleren/devto huggingface dataset:
L'opérateur de chaînage optionnel : une nouveauté de TypeScript 3.7
Tags: typescript, francais, french, javascript
Published: 2020-03-31 10:31:19


Avec la sortie récente de **TypeScript 3.7**, le _chaînage optionnel_ fait enfin son entrée dans le langage.

Ce concept n'est pas tout jeune, l'équipe de **TypeScript** a vraiment tardé à l'inclure, le ticket était ouvert sur **Github** depuis 5 ans !

C'était le [16ème ticket de **TypeScript**](https://github.com/microsoft/TypeScript/issues/16)

La raison ?
La crainte de trop anticiper le standard **ECMAScript**.

## Qu'est-ce que l'opérateur de chaînage optionnel ?

L'opérateur de [chaînage optionnel](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining) **?.** permet de lire la valeur d'une propriété située dans une chaîne d'objets sans avoir à valider chaque référence dans la chaîne.

L'opérateur **?.** fonctionne de manière similaire à l'opérateur de chaînage **.** (on parle aussi d'[_accesseurs de propriétés_](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_membres)), à ceci près qu'il ne lève pas d'erreur si une référence est **null** ou **undefined**.

L'expression se _court-circuite_ avec, pour valeur de retour, **undefined** .

Cas d'utilisation avec "**.**"

```typescript
let younup = you && you.andUp();
```

On cherche à savoir si _you_ est [**truthy**](https://developer.mozilla.org/fr/docs/Glossaire/Truthy) pour pouvoir exécuter **you.andUp()**.

On alourdit alors la syntaxe en ajoutant un _prédicat_ avant l'exécution de la fonction.

Cas d'utilisation avec "**?.**"

```typescript
let younup = you?.andUp();
```

On cherche à savoir si _you_ est définit (valeur différente de **undefined** et **null**) pour pouvoir exécuter **you.andUp()**.

Simple et efficace, ce nouvel opérateur ajoute de la clarté et du sens supplémentaire à notre code.


Les tableaux étant également des [objets en **JavaScript**](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Objets_%C3%A9l%C3%A9mentaires_JavaScript#Les_tableaux_.3A_objet_Array), il est  possible d'utiliser la même syntaxe :

```typescript
let member = teamYounup?.[0];
```

______

Merci d'avoir lu cet article ! 
Il a été posté initialement sur le le [blog](https://www.younup.fr/blog) de @younup_it : https://www.younup.fr/blog/nouveautes-de-typescript-3-7-l-operateur-de-chainage-optionnel

______
Cover par [Stephen Leonardi](https://unsplash.com/@stephenleo1982) sur [Unsplash](https://unsplash.com/photos/5CH1TNfcZoo)
Free to Use Form
Tags: html, css
Published: 2020-03-31 10:30:54

Hello Guys,
I have decided to create and reuse opensource components.
Here is the first step, I replicated Freecodecamp Survey Form and made it opensource.
So if anyone of you people need a template survey form, feel free to use it :)
Techstack:
#### HTML5
#### CSS3

Link to Git Repository:
[Survey Form](https://github.com/SMAmmar/survey_form)

**Don't Forget to Contribute to the repo. Cheers!!
New guide: 🐳 How to speed up your Docker build 🛠
Tags: docker, cicd, tutorial
Published: 2020-03-31 10:30:11

Learn how to properly structure Docker layers in the Dockerfile, reduce the weight of the Docker image, and automate building images with pipelines. <b>Full guide on buddy.works</b> --> <a href="https://buddy.works/guides/how-speed-up-docker-build?utm_source=devtoshare&utm_medium=social&utm_campaign=social_media_bz">HERE</a>
Reactjs for 2020
Tags: react
Published: 2020-01-12 11:11:24

ReactJS is a declarative, efficient JavaScript framework to build interactive user interfaces (UI) with greater ease and flexibility. It provides many advantages in designing simple views for different states in an application and greater ease in updating and rendering the right components efficiently just when the data changes.

<img src="https://codersera.com/blog/wp-content/uploads/2019/11/React-advantage-in-learning-1024x559.jpeg">

<a href="https://reactjs.org/">React</a> is providing the developer’s a better work experience and the advantage to change any component at any point in time without affecting the rest of the applications, resulting in widespread business support and innumerous websites built on React.

<h3>Conclusion:</h3>

<a href="https://codersera.com/blog/why-learning-reactjs-makes-sense-in-2020/">Learning “ReactJS”</a> is the need of the hour and makes sense as it is providing much-needed ease to developers in building highly engaging web applications and user interfaces in very lesser time, where they create large scale apps with frequently changing data. React’s benefits of being robust, advanced, responsive,non-risky, user-friendly far exceed its disadvantages and developers and organizations understand React’s relevance in the market, so they are promoting its learning and deployment wholeheartedly.

<h3>Word Of Advice:</h3>

The migration process from Reactjs can get rather tough and time-consuming at times so think about all such factors regarding time completion etc.before starting your Project on React.
Different ways to centre an element in css
Tags: css, html, frontend, ui
Published: 2020-03-31 10:24:44

Hello ***DEV***elopers!!


We will see how to center an element in css using different ways.

For all the examples, I will be using below html as common one.

```html
<div class="parent">
   <div class="child"></div>
</div>
```

### Using Position
```css
.parent {
   position: relative;
}
.child { 
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
```

### Using margin in position

***margin: auto*** works only for horizontal alignment.
But we can make it to work in both directions using below code.
```css
.parent {
   position: relative;
}
.child { 
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
//by giving top,left,right,bottom values as 0 now child's width and height is exact to parent.
   width: 800px; //assuming random width
   height: 200px; //assuming random height
   margin: auto; //margin auto works for both vertical and horizontal alignments
}
```


### Using Flex
```css
.parent {
   display: flex;
   align-items: center;
   justify-content: center;
}
```

### Using Grid
```css
.parent {
    display: grid;
    justify-content: center;
    align-items: center;
}
```

### Using Table 
```css
.parent {
   display: table;
   width: 100px;
   height: 100px;
}
.child {
   display: table-cell;
   vertical-align: middle;
   width: 50px;
   height: 50px;
   text-align: center;
}
```
### Using text-align to center horizontally
```css
.parent {
   display: block;
   text-align: center;
} 
.child {
   display: inline-block; //key point
}
```

### Using line-height to center vertically
It works fine if there is only one line.
```css
.parent {
   height: 200px;
}
.child {
   line-height: 200px; //same value of parent height
}
```

### Using margin as auto to center horizontally
```css 
.child {
   width: 50%;
   margin: 0 auto;
}
```
How to Make a JavaScript Candlestick Chart in Four Simple Steps
Tags: javascript, webdev, beginners, tutorial
Published: 2020-03-31 10:20:05

---
title: How to Make a JavaScript Candlestick Chart in Four Simple Steps
published: true
description: A tutorial for beginners to data visualization development explains and illustrates how to create a compelling JavaScript (HTML5) Candlestick Chart for a website or app with ease, step by step.
tags: #javascript, #webdev, #beginners, #tutorial
canonical_url: https://www.anychart.com/blog/2020/03/25/js-candlestick-chart-steps/
cover_image: https://i.imgur.com/FNVMG7S.png
---
A new charting tutorial for beginners to data visualization in website and app development explains and illustrates [how to create a compelling JavaScript (HTML5) Candlestick Chart](https://www.anychart.com/blog/2020/03/25/js-candlestick-chart-steps/) with ease, step by step.

Do you have trading data and are you looking for a way to effectively visualize it for your website or app project? If so, a JS-based [Candlestick Chart](https://www.anychart.com/chartopedia/chart-type/japanese-candlestick-chart/) could be your best pick. This tutorial breaks down the process needed to create such a chart into four simple steps and provides a detailed explanation of the code. Only a basic understanding of programming will be enough to master such a simple technique.

Read it now on the [AnyChart blog](https://www.anychart.com/blog/2020/03/25/js-candlestick-chart-steps/).
What the next year looks like for InsurTech
Published: 2020-03-31 10:12:10

Link: https://blog.joshsoftware.com/2019/01/10/what-the-next-year-looks-like-for-insurtech/

Over the last two years, investments in the global InsurTech market have crossed $2.3 billion and the sector has continued to grow at an astounding rate of 3-4%.  EY estimated the net income growth rate to cross 23% as opposed to 14% in 2017, all of this only point towards one thing: the immense possibilities for the future. With more than 24 life insurance companies and 33 non-life insurance companies, the market is booming in India today. This is mind blowing, but one of the biggest challenges that the insurance sector faces, is the way it is perceived. People no longer want to think of it as boring paperwork, long calls with agents and multiple forms to file for one claim. Consumers, especially millennials are looking for specific policies with small premiums and maximized benefits that they can purchase conveniently, preferably online. Here’s where a combination of insurance and intelligent technology comes into play. InsurTech led by disruptive tech like AI sure has been more than a buzzword in the last few years!
¡El mundo se acaba!, por Xavier Mitjavila
Tags: xaviermitjavilamoix, xavimitjavila, covid19, coronavirus
Published: 2020-03-31 10:03:33

---
title: ¡El mundo se acaba!, por Xavier Mitjavila
published: true
description: Estuve siete años en Milano antes de volver a Barcelona. Estoy lejos ahora. A pesar de esa lejanía, me siento muy cercano a su gente, su lengua, su cultura y vuelvo a menudo. Entre viaje y viaje, sigo en contacto a través de Whatsapp y siempre estoy al día de lo que sucede en la ciudad. 
tags: xavier mitjavila moix, xavi mitjavila, covid19, coronavirus, 
cover_image: https://secureservercdn.net/160.153.138.53/24n.cd0.myftpupload.com/wp-content/uploads/2020/03/Xavier_Mitjavila_Moix_articulo_el_mundo_se_acaba_xavi-1024x433.jpg
---
Estuve siete años en Milano antes de volver a Barcelona. Estoy lejos ahora. A pesar de esa lejanía, me siento muy cercano a su gente, su lengua, su cultura y vuelvo a menudo. Entre viaje y viaje, sigo en contacto a través de Whatsapp y siempre estoy al día de lo que sucede en la ciudad.

Esta semana, los Whatsapp han sido diferentes. Muy diferentes. He recibido fotografías de los supermercados. Fotos con carritos de la compra llenos hasta arriba, de colas eternas para pagar y de lineales completamente vacíos. Fotos que circularon rápidamente por las redes y que han generado un efecto llamada inmediato. Lockdown por el Covid19. Todos al súper. Como decía mi abuela: “¡el mundo se acaba!”.

A parte de pensar en las lógicas complicaciones en el sistema sanitario (¡la verdadera prioridad!), pienso automáticamente en la que se está a punto de organizar en el mundo de la empresa. No es la primera vez que como Manager lo veo. Recuerdo la crisis de la dioxina, la de las vacas locas y las otras que hemos vivido. Generaron auténticas crisis logísticas.

Los supermercados vacíos disparan los pedidos para el día después y las empresas, hoy en día, trabajan prácticamente sin stocks. ¡La tormenta perfecta! Los primeros días faltaran materias primas, faltaran las personas adicionales en las líneas para producir, faltaran los camiones para entregar… Y cuando finalmente todo se solucione en la parte productiva, faltará espacio en los almacenes de los supermercados para recibir la gran cantidad de productos que deberán ser colocados en los lineales.

Todo el sistema irá bajo stress. Y el sistema son las personas que lo integran. Personas legítimamente nerviosas por lo que sucede que, además, deberán gestionar la crisis para que el resto podamos tener acceso a todo lo necesario y esto no parezca la Unión Soviética de los años 80. Como dicen los italianos, ¡che casino!

Llega otro Whatsapp a mi teléfono. Es una foto de un súper en Gracia. Los lineales ya están vacíos aquí. ¡Ánimos!

Artículo originalmente publicado en [xaviermitjavila.com] (http://xaviermitjavila.com/2020/03/el-mundo-se-acaba-por-xavier-mitjavila/)
Open Source Data Lineage App in Python
Tags: database, opensource, postgres, python
Published: 2020-03-31 09:52:54

Hello,

I want to show an open source Python project [_data-lineage_](https://github.com/tokern/data-lineage) to visualize and analyze data lineage. The project was developed in collaboration with data teams on data governance initiatives over the last couple of years. 

There are a lot of open source and commercial tools to capture data lineage. However there are two main problems expressed by data engineers:

- The projects require a lot of effort to get started and maintain.
- Requires constant discipline in capturing and sending all the metadata.

Both these factors result in incomplete projects and lost opportunities in improving performance, ROI and data quality. 

*data-lineage* solves these problems by choosing the following goals:
* providing fast access to data lineage
* simple setup 
* analysis of the lineage using a graph library

To achieve these goals, data lineage has the following features:

1. **Generate data lineage from query history.** Most databases maintain query history for a few days. Therefore the setup costs of an infrastructure to capture and store metadata is minimal. 
2. **Use networkx graph library to create a DAG of the lineage.** Networkx graphs provide programmatic access to data lineage providing rich opportunities to analyze data lineage.
3. **Use Plotly to visualize the graph with tool tips and other rich annotations.** Plotly provides a number of features to provide rich graphs with tool tips, color coding and weights based on different attributes of the graph.

You can get a [data lineage graph](https://tokern.io/docs/data-lineage/example/) with less than 10 lines of Python code in a Jupyter Notebook.

Right now data-lineage supports postgres and support for more databases is planned. 

I appreciate any feedback and please give it a try if you need data lineage for your work.

Links:
* [Github](https://github.com/tokern/data-lineage)
* [Landing Page](https://tokern.io/data-lineage/)
* [Docs](https://tokern.io/docs/data-lineage/)
* [Blog](https://tokern.io/blog/data-lineage-on-redshift/)
Web Surgery - Ep.1 custom Jekyll Plug-in
Published: 2020-03-31 09:45:38

---
title: Web Surgery - Ep.1 custom Jekyll Plug-in
published: true
description: I wrote Ruby for the first time! With a little bit of Ruby, you can make Jekyll do anything for you. All you need is write your own plug-in. Today we will customize one here: https://github.com/avillafiorita/jekyll-datapage_gen Things that I used for my website: https://github.com/sproogen/modern-resume-theme and https://github.com/samesies/barber-jekyll
tags: 
---
I wrote Ruby for the first time! With a little bit of Ruby, you can make Jekyll do anything for you. All you need is write your own plug-in. Today we will customize one here: [https://github.com/avillafiorita/jekyll-datapage_gen ](https://github.com/avillafiorita/jekyll-datapage_gen)

Things that I used for my website: [https://github.com/sproogen/modern-resume-theme](https://github.com/sproogen/modern-resume-theme) and [https://github.com/samesies/barber-jekyll](https://github.com/samesies/barber-jekyll)

If you want to catch me streaming live, follow me on Twitch.
COVID-19 graphs on Observable
Tags: showdev, beginners, javascript, html
Published: 2020-03-31 09:40:37

# Description

I've wanted to check out [Observable](https://observablehq.com/) for a while, but it looked pretty intimidating whenever I started.  Enter COVID-19 and this [straightforward tutorial](https://observablehq.com/@observablehq/tutorial?collection=@observablehq/tutorial) and suddenly I had an interesting topic and some tools under my belt to actually do it. I used [Vega-lite](https://vega.github.io/vega-lite/) for visualisations, JS and [d3.js](https://d3js.org) for some data wrangling. Data is pulled via the awesome [COVID-19 API](https://covid19api.com).

Here's the link to the results:
[COVID-19: Pick a country to display data](https://observablehq.com/@kristinamacekovic/covid-19-pick-a-country-to-display-data)

The page displays following results:
- a line chart of cases over time
- a bar chart of new cases compared to the previous day
- the most recent summary of cases

These results are presented based on the following options you can select:
- country you want to see data for
- type of cases you want to see (confirmed, recovered, deaths)
- the scale you want to use for the y-axis of the line chart

# Nice Resources I Found Along the Way

[Data manipulation, cleaning, and processing in JavaScript](http://learnjsdata.com):
Website with tutorials on data wrangling with JS (mostly d3.js). I found it while I was researching how to aggregate data by an object property.
Episódio 5 - Corona Edition: Trabalhando de Casa
Tags: podcast, corona, remotework, portuguese
Published: 2020-03-31 09:38:42

---
title: Episódio 5 - Corona Edition: Trabalhando de Casa
published: true
description: Nesse episódio a gente fala sobre essa experiência de trabalhar de casa em meio a pandemia do Corona Virus, e o que a Elisa e eu (@airtonzanon) fizemos em casa para conseguir trabalhar de uma forma mais confortável.
tags: podcast, corona, remote work, portuguese
canonical_url: https://anchor.fm/depoisdocafe/episodes/Episdio-5---Corona-Edition-Trabalhando-de-Casa-ec40lb
---
{% spotify spotify:episode:5B4ptrrNSsVt9dtO0cHLTW %}

Você também pode ouvir no seu aplicativo preferido: [iTunes](https://podcasts.apple.com/br/podcast/depois-do-caf%C3%A9-com-airton-zanon/id1480842641), [Breaker](https://www.breaker.audio/depois-do-cafe-com-airton-zanon), [Google Podcasts](https://www.google.com/podcasts?feed=aHR0cHM6Ly9hbmNob3IuZm0vcy9lMGU0MDU4L3BvZGNhc3QvcnNz), [Overcast](https://overcast.fm/itunes1480842641/depois-do-caf-com-airton-zanon), [Pocket Casts](https://pca.st/bpyo3i4y), [Radio Public](https://radiopublic.com/depois-do-caf-com-airton-zanon-6r2oLq), [Spotify](https://open.spotify.com/show/4cqX5o40bClwqtYHv9X7Lp)

Nesse episódio a gente fala sobre essa experiência de trabalhar de casa em meio a pandemia do Corona Virus, e o que a Elisa e eu (@airtonzanon) fizemos em casa para conseguir trabalhar de uma forma mais confortável.

Este foi um episódio da Série Corona Edition, na qual vamos lançar um episódio menor que o normal toda semana, durante este lockdown, para comentar o que estamos fazendo depois do café.

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

Participantes:

Airton Zanon - [@airtonzanon](https://twitter.com/airtonzanon) (twitter)
Elisa Pedrosa Reis - [@liisapedrosa](https://twitter.com/liisapedrosa) (twitter)

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

 Para mais episódios e saber mais sobre o podcast acesse https://anchor.fm/depoisdocafe.

Siga-nos no twitter [@dpsdocafe](https://twitter.com/dpsdocafe)
How to use a crowdfunding platform
Tags: crowdfunding, kickstarter
Published: 2020-03-31 09:13:49

Many people have heard about crowdfunding platforms. But not everyone understands how to use them correctly and that this can be a very profitable business.

Crowdfunding platforms provide an opportunity to raise money for your idea. Whether you can achieve the goal depends on the amount you want to receive and on the idea. A very interesting fact, it is not always possible to predict the success of your project. You may have an interesting idea, but you will not get money, on the other hand, the idea may look a little unrealistic, but at the same time, you will collect a lot of money. This is all due to mass thinking. What is relevant now, how do people live, what disturbs them, what is their mood? Some projects may not take off today but may receive investment next year.

For example, eco devices are gaining popularity, for example, 10 years ago, such projects would not be interesting for investing.

There are many crowdfunding platforms on the market now. The most popular kickstarter, it was founded in 2009. Today, the platform is visited by about 1 million users daily. A huge number of people are looking for promising projects that in the future will become world leaders and make a comfortable future for investors. According to statistics, the average cost of a project on Kickstarter is about $11,000. If you want to successfully close the project, we recommend collecting the amount in the range of $8000 - $14000. In this way, you can get into 60% of all projects that successfully close the round of investing.

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

Of course, you check [how to build a crowdfunding platform](https://merehead.com/blog/how-to-build-a-crowdfunding-platform-for-fundraising/) and start to earn money by a fee. For example, kickstarter charges 5% of the amount collected. Thus, if the average check is $11,000, then you can earn $550 from each successful project. With about 100 projects per month, your income can be over $50,000. Given the development and advertising costs, net profit can reach $10,000 - $20,000 per month.

Let's look at the most unusual projects that have raised a lot of money for their startups.

Unique shaped earbuds that fit your ears. Headphones are printed on a 3D printer individually for each customer. They are fully consistent with the shape of your auricle.

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

Self-cleaning t-shirt. The fabric makes from materials that do not absorb liquid. Very practical clothing has gained great popularity on kickstarter.

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

As you can see, a good idea can be very popular and allow you to raise money to start a business.
🗣 Communication Hack – Use Labelled Links
Tags: communication, remote, wfh, lifehack
Published: 2020-03-31 09:09:08

---
title: 🗣 Communication Hack – Use Labelled Links
published: true
description: Use the “Copy as Markdown for Chrome & Firefox” add-on to post web links.
tags: communication, remote, wfh, lifehack
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/32gbr32hok3h5n0z4015.png
---
> *Do your readers a favor and use the “Copy as Markdown for Chrome & Firefox” add-on to post web links.*

When you post links to some information bit on the web or your intranet, using *raw* technical links typically reduces information content. For example, a link featuring just a post number (`…/post/0815`) is purely technical, and takes up a lot of space while having almost zero information content – it just tells your audience the target site via the domain, and that is all.

🌐 🚑  [Copy as Markdown for Chrome & Firefox](https://github.com/chitsaou/copy-as-markdown#copy-as-markdown-for-chrome--firefox) to the rescue. 

The above link was created like this:

> ![Copy as MD Example](https://dev-to-uploads.s3.amazonaws.com/i/sqa7td7hyynkymbapity.png)

Using that context menu item copies the link *including* its label (or the current selection if there is one, like shown above) as markdown text into your clipboard. Markdown is a universal format that can be pasted into lots of channels: Rocket.Chat and other web chats, blog sites like this one, many wikis (like Atlassian Confluence), etc.

In Confluence, the trick to know is the “Insert Markup” menu item in the editor (`Ctrl-Shift-D`), enabling you to paste the markdown text almost directly into any page – just make sure the format drop-down above the text area says markdown and not Confluence wiki markup.

So do your audience a favor, install that add-on, and in future provide them with **readable** links that allow them to judge whether they need to click-through on that link.