teleren/devto huggingface dataset:
Menú hamburguesa sólo con CSS (fácil)
Tags: css, html, beginners
Published: 2020-07-26 23:14:40



¡Hola chicos! 
Una vez armada nuestra barra de navegación responsive, [ir al post](https://www.tosch.dev/blog/barra-navegacion-mobile), vamos a ver como armar un menú hamburguesa **básico** sólo con CSS.

## HTML
Arranquemos con el código básico para el menú:
```html
<nav>
  <input type="checkbox" id="menu">
  <label for="menu"> Menu </label>
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
  </ul>
</nav>
```
### A tener en cuenta:
- Asignar un **id** al input. `<input type="checkbox" ` **`id="menu"`** `>` 
- Hacer referencia al **id** del input en el **for** del label. `  <label`**` for="menu"`**`> Menu </label>`

## CSS

Ahora con CSS, vamos a dar la funcionalidad a nuestro menú:

1. Ocultamos la lista de navegación `ul:{display: none;}`
2.  Ahora lo importante, con `input:checked  ~ ul` modificamos el estilo de la lista `ul` cuando el checkbox esté seleccionado (**checked**), por lo que allí es dónde modificamos el display de la lista, logrando que se visualice cuando el checkbox está marcado.

```css
ul{
  display: none;
}

input:checked  ~ ul{
  display:block;
}
```

Con ese simple código logramos lo siguiente:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/giiju7re812xtfajzgu2.gif)

## Dando estilo
Ahora lo que queda es dar estilo a nuestro menú hamburguesa:
- Ocultamos el input.
 ```css
 input {
  display: none;
}
```
- Modificamos el label y agregamos una imágen o icono de "hamburguesa".

```html
  <label for="menu"> ☰ </label>
```

```css
label {
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid black;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  text-align: center;
  user-select: none;
}
```
- Damos estilos a los elementos de la lista.
```css
li {
  display: block;
  background: lightgrey;
  margin: 0;
  padding: 10px;
  list-style: none;
  border-bottom: 1px solid grey;
}
```

Resultado final:
{% codepen https://codepen.io/tognola/pen/JjGVZPo default-tab=css,result %}
Check the temperature of your Raspberry Pi on any OS with `pitemp`
Tags: raspberrypi, commandline, tutorial, javascript
Published: 2020-07-26 23:12:05

There's nothing funner then setting up your brand new Pi, especially if you picked up a starter kit that includes a case and a fan. A good case and fan allows you to overclock the Pi to higher speeds, allowing some pretty cool things.

If you're like, that brings some worry to table!

> What if my Pi is getting too hot and it burns my board?

Although this scenario is not probable due to the Pi's smart cooling system that will automatically throttle the CPU if it reaches a temperature of about ~85° C, it's always a good idea to test the temperature of your Pi during initial set-up. When your Pi'c CPU is throttled, it slows down and loses its ability to perform at its max—that's not something we want happening.

I'd recommend checking the temperature of your machine somewhat regularly, just to ensure new processes aren't causing your machine to throttle.

Unfortunately, if you're running an OS other than Raspbian—the Raspberry Pi's recommended/default OS—the available tooling for checking temperature is limited.

Fortunately, there's a command line utility named `pitemp` (that I built) to quickly check the temperature of your machine. It's built in JavaScript and works on *most* OS's available for the Pi (Ubuntu, Linux Arch, etc.) and on *almost all* platforms, including macOS and Windows.

https://pitemp.vercel.app/

Here's how you can use `pitemp`. It's just a single line of code.

## Usage

Requires [NodeJS](https://nodejs.org/en/).

### 1. Using `pitemp` with `npx`

The suggested usage is `npx`, because that way you'll always be running the latest version of `pitemp` without installing it. `npx` is installed by default with `npm`. You can get `npm` by installing [NodeJS](https://nodejs.org/en/).

```
npx pitemp

// pitemp is reporting every X seconds.
// Main: 62.322° C - Max: 62.322° C
```

### 2. Installing globally and running

You can install `pitemp` globally with your favorite package manager.

```
npm install -g pitemp
yarn global add pitemp
```

Then simply run `pitemp` with the command.

```
pitemp

// pitemp is reporting every X seconds.
// Main: 61.323° C - Max: 62.826° C
```

You can read the full documentation and view the flags available on the [`pitemp` NPM page](https://www.npmjs.com/package/pitemp). `pitemp` is an open source tool built in Node.js. [Drop it a star on Github!](http://github.com/al5ina5/pitemp)

Now you know how to ensure your Pi does not become deep fried. Run a stress test and see how high you can push it... with a decent fan, you should never hit 85° C or more—even if you're overclocked.

Once you're done with that, shoot me a [follow on Twitter](https://twitter.com/al5ina5). Thanks for the read!
After Vi Basics
Tags: vim, texteditor, editor
Published: 2020-07-26 22:35:53

I'm an avid user of vim. I even went as far as to try and [bring it to the browser](http://vimperator.org/vimperator). One of my co-workers noticed I used vim and they had gotten through the basics. There is a lot of good material out there like [vimcasts.org](http://vimcasts.org/). But this was an opportunity to reflect on advice I might give.

The first thing to establish is that vim operates with a grammar, count, verb, motion. I wanted to provide a short list of commands I frequently use, and I want to provide short explanation, let me know if I'm too abbreviated.

Search for word under cursor: `*`

Jump to matching bracket: `%`

Change inside quotes: `ci"`

Copy around quotes: `ya"`

The first two fall in the category 'motion' and the last two are a composition. 

Verbs -> change `c`, yank `y`, delete `d`

Adverb -> inside `i`, around `a`

Motion -> inside quotes `i"`, around quotes `a"`

Here we see that a motion is made up of that adverb and a context. These two motions will exclude or include that context.

```
"hello" i" => hello
"hello" a" => "hello"
```

The primary context I use is:

Context: quote `"`, parens `(`, word `w`

----

Do it again: `.`

Period is the repeat operation. It take your last edit operation and replays it at the new cursor location. The value here is being able to form edits which can be repeated. But even multiple edits can be repeated by recording a macro. 

Macros require being able to navigate text in a generic manner. This would mean no mouse. Macros are temporary, good for targeting the task at hand. I'm not covering enough to make these useful, but here is how to create and use. 

Record macro to letter 'q': `qq`

Replay macro for letter 'q': `@q`

----

Undo tree. This is not something I use often and it can be a pain to navigate. The undo trees keeps edit history across new edits, this happens when you undo and make edits to the file. In most editors the history before the undo is lost and you can only navigate with the new edits, vim let's you switch the undo branch being navigated.

Go to older branch: `g-`

Go to newer branch: `g+`
The complete upgrade debian guide
Tags: linux
Published: 2020-07-26 22:32:42

---
title: The complete upgrade debian guide
published: true
description: We upgrade Debian using a simple guide to go from Jessie to buster and looking at the different upgrade steps required to guide you through the process to get your Debian upgraded.
tags: linux
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/77hmf9hdb0fdj2nzpf0a.jpg
---

{% youtube BvVjO06FTV8 %}

We upgrade Debian using a simple guide to go from Jessie to buster and looking at the different upgrade steps required to guide you through the process to get your Debian upgraded.
Call for Presentations: Python Machine Learning & GeoPython 2020 Conference
Tags: python, machinelearning, geopython, event
Published: 2020-07-26 22:19:18

We are proud to announce the first **Python Machine Learning Conference 2020** - the Python conference with the primary topic "Machine Learning", together with the **5th GeoPython conference**.
The conference takes place September 21-22, 2020. Originally scheduled in May 2020. Due to the current Situation with Covid-19 we decided to switch to an **online conference**.

Most talks are during daytime European time zones, we also have some earlier talks for Asian time zones and later talks for Americas time zones - an event around the world.

The CfP is open until August 16, 2020.

Conference Webpage: http://2020.geopython.net
Submission: https://submit.geopython.net/ml2020/cfp
[Tutorial Linux] Terminal: Desinstalando programas no Linux
Tags: linux, remove, apt, braziliandevs
Published: 2020-07-26 22:01:49

Essa instrução serve para as distros Linux baseadas no Debian (Ubuntu, Mint e derivados).

## Usando o apt

```
$ sudo apt remove <nome_do_programa>
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.

- **sudo** serve para pedir permissões de administrador temporariamente.

- **apt** do inglês, *Advanced Package Tool*, em português, Ferramenta de Empacotamento Avançada; é a ferramenta que nos ajuda na instalação, atualização e desinstalação de programas, entre outras funções.

- **remove** é o comando para remover, indicando ao apt o que fazer.

- digite o nome do programa sem os sinais **< >**.

Provavelmente, após esse comando o sistema irá pedir a **senha** que você configurou no início da instalação do sistema operacional; além do pedido de confirmação da desinstalação.

![remove](https://dev-to-uploads.s3.amazonaws.com/i/1v7zj3ipq0jm86cq51bn.gif)

Esse comando remove os pacotes, mas deixa os dados de configurações. Para removê-lo por completo, incluindo as configurações, utilize:

```
$ sudo apt purge <nome_do_programa>
```

![purge](https://dev-to-uploads.s3.amazonaws.com/i/kk5jolgm4cvnm4yp31mv.gif)

## Usando o dpkg

Você também pode usar o **dpkg** para remover pacotes **.deb** que foram instalados. Assim,

```
$ sudo dpkg -r <nome_do_programa>
```

- **dpkg** do inglês, *Debian Package*, é uma ferramenta que gerencia pacotes .deb.

- **r** é o comando de remover, indicando ao dpkg o que fazer.

Para remover inclusive as configurações, digite:

```
$ sudo dpkg -P <nome_do_programa>
```

- **-P** do inglês, *purge*, para limpar.
Re-discover your inner programmer with F# in three steps
Tags: tips, fsharp, programming
Published: 2020-07-27 20:57:00

---
title: Re-discover your inner programmer with F# in three steps
published: true
date: 2020-07-27 22:00:00 UTC
tags: tips,fsharp,programming
canonical_url: https://developerschallenges.com/2020/07/27/re-discover-your-inner-programmer-with-f-in-three-steps/
---

![Re-discover your inner programmer with F# in 3 steps](https://developerschallenges.com/images/posts/2020-07-27-re-discover-your-inner-programmer-with-f-in-three-steps/hero.png)

I was introduced to F# some time before, but I finally decided to try it out on my own. Here is what got me motivated to do so!

* * *

## Zeroth step

Ok, so there is one more step then I promised, a pre-step. But this one is optional since you can’t influence it. It involves having an F# evangelist in your company or group of friends. Luckily we have [@Emmet\_Ray](https://twitter.com/Emmet_Ray), and a companywide introduction to F# happened a while back. On a few occasions we had external speakers doing workshops on this topic, or internal presentations held by the man himself. As I said this is an optional step, but that influencer in your group could be you!

## First step

A very calm introduction to F# by [@isaac\_abraham](https://twitter.com/isaac_abraham) designed not to scare you away, but rather to introduce you to some basic concepts and give you a warm welcome. Definitely worth a watch!

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/UXeFR5RQnjs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
## Second step

A super convenient and easy way to get familiar with F# concepts and syntax is through the [FSharpKoans project](https://github.com/ChrisMarinos/FSharpKoans). My friend [@pootzko](https://twitter.com/pootzko) recommended this, and we solved it in parallel.

## Third step

I printed out a [F# Cheatsheet](https://dungpa.github.io/fsharp-cheatsheet/) that is now on my desk and acts both as help but also as a reminder to play with this even more. Great web site with a tone of resources is [F# for fun and profit](https://fsharpforfunandprofit.com/), and this will be open in my browser for a while.

Finally, it is important that you start a project. Any project. I wanted to explore making a cli tool and I found [Argu](http://fsprojects.github.io/Argu/). This is where I’m at, and I look forward to using more F# in my hobby projects. Who knows, maybe one day I’ll get a chance to use it professionally as well!
Flutter Basics | Layouts
Tags: flutter, layouts, dart, framework
Published: 2020-07-26 21:37:08

One of the reasons flutter is growing so much and becoming one of the biggest development frameworks out there is because of how easy it is to generate beautiful looking layouts. With only a handful of widgets, you can create complete and functional UI for your app.

[Video Layout Tutorial](https://youtu.be/NrXQuAHf1mc)

###Scaffold & AppBar
The scaffold is the very base widget of every screen that you will have on your app. You can think of it as the base building block of your screen. In order to put widgets on the screen there has to be something to put it on. Think of it like a bulletin board. In order to stick things onto it, you need the actual board. That's the Scaffold widgets role. The AppBar is just as it sounds. It is a bar that is at the top of the page usually containing a heading for the page that you are on.

###Container
Containers are the most basic of building blocks that flutter has to offer. If you put a Container around any widget, it will not change how that widget looks at all. However, if you add in some properties that the Container provides, you can change the look of the widget completely. With Containers, you can change padding, add color, add borders, etc…
Center
Center widgets are a bit boring. It is very similar to a container, except with a lot less properties. Its' main function is just to center the content.

###Row & Column
The Row and Column widgets are what you will most likely use for the core layout of most apps. Most app development frameworks and even any frameworks that work with a UI utilize rows and columns for their layouts in some way. Just like on a graph paper or excel, you can place your widgets in the correct row and column to achieve the look that you want to get. With flutter you are able to nest the rows and columns to have more and more accuracy and control of your layout.

###ListView
ListView is pretty much a list of Row widgets stacked on top of each other. Except it has two main function that make it insanely useful:
It has scrolling enabled, so you can add as many items to that list and they will just scroll down on your screen. (It also adds padding at the edges of the ListView so it always looks nice)
It only loads the state and all the widgets elements as they become visible while you're scrolling. If you have a ListView of 1,000,000 widgets your app will behave without a single hiccup. It also destroys the states and widget elements as they go out of the view so you can scroll down to the millionth widget without any performance issues.

###Stack
Stack widget is just as it sounds. You can stack things on top of one another. Whether it's some text over an image or how instagram creates a little heart over the picture when you like it.

Those are all the basic and very powerful widgets that flutter provides for us. Make sure to look at all the properties when using them, because there is a lot more things they can do that I haven't covered.

Thanks for Reading and Stay Creative!

Follow me on Twitter: @tadaspetra
Getting Auth Token in Node JS without msal library
Tags: authentication, azure, msal
Published: 2021-02-09 16:52:30

---
title: Getting Auth Token in Node JS without msal library
published: true
date: 2020-07-26 21:15:59 UTC
tags: Authentication,Azure,msal
canonical_url: https://powermaverick.dev/2020/07/26/getting-auth-token-in-node-js-without-msal-library/
---

In my current project, we had a need to build a Node JS app that will authenticate with an App Registration client id and client secret. First thing that came into my mind was to use [msal](https://www.npmjs.com/package/@azure/msal) library. But I hit a snag due to CORS issue and there was very little I could do with the code as it was a boiler plate code and changes were limited.

So, I went to the basics of Web Api call from JavaScript to authenticate with App Registration. For this I use the `request` object and the code is as below.

```
const getAuthToken = async function() { let config = require(\_\_dirname + "/../config/config.json"); var request = require('request'); var options = { 'method': 'POST', 'url': 'https://login.microsoftonline.com/3bd27ef8-8d38-4656-86d2-5f0d90a73981/oauth2/token', 'headers': { 'Authorization': 'Basic ' + new Buffer(config.clientId + ":" + config.clientSecret).toString('base64'), 'Content-Type': 'application/x-www-form-encoded' }, form: { 'grant\_type': 'client\_credentials', 'resource': 'https://analysis.windows.net/powerbi/api' } }; return new Promise( (resolve, reject) => { request(options, function (error, response) { if (error) { reject(error); } resolve(JSON.parse(response.body)); }); } );}module.exports.getAuthenticationToken = getAuthToken;
```

You will notice that the config entries are defined in config.json file. Then we define request object and configure the options object. In this options object we define the method, url and headers needed along with the form. Because this is an authentication request, we need to supply the following headers:

`Authorization` which will be basic authentication with username and password encoded in base64.

`Content-Type` will be _application/x-www-form-encoded_

We also need to pass the body as a _form_; as highlighted in the code. If you are going to use the token retrieved for some other request then need to pass the request domain in the `resource`. Under form you should also specify `grant_type` as _client\_credentials_.

This module returns a `Promise` object by parsing the response body; as highlighted on the code.

Hope this helps.

Don’t forget to subscribe to my [Power Platform Dev Newsletter](https://www.powerplatformdevelopersweekly.com/)
The Live Coders - Intake 11th July 2020
Tags: community
Published: 2020-07-26 21:05:58

July started as a big month for applications, the team is taking a more prominent role in the application process and making that more transparent to those on the outside looking in.

So to start we have the new Applications page on The Live Coders website -> [JOIN US](https://livecoders.dev/applications) 

The second part of that is the new Nurture Program. When an applicant doesn't quite hit the minimum criteria to join the team we now accept those into the Nurture Program. This give broadcasters access to a limited subset of the Live Coders discord server but with access to all 190+ members of the team.

With that here are the new Teammates and new Nurture Program broadcasters for The Live Coders

## New Team Members

 - [DannyKampsGamez](https://twitch.tv/DannyKampsGamez) 
 - [teomewhy](https://twitch.tv/teomewhy) 
 - [sirlynixvanfrietjes](https://twitch.tv/sirlynixvanfrietjes) 
 - [arturnachodude](https://twitch.tv/arturnachodude) 
 - [RenoInMO](https://twitch.tv/RenoInMO) 
 - [kruiser8](https://twitch.tv/kruiser8)  
 - [nomadcodemist](https://twitch.tv/nomadcodemist) 
 - [kesor6](https://twitch.tv/kesor6) 
 - [paperfangames](https://twitch.tv/paperfangames) 
 - [profaheil](https://twitch.tv/profaheil) 
 - [melkeydev](https://twitch.tv/melkeydev) 
 - [ionixjunior](https://twitch.tv/ionixjunior) 
 - [irishjohngaming](https://twitch.tv/irishjohngaming) 
 - [KempsAlex](https://twitch.tv/KempsAlex) 
 - [steventhewissen](https://twitch.tv/steventhewissen)  
 - [jdotw](https://twitch.tv/jdotw) 
 - [bdougieYO](https://twitch.tv/bdougieYO) 
 - [mewtru](https://twitch.tv/mewtru) 
 - [its_jay_phillz](https://twitch.tv/its_jay_phillz)  
 - [crazy4pi314](https://twitch.tv/crazy4pi314) 
 - [grsoares](https://twitch.tv/grsoares) 
 - [erikdotdev](https://twitch.tv/erikdotdev)  
 - [whitep4nth3r](https://twitch.tv/whitep4nth3r) 
 - [XAMLLlama](https://twitch.tv/XAMLLlama) 
 - [florinpop17](https://twitch.tv/florinpop17) 

## Nurture Program

 - [jackcres](https://twitch.tv/jackcres)
 - [cookiedragon4](https://twitch.tv/cookiedragon4)
 - [coachdench](https://twitch.tv/coachdench)
 - [mrdonbrown](https://twitch.tv/mrdonbrown)
 - [freeman42x](https://twitch.tv/freeman42x)
 - [irreverentmike](https://twitch.tv/irreverentmike)
 - [dnistream](https://twitch.tv/dnistream)
 - [superdealloc](https://twitch.tv/superdealloc)
 - [jbnunn](https://twitch.tv/jbnunn)
 - [alexslotte](https://twitch.tv/alexslotte)
 - [Zer0Xeon](https://twitch.tv/Zer0Xeon)
 - [profoundrice](https://twitch.tv/profoundrice)
 - [dev_spajus](https://twitch.tv/dev_spajus)
 - [jh3yy](https://twitch.tv/jh3yy)
 - [suave_pirate](https://twitch.tv/suave_pirate)
 - [codingwithstaticflow](https://twitch.tv/codingwithstaticflow)
 - [schlauhibi](https://twitch.tv/schlauhibi)
 - [timClicks](https://twitch.tv/timClicks)
 - [jeanvaljean80](https://twitch.tv/jeanvaljean80)
 - [jodaba](https://twitch.tv/jodaba)
How do you document your side projects?
Tags: opensource, discuss, javascript, webdev
Published: 2020-07-26 20:03:45

I want to write a page with examples of use and documentation of my small side project. Who designed such pages? What did you use? Or maybe you know someone who makes very handy documentation for their projects and you learn from him? 🙂 I want to see examples of handy documentation for small projects. Thank you all and have a nice day! ❤️