teleren/devto huggingface dataset:
HacktoberFest Challenge Completed. 
Tags: hacktoberfest
Published: 2020-11-02 07:43:16

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### Why I Participated in HacktoberFest.
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
Its very simple. I wanted to get a T-shirt. Yes, that's the reason for me.
### Background
<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →
yes,I'm totally new to this. Even I'm creating repos on Github since 2018. Because I didn't know how to create contributions on Github. 

### Progress
<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->
Firstly, I was so excited that now, the fest is on. So, I will participate in it. I've made one thing clear to submit 4 PRs as soon as I could. So, I tried finding beginner repos on Github. 
It took some time cause I wasn't able to find suitable repo for my level, as all of them were very hard to understand. 

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->
Firstly, I saw a video on Youtube how to create your first pull request. It was on DevDojo site. I haven't contributed before so, I just modified few lines of docs and created pull req. but, It wasn't helping the site in anyway so they tagged it INVALID.
https://github.com/thedevdojo/tails/pull/76

I really felt very bad about it. as I never meant to spam any repo but, unknowingly I did.

Then, I searched again for a beginner repo and found one repo for welcoming beginners on Github. Made one PR there.
https://github.com/bonn0062/github_welcome_wall/pull/72

Now, My first PR was done. So, I was very excited. then I searched for Machine learning basic repo. made another PR there,
https://github.com/aswinzz/Machine-Learning-Algorithms/pull/27

I again searched for Machine learning Repo and made my one more PR,
This was my first PR in any big Repo like this, and it got merged. made me so happy. 
https://github.com/josephmisiti/awesome-machine-learning/pull/736

As I am first timer, I was so keen to get HF T-shirt. for that I have to be in the first 70,000 people. But, I was tired of submitting 3 PRs in a day. so, I Made a PR in My Friends Repo.
https://github.com/Abhinavmaurya747/Face-Recognition-One-Shot-Learning-/pull/1

This is how I made all of my PRs. 


### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
Now, at the end. Even if I submitted my PRs in basic Repos, I feel experienced enough do contribute more and more whether it's hacktoberfest or not. Now, I want to submit Good PRs in Big Repos, like AboutCode, etc. 
I want to participate in GSOC Next year and I'm gonna do it.
Presenta Lib, js presentation library
Tags: presentation, slides, javascript, library
Published: 2020-11-02 07:22:29

---
title: Presenta Lib, js presentation library
published: true
description: Presenta Lib is a javascript library that helps creating web presentations in seconds
tags: presentation, slides, js, library
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/wbqbfori041vfhlb8xis.png
---

Hello there!

I’d like to introduce my very own open-source project, [PRESENTA Lib](https://lib.presenta.cc/), a javascript library that helps creating expressive web presentations in seconds.

Any feedback are much appreciated
Azure DevOps YAML pipeline : Use conda environment 
Tags: azure, pipeline, devops, conda
Published: 2020-11-02 07:19:04

Azure DevOps hosted agents have many software so that you don't have to install them every time.

However, in case you need to use some python package, you can do:

- Install them via pip install
- Use conda environment and use environment.yaml

# pip install

The easiest way to install python package is to use pip install.
I can simply use script task to run:

```yaml
- script: pip install <package> <package> ..
```

# Use conda environment

If there are multiple pipelines which require same package again and again, it's better to manage them at once. In this scenario, you can use either requirements.txt for pip install or conda environment.

[Run pipelines with Anaconda environments](https://docs.microsoft.com/en-us/azure/devops/pipelines/ecosystems/anaconda?view=azure-devops&tabs=ubuntu-16-04)

Hosted agents has conda installed by default, so I just need to run following commands.

```yaml
- script: conda env create --quiet --file environment.yml
  displayName: Create Anaconda environment
```

One caveat is that I need to activate it in every build step.

>Each build step runs in its own process. When you activate an Anaconda environment, it will edit PATH and make other changes to its current process. Therefore, an Anaconda environment must be activated separately for each step.

I use it with Azure CLI task but it works same way.
```yaml
- task: AzureCLI@1
  inputs:
    azureSubscription: '$(my_subscription_connection)'
    scriptLocation: inlineScript
    workingDirectory: $(Build.SourcesDirectory)
    inlineScript: |
      # Activate conda environment
      source activate myenvironment
      export SUBSCRIPTION_ID=$(az account show --query id -o tsv)
      # Invoke any azure cli command
```
# Sample in GitHub

GitHub: https://github.com/MicrosoftDocs/pipelines-anaconda has more detail information.
Hacktoberfest
Tags: hacktoberfest, opensource, github
Published: 2020-11-02 06:56:40

![Hacktoberfest Profile](https://dev-to-uploads.s3.amazonaws.com/i/0urxh0q4abr7vgpmg6jy.png)
<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

### Intro
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
Hello Everyone,
This is my first year in opensource development and what's better than Hacktoberfest to start the journey.🙂
### Background

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here → -->
I am a second year B.Tech. student and have been doing coding for quite some time now.
### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->
I have successfully completed the Hacktoberfest this year.😁
### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->
* [Anurag5086-Portfolio-website-themes](https://github.com/Anurag5086/Portfolio-website-themes)
* [harshithq-ToDoList](https://github.com/harshithq/ToDoList)
* [cp-geeks-adgitm-Hacktoberfest](https://github.com/cp-geeks-adgitm/Hacktoberfest)
* [mmuhamadamirzaidi-Hacktoberfest](https://github.com/mmuhamadamirzaidi/Hacktoberfest)
* [missmahi55-design_and_templates](https://github.com/missmahi55/design_and_templates)

### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
Hacktoberfest is a great way to stay motivated and contribute to some unique open-source projects.
And I will definitely continue the contributions in open source.
How to loop through an array with a range in VueJS
Tags: vue, nuxt, node, javascript
Published: 2020-11-02 06:48:29

Imagine you have an array with 10 items and wanted to divide it up into a set of five's to fit with your design objective.

Several common solutions to this problem I've seen in the wild include:
 
1. Hard-coding the solution 
2. Creating two separate arrays

So, here's a simpler and better solution to do it with one array in VueJS:

```
<p 
    v-for="(item, index) in yourArray.slice(start, end)" 
    :key="index">
    
    {{ item.topic }}
</p>
```
The best thing about this solution is, you can dynamically set the `start` and `end` values, for example, using inputs from the user.

Hope that helps, cheers!
VSD to PDF
Tags: dotnet, csharp, tutorial, codequality
Published: 2020-11-02 06:32:24

Suppose you have a VSD file on server and need to convert it to PDF programmatically. So that other users could download and view it.
Have a look at the following code:

```csharp
using (Converter converter = new Converter("sample.vsd"))
{
    PdfConvertOptions options = new PdfConvertOptions();
    converter.Convert("converted.pdf", options);
}
```
All you have to do is to add GroupDocs.Conversion for .NET [DLL](https://downloads.groupdocs.com/conversion/net) reference in your project. API takes a VSD file as input and converts it to a PDF. You can post [here](http://forum.groupdocs.com/) in case of any issue.
Day 2 - Exploring Forms in React with a Facebook login clone
Tags: react, 100daysofcode, javascript, css
Published: 2020-11-02 05:40:08

I am finishing up late again today so will be light on the verbosity and heavy on the brevity with this blog post. I have been studying React forms and user input recently so I wanted to put out a small project that did this well, as well as kept user input in the form's component state.

##Summary
I am still working up to the todo app I promised yesterday. After studying on my own for a bit I just didn't get around to worrying about those getters and setters. That said, this simple login form mimics the lord, creator and overseer of React's- I'm talking about Facebook. Who better to copy for a React exercise? Here is the original [link](https://www.facebook.com/) (you have to be signed out- and you'll need to be on desktop) and here is the my deployed copy: [link](https://100-react-projects-day-2-facebook-login.netlify.app/).

Facebook login:
![facebook's login screen](https://dev-to-uploads.s3.amazonaws.com/i/2dewp4chnksibq6w8ex7.png)

My clone:
![my clone](https://dev-to-uploads.s3.amazonaws.com/i/rsglka8v5m1zgldy6uzm.png)

##Key takeaways
* After whining about it yesterday, I went out and tried to find a replacement for **create-react-app** and alas, I found a great one in `npx nano-react-app` which I read about first in [this](https://hackernoon.com/create-react-app-is-way-too-bloated-5db07c3511) wonderful Hackernoon article. It's much lighter, the documentation is friendly, and it's well maintained. The only huge difference is that after the build step you will want to deploy the dist folder instead of a folder named "build". That's about it!
* Working with inputs in React is a whole new ballgame, and involves quite a bit more steps than in pure html. While browsers have built-in support for html, with React you need to actually create state to store your data from the component. Then you need to write an onChange method in the input's JSX. Working with data and passing it up to App-wide state from a component is actually something I still don't totally get yet in React so I'll try to do something in that vein tomorrow.

Day 2 of 100 React projects for #100daysofcode down! So far it's taxing but fun, and definitely a great exercise for shoring up knowledge gaps and practicing skills that otherwise too-often exist solely in the void of tutorials. I'd encourage anyone thinking about it to start the 100 days challenge soon- you'll only be a little bit behind me :)

Find me on my exciting new dev Twitter: [https://twitter.com/jwhubert91](https://twitter.com/jwhubert91)

Oh and here is the repo for today's project:
https://github.com/jwhubert91/100daysofreact/tree/master/day-2-fb-login-form
How to automatically unpack a mpkg file on OSX
Tags: howto, tipsandtricks, automation, osx
Published: 2020-11-02 09:08:02

---
title: How to automatically unpack a mpkg file on OSX
published: true
date: 2020-11-02 05:00:00 UTC
tags: Howto,TipsAndTricks,Automation,OSX
canonical_url: https://10xlearner.com/2020/11/02/how-to-automatically-unpack-a-mpkg-file-on-osx/
---

I’m Xavier Jouvenot and in this small post, we are going to see how to automatically unpack a mpkg file on OSX.

_Self promotion_: You can find other articles on my [website](www.10xlearner.com) 😉

## Problematic

When working on CI setup for some projects, I ended up having to install a program on a OSX environment which is only release via a mpkg file.

Since you can only interact with files via command line on such environment, you can’t double click to extract the elements from the mpkg file, so we need to find another way.

## Solution

After some googling, I finally encountered some articles talking about the command `installer`, and how it could be used on a mpkg file. Once I had experimented a little bit with this command, I ended with the working following shell instruction:

```
sudo installer -pkg <path/to/file.mpkg> -target /
```

Maybe some explanation are necessary :laughing:

I used the `sudo` keyword since I needed the administrator rights to be able to install the program at the root of computer. Then `-pkg` flag allows us to specify the location of the mpkg file.

Finally the `-target` flag allows us to specify where we are going to install the programs contained in the mpkg file. By putting the root of the system (`/`), we tell the computer that we want our program to be installed into the system part of the computer. Doing this that way, the program I experimented on ended up in the folder `/Applications` of my machine.

And like that, I have been able to automatically unpack the mpkg file on a OSX system.

* * *

Thank you all for reading this article, And until my next article, have a splendid day 😉

## Interesting links

- [Codewall reference](https://coderwall.com/p/lncteg/install-mpkg-package-from-commandline-on-osx)
Hacker Rank: Compare the Triplets
Tags: javascript
Published: 2020-11-02 04:59:22

Hacker Rank Challenge - Compare the Triplets 

Problem:
Alice and Bob each created one problem for HackerRank. A reviewer rates the two challenges, awarding points on a scale from 1 to 100 for three categories: problem clarity, originality, and difficulty.

The task is to find their comparison points by comparing a[0] with b[0], a[1] with b[1], and a[2] with b[2].
If a[i] > b[i], then Alice is awarded 1 point.
If a[i] < b[i], then Bob is awarded 1 point.
If a[i] = b[i], then neither person receives a point.

My Solution

```
function compareTriplets(a, b) {
    const scoreBoard = [0, 0]
    let i = 0
    while (i < a.length) {
        if (a[i] > b[i]) {
            scoreBoard[0] += 1
        } else if (a[i] < b[i]) {
            scoreBoard[1] += 1
        }
        i++
    }
    return scoreBoard
}
```

1. I created a scoreBoard and set it equal to [0, 0], each element representing both Alice’s and Bob’s points initially. 
2. I created a counter and while loop that uses that counter. 
3. I created an if else if conditional. 
4. If a[i] Alice’s criteria score is greater than b[i] Bob’s criteria score, then we increment Alice’s final score by 1 which is scoreBoard[0], otherwise if Bobs criteria score is greater than Alice’s then we increment Bob’s final score by 1.
Por que Web Components?
Tags: css, javascript, stencil, webcomponents
Published: 2020-11-02 04:57:49

Fala dev, não sei como chegou aqui, mas este é o meu primeiro post na plataforma então vou me apresentar dessa vez. 

Me chamo Rafael, sou apaixonado por desenvolvimento de software, atualmente trabalho como analista em uma plataforma a nível global. Me Viro no devops(Azure, aws, docker, jenkins),  RabbitMq, lerna, elastic search, goFiber, docker-compose, Js, css, Vuejs, stencil...

Nos ultimos 2 anos eu tenho trabalhado bastante utilizando vuejs e sem sombra de dúvidas é uma ferramenta incrível!
No projeto atual nós temos a necessidade de utilizar grandes plugins pagos, como Aggrid, flexmonstrer, highcharts e outros grátis como vis-timeline, select2, sweetalert2.

Nem tudo são flores e no desenvolvimento de software o problema e no mundo de components também não. Um dos problemas começa quando o time, tendência ou falta de tempo nos forçam a utilizar wrappers. wrappers ou adapters são utilizados para criar uma camada de abstração entre o framework e a library que deseja utilizar. 

O problema desse wrapper é que ele nem sempre acompanha as versões da biblioteca. Um exemplo claro de um é o vis-timeline que atualmente a lib está 10 versões a frente do wrapper. A mesma coisa ocorre com aggrid, Flexmonster e Hightcharts.

Não precisaríamos pensar em utilizar wrappers se as bibliotecas fossem realmente agnósticas a framework. Já precisou customizar alguma lib em um framework vue, react ou svelt. As vezes é mais complicado do que parece e "gambiarras" para adicionar comportamentos surgem nesse momento.

Recentemente estive pensando bastante como criar componentes realmente customizáveis e principalmente reutilizáveis independente de framework, foi onde me deparei com um carinha chamado Stencil.

> Stencil é um conjunto de ferramentas para a construção de sistemas de design reutilizáveis ​​e escaláveis. Gere componentes da Web pequenos, extremamente rápidos e 100% baseados em padrões que são executados em todos os navegadores. 

 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3qyes53r4t172htzdzq5.jpg)

Penso que Web Components é o caminho para criarmos bibliotecas de qualidade, agnósticas, testáveis, com os seus comportamentos isolados, CUSTOMIZÁVEIS e REUTILIZÁVEIS.

Estou criando um Web Component chamado [componentt-toast](https://github.com/componentt/toast)  Tem muita coisa ainda a ser feita mas já da pra pegar a ideia e ver o quão fácil é o Stencil. Sinta-se livre para contribuir.

Obrigado :)
CSS Emoji list style
Tags: css, html
Published: 2020-11-02 04:56:42

As you may have seen throughout my articles, I'm a big fan of Emojis.

Today we'll be looking at getting emoji as our list icons.
I will be using the stable method for this article. 
Tomorrow we will explore a newer method of doing just this.

The end result will be us transforming the left list into this right one.

Try it out using this Codepen.

{% codepen https://codepen.io/rebelchris/pen/qBNmBEO %}

## HTML Structure

```html
<div>
  <h1>The big five!</h1>
  <ul>
    <li>Lion</li>
    <li>Leopard</li>
    <li>Rhino</li>
    <li>Elephant</li>
    <li>Buffalo</li>
  </ul>
</div>
<div>
  <h1>The big five!</h1>
  <ul class="styled">
    <li>Lion</li>
    <li>Leopard</li>
    <li>Rhino</li>
    <li>Elephant</li>
    <li>Buffalo</li>
  </ul>
</div>
```

As you can see twice the same list, only the second one has a class `styled`.

Now we want to make the difference between a boring list and a cool emoji list!.

## CSS Emoji list-style

To get the emoji list-style we first will remove the actual styling from the list.

The `list-style: none` will remove the default bullets and then we set the padding and margin to be zero.

```css
.styled {
  list-style: none;
  padding: 0;
  margin: 0;
}
```

The next step is to give the list items some space.

This will give us a indent on the left where we can use the `before` selector to showcase our emoji.

```css
.styled li {
  padding-left: 1rem;
  text-indent: -0.75rem;
}
```

And the third and final step to showcase the emoji.

We are using the [before selector](https://daily-dev-tips.com/posts/css-pseudo-elements/) to place the content of the animal.

```css
.styled li::before {
  content: "🦁 ";
}
```

We can now use the `nth-child` selector to do the other animals.

```css
.styled li:nth-child(2)::before {
  content: "🐆 ";
}
.styled li:nth-child(3)::before {
  content: "🦏 ";
}
.styled li:nth-child(4)::before {
  content: "🐘 ";
}
.styled li:nth-child(5)::before {
  content: "🐃 ";
}
```

That's is a way cooler list!

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Release 2.0 - pr4
Published: 2020-11-02 04:41:18

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4kpru5dmah73hjrvotf3.jpg)

# Release 2.0 - pr4

For the fourth pull request, I worked on this issue [https://github.com/JIITODC/jiitodc.github.io/issues/86#event-3923513143(https://github.com/JIITODC/jiitodc.github.io/issues/86#event-3923513143). The pull request is
[https://github.com/JIITODC/jiitodc.github.io/pull/88](https://github.com/JIITODC/jiitodc.github.io/pull/88). 

I helped this repo to add a horizontal scrollbar on the table if the content is
overflow. This is done by adding a style to the CSS file.

```css
display: block;
overflow-x: auto;
white-space: nowrap;
```

## How I failed to contribute to a large program.

I planned to fix this issue [https://github.com/goreleaser/goreleaser/issues/1878 ](https://github.com/goreleaser/goreleaser/issues/1878 ), but after three days of working, I found that is not an easy problem, I have to learn some third party libraries. And I asked for help on this issue, for now, no response yet.

## What I learned in this year's hacktoberfest

Before this festival, I don't know how the open-source world work, how to file issue, how to help, how to ask help. I learned that communication is a key ability to work with others. Before we contribute to the program we should read the rules usually on a file named contribute.md.

This festival gives me a chance to really start. It's a small step but the most important step for me to contribute to the real open source world.

Thank Digital Ocean and my professor David.
Current state of wasm with rust using an example
Tags: rust, webassembly, web
Published: 2020-11-02 04:38:17

---
title: Current state of wasm with rust using an example
published: true
description: We are looking into wasm using rust and creating a small rust example that we then run in wasm context in your browser. We also look into wasm-bindgen in order to use complex types in rust and javascript.
tags: rust, wasm, web
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gojzfqho41qcii8ewdcd.jpg
---

{% youtube DxzIH1RrIxE %}

We are looking into wasm using rust and creating a small rust example that we then run in wasm context in your browser. We also look into wasm-bindgen in order to use complex types in rust and javascript.