teleren/devto huggingface dataset:
Reddit Wordcloud Tutorial - Beginner Python Project
Tags: python, tutorial, beginners, webdev
Published: 2019-07-24 16:32:42

The best way to learn is to have fun while learning

In this video you can make a real world project using Python. We'll use the Wordcloud Python library and the Requests library to pull in data from Reddit. We can then visualize the most commonly used words in Reddit threads by automatically generation a wordcloud. 
{% youtube fCyBYXQG3uE %}
Docker..., Terms that we need to understand (wow bhs inggris !!! gakjuga, tetep bhs Indonesia... )
Tags: docker, discuss, beginners, indonesia
Published: 2019-07-24 15:51:58



Pada diskusi sebelumnya, kita telah membahas cara menggunakan Docker. Mulai dari instalasi, menggunakan perintah run dan pull, dan juga beberapa perintah lainya. Diskusi kali ini kita akan membahas beberapa hal seputar Docker.

#### Docker dari sudut pandang lain (BigPicture dari newbie)

Sebelum kita Docker lebih lainjut. Saya ingin membahas sedikit tentang Docker jika kita melihatnya dari sudut pandan yang lain. 

Kadang kita bingung mendengar istilah istilah di dunia container (*atau istilah kerenya Container Runtime Environments*) ini , mungkin selain Docker ada juga  container container yang mirip mirip, misalnya rkt, Mesos Containerizer, OpenVZ dan lain-lain. Balik lagi ke Docker, istilah docker misalnya image, container, registry dan lain lain yang akan membuat kita (terutama saya), menjadi bingung dan akhirnya malas untuk memcoba Docker  dan lainya yang mirip.

Karena itu untuk lebih memahami istilah istilah Docker, dalam diskusi ini saya ingin  membahas Docker jika kita melihat Docker dari sudut pandang  OOP (Object Oriented Programing).



Pertama istilah yang umum adalah **Docker registries**. Dalam Docker, registry adalah tempat untuk menyimpan **image**,  registry ini bisa berupa registry local atau registry public yang secara default adalah **Docker Hub**. Dalam pandangan saya, Jika kita masukan dalam  dalam  paradigma OOP, registry ini bekerja seperti Class, Jika dalam OOP adalah class yang menghasilan object, begitu juga registry yang akan menghasikan image yang disimpanya.



Kedua **Image**, produk (bisa berupa Os, WebAppdan lain lain) yang disimpan dalam registry. Image ini bisa  berupa image lokal atau image public. Dalam sudut pandang OOP, image ini seperti Object. Sama seperti Object, jika object merupakan merupakan representasi dari kumpulan instance. Begitu pula image yang merupakan representasi dari sekumpulan container.



Ketiga, **Container** merupakan image yang sedang berjalan. Dalam pandangan OOP instance merupakan object yang berjalan dan mempunyai nilai yang pasti, begitu pula container.  container merupakan image yang sedang berjalan dan mempunyai nilai yang pasti minimal Container ID (Dalam Docker). 



#### Kesimpulan

Pada diskusi singkat kali ini, kita membahas Konsep dari Docker jika kita melihatnya dari sudut pandang yang lain yang kita lebih mengerti. Pada diskusi selanjutnya kita akan membahas perintah perintah Dasar yang berhubungan dengan Container.
Front-End Analogies: Closure's Coffee — Partial Application
Tags: javascript, webdev, programming, beginners
Published: 2019-07-24 15:34:11

---
title: Front-End Analogies: Closure's Coffee — Partial Application
published: true
description: Explaining programming concepts through more-tangible examples.
tags: javascript, webdev, programming, beginners
cover_image: https://i.imgur.com/jXlBDH5.jpg
series: Closure's Coffee
---

### Ordering Coffee
#### Partial Application
Joe has a coffee addiction. It's not in the DSM-5, so who cares? Time to make a profit.

What do we know about this bozo? His name's Joe. He always gets two cups. One is going to be coffee with milk, but we'll say it in French—café au lait—to charge more. The second one, he likes to mix that up. Could be anything.

```javascript

"use strict";

customerName = (_personName) => {
    return `${_personName} wants `;
}

buyTwoDrinks = (_firstCoffeeName) => {
    const secondDrink = (_secondCoffeeName) => {
        return `${_firstCoffeeName} and ${_secondCoffeeName}.`;
    }

    return secondDrink;
}

let Joe = customerName('Joe');
// What kinda clown's name is this?
// Prolly doesn't know his order yet cuz he spent too much time honkin' his nose.

let JoesUsual = buyTwoDrinks('Cafe au Lait');
// Usual baristas [functions] are like,
// "I want both these drink orders [parameters] right damn now."
// This bro is chill about it. We've got the first one on-deck,
// but we know we have to wait a little bit.

// When Joe comes in over the course of the week to order,
// it might look a little like this:

console.log( Joe + JoesUsual('Espresso') );
// Joe wants Cafe au Lait and Espresso.

console.log( Joe + JoesUsual('Nitro Cold Brew') );
// Joe wants Cafe au Lait and Nitro Cold Brew.

// This is a lot easier and less error-prone than writing:

console.log( customerName('Joe') + buyTwoDrinks('Cafe au lait')('Chai latte') );
// Joe wants Cafe au Lait and Chai latte.

console.log( customerName('Joe') + buyTwoDrinks('Cafe au lait')('Flat white') );
// Joe wants Cafe au Lait and Flat white.

// Gotta save time. You ever seen Joe without his caffeine for too long?
// It's less clown college and more Dark Knight Returns.

```
Front-End Analogies: Closure's Coffee — Currying
Tags: javascript, webdev, programming, beginners
Published: 2019-07-24 15:33:45

---
title: Front-End Analogies: Closure's Coffee — Currying
published: true
description: Explaining programming concepts through more-tangible examples.
tags: javascript, webdev, programming, beginners
cover_image: https://i.imgur.com/jXlBDH5.jpg
series: Closure's Coffee
---

### Roasting Coffee
#### Currying
Kona is struggling with a coffee roaster. It's so old all the instructions wore off. Every time she puts in a pound of beans: poof. Burnt to a crisp.

Finally, management buys a roaster that isn't so terrible. Probably said it was their idea, too. One pound at a time? Sure thing, boss. It'll even tell you how much is left the the load, if you're real nice.

```javascript

"use strict";

// I didn't tell you this, but:
// Currying is the same as unary, accepts one parameter…

const coffeeRoaster_Multiary = (_scoop1, _scoop2, _scoop3, _scoop4, _scoop5, _scoop6, _scoop7) => {
    console.log ("_scoop1, _scoop2, _scoop3, _scoop4, _scoop5, _scoop6, _scoop7");
    return (`Roastin' time.`);
}

let coffeeRoaster_Unary = _scoop1 => {
    console.log(`6 more pounds.`);

    return coffeeRoaster_Unary = _scoop2 => {
        console.log(`5 more pounds.`);

        return coffeeRoaster_Unary = _scoop3 => {
            console.log(`4 more pounds.`);

            return coffeeRoaster_Unary = _scoop4 => {
                console.log(`3 more pounds.`);

                return coffeeRoaster_Unary = _scoop5 => {
                    console.log(`2 more pounds.`);

                    return coffeeRoaster_Unary = _scoop6 => {
                        console.log(`1 more pound.`);

                        return coffeeRoaster_Unary = _scoop7 => {
                            console.log(`All ${_scoop7} pounds loaded.`);
                            return (`Roastin' time.`);
                        }
                    }
                }
            }
        }
    }
}

coffeeRoaster_Multiary("1");
// "1, undefined, undefined, undefined, undefined, undefined, undefined"

// That one was incinerated, like Starbucks…

coffeeRoaster_Multiary("1", "2", "3", "4", "5", "6", "7");
// "1, 2, 3, 4, 5, 6, 7"

// Finally works if you're able to put all 7 pounds in at once.
// That's one big scoop.

coffeeRoaster_Unary("1")("2");
// "6 more pounds"
// "5 more pounds"

coffeeRoaster_Unary("3")("4");
// "4 more pounds"
// "3 more pounds"

coffeeRoaster_Unary("5")("6")("7");
// "2 more pounds."
// "1 more pound."
// "All 7 pounds loaded."

// With this newfangled machine, you can do it at your leisure.
// We were able to put a man on the moon,
// but this is so hard?

```
Chick in 3D Pixel World (No Javascript)
Tags: codepen, html, css, showdev
Published: 2019-07-24 15:24:48

<p>Pixel art in 3D world. A chick with many dreams, who walks around, endlessly just to chase it.</p>

<p>Hover on the chick to make it fly, and the chick could try to chase its dream quickly (Hopefully).</p>

<p>I just used CSS; <code>perspective</code> <code>transition-style: 3d</code> <code>animation</code> to achieve all of the effects here.</p>

<p>I also used HTML, and CSS loops for convenience.</p>

{% codepen https://codepen.io/takaneichinose/pen/zgrovE %}
Translate with the snake (Python)
Tags: python
Published: 2019-07-24 15:20:16

---
title: Translate with the snake (Python)
published: true
description: python 
tags: python
cover_image: https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FYIbKHvXvUp7by%2Fgiphy.gif&f=1
---
There are some sites that offer language translation. You may know Google translate which is one of them.

Did you know you can use those sites from <a href="https://pythonprogramminglanguage.com/">Python</a> code? Welcome to the jungle!

<img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FzC4YhpDY76OxW%2Fgiphy.gif&f=1">

To do so you need the modules requests and BeautifulSoup. These modules are used to make the web request and fetch data. The example code below translate a string from English to French.

    #!/usr/bin/python3
    import requests
    from bs4 import BeautifulSoup

    def getHTMLText(url):
        try:
            r = requests.get(url, timeout=30)
            r.raise_for_status()
            return r.text
        except:
            print("Get HTML Failed!")
            return 0

    def google_translate(to_translate, from_language="en", to_language="fr"):
        base_url = "https://translate.google.com/m?hl={}&sl={}&ie=UTF-8&q={}"
        url = base_url.format(to_language, from_language, to_translate)

        html = getHTMLText(url)
        if html:
            soup = BeautifulSoup(html, "html.parser")

        try:
            result = soup.find_all("div", {"class":"t0"})[0].text
        except:
            print("Translation Failed!")
            result = ""

        return result

    if __name__ == '__main__':
        print(google_translate("Hello World!"))

The important part here is the last line, a function call to google_translate with the text to translate as parameter.


If you run it:

    python3 example.py
    Bonjour le monde!

Related links:
* <a href="https://pypi.org/project/beautifulsoup4/">BeautifulSoup module, web scraping</a>
* <a href="https://pythonprogramminglanguage.com/">Learn Python programming</a>
* <a href="https://pythonprogramminglanguage.com/speech-recognition/">Speech recognition, text to speech</a>
Daily Challenge #23 - Morse Code Decoder
Tags: challenge
Published: 2019-07-24 15:13:01

---
title: Daily Challenge #23 - Morse Code Decoder
published: true
series: Daily Challenge
description: Decode Morse code to English.
tags: challenge
---

Using the power of programming, we've translated Pig Latin and told humans the time. Now for this challenge, you have to write a simple Morse code decoder. Today's challenge comes from user jolaf on CodeWars

>Your task is to implement a function that would take the Morse code as input and return a decoded human-readable string. 

> For example:
> `decodeMorse('.... . -.--   .--- ..- -.. .')`
> should return `"HEY JUDE"`
***

>C++/Go/JavaScript/PHP/Python/Ruby/TypeScript:` MORSE_CODE['.--']`
C#:` MorseCode.Get(".--") (returns string)`
Elixir:` morse_codes variable`
Elm:` MorseCodes.get : Dict String String`
Haskell:` morseCodes ! ".--" (Codes are in a Map String String)`
Java:` MorseCode.get(".--")`
Kotlin:` MorseCode[".--"] ?: "" or MorseCode.getOrDefault(".--", "")`
Rust:` self.morse_code`
Scala: `morseCodes(".--")`

**NOTE**: For coding purposes, you should use ASCII characters `.` and `-`, not Unicode characters.

I always thought it would be really cool to make a full-size Morse code decoder, taking audio as input and reading aloud the output. Perhaps I could start building it as a side project - it would give me an excuse to buy another Raspberry Pi.

Good luck, happy coding!
***
_Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
What React team is working on? (part two - forwards & backwards revealOrder)
Tags: react, suspenselist, revealorder
Published: 2019-07-24 15:05:55

Okay. Several days after merging this commit:
{% link https://dev.to/eddiecooro/what-react-team-is-working-on-part-one-suspenselist-component-1k9b %}
Sebastian opened another pull request to the master branch. In this pull request, He added two more options for the "revealOrder" property.

[Working DEMO](https://eddie-cooro.github.io/suspense-list-forwards-demo/)

# 1. forwards
This option makes the child suspense components to show their contents in order from the first one to the last.
For example, consider the same code from the previous post; but this time with "revealOrder" property set to "forwards":

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

Now if the FirstSuspendingComponent resolves first, it will show its content immediately. But if the SecondSuspendingComponent resolves before the FirstSuspendingComponent, It will wait for the FirstSuspendingComponent to resolve. After that, they both will display their contents at the same time.

# 2. backwards
"backwards" actually acts as the reverse of the "forwards." Every Suspense component will wait for other Suspenses which came after it to resolve before showing its content.

PR:
{% github https://github.com/facebook/react/pull/15918 %}
Getting Prettier, Eslint and Vscode to work together
Tags: prettier, eslint, vscode, javascript
Published: 2019-07-24 13:55:40

---
title: Getting Prettier, Eslint and Vscode to work together
published: true
description: Getting Prettier, Eslint and Vscode to work together
tags: prettier, eslint, vscode, javascript
---

For quite a while I've tried getting Prettier, Eslint and Vscode to work together, but never found a solution that satisfied me. Now, as I'm working on a new React project in my day job, I finally found some time to make it work. 

## Wait what are Eslint and Prettier?

Eslint is a javascript linter that can help you find syntax or other errors. Eslint can be extended by plugging in pre-defined configs or completely configuring it yourself. Paired with the plugin for vscode, it can show you errors as you type.

Prettier is a code formatter for [quite a few languages](https://prettier.io/docs/en/index.html), including javascript. You can have code being automatically or optionally formatted with it.

## Prerequisites

I assume you have basic knowledge about NPM and Vscode, as I won't cover it here. You need to have:

- Vscode installed
- NodeJS and NPM installed


## Install Vscode plugins

First of all install the Vscode plugins [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and make sure they're enabled.


## Install dependencies

```
npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier
```


## Setup the config files

Create an `.eslintrc` file in your project root.

In here we basically tell Eslint to:
- Extend from the recommended prettier config
- Register the Prettier plugin we installed
- Show Prettier errors as errors


```json
{
  "extends": [
    "plugin:prettier/recommended"
  ],

  "plugins": ["prettier"],

  "rules": {
    "prettier/prettier": "error"
  }
}
```

**Note**: Your eslint config can include many more rules. I'm keeping it simple and easy to grasp.

Next create a `.prettierrc` file in your project root. 

You can tweak these settings, or [add new ones](https://prettier.io/docs/en/options.html) as you like:


```json
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

```

## Enable formatOnSave in Vscode

Look for `formatOnSave` and check the checkbox, or add this line to `settings.json`:

```
"editor.formatOnSave": true,
```

## Try it out

If you kept the `.prettierrc` file like above, Vscode should now:

- indent your code with 2 spaces
- use single quotes instead of double 
- add semicolons add the end of each line

If you're having trouble try restarting Vscode.
Read data with pandas
Tags: python, data
Published: 2019-07-24 15:05:31

---
title: Read data with pandas
published: true
description: python, data
tags: python, data
cover_image: https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2Fblog.devart.com%2Fwp-content%2Fuploads%2F2010%2F07%2Fstatisticsystemsdb.png&f=1
---
In <a href="https://pythonbasics.org">Python</a> there's a module that helps you parse data. Data can be in many forms (files, tables, excel, sql, json). There exists so many data sources for historic reasons.

That module to work with data is named the <a href="https://pandas.pydata.org/">pandas module</a>.

You may know you can use the Pandas module for data analysis. But did you know there are many ways to read data?

    pd.read_csv(filename)
    pd.read_table(filename)
    pd.read_excel(filename)
    pd.read_sql(query, connection_object)
    pd.read_json(json_string)
    pd.read_html(url)
    pd.read_clipboard()

<img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fl4FGvUYI0tETAQwGk%2Fgiphy.gif&f=1">

Yes, you can read data from many sources. These methods allow you to quickly grab your data

    #!/usr/bin/python3 
    import pandas as pd
    data = pd.read_csv('yourfile.csv', header=None)

If you are using MySQL as source

    #!/usr/bin/python3
    db = MySQLDatabase(DATABASE_HOST, DATABASE_USER, DATABASE_PASSWORD, DATABASE_NAME)
    db_work_view = db.get_work_view()
    connection = db_work_view._db_connection
    df_people = pd.read_sql('select * from people', connection)

Reading an excel file

    df = pd.read_excel('File.xlsx', sheetname='Sheet1')

Well you get the idea. Pandas allows you to quickly fetch data from different data sources. It includes most of the existing data sources.

Related links:

* <a href="https://pandas.pydata.org/">Python Data Analysis Library</a>
* <a href="https://pythonbasics.org">Learn Python programming</a>
* <a href="https://pythonbasics.org/exercises/">Python exercises</a>
Do You Have What It Takes?
Tags: beginners
Published: 2019-07-24 14:53:05

The <a href="http://younghands.club/2019/07/20/welcome/">YoungHands.club</a> is up and running, a place quite unlike any other. Here's the opportunity, opened and ready, waiting for a while but not for ever - no opportunity ever lasts forever, no. 

Will you just nod and "heart" it and move on because not this or not that or too much of the other? Will you try and fail to even go over and try to get in? What will you make of it?
Bulk converts files to QR codes
Tags: python
Published: 2019-07-24 14:46:37

---
title: Bulk converts files to QR codes
published: true
description: python
tags: python
cover_image: https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FWwNtKiEuKH6FO%2Fgiphy.gif&f=1
---
What's the craziest way to take backups? The cloud? floppy disks? QR codes?

QR codes started with the Japanese automobile industry. They are graphical codes you can use to store data. 

You can quack QR codes with <a href="https://duckduckgo.com/?q=QR+hello+world&t=h_&ia=answer">duckduckgo</a>. Type "QR hello world" for it to generate a QR code containing "hello world". But did you know you can do it from code?

<img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.tenor.com%2Fimages%2F8c4cb0ca7303aa791c4458d496379b07%2Ftenor.gif&f=1">

### QR codes backup with Python

We'll convert files in bulk to QR codes with <a href="https://pythonprogramminglanguage.com/">Python programming</a>. This guide is for Linux computers.

Install zbar-tools and qrcode module

    sudo apt install zbar-tools

Then you can convert all (.py) files in a directory to qr codes.

    #!/usr/bin/python3
    import qrcode
    import glob
    
    files = glob.glob("*.py")
    for filename in files:
        data = ""
        with open(filename, 'r') as file:
                data = file.read()
    
        img = qrcode.make(data)
        img.save('qr-' + filename + '.png')

There's a limit to the file size, about 8 kilobytes. But for small files this actually works.

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

This creates a QR code when running the program for each python file in the directory (*.py).

You can decode a QR code with the command:

    zbarimg qr-qrfs.py.png

Then you can print all your files on paper. If they files fit into the QR code that is.

Related links:
* <a href="https://en.wikipedia.org/wiki/QR_code">QR code on wikipedia</a>
* <a href="https://linux.die.net/man/1/zbarimg">zbarimg program</a>
* <a href="https://pythonprogramminglanguage.com/">Learn Python</a>
Python pip, what's installed? 
Tags: python, programming
Published: 2019-07-24 14:26:45

---
title: Python pip, what's installed? 
published: true
description: python, programming, pip
tags: python, programming
cover_image: https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FjCodV34MoczjW%2Fgiphy.gif&f=1
---

You probably use pip thousands of time if you are programming Python. <a href="https://pypi.org/project/pip/">pip is the package installer</a> for <a href="https://pythonbasics.org">Python</a>. You can use pip to install packages from the Python Package Index and other indexes.

When creating a Python project, you do so in a virtual environment (or maybe you don't?). 

<img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FWwIe4phY9crpm%2Fgiphy.gif&f=1">

    pip install your_module

Then you install packages for your project. So how do you know what all the installed modules are?

Easy, there's a command 

    pip list

So if you want to know which version of a module you have, combine with grep.

    λ  ~  pip list | grep 'tensorflow'
    tensorflow (1.14.0)
    tensorflow-estimator (1.14.0)

If you are using Ubuntu Linux or similar, you may have the odd situation in which you have both pip, pip3, python and python3 installed. Did the Ubuntu creators have some evil plan?

<img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fl0HluOGg5nXebqJwI%2Fgiphy.gif&f=1">

In that case, just add 3 after the pip command. For other operating systems, you can just use Python and pip.

Related links:
* <a href="https://pypi.org/project/pip/">Python pip, package manager</a>
* <a href="https://pypi.org/">Python package repository</a>
* <a href="https://pythonbasics.org">Learn Python</a>
* <a href="https://pythonbasics.org/exercises/">Python exercises</a>
Like JavaScript? Join us at JavaScript and Friends
Tags: javascript, midwest, ohio, techtalks
Published: 2019-07-24 14:11:57

You like JavaScript, don't you? You want to hear some amazing talks from some of the greatest minds in the Midwest & Ohio Valley? Who wouldn't?!?!?!?! So come join us August 1 & 2 in Columbus, Ohio, for JavaScript and Friends. [Get all the details and tickets here!](https://javascriptandfriends.com).