teleren/devto huggingface dataset:
O que é o Terminal?
Tags: terminal, console, prompt, cli
Published: 2021-02-13 20:41:06

Para entender o que é um **Terminal (a famosa Tela Preta)**, precisamos voltar um pouco no tempo; quando os Sistemas Operacionais dos computadores não dispunham de uma **interface gráfica**, apenas de **interface de texto**. 

Antigamente, a entrada de dados de um computador era feita através de um Terminal (ver imagens abaixo) que era composto apenas de **um monitor e um teclado**, que eram ligados a outra **máquina mais robusta**, onde os dados seriam **processados**.

![exemplos de terminais](https://dev-to-uploads.s3.amazonaws.com/i/nj7id8tcnqva4bjzkjej.png)

Era através dessa máquina conhecida como Terminal que se tinha acesso ao sistema dos computadores e suas funcionalidades (como fazemos hoje com o mouse). 

Então, caso a pessoa quisesse navegar nos diretórios (pastas) atrás de um arquivo, ao invés de usar o mouse e ir clicando nas pastas, isso era feito com comandos em texto, digitados, que fariam exatamente o mesmo.

Quando usamos o que chamamos de Terminal nos dias de hoje, na verdade estamos executando um **programa** que simula essa máquina mais simples de antigamente. 

Existem vários programas que emulam um Terminal. Geralmente, os Sistemas Operacionais já vêm com algum, mas nada impede que a usuária possa instalar e usar outro de sua preferência.

![exemplo de um programa que simula um terminal](https://dev-to-uploads.s3.amazonaws.com/i/q5acyg81qhpbhiqd5mbl.png)

É possível fazer, no Sistema Operacional, através do Terminal, tudo o que seria feito pela Interface Gráfica (e até um pouco mais). Inclusive algumas tarefas do dia a dia vão se tornando mais práticas e rápidas de se executar pelo Terminal do que pela Interface Gráfica, se a usuária já tiver um certo domínio dos comandos.

Se faz importante conhecer, pelo menos, o básico dos comandos de Terminal para o caso da desenvolvedora precisar algum dia lidar com servidores (que dificilmente possuem uma Interface Gráfica).

O Terminal também é conhecido pelos nomes **Console**, **Prompt de Comando** ou **CLI**, _do inglês  command-line interface_ (interface de linha de comando).
The equation to print a heart that will allow you to impress the world
Tags: tutorial, programming, codequality, todayilearned
Published: 2021-02-13 20:32:52

`Hello World!` **Happy Valentine's day programmers!** 
I want to reveal to you a little trick that will be very useful for Valentine's day, an equation that allows you to print a heart on the screen.

```
(x^2+y^2-1)^3-x^2*y^3=0
``` 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q51le0bx4r2263l882ve.PNG)

---

In reality, we have a lot of different equation that allows us to print a heart on screen:
``` 
(x^2 + y^2 -1)^3 = x^2*y^2
x^2+(3*y/2-(x^2)^(1/3))^2 = 1
x^6 + x^4 (3 y^2 - 3) + x^2 (3 y^4 - y^3 - 6 y^2 + 3) + y^6 - 3 y^4 + 3 y^2 = 1

// This one have the best rendering
x=16*sin(t)^3, y=13*cos(t)-5*cos(2*t)-2*cos(3*t)-cos(4*t)
``` 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/353gvs8rfxm77xqlgnrq.PNG)

---

Happy Coding and Happy Valentine's day!

![image](https://dev-to-uploads.s3.amazonaws.com/i/mgijofuywmtma857xq7t.png) 

Remember the ❤

[Check this article about how to write CSS like a pro!](https://dev.to/devlorenzo/how-to-write-css-like-a-pro-4glj)
JavaScript Object Privacy
Tags: javascript, webdev, tutorial, codenewbie
Published: 2021-02-13 20:30:53

[![host.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613285550606/kVnFkQSP1.png)](https://partners.hostgator.com/MaZ1N)

---
An object or properties sometimes shouldn't be altered, accessed, or updated. In such a situation, they should be private.

We can indicate an object or property name is private by prepending an underscore (`_`) to it.

See the example below:

```js
const bankAccount = {
    _accountNumber: 16234950
}
``` 

The issue of using `_` is that an object or property can still be mutable (changed).

```js
bankAccount.accountNumber = 16224971;
bankAccount.accountNumber; // 16224971
```

See another example below:

```js
const person = {
  name: 'Bello',

  set _setPerson(name) {
    if (typeof this.name === 'string') {
      this.name = name;
    } else { 
      "Give a valid name";
    }
  } 
};

person._setPerson = 'John';
console.log(person.name) // John
```

The `_` only waves a flag to other developers to not alter it.

JavaScript now has a solution, introduced in **ES12** (**ECMAScript 2021**).  

Instead of the underscore (`_`), the hash symbol can be used (`#`). `#` is used most of the time in classes.

```js
class Person {
  get name() {
    return "Bello"
  }
  set name(value) {}

  get #age() {
    return 27
  }
  set #age(value) {}
}

const obj = new Person();
console.log(obj.name, obj.age); // Bello undefined 
```

For the above example to work, you might need to update your browser.

More on classes later.

---

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613216267892/cgCrviTiF.png)](https://www.buymeacoffee.com/techstackmedia)

---

<a href="https://skillshare.eqcm.net/c/2680282/300216/4650" target="_top" id="300216"><img src="//a.impactradius-go.com/display-ad/4650-300216" border="0" alt="Learn on Skillshare" width="300" height="250"/></a><img height="0" width="0" src="https://skillshare.eqcm.net/i/2680282/300216/4650" style="position:absolute;visibility:hidden;" border="0" />
Understanding Peer Dependencies 
Tags: react
Published: 2021-02-13 20:30:45

I'm fairly new to react, as in I just started building UI's with it about a month ago. 

I ran into an error recently that I have a slight idea what it means, but I'm not sure how to resolve it. 

```
npm install react-plaid-link       
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: frontend@0.1.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from react-plaid-link@3.1.0
npm ERR! node_modules/react-plaid-link
npm ERR!   react-plaid-link@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
```

If I understand this correctly, `react-plaid-link` uses react 16.8 as a dependency, but I have react 17 installed and so it won't work? 

Is that a correct understanding of this error? How do I resolve this? Can I downgrade? Should I? 

Any help would be greatly appreciated.
Functions in Python for Beginners
Tags: python
Published: 2021-02-13 20:22:37

**Intro**
Similar to other coding languages, functions in python are a blocks of code that will run only after being called. Today we will look at how to create a function and how to use arguments in functions.

**Syntax**
To call a function you use the `def` keyword followed by the function name, a parenthesis, and a colon:

```
def myFunction():
    print("Hello")
``` 
When creating a function in python you must have your block of code after the function name indented:

```
# correct
def myFunction():
    print("Hello")

# incorrect
def myFunction():
print("Hello")
```

**Calling a function**
To call your function you use the function name, followed by a parenthesis:

```
def myFunction():
    print("Hello")
    
myFunction() # prints Hello
```

**Arguments**
Arguments are used to pass information into the function. Arguments are written inside the parentheses of your function. You can name the arguments what you like (similar to a variable) and you can have as many arguments as you like:

```
def myFunction(name):
    print(f"Hello {name}")
    
```

When we call the function we pass along the information we want used as our argument:

```
def myFunction(name):
    print(f"Hello {name}")
    
myFunction("Bobby") # prints Hello Bobby
myFunction("Cade") # prints Hello Cade
myFunction("Scott") # prints Hello Scott
```

**Keyword Arguments**
You can also send your arguments in a key = value syntax in python:

```
def myFunction(name):
    print(f"Hello {name}")
    
myFunction(name="Bobby") # prints Hello Bobby
myFunction(name="Cade") # prints Hello Cade
myFunction(name="Scott") # prints Hello Scott
```

**Default Parameter Value**

If you want to have a default parameter value for when a function is called without an argument the following syntax is used:

```
def myFunction(name="Dan"):
    print(f"Hello {name}")
    
myFunction("Bobby") # prints Hello Bobby
myFunction() # prints Hello Dan
```

**Pass Statement**
If you have a function written with no code you can use the pass statement to avoid getting an error:

```
def myFunction():
    pass
```
Social assistant - my first full stack project
Tags: react, javascript, showdev, node
Published: 2021-02-13 20:15:48

# The idea
Most of the apps, made to show the number of unfollowers on Twitter, I tried were performing too slow because of server-side rendering, or the UI was not optimized for mobile.

That's why I decided to build a new app to perform this task.

Live demo: [https://sa.ekrzeptowski.pl](sa.ekrzeptowski.pl)

# Tech stack
Social assistant is built using MERN stack:
* **M**ongoDB
* **E**xpressJS
* **R**eact
* **N**ode.js

## Frontend
The frontend side of the Social assistant is licensed under the MIT license and was written using Gatsby.js.

{% github ekrzeptowski/social-assist-ui %}

### Libraries used:

* [Gatsby.js](https://www.gatsbyjs.com/) - it has helped to improve SEO and loading experience of the landing page.
* [Material-UI](https://material-ui.com/) - Material Design React UI framework
* [Redux](https://redux.js.org/) with [Redux Toolkit](https://redux-toolkit.js.org/) - used for state management 
* [gatsby-plugin-mdx](https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/) - used to render the privacy policy Markdown page

## Backend

The backend side of the Social assistant is running under Node.js.

### Libraries used:

* [Express](https://expressjs.com/) - a Node.js framework
* [MongoDB](https://www.mongodb.com/) - database
* [ws](https://github.com/websockets/ws) - WebSocket server used to broadcast actual data sync status
* [passport.js](http://www.passportjs.org/) - used for Twitter authentication
* [twitter-lite](https://github.com/draftbit/twitter-lite) - lightweight library for Twitter API
* [Agenda](https://github.com/agenda/agenda) - (A lightweight job scheduling library for Node.js) used for scheduling user data updates
How I made an app and pushed it live in 4 days
Tags: webdev, nextjs, discuss, startup
Published: 2021-02-13 20:10:28

Hi guys 👨‍💻 and girls 👩‍💻. In January I've made [Postzy](https://postzy.cc). You can use Postzy to schedule ⏰ and manage your LinkedIn posts. 

One of my goals for 2021 is to build some micro-products that will generate some income. I want to learn to develop an MVP as fast as possible, validate the idea, and improve it. (if it's the case 😃).

Now, let's see how I managed to push an MVP for [Postzy](https://postzy.cc) in ~4 days.

# Tech Stack
My go-to stack right now for developing micro-products and fast prototyping is: 
* Next.JS for Front-End
* Next.JS API routes for serverless back-end
* MongoDB for database
* Vercel or Netlify for hosting
* Stripe for payment 
* [Next Auth](https://next-auth.js.org) for implementing authentication in Next.JS
* [Plausible](https://plausible.io) for analytics

In addition to this, depending on the project, I'm using all kinds of libraries or services to speed up my development process.

# Planning
Before I jump and build something, I do my research. I use Notion to organize my ideas and my research. I start by defining what I want to build, why, and how I'm going to build that. Also, while I do my research I bookmark in Notion articles, tutorials, libraries, GitHub tickets, ... Basically everything that I think will help me while building the app.

# Day 1
The first day was dedicated to **research**. I've written down what I want to build and started to see how can I build that.

# Day 2
Started to set up the project, made some sketches for the app in Figma, and implemented Next Auth.

# Day 3
On the 3rd day, I've implemented the core functionality of the app, using the LinkedIn API. At the end of the day, I've been able to post to LinkedIn using the app.

# Day 4
On the last day, I've implemented payment processing using Stripe. I've gone with the easiest approach, letting Stripe to handle the checkout process.

**Let's talk in the comments about MVP and fast prototyping.**

If you have any questions or want to reach me, check out [my website](https://statescu.net)
Github Simple Trick - Online VS CODE
Tags: github, vscode, editor, shell
Published: 2021-02-13 20:06:04

## Hey There Everyone,

So here is a simple trick to use VS CODE online without actually cloning the repository to your machine.

Let's Say You are Going through a code repository on Github, and well we all know how tough it is to navigate to all the files using the native Github interface.

Well, How about an Online Visual Studio Code?

So if you are browsing a Code Repository 
### Url - https://github.com/nitishpatel/syoogle
![image](https://dev-to-uploads.s3.amazonaws.com/i/4qhwi818phgvi8zzbzu2.png)

And now here comes the magic all you have to do is to replace Github.com with github1s.com and keep the entire URL the same.
### Url - https://github1s.com/nitishpatel/syoogle

And That's it You have the entire Code Repository Made Available through you on a Code Editor.
![image](https://dev-to-uploads.s3.amazonaws.com/i/a7dyllyql5xxlu7gafmn.png)

This Blogpost was Inspired by Hitesh Choudary's Recent Video.
Check That Out!

 {% youtube Zy0Ng0naN40 %}
Priority loading in Reactjs
Tags: react, javascript, tutorial
Published: 2021-02-13 20:01:13

When we start to create applications, We don't realize the importance of priority loading. But as we start to push out production applications, then the importance of priority loading is understood.

## So what is priority loading?

In simple words...
When we want some components of our application to load before other components to reduce the initial loading time.
So when we create a react application. we often use a lot of external libraries for multiple applications. And oftentimes we overlook the size those libraries added to our application.

** But how do we find the size of those libraries? **
For this purpose, we have a very simple tool which is known as [Bundlephobia](https://bundlephobia.com)
Bundlephobia is an amazing tool that helps us to determine the complete size of our package, Not only that it has a filter to show us which package is taking the most time to load. What makes it even more amazing is that we just need to upload our `package.json` file to get the results.

For example...
In my portfolio website [pranjaljain.tech](http://pranjaljain.tech)

![All packages](https://dev-to-uploads.s3.amazonaws.com/i/amdamcjub672i4e1nu1j.png)
Here you can see I have 16 packages in my Application.
And the package which takes the most time is react-particle-js.

![Most time-consuming package](https://dev-to-uploads.s3.amazonaws.com/i/svr2827wfgjc8q0h7zoq.png)

![Total time](https://dev-to-uploads.s3.amazonaws.com/i/xf5s1svhfs1zgg34rp86.png)

upon scrolling down you can see the total of how much time your complete package will if it tries to load your application on emerging 3G.

## Now the main question is how to prioritize packages?

Well that can be easily achieved by [Loadable components](https://loadable-components.com)
Read more on their GitHub.
{% github gregberge/loadable-components no-readme %}

So by using [Loadable components](https://loadable-components.com) we can select the packages which we want to load after the content is loaded.

### Let's get started

First thing first...
Import Loadable Component to your React JS where you want to prioritize loading.
```js
import loadable from "@loadable/component";
```

And then add your component which you want to load after the content.

```js
const ComponentName = loadable(() => import("./ComponentJsFileLocation"));
```

And then use that component normally like any other React Component.

And it would make the component load after the content.

If you're stuck anywhere do leave a comment.
Follow me on Twitter at [Twitter/pranjaljain0](https://twitter.com/pranjaljain0)
Follow me on Github at [github/pranjaljain0](https://github.com/pranjaljain0)
Happy Hacking!
Cloneoa: the Klonoa custom level engine (indev)
Tags: gamedev, showdev, gamemaker
Published: 2021-02-13 19:48:58

Here's something I started but immediately abandoned two years ago, but picked up again recently, solely for the fact of this game being very underrated for its potential that has yet to be unlocked, especially for its Mario Maker level potential

{% youtube lI6kZDzgZXw %}

There's also already a level editor though called klo-gba.js by macabeus, but overall, Klonoa hacking and all that is still young and unfounded for whatever reason

What's currently available is level loading, platforming, some items, a music and level theme, and two enemies

The rest of what the original Empire of Dreams had will be added underway

I've also documented most of how level data will work, along with working on a graphical interface program to edit levels easier

Soon, I will also be opening a forum dedicated to this project to allow sharing creations and show development of the engine

Follow the development here
https://github.com/donnaken15/Cloneoa
or here
https://donnaken15.itch.io/klo

Community Discord:
https://discord.gg/fCzKFuEg3K
Rudo. Building Terminal UI with Rust
Tags: rust, webdev, dx
Published: 2021-02-13 19:30:31

Hey there, in today's post I would like to introduce you to my new pet project - [**Rudo**](https://github.com/GlebIrovich/rudo). Rudo stands for "Rust To-do" and is a small terminal application that manages a list of to-dos.

### Foreword

Back in 2020, locked down in isolation with my laptop and a thirst for a challenge, I decided to try out Rust. There are many reasons why I decided to give it a try, but the main one is, probably, the desire to push me out of the comfort zone.

Unlike programming languages which I know, Rust shifts a lot of control over low-level API to the programmer. All those tiny goodies that were perceived as given are now your own responsibility. It's painful... and it's exciting.

Firstly, I struggled. I fought with the compile for every line of code. I read awesome Rust's documentation again and again. I left it and started anew. And one day I realized that I love it. I loved how explicit the language was.

And that's how I programmed Rudo.

### Motivation

Every new programming language starts with "Hello world".
Every front-end framework starts with a to-do app.

Why should I break these rules? 😄
As a front-end developer, I like visually observing my code in action. Wouldn't it be great to create a terminal UI then? I challenged myself to build an application using a terminal as a platform. How would UX for such an application be like? How would you navigate between application states? What would be the indicators and controls?
That's how **Rudo** was born.

### Meet Rudo

![Rudo GIF](https://dev-to-uploads.s3.amazonaws.com/i/k9yijva9dtulyxn6mrev.gif)

Rudo is a simple to-do list manager. It's built with [rs-tui](https://github.com/fdehau/tui-rs) and offers a clean and minimalistic layout to get things done. Keyboard-only input attempts to keep Rudo in line with your usual development workflow.
It's capable of doing a few things:
1. Creating and editing tasks 💃
2. Removing tasks from the list ❌
3. Toggling task state ✅
4. Filtering tasks 🏄‍♂️
5. Sorting tasks by date  🦾
6. Persisting tasks in a `.json` file 📀

### Conclusion
Rudo is essentially an experiment. It's a prototype with some harsh edges, but made with ❤️ and fun 😎. Nonetheless, I am committed to continue improving Rudo and I am desperate to hear your feedback.
It's straightforward to use - download binaries, and you are good to go!
You can find everything in the [README](https://github.com/GlebIrovich/rudo).

Please do not hesitate to express your opinion. You can reach me here on [DEV.to](https://dev.to/glebirovich) or on [Twitter](https://twitter.com/gleb_irovich).
Phoenix 1.6 Page Title
Tags: elixir, phoenix
Published: 2021-02-13 19:15:46

I made a custom `awesome_title_tag` view helper function because I wanted to support both controller views and live views.

## View

In `lib/mnishiguchi_web/views/layout_view.ex`

```elixir
defmodule MnishiguchiWeb.LayoutView do
  use MnishiguchiWeb, :view

  @site_name "Mnishiguchi"
  def site_name(), do: @site_name

  def awesome_title_tag(conn, assigns) do
    live_title_tag(page_title(conn, assigns) || @site_name, suffix: " · #{@site_name}")
  end

  # live view
  defp page_title(_conn, %{page_title: page_title} = _assigns) do
    page_title
  end

  # controller view
  defp page_title(conn, assigns) do
    if function_exported?(view_module(conn), :page_title, 2) do
      view_module(conn).page_title(view_template(conn), assigns)
    else
      @site_name
    end
  end
end
```

## Template

In `/lib/mnishiguchi_web/templates/layout/root.html.leex`

```diff
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <%= csrf_meta_tag() %>
-  <%= live_title_tag assigns[:page_title] || "Home", suffix: " · Masatoshi Nishiguchi" %>
+  <%= awesome_title_tag(@conn, assigns) %>
```

## Resources

Because of breaking changes between Phoenix 1.4 and 1.5, many examples out there did not work with Phoenix 1.5.

Here are some resources I referenced:

  - [Page title via live view route that’s compatible with existing code in regular views?](https://elixirforum.com/t/page-title-via-live-view-route-that-s-compatible-with-existing-code-in-regular-views/21559/6?u=mnishiguchi)
  - [@view_template meaning changed in phoenix 1.5](https://elixirforum.com/t/view-template-meaning-changed-in-phoenix-1-5/31087/5?u=mnishiguchi)
  - [Phoenix Live View 0.10.0 Backwards incompatible changes](https://github.com/phoenixframework/phoenix_live_view/blob/master/CHANGELOG.md#backwards-incompatible-changes-6)

That's it.
What is the working process of Redux?
Tags: react, redux
Published: 2021-02-13 16:50:56

First, let’s look at the next core concept:
1. Store: The place where data is stored. You can think of it as a container, and the entire application can only have one Store.
2. State: The Store object contains all the data. If you want to get the data at a certain point in time, you have to create a snapshot of the Store. The collection of data at this point in time is called State.
3. Action: Changes in State will cause changes in View. However, the user cannot touch the State, only the View. Therefore, the change of State must be caused by View. Action is a notification sent by View, indicating that the State should change.
4. Action Creator: There will be as many actions as there are as many types of messages as the View sends. It would be very troublesome to write it all by hand, so we define a function to create an Action, this function is called Action Creator.
5. Reducer: After the Store receives the Action, it must give a new State, so that the View will change. The calculation process of this State is called Reducer. Reducer is a function, it accepts Action and current State as parameters, and returns a new State.
6. Dispatch: It is the only way for View to send Action.

Then we go through the entire work process:

1. First, the user sends an Action (via View), and the dispatch method is used in the dispatch method.
2. Then, the Store automatically invokes the Reducer and passes two parameters: the current state and the received Action, the Reducer will return the new State.
3. Whenever the State changes, the Store will call the listener function to update the View.

At this point, the user interaction process ends. It can be seen that data flows in one direction throughout the entire process, which ensures the clarity of the process.