teleren/devto huggingface dataset:
Please don't try Svelte.js first!
Tags: javascript, react, vue, svelte
Published: 2020-10-18 02:41:01

---
title: Please don't try Svelte.js first!
published: true
description: 
tags: javascript, react, vue, svelte
//cover_image: https://direct_url_to_image.jpg
---

Lately I started learning React.js I knew the base of Vue.js and I wanted for fun to discover another framework.

My experience with React has not been the most positive. Being used to Vue concepts, I find React more difficult to master. It's personal but it's not the greatest love.

Speaking of love, about two weeks ago I read an article here on dev.to :-) about Svelte. I had already heard of Svelte but it was a little while ago and I didn't know much.

Between two React training sessions, I decided to take a look at Svelte ... Just to see ...

I did the basic tutorial. Which by the way is excellent (https://svelte.dev/tutorial/basics) and I immediately fell in love with it.

It's amazing how easy and enjoyable it is to work with Svelte. And to understand it well I recommend doing a little Vue and React before. By comparing these frameworks you can quickly appreciate the advantages of Svelte. No kidding, I strongly recommend not to start in Svelte, it will spoil the surprise.

Thanks to the dev.to community for enlightening me on the subject.

If there are Svelte fans please leave me a comment and we can start sharing our littles Svelte story.
POST React Form to Server
Tags: javascript, react, webdev
Published: 2020-10-18 04:51:58

Using React to send FORM data to any given server.

I will show an example with 1 input in the form.

Need the name of our input in state
```javascript
state = {
    name: ''
}
```

We now need event handlers to set our state and the actual post request.

In the `handleSubmit`, we want to fetch the endpoint that we set our server to be at. For example `localhost:3000`.

```javascript
handleChange = (e) => {
    this.setState({[e.target.name]: e.target.value})
}

headers = {
    'Content-Type': 'application/json',
    Accept: 'application/json'
}

handleSubmit = (e) => {
    e.preventDefault()

    fetch('your server endpoint here', {
        method: 'POST,
        headers: headers,
        body: JSON.stringify({
            name: name
        })
    )}
    .then(response => response.stringify())
    .then(data => console.log("successfully sent: ", data)
}
```

How the form looks
```javascript
<form onSubmit={this.handleSubmit}>
    <label>Name:</label>
    <input 
        type="text" 
        value={this.state.value} 
        name="name" 
        onChange={this.handleOnChange} 
    />
    <input type="submit" value="submit" />
</form>
```
Hacktoberfest 2020 challenge was finally completed.
Tags: hacktoberfest, opensource, github, git
Published: 2020-10-18 04:46:08

The second time participated in this popular open-source event Hacktoberfest. During this entire week, I have explored various popular repositories on Github, which was suitable for me to work with the issues. I had made more than 4 pull requests, and eventually, the PRs had been accepted by the repository maintainer. Also, I recommended this event to everybody at my university and how to expand the open-source contribution culture. Thank you to all the developers working as a core member to organize such a great event for us.
Switch to linux while learning programming?
Tags: linux, beginners, opensource, python
Published: 2020-10-18 04:40:01

## For a new user?
I've used windows for most of my life like most people. Last year when I got a new laptop and started learing python I heard about linux on the internet. I always knew about linux but like most people I had a mindset that linux is for tech nerds and hackers and all those cool internet people. When I googled,"Linux for beginners", I was amazed by just how beginner friendly it is! 

## What are distros?
I'm no linux expert but I've used a few different distros in the past year. Most of them were based on ubuntu. In simple terms linux distros are like different android skins provided by different manufacturers like oxygen os by oneplus and color os by oppo, their looks and features might vary but under the skin all of them are same android. This is mostly same with linux distros, they may have different look, feel, user experience, workflow and package managers but under the skin all off them are for the most part same.

## Opensource?
What are opensource software? This was the most concerning thing for me when I first switched to linux. And boy i was wrong, opensource softwares can be as good as softwares developed by big companies. They are made and polished by the users for the users. You found a software you like? Want to contribute to it's development by adding some new features? Well stop thinking and just do it, that's the beauty of opensouce software. I also worried if opensource softwares are safe or not and I'm not completely sure how to explain but they are as safe as proprietary softwares. Just to be clear, they are not perfect. If you're into video editing, digital art, image editing and things, you will not get adobe suite but there are some goodd alternatives for some use cases.

## For coding?
It's absolutely perfect for all your programming needs. It's just as good as other OSes if not better.

## Conclusion
If you are eager to try linux but you're also afraid to dive into a completely new eco system, just take the roll and try it yourself.

### Some good distros I used as a beginner and also using right now are:
1. Elementary os
2. Pop!_Os
3. Zorin os
4. Kubuntu
5. Linux Mint
6. Ubuntu (currently using)

<a href="https://www.buymeacoffee.com/dietro" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
My First Hacktoberfest. 
Tags: hacktoberfest
Published: 2020-10-18 04:08:02

## What I Learned From Hacktoberfest

This is first time participating in HacktoberFest. During this time I learned a lot of new things like how to create a pull request and how to solve conflicts . Github is a very good open source platform for developers and we should get into it. Really excited for the swags and next year challenge.
Basic's ............
Tags: webdev, frontend, codenewbie
Published: 2020-10-18 03:48:57

Basic for Front-End WebDeveloping:

1) Learning how web works ~ Servers, Clients 
2) Learning how internet works 
3) Some protocols like Tcp/Ip, Udp, Dns, Domains
4) After this start with Html, Css And JavaScript

Did I forgot something?
How to add less and svg support to Nextjs
Tags: react, html
Published: 2020-10-18 03:25:21


![How to add less and svg support to Nextjs](https://i2.wp.com/blogreact.com/wp-content/uploads/2020/10/1_htbUdWgFQ3a94PMEvBr_hQ.png?resize=750%2C428&ssl=1)

Have you ever face a situation where you want to use less and SVG images with nextjs and you don’t want to spend time making configuration with webpack. Honestly webpack configuration is not that straight forward. Still in 2020 webpack config feels too complicated to even experienced developers. In this article we will gonna add support for less and svg images to Nextjs.

## Less support

Less is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets and run on the client side or server side. In other words less includes a lot of features along with normal css.

To add the support of less to nextjs you need to install two packages  **@zeit/next-less**  and  **less**  from npm.

```
npm install --save less @zeit/next-less
```

After the package installation include a file named  **next.config.js**  in root of your project.

Add less config with just 2-3 lines.

```
const withLess = require('@zeit/next-less');

module.exports = withLess({
  /* config options here */
});
```

And that’s it now you app supports less. Just try adding a less file and import in your app.

## SVG support

Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.

Adding svg support to frontend frameworks or library is always interesting. To add the support we will gonna need a package for that i.e  **[next-images](https://www.npmjs.com/package/next-images)**.

```
npm install --save next-images
```

After the installation just add image config to  **next.config.js**  file.

```
const withImages = require('next-images');
module.exports = withImages();

```

That’s it. To use the svgs just add a file svg file or a jsx file.

To set the images in background always use  **.svg**  format and to render the svg images use **.jsx**  to render as a component.

```
import { BgLeafIcon } from '../images'; //mage.svg
...
  <div
      className="bg-image"
      style={{ backgroundImage: `url(${BgLeafIcon})` }}
    >

```

or you can use as a component.

```
import { BgLeafIcon } from '../images'; //mage.jsx
...
<BgLeafIcon/>
```

I hope this article will be helpful to you guys. Feel free to comment your valuable thoughts.

[How to use Cookie in React](https://blogreact.com/cookie-in-react/)
Como Instalar Golang no Linux
Tags: go, linux, portugues
Published: 2020-10-18 01:19:25

# Intro

Hoje vamos realizar a instalação de uma das linguagens de programação que mais crescem no mercado de desenvolvimento.

- Remover versões anteriores
- Download
- Instalação
- Configuração
- Teste

# Remover versões anteriores

Primeiro vamos verificar se existe alguma versão instalada no seu sistema:

`$ go version`

- Se a resposta for algo como 'go version go1.15.1 linux/amd64' você terá que remover a instalação.

- Senão, se a resposta for 'command … not found' não existe nenhuma versão instalada pule para o próximo passo.

Se você realizou a instalação com seu gerenciador de pacotes desinstale usando o comando abaixo, para derivados de Debian como Ubuntu, ou o equivalente da sua distribuição:

`# apt remove golang-go`

Senão remova os diretórios e configurações realizadas manualmente.

# Download

Acesse o website https://golang.org/dl/ e baixe a versão disponível para Linux.

# Instalação

Após baixar o pacote mova o mesmo para o diretório '/opt':

`# mv golang1.15.tar.gz /opt`

Descompacte o arquivo tarball:

```
$ cd /opt
# tar zxvf golang1.15.tar.gz
```
Verifique se o tarball foi descompactado `$ ls -la`:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/se8jm5m2obkq09q3loin.png)

Remova o tarball com `# rm golang1.15.tar.gz`

# Configuração

Agora teremos que avisar nosso sistema operacional que existe um novo software instalado, assim ele poderá disponibilizar o mesmo em qualquer ponto do sistema para usarmos sem ter que acessar o diretório de instalação :)

Abra seu arquivo ~/.profile e adiciona a seguinte linha ao final do arquivo:

`export PATH=$PATH:/opt/go/bin`

Agora basta avisar seus sistema operacional que houve mudanças e pedir para recarregar este mesmo arquivo:

`$ source ~/.profile` ou `$ . ~/.profile`

# Teste

Para verificar se está tudo correto execute `$ go version` que deverá retornara versão da instalação:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1wy29vf2eq6i145ti3qg.png)

Crie um arquivo chamado 'hello.go' como contedo abaixo por exemplo:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rnw6grp9qa5llwztuhik.png)

Execute o código com `$ go run 'hello.go'` e devemos ter a seguinte saída:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i8jd1sonjkb579ocdoxt.png)

Sucesso!

### Por hoje é isso pessoal!

Obrigado pela visita, deixe seu like e siga para novos artigos sobre Desenvolvimento de Sistemas.

> @feiler no Twitter
Hacktoberfest 2020 Challenge Done Right!
Tags: hacktoberfest
Published: 2020-10-18 02:32:45

Hello fams!

I am excited to share that, I have successfully completed hacktoberfest challenge this year. 

Hackertoberfest 2020 was indeed a great experience. It was my motivation to learn and understand open source. It was the reason for my commitment to open source. Last year, I was not even aware of how to make a simple PR, but because of my motivation to participate in hacktoberfest this year, I started learning and making quality PR since then to get hands-on this year. Now I really love working for open source.

Thank you #hacktoberfest for being the best motivation for opensource contribution ever! Also a big thanks to @digitalocean for this opportunity!

Do reach out to me, if you need any help with understanding hackroberfest or open-source.

Happy Hacking :)
CSS GRID
Published: 2020-10-18 02:08:24

An awesome way to organize your text or your forms on the screen.

For example
.box {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

this would hold your main div together and split it into a 5x5 grid

now to set a child div into any grid just use this syntax


.row-1 {
  grid-row: ?;
  grid-column: ?;
}
I open-sourced my portfolio + blog template built with Gatsby & Tailwind
Tags: gatsby, opensource, javascript, react
Published: 2020-10-18 01:59:29

Hey everyone! I recently open-sourced [Devfolio](https://github.com/RyanFitzgerald/devfolio), which is a personal portfolio + blog template I built with GatsbyJS and TailwindCSS. 

I wanted to create something that was completely production-ready out of the box (you just edit one config file and deploy), but also easy to customize and extend if you wanted to take it further. Also, because it's built with Gatsby, the final result is fairly fast. 

I'm currently using a slightly customized version for my own [personal site](https://rfitz.io/) as well, if you wanted to see another example of it.

Hopefully some of you find it useful for your own purposes and if anyone has any suggestions for additions, I'd love to hear them! Also, if you need any help, feel free to [reach out on Twitter](https://twitter.com/rfitzio).
Git Remote
Tags: github, git, csharp, opensource
Published: 2020-10-18 00:51:48

Two weeks ago, we had practice with sending pull requests to contribute to other classmates' repo. This week, our goal is to use **git remote** instead.

It took me a while to understand the concept of git remote. Basically, git remote provides a safe way to work as a team. I can work on another person's reop by forking it to an independent repo which won't affect this upstream repo; at the same time, I can always update the new changes that are pushed in the upstream repo by fetching/pulling. If the upstream repo author likes the changes I made in my forked, origin repo, she can also pull and merge my repo. The two repos are separate but still have connections. Git remote is great for teamwork since everyone can have her own forked repo and work on the assigned parts without affecting other people's work.

In this practice, I team up with my old C# partner again. We worked on each other's repo and fetch those changes. The feeling of working on other people's code is always interesting. You need to read each line of code in detail and try to follow her/his coding style and design. Even though we've collaborated before, and the feature that we're working on is the same one, the way we code are still different. This is the best thing about collaboration, I can always find a new possibility in the same, old thing.

The process of using git remote to merge my partner's code is smooth, with no merging conflict to fix. Oddly, I am a bit sad about that. Last time I made [mistakes](https://dev.to/yuanleemidori/resolving-conflict-2ch5) about switching between different branches. To solve the issue, I did research and ask my professor for help, and did more research after. I learned a lot through that process. It is always best to learn from the mistake, you'll be pushed way harder in order to solve the issue.
Run emulator from console without starting Android studio 
Tags: reactnative, android, testing
Published: 2020-10-18 00:15:45



The way to run the emulator from the console (I assume that you installed it before, using Android Studio) is:

run

cd ~/Android/Sdk/tools/bin && ./avdmanager list avd

OR

cd ~/Android/Sdk/tools && ./emulator -list-avds

You will get the list od your virtual installed devices. In my case it was:

Available Android Virtual Devices:
  Name: Galaxy_Nexus_API_17
  Device: Galaxy Nexus (Google)
  Path: /home/piotr/.android/avd/Galaxy_Nexus_API_17.avd
  Target: Google APIs (Google Inc.)
  Based on: Android 4.2 (Jelly Bean) Tag/ABI: google_apis/x86
  Skin: galaxy_nexus
  Sdcard: /home/piotr/.android/avd/Galaxy_Nexus_API_17.avd/sdcard.img


Copy name of the device you want to run and then

cd ~/Android/Sdk/tools && ./emulator -avd NAME_OF_YOUR_DEVICE

in my case:

cd ~/Android/Sdk/tools && ./emulator -avd Nexus_5X_API_23
A Collection of Cloud Security Tools
Tags: cloud, security, tools
Published: 2020-10-25 22:02:10

---
title: A Collection of Cloud Security Tools
published: true
date: 2020-10-18 00:00:00 UTC
tags:
- cloud
- security
- tools
canonical_url: https://cloudberry.engineering/article/cloud-security-tools/
---

I’ve built a [directory of open source **cloud security tools**](https://cloudberry.engineering/tool/).

A good part of my day to day is spent trying to automate away problems. Over the years I learned how to invest my time wisely, and I made a habit to research and use already made tools before start coding my own.

As a consequence I have a fairly large collection of utilities I keep nurturing, alongide references, commands and debugging adventures.

I thought I could as well make it public, so here we are: [check it out](https://cloudberry.engineering/tool/).

Every tool has a page were I (will) store my own notes: see my very own [docker-security](https://cloudberry.engineering/tool/docker-security) as an example. I am still cleaning up most of them and I will publish a bit per time.

I’ll also commit a more compact version [to github](https://github.com/gbrindisi/cloud-security-tools).

In the meanwhile if you have some tools to share [please do](mailto:hello@cloudberry.engineering)!

---

Did you find this post interesting? I’d love to hear your thoughts: `hello AT cloudberry.engineering`

I write about **cloud security** on my [blog](https://cloudberry.engineering), you can subscribe to the [RSS feed](https://cloudberry.engineering/index.xml) or to the [newsletter](http://eepurl.com/hecKnf).
How to move uncommitted code to a different branch in Git?
Tags: git
Published: 2020-10-18 00:00:00

---
  title: How to move uncommitted code to a different branch in Git?
  published: true
  tags: Git
  date: Sun Oct 18 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/move-uncommited-code-to-different-branch-git
  cover_image: https://melvingeorge.me/_next/static/images/main-73a80316113618ca9eec65f0c8ecb45f.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/move-uncommited-code-to-different-branch-git)
  
Many times I had this problem where I start implementing a feature in my `main` branch only to realize that this is not the appropriate branch to implement it 🤯. The following tip will quickly help you to recover from this situation 🌟.

### Step 1

First add all the files so that any new files will be included if there is any. It can be done like this,

```bash
git add .
```

To move uncommitted code to a different branch, you can use the

```bash
git stash
```

command to temporarily store the code to Git Stash.

### Step 2

Then you need to change to the branch you need to move the code using this command,

```bash
git checkout name_of_branch
```

### Step 3

After changing to the branch you can use,

```bash
git stash pop
```

command to get the code from the stash.

Now, you will get the uncommitted code written to files in the new branch.

### Feel free to share if you found this useful 😃.

---
Machine Learning Resources with Projects
Published: 2021-01-18 05:04:10

---
title: Machine Learning Resources with Projects
published: true
date: 2020-10-18 00:00:00 UTC
tags: 
canonical_url: https://thelearning.dev/blog/ml_learning_path/
---

With the boom of machine learning and Artificial intelligence, One of the questions I get frequently asked is

1. How to get started with machine learning? 
2. What books do you suggest? 
3. Do you suggest any courses? etc.,

But the most common question is there are so many resources which one to follow. Worry not! I have curated resources that worked for so many people. The resources come with some projects for you to try out the concepts you learn.

Now you may get carried away by all the links and books here. Machine learning has a learning curve and usually takes six months of constant effort. Do not give up because you do not understand anything in the first few weeks. One can become a master only by continuous practice.

> The resources focused on applied ML and not the core of machine learning. This is a starting point. Once you can build a few models, you can dig deeper to understand how they work.

## Resources

1. [Machine Learning Mastery](https://machinelearningmastery.com/start-here/)

Machine Learning mastery has an extensive set of roadmaps and blog posts that can guide you through the journey of transforming yourself into an ML Engineer.

1. [Hands-on Machine Learning with sklearn, Keras and tensorflow2](https://amzn.to/37hyb0C)

I cannot thank this book enough because it takes you through every step of building an ML pipeline. With each chapter, you get a little closer to becoming an ML Engineer. By the time you finish the book, you will know how to tackle an ML problem.

1. [Machine Learning A-Z course](https://www.udemy.com/course/machinelearning/)

Similar to the above book, this course has helped me simplify my understanding of machine learning. Until then, I thought it was a huge technology that takes years to master. The course suggested few mental models on how to approach each ML problem, which came in handy later when solving intensive problems.

## Projects

Pretty much every exercise on Kaggle is a project worth building. While my focus is is mostly on text and NLP, you should focus on different kinds of problems like numerical, categorical, predictive, clustering, etc., The above resources should prepare you for the following projects.

### Examples

1. Twitter hate speech classifier
2. Hot-dog not hot-dog
3. Book/Movie recommendation system
4. [More projects](https://hackernoon.com/top-5-machine-learning-projects-for-beginners-47b184e7837f)

## More Questions?

Write to us [@thelearningdev](twitter.com/thelearningdev)
Charla. O meu código en producción xa é legacy
Tags: articles, misc
Published: 2021-03-03 15:43:19

---
title: Charla. O meu código en producción xa é legacy
published: true
date: 2020-10-18 00:00:00 UTC
tags: articles,misc
canonical_url: http://franiglesias.github.io/peum-conf-2020/
---

El pasado sábado (17/10/2020) participé en la PEUMConf2020.

Y aquí está el vídeo de la charla. Está en galego, pero creo que la puedes seguir con facilidad.

La charla resume algunas ideas que ya he expresado en este blog: el código es una representación del conocimiento de negocio. Ese conocimiento siempre evoluciona y cambia, por lo que el código (y eso incluye los test) estará desactualizado casi en el mismo momento de desplegarlo. Será, de hecho, legacy.

La propuesta de la charla es abrazar esa circunstancia y trabajar para mantener ese desfase entre conocimiento y código lo más pequeño posible.

<iframe width="560" height="315" src="https://www.youtube.com/embed/ortJQ8Z1ILk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

Gracias a la organización por aceptar la charla y a las personas que la habéis visto en directo.

Y aquí tienes la [lista de reproducción de todas las charlas de esa jornada](https://www.youtube.com/playlist?list=PLQLA_LWJwvJN1RwlfwvLWFR-gSUb4U2EZ)