teleren/devto huggingface dataset:
Run Jenkins In Docker Using Docker Compose With Persistent Volumes
Published: 2021-03-17 19:36:31

Jenkins on Docker Step By Step and Docker Compose File Includes

Hi There,
In this article, I will explain how to spin up the Jenkins server on Docker with persistent storage. I’ll discuss each and every step you may need to know. All the required “YAML” manifests are available on the website.
Please visit my website to read the complete article…
Visit the Link Below…
https://digitalavenue.dev/Run-Jenkins-On-Docker-Compose/
How To Setup Jenkins On Ubuntu 20.04LTS
Tags: install, jenkins, ubuntu, build
Published: 2021-03-17 19:31:24

Automate Application Build and Deployments Using Jenkins CI/CD Pipelines

Hey There,
In this tutorial, I will demonstrate to you how to spin up Jenkins on Ubuntu 20.04LTS step by step. To read the complete article visit link below.
Visit The Link Below…
https://digitalavenue.dev/Install-Jenkins-Ubuntu/
Build Docker Images With Docker Containers as Jenkins Build Slaves
Tags: docker, jenkins, build, slaves
Published: 2021-03-17 19:29:14

Dynamically Provision ephemeral Docker Containers as Jenkins Agent Node

Hi There,
I have written a step by step to demonstrate of how to build images using Jenkins master-slave architecture. Please visit the link below to read the complete article. 

Visit my website to read the complete article…

https://digitalavenue.dev/Build-Docker-Images-Jenkins/
Simple Configuration of NGINX on Mac
Tags: nginx, webdev, codenewbie, html
Published: 2021-03-17 19:29:00

This is the 2nd part in the series of NGINX on Mac. You can visit the 1st part  [here](https://www.daveops.co.in/post/installing-nginx-on-mac-part-1). In this part we are going to understand the configuration file of Nginx and tweak as per our requirements.


### Configuration file

Your Nginx configuration file will be located at
*/usr/local/etc/nginx/nginx.conf*. You can fire ```nginx -t``` 
to run a test configuration just to verify the location. Open the nginx.conf file to see it's contents. I usually use Microsoft's VS Code to edit any text files, so I ran the below command to open the file in VS Code.  You can use any text editor you want.

```
code /usr/local/etc/nginx.conf
``` 

Once open you will see a the config file already has content in it most of which is commented out. You can clear everything so that we can take one step at a time. Run ```nginx -t``` to test the configuration file we just cleared out. It will give an error saying ```no "events" section in configuration``` which simply means there is no events context. Add the events context as follows:

```
events {
    
}
```

The events context helps you with configuration of the server like how many worker connections can be open at the same time and how polling happens among them. 

Now when you run ```nginx -t``` you will not get any error but when you open  [http://127.0.0.1:8080](http://127.0.0.1:8080) you will be faced with ```This site can’t be reached``` error since we have not set our server locations yet. Time to do that! 

Below your events context add another context with name *http*. Inside http context add context with name *server*. Finally, inside server context add context named *location*. It should look like below.

```
events {
}

http {
    server {
        # We are configuring for the / location
        location / {

        }
    }    
}
```

We have created a skeleton inside which we will now put some flesh and bones. Add a *root* directive inside the location context with a path pointing to your html directory. For demo purposes I have created a *www* folder on my Desktop. You can place your folder where ever you like. In the folder I have created an index.html with content ```<h1>HELLO WORLD</h1>```  Here is the overall config file

```
events {
}

http {
    server {
        # listen on the port 8080
        listen 8080;

        # When 127.0.0.1:8080 is visited, serve content from www on Desktop
        location / {
            root /Users/arjav/Desktop/www;
        }
    }    
}
```

That's it!!! This is the simplest configuration you can have in nginx. From your terminal run ```nginx -s reload``` to reload nginx and visit [http://127.0.0.1:8080](http://127.0.0.1:8080) in your browser and you will see a nice big HELLO WORLD. Press Cmd+Shift+R to hard refresh your browser in case you are seeing some cached content.

Next ->  [Configure self-signed SSL](https://www.daveops.co.in/post/self-signed-ssl-nginx-on-mac-part-3).
Building Your Mouseless Development Environment
Tags: showdev, productivity, tech, linux
Published: 2021-03-17 19:20:47

---
title: Building Your Mouseless Development Environment
published: true
tags: #showdev #productivity #tech #linux
cover_image: https://themouseless.dev/images/tools_mouseless.png
---

One and a half year ago, I was wondering: would anybody be interested by a book describing how to build a system where the Linux shell would be the most important tool, from an empty hard disk to a complete development environment? Would anybody like some guidance to build their first "Mouseless Development Environment"?

Many were indeed interested by the idea. But I was working full time and I also knew I wanted to travel, so I put the project on hold. 

After some good old burnout due to my job, I began to travel in Asia in January 2020. And then... you know what's coming.

Covid hit. I had to come back in Europe without any flat (I was subleasing it for 6 months). With difficulties and luck, I ended up with my girlfriend in a temporary place. I didn't have any job, only the computer I was traveling with  and some clothes.

What a lovely occasion to write a book.

I want to write a book since I'm 10. And now... my first book is out for more than one month already! I'm so happy to write that, you have no idea. 

Its lengthy name: *Building Your Mouseless Development Environment*, powered by amazing tools like Arch Linux, i3, Zsh, the Almighty tmux of course, and Neovim.

I sold already **317 books** and the craziest part: nobody asked for a refund! I had only positive feedback.

[![building your mouseless development environment](https://themouseless.dev/images/small_cover.webp)](https://themouseless.dev)

## Why would you be interested by such a book?

Switching your hands between the keyboard and the mouse takes cognitive energy. It's like multitasking: it's tiring and ineffective. I've written this book to give away everything I know for your hands to stay on the keyboard when you work with plain text.

The cherry of the cake: you might learn two or three things about Linux-based systems, especially if you don't use the shell often.

Here's the result:

* The [book's page](https://themouseless.dev/).
* A [sample of the book](https://matthieucneude.com/building_mouseless_environment_sample.pdf) with the whole table of content.
* A [quick video](https://www.youtube.com/watch?v=67lbLKTm91U) explaining a bit the Mouseless Development Environment we build throughout the book. If you don't want to watch everything, you can jump to the chapter you want.
* The ["behind the scenes"](https://www.youtube.com/watch?v=Tm5sv8_XWmI): what tools I used to write this book.
Uso de Promises
Tags: promises, javascript
Published: 2021-03-17 19:20:04

Na programação assíncrona um recurso bastante utilizado é o de Promises, já que sempre queremos que nossas operações e nosso código rodem o mais rápido possível,
assim um recurso que nos permite paralelizar o máximo de ações é extremamente útil.

A estrutura de uma Promise é a seguinte:
```
// Criando uma promise
const p = new Promise((resolve, reject) => {
  try {
    resolve(funcaoX())
  } catch (e) {
    reject(e)
  }
})
                      
// Executando uma promise
p
  .then((parametros) => /* sucesso */)
  .catch((erro) => /* erro */)

// Tratando erros e sucessos no then
p
  .then(resposta => { /* tratar resposta */ }, erro => { /* tratar erro */ })
```

Nesse artigo citarei algumas funcionalidades de Promises quando existe a necessidade de executar mais de uma. 

**Promise.race**: _executa a mais rápida_ 
Nessa funcionalidade todas as promises iniciam a execução ao mesmo tempo, mas apenas a primeira a ser resolvida tem seu valor retornado.
Essa funcionalidade permite que sejam utilizados mais de uma fonte para a informação buscada e assim ter a mais rápida do momento. 

**Promise.all**: _executa todas_
Nessa funcionalidade todas as promises iniciam a execução ao mesmo tempo e vão sendo resolvidas.
O problema dessa funcionalidade é que se uma das promises for rejeitada todas são rejeitadas. Essa funcionalidade pode ser usada quando existem várias consultas a APIs diferentes a serem feitas para uma mesma tela e todas as informações precisam ser mostradas.

**Promise.allsettled**: _executa todas, mesmo que falhe e retorna a informação de cada uma se falhou ou não_ 

Assim como Promise.all, nessa funcionalidade todas as promises iniciam a execução ao mesmo tempo e vão sendo resolvidas.
Mas se uma das promises for rejeitada as outras ainda são resolvidas. Essa funcionalidade pode ser usada quando existem várias consultas a APIs diferentes a serem feitas para uma mesma tela, mas para componentes diferentes. Por exemplo, um dashboard. Assim, se uma das informações não for trazida, as outras ainda podem ser apresentadas.

_Mais informações sobre Promises podem ser encontradas em:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise_
The Maker Show: Remote controlled Robot Arms with Raspberry Pi, .NET, Azure, Blazor and SignalR
Tags: azure, blazor, signalr, dotnet
Published: 2021-03-17 19:04:59

The Maker Show is series of monthly one hour show for developers hosted by [Sherry List](https://twitter.com/sherrrylst) and [Goran Vuksic](https://twitter.com/gvuksic). On each episode we highlight tools and projects from the community that can inspire new creations and inventions.

[Pete Gallagher](https://www.linkedin.com/in/pjgcreations/) is a Freelance IT Consultant, Microsoft Certified Trainer and Azure MVP, Pluralsight Author and owner of PJG Creations Ltd. He has been creating software for decades and is happy programming in just about any language. Pete has been involved in a wide span of tech in his many years of industry experience, including IoT Projects for; Royal Mail Stamp Vending before there was such a thing as modern IoT, Building Monitoring Systems, Internet Connected Self Service Kiosks and much more. He has presented all over the UK on a variety of IoT Topics, including Azure IoT Hubs, Amazon Alexa, Particle Photon, Arduino etc etc. Pete also organises Notts IoT, co-organises Dot Net Notts, Notts Dev Workshop and sits on the Board of LATi, a Loughborough based Advanced Technology networking group. He is also an active STEM Ambassador and is passionate about making STEM subjects accessible to all ages. Pete particularly likes gadgets of all kinds!
In this super interesting episode of Maker Show, Pete took us through everything needed in order to build a robot arm with a Raspberry Pi, .NET 5 a Blazor App and SignalR.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6szlspfs8nz2okzwrzy.jpg)

Pete started by talking about .NET 5 and how easy it is to install .NET 5. Then we had a look through the various circuits and he spun up a console application to explore how we can control the GPIO on the Pi. We have seen how the Servos are wired up and how to get the code in place to start moving our Raspberry pi based Robot Arm. Finally we saw a simple Blazor and SignalR app that controls the robot remotely! This talk appeals to all knowledge levels and anyone interested in getting into STEM, Electronics and Robotics.

Feel free to check out recording of the show:

{% youtube UiO95BYIVR4 %}

Presentation from the session can be found on [SlideShare](https://www.slideshare.net/PGallagher69/building-a-raspberry-pi-robot-arm-with-net-5-blazor-and-signalr).

Code repository is on the [GitHub](https://github.com/pjgpetecodes/rpirobot).

Check this post to discover how to [Connect Raspberry Pi online simulator to Azure IoT Hub (Node.js)](https://docs.microsoft.com/en-us/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started/?ocid=AID3027289)

Follow us on our [ForDevs Twitter](https://twitter.com/fordevs_) account if you would like to be notified when our next show will be announced. You can also join our [Meetup group](https://www.meetup.com/ForDevs) and subscribe to our [Youtube channel](https://www.youtube.com/channel/UCedB8U57bDW8WqH0_eQ4jag).
JavaScript to ReScript Presentation
Tags: rescript, javascript, functional
Published: 2021-03-17 19:03:14

---
title: JavaScript to ReScript Presentation
published: true
description: 
tags: rescript,javascript,functionalprogramming
//cover_image: https://direct_url_to_image.jpg
---

{% youtube dFHj1d9FG8M %}

- [Slides](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbXExZDA1elVOeEs3UDA1Q0lMUDYxM3VsZWh0d3xBQ3Jtc0tsV2habTl1dXQ4bFlYTWF0dXg3MFZ5NDE1SThjTS1Qc1Y1SHhVRXh4Q1NhaEF6VkVpLWNjcktlZVdXMGV5RkhlbmRQYUlqRTljS3dlWFJSNzZfOTdqZEFFQTNBRExtcTNRNFpWYVlRX0JWUGRua19lVQ&q=https%3A%2F%2Fdocs.google.com%2Fpresentation%2Fd%2F1HotonBEDXS95wOFKZJQ4Hg640UaUhD5-9QlqxfIw2j4%2Fedit%3Fusp%3Dsharing)
- [ReScript Docs](https://rescript-lang.org/)
- [Maximizing Developer Effectiveness](https://martinfowler.com/articles/developer-effectiveness.html)
- [The Modern Java Platform - 2021 Edition](https://jamesward.com/2021/03/16/the-modern-java-platform-2021-edition/)
Eleventh-week web dev
Tags: beginners, programming, webdev
Published: 2021-03-17 19:00:08

Hi Everyone!! It has been 11 weeks since started doing web development. This week I have worked on more small projects as well as working on a big project that still needs to complete.

1)Form-wave-animation-with-simple-html-css-and-Javascript
https://github.com/Gauravrandheer/Form-wave-animation-with-simple-html-css-and-Javascript

2)EventKeycode-with-simple-html-CSS-and-Javascript
https://github.com/Gauravrandheer/EventKeycode-with-simple-html-CSS-and-Javascript

3)Soundboard-with-simple-HTML-CSS-and-Javascript
https://github.com/Gauravrandheer/Soundboard-with-simple-HTML-CSS-and-Javascript

4)FAQ-collapse-with-simple-HTML-CSS-and-Javascript
https://github.com/Gauravrandheer/FAQ-collapse-with-simple-HTML-CSS-and-Javascript
Welcome Thread - v116
Tags: welcome
Published: 2021-03-17 18:50:01

---
title: Welcome Thread - v116
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Dogs saying "Hi, Friend"](https://media.giphy.com/media/cnhihejresqSAcHYww/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Laravel Router
Tags: laravel, php, junior, spanish
Published: 2021-03-17 18:37:36

Hola, en este post les vengo a mostrar como usar las rutas con Laravel, que tiene un sistema de rutas bastante intuitivo y manejable.

Vamos a comenzar con lo básico:

Llamando a un controlador para manejar la petición:

```php
Route::get("/home", [App\Http\Controllers\PanelController::class, 'home']);
```
Parámetros requeridos:

```php
Route::get('/blog/post/{id}', function() {
    return 'Bienvenido al post'
});
```

Parámetros que pueden ser nulos:

```php
Route::get('/blog/post/{id}', function($id = null) {
    return $id;
});
```

Grupo de rutas: nos sirve para agrupar rutas y facilitar la visualización del código, como también para escribir menos código, ya que a un mismo grupo de rutas le podemos pasar por ejemplo un nombre, un prefijo o un middleware que vayan a usar todas en común:

Con Prefix: 

```php
Route::group(['prefix' => 'administrador'], function () {
    Route::get('/posteos', function ()    {
        return 'Ruta completa /administrador/posteos';
    });

    Route::get('/ver/usuarios', function () {
        return 'Ruta completa /administrador/ver/usuarios';
    });
});
```

Con Middleware:

```php
Route::group(['middleware' => 'auth'], function () {
    Route::get('/', function ()    {
        return 'Solo logueados';
    });

    Route::get('user/profile', function () {
        return 'Solo logueados';
    });
});
```


Con Namespace podemos especificar el namespace sobre donde queremos trabajar, esto es por ejemplo  para no tener que especificar la ruta completa del controlador cada vez que creamos una ruta, entonces pasaríamos de esto:
```php
Route::get("/panel", [App\Http\Controllers\PanelController::class, 'index']);
```

A lo siguiente:


```php
Route::namespace("App\Http\Controllers")->group(function () {
    Route::get("/panel2prueba", "PanelController@index");
});
```
I'm giving away for free 1 year of coding tutorials
Tags: javascript, react, beginners, css
Published: 2021-03-17 18:36:29

---
title: I'm giving away for free 1 year of coding tutorials
published: true
description: 
tags: JavaScript, React, Beginners, CSS
//cover_image: https://direct_url_to_image.jpg
---

Hello everybody!

You know, one of the platforms I've always loved the most is Codeacademy.
​
It's just such a complete learning environment.

You get coding tutorials and quizzes. You get to build real-world projects and get peer support. Plus, you also get access to their amazing community of passionate developers just like you.
​
And all of this is included in their Pro plan, which I'm giving away for free!

In fact, I've just created my first giveaway!

One lucky person (might be you), will get the chance of winning a free full-year subscription to Codeacademy Pro! (over 200$ worth of value!)
​
That's it, one full year where you will have your whole learning process ready for you.
​
What you waiting for before joining??
​
You can find the link to participate -> [here](https://kingsumo.com/g/zbjwow/win-1-year-of-free-coding-tutorials-with-a-codeacademy-pro-subscription).

​

P.S: if you really want to skyrocket your chances of winning, all you need to do is simply share the giveaway. After you will subscribe to it, you will see a comfortable menu where you can perform some actions to increase your entries (possibilities of win).
​​
Can't wait to discover who the winner will be!
Desas game (tic-tac-toe)
Tags: python, game, tictactoe, beginners
Published: 2021-03-17 18:19:08

Tic tac toe game written in python.

This is a project – a part of codecademy course.
In examples i got inspired by list of possible project ideas, and one of them was "tic-tac-toe" game. Some parts in code are in non-English variable and function names (only one function in this code :D), so maybe a little hard to understand...
This is very simple design, a little walkthrough listed below:
1) launch code in terminal (or cmd)
2) it asks for each players name
3) the game starts
4) in each turn program shows, which players turn it currently is
5) then asks for x and y coordinates, to put your symbol in the corresponding slot in the 3x3 grid
6) currently game is not updated, so it lasts until all 9 slots are full, even if somebody wins before all the slots are filled

link to github: https://github.com/lampnis/desas_spele

Enjoy!
Rendering multiple icons in AG Grid cell
Tags: angular, aggrid, fontawesome, webdev
Published: 2021-03-17 18:14:38

## End result 🥳

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzd6qhucsi5kjv2c876p.PNG)

## Setup
I've tried to strip out any irrelevant bits. Also to note I am using the free Font Awesome icons and community edition of AG Grid.

### Deployments List Component
#### TS
Include the new cell renderer component when setting up your col defs.

```
{
  field: 'DeployedBy', 
  cellRendererFramework: IconCellRendererComponent 
}
```
 
### Icon Cell Renderer Component
#### TS
```
import { Component } from "@angular/core";
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import { faUsers, faCity } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-icon-cell-renderer',
  templateUrl: './icon-cell-renderer.component.html'
})
export class IconCellRendererComponent implements ICellRendererAngularComp {
  faUsers = faUsers;
  faCity = faCity;

  params: any;
  icons: IconDefinition[]; // ✨ if wanting just the 1 icon change to `IconDefinition`

  agInit(params: any): void {
    this.params = params;
    if (this.params.value === 'Teamcity') {
      this.icons = [faUsers, faCity];
    }

    return this.params.value;
  }

  refresh(): boolean {
    return false;
  }
}
```

#### HTML
I'm looking at tidying this up.

```
<span *ngIf="icons != null; else notSys">
  <span *ngFor="let icon of icons">
    <fa-icon [icon]="icon"></fa-icon>
  </span>
</span>
<ng-template #notSys>
  {{params.value}}
</ng-template>
```

### Styling
```
@almost-black: #262626;

ag-grid-angular.ag-theme-material {
  .ag-row .ag-cell fa-icon { 
    margin-left: 2px;
    margin-right: 2px;
    color: @almost-black; 
  }
}
```
What's a Web Component, Tho?
Published: 2021-02-11 04:29:44

Although this is no new concept, many learners who are new to programming do not realize that making "custom HTML tags", or web components, is even possible.  Even more surprising, many professional developers may miss out on the fact that there exist tons of open source web components that are free to download and use.  In this blog, we are going to discuss how, exactly, open-source web components can be downloaded and used for development.

###Step 1: Download Node.js
First, you’ll need to download Node.js, which will automatically provide you with all the necessary environment variables and tools needed to use NPM, or “Node Package Manager”.  NPM is a very powerful command line tool which we’ll talk about very soon.  For now, though, the first step will be to download Node.js.  Below is a link to their download page:
[nodejs download]https://nodejs.org/en/download/

###Step 2: Install Polymer Using NPM
To install polymer, navigate to your command line and enter the command:
```npm install -g polymer-cli```
If you’re on a Linux machine, you may also need to add the sudo command to run the command as an administrator.  This will install polymer, which is a service that will allow you to host and view your webpage locally.

###Step 3: Download Desired Open-Source Web Components Using NPM
Navigate, using the command line, to a folder on your hard drive within which you would like to store your project.  Next, run the commands:
```npm install @lrnwebcomponents\meme-maker```
```npm install @lrnwebcomponents\moar-sarcasm```
These commands will bring in two example web components which will allow us to create memes in HTML, and also add sarcasm to our webpage text.

###Step 4: Implement in HTML
Here are the tags I added within the body of my HTML file which should successfully import the remote web components, and of course, instantiate them on your webpage.
```<meme-maker class="meme" top-text="Oh heck" bottom-text="A computar :DDDDD" image-url="computar.jpg"></meme-maker>
    <moar-sarcasm>whatsacomputertho</moar-sarcasm>
	<script type="module">
		import {MemeMaker} from '@lrnwebcomponents/meme-maker';
		import {MoarSarcasm} from '@lrnwebcomponents/moar-sarcasm';
	</script>```
Keep in mind, I'm using a local image in the meme-maker tag, so if you copy these tags into your project as-is, it is likely that no meme will show up.

###Step 5: Serve Locally Using Polymer
Back in the command line, navigate to your project folder and execute the command:
```polymer serve```
Then, once it returns an IP address and port number, copy it into your browser's search bar.  This should take you to your webpage, and you should be able to see your successfully instantiated web components.

###See the below video for a more in-depth tutorial on Open-Source web components
{% youtube 8ooKNjSroAg %}