teleren/devto huggingface dataset:
100 días de código: { Day: 3}, viento en popa con la actualización de mi portfolio #100DaysOfCode
Tags: spanish, webdev, figma, 100daysofcode
Published: 2021-11-05 01:10:48

Bienvenidos! 🎉
Deseo que estés teniendo un día increíble y si no es asi que ahora mejore. 

Hoy me decante mas por continuar el diseño de mi portfolio que por la codificación y no me arrepiento ya que creo es algo importante con lo que conviven los desarrolladores web front-end. 

Comencé a estudiar algunos principios de diseño para mejorar mis habilidades como los principios de Gestalt de los cuales puedes aprender un poco [Leyes de Gestalt](https://www.uifrommars.com/principios-gestalt-diseno-web/) y despues de ello estuve navegando por la web para inspirarme un poco.

Aunque por el reto obviamente no podía dejar la codificación de lado y ya que aun desconozco bastante el desarrollo backend asi que aprendiendo lo básico sobre Nodejs y Express. 

Es muy interesante todo el ecosistema de desarrollo y cada que encuentro algo nuevo me emociono bastante.
![Idea](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5atbdfp6w4havko8t6cx.jpg)
Ahora si sigamos con la sección regular =>

### Ayer:
- Diseñe los wireframes de las secciones principales de mi pagina web.
- Comencé a practicar testing con Jest.
- Aprendí test asíncrono y síncrono con Jest.
- Aprendí a agrupar test con la función de Jest `describe`
- Aprendí que los métodos de Jest `beforeEach()` y `afterEach()` se ejecutan antes y despues de cada test respectivamente y que los métodos como `beforeAll()` y `afterAll()` te permiten ejecutar código antes y despues de todos los testeos, respectivamente.

### Hoy:
- Diseñe algunos componentes de la interfaz móvil de mi portfolio.
- Aprendí que en diseño normalmente se crean paletas de color y de esas paletas se obtienen distintos tintes y sombras de cada color de la paleta. 
- Aprendí las leyes de Gestalt las cuales son: Ley de figura y fondo, de semejanza, de proximidad, de la continuidad, de simetría o dirección común, de la simplicidad y ley de la continuidad.
- Aprendí a crear un servidor y a ejecutarlo en desarrollo.
- Aprendí las peticiones `http` como son `post`, `get`, `put` y `delete` con express en un servidor de nodejs.

Y esto es todo por hoy, la verdad ha sido un día algo interesante.
Recuerden que esto **no es una guía**.

Que tengan una buena noche, éxito en todas sus cositas y hasta mañana. 🎉
Newest Gatsby, React and Node Releases - Frontend News #21
Published: 2021-11-05 12:49:06

{% youtube nInEDzWdJSM %}
What happened in the world of frontend in the last weeks? Watch the newest episode to be up to date! 👇

What’s in Frontend News #21?
🟣 Gatsby 4
🟣 React Native Testing Library v8
🟣 New React Bootstrap
🟣 Chrome 95 released
🟣 Node v17

Enjoy, you can read the article at [Frontend House](https://frontendhouse.com/frontend-news/newest-gatsby-react-and-node-releases-frontend-news-21)
💻Instalando .NET em todas plataforma em forma de scripts
Tags: dotnet, braziliandevs, programming, productivity
Published: 2021-11-08 23:50:50

AS: Esse conteúdo partiu da [Twitch](https://www.twitch.tv/edineidev) e será disponibilizado em breve no [YouTube](https://www.youtube.com/channel/UCkSe6llMT88LqEGrMROSUbA) e em forma de Podcast.

Sempre gostei de automação seja usando [Chocolatey](https://chocolatey.org/), Python, Bash, Powersheel etc... tenho até um [dotfiles (GNU/Linux Ubuntu e Windows 10)](https://github.com/neiesc/dotfiles), depois que fiquei sabendo que o dotnet tem uma documentação sobre instalar dotnet com scripts resolvi compartilhar, pois, pode passar despercebido para muitos.

![Download .NET](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvno8936skoa4rx6omol.png)

O site [.NET Install scripts](
https://dotnet.microsoft.com/download/dotnet/scripts) como no próprio site fala scripts para instalar .NET Core no Linux, macOS e Windows. Na [documentação](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-install-script?WT.mc_id=dotnet-35129-website) tem o modo de uso sendo bem simples:

![.NET Install scripts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4m2m4xu0jwerql0t1jp.png)
 
Exemplos para instalar versão LTS:

No Windows:
```powershell
&powershell -NoProfile -ExecutionPolicy unrestricted -Command "[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12; &([scriptblock]::Create((Invoke-WebRequest -UseBasicParsing 'https://dot.net/v1/dotnet-install.ps1'))) -Channel LTS"
```

Linux/macOS:
```bash
curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --channel LTS
```

PS: Caso você tenha o dotnet já instalado é recomendado você remover todos e instalar em forma de script como esse post mostra.
How to add Google Adsense code in angular 9 application?
Tags: javascript, angular
Published: 2021-11-05 14:30:10

I have added Google Adsense to my angular site. It shows ads on some pages and doesn't on some pages. I will show the example of pages which doesn't shows ads, suppose we go to this page "https://www.indiantrain.in/train-time-table", in the search box we have filled the train number and hit get schedule button. It will redirect to other page. Almost all the features of my site is in this manner only. I think angular block the Adsense script and that's why it doesn't load all the time. As we already know, outside script need to sanitize in order to run in angular. So, I just want to know the proper way to add Google Adsense to my site.
How to install Plausible Analytics on your own server
Tags: analytics
Published: 2021-11-05 21:32:48

{% youtube 0U8FPHkYmV8 %}

[Plausible Analytics](https://plausible.io) is a great alternative to Google Analyics. Hosting plausible on your own [Cleavr](https://cleavr.io) managed server gives you
even more control over the usage data that you collect.

We, at Cleavr, have been using Plausible Analytics at Cleavr for the last year. Our main reasons were because:

- Google Analytics was overbearing and provides more than we really needed
- We made the decision to not contribute to Google's quest to own all web data
- Plausible is simple and provides the core usage analytics that we need

The best part, Plausible can be installed on your server in just a few minutes!

We encourage you to consider sponsoring Plausible in some way so that they can keep up the good work. <a href="https://github.com/sponsors/plausible" target="_blank">Visit their GitHub sponsorship page.</a>


## Prerequisite

Have a server provisioned and ready-to-go in Cleavr.

##  Step 1: Install Docker Service

In the **Services** section on the server you are installing Plausible on, install the **Docker** service.

Plausible wraps up their program in a docker container and so we just need to first make sure Docker is installed on the server.

##  Step 2: Add Generic Port App

Add a new **Generic Port App** on the server. Add in the URL you want assign to Plausible Analytics.

For the port number, add in `8000`. If you have another app using the port, you can customize the port number.

##  Step 3: Run Plausibe Quick Script

In the **Quick Script** section of Cleavr, add a new quick script with the following script:

```
cd /home/cleavr
mkdir plausible
cd plausible
git clone https://github.com/plausible/hosting
cd hosting
key="$(openssl rand -base64 64 | tr -d '\n' ; echo)"
echo "
ADMIN_USER_EMAIL={{ADMIN_USER_EMAIL}}
ADMIN_USER_NAME={{ADMIN_USER_NAME}}
ADMIN_USER_PWD={{ADMIN_USER_PWD}}
BASE_URL={{BASE_URL}}
SECRET_KEY_BASE=$key
" > plausible-conf.env

docker-compose up -d
```

Save the quick script and then run it as `cleavr` user. Add in the required variables for user name, email, password, and url.

After the script finishes running, you will likely get a false error. Verify the URL you used to make sure that Plausible was successfully installed.

##  Step 3: Verify Installation And Set Up Plausible

Once the script run is complete, navigate to the url you configured Plausible with and verify the login page shows.

From here, log in and set up Plausible for your sites!
Respecting someone's gender in a Person object.
Tags: lgbtq, typescript, watercooler, programming
Published: 2021-11-06 07:43:21

Here's how I'd respect someone's gender in TypeScript
```ts
/*
 * A 3-bit number that represents the person's gender.
 * (bits in the order of: MFT.)
 * (MFT stands for "Male Female Trans".)
 * (Special blends:
 *  0x111 = Gender Fluid
 *  0x110 = Bigender
 *  0x001 = Nonbinary
 *  0x000 = Agender
 * )
 * (
 *  Expansion upon this format is welcome. If you want
 *  to add more attributes, for more non-binary genders,
 *  feel free, and tell me your format below!
 * )
*/
type Gender = number;
function sterilizeGenderId(g:Gender):Gender {
    return g & 0b111; // 0b111 = 7.
}

class Person {
    constructor(
        name:String|string, age:number, gender:Gender
    ) {
        this.gender = sterilizeGenderId(gender);
        this.name = name;
        this.age = age;
    }
    gender:Gender;
    name:String|string;
    age:number;
}
```
OBJECT ORIENTED PROGRAMMING IN 5 MIN
Tags: programming, tutorial, beginners, oop
Published: 2021-11-06 08:10:25


# Object Oriented programming 

## What is Object Oriented Programming? (oop)

- oop is programming paradigm (style of the code) based on teh concept of objects;
- We use Objects to model (describe) real world or abstract features;
- Objects may contain data (properties) and code (method), By using Objects, we pack data and teh corresponding behavior into one block;
- In OOP, objects are self-contained pieces/blocks of code;
- object are building blocks of applications, and interact with one another;
- interactions happen through a public interface(API): method that the code outside of the object can access and use to communicate with the object;

### why just oop exist

well this paradigm was developed with the goal of organizing code, so to make it more flexible and easier to maintain.

## CLASS AND INSTANCES (TRADITIONAL OOP)

in traditional oop we use something called **CLASSES**.
<br>

_you can think of a class as a blueprint, which can then be used to create new objects based on the rules described in the class._

<br>
so it's just like an architecture where the architect develops a blueprint to exactly plan and describe a house.

## THE 4 FUNDAMENTAL OOP PRINCIPLES

1. Abstraction
2. Encapsulation
3. Inheritance
4. Polymorphism

### PRINCIPLE1: ABSTRACTION

Abstraction: Ignoring or hiding details that don't matter, allowing us to get an overview perspective of the thing we're implementing instead of messing with details that don't really matter to our implementation.

#### example

let's say that we're implementing a phone for a user to use. so with our abstraction like the phone's temperature and voltage, turning on the vibration motor or the speaker, and other low level details, but as a user interacting with a phone, do we really need all of this detail? well no.

<br>
in reality, when we interact with a real phone, all of these details have been abstracted away from us as the user.

### PRINCIPLE 2: ENCAPSULATION

Encapsulation: Keeping properties and methods **private** inside the class, so they are **not accessible from outside the class**. some methods can be **exposed** as a public interface(API)

### PRINCIPLE 3: INHERITANCE

Inheritance: Making all properties and methods of a certain class **available to a child class**, forming a hierarchical relationship between classes. this allows us to **reuse common logic** and to model real-world relationship

### PRINCIPLE 4: POLYMORPHISM

Polymorphism: A Child class can overwrite a method it inherited form a parent class [it's more complex that, but enough for our purposes].
Git and Github guide for begineers
Tags: github, git, beginners, tutorial
Published: 2021-11-06 18:25:35

    If you have no knowledge about git and github and for some reason you need to use them, I can help you with these steps:
    1 - First, in your bash, if it's the first time you're using it, you must register an user and email with: 
        $ git config --global user.name YOUR_NAME
        $ git config --global user.email your_name@example.com
    2 - Now, manipulating the paths of  your machine, you can set a folder to be a place to save your files;
    3 - For being a regular folder, you must have to initialize it with this command:
        $ git init 
        That way, the bash will recognize it as an initialized folder;
    4 - After you have made all you needs, like creating and modifying files, you can follow these commands to send your modified files
        to a repository:
        - first, you might use $ git status to verify the status files;
        - second, with $ git add . or $ git add file_name you can add your files modification;
        - next, if you want, you can verify the status with $ git status;
        - with $ git commit -m "message", they'll be commited and ready to be pushed to a repository.
    5 - With a synchronized github account, you can use $ git push <remote_name> <branch_name> to send them.
Open a web page from Terminal with Brave Browser
Tags: tooling
Published: 2021-11-06 18:36:01

Sometimes I want to open a web page(mostly a GitHub repo) really quickly while I'm writing code.

For doing that, I'm using `alias`.

```zsh
alias brave="open -a 'Brave Browser'"
alias portfolio='brave https://github.com/koji/portfolio_nextjs'
```  
Brave Browser
https://brave.com/



When I want to open my portfolio repo.
```zsh
brave https://github.com/koji/portfolio_nextjs
```


If you want to use other browsers

```zsh
alias chrome="open -a 'Google Chrome'" # chrome
alias firefox='open -a Firefox' # firefox
alias safari='open -a Safari' # safari
```
Cannot enter value into MDEditor
Tags: react, help
Published: 2021-11-06 19:33:36

When I run the program, I can't enter a value in the input, help me
```javascript
const handleChange = (event) => {
    const { name, value } = event.target;
    console.log(value);
    setData(data => ({
      ...data,
      [name]: value,
    }));
  }; 
  const handleSubmit = () => {
    setComments([...comments, { content: data.content }]);
    
  };
```

```javascript
const FormCommnent = ({ onChange, onSubmit, value }) => (
  <div className="form-comment">
      <MDEditor
        value={value}
        onChange={onChange}
        name="content"
        rows={4}
        autoFocus={0}
        preview='edit'
      />
      <MDEditor.Markdown source={value} />
      <Button htmlType="submit" onClick={onSubmit} >
        Add Comment
      </Button>
  </div>
);
```
How Many Websites Are There in the World?
Published: 2021-11-06 21:00:37

Have you ever thought of how many active websites are in the world? did you think it would be hundreds ? thousands ? millions or what?. think whatever.
anyways there are currently over 1.86 billion websites. The trend of website numbers increasing continues year after year. By 2014, there were 1 billion websites online. It took only five years to almost double that number.
However, not all of the 1.8 billion websites currently online are active. It’s estimated that less than 200 million of that number are actually active.

internetlivestats.com
The fist site on the internet was created by tim berners lee and his teams and the website was
http://info.cern.ch/hypertext/WWW/TheProject.html
the first web browser the web browser Mosaic. it was created by Marc Andreessen and his colleagues at the University of Illinois in 1993. It was the first web browser that allowed users to use “point-and-click” graphical manipulations.
Domain Name registration was not availbale untile 1985. before that the fist domain namefor intranet service was Nordu.net, created on January 1, 1985. It was the domain of Scandinavian research collaboration.
The first registered domain title goes to Symbolics.com, a domain belonging to a computer systems company in Cambridge, Mass. It was registered on March 15, 1985, followed by Bbn.com, registered on April 24, 1985.
Finished 90 Days of Meditation
Tags: productivity, motivation, performance, writing
Published: 2021-11-07 02:30:55

Just finished 90 days of following 2 x 20 minutes / day - first time been this consistent with it and I feel nothing short of great! Used the [Seinfeld Strategy](https://jamesclear.com/stop-procrastinating-seinfeld-strategy) and [4 Disciples of Execution](https://www.franklincovey.com/the-4-disciplines/).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xi5wgl72284im0crpemr.jpeg)
  
The specific type of meditation I follow is [Transcendental Meditation](https://www.tm.org/), however, advocate for any type of stillness you can bring into your life.

## Observed Benefits

1. Clarity of Thought 
2. Much more energy during the day.
3. Better at handling impulses. 
4. Easier to get into flow.
5. More receptive to situations.
6. Life becomes easier and repetitious activities no longer seem as mundane as before.

The tracker I used can be found [here](https://t.co/igmxnzcYWI?amp=1). 

Will gladly answer any questions and help others as this technique has unequivocally changed my life.
Connecting MetaMask to a Reactjs App + Custom Hook + State Management
Tags: javascript, blockchain, react, reacthooks
Published: 2021-11-07 02:53:13

Hey everyone! If you're interested in getting the basics down on connecting your new App or dApp to the Ethereum blockchain and also connecting a wallet like MetaMask, here is Part 1 article of my journey: https://blake-wood-bst.medium.com/connecting-to-metamask-react-js-custom-hook-state-management-2f1f3203f509

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48u00hytms15gcsnmmpq.gif)

In this article I will explore how to setup a React Application that will connect to MetaMask and show your account info.

I will also show how to create a Custom Hook in this application that will store the State of your current connection status / account info with MetaMask.

We will also wrap your React app in a Provider that will utilize Web3 to transact with Smart Contracts or send ETH to other accounts that you specify and sign those transactions.

If you like the article please give me a clap and a follow! Bless
Frontend Challenge #4, Profile card component
Tags: webdev, beginners, codenewbie, challenge
Published: 2021-11-07 20:04:47

This is a brief description of the forth frontend project I've completed from Frontend Mentors, Profile Card component. [Frontend Mentors](https://www.frontendmentor.io/) is a online platform that provide front-end challenges that include professional web designs. You can play with the solution [here] (https://jcsmileyjr.github.io/Profile-card-component/).

## Step 1
The first objective is to get a general idea of the layout situation in mobile view and figure out what I don't know how to do. I start by styling the body HTML tag to center the content. Then create a container with the textual content (no styling) and images. 
![rough draft of design with little styling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7z74zw6lh4fenmw0ya7.PNG)
 
## Step 2   
2. From the offset, the biggest challenge would be getting the image to float on top of the line and be screen size responsive. My solution was to give the parent container a relative position style. The child container with the image received the absolute position and a specific top alignment number. This had the desired affect of floating the image on top of the line. The image was center with flexbox in the parent container.  
![Absolute and relative positioning code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oer646106fpbrdwq91z.PNG)

## Final Outcome
![final version of design to be built](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4n09qvcdmc9k1czasm7.PNG)

## What I learned

1. That a mixture of position absolute and relative to a parent and child elements will align elements on the web page outside of the normal flow.
2. To use CSS variables for global styles

## Resources used

1. [Quick recap about CSS Variables](https://css-tricks.com/difference-between-types-of-css-variables/)

### Thank you for reading!

Thank you for reading my blog. Feel free to connect with me on [Twitter](https://twitter.com/JCSmiley4) or [LinkedIn](https://www.linkedin.com/in/jcsmileyjr/).

You can find the completed code [here](https://github.com/jcsmileyjr/Profile-card-component)
Returning to an old project
Tags: productivity, motivation
Published: 2021-11-13 16:44:59

---
title: Returning to an old project
published: true
date: 2021-03-14 00:00:00 UTC
tags: productivity, motivation
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwv9jgto1scyzquu1ef4.png
canonical_url: https://edeen.dev/blog/returning-to-an-old-project/
---

Sometimes we have to put a project on hiatus. Other things can get in the way; focus can shift over time. I end up returning to old stuff pretty often, so I’ve written down the set of questions I ask myself when I'm reapproaching a paused project.

## Why am I looking at this project again?

- Am I just reminiscing?
- Do I just want to look at it again for a while before I have to go work on other things?
- Do I want to remind myself of what I get to work on soon, to help me get through what I’m working on now?
- Do I want to recycle some of this project to use for something else?
- Do I intend to continue working on the project now?

## What was my progress on this project?

- What was the project about?
- What was the goal of the project?
- How did I go about accomplishing the goal previously?
- How far did I get towards accomplishing that goal?
- Do I still want to accomplish the original goal, or is there a new goal I’d rather pursue?

## How will I complete this project?

- How much time would I like to devote to this work?
- How much time can I actually devote to this work?
- How will I schedule my allocated time?
- Are there any external motivators that might help me finish the project?
- Do I need any help completing the project?

After this, it’s all a matter of actually starting again!
Passion Project- Blog Post 402
Published: 2021-11-08 04:21:41

If I were to have unlimited resources and time to work on my passion project, I would focus on creating an application that would help all in a positive way and it would be in the health field. With the world always changing and something always happening, the medical field constantly needs innovating. My idea would involve an application that would track waiting times, allow people to sign up for appointments and fill their forms online, show availability of vaccines or tests, etc.  Last year everyone was running around waiting for hours to just get a covid test or a vaccine. Why not get ahead of that and make an application that every urgent care uses and possibly hospitals. It would allow waiting rooms to be less cluttered and it would allow more people to be seen faster by having an application that everyone can join and see distance of where the clinics are.

This application would need funding and it would need awareness of all to convert their files to be on the app. It would be difficult to get a bunch of companies to change their application over to this but having this application could give all more business. I feel I have enough interest in the medical field that I could have a good base line of what to put in to create the application but would need assistance to see what can and cannot be shown.  I think I would need help from others to create this application. I do have coding experience but this would be a large project that would need more than one person generating code and editing it to always be up to date.

For the patients, I would want them to put their current location in and be able to see all the doctor offices around them. There can be filters that would be how far they are willing to travel, input of what they specifically are going to the doctor for, and if their insurance is taken by that office. The patient will be able to click on each office and see the wait times currently. For the offices, I would want them to constantly be updating their wait times, take the patient records virtually, and payment through the app.