teleren/devto huggingface dataset:
Powershell + BATs
Tags: powershell, tutorial, beginners
Published: 2021-02-12 17:04:27

O uso de um script Powershell pode não ser muito pratico para alguns usuários, ao contrario de uma BAT (arquivo de lotes do Windows), que pode ser iniciada clicando. 

Para contextualizar, eu trabalhei em alguns locais que dentro da equipe de suporte eu era um dos poucos que tinha uma intimidade maior com a linha de comando, e para não limitar o uso das automações, tomamos como padrão que elas seriam iniciadas por BATs. 
Assim, mesmo alguém do administrativo poderia utilizar algumas automações de forma simples, apenas clicando nelas. 

Mas o processo de ficar escrevendo uma BAT para cada programa era algo um pouco chato, então cheguei num modelo e criei uma função para automatizar a criação das BATs.

Como exemplo, vou utilizar a que cria BATs dentro de um processo de automação de instalações.
Para utilizar ela, vamos precisa de algumas informações: 
1. O nome do programa que vamos instalar
1. O caminho para o PS1 com a automação da instalação
1. A versão do projeto
1. O caminho onde queremos salvar a BAT

Certo, mas como vamos escrever essa BAT? 
Basicamente, temos um texto base do script com alguns pontos chaves. Salvamos ele dentro de uma variável, como uma string qualquer, e alteramos os valores utilizando variáveis. 
No fim, criamos um arquivo com esse conteúdo e com a extensão BAT. 

Nosso código vai ficar um pouco bagunçado, já que não conseguimos indentar corretamente nosso código para manter a formatação da BAT, mas ele fica assim: 

{% gist https://gist.github.com/IGDEXE/ebe0e519d6fd914b1ee381beaa40826c %}

Esse projeto pode parecer meio maluco, mas na verdade ele faz parte de um ainda mais. Explicando um pouco, teve um cenário onde fazia muito sentido ter um executável para instalar programas de forma silenciosa, mas qual a forma mais fácil de fazer isso? 

Na minha visão na época, escrever um script em Powershell que escreveria: 
1. Um script Powershell de instalação
1. Uma BAT para executar esse script
1. Um script em GO para iniciar a BAT

Depois de escrever cada um deles, faz a compilação do executável em GO e com isso permite o uso do EXE como queríamos. 

Provavelmente existem formas melhores de se fazer isso, já que reconheço a enorme gambiarra, mas sem dúvidas foi um projeto bem divertido. 

Caso queira ler, publiquei no meu [GITHUB](https://github.com/IGDEXE/Silent-Install-Packages).
Fetch (curl) your Public IP address from CLI with ifconfig.co/ip
Published: 2021-03-30 20:06:04

---
title: Fetch (curl) your Public IP address from CLI with ifconfig.co/ip
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
New tool to fetch your Public IP from the CLI. 

`curl ifconfig.co/ip` (same as `curl ifconfig.co`). 

There are some other features too:
`curl ifconfig.co/json` returns City, State, ISP etc.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0kcms8lp817h8er2hm3.png)
  
`curl ifconfig.co/city`
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yx8jigky1q8qy03vaeb.png)
 
`curl ifconfig.co/country`
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oglpykaeyvwgyjhjbvf6.png)
 

See options at https://ifconfig.co.
Too many node_modules and not enough space? Let's solve that.
Tags: npm, programming, javascript, hacks
Published: 2021-03-30 19:47:28

While we hack away at all the JavaScript projects and codebases we're working with, something more _sinister_ accumulates... more often unknowingly. 

Yes, I'm talking about node_modules. The ones that drain all your pc's ~~life force~~ disk space. Those beautiful snippets of code that we once so easily imported, soon become the nightmare fuel of developers.

But not to worry, it's not all gloom and doom.

Today, I came across an informative short clip by [Fireship](https://https://www.youtube.com/watch?v=qOSH2pYg6m8) that blew. my. mind. 

It's intuitive, simple, (might need a module installation to work - oops!) but damn it does the job. Say goodbye to all that unnecessary disk clog.

### Step 1:
Open your terminal. Enter this command:
`npx npkill`

### Step 2:
You should see this pop up:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7w25z4whh28cyafdtkor.png)Enter `y` to allow installation of npkill. 

### Step 3:
You should now see this on your terminal:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmat1ghmz6ncuh6ywszh.png)

<figcaption>A juicy list of culprits just waiting to be deleted!</figcaption>
<br>Now all you need to do is move down the list of modules via the spacebar and press space to delete any (or all if you've accumulated a ton like me).
Press escape to leave once you're finished.

Your pc can finally :sparkles:breathe:sparkles:.

Hope you had your mind blown too.
New stuff on C# I learned today
Tags: csharp
Published: 2021-03-30 19:26:31

#### Data types
_Presentation vs Calculation and Evaluation_. I love that C# is a typed language. It's great to have to declare if our variable is a `string` or an `int` or even a `decimal`. It's best to use the `string` or `char` data type when handling numbers that aren't used in mathematical calculations. Phone numbers, postal codes, etc. Same goes for `bool`, which should be used only if working with evaluation of true or false.

#### Variable
Variables are temporary storage containers for data.
Assigning a variable is best at the moment of declaration.
`string name = "value"`.
The `var` keyword is used differently than in other languages. Using `var` will implicitly give the variable a type at the moment of declaration, which has to be done simultaneously with initialization.

#### Verbatim string literals and string interpolation
In the C# world by adding `@` at the beginning of the string.
`Console.WriteLine(@"Say "hello". Don't escape the /")`
*_String interpolation_*, similarly to JS, uses the `$` symbol. HOWEVER, it's placed differently. It also uses double quotes instead of backticks.

C#
```csharp
Console.WriteLine($"{greeting} {firstName}!");
```
JavaScript
```js
console.log(`${greeting} ${firstName}!`)
```
Combining verbatim and string interpolation can be very useful if you need to escape some characters in your string. In this case, `$@` should be pre-fixed to the string.
How to use Chart.js
Tags: javascript, chartjs
Published: 2021-03-30 19:18:13

###1) Chart.js Installation - How to install Chart.js

Install Chart.js via npm or bower.

Or use the CDN to added the minified Chart.js scripts. 

 

####Chart.js npm

_How to install Chart.js with npm_

```npm install chart.js --save```
Install chart.js in the command prompt using npm.

 

####Chart.js Bower

_How to install Chart.js with bower_

```bower install chart.js --save```
Or install Chart.js in the command prompt using bower.

 

####Chart.js CDN

_How to use the Chart.js CDN_
```html
<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    ...
  
  
  </body>
</html>

```
While the documentation recommends installing Chart.js in the command prompt, add the Chart.js CDN to the `<head>` element for light-weight development. 

The examples below use the CDN. 


###2) Integration - How to add Chart.js to an HTML document
Chart.js requires HTML and JavaScript code.

The HTML code places the chart in the document using the `<canvas>` element while the JavaScript function instantiates the chart.

####How to add the Chart.js <canvas> element

_How to display Chart.js in an HTML template_
```html
<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Integration</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>
  
  
  </body>
</html>
```
Chart.js requires a `<canvas>` element containing the unique id of the chart for the data to render in the HTML template.

This is the only HTML code required.

####How to instantiate Chart.js

_How to add the Chart.js JavaScript function_
```html
<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Integration</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            
        });
    </script>

  
  
  </body>
</html>
```
Then create the script that creates the chart. 

The type, data, and configuration options will be added within the function.


[11 Chart.js Examples](https://www.ordinarycoders.com/blog/article/11-chart-js-examples)
HTML - the result.  Made with love 😊 
Tags: programming, webdev, codenewbie, beginners
Published: 2021-03-30 19:03:20

I did it! Got a total non developer, or whatever you call someone with zero development experience these days, to start writing HTML! The result was better than I could wish for. Frankly, I didn't know what to expect. Where te examples enough? Will there be questions? Would she be intrigued by the awesome world of web development?

Especially that last question was important to me. And the answer was yes! She wrote the HTML in about half an hour and came to the conclusion it needed some color, searched the internet, and made it happen! These are, I think, the core values of a developer. Be curious, be inventive, and put some extra love in the result. 

So here it is!
{% codepen https://codepen.io/Joyce87/pen/gOLNrqV %}
This example is the perfect bridge to the next post of this series, CSS! Color, position, style, that's what we'll learn next. I truly hope 
webdevopment get's a place in her heart, and maybe even yours 😊

P.s. The girl in question is my girlfriend. I don't just get these type of messages from anyone. Developers are cool 😎, not that cool 😅
Awesome Search Box - Using Only HTML & CSS
Tags: codepen, javascript, html, css
Published: 2021-03-30 19:01:53

---
title: Awesome Search Box - Using Only HTML & CSS
published: true
tags: codepen, javascript, html, css
---



{% codepen https://codepen.io/ahmadbassamemran/pen/rNjMXqg %}


<hr/>
[Do Not Forget To Like & Subscribe In The Channel:](https://www.youtube.com/AhmadEmran?sub_confirmation=1)
<hr/>


{% youtube P0UP7IF37yM%}
Awesome Switch Button Animation
Tags: codepen, javascript, html, css
Published: 2021-03-30 18:59:54

---
title: Awesome Switch Button Animation
published: true
tags: codepen, javascript, html, css
---



{% codepen https://codepen.io/ahmadbassamemran/pen/OJWRyOM %}


<hr/>
[Do Not Forget To Like & Subscribe In The Channel:](https://www.youtube.com/AhmadEmran?sub_confirmation=1)
<hr/>


{% youtube vI7DpIVl0QY%}
Elixir and Erlang code in the same umbrella project
Tags: elixir, erlang
Published: 2021-03-30 18:58:26

There's a simple way to write the Elixir and Erlang codes under the same umbrella project and you can use them together.

# 1. Create a new umbrella project
For this example, I'll create an umbrella project.

```sh
$> mix new ping_beam --umbrella
$> cd ping_beam
$> tree
.
├── apps
├── config
│  └── config.exs
├── mix.exs
└── README.md
```

# 2. Create an Elixir project in umbrella
I'll start off by creating an Elixir project inside the `apps` folder.

```sh
$> mix new ping_elixir
```

Now, I'll add a `ping` function inside the `PingElixir` module whose only purpose is to print out a message.

```elixir
# apps/ping_elixir/lib/ping_elixir.ex
defmodule PingElixir do
  @moduledoc false

  def ping do
    IO.puts("Ping from Elixir")
  end
end
```

# 3. Create an Erlang project in umbrella
I'll create an Erlang project using `rebar3` also inside the `apps` folder.

```sh
$> rebar3 new lib ping_erlang
```

As for the Elixir project, I'll also create a module and add a `ping` function there.

```erlang
% apps/ping_erlang/src/ping_erlang.erl
-module(ping_erlang).

-export([ping/0]).

ping() -> <<"Ping from Erlang">>.
```

# 4. Reference and use the projects above
For this step, I'll create a new project named `ping` where I'll create a `ping` function and call the modules above.

```sh
$> mix new ping
```

Now, I'll change the `mix.exs` adding the `PingElixir` and `ping_erlang` modules as umbrella dependencies.

```sh
# apps/ping/mix.exs
defmodule Ping.MixProject do
  # project config...

  defp deps do
    [
      {:ping_elixir, in_umbrella: true},
      # As the Erlang project, it's really important to add the manager as rebar3
      {:ping_erlang, in_umbrella: true, manager: :rebar3}
    ]
  end
end
```

After that, I'll modify the ping module to call those modules.

```elixir
# apps/ping/lib/ping.ex
defmodule Ping do
  @moduledoc false

  def ping do
    [
      PingElixir.ping(),
      :ping_erlang.ping()
    ]
  end
end
```

# 5. Running
And as for the testing of the code, it's pretty simple.

```sh
$> iex -S mix

iex> PingElixir.ping()
"Ping from Elixir"

iex> :ping_erlang.ping()
"Ping from Erlang"

iex> Ping.ping()
["Ping from Elixir", "Ping from Erlang"]
```

# 6. Conclusion
It's a really simple process! Just put the Elixir and Erlang codes together. And with a few lines of code, you'll get it done.

Check the [repo](https://github.com/wesleimp/ping_beam) for more.

Thanks!
2 Simple Tips To Clean Nested IF/ELSE Conditions.
Tags: codequality, beginners, javascript, programming
Published: 2021-03-30 18:43:40

There might be a time when you have your if/else conditions like this
```javascript
if(age>0){
	if(age < 18){
		return "Not an Adult"
	}
	else if (age >= 18 && age<60){
		return "An Adult"
	}
	else{
		return "Senior Citizen"
	}
}
else{
	return "Age must be a valid number"
}
```
This is however a simple example, this can get messy as your code logic gets complex. 

To add more, Multiple nested if/else increases **[Cyclomatic complexity](https://en.wikipedia.org/wiki/Cyclomatic_complexity)** and it is better to avoid it whenever possible.


> Cyclomatic complexity is a software metric used to indicate the complexity of a program. It is a quantitative measure of the number of linearly independent paths through a program's source code. ***Thomas J. McCabe, Sr.***


So what can you do to avoid it? Simple, Try to have fewer branches of if/else conditions achievable with the following tips.


## The Tips
1. Guard Clauses
2. Ternary Operators

There are others like Switch Statement, Dictionaries, Jump Tables, etc. but those are beyond this article's scope.

### 1. Guard Clauses
In simple terms, return early if a condition is not met. Again taking our previous code, we can modify it like this
```javascript
// Guard clause
if(age <= 0){
	return "Age must be a valid number" 
}

if(age < 18){
	return "Not an Adult"
}
else if (age < 60){
	return "An Adult"
}

return "Senior Citizen"
```
Or you could even do this
```javascript
// Guard clause
if(age <= 0) return "Age must be a valid number"

if (age < 18) return "Not an Adult"
else if (age < 60)	return "An Adult"
else return "Senior Citizen"
```
Use brackets or not, scoped only to clean code.

### 2. Ternary Operators
Most of you already use them, but anyways. Modifying our last code
```javascript
if(age <= 0) return "Age must be a valid number"

var res = (age < 18 ? "Not an Adult" 
		: (age < 60) ? "An Adult" 
		: "Senior Citizen")

return res
```
or
```javascript
if(age <= 0) return "Age must be a valid number"

return (age < 18 ? "Not an Adult" : (age < 60) ? "An Adult" : "Senior Citizen")
```


---
**Disclaimer**: Clean code doesn't always mean Performant code or Simple Code. Sometimes you have to decide between one or the other. There is however a limit to how clean you can make your code.

---
So here it is guys, do you use any other method to clean nesting? Be sure to tell me in the comments.
How to use CSS Media Query Breakpoint in Styled-Components
Tags: javascript, css, react, webdev
Published: 2021-03-30 18:28:54

## Create and Use Breakpoint in Styled-Components

**Step 1: Create breakpoints.js and define size, device variables**
You can change breakpoints size and add new size.
```
const size = {
 xs: ‘320px’,
 sm: ‘768px’,
 lg: ‘1200px’,
}
const device = {
 xs: `(min-width: ${size.xs})`,
 sm: `(min-width: ${size.sm})`,
 lg: `(min-width: ${size.lg})`
}
export default {size, device}
```

**Step 2: Use this breakpoints in Styled-Components**

```
import breakpoint from 'Commons/breakpoints';
...
const Component = styled.div`
    @media only screen and ${breakpoint.device.xs}{
        display: none;
    }
    @media only screen and ${breakpoint.device.sm}{
        display: flex;
    }
    @media only screen and ${breakpoint.device.lg}{
        display: flex;
    }
`;
```
SSRF vulnerability: in NPM package impacts up to 279k projects
Tags: javascript, devops, npm, news
Published: 2021-03-30 18:27:32

A potentially “catastrophic” security vulnerability in Netmask, an NPM package used by more than 279,000 open source projects, has been patched after lying undiscovered for nine years.

The improper input validation flaw could allow remote, unauthenticated attackers to achieve server-side request forgery (SSRF) in downstream applications.

Read more:(published here)
https://portswigger-net.cdn.ampproject.org/v/s/portswigger.net/daily-swig/amp/ssrf-vulnerability-in-npm-package-netmask-impacts-up-to-279k-projects?amp_js_v=a6&amp_gsa=1&usqp=mq331AQFKAGwASA%3D#aoh=16171276886939&csi=1&referrer=https%3A%2F%2Fwww.google.com&amp_tf=From%20%251%24s&ampshare=https%3A%2F%2Fportswigger.net%2Fdaily-swig%2Fssrf-vulnerability-in-npm-package-netmask-impacts-up-to-279k-projects
On Escaping Tutorial Hell
Tags: codenewbie, productivity, devjournal
Published: 2021-03-30 16:36:15

If you are even considering the notion that you may be stuck in tutorial hell, you have already done too many many tutorials so let me make this easy for you. STOP. NOW. NO MORE TUTORIALS!

I have been there. I was stuck in what seemed to be a never ending loop of tutorial after tutorial, udemy course after udemy course and feeling like I was improving but when it came to writing my own programs, I was at a loss.

With hindsight, the solution to this problem was so simple but, therein lies the problem. We don't want to do the actual _hard work_ of writing our own programs or, admit that following endless tutorials is simply a form of procrastination.

Now, I'm not claiming that all tutorials are bad, or that we shouldn't follow them when picking up something new but I think that it can be (and often is) used as a crutch to stop us from getting on with what we know that we should be doing. I can tell you now that no matter how many videos you watch or how many tutorials you follow, you will still end up facing challenges while building your projects that will frustrate and block your progress but the only way to surpass these challenges is to work through them.

So, my advice is simple. Stop following tutorials right now. Start a project. Work on it. Get stuck in to the documentation. Build the thing.

The truth is that we do not need to know every quirk or facet of every technology we use. We simply need to know enough to _be dangerous_ or build the idea we have.

If you enjoyed this article, you may like to consider consuming some of [Stefan Mischook's Youtube content](https://www.youtube.com/user/killerphp). He uses the phrase "Learning on a need to nerd basis" which I think encapsulates this idea beautifully.

Until next time. 👋
Help! I'm in Tutorial Hell
Tags: tutorial, beginners, codenewbie, programming
Published: 2021-03-30 18:02:37

*Yall, I think that I'm stuck!*

This is what I was saying to myself a month ago. I did not know that there was such thing as "tutorial hell" until I was in it. 

### But I love tutorials!! 
Now, don't come for me saying, *"how am I suppose to learn if I don't do tutorials?"* No boo, do your tutorials. But, **don't get stuck in just doing tutorials.** Because if you are just doing tutorials and are not practicing what I've been learning, then technically, ***you ain't learning shit.*** *(insert shrugs)*

### Get out!!
I'm saying this because I was doing the exact same thing. I was stuck just doing tutorials and I wasn't practicing any of the material I was learning. And when it came time to do a project, I didn't know anything. 

I've learned that ***writing bad code is how you eventually write good code.*** Since I'm teaching myself this material, following [FreeCodeCamp](https://www.freecodecamp.org/) lessons, it was easy for me to get stuck in the tutorial hellhole. And I was honestly enjoying my time in tutorial hell. Until, you know, a project lit some fire under my butt. 

### How to get out?
Well, I started practicing (coding) what I was currently learning in tutorials, in Visual Studio Code (VSCode). Since I'm currently learning how to make graphs using D3, I started making my own graphs in VSCode. Yes, they looked really shitty at first, but the more I worked on them, the better they looked over time. 

### To help you out, here is something to do: 
After you are finished with one lesson or tutorial, make the exact same thing in VSCode. And then, make your own version of that tutorial. Then **BOOM!** That could be considered a project to add under your belt. 

#### How did YOU get out of tutorial hell?
CSS Scroll Snap
Tags: css, webdev, tutorial
Published: 2021-03-30 17:59:28

Easy CSS animation and auto snapping for carousels and more!

Part 9 of the 21 CSS tips for 2021 Series

[Subscribe To The Channel!](http://www.youtube.com/FollowAndrew?sub_confirmation=1)

{% youtube MsmvhpBXosM %}
Watch the Video Tutorial on YouTube for a visual explanation!
Show Hide Password (JS)
Tags: 100daysofcode, html, css, javascript
Published: 2021-03-30 17:26:11

Finally The Day 100 of challenge #100DaysOfCode 

Show Hide Password Using HTML5, CSS3 & JS

Demo : https://show-password.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day100

Repo of challenge 

https://github.com/saidMounaim/100DaysOfCode

Follow Me On Github

https://github.com/saidMounaim