teleren/devto huggingface dataset:
Projeto Ecoleta da NLW finalizado!
Tags: node, javascript, beginners
Published: 2020-07-12 13:46:39

# Dica do dia: concluir um projeto é bom para a autoestima.

Consegui finalizar o projeto prático da NLW#1. O projeto é um aplicativo web que ajuda as pessoas a encontrarem pontos de coleta de resíduos de forma eficiente. Fiquei feliz porque compreendi a maior parte do conteúdo que foi passado. Estou aos poucos evoluindo e é muito bom perceber isso.

![Alt Text](https://media.giphy.com/media/cPB2dIdAHHwVyJEQeB/giphy.gif)

O projeto completo está no meu [Github](https://github.com/dauryellen/ecoleta-nlw-starter). Consegui ir além do que foi passado nas aulas e desenvolvi as funções de editar e excluir registros. :)

As principais tecnologias utilizadas foram:
- HTML,
- CSS,
- JavaScript,
- NodeJS,
- Nunjucks,
- Express e
- Sqlite3.

# A importância dos projetos pessoais

A frase "Feito é melhor que perfeito" faz muito sentido quando o assunto é fazer projetinhos. Deixar de produzir alguma coisa por medo de não sair do jeito que você quer ou com defeitos, vai fazer com que você nunca inicie nada. Todos nós sabemos que alguma coisa, o mínimo que seja, é maior do que nada. Isso não quer dizer que você vai fazer um código cheio de bugs e ficar por isso mesmo porque "é melhor do que nada". Isso significa que você vai estudar mais. Vai aprender a consertar seus próprios bugs. Assim, vai obter mais conhecimento e experiência que você nunca teria se não tivesse tentado construir algo em algum momento. Errar faz parte do processo de aprender.
The Front End Podcast - Episode #9
Tags: career, podcast, frontend
Published: 2020-06-08 07:45:40

Hey you! Yes, you! It's that time again for another instalment of [The Front End](https://thefrontendpodcast.site). 

In this ninth episode I thought I'd do something a little different and host a solo talk where I answer your most frequently asked questions. 

I'll be answering golden questions such as:

- How do I get into front end development?
- Is HTML a programming language? 
- How can I improve my design and CSS skills?
- What do I think about the term front end development in 2020?
- What skills should front end developers have?
- and many more!

Listen to episode 9 today on the following channels:

- Apple Podcasts > https://podcasts.apple.com/gb/podcast/the-front-end/id1499349107
- Pocket casts > https://pca.st/osul2zsa
- Spotify > https://open.spotify.com/show/4GuAxptrtY8Es5iHwp09dT
- Anchor > https://anchor.fm/the-front-end

## About episode 9

I'm a senior software engineer specialising in front end technologies and React. I hosted an [ask me anything](https://dev.to/kendalmintcode/senior-front-end-dev-here-ask-me-anything-i4m) style session on this very platform a few weeks ago and thought I'd turn the most popular questions into an episode so people can get their favourite questions answered straight from the horse's mouth. 

If you have any unanswered questions then please leave me a comment and I'll be happy to answer them :D

## Listening direct

Want to listen directly from here?

{% spotify spotify:episode:25Yh6NEbvu3WcYVjSxGoIt%}

## Want to be a guest or sponsor the show?

I'm definitely looking for guests to talk about a range of different development topics from careers to origin stories, learning and professional growth, frameworks and more.

Similarly, we're looking for sponsors to fill promotional slots within the show. 

You can find out more here:

- [Being a guest](https://thefrontendpodcast.site/guests)
- [Sponsorship information](https://thefrontendpodcast.site/sponsorship)

Thanks for listening!
Using EasyRandom with Spring Framework
Tags: java, springframework
Published: 2020-06-06 20:52:08

Tired of creating objects in tests. Try using EasyRandom library. Here is how easily you can add it to a Spring Java project

#### Step 1: Add gradle/maven dependency

https://mvnrepository.com/artifact/org.jeasy/easy-random

![](https://www.deskriders.dev/images/20200514225404481_20190134.png)

#### Step 2: Declare it in test

![](https://www.deskriders.dev/images/20200514230728850_1337135243.png)

#### Step 3: Use it to generate random data objects

![](https://www.deskriders.dev/images/20200514230800345_1963146893.png)


#### Step 4: 😍

![](https://www.deskriders.dev/images/20200514230639150_1516619298.png)

#### Tips:

#### Random initial seed
In the default setup, EasyRandom uses a default seed value to generate randam data.
Although it is quite simple to initiate EasyRandom with a random seed.

![](https://www.deskriders.dev/images/20200514231839075_671078143.png)

#### Enforcing javax.validation rules:

If an object is using javax.validation then there is an extension which enforces those rules when generating random objects.

Include https://github.com/j-easy/easy-random/wiki/bean-validation-support

![](https://www.deskriders.dev/images/20200514232418213_226235357.png)
![](https://www.deskriders.dev/images/20200514232450020_1291589909.png)

Github: https://github.com/namuan/dev-rider-codesnippets/tree/master/spring-boot-snippets
Let’s discover  Ruby on Rails 
Tags: ruby, rails, webdev, productivity
Published: 2020-06-06 22:42:02


Hello hello everyone ... 
I hope you are doing well despite this situation of global health crisis ...


I want through this series of articles to invite you to discover the **Ruby on Rails** web framework. But first of all, I will introduce myself.

#What about me..

I am Patrick Lionnel. I live in Senegal (AFRICA) since 2013 where I did an engineering cycle in networks and telecoms. in 2016 after my diploma, I wanted to learn to code and this is how my professional adventure in the middle of the code started ... I thus started as a junior Android developer for 1 year. Then I started to do the web with PHP ... it was pretty cool.

After 2 and a half years, I went to a start-up where I did a little excessive Javascript and I improved my front-end knowledge with learning the JavaScript Angular2 framework for almost a year. and in January 2020, I was recruited by another start-up to work on a really exciting project ... Alas, the project had to be done on a technology that I had never used ... you can guess Ruby on Rails ....


So despite the hundreds of candidates who have applied, I knew how to stand out with what I already had as experience in the web and the challenge was to succeed in learning the language and to be productive in a stressful environment and a reduced time .... **_Nothing better than real challenges_** ... 

#The Challenge...

This is how I dived into the marvelous universe of RoR (Ruby on Rails) and I would like through this series to present to you what I learned, why it’s good and especially why it is still a relevant choice today as well for start-ups who want to quickly prototype or have an app in a limited time, as for larger companies who want a robust platform.

As far as I'm concerned, I started this adventure in a team of 03 people including myself with the aim of producing a v0 of a SaaS web platform, responsive in two months. During these two months, we designed the platform with [Figma]( https://www.figma.com/), coded the application with Ruby on Rails, and deployed on [Clever-cloud](https://www.clever-cloud.com/). 

#How did we achieve this feat...

How did we achieve this feat? With a dev who had never done Rails? How do I manage to learn so quickly and adapt to my new work environment? How did I fall in love with Ruby on Rails? What can this framework bring you as a Dev, CTO, or entrepreneur? more in my next article.

By the way, if you too have already had to work under pressure, share your experience with us in a comment. Are you a Ruby developer? Tell me in a comment why and what do you like in this Framework ...
Mis primeros pasos en vim
Tags: vim, beginners, productivity
Published: 2020-06-07 04:03:42

Una guía para comenzar en Vim.

Yo usare Neovim, que es un fork de vim.

Para comenzar vamos a instalar neovim - [https://github.com/neovim/neovim/wiki/Installing-Neovim](https://github.com/neovim/neovim/wiki/Installing-Neovim)

Aquí pueden encontrar la instalación en su SO preferido.

Yo estoy en Debian, una distribución de Linux. Asi que estos son los comandos para instalar neovim:

```bash
sudo apt update
```

```bash
sudo apt-get install neovim
sudo apt-get install python3-neovim
```

Excelente, ahora ya tenemos [Neovim](https://neovim.io/) en nuestro sistema y para comprobar que es cierto, vamos a abrir nuestra terminal.

En la terminal escribimos el siguiente comando:

```bash
# Abrir neovim
 nvim
# Abrir un archivo en neovim
nvim nombre_del_archivo.extension_del_archivo + enter
```

Se te mostrara una ventana de bienvenida de Neovim.

Si bien con estos pasos ya podemos empezar a utilizar neovim, pero en este punto aún le faltan super poderes a nuestro editor, así que para poder dotarlo de estos poderes, es necesario crear un archivo de configuración llamado **init.vim** , es en este archivo donde vamos agregarle los poderes, vamos a crear este archivo:

```bash
# primero ubicate en la terminal en la raiz de tu user
~
# entra a la carpeta .config
cd .config
# Crear la carpeta nvim
mkdir nvim
# Crea el archivo init.vim, dentro de la carpeta nvim
touch nvim/init.vim
# Abre el archivo init.vim y agrega la siguiente linea:
set number
# guarda los cambios y reinicia neovim para que los cambios tengan efecto
# Ahora se te mostraran las lineas del archivo
1 set number
```

**Comandos para salir de nvim:**

```bash
# presiona 2 veces ESC, para volver al modo normal
# Salir sin guardar
:q 
# forzar la salida
:q!
# Salir y guardar cambios
:w
```

**Comandos básicos para navegar adentro del archivo:**

```bash
	# mover a la derecha
	h
	# mover a la izquierda
	l
	# mover hacia abajo
	j
	# mover hacia arribba
	k
	# lleva al comienzo de una palabra avanzando para adelante
	w
	# lleva al comienzo de una palabra avanzando para atrás
	b
	# te lleva al final de cada palabra
	e
```

**Comandos para guardar cambios:**

```bash
# Para guardar cambios sin salir del editor
:w
# guardar cambios y salir del editor
:wq
```

En el siguiente post, mostrare como instalar plugins en neovim.
Survey site focus on HTML flow
Tags: html, css
Published: 2020-06-07 06:11:21

# [Survey](https://heggy231.github.io/chingu-webdev-speedrun-challenge/frontend/survey/) focus on css flow

- The default style for position is `position: static` and offset properties (`top`, `bottom` will not work)

- `Position: Relative` means relative to its default static position on the web page.  

```css
.box-bottom {
  background-color: DeepSkyBlue;
  position: relative;
  // offset properties top, left
  top: 20px;
  left: 50px;
}
```

- `position: fixed` will remove its element out of HTML flow.  Therefore, it covers element following.

  To fix, add `position: relative`, provide offset amount to the element that is currently covered by  the `position: fixed` element.

```css
nav {
  // nav element is removed from HTML flow
  position: fixed
}

// element following `nav` is body
body {
  // take the element out of html flow 
  position: relative;
  // offset
  top: 200px;
}
```

- When use display property: `inline-block`, element can be placed next to each other and have dimension.  image element is good example of `inline-block`.

```html
  <header>
    <ul>
      <li>Question 1</li>
      <li>Question 2</li>
      <li>Question 3</li>
      <li>Question 4</li>
      <li>Question 5</li>
    </ul>
  </header>
```

We then can set `li` to `display: inline-block;` to questions to show up side by side.

![question inline](https://dev-to-uploads.s3.amazonaws.com/i/vmtlamzasub4n29v1d0g.png)
Updating fish shell from source code
Tags: fish, shell, git
Published: 2020-06-07 15:27:33

---
title: Updating fish shell from source code
published: true
description: 
tags: fish, shell, git
//cover_image: https://direct_url_to_image.jpg
---

In this post I'll briefly talk about how to update fish from HEAD from linux (Mac OS is different, check out https://github.com/fish-shell/fish-shell for specific build instructions). This means the latest commit in your default branch.

Why would you want to do this, and not wait for a release? Occasionally a feature you want has been fixed, but not released, and releases are quarterly or bi-yearly, etc. Though sometimes running unreleased code can mean untested bugs, and unknown territory. The steps here also work for most other programs provided they have clear build instructions like fish.

## Add an update-fish.sh

Let's create an update-fish.sh, usually I run personal scripts from `~/.local/bin/scripts` make sure that path is added to your PATH, or you could just drop the script into `~/.local/bin` if you prefer. Where you put the script is up to you, and a personal preference. You don't even need the script in path, if you are used to running scripts from a specific path all the time. If the script is in path, you can run it from anywhere.

> This assumes the fish-shell repo is already cloned to `~/git, change cd path accordingly if is different`

```shell
#!/usr/bin/env bash
  
cd ~/git/fish-shell
# check for upstream updates
git fetch origin
git merge origin/master
 
# build fish
sudo rm -r build
mkdir build; cd build
cmake ..
make
sudo make install

```

## Make script executable

```
sudo chmod +x fish-update.sh
```

## Build and Install

Run the script, and when asked for sudo enter your password. Make sure you have all build tools, and dependencies installed. Also listed in the repo. All and all it takes 2~min to build.

```
update-fish.sh
```

Lastly check your updated version

```
fish --version
```
Are unit tests a waste of your time?
Tags: testing, bestpractices, teamleading
Published: 2020-06-07 22:36:00

> First published on [techpilot.dev](https://techpilot.dev/article/are-unit-tests-a-waste-of-time)

**TL;DR In a perfect world, we would have automated tests for everything, but in reality, there's always a compromise between code quality and costs.**

I've been lucky enough to start a fair amount of greenfield projects in the past years. Looking back, I feel like writing tests had always saved time in the long run but were rather cumbersome when working on UI and smaller projects.

It goes without saying that for some apps (i.e. life-critical, mission-critical) an unit test coverage of 80%+ should be required. But, despite what most of the literature says, in some cases, unit tests are actually slowing us down. In which case, how do we decide if it's worth the trouble and keep a balance between quality and costs?

Here are a couple of things to consider.

* **Debugging process** Remember when you had that one awkward bug, and it took days only to reliably reproduce it? Unit tests allow you to control the state of your components in great detail, making it easier to find and fix such issues. 
* **Reusability and life span** If you wrapped up some code in a reusable library, chances are you'll improve it frequently in the beginning. Unit tests can help you ensure no breaking changes sneak through each iteration. 
* **Complexity** When you can't reason about a system in the wild, it helps to frame it in isolation. Unit tests do just that.
* **Third-party dependencies** Software requires the perfect alignment of many moving parts, some of them not under your control. When third parties act unexpectedly, it becomes almost impossible to debug your system. Mocking dependencies in your unit tests solves this. 
* **Costs** If you think you don't have enough time to write unit tests it automatically means you're ready to trade quality for it. This might work in some scenarios (e. g. proof of concepts), but you must be aware of the implications.
* **Team size** You'll find that as you make your code testable, you also increase its intrinsic quality. Also, unit tests are the closest thing to written specs, and while you can manage without any formal requirements while working on a part-time project by yourself, larger, heterogeneous teams would have a hard time doing so.

Unit testing is time-consuming, especially if you have a poorly designed codebase. You can decide to skip it, and it might be the right thing to do, depending on the context, but you'll have to trade code quality in return.
I made a portfolio generator for developers - feedback appreciated!
Tags: showdev, portfolio, career
Published: 2020-06-07 17:44:07

Hi there,

I've been working on this project for the past couple of months and decided to really make a push to get it out after I recently got laid off due to the pandemic.

It's a portfolio generator that takes the info from your GitHub account and generates a portfolio website where you can edit the content/design and deploy to web in a few clicks: https://www.profiled.app

Would love any feedback on it from the community here and I hope it could be useful to some of you :)
ASP.NET Coreでwwwroot以下の特定のファイルを発行対象外にする
Tags: dotnet, dotnetcore
Published: 2020-06-08 09:47:42

ASP.NET Coreでは以下のファイルは無条件で発行されるようです。

- `**\*.config`
- `**\*.json`
- `wwrwroot\*`

これらのファイルのうち、特定のファイルを発行対象外に設定するには、csprojファイルに以下のように記述する必要があります。

```xml
<Project Sdk="Microsoft.NET.Sdk.Web">
  ...省略...
  <ItemGroup>
    <!-- wwwroot\log以下の全ファイルを発行対象外に設定 -->
    <Content Update="wwwroot\log\*" CopyToPublishDirectory="Never" />
  </ItemGroup>
  ...省略...
</Project>
```

## 参考
- [Visual Studio publish profiles (.pubxml) for ASP.NET Core app deployment | Microsoft Docs](https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/visual-studio-publish-profiles?view=aspnetcore-3.1#exclude-files)
91/100 100daysofcode Flutter
Tags: 100daysofcode
Published: 2020-06-08 03:44:33

day 91/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today learn to implements image picker,vidation file, some logic
https://github.com/triyono777/100-days-of-code/blob/master/log.md
My first app in React Native
Tags: reactnative, node, javascript
Published: 2020-06-08 11:14:27

Hello buddies,

Not long ago (like 3 months) I started working on my side project called Rate Me. It's a simple app where you can rate other people appearance, chat with each other and see some summaric score.

It's still just an MVP, because I don't know if the app has some potential.

https://play.google.com/store/apps/details?id=ovh.zaba.rateme

For now only available on android, but if it will have some good feedback from users I'll upload it for app store.

Technologies I have used:
- React native for mobile app
- NestJS for backend

What you think about that?
Normal people exists in tech roles?
Tags: discuss, debate
Published: 2020-06-09 16:08:33

Hello, everyone!

Programing and related areas are surrounded by "gods" and "monsters" that started programing with 15 years old or maybe less and today have a startup or work on big tech companies like Facebook or Google?

Everytime I speak with them, I usually hear a history about how this person always loved technology and started in development with eleven or something, so I would like to know the life history of regular people who today work with tech, people that have interesteded for tech with 40 or that get a role in a tech position after years working in another profession. So, please, share this experiences with me :) 

By the way, what is your opinion about this? Do you think that technology is surrounded by geniuses or it's just impression?
Understand React Redux - Introduction
Tags: react, redux, frontend, javascript
Published: 2020-06-09 06:30:44

This month, I started to learn more about Redux, so I decided to write a basic post with my knowledge of Redux with React. I am also learning, so correct me if there is an error.

For Redux, you need some things:
- Reducer: A function that manages your actions and return a new state;
- Actions: A function that tells your reducer what it needs to do;
- Store: A state that will pass to our application;

There is a recomendation to focus our variables that define our actions, defining a string to a constant.

Let's look at an example, first our Reducer and Actions:

```js
// our constant with a string type
const ADD = 'ADD';

// our action creator, needs to be a pure function
const addMessage = (message) => {
  return {
    type: ADD,
    message: message
  }
}

// our reducer, also needs to be a pure function
const messageReducer = (state = [], action) => {
  switch(action.type) {
    case ADD :
      // join the new message with the others
      return [...state, action.message]
    default :
      return state
  }
}

// need to import {createStore} from 'redux'
const store = createStore(messageReducer)
```

That's it, our state are ready. Now we need to call it on our component to read the state or send an action. Let's see how we can do that:

``` js
import {useState} from 'react';
import { Provider, connect } from "react-redux";

const Presentational = (props) => {
  const [input, setInput] = useState('')

  const handleChange = (e) => {
    setInput(e.target.value)
  }

  const handleSubmit = () => {
    // we can call through the props because we use mapDispatchToProps below
    props.submitNewMessage(input)
    setInput('')
  }

  return (
    <div>
      <h2>Type a new message:</h2>
      <input type="text" value={input} onChange={handleChange} />
      <button onClick={handleSubmit}>Submit new message</button>
      <ul>
        // we can read through the props because we use mapStateToProps below
        {props.messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
    </div>
  )
}

const mapStateToProps = (state) => {
  return {messages: state}
};

const mapDispatchToProps = (dispatch) => {
  // if we has another action, we will pass in this object
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message))
    }
  }
}

// connect all of this things in a Container wrapper
const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);

const App = () => {
  return (
    // here the magic happens
    <Provider store={store}>
      <Container />
    </Provider>
  )
}
```

That's it, I'm learning and that's what I understood so far, what did you think of redux?
Responsive coffee site lesson
Tags: css
Published: 2020-06-20 22:00:38

- Use rem (root) unit for font sizes for easy scaling
- For background-image, set it to center so that center of img stays centered when resize 

```css

.banner-img {
  /* # is placeholder for img location */ 
  background-image: url('#')
  background-position: center;
}

```

- When reducing the img size, to keep its aspect ratio, only change width.

```css
.fun-img {
  width: 20%;
}
```

- Mobile screen media query rule set `max-width: 470px`.

  Set the img to fill the full width of the mobile 

  Stack img on top.

```css
@media only screen and (max-width: 470px) {

  img {
    width: 100%;
    float: left;
    display: block;
  }

```
What is Readiness & Liveness Probes in Kubernetes?
Tags: devops, kubernetes, opensource, beginners
Published: 2020-06-21 04:34:45

Kubernetes uses `Readiness` & `Liveness` probes to manage pod lifecycle. Readiness probe is used to determine whether pod is ready to accept the traffic or not and liveness probe is used to determine whether pod is functioning properly or not. Read more about them [here](https://kubernetes.io/docs/tasks/configure-pod-container/configure-liveness-readiness-startup-probes/). In this blog I am adding readiness & liveness probe to PHPMyAdmin application.

## Architecture

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0fe50x78pk2frhoeizlr.JPG)

## Prerequisites:

### Deploy PHPMyAdmin Application
Follow [Deploy phpMyAdmin application on kubernetes](https://dev.to/sagarjadhv23/what-is-deployment-service-secret-and-configmap-in-kubernetes-1pk5) blog

### Go to session_4 directory
```
cd ../session_4/
```

## Step 1: Delete PHPMyAdmin deployment
```
kubectl delete deployment phpmyadmin
```

## Step 2: Deploy PHPMyAdmin deployment with Readiness & Liveness probes
```
kubectl create -f phpmyadmin-deployment.yaml
```
```
kubectl get pods --watch
```
Exit once pod goes into running state

## Step 9: Browse phpmyadmin application

Go to browser and browse http://IP_ADDRESS:30030. Login with `root` user & `test` password

here IP_ADDRESS is the ip address of virtual machine where kubernetes is running.
 
## Demo
{% youtube c9cnPuD6QgU %}