teleren/devto huggingface dataset:
How to contribute to an Open Source Project
Tags: github, hacktoberfest, opensource
Published: 2018-10-21 13:46:35

> This is October, so many people want to contribute to an Open Source Project, especially with the #hacktoberfest challenge. But when you start, it's difficult to understand how to do it. That's why I decided to write this post.

Do you want to contribute to an open source project? Here's how!

## 1st - Read the README

If you already did it, you are lucky, if not, READ IT! It is called `README` not `DONTREADME`.

## 2st - Feature, fix ?

If you have a feature idea, just create an issue to describe the feature and don't forget to say that you can code it!

If not, take a look at the issues, maybe you can fix something.

## 3rd - Read the CONTRIBUTING file

All the things you have to do are written in the CONTRIBUTING file. Read it carefully. You have chosen your project! You are very happy and you want to contribute!


## 4th - Fork the project and code!

You just have to click on the little button at the right corner of the repository page. Example :

![Github Fork](https://thepracticaldev.s3.amazonaws.com/i/mw8j5h54halejqp0nibb.png)

You'll need to learn how to use Git -> [Git Learning Guide](http://rogerdudler.github.io/git-guide/)

* Then clone your project.

* Add your modifications.


## 5th - Commit and create your Pull Request (PR)

* Now, you have to commit your modifications.

Then, click on the Pull request button on the official repository page :

![Github Pull Request](https://thepracticaldev.s3.amazonaws.com/i/rlrd7jekm154wzpdnx4h.png)

Click on `New Pull Request` and then click on `Create pull request`

Give your pull request a title and a comment (According to the CONTRIBUTING file)

And finally, click on `Create Pull Request`.


> You made your first Pull Request !!!

I hope it will help you ^^

Thanx to [Quantum Sheep](https://dev.to/quantumsheep)
Quick CSS Quiz #5
Tags: challenge, css, quick, quiz
Published: 2018-10-21 13:16:47

In this series, I try to focus on CSS weird parts, throw quiz and its answer, hoping to give a better understanding of how CSS works in depth.

## The problem:

```html
<div class="first">
    <div class="red"></div>
    <div class="green"></div>
</div>
<div class="second">
    <div class="blue"></div>
    <div class="black"></div>
</div>
```

```css
.red, .green, .blue, .black {
    position: absolute;
    width: 200px;
    height: 200px;
}
.red {
    background: red;
    top: 0;
    left: 0;
}
.green {
    background: green;
    top: 50px;
    left: 50px;
}
.blue {
    background: blue;
    top: 100px;
    left: 100px;
}
.black {
    background: black;
    top: 150px;
    left: 150px;
}
```

The previous code snippets, for four squares positioned on top of each other, every square slightly moves to the left from the previous square's position so you can easily spot which one is on top of which.

![aligned squares](https://thepracticaldev.s3.amazonaws.com/i/hk1gagb60wgmpn4jq1pb.png)

<center><small>squares positioned on top of each other</small></center>

If I use the following snippet to re-arrange the squares rendering order, what will be the final order of the squares form back to front?

```css
.red { z-index: 100; }
.blue { z-index: 50; }
.green { z-index: 2; }
.black { z-index: 0; }
.first { transform: translateZ(10px); }
```

## Options:
* red, green, blue, black
* black, blue, green, red
* green, red, black, blue
* black, green, blue, red

## The answer:
you can find the answer below, but please give yourself a couple of minutes to think about it, to make sure you benefit from this quiz.


---
---
---
---
---
<center>👇👇👇</center>
---
---
---
---
---

The correct answer is: **green, red, black, blue**
If you wonder why this is the correct answer, please read the discussions below, I'll post the answer soon..
uuid in JavaScript.
Tags: javascript, react
Published: 2018-10-21 03:35:35

---
title: uuid in JavaScript.
published: true
description: generating unique id in javascript
tags: #javascript, #react
---

while working with array of components in react js application. react complains us to provide a unique value key prop to the list items. we get away with this warning by adding array index as key. But recently I got to know that this will actually lead to errors when you are updating the array(experienced personally in one of my project). so we need set a unique key other than array index. 

After googling about the generating unique id, I got to know few solutions & tricks to generate uids.
I came up with following solution. I believe this will have a very less chance of producing a two unique values.

I've decided to generate an id based on following parameters.

- time
- randomness
- counter

**time**: let's assume that we get a unique value with current time in ms.

```javascript
new Date().getMilliseconds();
```

for a better uniqueness. we can also use `performance.now` function. more info about `performance.now` can be found [here](https://developers.google.com/web/updates/2012/08/When-milliseconds-are-not-enough-performance-now?hl=en).

**randomness**: random number can be generated by calling `Math.random()`

**counter**: By any chance if we get two unique numbers successively. Just for safety, we need a counter which resets after certain limit. a circular linked list will be able to to the job.

so putting all together.

```javascript
    function uniqueId() {
        const firstItem = {
            value: "0"
        };
        /*length can be increased for lists with more items.*/
        let counter = "123456789".split('')
            .reduce((acc, curValue, curIndex, arr) => {
                const curObj = {};
                curObj.value = curValue;
                curObj.prev = acc;

                return curObj;
            }, firstItem);
        firstItem.prev = counter;

        return function () {
            let now = Date.now();
            if (typeof performance === "object" && typeof performance.now === "function") {
                now = performance.now().toString().replace('.', '');
            }
            counter = counter.prev;
            return `${now}${Math.random().toString(16).substr(2)}${counter.value}`;
        }
    }

    const randomIdGenerator = uniqueId();

    randomIdGenerator(); // 3519936476425aaa4f2a048 
    randomIdGenerator(); // 3519936472474f1e8119427
    randomIdGenerator(); // 35199364800000017a40a2d1eaa226

```

this [stackoverflow](https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript) thread has many more solutions.

Please comment below if you know any other techniques to generate uuid.
I made tool for taking notes fast on the command line.
Tags: showdev, rust
Published: 2018-10-21 11:48:04

---
title: I made tool for taking notes fast on the command line.
published: true
description: 
tags: #showdev #rust
---
Hello I'm nasa. I think that you can understand by looking at the title,I made a memo tool.

I usually write notes on the command line. However, I noticed that management of memos is troublesome as it is.
So I decided to create a tool that makes it easy to manage memos.

The source code is here.
https://github.com/k-nasa/rmemo


[![asciicast](https://asciinema.org/a/F65yWTfdnMyNgiyFhLjGO3mRZ.png)](https://asciinema.org/a/F65yWTfdnMyNgiyFhLjGO3mRZ)
## Installation
###On macOS
In order to publish to the official of homebrew I have to collect 50 stars.(Give me star)
```
brew tap k-nasa/homebrew-rmemo
brew install rmemo
```
###From source

```
cargo install rmemo
```

## Usage example
Create new note
```
$rmemo new
Title:
```
If you have set up a template, create a note based on it
```
$rmemo new -t
Title:
```
Deletes the note of the file name matching the argument pattern
```
rmemo delete hoge
hoge
2018-10-15hoge.md
2018-10-12hoge.md
2018-10-08hoge.md
Will delete those entry. Are you sure?
Are you sure?(y/n) :
```
If you want to write down ideas right now you can use quick command

```
$rmemo quick idea
```

```
$rmemo list
/Users/hoge/.config/rmemo/memos
│  hoge
│  └── hoge.md
│  test
│  └── test.md
├── 2018-10-16indicatif_memo.md
├── hgoehgoe.md
├── 2018-10-12iii.md
```
## Configuration
```toml
memos_dir = "/Users/asan/.config/rmemo/memos"  # Directory where note is stored
editor = "nvim"                                # The editor you want to use. I recommend nvim for no particular reason
selector = "fzf"                               # Selector you want to use. Please choose your favorite one
grep_command = "grep"                          # Set your favorite grep
template_file_path = ""                        # Set the template you want to use
enter_time_in_filename = true                  # Set it to false if timestamp is not required for file name
```
Conectayas – Connect four, Tic-tac-toe and similar connection games in JavaScript (September 2006)
Tags: connection, game, gamedev, javascript
Published: 2018-10-21 11:04:55

---
title: Conectayas – Connect four, Tic-tac-toe and similar connection games in JavaScript (September 2006)
published: true
tags: connection,game,gamedev,javascript
canonical_url: 
---

“Conectayas” is an open source Tic-tac-toe, Connect four (aka Four in a row) and similar style games (highly configurable) totally written in DHTML (HTML, CSS and JavaScript).

![Screenshot](http://dhtmlgames.com/conectayas/conectayas.gif)

It is my seventh DHTML game and was made in late 2006.

In fact, this game is not only a game but many since the player can configure it to play Tic-tac-toe, Connect-4 and other similar games. You can configure the number of human players (1 or 2 players), who will start playing first (first player or second player which can be either the computer or a human), board size, the necessary pieces in a line to win, the colour of the pieces and choose whether to use gravity or not (with gravity the pieces will fall down as in Connect-four).

You can also change the game behaviour easily by editing many of the configuration variables which are at the beginning of the script. To change the backgrounnd image you just need to replace it with another one.

This game only uses one image for the background which is not necessary to make it work, so all the rest you can see has been made using just pure HTML and CSS.

Official languages are Spanish and English.

You can find other modified and adapted versions of this game on the Internet, including one Opera widget and even a Drupal module.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X, BlackBerry Tablet OS, Android, iOS and others.

Play online in English: [http://conectayas.tuxfamily.org/conectayas\_english/](http://conectayas.tuxfamily.org/conectayas_english/)

Play online in English (mirror): [http://www.dhtmlgames.com/conectayas/conectayas\_english/](http://www.dhtmlgames.com/conectayas/conectayas_english/)

Play online in Spanish: [http://conectayas.tuxfamily.org/conectayas\_spanish/](http://conectayas.tuxfamily.org/conectayas_spanish/)

Play online in Spanish (mirror): [http://www.dhtmlgames.com/conectayas/conectayas\_spanish/](http://www.dhtmlgames.com/conectayas/conectayas_spanish/)

Official web site: [http://conectayas.tuxfamily.org/](http://conectayas.tuxfamily.org/) (mirror at [http://www.dhtmlgames.com/conectayas/](http://www.dhtmlgames.com/conectayas/)).

The repository can be found on GitHub: [https://github.com/jalbam/conectayas](https://github.com/jalbam/conectayas)
Mounted and BeforeDestroy Hooks in Vue.js functional components.
Tags: javascript, vue, hack
Published: 2018-10-21 09:39:47

---
title: Mounted and BeforeDestroy Hooks in Vue.js functional components.
published: true
description: A little hack how to implement mounted and beforeDestroy hooks in Vue.js functional components
tags: #javascript, #vue, #hack
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7lu4cihn2v8ymqcat7d8.jpg
---

When you using Vue.js [functional components](https://vuejs.org/v2/guide/render-function.html#Functional-Components) you have nothing except render function and it's context with some parameters.

I always prefer to use functional component instead of a stateful component in my shared components library at work and it works fine when I don't need state. But sometimes I need `mounted` and `beforeDestroy` hooks in a stateless component.

## The problem

Let's look at the example. We need a simple modal component that renders some overlay and block with passed children. Something like this:

```jsx
export default {
  functional: true,
  render (h, context) {
    return (
      <div class="modal">
        <div class="modal__overlay" />
        <div class="modal__content">{context.children}</div>
      </div>
    );
  },
};
```

I didn't provide any styles but it should look like [bootstrap modal](https://getbootstrap.com/docs/4.0/components/modal/#live-demo). Now if the window has y scroll opened modal will be moving with page scroll. To create better UX we should disable scroll when modal is opened and enable it again when modal is closed. When using usual components you can do it in `mounted` and `befoDestroy` hooks:

```js
export default {
  // ...
  mounted () {
    document.body.style.overflow = 'hidden';
  },
  beforeDestroy () {
    document.body.style.overflow = null;
  },
  // ...
};
```

But how to implement this logic without hooks? The answer is: using `<transition>` component with `appear` prop! 

## The solution

`<transition>` component has its own [hooks](https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks) for entering and leaving, so we can just wrap all our component in it and define hooks. The `appear` prop guarantees that our "mounted" hook will be fired when component mounts.

```jsx
const mounted = () => {
  document.body.style.overflow = 'hidden';
};
const beforeDestroy = () => {
  document.body.style.overflow = null;
};

export default {
  functional: true,
  render (h, context) {
    return (
      <transition
        appear
        name="fade"
        onAfterEnter={mounted}
        onBeforeLeave={beforeDestroy}
      >
        <div class="modal">
          <div class="modal__overlay" />
          <div class="modal__content">{context.children}</div>
        </div>
      </transition>
    );
  },
};
```

That's it! Now we have some hooks in a functional component. 

You can also improve your UI by implementing transition animations.


> Photo by Suad Kamardeen on Unsplash
Coding and What ?
Tags: discuss, coding
Published: 2018-10-21 07:44:51

---
title: Coding and What ?
published: true 
description: What goes along well with coding?
tags: discuss,coding
---
Coding involves problem-solving, decision-making etc what do you guys love doing along with coding which helps you to keep your workflow smooth and help your mind relax? 
For me, music does the job.
Show comments in GoDoc 
Tags: go
Published: 2018-10-21 06:15:52

---
title: Show comments in GoDoc 
published: true
description: 
tags: go
---

GoDoc show comments in code when runs `godoc` command with `notes` option.  The `notes` option can specify regular expression matching note markers to show(default is `BUG`).   

```bash
$ godoc --help
usage: godoc package [name ...] 
(snip)
  -notes string
    	regular expression matching note markers to show (default "BUG") 
``` 

```go 
package exter

type Exter struct {
}

func NewExter() {
	// TODO(who): implement
	return Exter{}
}

func (exter *Exter) Run() error {
	// BUG(who): Not return correct value
	return nil
}
```

For example, there is a code the above, doc shows as follows.


![doc](https://thepracticaldev.s3.amazonaws.com/i/djglmcrs1gb9lzznjll7.png)

But if you remove `(who)` from comment, comment not shows in GoDoc.   

This is because of the limit of GoDoc. 

The notes need to write a comment as `MARKER(uid): note body`. Also, `MAKER` needs 2 or more uppercase [A-Z] letters and a `UID` of at least one character.  

This is describing at `Note` type comment. 
https://godoc.org/go/doc#Note 

Regex for `MARKER` is here: https://github.com/golang/go/blob/035f9e8102d3b46877b7462fcd365324272d1d0e/src/go/doc/reader.go#L435

It is a little unusual for `(uid)` to be mandatory (at least for me ;) ), so be careful.
How to write a blog post 
Published: 2018-10-21 05:31:13

---
title: How to write a blog post 
published: true
description: Humble beginner looking for advice
tags: 
---

Good day DEVs.
I've been coding for about two years on Android now and I only just started learning JavaScript about a week ago and to tell the truth I am loving it.

I've been trying to write blog posts on the stuff I've learnt so far but can't seem to put down well enough like other posts I read and learn from. I'd really love some advice from the community on this one. And also does this count as a blog post  :-)
Hackference 2018 Recap
Tags: hackathons, hackerevents, hackference, techevents
Published: 2018-11-14 02:46:50

---
title: Hackference 2018 Recap
published: true
tags: hackathons,hacker-events,hackference,tech-events
canonical_url: 
---

This past weekend, I had to opportunity to head to the East Midlands and visit Birmingham for Hackference 2018. Friday was a 2 track conference (roughly broken into frontend and backend), and then Saturday and Sunday was a hackathon.

I hung out on the frontend track.. I gave my talk on delivering performant (and yet still beautiful) images (here is the [deck](https://www.slideshare.net/dougsillars/hackference)). Every talk was incredible, from the history of emojis, to a WebVR/voice interaction demo, controlling a drone with Web Bluetooth, a great SVG demo, and a push for everyone to work on the HTML5 standards. My mind was full of great ideas and theories after the day of talks.

On Saturday morning, we all met up to begin hacking. Lots of great prizes were at stake, and everyone was pumped to build stuff. Cloudinary asked me to be their representative, so I was there to support folks building things with Cloudinary’s image and video APIs. As I began talking with people, and learning what they were building, I discovered a unique aspect to Hackference: every project had a slight poke at trolling Mike Elsmore (the organizer and sole person behind Hackference this year). It was all done kindly, but the grand prize of the competition was to be awarded to the best troll of Mike (more on this later).

Of about 25–30 hacks, about 10 used Cloudinary, and they came up with some pretty cool stuff. The Cloudinary prizes (one year of Cloudinary PRO) went to Team Garbage and Mike T-shirt.

Team Garbage: Using a webcam, they took a photo of garbage, and uploaded the image to Cloudinary. Using [Google auto tagging](https://cloudinary.com/console/addons#google_tagging), the garbage is identified, and a light appears over the bin that the trash should go in (plastic, metal, glass, etc).

Mike T-shirt generator build a tool that [creates a t-shirt of Mike](https://mike-shirt-generator.now.sh/)by overlaying a random image of Mike onto a T-shirt.

My favorite Cloudinary integration won the King of trolls and a few other prizes as well. It is called “Presenter as a Service”, and it allows the user to add any image to a presenters talk. Here’s Mike showing off a photo of Birmingham.

![](https://cdn-images-1.medium.com/max/700/0*TvaAn4keWwhQulfX.jpg)

Here I am presenting a puppy

![](https://cdn-images-1.medium.com/max/500/0*LlqeoXTNDpcEqsky.jpg)

Dan has [written a blog](https://danielthepope.wordpress.com/2018/10/17/hackference-2018/) on his experience as the (sleep deprived) developer

Anyway, a great time was had by all, and I want to thank Mike for 1: putting on such a great weekend for so many people, and 2. being such a great sport on all of the hacks.

_Originally published at_ [_dougsillars.com_](http://dougsillars.com/2018/10/21/hackference-2018-recap/) _on October 21, 2018._

[![](https://cdn-images-1.medium.com/max/700/1*QCV7h713dLgy5COZTyBLdQ@2x.png)](https://bit.ly/2O1yNyY)

* * *
Protect your data with WarShield
Tags: security, ciphering, aes
Published: 2018-10-20 22:57:01

---
title: Protect your data with WarShield
published: true
description: How to use WarShield to protect your files
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dp75jumbxzo8dz0oiiav.png
tags: security, ciphering, aes
---

Security has been evolving with information technology, peoples find new ways to protect your data and privacy because we need to feel secure.
Sometimes you want to go deep into security and you start to put passwords everywhere. This is why WarShield was created.

# What is WarShield?
WarShield is a CLI tool made to cipher and decipher your files with a password using AES-256. It was made to ensure a full files protection inside a USB flash drive or an external hard drive. If those are lost, malicious peoples can take over your files and their data.

This is when WarShield comes with his fast and reliable solution.

# How to use WarShield?
WarShield can be installed with NPM:
```
npm install -g warshield
```

After the (very) short installation, you can use the `warshield` CLI.
```
warshield (encrypt|decrypt) (file)
```

The first argument is `encrypt` or `decrypt`, describing the wanted action. Don't worry if you try to decrypt something that isn't encrypted, it will not do it.

Next is the file (or folder) you want to encrypt/decrypt. If it's a folder, every files in it will be processed recursively.

Launching that command will make the program asking you the password you want or need to use to encrypt or decrypt the file.


When you launch the encryption/decryption, WarShield will scan all the wanted files first. If the selected file a folder, it can take a while depending on the files weight.

WarShield on NPM: https://www.npmjs.com/package/warshield/
Github repository: https://github.com/QuantumSheep/warshield/


Thanks to 💖 this article if you enjoyed it :)
Looking for ideas for my React Native app
Tags: discuss, reactnative, react, javascript
Published: 2018-10-20 20:41:37

---
title: Looking for ideas for my React Native app
published: true
description: Learning React Native by building a location based mobile app
tags: discuss, reactnative, react, javascript
---

Hi DEVs, I've recently started [learning React Native](https://learnetto.com/tutorials/how-to-build-a-location-based-app-in-react-native-part-1). I decided to share what I'm learning along the way by building small apps and writing tutorials.

The first app I'm building is a location-based app for exploring a city. Imagine you're walking around London and you have the app running on your phone in your pocket, and it tells you (via text to speech maybe?) when you're near an interesting place.

It's quite complex for me to attempt to build it in one go, so I'm breaking it down into very small chunks.

I've just finished building the first simple app that takes [co-ordinates (latitude, longitude) and reverse geocodes them into a human understandable address](https://learnetto.com/tutorials/how-to-build-a-location-based-app-in-react-native-part-1).

I have the following ideas for the next steps, but I'm curious to hear your ideas and suggestions.

* Display current location on a map automatically reverse geocoded to show the address.

* Track my location while walking/cycling and make a list of all interesting locations along the route. The tricky part here would be how often to make API calls.

* Read out descriptions of interesting locations when I'm close to one.

Do you have any ideas to make it more fun/interesting?