teleren/devto huggingface dataset:
Learn recursion with Tower of Hanoi game
Tags: ruby, recursion
Published: 2020-05-23 21:54:57

The objective of the puzzle is to move the entire stack to another rod, obeying the following simple rules:

- Only one disk can be moved at a time.
- Each move consists of taking the upper disk from one of the stacks and placing it on top of another stack or on an empty rod.
- No larger disk may be placed on top of a smaller disk.

**hanoy.rb**

```ruby
def hanoi(number, origin, auxiliar, destination)
  unless number == 0
    hanoi(number - 1, origin, destination, auxiliar)
    puts "Moved disc from #{origin} to #{destination}"
    hanoi(number - 1, auxiliar, origin, destination)
  end
end

hanoi(4, 'A', 'B', 'C')

```

### Tower of Hanoi 

A Hanoi Tower looks like this:

- `number` (number of disks)
- `origin` (A)
- `auxiliar` (B)
- `destination` (C)

To make this example easier to understand, let's pretend our Hanoi Tower has 4 disks, and columns A, B, C.

### Our algorithm

The idea is to write a function that calls itself until the puzzle is solved.

### But how? 

First, determine when to stop the function execution. It must stop when all the disks has been moved to the column C. Our program continues executing `unless` the disks is equal to zero. Code:

 `unless number == 0`

Our next mission is to actually figure out the puzzle (moving all the disks from "A" to "C").

Second, we will have to decrement the amount of disks when calling `hanoi` and pass along the `origin`, `destination` and `auxiliar`. Code:

`hanoi(number - 1, origin, destination, auxiliar)`

Basically, we are calling the same function (`hanoi`) but using **new** arguments, allowing us to solve the puzzle.

Third, we also want to print whenever the disks are moving from one place to another. Code:

`puts "Moved disc from #{origin} to #{destination}"`

Finally, we will call `hanoi` again because we want to move the disks. Code:

`hanoi(number - 1, auxiliar, origin, destination)`

Notice, the arguments are the same but in different order, again allowing us to solve the puzzle.

## Final thoughts

I do not want you to understand the math behind the Hanoi Tower algorithm, just want you to realize that calling function `hanoi` in the same function `hanoi` is recursion.

It is important to understand that a recursive function **needs** a mechanism to stop executing, otherwise it will run forever or in the worst case it will cause errors.

Maybe you noticed our `hanoi` function did not mutated objects because it calls itself with new arguments rather than using existing objects.

 ![Recursion](https://dev-to-uploads.s3.amazonaws.com/i/xvwgezs7h99yz82mrbqn.jpeg)
FMDB
Tags: octograd2020, githubsdp, showdev, 2020devgrad
Published: 2020-05-23 22:11:45


## My Final Project
An android app shows trending movies on imdb.

## Demo Link
https://www.mediafire.com/file/l1deg5vepvpeu9j/FMdb.apk/file

## Link to Code
https://github.com/FaridSharaf/FMDB

## How I built it (what's the stack? did I run into issues or discover something new along the way?)
I used flutter, SQLite and shared preferences with the help of IMDB API to fetch the data.

## Additional Thoughts / Feelings / Stories
It was the graduation project for a summer training, and it was the first time to deal with json and databases. I really loved how i styled this app.

[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
Understand Github
Tags: github, git
Published: 2020-05-23 22:10:33

---
title: Understand Github
published: true
description: 
tags: #GitHub #Git
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/sli9md71squdebdmtgx6.jpg
---

Git is version control, where we can check in the code and look back on the history of the code how it's written.

We have to understand how GitHub Workflow works.

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

1. Branching
2. Commits
3. Pull Request
4. Collaborate
5. Merge

GitHub Workflow - for open source :
1. Fork: Exact copy of repository under your account
2. Why: Permission access
3. How: Create fork, GitHub Flow, Open pull request

Cloning Repositories:
1. What is work locally 
2. Cloning - local vs remote

Cloning repository means we have a remote copy of the repository on the local machine, we can change our code in offline mode. Once all changes did we can make a commit to the remote repository.

Git Commands:
```
Git clone - get the copy of the source in local 
Git pull - Sync local repository 
Git branch - to create a branch
Git checkout - to checkout to a specific branch
Git status - to check what going on
Git add - to add in a repository
Git commit - to commit
Git push - finally push on the remote repository
```
Docker containers quickstart
Tags: docker, containers, resources, sample
Published: 2020-05-23 22:02:57

---
title: Docker containers quickstart
published: true
description: Example code and resources for learning about Docker
tags: docker,containers,resources,sample
---


## Docker intro video

I felt inspired by watching a YouTube talk about Docker recently - I liked hearing the origins of Docker, seeing a couple ways to spin up containers and also the humor of the speaker. I highly recommend it.

- https://www.youtube.com/watch?v=eGz9DS-aIeY


## New project

In fact I decided to take my learnings from that video and build a new Github repo around it, to practice the commands and build up a reference for when I get stuck.

- https://github.com/MichaelCurrin/docker-quickstart

This assumes some knowledge of Docker and so focuses on providing commands to manage containers either built just from remote images (no `Dockerfile` needed) or from a local `Dockerfile` supplied in the project.

### Extracts

#### Build without a `Dockerfile`

```sh
docker pull centos
docker run -d -t --name my-container centos
```

From [Basic](https://github.com/MichaelCurrin/docker-quickstart/blob/master/basic.md) guide.

#### Build with `Dockerfile`

`Dockerfile` contents:

```sh
FROM ubuntu

RUN apt update && \
    apt install -q -y git

CMD echo "This is a test." | wc -
```

Command:

```sh
docker build .
```

From [Generic example](https://github.com/MichaelCurrin/docker-quickstart/tree/master/examples/generic).

## Resources

If you need more links on Docker then check out this list of resources.

- [Docker](https://github.com/MichaelCurrin/learn-to-code/blob/master/en/topics/containers/docker.md) in [MichaelCurrin/learn-to-code](https://github.com/MichaelCurrin/learn-to-code/) repo.

I've also been working on a cheatsheet recently for running `docker`, `docker-compose` and `kubectl` (Kubernetes control).

- [Containers](https://github.com/MichaelCurrin/cheatsheets/tree/master/cheatsheets/containers) in [MichaelCurrin/cheatsheets](https://github.com/MichaelCurrin/cheatsheets) repo.


## Container boilerplate post

I came across this post on on dev.to which I'd like to pass on. 

- [Dockerfile Templates For All Programming languages](https://dev.to/gauthamp10/dockerfile-templates-for-all-programming-languages-a6l)
The 2019 Web Almanac is now available as a free ebook!
Tags: webdev, webalmanac, free
Published: 2020-05-23 22:02:41

---
title: The 2019 Web Almanac is now available as a free ebook!
published: true
description: Download the 421-page 2019 Web Almanac
tags: webdev, webalmanac, free
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/z34u9y4sv5t3q6ly0m9o.png
---

Last year [29](https://almanac.httparchive.org/en/2019/contributors?teams=authors) subject matter experts from the web community came together in a massive effort to document the state of the web, called the [Web Almanac](https://almanac.httparchive.org). They wrote about 20 topics in the areas of page content, user experience, content publishing, and distribution. Chapters include JavaScript, CSS, Performance, SEO, Ecommerce, CMS, CDN, HTTP/2, and many more.

![Screenshot of the Caching chapter in the 2019 Web Almanac ebook](https://dev-to-uploads.s3.amazonaws.com/i/rufd2e2iimo2505ltk0v.jpg)

Now you can [download an ebook](https://almanac.httparchive.org/static/pdfs/web_almanac_2019_en.pdf) of the entire 2019 edition (for free). It's 421 pages and 18 MB of solid research and analysis from trusted web experts packaged up for ergonomic e-reading. We've also translated the entire contents into [Japanese](https://almanac.httparchive.org/static/pdfs/web_almanac_2019_ja.pdf). Or if you'd prefer to browse the content on the web, you can always visit [almanac.httparchive.org](https://almanac.httparchive.org/en/2019/).

The mission of the Web Almanac project is to document and raise awareness of the state of the web using the huge amounts of data from millions of websites in the [HTTP Archive](https://httparchive.org). This project is invaluable to understanding how the web is trending and the areas in which we need to be doing better. I hope you check it out!
Geeky Codes:💻 An Opensource Mini Developer Blogging Platform
Tags: opensource, node
Published: 2020-05-23 21:41:28

[Instructions]: # (To submit to the Grant For The Web x DEV Hackathon, please fill out all sections.)


## What I built
I  built a mini developer blogging platform similar to WordPress but with lesser features and better security. It allows users to login/register to create articles which are posted on the blog homepage. Some of its features includes a commenting system that works anonymously,author profiles, uploading of files, creation,deletion and updating of articles created by a user, a interactive user dashboard and others

### Submission Category: 
Foundational Technology
[Note]: # (Foundational Technology, Creative Catalyst, or Exciting Experiments)


## Demo
 https://geekyblog-69d8c-7cc56.web.beta.kintohub.com/

## Link to Code
https://github.com/geekyahmed/geekycodes
[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)


## How I built it 
I built this using node.js and express to handle the server process, MongoDB for database and handlebars for the template engine.
The project was made using an MVC project architecture which includes the controllers,middlewares,config,views and models.

[Note]: # (For example, what's the stack? did you run into issues or discover something new along the way? etc!)
I am into backend development with Node.js.Since I have been working on projects with node js for quite a long time,I decided to test my level of node js and build an open source application that allows users to create articles.
Sadly,I faced a lot of issues and had to go to stack over flow especially when the admin routes keep flashing with the users routes

## Additional Resources/Info 


[Reminder]: # (We hope you consider expanding your submission into a full-on application for the Grant for the Web CFP, due on June 12.)
Pub/Sub messaging
Tags: ptbr, pattern, pubsub
Published: 2020-05-23 21:39:46

Publish/subscribe messaging ou **pub/sub** messaging, é uma forma de comunicação assíncrona service-to-service, utilizada em arquiteturas serverless e de micro-serviços.

O **pub/sub** permite uma comunicação segura e altamente disponível entre aplicativos criados de modo independente.

Em um modelo **pub/sub**, qualquer mensagem publicada para um tópico é imediatamente recebida por todos os subscribers deste tópico.

![pub-sub](https://d1.awsstatic.com/product-marketing/Messaging/sns_img_topic.e024462ec88e79ed63d690a2eed6e050e33fb36f.png)

## Conceitos
**Mensagem:** é a combinação de dados e atributos (opcionais) que um editor envia a um tópico e que é entregue aos assinantes.

**Tópico:** É um recurso nomeado para onde são enviadas as mensagens.

**Publish:** É quem *envia* a mensagem para um tópico.

**Subscribe:** É aquele que esta assinando determinada fila, e *recebe* as mensagens.

## Na prática
Como exemplo criei um projeto, onde, tenho seis subscribers, que estão desenvolvidos em diferentes linguagens, Python, Go, Node, PHP. O publisher foi feito com Python.

Os subscribers estão "assinados" ao tópico *topic_create_file*.

A responsabilidade de cada subscriber é converter uma mensagem em JSON, para um outro tipo de arquivo, csv, html, xml, xls.

{% github mayronceccon/pub-sub-example %}

## Referências
https://cloud.google.com/pubsub/docs/overview?hl=pt-br
https://aws.amazon.com/pub-sub-messaging/
{% youtube -KH5w-cUdhw %}
Utilizando MergeAdapter no Android
Tags: android, kotlin
Published: 2020-05-23 21:37:18

##Introdução 

MergeAdapter é uma nova feature introduzida no [recyclerview:1.2.0-alpha02](https://developer.android.com/jetpack/androidx/releases/recyclerview), habilitando a possibilidade de agrupar adapters e os exibir sequencialmente utilizando o mesmo `RecyclerView`.


##Integração

Para fazer o uso do [Merge Adapter] (https://developer.android.com/reference/androidx/recyclerview/widget/MergeAdapter) é necessário adicionar a dependência no `build.gradle` do app ou módulo que irá fazer a utilização:
```dependencies {
      implementation 'androidx.recyclerview:recyclerview:1.2.0-alpha03'
}```  *até o momento deste texto, esta era a versão mais recente da biblioteca.*

##Hands On

Será utilizado o [Valorant](https://beta.playvalorant.com/pt-br/), jogo recém lançado pela [Riot Games](https://www.riotgames.com/en), como exemplo.

Neste exemplo, serão utilizados: um layout de header, uma lista de personagens e um banner, assim criando um adapter para cada view: `HeaderAdapter`, `PersonageAdapter` e `BannerAdapter`.

Será necessário fazer o merge dos 3 adapters, utilizando o construtor do [Merge Adapter] (https://developer.android.com/reference/androidx/recyclerview/widget/MergeAdapter) e passando sua instância para o adapter do `recyclerview`.

```val headerAdapter: HeaderAdapter= …
val personageAdapter: PersonageAdapter= …
val bannerAdapter: BannerAdapter= …
val mergeAdapter = MergeAdapter(headerAdapter, personageAdapter, 
     footerAdapter)```

As views do `recyclerview`, serão renderizadas de acordo com a ordem dos adapters passados no construtor do [Merge Adapter] .(https://developer.android.com/reference/androidx/recyclerview/widget/MergeAdapter)

`recyclerView.adapter = mergeAdapter`

Obtendo o seguinte resultado: 
![RecyclerView Completo](https://dev-to-uploads.s3.amazonaws.com/i/pisbz5l2qa5wdcujsvjc.png)


Toda a implementação dos adapters, e dados utilizados estão disponíveis em: 

{% github 1jGabriel/Valorant-Merge-Adapter no-readme %}


##Dica ao utilizar [Merge Adapter] (https://developer.android.com/reference/androidx/recyclerview/widget/MergeAdapter)


É recomendável também utilizar que cada adapter faça a extensão de `ListAdapters` para evitar chamar `RecyclerView.Adapter.notifyDataSetChanged()` assim ao passar novos dados para um adapter só é necessário chamar `adapter.submitList(list)`
Random 3D Orbit around Central Planet
Tags: codepen, css, javascript
Published: 2020-05-23 21:23:54

<p>Randomly sized mini-planets orbiting around a central planet/sun. You can increase and decrease the pull. Definitely not accurate physics-wise as 0% gravity actually does have some pull... and probably lots of other things wrong too...</p>

<p>But, it's fun to watch!</p>

{% codepen https://codepen.io/jeryj/pen/GGQVYo %}
ExecCommand obsolete can't find an alternative(confused)
Tags: help, discuss, javascript
Published: 2020-05-23 20:58:49

Hi everyone,

So execCommand is obsolete right now, MDN doesn't offer an alternative.

MDN link: [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand)

Can someone point me at what the alternative is?

Thanks
I do not consent you cookie consent dialog
Tags: showdev, extension, cookies, javascript
Published: 2020-05-23 20:45:49

People surf hundreds of websites searching information, reading news and more every day.

![A hundred tabs](https://dev-to-uploads.s3.amazonaws.com/i/z78w8h5nmxeslmmz1bts.jpg)

But I am having a problem that getting worse my surf web experience day after day. The name of this problem is cookie consent dialog. They stop me a few minutes reading, accepting and declining permissions 😅.

I am tired of losing my time, that is why I am introducing my new browser extension made on vanilla JavaScript that remove those irritating cookie consent dialogs automatically 🤓.

![Drake Do Not Consent Meme](https://dev-to-uploads.s3.amazonaws.com/i/dwoj0t60k3xmzp6gohk6.JPG)

Nowadays, it supports thousands of websites but the Web is huge... and there is where you can enter giving feedback of websites not supported yet to add support in the next weekly update 🙌🏼.

In short, this extension is blazing fast ⚡, extremely light (less than 200KB) 🍃, no strange permissions required 🔍 and the most important thing... it's free and open-source 😍!

Now available in [Chrome Web Store](https://chrome.google.com/webstore/detail/djcbfpkdhdkaflcigibkbpboflaplabg), [Edge Add-ons](https://microsoftedge.microsoft.com/addons/detail/hbogodfciblakeneadpcolhmfckmjcii) and [Firefox Add-ons](https://addons.mozilla.org/firefox/addon/cookie-dialog-monster/) 🔥. You can also contribute to this project [here](https://github.com/wanhose/cookie-dialog-monster) 🧪.
Keep your SSH sessions alive until you don't want to
Tags: linux, openssh, programming, remote
Published: 2020-05-23 20:43:17

---
title: Keep your SSH sessions alive until you don't want to
published: true
tags: [linux, openssh, programming, remote]
canonical_url: https://abhnv.dev/blog/2020-05-24-ssh-keep-alive/
---
I do almost all of my work remotely on a server. I as well as my colleagues have a ton of SSH sessions open at all times. And I have seen them getting frustrated when they take a break and come back to see the terminal tab not responding.

This is very easy to fix though. We just have to tell the SSH daemon at the server or the client in our system to send packets at a specific interval to avoid that.

## Configuration on the server

In the config of OpenSSH server in `/etc/ssh/sshd_config`, add the following:

```
ClientAliveInterval 300
ClientAliveCountMax 3
```

It will make sure that the OpenSSH server keeps the all the connections alive with no effort on the part of the clients.

## Configuration on the client

Add the following lines to any of the SSH configs in your system:

```
Host *
    ServerAliveInterval 300
    ServerAliveCountMax 3
```

You should add this to `/etc/ssh/ssh_config` for system-wide change or `~/.ssh/config` to apply just for the current user.

### Per-Host Configuration

You can replace `*` in `Host *` with a hostname to only apply the configuration for connections to that specific server. e.g.

```
Host *abhnv.dev
    ServerAliveInterval 300
    ServerAliveCountMax 3
```

## Explanation for the settings

`ServerAliveInterval 300` or `ClientAliveInterval 300` means that the server or the client will send a null packet to the other end every 300 seconds.

`ServerAliveCountMax 3` or `ClientAliveCountMax 3` means that the server or the client will try 3 times before giving up.

*Originally posted at https://abhnv.dev/blog/2020-05-24-ssh-keep-alive/*
em VS rem
Tags: html, css
Published: 2020-05-23 20:23:26

In the world of CSS and sizing, there  are several [units](https://flaviocopes.com/css-units/) that can be used either for your font sizing, margin, padding and so on. 

Two commonly used, but slightly confusing units are the **rem** and **em**. Both units are [relative](https://thecssworkshop.com/lessons/relative-units) CSS units (they depend on something else for their sizing). Now how are these two different???

## em
This unit inherits the font size of its nearest parent element having a font-size. I'll be going with a visual representation here to explain how the inheritance works.
 
![inheritance in em](https://res.cloudinary.com/ibnabubakre/image/upload/v1590261911/em.png)

In the image above, the root element has a font size of 36px. The body element which is a child of the root element has a font size of 0.8em, which is equivalent to 80% of the font-size of the root element i.e (0.8 * 36px = 28.8), and it goes on and on. If the immediate parent does not have a set font size, it looks for the parent element having a defined font size.

## rem
This unit inherits the font size of the root element. You can think of it as the root **em**. In this case, rather than inheriting the font size of its immediate element, it inherits that of the html element.

![inheritance in rem](https://res.cloudinary.com/ibnabubakre/image/upload/v1590263188/rem.png)

Here, no matter how deeply nested the element is, it always finds its way home 😀😀....in this case, the root element.

Here's a codepen demo showing em and rem in action.
{% codepen https://codepen.io/abdulqudus001/pen/rNORJYo %}

## Conclusion

This a just a look into em and rem, which one you choose is entirely up to you. With **em** you can have different font sizes for different sections. With **rem** you have a central controller that you can use to determine sizes of other elements in your html.
100 Days of SwiftUI — Day 3
Tags: 100daysofswiftui
Published: 2020-05-23 20:33:41

---
title: 100 Days of SwiftUI — Day 3
published: true
date: 2020-05-23 20:33:10 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-3/
---

I just finished [the third day](https://www.hackingwithswift.com/100/swiftui/3). For the first time, I watched the short videos instead of reading the text like on the first two days. Today was about operators and conditions, no real challenge, just more Swift basics I should already know. Nevertheless, I made some mistakes in the test — great idea, by the way! — because I didn't read the questions carefully enough.

Thank you Paul, so far it has been entertaining and I'm looking forward to day 4.

<!--kg-card-end: markdown-->
If you are looking for job, HackerRank offer industry-vetted skills directory
Tags: watercooler, beginners, programming
Published: 2020-05-23 19:58:28

On May 21 HackerRank published a detailed library of in-demand technical skills. This directory came out with the objective to help in the creation of standardized interview process from the technical point of view. So after the required skills and competences being defined you as developer trying to get a job or as interviewer can be in the same page during the evaluation.

For every skills there are defined 3 different categories Basic, Intermediate and Advanced,  and is detailed the require knowledge for every category. Among the skills we can find **AWS, Node.js, Django, Docker, CSS, React** and many more. Also some skills have their own subset of question, which is be very helpful in my opinion for newcomers that sometime struggling regarding to what they should learn, also this questions can help more experienced developers in how they should prepare before a job interview.

So if you are a searching for a job, are in charge of the interview process at some company or just simply want know what you should learn about some specific technology check this directory.

[HackerRank Skills Directory](https://www.hackerrank.com/skills-directory?utm_medium=content&utm_source=blog&utm_campaign=skillsdirectory)