teleren/devto huggingface dataset:
Migrando a TypeScript
Published: 2020-06-26 19:01:13

Dentro de todas las pruebas de diferentes tecnologías que a diario realizo he encontrado que TypeScript es una herramienta que continúa bloqueandome de no aprenderla rápidamente.  A continuación una serie de información paso a paso cómo he ido migrando mi concepto y aprendimiento de JavaScript a TypeScript.

#INSTALANDO
Inicialmente la instalación del protocolo es supremamente fácil, lo único que se debe hacer ejecutar la instalación directamente desde la consola.

```
npm install -g typescript
```

Antes de iniciar con pruebas entender que Typescript extiende a Javascript, es un JavaScript con esteroides; así que no te asustes como me pasaba a mi.

##JavaScript
Tomando un ejemplo directamente en Javascript.
```
function greeter(person) {
    return 'Hello, ' + person;
}
var user = [0, 1, 2];
document.body.textContent = greeter(user);
```

Typescript incluye fundamentalmente la definicion del Tipo (Type) de datos, por ejemplo en los argumentos.

```
function greeter(person: string) {
  return 'Hello, ' + person;
}

let user = [0, 1, 2];

document.body.textContent = greeter(user);
```
Esto permite obtener un error en el ejemplo arriba mencionado:
```
error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
```
Esto debido a que estoy pasando un arreglo de números a un argumento previamente definido como String.

#Interfaces
La creación de interfaces es una adición a nuestro codigo en Javascript:

```
interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName;
}

let user = { firstName: 'Jane', lastName: 'User' };

document.body.textContent = greeter(user);
```

###Clases
De igual manera la deficion de los tipos de atributos en las clases.
```
class Student {
  fullName: string;
  constructor(
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = firstName + ' ' + middleInitial + ' ' + lastName;
  }
}

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return 'Hello, ' + person.firstName + ' ' + person.lastName;
}

let user = new Student('Jane', 'M.', 'User');

document.body.textContent = greeter(user);
```

Ahora continuare en un proximo post tratando de aplicar esto a React.

[Ver código de Ejemplo en GitHub!!!](https://github.com/Edisonsan/typescript)
The .NET Docs Show: Blazing live bits with Corey Weathers
Tags: dotnet, aspnet, webdev, dotnetdocsshow
Published: 2020-06-26 18:57:50

---
title: The .NET Docs Show: Blazing live bits with Corey Weathers
published: true
description: The .NET Docs Show: Blazing live bits with Corey Weathers
tags: dotnet, aspnet, webdev, dotnetdocsshow
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jrnljxntcta558gwyswq.png
---

[The .NET Docs Show](https://dotnetdocs.dev) featured an amazing guest who details Blazor. Blazor is a framework for building interactive client-side web UI with .NET!

In this episode, [Corey Weathers (Twilio Technical Evangelist)](https://www.twilio.com/blog/author/cweathers) joins hosts, David Pine, Scott Addie, and Cam Soper to share some blazing live bits. The episode is filled with live coding, and we upgrade an old Blazor project, and make a phone call using the Twilio SDK.

{% youtube vFlECRsDnXo %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [The .NET Docs Show YouTube Channel](https://www.youtube.com/channel/UCIy_nKrwrd-naf_MPWtXdLA).

# Useful links

- [Introduction to ASP.NET Core Blazor](https://docs.microsoft.com/aspnet/core/blazor?WT.mc_id=devto-thedotnetdocs-dapine)
- [Twilio Quest](https://www.twilio.com/quest)
- [The .NET Docs Show](https://dotnetdocs.dev)
The .NET Docs Show: Blazing into Summer
Tags: dotnet, aspnet, webdev, dotnetdocsshow
Published: 2020-06-26 18:57:48

---
title: The .NET Docs Show: Blazing into Summer
published: true
description: The .NET Docs Show: Blazing into Summer with Ed Charbeneau
tags: dotnet, aspnet, webdev, dotnetdocsshow
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/528juhm3zbjcj6smytqi.jpg
---

Lately, [The .NET Docs Show](https://dotnetdocs.dev) has been featuring guests who are focusing on Blazor. Blazor is a framework for building interactive client-side web UI with .NET!

In this episode, [Ed Charbeneau (Microsoft MVP)](https://mvp.microsoft.com/en-us/PublicProfile/5001900) joins hosts, David Pine, Scott Addie, and Cam Soper to share "Blazing into Summer". We discuss server-side versus Web Assembly, Razor components with code behind versus `@code { ... }` syntax, and much more... because .NET 💗 Blazor!

{% youtube W3-kL0l9kPo %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [The .NET Docs Show YouTube Channel](https://www.youtube.com/channel/UCIy_nKrwrd-naf_MPWtXdLA).

# Useful links

- [Introduction to ASP.NET Core Blazor](https://docs.microsoft.com/aspnet/core/blazor?WT.mc_id=devto-thedotnetdocs-dapine)
- [ASP.NET Core Blazor hosting models](https://docs.microsoft.com/aspnet/core/blazor/hosting-models?WT.mc_id=devto-thedotnetdocs-dapine)
- [Blazing Coffee - GitHub](https://github.com/telerik/blazing-coffee)
- [eBook - Blazor: A Beginner's Guide](https://www.telerik.com/whitepapers/blazor-ui/blazor-ebook)
- [The .NET Docs Show](https://dotnetdocs.dev)
The .NET Docs Show: Catching up with Nick Craver from Stack Overflow
Tags: dotnet, aspnet, webdev, dotnetdocsshow
Published: 2020-06-26 18:57:45

---
title: The .NET Docs Show: Catching up with Nick Craver from Stack Overflow
published: true
description: The .NET Docs Show: Catching up with Nick Craver from Stack Overflow
tags: dotnet, aspnet, webdev, dotnetdocsshow
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/x3bp15yhzezhkeo0oeci.jpg
---

[The .NET Docs Show](https://dotnetdocs.dev) caught up with Stack Overflow to discuss their migration from .NET Framework to .NET Core.

In this episode, [Nick Craver (Microsoft MVP)](https://mvp.microsoft.com/en-us/PublicProfile/5002099) joins hosts, David Pine, Scott Addie, and Cam Soper to share details about the pros and cons of following an evolving .NET ecosystem.

{% youtube bghQ8JLwYdY%}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [The .NET Docs Show YouTube Channel](https://www.youtube.com/channel/UCIy_nKrwrd-naf_MPWtXdLA).

# Useful links

- [Introduction to ASP.NET Core](https://docs.microsoft.com/aspnet/core/introduction-to-aspnet-core?WT.mc_id=devto-thedotnetdocs-dapine)
- [Dapper - GitHub](https://github.com/StackExchange/Dapper)
- [Stack Overflow](https://stackoverflow.com/)
- [Stack Exchange](https://stackexchange.com/)
The .NET Docs Show: eShopOnWeb with Steve Smith (@ardalis)
Tags: dotnet, aspnet, webdev, dotnetdocsshow
Published: 2020-06-26 18:57:25

---
title: The .NET Docs Show: eShopOnWeb with Steve Smith (@ardalis)
published: true
description: The .NET Docs Show: eShopOnWeb with Steve Smith (@ardalis)
tags: dotnet, aspnet, webdev, dotnetdocsshow
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/dsr2bsj8uzbk3l2ttrd9.jpg
---

[The .NET Docs Show](https://dotnetdocs.dev) featured an external contributor to discuss their contributions!

In this episode, [Steve Smith (Microsoft MVP)](https://mvp.microsoft.com/en-us/PublicProfile/7716) joins hosts, David Pine, Scott Addie, and Cam Soper to explore an example source code repository on GitHub, and upgrade it live from `Json.NET` to `System.Text.Json`.

{% youtube cgdFB_yZrTw %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [The .NET Docs Show YouTube Channel](https://www.youtube.com/channel/UCIy_nKrwrd-naf_MPWtXdLA).

# Useful links

- [ASP.NET Core architecture e-book](https://dotnet.microsoft.com/download/e-book/aspnet/pdf?WT.mc_id=devto-thedotnetdocs-dapine)
- [eShowOnWeb - GitHub](https://github.com/dotnet-architecture/eShopOnWeb)
- [System.Text.Json overview](https://docs.microsoft.com/dotnet/standard/serialization/system-text-json-overview?WT.mc_id=devto-thedotnetdocs-dapine)
Spring Webflux Demonstration
Tags: spring, java, cassandra
Published: 2020-06-26 18:45:58

---
title: Spring Webflux Demonstration
published: true
description: Spring webflux demonstration repo
tags: spring,java,cassandra
cover_image: https://cdn.shortpixel.ai/client/q_glossy,ret_img,w_800/https://mdabrowski.net/wp-content/uploads/2019/03/webflux.jpg
---
Spring Web Flux demonstration using Apache Cassandra to fetch Star Wars planets info.

https://github.com/cardocha/tieFinder
New Syntax Improvements in ES6
Published: 2020-06-26 18:39:25

##Let and Const
Previously (in older versions of ES6), `var` was the only way to declare a variable, but `let` and `const` were added as an improvement.
I wrote this article in my early months of learning ES6 in order to understand hoisting and destructuring better and I never quite hit publish. Today, I hit the publish button. Hope it helps someone out there.

Let's get to it.

To understand why the improvemenes in ES6 was made, let us look at the following example:

```javascript
function eatFood(willeat){
   if(willeat){
      var food = "Chicken and goat meat peppersoup";
   }else{
      var drink = "Hollandia Yoghurt";
   }
}
```
When you run ```javascript
eatFood(false)
``` 
it will give the value 
javascript
`Undefined`

This is because of what we call _Hoisting_.
Hoisting is as a result of the way the browser interprets JavaScript. This means that when the code is executed, the variables food and drink will be moved to the top of their scope leaving the assignments behind.

So what `Let` and `Const` helps us to do is that the variable scope are bound to their blocks and not the function scope. Also, the const keyword was introduced to JavaScript to allow immutable words. That is, variables declared as const cannot be modified once assigned.

##Destructuring
Data from arrays and objects can be broken down into distinct elements. Destructuring helps you to extract specific elemetns you want to extract from a given array or object.

Consider the code snippets below:
```javascript
const names = [Joe, Mary, Matt];

const [a, b, c] = names;

console.log(a, b, c);
```
>prints: Joe Mary Matt

In the example above, `[]` shows the array being destructured and `a,b,c` represents the variables where you want to store the values extracted from the array.
You can see that we didn't have to specify the indexes for the names before they knew exactly were to apply.

Also, place values can be ignored when destructuring arrays.
For instance, you can have
```javascript
const[a, , c] = names;
```

Objects can also be destructured. Consider the following example:
```javascript
const name{
firstname:Mary,
middlename:Josephine,
lastname:Thomas
};

const {first, middle, last} = name;

console.log(first, middle, last);
```

>This will print: Mary Josephine Thomas

In the example above `{}` represents the objects to be destructured and `first, middle and last` represent the variables where you want to store the property of the objects.

I hope this short article helped you find what you're looking for.
Data Modelling in Azure Cosmos DB
Tags: azure, nosql, database, tutorial
Published: 2020-06-26 20:32:48

---
title: Data Modelling in Azure Cosmos DB
published: true
date: 2020-06-26 18:34:39 UTC
tags: azure,nosql,database ,tutorial
canonical_url: 
---

#### Despite being schema-agnostic, it’s worth thinking about modelling your Cosmos DB data to ensure high-performance and scalability.

![](https://cdn-images-1.medium.com/max/560/0*tMKgUeVl6UuKhghY.png)

**Azure Cosmos DB is schema-agnostic by nature** , which is great if we are working with unstructured or semi-structured data within our applications.

That being said, we need to give some consideration as to what type of data we will be storing in our Cosmos DB environments. In this video, I’ll be talking about:

- The limitations in approaching data modelling for Cosmos DB applications in the same way as we would when data modelling for applications that use relational databases.
- How we can use techniques like embedding or referencing our data in Azure Cosmos DB.
- How we can use a hybrid of both depending on the needs of our application.
- How we can even store different types of documents within the same container in Azure Cosmos DB.

{% youtube p5rRGlKxNtk %}

If you have any questions, please feel to ask.

In my next video, I’ll be talking about Partitioning in Azure Cosmos DB, so if you want to learn how partitioning works in Azure Cosmos DB, **make sure you subscribe!**
30 Days of Code
Tags: python
Published: 2020-06-26 18:05:11

Hello, my name is Sean and I am in pursuit of my first developer job. 

On the advice of some articles I have read, and through examples I have seen on Dev, I have decided to document the 30 days of Code on HackerRank with python, a language I am deeply interested in and want to gain a well rounded understanding.

I want to use this opportunity as well to introduce myself to the Dev community and the blogging world. Hello! :)
How to choose a language on Google App Engine if performance matters
Tags: googlecloud, go, django, java
Published: 2020-06-26 18:03:03

So you may know one programming language really well, you are a polyglot, or you may be learning your first right now.  Kudos to you no matter which camp you are in!

This post is going to focus on [app engine standard second generation](https://cloud.google.com/appengine/docs/standard/runtimes) in particular, and the languages I would personally consider for my projects.  There are a few more that I could add to this post, just comment on this and let me know if that interests you and I can add them - more on that later.

These graphs are centered around Django 3 - this framework is very popular but it may not be the best framework for you if performance is a priority.

![build-start-request-times](https://i.imgur.com/sLtDIH6.png)

* **build time** - the time it takes to build a docker image with cloud build.
* **start up time** - the time it takes for a server to start and accept requests.
* **request time** - the time it takes for the framework to respond to a "hello world" request.

**Request time** is important because you can kind of place a constant K value on the time it takes to process a request; possibly even apply some time factor to every request.  **Start up time** is important because it is the time a client will have to wait if there is no server available to process the request.  For this reason, if your app has a large influx of traffic, I suggest choosing a framework with low start up times.  **Build time** is more of an awareness statistic - a nice to know.   CI/CD processes become concerned with this, but unit and integration tests and other processes tend to take longer than build time.

Here is the data shown without build time as a consideration
![build-start-request-times](https://i.imgur.com/sZyGp7O.png)
This graph makes it pretty easy to pick a framework because you can weigh the relative start and request times.  I wish there was something Google could do for Java/Spring, that start up time inhibits scaling abilities quite a bit.

I am curious how Laravel and Express fit in.  Let me know if you are as well and I will update this blog with those added to the charts!
macOS Big Sur Modal
Tags: codepen
Published: 2020-06-26 18:00:36

I made a Codepen with a macOS Big Sur-style modal overlay. I hope you like it. 😄

It uses pure CSS and Vue for the state management, but I think it could easily be turned into a React component.

{% codepen https://codepen.io/juniorRubyist/pen/PoZjxay %}
The single best tip for running Asp.Net Core microservices
Tags: csharp, microservices, tip, devops
Published: 2020-06-26 18:00:06

## tldr;

Add this line to your .csproj file 
```
<ServerGarbageCollection>false</ServerGarbageCollection>
```
as a part of the property group holding your target framework, like so 

```
 <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <ServerGarbageCollection>false</ServerGarbageCollection>
  </PropertyGroup>
```

# Can you tell me a bit more?

So, one of the things behind running microservices, or any service at all, is the constant use of memory.

Somewhere out there, you might be running a service or two, and depending on the environment and the programming language behind that service, it might require more or less memory just to stay alive, and running an Asp.Net Core service is no different. 

Just spinning up a small service in Asp.Net Core requires up to 150MB of memory, so picture you're running a microservice setup containing just a couple of services will quickly require atleast 1GB of memory. 

As you might already be thinking, this will quickly add up, so how ca we fix this?

Well, Microsoft themselves [has a nice post about Garbage Collection in .Net](https://docs.microsoft.com/en-us/dotnet/standard/garbage-collection/workstation-server-gc) - Here they explain that there are two different types of Garbage Collection in .Net WorkStation GC and Server GC. 

To tell it short, WorkStation GC is more aggressive than Server GC and therefore collects more often. 

Testing WorkStation GC we took a simple Asp.Net Core Crud Api and moved from Server to Workstation GC. This Api is serving around 500 requests a minute and swallowed around 230MB of memory. 

After moving to Workstation GC the api fell to around 85MB of memory, with no noticeable performance degrading or increased CPU usage on the machines. 

## But

This is not a miracle cure, you might have different needs, throughput and so on, that could mean that moving from Server to WorkStation GC could have a performance impact on your service 

Do you already run WorkStation GC? If not, try it out - And please share your results
Announcing My Plan For #100DaysOfCode!
Tags: 100daysofcode
Published: 2020-06-26 17:54:25

Late last night I committed publicly on Twitter to the #100DaysOfCode challenge. As I laid in bed unable to sleep, I decided I wanted to try something a little different. I began to formulate a plan to make this challenge a more interesting than just writing code for 100 days in a row. This post is the outline for my plan.

## The Plan

The purpose of committing to #100DaysOfCode publicly is so that others can encourage you to continue and succeed in the challenge. I wanted to add to that and this is what I came up with.

I will be building a complete, open source project with the goal to at least have it in beta within 100 days. I will be doing so as publicly as I can. I will post daily updates here and on Twitter at [@geoff_selby](https://twitter.com/geoff_selby). The project will be open source from the start though there may not be public pushes of code every day. I will explain in the daily updates why there was no push if that ends up happening.

## When Am I Starting

In order to start at a time that makes sense to me and to allow time to prepare, I will be starting this journey Monday June 29, 2020.

## What Am I Building

I have a few ideas for what to build and I will select one over the weekend to be ready to start first thing Monday. I will announce the project on Twitter when I decide.

## How You Can Help

If you would like to help support and encourage me throughout this journey, I urge you to follow me on Twitter at [@geoff_selby](https://twitter.com/geoff_selby) or here on [DEV](https://dev.to/geoffselby). I know this will be a massive undertaking and I could sure use your support.

## In Closing

This is going to be both fun and challenging, the exact reason I'm in this business, and I can't wait to get started and see what happens. It will be a long journey but I know that with your support I will be able to complete it. So thank you in advance. See you Monday!
@nxtend/ionic-react 2.2.0
Tags: ionic, react, nx, webdev
Published: 2020-06-26 17:46:50

---
published: true
title: "@nxtend/ionic-react 2.2.0"
cover_image:
description:
tags: ionic, react, nx, webdev
series:
canonical_url:
---

(This has been cross-posted from the official [nxtend](https://nxtend.dev) website)

It's been a while since the last `@nxtend/ionic-react` release, and as always, there is a lot in the works. Going forward, I plan to release more frequently and in smaller iterations.

## Bug Fixes

- fix pascal case generate App unit test
- fix generating global styles for Emotion

## Features

- upgrade Ionic to 5.2.2
- add `--disableSanitizer` flag to application schematic to disable the [Ionic sanitizer](https://ionicframework.com/docs/techniques/security#sanitizing-user-input)

The Ionic framework has a built-in input sanitizer, however, they recently added the ability to disable this feature entirely. The `--disableSanitizer` flag for the `application` schematic will disable this feature when generating the initial app.

I have upgraded the Ionic dependencies to `^5.2.2` in order to make user upgrades easier. I plan to continue to update dependencies with each release, but now users can upgrade compatible versions with their Node package manager.

## How to Upgrade

The `@nxtend/ionic-react` plugin releases with migrations for each release. The recommended way to upgrade is with the Nx or Angular CLI depending on how your project is configured. Where possible, nxtend will keep your relevant dependencies and configs updated.

Nx CLI:

```
nx migrate @nxtend/ionic-react

# yarn project
yarn

# npm project
npm install

nx migrate --run-migrations migrations.json

# yarn project
yarn

# npm project
npm install
```

Angular CLI.

```
ng update @nxtend/ionic-react
```
JSByte: How to use fetch API to make AJAX requests in JavaScript?
Tags: javascript, webdev, beginners, tutorial
Published: 2020-06-26 17:35:28

*I will be sharing bite sized learnings about JavaScript regularly in this series. This series will cover JS fundamentals, browsers, DOM, system design, domain architecture and frameworks.*

---

Fetch is an interface for making an AJAX request in JavaScript. It is implemented widely by modern browsers and is used for calling an API. 


```
const promise = fetch(url, [options])

```

Calling fetch returns a promise, with Response object. The promise is rejected if there is a network error, and resolved if there is no problem connecting to the server and the server responded with a status code. This status code could be 200s, 400s or 500s.

A sample FETCH request - 
```javascript

fetch(url)
.then(response => response.json())
.catch(err => console.log(err))

```

The request is sent as a GET by default. To send a POST / PATCH / DELETE / PUT you can use the method property as part of `options` parameter. Some other possible values `options` can take - 

- `method`:  such as GET, POST, PATCH
- `headers`: Headers object
- `mode`:  such as `cors`, `no-cors`, `same-origin`
- `cache`: cache mode for request
- `credentials`
- `body`

[Check out the full list of available options here]('https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch')


This example demonstrates the usage of fetch to call an API and to get a list of git repositories.
``` javascript
const url = 'https://api.github.com/users/shrutikapoor08/repos';

fetch(url)
  .then(response => response.json())
  .then(repos => {
    const reposList = repos.map(repo => repo.name);
    console.log(reposList);
  })
.catch(err => console.log(err))

```

To send a POST request, here's how method parameter can be used with async / await syntax.

```javascript
const params = {
id: 123
}

const response = await fetch('url', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(params)
});

const data = await response.json();

```
___

### Interested in more JSBytes? [ Sign up for the newsletter] (https://tinyletter.com/shrutikapoor )