teleren/devto huggingface dataset:
Grab a distribution tarball from CPAN
Tags: cpan, perl
Published: 2021-05-18 14:40:45

This is another "CPAN utils" post (sort of) but this time around resolving and fetching tarballs :smiley:

1. [cpan -g](#cpan)
2. [sourcepan](#sourcepan)
3. [cpan-get](#cpan-get)
4. [MetaCPAN::Client + HTTP::Simple](#mcpan-httpsimple)

## cpan -g <a name="cpan"/>
First let's start by using the *venerable* [CPAN](https://metacpan.org/pod/CPAN):
```
$ cpan -g Parser::MGC 
Checking Parser::MGC
Reading '/home/tduponchelle/.local/share/.cpan/Metadata'
  Database was generated on Sat, 15 May 2021 16:41:03 GMT
CPAN: LWP::UserAgent loaded ok (v6.53)
Fetching with LWP:
http://www.cpan.org/authors/01mailrc.txt.gz
CPAN: YAML loaded ok (v1.30)
Reading '/home/tduponchelle/.local/share/.cpan/sources/authors/01mailrc.txt.gz'
CPAN: Compress::Zlib loaded ok (v2.102)
............................................................................DONE
Fetching with LWP:
http://www.cpan.org/modules/02packages.details.txt.gz
Reading '/home/tduponchelle/.local/share/.cpan/sources/modules/02packages.details.txt.gz'
  Database was generated on Tue, 18 May 2021 12:29:03 GMT
............................................................................DONE
Debug(CPAN,CPAN.pm,703,[Index,Index.pm,483,all_objects]): mgr[CPAN=HASH(0x563dc712a9e8)] class[CPAN::Module]
Debug(CPAN,CPAN.pm,703,[Index,Index.pm,483,all_objects]): mgr[CPAN=HASH(0x563dc712a9e8)] class[CPAN::Bundle]
Debug(CPAN,CPAN.pm,703,[Index,Index.pm,483,all_objects]): mgr[CPAN=HASH(0x563dc712a9e8)] class[CPAN::Distribution]
Fetching with LWP:
http://www.cpan.org/modules/03modlist.data.gz
Reading '/home/tduponchelle/.local/share/.cpan/sources/modules/03modlist.data.gz'
DONE
Writing /home/tduponchelle/.local/share/.cpan/Metadata
Use of uninitialized value in concatenation (.) or string at /usr/share/perl/5.26/App/Cpan.pm line 1186.
Downloaded [Parser::MGC] to []
```

## sourcepan <a name="sourcepan"/>
Then look at the more *developer oriented* [sourcepan](https://metacpan.org/pod/sourcepan):
```
$ sourcepan Acme::LSD
Reading '/home/tduponchelle/.local/share/.cpan/Metadata'
  Database was generated on Tue, 18 May 2021 12:29:03 GMT
CONTRA/Acme-LSD-0.04.tar.gz => Acme-LSD-0.04.tar.gz
```
`sourcepan --git` could even init for you a repository...

## cpan-get <a name="cpan-get"/>
Continue with the *newborn* [cpan-get](https://metacpan.org/release/App-CPAN-Get):
```
$ cpan-get Test::More
'http://cpan.metacpan.org/authors/id/E/EX/EXODIST/Test-Simple-1.302183.tar.gz' was downloaded.
```

## MetaCPAN::Client + HTTP::Simple <a name="mcpan-httpsimple"/>
And finish by a mixed [MetaCPAN API client](https://metacpan.org/pod/MetaCPAN::Client) + an [HTTP client](https://metacpan.org/pod/HTTP::Simple) (with no error handling at all :skull:):
```perl
# Init MetaCPAN client
use MetaCPAN::Client;
my $mcpan = MetaCPAN::Client->new();

# Resolve url
my $download_url = $mcpan->download_url('ExtUtils::MakeMaker');

# Download
use HTTP::Simple;
getstore($download_url->{data}->{download_url}, "EUMM.tgz");
```
(Should be possible fetch with MetaCPAN::Client, if you know how, please comment)
Add code to your medium article GitHub Gist
Tags: github
Published: 2021-05-18 14:40:07

A quick way to insert code for your medium stories.
Easiest of all is to embed your code ``` . This allows embedding your code as :
//Your code
def hello_world():
    print('hello world')
Make sure you press enter so that you see the below symbol before you start typing ```

But this approach would get tricky if you are embedding code which needs an indentation. Hence we can use Github gist.
Go to https://gist.github.com.
Add your code in the gist.
On your top right you will see the

4. Click on Embed drop down and select Share , this should give you an url something like
https://gist.github.com/akhilanandbv003/fd4f3898bb7b9c36f7b9a8c198e01548```
Paste it in your article and press enter. Hazzaaa!!

Hope this helps!
Recreating `border-image`  with `background-image` for the curious
Tags: css, borderimage, webdev
Published: 2021-05-18 14:40:06

Since `border-image` was first introduced around 2010 to this day I've received one consistent comment from my fellow developers any time I use it:

> Why not just use `background-image` instead?

So here it is folks! Here's the default `border-image` code versus what you'd have to do in `background-image` to get the same result. This is why I don't do that!

```css
border: solid 27px;
border-image: url('border.png') 27; 
```
Equivalent background image code:

```css
/* don't do this */
background: 
  url('top-left-corner.png') 0 0 / 20px 20px no-repeat, 
  url('top-right-corner.png') 100% 0 / 20px 20px no-repeat,
  url('bottom-left-corner.png') 0 100% / 20px 20px no-repeat,
  url('bottom-right-corner.png') 100% 100% / 20px 20px no-repeat,
  url('left-border.png') 0 20px / 20px calc(100% - 40px) no-repeat,
  url('right-border.png') 100% 20px / 20px calc(100% - 40px) no-repeat,
  url('top-border.png') 20px 0 / calc(100% - 40px) 20px no-repeat,
  url('bottom-border.png') 20px 100% / calc(100% - 40px) 20px no-repeat;
```

{% codepen https://codepen.io/jsnkuhn/pen/RwpGmwv %}
Angular 6 Form Validation example – Template-driven Forms
Tags: angular, angular6, form, validation
Published: 2021-05-18 14:36:41

https://grokonez.com/frontend/angular/angular-6/angular-6-form-validation-example-template-driven-forms

Angular 6 Form Validation example – Template-driven Forms

In this tutorial, we're gonna make a Form Validation example with Angular 6 Template-driven Forms.

Related Post: <a href="https://grokonez.com/frontend/angular-6-form-validation-example-reactive-forms">Angular 6 Form Validation example – Reactive Forms</a>

<!--more-->
<h2>Example Overview</h2>
Our form has 3 fields:
- Username: check existence
- Email: check existence, then check email format
- Password: check existence, then check if at least 6 characters

<img src="https://grokonez.com/wp-content/uploads/2018/10/angular-6-form-validation-example-template-driven-forms.png" alt="angular-6-form-validation-example-template-driven-forms" width="700" height="691" class="alignnone size-full wp-image-15081" />
<h2>Instructional Video</h2>
<iframe width="853" height="480" src="https://www.youtube.com/embed/bYtIezvAP9Y?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<h2>Practice Code</h2>
<h3>Modules</h3>
<em>app.module.ts</em>
<pre><code class="language-javascript">
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
</code></pre>
<h3>Component</h3>
<em>app.component.ts</em>
<pre><code class="language-javascript">
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: any = {};

  constructor() { }

  onSubmit() {
    console.log('email=' + this.form.email);
    console.log('username=' + this.form.username);
    console.log('password=' + this.form.password);
  }
}</code></pre>
<h3>Template</h3>
<em>app.component.html</em>

More at:

https://grokonez.com/frontend/angular/angular-6/angular-6-form-validation-example-template-driven-forms

Angular 6 Form Validation example – Template-driven Forms
Error Handler Angular 6 HttpClient – catchError + retry – with SpringBoot RestAPIs example
Tags: angular, restapi, springboot, errorhandler
Published: 2021-05-18 14:23:30

https://grokonez.com/frontend/angular/error-handler-angular-6-httpclient-catcherror-retry-with-springboot-restapis-example

Error Handler Angular 6 HttpClient – catchError + retry – with SpringBoot RestAPIs example

In the tutorial, we show how to handle error from Angular HttpClient with <code>catchError</code> & <code>retry</code> when request fails on the SpringBoot server, or in case of a poor network connection.

Related posts:
- <a href="https://grokonez.com/frontend/angular/angular-6/angular-6-httpclient-get-post-put-delete-requests-springboot-restapis-bootstrap-4">Angular 6 HttpClient – Get/Post/Put/Delete requests + SpringBoot RestAPIs + Bootstrap 4</a>

<!--more-->
<h2>Technologies</h2>
<ul>
<li>Angular 6</li>
<li>RxJS 6</li>
<li>Bootstrap 4</li>
<li>Visual Studio Code – version 1.24.0</li>
<li>SpringBoot</li>
</ul>
<h2>Error Handling</h2>

More at:

https://grokonez.com/frontend/angular/error-handler-angular-6-httpclient-catcherror-retry-with-springboot-restapis-example

Error Handler Angular 6 HttpClient – catchError + retry – with SpringBoot RestAPIs example
I created 3 New VSCode Themes!
Tags: vscode, theme, color
Published: 2021-05-18 14:21:16

Hey There!

This is an exciting post because.....

Drumroll please..🥁🥁

Well you obviously know by the title 😂.

Anyways, I created 3 New (and free) VSCode themes to make your VSCode look better.

A month ago I wrote a post on 8 Rad themes for VSCode.

You can check it out here:

{% post https://dev.to/code2rithik/8-rad-themes-for-visual-studio-code-57f5 %}

Anyways, are you ready to install it...

It's on the marketplace!

<hr />

# 1. Neon Blue Drive

An Awesome Neon Blue Theme Inspired by The Best Theme

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26uqwjpqamhhaj7zaop8.png)

<a href="https://marketplace.visualstudio.com/items?itemName=RithikDev.neon-blue-drive">Install</a>

<hr />

# 2. Blazes Abyss

This is a theme based on the CodeSandbox Theme

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

<a href="https://marketplace.visualstudio.com/items?itemName=RithikDev.blazesabyss">Install</a>

<hr />

# 3. Purple Star

This is a nice purple theme with a radical theme

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

<a href="https://marketplace.visualstudio.com/items?itemName=RithikDev.purple-star">Install</a>

Please do write reviews on the marketplace!

<hr />

Thank You for Reading and Remember...

# Keep Coding Y'All 👨🏻‍💻
Error Handler Angular 6 HttpClient – catchError + retry – with SpringBoot RestAPIs example
Tags: restapi, angular, springboot, httpclient
Published: 2021-05-18 14:20:49

https://grokonez.com/frontend/angular/error-handler-angular-6-httpclient-catcherror-retry-with-springboot-restapis-example

Error Handler Angular 6 HttpClient – catchError + retry – with SpringBoot RestAPIs example

In the tutorial, we show how to handle error from Angular HttpClient with <code>catchError</code> & <code>retry</code> when request fails on the SpringBoot server, or in case of a poor network connection.

Related posts:
- <a href="https://grokonez.com/frontend/angular/angular-6/angular-6-httpclient-get-post-put-delete-requests-springboot-restapis-bootstrap-4">Angular 6 HttpClient – Get/Post/Put/Delete requests + SpringBoot RestAPIs + Bootstrap 4</a>

<!--more-->
<h2>Technologies</h2>
<ul>
<li>Angular 6</li>
<li>RxJS 6</li>
<li>Bootstrap 4</li>
<li>Visual Studio Code – version 1.24.0</li>
<li>SpringBoot</li>
</ul>
<h2>Error Handling</h2>
<h3>Error Object</h3>
Simple Angular HttpClient to request as below:

<pre><code class="language-javascript">
@Injectable({
  providedIn: 'root'
})
export class CustomerService {
  private customersUrl = 'http://localhost:8080/api/customers';  // URL to web api

  constructor( 
    private http: HttpClient
  ) { }

  getCustomers (): Observable<Customer[]> {
    return this.http.get<Customer[]>(this.customersUrl);
  }
}</code></pre>

What happens if the request fails on the server, or if a poor network connection?

- Server is die -> console's logs:

<img src="https://grokonez.com/wp-content/uploads/2019/01/angular-6-retry-error-spring-boot-restapi-unknown-error-console-logs.png" alt="angular-6-retry-error-spring-boot-restapi---unknown-error-console-logs" width="700" height="179" class="alignnone size-full wp-image-16525" />

- 404 error -> console's logs:

<img src="https://grokonez.com/wp-content/uploads/2019/01/angular-6-retry-error-spring-boot-restapi-404-error-console-logs.png" alt="angular-6-retry-error-spring-boot-restapi---404-error-console-logs" width="742" height="182" class="alignnone size-full wp-image-16526" />

- 500 error -> console's logs:

<img src="https://grokonez.com/wp-content/uploads/2019/01/angular-6-retry-error-spring-boot-restapi-500-error-console-logs.png" alt="angular-6-retry-error-spring-boot-restapi---500-error-console-logs" width="752" height="182" class="alignnone size-full wp-image-16527" />

-> <code>HttpClient</code> will return an <code>error</code> object.
We can handle it from <code>Component</code> code with <code>.subcribe</code>:

More at:

https://grokonez.com/frontend/angular/error-handler-angular-6-httpclient-catcherror-retry-with-springboot-restapis-example

Error Handler Angular 6 HttpClient – catchError + retry – with SpringBoot RestAPIs example
YouTube Player API  for iframe embeds only works for muted content

Tags: youtube, iframe, api, javascript
Published: 2021-05-18 14:19:00

This was a hard nut to crack: 
I wanted to start a video playing when the parent container was scrolled into view. It appeared that this only works consistently for _muted_ video's.

Example HTML:

```html
<div class="video-container">
  <iframe
    id="player"
    width="560"
    height="315"
    src="https://www.youtube.com/embed/1XPdPKKRFaE?enablejsapi=1&mute=1"
    title="DCT introduction video"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>
```

So the crux is here: `mute=1`.

Accompanying JS:

```js
let player;

// Will be automatically called when https://www.youtube.com/iframe_api is loaded
function onYouTubeIframeAPIReady() {
  player = new YT.Player("player", {
    events: {
      onReady: onPlayerReady,
    },
  });
}

function onPlayerReady(event) {
  // Start video play once in view
  let callback = (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        player.playVideo();
      } else {
        player.pauseVideo();
      }
    });
  };

  let observer = new IntersectionObserver(callback, {});
  let target = document.querySelector(".video-container");
  observer.observe(target);
```

Notes:

- "player" is the ID of the `iframe` used in the HTML
- class "video-container" is the name of the element on which the intersection observer detects if the video container is visible in the viewport or not
Why you should have a code of conduct on GitHub
Tags: productivity, opensource, sideprojects, github
Published: 2021-05-18 14:03:48

I made the decision to add a code of conduct to my current and future repos on GitHub. Based on my personal experiences I made my choice when I asked these questions:

* What is the purpose of a code of conduct?
* How can I prevent negative behavior in the future?
* What enforcement will take place for rule violations?

The purpose of writing this article is to advocate creating a safe space and a welcoming environment in the open source community. As developers we should respect one another and this includes contributing to open source projects. 

## A few bad apples make it bad for everyone
Any good open source project will have a detailed README.md and a CONTRIBUTING.md in the repo. It is important to create a positive environment for contributors. However, negative and toxic behavior can push contributors away from a project.  

## Git commits and documentation are not for harassment 
   Commits and proper documentation are used to document changes in a project. The purpose is not to bully or harass individuals who made a mistake. This can deter contributors to contribute for another project. Examples of a toxic open source environment was calling out people's first name in the commits, putting down contributors, taking credit and not acknowledging  the work of others. I have been on the receiving end and the outcome was not pretty.  

## A code of conduct is needed
If you want multiple contributors to your open source project having clear guidelines for contributors is essential. Adding a code of conduct on my part was to make my projects welcome to anyone who wants to contribute. You can choose to adopt a code of conduct that reflects your community standards.  

## Final thoughts
Code of Conducts are meant to create an inclusive environment. Having one creates boundaries for open source projects and makes sure everyone follows the guidelines when contributing. Encouraging participation in the community and creating a harassment free environment makes contributors feel welcome. I would welcome any contributions to a project.  

### Resources 

[Adding a code of conduct in GitHub](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-code-of-conduct-to-your-project)

[Your Code of Conduct](https://opensource.guide/code-of-conduct/#:~:text=as%20a%20maintainer-,Why%20do%20I%20need%20a%20code%20of%20conduct%3F,just%20your%20participants%2C%20but%20yourself.)

[Example of Code of Conduct](https://stars.github.com/code-of-conduct/)
Getting Started with Vim Editor in Linux 
Tags: linux, vim
Published: 2021-05-18 13:54:49

[Vim](https://en.wikipedia.org/wiki/Vim_(text_editor)), the ultimate text editor for developers is one of the most popular and powerful text editors. The Vim Editor is used by a number of coders, programmers or developers in all platforms.

Vim is a command line text editor. Vim is available in almost all Linux distributions by default :grin: It is the best text editor when it comes to editing code. But if you are new to Linux and Vim, then this can be intimidating at first. 

![vim editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pe540cqfmw14dc9jclf.gif)

If you are new to vim, I recommend [these exercises](https://vim.is/)

## Start with vim

What makes Vim so efficient is that it leverages a powerful modal editing style. In modal editing, the editor works in two modes: you're either inserting text (insert mode `i`), or in command mode (`ESC`). This gives you a great deal of flexibility, as well as enabling some very fast movements and edits.

The most important commands are:
1.  Editing: `i` inserts text .
2.  Deleting: `dd` deletes a line
3.  Command mode: `ESC`
4.  Moving: "l" moves the cursor one character to the left, "h" to the left, "j" to below, "k" above, "l" to the right, "H" to the right, and "L" to the beginning of the line and column.

The following is a list of some essential and commonly used vim commands. 

Action | Command
---|---
`vim file` | Open file 
`:w` | Save file 
`:wq` | Write and quit
`:q!` | Quit without saving
`h` | move cursor left
`j` | move cursor down
`k` | move cursor up
`l` | move cursor right
`yy` | copy line
`p` | paste
`!ls` | run `ls` command

Each command can be prefixed with a number to repeat it that many times over, for example `:2wq` will save the file and quit vim twice. Pressing `10j` will move the cursor down 10 lines.
The Top Android Development Frameworks You Can Try
Tags: webdev, productivity, beginners, frameworks
Published: 2021-05-18 13:41:23

**React Native**

If you can reuse your website code for your mobile, how would that go? Indeed you would be thrilled if that is possible. Well, with react native app development, you can reuse your website’s JavaScript code for mobile application. It allows you to have quick JavaScript code sharing environment for web, iOS, and Android.

Due to its cross-platform compatibility, your application would detect which OS your device is using and showcase relevant user interface accordingly. When you want to be platform-specific for your user experience, such features by the framework can help you a lot.

**Ionic**

Trusted by brands like McDonald’s, IBM, Mastercard, GE, and a few more, Ionic provides a single codebase for multiple platforms.

Moreover, it is an open source framework so anyone can use for free. Nobody charges the royalty for the framework. The flow of developing mobile apps can be super-charged using the Ionic framework as the framework allows a custom development environment, and you can locally installed the framework to install strat coding and deploying your Android mobile apps.

**PhoneGap**

PhoneGap shows the changes in your mobile applications quickly. In this framework, you no need to hit refresh or recompile the code because once you start editing your code, you can see the changes instantly.

Their desktop app takes off your burden of using a command line interface to develop the apps. The snappiest interface is smart enough to give you the intuitive framework for developing PlayStore-ready mobile application.

**Flutter**

Flutter supports Dart language which is similar to Java. You can work on a single codebase to develop applications that work on multiple platforms.

You can integrate new and meaningful functionalities in your Android mobile applications through a collection of catalogs of widgets from Flutter. The platform is developed by Google, and it is an open source project. Everyone is allowed to download the framework and make a commercial mobile application.

**Conclusion**

Each platform has unique functionality and a different style of developer service. Depending on the scope and requirements of your project, you can choose the structure.
Share your experience with [these frameworks](https://exceed-team.com/tech/top-android-development-frameworks-you-can-try?s=de&a=a) in the comments. Thank you for reading and have a nice day)
Jekyll - Turn your static files into static websites
Published: 2021-05-18 13:40:13

Discovered recently, **Jekyll** is a really cool tool that will easily help you create a blog or static website!

As we can see in the [Jekyll showcase](https://jekyllrb.com/showcase/), we can find really cool websites like : 
- [Netflix Devices](https://devices.netflix.com/en/)
- [UN World Statistics](https://worldstatisticsday.org/)
- [TwitchCon](https://www.twitchcon.com/)
- [GitHub on demand training](https://lab.github.com/)

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

---
## What are the advantages of Jekyll?
- Easy to use
- Markdown-based
- A lot of free themes are available
- You can easily use it with Github Pages to publish your site or blog for free!

---

## Why Jekyll rather all the other tools to generate a site from markdown?

Generally, the other tools which generates static websites from markdown are made for documentation purpose. 

**Jekyll will allow you to create a blog.**

So if you want to have a static website for your documentation, maybe Jekyll is not the best choice.


---

About how to install it and how to use it, please go check the website of jekyll which contains all what you need.

- [Installation](https://jekyllrb.com/docs/installation/)
- [Tutorial to use Jekyll](https://jekyllrb.com/docs/step-by-step/01-setup/)
- ...

---
## Links
- Website: https://jekyllrb.com/
- Jekyll themes: 
    - https://jekyllthemes.io/free
    - http://jekyllthemes.org/
- Video tutorial : https://www.youtube.com/watch?v=T1itpPvFWHI

--- 

I hope it will help you!