teleren/devto huggingface dataset:
Arrow Functions
Tags: javascript, beginners, functions, es6
Published: 2018-11-16 20:50:40

---
title: Arrow Functions
published: true
description: 
tags: JavaScript, Beginner, Functions, ES6
---

I haven't used arrow functions at all in my journey through JavaScript, but I was introduced to the idea that arrow functions carry over or bind the value of "this". Before ES6, web developers had to bind "this" by setting it equal to a variable or by using the "bind" method. Here is an example of a function I used in one of my homework assignments.  

![A submit listener without an arrow function](https://thepracticaldev.s3.amazonaws.com/i/8raqyckmfi56gs3rp9ep.png)

It's just a basic event listener that will fire once the user submits the form. The only thing I want you to take note of is the value of "this" inside the initial function and after the ".then(function ()". 

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

As you can see, "this" has different definitions. If we want the value of "this" to carry over to the next function, then we can simply change ".then(function ()" to ".then(() =>". I won't show the change in the code to avoid redundancy, but I want to demonstrate that "this" will now be equal to what "this" was in the containing function. 

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

Arrow functions also do not require you to use the return keyword, or use parenthesis if only using one parameter.


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

If we needed more than one parameter, then parenthesis are required. 

##TL;DR

Arrow functions bind the value "this", implicitly use the "return" keyword, do not require parenthesis if only using one parameter, and make our code much more concise and easier to read. One thing to note is that once you use an arrow function, you cannot unbind the value of "this" inside of that function. For general use, it is better to use "function" in the global scope and avoid using arrow functions as constructors!
Faster code editing in Visual Studio Code
Tags: productivity, devhelp, webdev, vscode
Published: 2018-11-19 18:01:40

---
title: Faster code editing in Visual Studio Code
published: true
description: Code editing productivity features
tags: productivity, devhelp, webdev, vscode
series: VSCode productivity features
---

Here are some features that you often forget when you are trying to make a quick change and taking longer to do so. Code editing features are the ones that will help you the most because, well, most of the time you are writing code. Let's get started:

## 1) Copy/cut whole line 
## `CTRL` + `C` and `CTRL` + `X`

Okay okay, I know you probably know about these shortcuts since you were 5 but there is a spin to it in VSCode (and some other IDEs). Without selecting anything, if you use `CTRL` + `C` or `CTRL` + `X` it will copy and cut, respectively the whole current line.

This saves you a total of 3 keystrokes (`HOME`, `SHIFT` + `END` and lastly `CTRL` + `C` or `CTRL` + `X`). This blends in well with code editing since you usually work at the level of lines in a source file.

Example video:
{% instagram BqPtRdrlOO4 %}

## 2) Move/duplicate line above/below
## `ALT` + `↑`/`↓` and `SHIFT` + `ALT` + `↑`/`↓`

This is self explanatory. Moving/duplicating a line will be faster than copy/cut 
and pasting the whole line.

Example video:
{% instagram BqSapiJFHno %}

## 3) Toggle comment on line (`CTRL` + `/`)

This really is much faster than commenting lines manually, especially when you have many lines to comment since it automatically comments all lines that are in a selection (whether or not you have the whole line selected).

There are shortcuts for commenting/uncommenting lines (`CTRL` + `K` with `CTRL` + `C` and `CTRL` + `K` with `CTRL` + `U`) but, aside from their cumbersome default shortcuts that can be changed I rarely find myself using them. Have you found a use case for this?

Example video:
{% instagram BqXHLu2llTK %}

## 4) Indenting lines (`CTRL` + `[`/`]`)

I have the bad habit of hitting `HOME` and then `TAB` or `SHIFT` + `TAB` to indent/un-indent a line. This feature saves you the hassle of going to the start of the line and has a very intuitive default shortcut.

*Note here: `TAB` and `SHIFT` + `TAB` works the same way if you have more than one line selected*

Example video:
{% instagram BqUxXZrFXMi %}

## End

{% user giancarlopro %}

Thanks to giancarlopro for suggesting a post about these features!

 * Did you know about the copy/cut whole line shortcut?
 * What other features would you like to see next?
Changelog: New StackBlitz Liquid Tag
Tags: meta, changelog, stackblitz
Published: 2018-11-19 17:44:59

---
title: Changelog: New StackBlitz Liquid Tag
published: true
description: StackBlitz embeds are now easily available with the new StackBlitz Liquid Tag!
tags: ["meta", "changelog", "stackblitz"]
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2392l7v5d12sxsasnuzw.png
---

*A new challenger approaches!*

Joining the likes of the various other embedded code environments such as CodeSandbox, Codepen, and Glitch, there is a shiny new StackBlitz Liquid Tag! [StackBlitz](https://stackblitz.com/), the online IDE for web applications powered by Visual Studio Code, has become the go-to online editor solution for many developers, many of whom even use StackBlitz to power their documentation examples. (such as the Angular team)

To use the liquid tag, simply add your project ID to the liquid tag. This may be the auto-generated ID when you created the project, or whatever you renamed your project to. Like so:

`{% stackblitz ball-demo %}`

{% stackblitz ball-demo %}

There you have it! Enjoy the awesomeness that StackBlitz can bring to your blog posts! 🎉
Papers We Love: Raft
Tags: pwl, discuss, distributed
Published: 2018-11-19 17:40:31

---
title: Papers We Love: Raft
published: true
description: 
tags: pwl, discuss, distributed
---

Welcome back to Papers We Love!  This week, we'll be dipping our toes into the waters of distributed computing with the Raft paper.  Raft is a consensus algorithm - in short, it's an algorithm that makes sure that a system stays reliable in the face of crashes.

I suggested we read this paper because I recently finished reading "A Philosophy of Software Design" by John Ousterhout, of Tcl fame.  A lot of the examples in that book refer to RAMCloud, a distributed storage system, and the book mentions that RAMCloud uses Raft.  I didn't know that much about Raft before reading this paper other than that it's a consensus algorithm and it's supposedly much simpler than Paxos, another popular consensus algorithm, so I figured it would be a good introduction to talking about distributed systems.  You can read the paper here:

https://ramcloud.stanford.edu/raft.pdf

A handy companion to the paper is The Morning Paper's breakdown [here](https://blog.acolyer.org/2015/03/12/in-search-of-an-understandable-consensus-algorithm/).

I enjoyed the paper, but I feel like there was information missing from the paper, or at least information I didn't pick up on. For example, one thing I wonder is how Raft manages to be partition tolerant; if a netsplit occurs and you have two separate systems accepting requests for a few seconds, how does the system reconcile that when the partition goes away and a single leader emerges?  From the sound of it, the partition that did the most work wins.  I'm guessing that Raft is more about "how do we handle a bad server or two" rather than "how do we handle a situation in which the Internet connection between data centers goes down".

Two details I really enjoyed was the use of randomness in leader elections, and the use of fork's copy-on-write property for snapshotting.  Randomness is such a useful tool, and I think making use of copy-on-write in this way is such a clever trick!
A (funny) rap song about tech recruiters
Tags: showdev, programming
Published: 2018-11-13 19:32:39

---
title: A (funny) rap song about tech recruiters
published: true
description: https://www.youtube.com/watch?v=_w9taH8Kkvw
tags: #showdev, #programming
---

Here is the song link: https://www.youtube.com/watch?v=_w9taH8Kkvw

Quick background on this project/channel: I'm a full time programmer and I love making rap music. I see a lot of humor in our profession/industry, and thought it would be fun to combine the two.

Here is what I've been thinking about for monetization:
1. Paid sponsors: depending on the level of contribution, they could get a shoutout/posting in the YouTube description, or an annotation on the video
2. Swag gear: t-shirts, hats, etc. (this is in progress)
3. Getting proprietary beats and making an album (I've gotten a few comments from people saying they would buy an album)
4. Donations (this is live: https://www.patreon.com/stdoutrap)

My questions are:
1. Are the monetization plans valid? Is there anything I am missing?
2. What should I be doing to get more exposure? (already posting on HN, Twitter, dev.to, and soon Reddit)
The 7 Most Popular DEV Posts from the Past Week
Tags: top7, bestofdev
Published: 2018-11-19 17:25:19

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi, bestofdev 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

#1. What the for loop?

How facebook uses a for loop to prevent JSON hijacking. What other methods have you seen? 

{% link https://dev.to/antogarand/why-facebooks-api-starts-with-a-for-loop-1eob %}

#2. Universal Reading

A curated list of non-technology-specific books recommended for all devs to read -- from data analysis to leadership to personal effectiveness.

{% link https://dev.to/bosepchuk/29-must-read-programming-books-2n45 %}

#3. Beyond Basics

Got your `select * from x where y` queries down? Now it's time to learn about SQL Joins! 🤝

{% link https://dev.to/helenanders26/sql-series-all-about-sql-joins-15ol %}

#4. From local script -> Production

How to containerize a python process to end up with a working Docker image.

{% link https://dev.to/thejessleigh/dockerizing-a-simple-python-process-2gdk %}

#5. Community support ❤️

A thread for anyone interesting in giving or receiving feedback on their portfolios. 

{% link https://dev.to/aspittel/portfolio-advice-thread-56g9 %}

#6. Find your balance

Anna shares how they've finally found balance while juggling a full-time job, side projects, staying healthy, and living life! This post is all about what they learned from their struggles along the way. 

{% link https://dev.to/simoroshka/full-time-side-projects-learning-and-staying-sane-328l %}

#7. What's your go to album?

I've always had an on/off relationship with listening to music while doing any sort of work. When I do, it's generally electronic and lyric-less. This thread has lots of recommendations for all genres :)

{% link https://dev.to/hus_hmd/favourite-albums-to-listen-to-while-coding-25fb %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
How to retry when React lazy fails
Tags: react, javascript
Published: 2018-11-19 17:09:09

---
title: How to retry when React lazy fails
published: true
description: React 16.6 has been released and it's now easier than ever to do code split within our React applications by using lazy and Suspense. After a few days monitoring a production application that is using lazy, I noticed a couple of client-side errors when downloading asynchronous modules. Learn how to mitigate this.
tags: react, javascript
canonical_url: http://goenning.net/2018/11/16/how-to-retry-dynamic-import-with-react-lazy/
---


React 16.6 has been released and it's now easier than ever to do code split within our React applications by using lazy and Suspense.

If you don't know what I'm talking about, you should definitely read this [https://reactjs.org/blog/2018/10/23/react-v-16-6.html](https://reactjs.org/blog/2018/10/23/react-v-16-6.html)

After a few days monitoring a production application that is using lazy, I noticed some client-side errors like this:

```
Loading chunk 6 failed. (error: https://.../6.4e464a072cc0e5e27a07.js)
Loading CSS chunk 6 failed. (https://.../6.38a8cd5e9daba617fb66.css)	
```

**Why?!**

I don't actually know why, but I can only assume this is related to the user network. Maybe they are on a slow 3G and there was a network hiccup? That's not a rare event, right?

Alright, if that's true, how do we solve that?

We can do the same thing that everyone does when a network request fails: retry it! 😄

**How?**

Did you know that the **import(...)** function that we use on lazy is just a function that returns a Promise? Which basically means that you can chain it just like any other Promise.

Below you can find a basic implementation of a retry function.

```javascript
function retry(fn, retriesLeft = 5, interval = 1000) {
  return new Promise((resolve, reject) => {
    fn()
      .then(resolve)
      .catch((error) => {
        setTimeout(() => {
          if (retriesLeft === 1) {
            // reject('maximum retries exceeded');
            reject(error);
            return;
          }

          // Passing on "reject" is the important part
          retry(fn, retriesLeft - 1, interval).then(resolve, reject);
        }, interval);
      });
  });
}
```
> Source: [https://gist.github.com/briancavalier/842626](https://gist.github.com/briancavalier/842626)

Now we just need to apply it to our lazy import.

```javascript
// Code split without retry login
const ProductList = lazy(() => import("./path/to/productlist"));

// Code split with retry login
const ProductList = lazy(() => retry(() => import("./path/to/productlist")));
```

If the browser fails to download the module, it'll try again 5 times with a 1 second delay between each attempt. If even after 5 tries it import it, then an error is thrown.

That's all! 🎉

Thanks!
2 ways to learn how to code
Tags: codenewbie, beginners
Published: 2018-11-19 16:50:28

> After two years of programming, I can see two ways to learn to code.

⚠️ This is my opinion, if you don't agree with me don't hesitate to give your mind in a comment ⚠️

# Practical way 

When I started programming two years ago, I was 13, I still wanted to code without reading documentation or without to know basics.

That's how I started to learn HTML, then I learned PHP, in the beginning, I learned the Copy/Paste Oriented Programming. But over time I learned a lot of things through practice. I started to stop copy paste and to test the libs I was using by testing all methods/functions/class which was in those libraries. And that's how I discovered the practical way to learn to code.

## Good points

* Fast to learn

* Very fun

## Bad points

* You can skip something important
* It is difficult to debug something when you didn't read the documentation.

# Theoretical way

Lately, I discovered the theoretical way. I wanted to learn how to use React. So I went to the getting started and the documentation offers to way to learn React, I decided to try practical way and... I didn't understand anything. Since a few months, I need to know how it works behind the code to use something so I decided to read the theoretical guide and I understood everything.

## Good points

* You know how it works
* Easier to debug

## Bad points

* It takes a lot of time
* It is sometimes boring

# What I prefer

Like I said, since a few months I need to know how it works behind my code to understand how to use something. That's why I started to read a lot of documentation and to code less.

# What should you use

I can't say you should use this one because it's personal. To answer this question, you have to try those two ways to know what you should use.
Introduction to Apache Ignite
Tags: apache, ignite, java
Published: 2018-11-18 21:42:19

---
title: Introduction to Apache Ignite
published: true
description: A quick start guide to Apache Ignite
tags: apache, ignite, java
---

![Apache Ignite](https://ignite.apache.org/images/Ignite_tm_Logo_blk_RGB.svg)

[Apache Ignite](https://ignite.apache.org/) is a distributed caching platform that allows for transactions. It is capable of scaling to 1000s of nodes, while providing high speed memory accesses.

The simplest ways to utilize ignite is as key-value pair. This allows a user to get up and running quickly.

### Getting Started

Ignite can be executed as a standalone application or within the application utilizing it. As a standalone application it must be executed in a server mode. This means it will be responsible for storing and serving data. However when executed within another application, it can be started in server or client mode. In client mode, the application is not responsible for storing or serving data.


### Configuration

Ignite has two configuration steps prior to being used. The first is defining the cluster discovery mechanism and the second is defining the cache.

![Ignite Clustering](https://files.readme.io/9287d3c-ignite-deploy.png)

In Ignite the cluster is the set of nodes sharing the data contained with a cache or caches. Some samples that ignite provides to define the cluster are:
 - Local Only: The cluster is this single node only
 - Multicast
 - Service:
 - ZooKeeper

The simpliest way to set up a Ignite instance is to do the following:
```java

Ignite ignite = Ignition.start()
```
This will start up your instance with system defaults.

Now once you have the main Cluster instance, you can define a cache. Once again many configuration values can be tuned depending on your use case. Some examples include:
 - Backup numbers
 - Management Type
 - Eviction Type
And many others. However the simplest way to define a cache is to just give it a name.
```java
IgniteCache<Long, DTO> cache = ignite.createCache("SAMPLE_CACHE")
```

### Putting it all together

From this point the on the idea of using the cache is dependent on the environment it must be placed into. As a sample I've put together a small Spring Boot Application that utilizes Ignite [here](https://github.com/bszeliga/ignite-intro/tree/master/example-1/server). Compared to the code snippets above, there is not a whole lot of additional Ignite setup. 

### Not Discussed, but still Awesome

Ignite provides a lot of additional built in capabilities that are worth mentioning but not discussed above. Some of the ones that catch my eyes:
 - Distributed computation
 - Distributed locks
 - Machine Learning modules
 - Distributed atomic reference types
 - Service Grid
 - and many more.

As you can see, Apache Ignite is a flushed out caching system that provides many functionalities. I would highly recommend it when evaluating other solutions.


#### References:
{% github bszeliga/ignite-intro %}
Welcome Thread - v22
Tags: welcome
Published: 2018-11-19 15:17:21

---
title: Welcome Thread - v22
published: true
description: Introduce yourself to the community!
tags: welcome
---

Hey there! Welcome to dev.to!

![Hello Internet, in alarm clock font](https://media.giphy.com/media/l3q2Db419cJkNRYAM/giphy-downsized-large.gif)

Leave a comment below to introduce yourself to the community!✌️

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment and say hello or ask them a question. 👋

3. Or answer this: Do you like working remotely? Why or why not?
Few Helpful CLI Tools for Managing Kubernetes 
Tags: kubernetes, devops, productivity
Published: 2018-11-19 14:38:08

When I first started out with Kubernetes, one of the things I learned is that managing multi clusters and kube configs is not easy. So over time I kept scavenging for github and tools that could accommodate my needs to improve productivity as well as avoid human error. 


While some love to set their environment variables for multiple kube config paths, I actually hate it because one little mistake and you could be in different environment without even knowing. So I have all my cluster info in one kube config.

For that issue I've been using a cli tool called 

[kubectx](https://github.com/ahmetb/kubectx) - I can switch between clusters by just hitting the tabs and because I use zsh with kubernetes module, it makes sure that I am on the right cluster. 

![alttexthere](https://github.com/ahmetb/kubectx/raw/master/img/kubectx-demo.gif)

When dealing with multi clusters, well there is many namespaces as well. Sure I could just go ahead and do stuff like 

```
kubectl get pods -n someNamespaces
```

Thats bit boring and when doing something like command below it can bite you in the A$$

```
kubectl create -f /yeya/this/is/for/qa.yaml -n ProdNamespace 
```

So instead of appending --namespace SomeNamespace, I chose to be always in a namespace I need to be with tool called

[Kubens](https://github.com/ahmetb/kubectx) - which is made by same GH author as above, with easy brew installation. 

![kubens](https://github.com/ahmetb/kubectx/raw/master/img/kubens-demo.gif)


Logs are important and to view them in Kubernetes world you either have to execute something like command below and view the shi** load of logs, or have a log aggregator like Graylog, Sumologic and what not. 

```
kubectl logs MyPodIsAwesome -n namespace
```

But..yup there is always a but.. what if you don't know exactly the name of the pod and or want to see logs from all pods starting with name nginx.. well this next CLI tool is a winner.. It tails k8s logs for strings you want to display. This was introduced to me by one of my fellow co-workers..

[Stern](https://github.com/wercker/stern). 

Btw there is one more , its called kube-shell. Really nice tool if you are new to kubernetes and are not so much familiar with it, or simly you forget commands but know how it starts. [Kube-Shell](https://github.com/cloudnativelabs/kube-shell) is auto complete CLI tool for K8s.

That's all I got for you at this moment, feel free to share some of your favorite kubernetes tools, by the way I made a quick demo of those tools on YT channel that I should update soon. 

{% youtube Lb9giCXBVGY %}
What is the right learning path for an absolute beginner?
Tags: beginners, javascript, discuss
Published: 2018-11-19 14:16:14

---
title: What is the right learning path for an absolute beginner?
published: true
description: 
tags: beginners, javascript, discuss
---
![thinking smiley](https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/facebook/138/thinking-face_1f914.png)

Yesterday, an old friend of mine requested that i teach him javascript, without him having any pre-requisite knowledge of computer programming. I decided to throw at him a couple of video tutorials and programming books, but he rejected them saying he wanted me to walk him through the learning process till he has learnt enough to carry on.

With some reluctance, i took the challenge and here i am, confused! I've never thought about teaching a total newbie programming. I myself never had a one-on-one programming teacher. I'm confused! I'm confused because i don't know where to start from, what path to follow in his learning journey. I have questions like "should i start with data types?" or "should i introduce him to github first?" or maybe we should just discuss about programming in general. Then what next???

So @ben and @jess and all developers with experience as tutors to newbies, help me out here. **What is the right learning path for an absolute beginner?**

Thanks.