teleren/devto huggingface dataset:
what is the perfect dev env desktop / distro for web devs ?
Tags: gnulinux, desktop, webdev, virtualisation
Published: 2020-01-12 09:59:53

IMHO the perfect dev env desktop / distro for webdevs is any desktop OS of your choice PLUS virtualbox PLUS xubuntu OR linuxliteos

https://www.virtualbox.org/
https://xubuntu.org/
https://www.linuxliteos.com/ (also makes a great desktop for non devs)

BTW linuxliteos say they will make a BIG announcement on 14 jan 20 so watch this space

https://www.linuxliteos.com/forums/
Periodic Table toy in Python
Tags: python, showdev
Published: 2020-01-12 09:14:38

---
title: Periodic Table toy in Python
published: true
description: A toy app in python
tags: python, showdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vx1pu7d13ed6ejsfv8uo.png
---

## Wat.

It's a thing that lets you assemble words using only the symbols on the Periodic Table. It's a console app and it's purty.

## Python 3

I've never committed to Python 3 before. I moved away from using Python in my day job a long time ago. But since 2 got deprecated, it's time to dive in. And you know what? It's not a big leap, and it's a nice warm pool.

I got the bug back from attempting [Advent Of Code](https://adventofcode.com/2019) in Python this year.

## Decisions, decisions

I started out with the data as a JSON file, which I imported like this:

```python
with open('data/elements.json') as data_file:
    self.elements = json.load(data_file)

with open('data/layout.txt') as layout_file:
    self.layout = layout_file.read()
```

but I'm still not sure how that works with distributing a package. So I converted it to a python module (which given that Python dictionaries are basically JSON was trivial)


## Learning

I learned a few things:

* f.strings
* argparse groupings

## Still to learn

* Proper packaging and distribution. I can't believe it but I've never done this in Python, despite having written really quite a lot of code over the years.

## Issues

* No tests. 
* Not thread-safe.
* The recursing solver function stores its stack in the object scope. This was done to save having to pass too many clunky variables around and tbh when I tried it I was off-by-one so I immediately gave up.

## Prety Pictuars

This has been my first venture into Github projects with a README that contains images, and I'm not totally happy with it. I have to:

1. keep the images in the main repo branch even though they're not part of the package
2. host the images elsewhere, which is a fragile dependency
3. use a separate branch and GitHub pages and link off to it, which is duplication 

I went with option 1 because it's simplest. I don't think I like any of them, though.

## Rationale

I used to have a periodic-table shower curtain and I'd read it while in the bathroom. I'd try to come up with as long a word or phrase as possible.

{% link https://dev.to/moopet/say-hello-world-your-own-way--14gp %}

I write essentially the same program in whatever language I'm learning. I've done it in C, PHP, Javascript, Perl and Haskell (though I've lost most of the code as the years passed)

## Where is this beast?

On GitHub as [moopet/pyriodic](https://github.com/moopet/pyriodic)

## tl;di (too long, didn't install)

You can see roughly what it does from an online version [moopet.net/periodic](https://moopet.net/periodic)

This isn't running the same code, or even in Python. It's PHP if you must know.

## Chocolate Bacon Counterespionage

![The words, "chocolate", "bacon" and "counterespionage" rendered in periodic table elements](https://thepracticaldev.s3.amazonaws.com/i/v3v2et3ttkkqu52689hf.png)
Keeping organized workflow?
Published: 2020-01-12 08:54:11

So latetly I've been noticing that my workflow is getting more and more complex. For example: 
I've been working with microservices, I had to run 3 services locally, communicate with database and 2 other external services. 

In total 6 services I needed to have open window. (4 tabs in browser, 2 in desktop programs). And then I had opened 2 instances of VScode for debugging etc... 

Usualyl there is Mail client and slack client open at all times. Few instances of Terminal window and file explorer.  
And atleast 2 browser windows. (regular and incognito for avoiding cache problems)

I usually have 1 browser only for web interfaces of programs that I use.

I've tried programs like station or tryshift but they don't allow you to pin your locally run programs in there. 

I tried to have a seperate chrome "dev" profile. And wanted to keep all web interfaces that I need for working open there. And then another profile for research. But somehow I didn't really like this. This is powerful since you can have seperate password manager for dev stuff.
Windows PowerShell / PowerShell Core 6.0でposh-gitとemacs風キーバインドと色付きlsを導入する
Tags: windows, git, powershell
Published: 2020-01-12 08:51:00

---
title: Windows PowerShell / PowerShell Core 6.0でposh-gitとemacs風キーバインドと色付きlsを導入する
published: true
tags: Windows, Git, PowerShell
date: 20200112T08:51Z
canonical_url: https://qiita.com/shiena/items/37032aacc241b1333e13
---
# はじめに

PowerShellを普段使いのgitコンソールにしたくて設定をまとめました。

# PowerShellGet (Windows PowerShellのみ)

posh-gitの1.0系はベータ版なので`Install-Module`コマンドで`-AllowPrerelease`オプションを使います。ですが`PowerShellGet`モジュールのバージョンが古くてオプションがないのでまずは`PowerShellGet`をバージョンアップします。

```powershell
Install-Module -Name PowerShellGet -Scope CurrentUser -AllowClobber -Force
```

- `-Score CurrentUser` : デフォルトのインストール先はシステムなので現在のユーザーにインストールします。
- `-AllowClobber` : 既存コマンドを上書き許可するために指定します。
- `-Force` : 複数バージョンのインストールを許可するために指定します。

コマンド実行後にWindows PowerShellを立ち上げ直してバージョンを確認します。

```powershell
Get-Module -Name PowerShellGet
```

Versionカラムが2系なら正しくインストールされています。
現在の最新版は[PowerShellGet 2.2.3](https://www.powershellgallery.com/packages/PowerShellGet/2.2.3)です。

# posh-git

[dahlbyk/posh-git](https://github.com/dahlbyk/posh-git)はgit-prompt.shと同じようにPowerShellのプロンプトにgitリポジトリの情報を表示するモジュールです。

```powershell
Install-Module -Name posh-git -Scope CurrentUser -AllowPrerelease
```

- `-AllowPrerelease` : プレリリース版を使うので指定します。

コマンド実行後にモジュールをインポートします。

```powershell
Import-Module posh-git
```

この後にgitリポジトリに移動して以下のようなプロンプトになれば正しくインストールされています。

![posh-prompt](https://raw.githubusercontent.com/wiki/dahlbyk/posh-git/images/PromptDefault.png)

# emacs風キーバインド

[PSReadLine](https://docs.microsoft.com/ja-jp/PowerShell/module/psreadline/)の`Set-PSReadlineOption`でemacs風キーバインドに変更できます。

```powershell
Set-PSReadlineOption -EditMode Emacs
```

# 色付きls

PowerShellのls(Get-ChildItem)は白一色ですが、[joonro/Get-ChildItemColor](https://github.com/joonro/Get-ChildItemColor)を導入すると色付きlsのように表示できます。

```powershell
Install-Module Get-ChildItemColor -Scope CurrentUser -AllowClobber
```

更に`Get-ChildItemColorFormatWide`コマンドで`Get-ChildItem | Format-Wide`を色付きで表示できます。

# 設定を保存する

Windows PowerShell / PowerShell Core起動時に実行したい内容を以下のように設定します。

`$profile` はプロファイルのパスが設定されているので次のコマンドで開けます。
ですがWindows PowerShellとPowerShell Coreでパスが違うので両方使う場合はそれぞれのパスのファイルに設定が必要です。

```powershell
# プロファイルを空ファイルで作成する
New-Item -Path $profile -Type file -Force

# メモ帳でプロファイルを開く
notepad $profile

# デフォルト(Restricted)ではスクリプトの実行が許可されていないので
# セキュリティポリシーを変更する
Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
```

```powershell:Microsoft.PowerShell_profile.ps1
Set-PSReadlineOption -EditMode Emacs
Import-Module posh-git
Import-Module Get-ChildItemColor
```

# 参考リンク

- [PowerShellGetをアップデートしよう](https://blog.shibata.tech/entry/2017/12/18/004105)
- [PowerShellGet 2.2.3](https://www.powershellgallery.com/packages/PowerShellGet/2.2.3)
- [dahlbyk/posh-git](https://github.com/dahlbyk/posh-git)
- [PowerShell Core のキーバインドをカスタマイズする【PSReadLine】](https://dev.classmethod.jp/etc/powershell-core-6-psreadline/)
- [PSReadLine](https://docs.microsoft.com/ja-jp/PowerShell/module/psreadline/)
🛸 Is JavaScript using pass by value or pass by reference? Let's find out!
Tags: javascript, beginners, webdev, tutorial
Published: 2020-01-12 08:20:24

To gain a deeper understanding of JS we'll have a look at methods and how arguments are passed. There are two ways: **pass by value** and **pass by reference**. Let's find out what's used in JS! 


Let's have a look at **primitive data types** or **primitive values** first.

```js
console.log(typeof "some string") // string
console.log(typeof true) // boolean
console.log(typeof 42) // number
console.log(typeof 42n) // bigint
console.log(typeof Symbol()) // symbol
console.log(typeof undefined) // undefined
```

You could also add **null** to the primitive types, but that's a confusing thing. It's an object, even though it should actually not be one. That's why I'll leave it out here.

So let's see how these primitive types are handled when we pass them to a method as arguments:

```js
let x = "dog"

function change(y) {
    y = "cat"
} 

change(x)

console.log(x) // dog
```

We can see in this example, that **x was passed by value**. That means, that the actual value of x which is `"dog"` was passed to the change method. Even though the argument was reassigned in the change method, that didn't change our **x**. 

If JS would use *pass by reference* not the value, but the reference to the variable would be passed into a method. Reassigned the argument would actually change the reference of the original variable.


Objects are a bit special, though. An object's value is its reference. Sounds confusing? Let's have a look at an example to explain it


```js
function changeMember(obj) {
    obj.name = "Doggo"
}

function changeReference(obj) {
    obj = {name: "Birdo"}
}

const cat = { name: "Kitty" }
changeMember(cat); // {name: "Doggo"}

changeReference(cat)
console.log(cat); // {name: "Doggo"}
```

You can see, that **also objects are passed by value**. It's not possible to change the original object by reassigning the argument of the `changeReference` method. But, and that can be confusing sometimes if you change a property of an object, that was passed as an argument to a method like in `changeMember`, that change will be reflected in the original object. That's because the value of an object is basically just its reference. When calling `changeMember` we're not trying to reassign the variable, but we change a property, which also changes the underlying referenced object.

---

Want to get better at Web Development?
[🚀🚀🚀subscribe to my weekly ✉️newsletter](https://codesnacks.net/subscribe/)
Home Network NAS for Cheap
Tags: nas, network, disk, drives
Published: 2020-01-12 08:15:09

# What I did to save money on NAS storage

## Problem
My home network is slowly growing and I have had a cheap DLink 2 bay NAS drive for the last few years.  The Network Attached Storage has served its purpose for the things I have needed and supports Time Machine backups, media server, and file storage solutions.

I was starting to out-grow the 2-bay drive after wanting to backup the backups of year's worth of files with the ever growing collection of photos and documents. I also found that large transfers were taking far too long and hovering around the ~30mbps range. So I did some shopping around...


## Solution
A lot of NAS drives are aimed at workplaces and were way out of the price range of my budget so I looked for other solutions and here's what I did.

* Purchased a 4 bay USB 3.0 external drive enclosure
* Filled the enclosure with my old drives (plus one new!)
* Installed Ubuntu on an old dual core laptop
* Formatted the drives to ext4 (for better performance)
* Installed a samba server and configured it to share my drives
* Installed an AFP server for Apple Time Machine
* Installed Plex Media Server

## Outcome
The old laptop had a very early USB-C port so I managed to get a Gigabit Ethernet adapter to improve transer speeds.  Overall, I am very pleased with the outcome. I feel like I have achieved transfer speed and storage space that will keep me satisfied well into the future all for about a 5th of the cost of the commercially available NAS drives.  I am currently getting ~115mbps transfer rates and I believe this is due to the restrictions in disk speed.

Are you interested in mining using solar power? [Read this](https://dev.to/howbotnik/solar-powered-mining-executer-5g5p)
Beginners Guide to props and useState in ReactJS
Tags: react, beginners
Published: 2020-01-12 08:07:24

I started my Journey to learn ReactJS by the end of 2019, I have learned Angular and Flutter SDK by making small projects that use the basic concepts of that language/framework. I am trying to do the same with ReactJs. 

You can Easy SetUp ReactJs [by following this link](https://reactjs.org/docs/create-a-new-react-app.html)
 
I made a simple app to list down my goals. React Bolier-Plate code comes with a default Component call App.

A React component is a function that returns JSX(JSX is an XML/HTML-like syntax).
 
Using Components you can easily code individual features and tie them together, My app had two features first was to create a goal and second to list the created goals. The Creation of the Goal was done with the help Of NewGoal Component as I was dealing with user input I had to make use of useState hooks and also for communication between components I used props.

You can get to know more about useState hooks and props [by following this link](https://reactjs.org/docs/hooks-state.html)


In the NewGoal component, there is a simple form with an onSubmit attribute along with an input element and a button, the input element passes the entered text to function called addGoalHandler which sends the value to the App Component with the help of props.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kufzipkoapu9tqlahyep.png)


The Second Component called GoalList which is responsible to list the Goals, this component received an array of goals from the App Component and render in an unordered list.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tpw09y3a03laizk8kb5c.png)


The App Component acted as a root-component which was responsible to get the values from the  NewGoal Component and send it to the Goal List Component.  


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/a8tbixylvt9kexv2u40j.png)


https://github.com/AshokNaik009/react_refresher
A bookmark reading list for programmers
Tags: tech, programming, discuss
Published: 2020-01-12 07:56:56

---
title: A bookmark reading list for programmers
published: true
description: A bookmark reading list for programmers
tags: tech, programming, discuss
---

I created a bookmark reading list for programmers

I'm sure that many programmers like me, don't know what's good Github repo to give a star, what're Github users to follow, any interesting articles to read every day or where to register an email newsletter... So I created a bookmark reading list: https://bookmark.duthaho.com, it will be updated every week to be included a ton of useful links, articles.

I don't know if it is useful for you, but give it a star if it does ; ). Your comments here will be very appreciated.
dont just make your code pretty, make it beautiful with prettier
Tags: node, prettier, javascript, json
Published: 2020-01-12 07:56:15

dont just make your code pretty, make it beautiful with prettier

https://prettier.io/

create a .prettierrc file and CHOOSE your favorite (most beautiful options)

my favorite options are
```json
{
  "quoteProps": "consistent",
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2
}
```
what are yours ?

you can even set different options (and parsers) for .JS and .JSON files or UNKNOWN files if you use prettier overides
```json
{
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
    {
      "files": "*.js",
      "options": {
        "parser": "flow"
      }
    }
  ]
}
```

{% glitch osde8info-opensky file=prettierrc %}
Morris In-order Tree Traversal
Tags: python, leetcode, beginners, algorithms
Published: 2020-01-12 07:55:20

This is part of my series where I memo learning from LeetCode. If you have better solutions or ideas, please leave a comment!


## The pattern of Tree Traversal

Here are three patterns for Tree Traversal.  
Each patten has only one order.

- Pre-order Traversal
    - root -> left -> right
- In-order Traversal
    - left -> root -> right
- Post-order Traversal
    - right -> left -> root

## Problem

Today's problem is about In-order Traversal.
   
[Binary Tree Inorder Traversal
](https://leetcode.com/explore/learn/card/data-structure-tree/134/traverse-a-tree/929/)

>Given a binary tree, return the inorder traversal of its nodes' values. 
>Example:   
>Input: [1,null,2,3]  
>Output: [1,3,2]
  
We have to put the values of Input in In-order, which is `left -> root -> right`.  
  

## Approach

To solve the problem with Morris In-order Tree Traversal, we have to follow the rules below.


1. if current has no left child,
  - Add current's value to output.
  - `current = current.right`.

2. if current has left child,
  - make the current the right child of the rightmost node in current's left subtree.
  - `current = current.left`

note: Don't forget the original current left to be null to avoid infinite loops in rule.2  
 
  
Here is the example of the traversal.  
  

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/dmn78suexlsmib1a5exa.jpeg)



## Solution:  Morris In-order Tree Traversal 
```python
class Solution:
    def inorderTraversal(self, root: TreeNode) -> List[int]:
        output = []
        current = root
        
        while current is not None:
            if current.left is None:
                output.append(current.val)
                current = current.right
            else:
                predecessor = current.left
                while predecessor.right:
                    predecessor = predecessor.right 
                predecessor.right = current
                tmp = current
                current = current.left
                tmp.left = None
        return output 
```

# 



Thank you for reading this article!
I always welcome your feedback, question, and idea.
Creating the Document Structure Using HTML
Tags: html, beginners, tutorial, webdev
Published: 2020-01-12 06:53:20

OBJECTIVE : Structure the UI by using semantic markup, including markup for search engines and screen readers, such as Section, Article, Nav, Header, Footer, and Aside; create a layout container in HTML. 

<strong>Semantic Elements</strong> clearly describe their meaning to both the browser and the developer. 

Some <em>and I think all the new</em> HTML semantic elements include: 
<ul><li>&lt;article&gt; - Defines self contained areas on a page. </li>
<li>&lt;aside&gt; - Like a sidebar, it defines smaller content areas outside the normal layout of the webpage.</li>
<li>&lt;details&gt; - Defines additional details that the user can choose to view or hide.</li>
<li>&lt;figcaption&gt; - Defines the caption of a figure eg. an image.
</li>
<li>&lt;figure&gt; - Groups together an image and caption</li>
<li>&lt;footer&gt; - Defines the footer section of a document or section in the document</li>
<li>&lt;header&gt; - Defines the header section of the document or a section in the document</li>
<li>&lt;main&gt; - Specifies the main content of a document.</li>
<li>&lt;mark&gt; - Defines marked or highlighted text</li>
<li>&lt;nav&gt; - Defines navigation links </li>
<li>&lt;progress&gt; - Represents the progress of an objective or task.</li>
<li>&lt;section&gt; - Defines a section in the document</li>
<li>&lt;summary&gt; - Defines a visible heading for &lt;details&gt;</li>
<li>&lt;time&gt; - Defines date and time</li></ul>

Yep that is about it on Creating the document structure. The next post will be on Writing Code that Interacts with UI Controls and hopefully I will have learned how to embed code snippets and images. 

Thank you and comments and discussions are welcome.
Introduction
Published: 2020-01-12 06:15:15

Hello all! My Name is Saad. I'm 19. Currently studying to become a Cloud Native & MERN Stack Developer and seeking to learn more in dev community. I'm also interested in learning Artificial Intelligence in future. I also love blogging and reading books. Technologies i've learned so far are:
Docker, Kubernetes, HTML/CSS and now i'm learning JavaScript.
It feels good to be a part of such an interesting and inviting online community here!

dev #javascript #discuss #beginner
PSA on Docker Images
Published: 2020-01-12 05:10:30

I was surprised to find that the `ubuntu:latest` tag was actually quite old.

The way it seems to work is this:

`ubuntu:latest` points to the last LTS release (now 18.04 which is pretty outdated)
`ubuntu:rolling` points to the last released version of ubuntu (currently 19.10).
`ubuntu:devel` points to the next to-be-released version of ubuntu (currently 20.04)


My thoughts on when to use each:

Broadly `ubuntu` as a base image isn't what I'd use for applications anyways, I'd use a base image like `node` or if making something myself I'd use an `alpine` base image. I mostly use `ubuntu` base images for docker images that I'll be using short term or interactively.

`ubuntu:latest` I probably won't use this ever again.
`ubuntu:rolling` I'll use this pretty much every time. Latest packages. Won't change on me. Drops support "soon" but if it does drop support I can just rebuild and I'll be on a supported image.
`ubuntu:devel` I'd only use this if I was specifically trying to get access to a bleeding-edge version of a package, probably on my way to getting something else to work.
Laravel 6 Create Word Document File Example
Published: 2020-01-16 03:53:05

---
title: Laravel 6 Create Word Document File Example
published: true
date: 2020-01-12 05:01:29 UTC
tags: 
canonical_url: https://www.itsolutionstuff.com/post/how-to-create-word-document-file-in-laravelexample.html
---

This article will provide you how to create work document file in laravel in this post i want to share with you simple example of how to generate word file in laravel you just need to follow few step to creating word file in laravelIn todays world we sometimes require to create word document