teleren/devto huggingface dataset:
The Right Way to Create Function Components in React With TypeScript
Tags: typescript, javascript, react
Published: 2020-08-07 23:49:11


Recently, I had this pull request that triggered a short discussion with my teammates. Someone noticed that I used a different method to write types for the function components I wrote whereas there were other methods used in the codebase.

In this bite-sized React article, I'll show you the right way to do it.

---

### Function components from a type-oriented perspective

Functions, in general, are programmatic tools that take some input, process it, and return some output. Function components essentially work the same way. They take properties and convert them into UI elements. You can see below a super basic function component example from [reactjs.org](https://reactjs.org/docs/components-and-props.html) using plain JavaScript.

{% gist https://gist.github.com/ozantunca/28c4e43eb48c43b89d6884fb52efe3bd %}

By rewriting this component with TypeScript we aim to make sure that we

- use the correct properties with their correct types
- get a value of the correct type returned from the function

---

#### Common (and wrong) way to type function components

A method I see often that is used by developers is to define only the type for the component's props and ignore the return value. It looks like this:

{% gist https://gist.github.com/ozantunca/4820fa9dc7dce6ddab61a87ca2d28dcc %}

This is all good and well, considering TypeScript is smart enough to implicitly recognize the return type. But it can fail you if your function component returns different values based on some conditions. Not to mention that it causes friction between various function components.

---

#### The right way

The right way to define types for function components would be using React's own type definition `React.FunctionComponent` or `React.FC`. In that case, we would refactor the above code to the one below:

{% gist https://gist.github.com/ozantunca/4af131b61562c24c224e9462ba6c9060 %}

This version uses React's own type definition which includes the definition for the return type and also `props.children` attribute.

---

### Conclusion

Consistency in a codebase is very important. It keeps code changes clean and makes onboarding easier. Try to be consistent in your code conventions and use the standard methods when possible.

If you're interested in more React tips like this, consider subscribing to my weekly newsletter. I promise to make it worth your while.
Fibonacci Numbers & Project Euler Problem Two
Tags: projecteuler, python, algorithms, beginners
Published: 2020-08-07 23:41:47

---
title: Fibonacci Numbers & Project Euler Problem Two
published: true
description: Solving the second project Euler problem for #projecteuler100.
tags: projecteuler, python, algorithms, beginner
---

Continuing on my series of going through the first 100 [Project Euler](http://projecteuler.net) problems, we're on to problem two. Here's [problem one](https://dev.to/valeriecodes/modular-arithmetic-project-euler-problem-one-4378) in case you missed it.

> By considering the terms in the Fibonacci sequence whose values do not exceed four million, find the sum of the even-valued terms

The [Fibonacci sequence](https://en.wikipedia.org/wiki/Fibonacci_number) is a series of numbers in which the next number is the sum of the previous two.

The first time I solved this I think I probably checked if each number in the sequence was even, with a modulo similar to problem one, such as:
``` py
item % 2 == 0
```

But it occurred to me that the numbers follow a pattern, `odd, odd, even` so I could sum the even terms by adding together every third term.

I wrote a method to sum together all even Fibonacci numbers less than _n_. The solution is below or on [GitHub](https://github.com/valeriecodes/project-euler/blob/main/2.py)

``` py
def sumOfEvenFibs(n):
  terms = [1, 1, 2]
  total = 0
  while terms[2] <= n:
    total += terms[2]
    t0 = terms[1] +  terms[2]
    t1 = terms[2] + t0
    terms = [t0, t1, t0 + t1]
  return total

print(sumOfEvenFibs(4000000))
```

Interested to see how others approached this one!
What you need to know about Javascript Debugger.
Published: 2020-08-07 23:11:16

The process of finding and removing errors in a computer program is referred to as "Debugging". If you have written one or more codes you will definitely be familiar with Code debugging(finding and fixing errors in a computer program).
All modern browsers have a built-in Javascript Debugger. Built-in debuggers can be turned "ON" and "OFF" which ensure error is being reported to the user.
Code can be debugged in javascript by:
**Setting Breakpoint:** Use Chrome’s developer tools or Firebug to locate the line of JavaScript, then set the breakpoint with the mouse.
To do it in Chrome, first, open the developer tools
Select the Scripts tab.
Click the little folder icon on the far left.
Navigate to the source file where you want to set the breakpoint.
Find the line in question, then click the line number to set the breakpoint (a little highlighted triangle will appear).
When the breakpoint is fired, you get access to the watches section where you can run arbitrary expressions, see all the variables in scope, and the call stack. 
**Using Debugger keyword:**
       *var x = 15 * 5;*
       *debugger;*
document.getElementById("demo").innerHTML = x;
You activate debugging in your browser by pressing F12 then select console in the debugger menu
You can also follow these steps:
**Chrome**
Open the browser.
From the menu, select "More tools".
From tools, choose "Developer tools".
Finally, select Console.
**Firefox**
Open the browser.
From the menu, select "Web Developer".
Finally, select "Web Console".
**Edge**
Open the browser.
From the menu, select "Developer Tools".
Finally, select "Console".
**Opera**
Open the browser.
From the menu, select "Developer".
From "Developer", select "Developer tools".
Finally, select "Console".
**Safari**
Go to Safari, Preferences, Advanced in the main menu.
Check "Enable Show Develop menu in menu bar".
When the new option "Develop" appears in the menu:
Choose "Show Error Console".
[Tutorial Linux] Falha na atualização do Ubuntu
Tags: linux, ubuntu, tutorial, dns
Published: 2020-08-07 23:01:46

**Foto de  Christina Morillo no Pexels**

Nesse tutorial iremos aprender a diagnosticar e solucionar quando há falha na hora da atualização do ubuntu. 

Primeiramente, irei descrever a situação que me levou a escrever esse artigo. Há alguns dias atrás estava com uma [VPS] (https://pt.wikipedia.org/wiki/Servidor_virtual_privado)  resetada, devido a alguns problemas de segurança, resolvi resetá-la e iniciar do zero o projeto web que estava desenvolvendo. Como procedimento inicial, fui fazer a atualização do ubuntu, digitei o comando:

> sudo apt-get update

E a resposta foi, infelizmente, algo que eu não esperava. Veja na imagem abaixo:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b9aqe3wvu567rtx1f6qz.jpg)
De imediato, fiquei tranquila e fui consultar na internet algum tutorial sobre tal situação. E também questionei em algumas comunidades tecnológicas. Mas, a solução não veio logo de cara. Assim, resolvi descrever aqui.

1º) Teste de comunicação:
Faça o ping para algum site na web e se falhar, como nessa imagem:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/slvhbuxoedm2ef4f4syp.jpg)

2º) Solução é configurar o [DNS](https://pt.wikipedia.org/wiki/Sistema_de_Nomes_de_Dom%C3%ADnio):
Exemplo, coloque **OpenDNS** - 208.67.222.222, 208.67.220.220, para verificar o DNS, digite o comando:

>cat /etc/resolv.conf

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n6bkbtimo9v7giv3inzn.jpg)
Após resolvido o DNS, verifique novamente com o comando de atualização ou ping, para testar. Se funcionar algum deles, está ok!

#Considerações Finais

A solução aqui se deu após mais alguns testes de comunicação, embora a VPS estava sendo acessada via remotamente, ela estava apresentando um erro na configuração do DNS o que impedia a comunicação para atualização do ubuntu.

#Agradecimentos

Agradecimento especial à **comunidade [Ubuntu Brasil Oficial](http://t.me/UbuntuBrasilOficial)** e ao administrador da comunidade [Leandro Ramos] (https://dev.to/leandroramos) pela assistência técnica.
Opinions worth sharing
Tags: culture, communication, work, opinion
Published: 2020-08-07 22:46:40

Very often in my career, I was faced with colleagues or managers' decisions that I thought would bring some trouble.

There is sometimes an opportunity, before the decision starts actually triggering real life effects, where there is still time to raise your voice and share your concerns with your team.

I am not an extrovert and convincing people has never been my forte, which sometimes prevented me to speak when I should have spoken.

I once heard about a decision to change a legacy CMS to replace it with a brand new, also custom CMS. On top of bringing absolutely zero new advantage to the end users, I also knew about [Spolsky's law](https://www.joelonsoftware.com/2000/04/06/things-you-should-never-do-part-i/), aka you never rewrite a software from scratch.

I tried to fight it, but struggled to make my point. I gave up pretty quickly and thought that maybe the people leading the decision knew better. Despite my gut feeling. And of course I was very wrong.

I should have make my voice heard and share my opinions. The decision led us to many performance problems and a system that was not necessarily better than the previous one. And no gain for the end users. Hence, by not raising my voice, I brought myself in a very uncomfortable situation.

When you think something is not right, don't  keep it to yourself, share it with your colleagues. You might thank you later 🙂

---

<span>Cover photo by <a href="https://unsplash.com/@snowshade?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Oleg Laptev</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Solutions for Staging / Demo Account Data?
Tags: rails, discuss, webdev
Published: 2020-08-07 22:40:27


Every software product I've ever built always has this same problem. Sales, marketing / product need a repeatable demo account populated with best case scenario data that doesn't take manual reset and doesn't have any side effects. I was listening to [this episode](https://rework.fm/an-email-account-is-born/) of the Re-work podcast from Basecamp and it was good to know that I'm not totally crazy in this being a pain point. 

### 💬🙏 comment below — how are you solving this? 
I would love to know, don't limit answers to Rails! I'm sure we can be inspired based on whatever framework people are in. 

## Our Current solution — very "Rails Specific" 
I use Rails fixtures and pre-load those fixtures in a bin/setup script. If you take your time to pre-populate all this fixture data it works really well. You've got that data for testing (Which is usually a win) and then it's easy to set up staging or localhost to just reset back to this state with a simple command. 

However — especially with ActionText and ActiveStorage it gets clunky and you end up with these huge fixture files. I have found some solutions to limit the pain here, you can [pull down production data](https://stackoverflow.com/questions/6591722/how-to-generate-fixtures-based-on-my-development-database/35394335#35394335) and then write it to fixtures, then update it. 

### Other Misc Rails Thoughts / Tips
I've recently learned you can do this [quasi-inheritance](https://dzone.com/articles/drying-yaml-fixtures) thing in your fixture files to DRY them up. And of course, [you can write ERB](https://flylib.com/books/en/4.185.1.105/1/) in fixtures. (Things like Faker can help this) but even with all this, there's got to be a better way. 


# Again — would love to hear from the Dev.to community
- How do you deal with "Demo" account data? 
- How does your marketing and sales team are well supported on this? What if they need to make changes or updates? 
- How do you keep this whole thing from not being such a pain in the ass? 
- How do you keep this in sync with new feature rollouts?
Show off with Github's README
Tags: webdev, codenewbie, github, branding
Published: 2020-08-07 22:16:28

Github now allow us to create a README file for our profile to display whatever fancies us. How about taking advantage of this feature to show off a little? Here are a few very cool tools I found to take your README to the next level.

##Creating your README :hammer_and_pick:

In case you don't have a personal README, it's as easy as creating a new repository that’s the same name as your username.

##Now off to the code :toolbox: 


###Github Readme Stats
Show all of your numbers in a cool personalizable image. It lists the total of your commits, stars, PR's, issues.
You can look at the repo with instructions [here.](https://github.com/anuraghazra/github-readme-stats)

###Waka time updates
Waka time is a plugin for your editor that can help you track how much time you're spending coding. It's important to notice that it won't track the time your editor is open, but the actual time you spend writing on it.
You can look at the Github Action [here.](https://github.com/marketplace/actions/waka-readme#update-your-readme)

###Show off your languages
I also found a really cool Github Action that automatically groups your projects by language in a nifty table that gets loaded into your README.
You can look at the Github Action [here.](https://github.com/marketplace/actions/profile_stack)

###Even more stats!
I have a thing with stats and tables, sorry. This Github Action shows you cool things like your most productive time of day, whether you are an early bird or a night owl, favorite languages you code in and more.You can look at it [here.](https://github.com/marketplace/actions/profile-readme-development-stats)

###Hook up your blog posts too!
There's this great Github Action that allows you to update dynamically your README each time you write a new blog post. It works with Dev.To, Medium, Wordpress, StackOverflow and many more. You can look at it [here.](https://github.com/marketplace/actions/blog-post-workflow)
<br>
I hope you found this helpful, stay safe and please remember to take a break.

Got something to add? Please feel free to [reach out](https://twitter.com/miss_elliev) for any question, comment, meme or dog photos swap.
Kalolo API from scratch with Docker (inside hashicorp/bionic64)
Tags: docker, vagrant, cowsay, rest
Published: 2020-08-07 22:15:10

See [linkedIn article](https://www.linkedin.com/posts/adrien-sales_unix-linux-culture-activity-6697629162578042880-P4X1) for more details.

```shell
mkdir kalolo-box
cd kalolo-box
vagrant init hashicorp/bionic64
vagrant up
vagrant ssh
clear

sudo apt-get update
sudo apt-get remove docker docker-engine docker.io
sudo apt install docker.io
sudo systemctl start docker
sudo systemctl enable docker
docker --version

# run the kalolo-api locally
sudo docker pull rastadidi/kalolo-api:latest
sudo docker images
sudo docker run -d -p 8080:8080 rastadidi/kalolo-api:latest
sudo docker ps

 
sudo apt-get install jq boxes toilet cowsay fortune -y


echo "We are ready" | boxes -d dog

alias kalolo='clear && echo $(curl -sS http://localhost:8080/expressions/tag/bonjour/random | jq -r '.texte') | boxes -d boy | toilet --gay -f term'
kalolo
```
Useful Animated Hamburger Articles
Tags: hamburger, menu, css, svg
Published: 2020-08-07 22:06:40

https://jonsuh.com/hamburgers/
https://css-tricks.com/line-animated-hamburger-menu/
https://codepen.io/ainalem/pen/wvKOEMV
https://www.npmjs.com/package/vue-burger
Notes on Git Basics
Tags: git
Published: 2020-08-07 22:01:34



## Basic Commands
```bash
	$ git --version # Git version
	$ git init  # Initialize Local Git Repo
	$ git add <file/files/. > # Adding file/files/all to the staging area or index
    $ git rm --cached <file/files/. > # Remove file or files from the staging area
    $ git status # Check Status of Working Tree ( show differences between working tree and the staging area)
	$ git commit # Commit Changes to the Index
	$ git push # push to remote repos
	$ git pull # pull latest from remote  repo
	$ git clone # Clone repo into new directory
	
```

## Some Config Options

```bash
$ git config --global user.name 'Your Name'
$ git config --global user.email 'your email'
```

### Examples
```bash
	$ git add *.html # add all html files to the stage
	$ git commit -m 'short message' # commiting with short message
```

### `.gitignore` file
```bash
 $ touch .gitignore
```

```txt
/dir_name
file.txt 
*.txt 

```
---
### Branching

#### Creating Branch
```bash
		$ git branch BranchName
```

#### Changing Branch 

```bash
	$ git chechkout BranchName
```
#### Merging
```bash
	$ git merge BranchName
```

---

### Git adding remote

```bash
	$ git remote add origin https://github.com/tratata
	$ git remote
	$ git push -u  origin master
	$ git pull
```
Day 191: Oooh
Tags: hiphop, code, coding, lifelongdev
Published: 2020-08-07 21:40:42

_liner notes_:
- Professional : Pretty chill day today. I think everyone is recovering from a very busy week. haha I basically did research for a future blog post.

- Personal : Finished watching the second season of "The Umbrella Academy". It was really good! Worked out a way around a roadblock I was having with my side project. Funny thing, the solution was similar to what I did for the hackathon project. Got the radio show recording edited and submitted to the radio station to be played on air this week.

![View of the ocean in the distance from the boardwalk in Scharbeutz, Germany](https://dev-to-uploads.s3.amazonaws.com/i/esl8selt4o8xwy5m1g9q.png)

Putting together a list of a few more things I'll need when I move into my van. Things like a solar panel, ladder, collapsible bowls, etc. Probably watch some of the million vanlife YouTube videos. haha I still have to get the inside framing done. I'm thinking once I'm living in it, I'll figure out where I want things. Going to put together this week's radio show and then work on my side project. Ran into another blocker with putting an image on a canvas. Have no clue why it's not showing up. If I don't figure it out tonight, I may leave it for later. Ooooh it's about to RAIN! haha

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube uqp33KRndl8 %}
Dockerize Middleman
Tags: docker, middleman, webpack, githubpages
Published: 2020-08-07 21:20:56

Welcome to part 2 of the “Add Webpack, dockerize and deploy your Middleman app to Github Pages” series!

In the [last post](https://dev.to/pmallol/add-webpack-to-a-middleman-app-3npb) we built an empty Middleman application locally and added Webpack as the external pipeline. Now it’s time to set up the same app but inside a Docker container to get everything ready for deployment.

Head over to the previous post to learn how to set up Webpack to your Middleman app or skip this all together and learn how to deploy your Middleman app to GitHub Pages using GitHub Actions, in part 3.

## Setting up Docker

If you haven’t already, [download Docker](https://www.docker.com/get-started).

Create a new file named `Dockerfile` in your repository root directory where your [Middleman app already exists](https://middlemanapp.com/basics/install/). We’re going to be using a **Ruby 2.6.3** image and install Node.js in it. 

Open the `Dockerfile` file and paste the following configuration for our Docker image:

{% gist https://gist.github.com/pmallol/0bdbf1abb1d9a0eced7d488f3f9cd7d3 %}

Now create another file in the same root directory with the name `docker-compose.yml`, open it and paste these lines:

{% gist https://gist.github.com/pmallol/ac0b8648df4765a48ccbadea89fcca36 %}

We’ll be using port `1234` for LiveReload later.

To get the app up and running using Docker:

1. Run `$ docker-compose build` to build the Docker image first.
2. Run `$ docker-compose up` to start the container and get the environment ready.

If the last command fails, make sure you don’t have the application running locally in a previous terminal session.

Your app should still be available at [http://localhost:4567/](http://localhost:4567/), but now running inside a Docker container!

You can stop the running container pressing `CTRL + C` inside the terminal.

## Adding LiveReload

Let’s improve the app by making sure we don’t have to refresh the browser every time we want to see new changes. In order to achieve that we’re going to add [LiveReload](https://middlemanapp.com/basics/development-cycle/#livereload). LiveReload will automatically refresh the browser whenever files in the repository are modified.

With the Docker container stopped, add  this line to the Gemfile: 

```
gem 'middleman-livereload', '~> 3.4.3'
```

Run `$ bundle install` to install the LiveReload gem.

Open your `config.rb` file and add the following lines of code under the “`# Activate and configure extensions`” section, to activate LiveReload in our application:

{% gist https://gist.github.com/pmallol/9165cfa2aecccfa25f842d958156a74d %}

Because we modified the `Gemfile`, we need to build the docker image again:

1. Run `$ docker-compose build` 
2. Start the web container again running: `$ docker-compose up`

Try modifying any css property to quickly see LiveReload in action. The browser should refresh the preview automatically.

Great! 

Now the application is all set and ready to be deployed.
Introducing NestJS Prisma Schematics
Tags: nestjs, prisma, schematics
Published: 2020-08-07 11:00:30

---
title: Introducing NestJS Prisma Schematics
published: true
date: Fri, 07 Aug 2020 10:59:37 GMT
tags: nestjs, prisma, schematics
canonical_url: https://notiz.dev/blog/nestjs-prisma-schematics
---

Until now, adding [Prisma to a NestJS application](https://notiz.dev/blog/how-to-connect-nestjs-with-prisma) requires a few manual steps - installing [@prisma/cli](https://www.prisma.io/docs/reference/tools-and-interfaces/prisma-cli/command-reference) and [@prisma/client](https://github.com/prisma/prisma-client-js), creating a `PrismaService` and (eventually) adding a `Dockerfile`.

I am excited to release [`nestjs-prisma`](https://github.com/marcjulian/nestjs-prisma) - a set of schematics to perform all steps necessary to add Prisma to your NestJS application **automatically**.

All you need to do is run the following command in your Nest app:

```bash
nest add nestjs-prisma
```

![Schematics in action](https://notiz.dev/assets/img/blog/nestjs-prisma-schematics/schematics-in-action.gif)

Do you need more options? I got you covered, you can go a step further and specify a Prisma version if you like:

```bash
nest add nestjs-prisma --prismaVersion 2.4.1
```

Or go crazy by adding a `Dockerfile` for your Nest app and a `docker-compose.yaml` with a **PostgreSQL** database.

```bash
nest add nestjs-prisma --addDocker
```

[Check out all options](https://github.com/marcjulian/nestjs-prisma#additional-options) and give it a try with your Nest app.
Containers for GitHub Codespaces
Tags: github, docker
Published: 2020-08-07 21:15:33

Tried out using custom containers as a basis for GitHub Codespaces using the Java example from Microsoft - [list](https://github.com/microsoft/vscode-dev-containers/tree/master/containers).

Create and populate a `.devcontainers` folder at my Repo root with (modified) example `DOCKERFILE`, `devcontainer.json` and supporting script files and away we go.

Custom Codespace being created
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y5wdpfn5xcxjsyxw3q0l.png)

Using the Java Codespace (includes Maven & Gradle by default)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nhd2hutpcf6dae546o62.png)

The supporting `.devcontainers.json` file
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ogf15hg2d0qebr19ecru.png)

Easy-peasy.  Also learned that if I don't own the repo on which I am creating a custom Codespace, then when initially creating a Codespace Github will automatically create a repo fork.