teleren/devto huggingface dataset:
Criando e configurando projeto Node.Js com TypeScript
Tags: javascript, typescript, node, braziliandevs
Published: 2021-11-23 23:15:00

## Requisitos necessários
Para iniciarmos a criação de nosso  projeto, precisaremos desses componentes instalados:
- [Node.js](https://nodejs.org/en/)
- [yarn](https://www.npmjs.com/package/yarn)

## Preparando ambiente 
Em algum lugar de sua preferência, crie uma pasta e a abra em seu editor de código. No terminal, navegue até a pasta e rode o comando:
```bash
$ yarn init -y
``` 
Podemos observar que o arquivo packge.json foi criado na raiz de seu projeto, onde estão contidos dados como o nome de seu projeto, a versão, o arquivo principal, a licença e futuramente conterá as dependências. 

## Configurando o projeto
No terminal, baixe a dependência de desenvolvimento do TypeScript:
```bash
$ yarn add typescript -D
```
Podemos observar que uma pasta chamada node_modules foi criada, ela é responsável por armazenar os módulos de dependências de seu projeto.

No terminal, inicie o TypeScript: 
```bash
yarn tsc --init
```
Podemos observar que o arquivo tsconfig.json foi criado na raiz do seu projeto, esse arquivo como próprio nome já diz, é responsável pelas configurações do TypeScript. **Dentro do arquivo, altere a propriedade strict para true**. O strict é uma propriedade do js que insere algumas checagens no código. Como faremos essas checagens com o ts, desabilitaremos o strict.
Na raiz de seu projeto, **crie uma pasta chamada src com um arquivo server.ts dentro dela**.

## Baixando Express.js
O Express é um framework incrível e possui diversas características que facilitam o desenvolvimento de nossas aplicações. Dentre suas principais características, podemos citar:

- Possui um sistema de rotas completo;
- Possibilita o tratamento de exceções dentro da aplicação;
- Permite a integração de vários sistemas de templates que facilitam a criação de páginas web para suas aplicações;
- Gerencia diferentes requisições HTTP com seus mais diversos verbos;
- Feito para a criação rápida de aplicações utilizando um conjunto pequeno de arquivos e pastas;

No terminal, baixe o Express e sua tipagem: 
```bash
$ yarn add express
$ yarn add @types/express -D
```
No arquivo server.ts, importe o Express:
```ts
const app = express()
```
Inicialize o Express: 
```ts
const app = express()
```
Crie o servidor: 
```ts
app.listen(3000, () => console.log('Server is running'))
```

## Biuld automático
O bild da sua aplicação irá converter seu código TypeScript para js, para que seu código seja interpretado pelo node.
No terminal, instale: 
```bash
$ yarn add ts-node-dev -D
```
No arquivo pakage.json crie o script:
```json
"scripts": {
	"dev": "ts-node-dev src/server.ts"
},
```
Salve todos os seus arquivos e no terminal rode o comando:
```bash
$ yarn dev
```
Se no seu console foi retornado a mensagem: Server is running, parabéns ocorreu tudo certo!

Obrigado pela leitura! Feito com ❤️ by [Pablo Ferrari](https://github.com/PabloFerrari013)
Day 484 : Feel It
Tags: hiphop, code, coding, lifelongdev
Published: 2021-11-23 22:48:30

_liner notes_:
- Professional : Woke and everything was sore and hurts. haha Good thing I didn't have a lot of meetings. I think I got the basis done for this project I've been working on. Tomorrow, I'm going to install it and see if anything breaks and then fill out some of the documentation. Also got to go on the Vonage Twitch channel and talk with some teammates. Had a really good time.

- Personal : Last night I worked on converting the proof of concept I made into a full fledged project. I set up the Firebase project with Astro. Made quite a bit from progress. Got the landing page, about and shop set up. Also figured out how I could submit a form without JavaScript, so for a lot of the site, there's no JavaScript and it loads super quick! Even was able to send information to the backend, make a call to an API and return the results. I then manipulated the data into a structure that would be easier for me to display on the page.

![A winding road through the mountains of Castleton, United Kingdom at sunset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw9gvm3alez62i017681.jpg)

Going to continue styling the data to be put on the page. Then I want to add a section that pulls some info from the local storage. Then I may go through some tracks for the radio show and then watch an episode of Cowboy Bebop. Going to feel it out and see if I'm not as sore. 

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 9MyOao3Lwfg %}
lisa-orm pre-alpha
Tags: sql, python, lisaorm, lisa
Published: 2021-11-23 22:16:17

Not long ago, I decided to make an ORM like djano ORM ...
I didn't actually start working on it until I broke my leg and stayed home two weeks ago.
the truth is I've only worked on it for a few hours in the last week 🙂😅🙄.
It doesn't exactly look like Django ORM, but it does look a bit like it
This is [pre-alpha](https://pypi.org/project/lisa-orm/). version.
<hr>
If you want, you can download it from [pypi](https://pypi.org/project/lisa-orm/) and tell me your opinion and suggestions for its development, and I will be very thankful 🌹🥰️.

<hr>

### note: lisa is my dog 🐶

```python
from lisa_orm.db import models


class MyModel(metaclass=models.ModelMeta):
  table_name = 'my_table_name' # -> Name your model it's mandatory
  
  my_field_one = models.CharField(max_length=40, null=True)
  my_field_two = models.IntegerField(unique=True)

```
Have you ever noticed how much time you waste on AWS-Logins and Account-Switching ?
Published: 2021-11-23 22:06:07

Simperate is developed by developers for developers as a product software solution that aims to operate AWS services with a cross-platform application that can do more in a user-friendly desktop environment.

The beta version is just the beginning, our roadmap is long and has many features and ideas that are waiting to be implemented.

We are currently in the process of risk-analysis in order to invest more in the development. We are thankful for any kind of assistance with bug reports and feedback, If your are interested to support and accelerate the development of simperate, you can purchase a license key that gives you unrestricted access to all features for 3 years of support.

https://simperate.io
(Kinda sloppy) Monad-based Options in Scala
Tags: scala, functional
Published: 2021-11-23 22:04:47

Worked on this one for a while today. What do you think? What would you change?

There's a bit of a tradeoff between making the type parameters a bit "cleaner" vs. the same for the method signatures in the `Option`... I'm not sure which way to go with it.

```scala
object Monads extends App {
  trait Functor[+A, F[_]] {
    def map[B](f: A => B): F[B]
  }

  trait Monad[+A, F[_]] extends Functor[A, F] {
    def unit[X](a: => X): F[X]
    def flatMap[B](f: A => F[B]): F[B]
    def map[B](f: A => B): F[B] = flatMap(a => unit(f(a)))
    def flatten[B](implicit ev: A <:< F[B]): F[B] = flatMap[B](identity[A])
  }

  sealed trait Option[+T] extends Monad[T, Option] {
    import Option._
    override def unit[X](a: => X): Option[X] = Some(a)
    override def flatMap[B](f: T => Option[B]): Option[B] = this match {
      case Some(x) => f(x)
      case None => None
    }
  }

  object Option {
    case class Some[T](x: T) extends Option[T]
    case object None extends Option[Nothing]
  }
  
  import Option._
  val somePinned: Option[Int] = Some(42)
  val nonePinned: Option[Int] = None

  println(somePinned.map(_ * 2))          // Some(42)
  println(nonePinned.map(_ * 2))          // None
  println(Some(Some(42)))                 // Some(Some(42))
  println(Some(Some(42)).flatMap(x => x)) // Some(42)
  println(Some(Some(42)).flatten)         // Some(42)
}
```

Further reading:

- https://www.baeldung.com/scala/higher-kinded-types
- https://medium.com/free-code-camp/demystifying-the-monad-in-scala-cc716bb6f534
- https://blog.redelastic.com/a-guide-to-scala-collections-exploring-monads-in-scala-collections-ef810ef3aec3
- https://systemfw.org/posts/flatten.html
- https://livebook.manning.com/book/functional-programming-in-scala
HACKTOBERFEST 2021 dev.to badge
Tags: hacktoberfest, digitalocean, opensource, programming
Published: 2021-11-23 21:41:58

Yeah!!! I'm happy to say that I just received my Hacktoberfest 2021 dev.to badge ! 🙌

![Hacktoberfest 2021 badge](https://res.cloudinary.com/practicaldev/image/fetch/s--cm4PWdMq--/c_limit,f_auto,fl_progressive,q_80,w_375/https://dev-to-uploads.s3.amazonaws.com/uploads/badge/badge_image/131/hacktoberfest-2021-badge.png)

See you next year !🚀

Thanks to #[HacktoberFest](https://hacktoberfest.digitalocean.com/), #[Digital Ocean](https://digitalocean.com/) & #[Dev.to](https://dev.to/) !

You can find my work on [Gitlab](https://github.com/Natizyskunk/) and [Github](https://github.com/Natizyskunk/).
Create Dividend Tracker With Google Sheets 
Tags: showdev, googlesheets, javascript
Published: 2021-11-23 21:18:34


As my investment strategy is to buy stocks that pay regular and stable dividends during a long-term period, I need to monitor my dividends income by stocks, by months, and by years, so that I can answer quickly and exactly the following questions:

- How much dividend did I receive on a given month and a given year?
- How much dividend did I receive for a given stock in a given year?
- Have a given stock's annual dividend per share kept increasing gradually over years?
- Have a given stock's annual dividend yield been stable over years?

In this post, I explain how to create a dividend tracker with Google Sheets.

[Create Dividend Tracker With Google Sheets](https://www.allstacksdeveloper.com/2021/11/create-dividend-tracker-with-google-sheets.html)
Stock correlation analysis with Google Sheets
Tags: showdev, googlesheets, javascript
Published: 2021-11-23 21:14:45

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fbboksi7c5bp5t0spkc.jpeg)

Correlation is a statistical relationship that measures how related the movement of one variable is compared to another variable. For example, stock prices fluctuate over time and are correlated accordingly or inversely to one another. Understanding stock correlation and being able to perform analysis are very helpful in managing a stock portfolio investment. In this post, we will look at how to perform stock correlation analysis with Google Sheets.

[Stock correlation analysis with Google Sheets](https://www.allstacksdeveloper.com/2021/08/stock-correlation-analysis-with-google-sheets.html)
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2021-11-23 21:01:38

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 

## Seeing the forest for the (Abstract Syntax) Trees

@aruna helps us get beyond a cursory understanding of Abstract Syntax Trees (AST) in this post

{% link https://dev.to/aruna/abstract-syntax-trees-theyre-used-everywhere-but-what-are-they-jh6 %}

## The benefits and risks of contract development

If you're interested in working as a contract developer @hrishio has made a pretty strong case for it.

{% link https://dev.to/hrishio/why-should-you-become-a-contractor-the-3-big-benefits-of-contracting-11o9 %}

## Shedding some light on developer relations engineering

@josefine asked the questions we've all had about DevRel in this interview. 

{% link https://dev.to/s2engineers/what-does-a-developer-relations-engineer-do-4pep %}

## Rebuilding a blog

@abbeyperini is back with a new installment of their series about accessibility auditing their portfolio site. In this post, they explore their blog page. Don't miss the final installment, coming up soon!

{% link https://dev.to/abbeyperini/blog-page-accessibility-deep-dive-1hbl %}

## A most welcome brain massage

@mustapha created a stunningly relaxing animation that I guarantee you won't regret taking a peek at. 

{% link https://dev.to/mustapha/mesmerizing-animation-using-only-css-rotations-229l %}

## Kickstart your next personal project

@unclebigbay walks us through setting up a Node.js backend project, connecting it to a database, writing your backend CRUD logic, and testing it using Hoppscotch. This thorough tutorial will help you kickstart your personal project _and_ apply it in any backend project.

{% link https://dev.to/unclebigbay/creating-your-first-crud-restful-api-with-nodejs-and-hoppscotch-4lc7 %}


## "You are not alone, and you are loved"

_"We are not alone, not in the greatest chaos, nor in the most thorough systems of order we could imagine. Alone we will fail, but together we can achieve so much more, and that's a lesson I wish I had learned much earlier in my life."_
-@baweaver ❤️ 

{% link https://dev.to/baweaver/tales-of-the-autistic-developer-order-and-chaos-2o0p %}



_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
Html And The Mystery Of The Skeletons
Tags: html, webdev, beginners, programming
Published: 2021-11-23 21:01:02

Ready? Round 2! ❤️

Hi! Remember when in the previous post I told you what HTML was, what it looked like and what the attributes were? well, it's time to start playing with it. So grab paper and pencil and let's get started! 

Ok, we know that the tags look like this:

```html
    <p> ....... some content .....</p>
```  

But we must take into account the following points
   1. It is not the same `<h1>` as `<H1>`. 
   2. Tags are generally always lowercase. 
   3. We must close the tags so that they always work.

# But how do you compose them to create an HTML document?

Well this is the basic structure :

```html

         <!DOCTYPE html>
            <html>
                  <head>
                       <meta charset="utf-8">
                       <meta name="viewport" content="width=device-width">
                       <title>Hello World</title>    
                  </head>
                  <body>
                        <!-- All the content here -->
                  </body>
            </html>

```

![htmlSimpleStructure.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637066189926/SHr7gG2g_.png)

Don't worry if at the beginning you don't understand too, it's normal, later I will explain you how each tag works.
Trying to compare HTML basic structure with a body, with head, body and limbs, and HTML works as if they were the bones, in which the rest of the document, photos, videos, etc.. is supported.

##  Everything that appears in the body section what will be displayed on the page are.  

Well, and as they say: 
> 
You will not learn how to code keeping you ass in your sofa 😃.

I advise you to use this playground to practice what you have just learnt today
   
 [Code pen ](https://codepen.io/) 

In the section that says HTML you are going to paste the code that I proposed you in basic structure, and inside where it says body you are going to write the following tags:


```html 
     <p>Hello world</p>
``` 

There you go, you are creating a HTML code like any good programmer who respects himself! 😉

But I do not want you to stay with the desire for more so I pass a series of tags and their functionalities for you to play a while and go testing little by little.

```html

<h1>...</h1> => Create a title

<img src =" URL "> => Insert an image in the document.  

<p>...</p> => Insert a paragraph in the document

<ul> => create a list of points 
        <li></li>  
        <li></li> => you fill that list with this tag
</ul> 


``` 

Well I leave you with the task:

Create a document which you put a picture of a puppy and a description in, also, you should try to include a few items inside a list.

In the next post we will learn how to improve this so stay tuned! 
Well friends!! That's all for the moment, you have for a while, and remember: 
> 
Do what you love every day and try to be the best version of you!
Raciocínio Automatizado com Leonardo de Moura, Pesquisador na Microsoft Research
Tags: lean, leanprover, formalmethods
Published: 2021-11-23 20:59:25

Acabei de entrevistar Leonardo de Moura.
{% youtube bwKFcLaeD1A %}

A entrevista está no Spotify, para quem quer apenas ouvir: https://open.spotify.com/episode/7wSSQuqMXCq69atlRKqYyO

O Anchor contém links para diversos outros aplicativos de podcasts: https://anchor.fm/adolfont/episodes/Raciocnio-Automatizado-com-Leonardo-de-Moura--Pesquisador-na-Microsoft-Research-e1anc8j

Leonardo de Moura é um brasileiro que trabalha na Microsoft Research. Ele é um pesquisador bastante citado. Leonardo publicou [o artigo Z3: An efficient SMT solver](https://scholar.google.com/citations?view_op=view_citation&hl=en&user=CwazDKgAAAAJ&citation_for_view=CwazDKgAAAAJ:u5HHmVD_uO8C) em 2008. Verifiquei hoje (23/11/2021) e o artigo já tem mais de 7900 citações, 937 só no ano passado!

Leonardo de Moura criou o provador de teoremas Z3 e o assistente de provas Lean que, na sua versão 4, é também uma linguagem de programação funcional.

Como não encontrei nenhuma entrevista ou palestra dele gravada em português no YouTube, decidi eu mesmo fazâ-la. Em inglês há esta [palestra dele explicando o Lean 4](https://youtu.be/UeGvhfW1v9M), entre outras.
Tasky App
Tags: javascript, react, webdev, css
Published: 2021-11-23 20:59:16

Hey Guys,

 Please find this app made by me in react. Wish to add features. Stores data in localStorage. you can add, edit create and delete tasks. Tasks fall into categories. 

Please find the running version of the app here. https://radharamanaa.github.io/Tasky-App/

I am still yet to increase adoption of css best practices in this app. Just today started replacing the px's with rems and ems.

Thanks,
Abhijeet.![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5x6b6e1g079t5fsg3ez.png)
HTML5  and the myth of the markups language
Tags: html, webdev, tutorial, beginners
Published: 2021-11-23 20:57:48

Have you ever googled something, no matter what it is, a recipe, a meme or even a school assignment, and prayed that the answer would show up on a web page? I have too, and that's why on more than one occasion I've wondered how it worked that got me out of troubles.
And that's the reason for this course, to explain from the basics to the most advanced HTML and how websites are organized, how to give them color with CSS3 and life with JavaScript.

Okay! to start with this:

## WHAT IS HTML and WHAT DOES IT DO? (you can ask me or not...)

HTML stands for (hypertext markup language) that although many call it "programming language" should insist to stop considering it as such, because it is something even more magical is a "markup language" because it organizes how a document will be, what elements compose it, in short it is like making a Word document for the Internet.

## WHAT DOES IT LOOK LIKE?

As I have said so far, HTML is a markup language and not a scripting language, but what does this mean? It means that it is enclosed between tags (angle brackets), so it would look like this a :

```html
<tag>content</tag>
```
However this is not always the case, there are tags that do not need the enclosing tag, for example :

```html
<img>
```

But that's not all... we can... add... ATTRIBUTES! YES! just as you read ATTRIBUTES! but what are they? they are like "upgrades" of the tags that allow them to get superpowers to improve their capabilities.

```html
<tag attribute="value">content</tag>.
```

It seems interesting, doesn't it? Well, don't worry, in the next posts I'll be telling you a little more so you won't be left wanting. See you in the next one ! and remember to do what you love every day.
GHOST CMS. Is it a superpower for making blog-applications
Tags: webdev, beginners, javascript, programming
Published: 2021-11-23 20:56:42

## INTRODUCTION
Ghost CMS can be a lifesaver and a timesaver if you want to make a fulstack blog app.

## DETAILS
Ghost CMS provides you a prebuilt admin dashboard which makes 70% of your works easier. You can directly publish a blog post through that admin panel. 

It will provide you with a REST API with a bunch of endpoints and you can use those in your next blog application. 

Visit: [GHOST](https://ghost.org/docs/content-api/) for reference

*In short you can say that if you get into any error in the backend portion for making your next node.js app, then you can use ghost CMS as your REST API. Rather than that, it also provides you support like WordPress*
AWS IAM managed policies for Amazon DynamoDB
Tags: aws, database, nosql, security
Published: 2021-11-23 20:37:12

![Security camera photo by Miłosz Klinowski on Unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1uuspqx7ihzflve12hu.jpg)

For application access, you should not use the managed AWS Identity and Access Management (IAM) policies for Amazon DynamoDB. These IAM policies are designed for use with the AWS Web Console and therefore have more permissions to more services than most applications need access to. Instead, please create your own [IAM policies for DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/using-identity-based-policies.html).

In order to follow least privilege security conventions, it is best practice to create your own custom IAM policy for DynamoDB access by an application. If this is something you have never done before, don't be intimidated. I got ya. To get you started, [here are a few templates](https://github.com/aws-samples/aws-dynamodb-examples/tree/master/DynamoDBIAMPolicies) I created to use to enable *full* access to only Amazon DynamoDB table resources. 

Once you play with these templates, you should ultimately create a new policy that narrows access down to just the operations the app needs to do on the resources it needs to do it. If all you are doing is SELECT and INSERT with [the PartiQL API for DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/ql-reference.html) on one table, then the only actions you should allow are these two:
* "dynamodb:PartiQLInsert"
* "dynamodb:PartiQLSelect"

In summary, use security best practices when designing access to Amazon DynamoDB for your apps, create your own customer managed IAM policies and do not use the AWS managed IAM policies.
Reusing SVG elements in HTML without copy-pasting it
Tags: javascript, react, svg, performance
Published: 2021-11-23 20:30:05

Sometimes you might encounter the case where you want to use the same SVGs multiple times across one page. The first example that comes to my mind is the use of social media icons both in the navbar and footer. This is how I would approach this

```jsx
function SomePage() {  
 return (  
    // Invisible symbol  
    <svg style={{ display: "none" }} version="2.0">  
      <defs>  
        <symbol id="linkedin-badge">  
          /* This is where you would put the contents of the SVG 
          (everything that is inside SVG tag except the tag itself)  */
        </symbol>  
      </defs>  
    
      <use href="#linkedin-badge" />  
    </svg>   
  
  
    // And this is how you would use it  
    <svg  
      width="32"  
      height="32"  
      viewBox="0 0 32 32"  
      version="2.0"  
    >  
      <use href="#linkedin-badge" />  
    </svg>  
  )    
}
```

Of course, you can just copy-paste it, but it will make the size of your HTML document bigger and delay the FCP.
You could also export it to a file, and load it through the image element, but it would cause flicks, which you probably don't want to have, especially when the element is above the fold.