teleren/devto huggingface dataset:
ES6 - *Destructuring the Good Parts!*
Tags: javascript, codenewbie, beginners
Published: 2019-07-06 05:01:30

I've been learning JavaScript for a couple of months now. To break up tutorials and reading, I love trying my hand at coding challenges. I have decent success in completing the challenges, however, my code will usually be 3 to 4(x's) longer than the solution others come up with. And if we're being honest, I didn't have the <strong>slightest</strong> clue as to what most of the code base for the solutions were doing.

Recently, I started learning some of the additions to ES6 and I'm not sure how I've made it this far without knowing several of these. Some I really struggled to understand and I probably still don't FULLY grasp the technical aspect or the full capabilities but this is why I'm writing this. I last posted that I wanted to use my learning as a resource to help others that struggle in learning the same way that I do. 

I debated on what to start posting about, and I've finally decided to start a series of posts about, what I think are, the best parts of ES6. 

## Let's Get <em>Destructuring {Objects}</em>!

What is destructuring? It's essentially a fancy term for being able to pull out a value(s) from an array or properties from an object and save it to a variable. A lot of the coding challenges I've completed have some variation that required this task in order to fulfill its requirements. 

This is how I've always completed extracting values from arrays and objects before:

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

If we `console.log(myName)` we'll get the value "Matt" for the name property.

Because I have nested objects, if I wanted to get the value for my favorite Premier League soccer team, I'd need to create a variable that held `myObj.likes.soccer.Premier`. And I'd have to do that twice to get my two favorite soccer teams.

With destructuring, we can cut down on the repetitiveness of the code.

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

Here, I'm essentially creating two variables `FIFA` and `Premier` that are the property names within the nested object. We can go a step further and assign the values to our own created variable names by assigning the variable name after the property name: `const {propertyName:newVar} = object`

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

Destructuring is a much more effecient way of extracting values out of objects.

Hope this helps someone, because I feel like I understand it more now that I've sat down and written this. Happy Coding!
Rails tips: Render :new with previous query params
Tags: rails
Published: 2019-07-06 04:35:41

---
title: Rails tips: Render :new with previous query params
published: true
description: 
tags: rails
---

When writing forms with Rails, it's common to use `render :new` for errors of validation. With `render :new`, unlike `redirect_to`, you can show a `new` page again without reset of form values. It's pretty useful in the aspect of UX.


`#create` action is like:

```ruby
def create
  if @foo.save
    redirect_to foos_index_path
  else
    render :new
  end
end
```

However, when query params is specified at a `new` page , there is an issue. After rendering of new page, query params will disappear. How can I hold query params to the second time new page?

It's possible by giving query params to forms.

If its new page's form is like below:

```slim
= form_for @foo, url: sign_in_path do |f|
  / ...
```

Just give a query param to path helper method.

```slim
= form_for @foo, url: sign_in_path(query: @query) do |f|
  / ...
```

`@query` is passed by controller's `#new` action.

```ruby
def new
  @query = params[:query]
end
```

It worked fine for me.
How to Reverse a Given String in Javascript
Published: 2019-07-06 03:38:39

---
title: How to Reverse a Given String in Javascript
published: true
description: 
tags: 
---
### Objective
Create a function which takes a string as argument and return a reversed version of that string.

### Method 1
1.Convert the string into an array so that we can iterate through each character. 

2.Iterate the array backward and push each character into a new array. We can use the built-in reverse() function or write one ourselves.

3.Finally use .join() to convert the array back to a string and return it.
```
//This solution uses all javascript built-in methods

function reverseString(str){

    let strArray = str.split("") 
    //it's important not to add space on the quotation mark here.

    strArray = strArray.reverse()

    return strArray.join("") //also no space on quotation mark here
}

reverseString("amazon google") //call the function

"elgoog nozama" //the returned string
```
Write our own reverse method:
```
function reverseString(str){

    let revArray = [];
    let strArray = str.split("")

    // Looping from the end to the beginning
    for(let i = strArray.length; i >= 0; i--) {
 
       //push each character into the new array
        revArray.push(strArray[i]); 
    } 
      
    // Joining the array elements 
    return revArray.join(''); 
}
```

Instead of using the built-in .split() to converse a string to array, We can also use the for ... of loop. This way we can iterate through each character of a string instead of an array.
```
function stackReverse(str){
    let strArray = [];

    for(let eachLetter of str){
        strArray.push(eachLetter)
    }

    strArray.reverse();

    return strArray.join("")

}

stackReverse("google amazon") //call the function

"nozama elgoog" //return value
```
This is my finding for how to reverse a string in javascript, hope you've enjoyed it.
Around the Web – 20190705
Tags: blog
Published: 2019-07-22 13:55:50

---
title: Around the Web – 20190705
published: true
tags: Blog
canonical_url: https://wipdeveloper.com/around-the-web-20190705/
cover_image: https://wipdeveloper.com/wp-content/uploads/2017/07/WIPDeveloper.com-logo-black-with-white-background.png
series: Around the Web
---

And now for somethings to read (or watch) over the weekend, if you have some spare time that is.

## [Orphaned Aliases](https://www.gooddaysirpodcast.com/222)

**Good Day, Sir! Show**  – Jeremy Ross – In this episode, we discuss alternatives to spinners, GraphQL, Tableau, Boeing outsourcing development, and centers of excellence.

## [Programmer Test Principles](https://medium.com/@kentbeck_7670/programmer-test-principles-d01c064d7934)

**Medium**  – Kent Beck – Jun 27, 9:26 AM – BDD versus TDD. This test tool versus that test tool. Test-before versus test-after versus this-works-trust-me. At some point I got tired of the debates about details. I prefer to discuss principles. Details go back and forth without any push to…

## [Car Back Seat Organizer for Kids Car Organizer Kick](https://www.amazon.com/gp/product/B07QCNP35R/ref=as_li_qf_asin_il_tl?ie=UTF8&tag=wipdevelope05-20&creative=9325&linkCode=as2&creativeASIN=B07QCNP35R&linkId=853406cd641c7d79c737061ccb7ce48a) 

We went on a few longer drives this past week and to help the kids access there books and things we found these to be very useful. We haven’t been asked to stop once so that we can reach anything.

## [Ebooks Purchased From Microsoft Will Be Deleted This Month Because You Don’t Really Own Anything Anymore](https://gizmodo.com/ebooks-purchased-from-microsoft-will-be-deleted-this-mo-1836005672)

**gizmodo.com**  – Matt Novak – Jul 1, 3:00 AM – Anyone who bought ebooks through the Microsoft Store is in for a rude shock in the coming days. The good news? You can get a refund. The bad news? All of your books are going to be deleted this month. Microsoft announced in April that it would stop…

## [Building a Blog with Vue and Markdown Using Gridsome](https://dev.to/telerik/building-a-blog-with-vue-and-markdown-using-gridsome-5hh4-temp-slug-1123800)

**Progress**  – Gift Egwuenu – Jun 24 – Enter the world of static site generation and the JAMstack using Gridsome. Learn to build a blog using Markdown and GraphQL, and then deploy it to Netlify. The web is ever evolving and the need to stay updated as developers is really important. In…

## Till Next Week

Want to share something? Let me know by leaving a comment below or emailing [brett@wipdeveloper.com](mailto:brett@wipdeveloper.com)  or following and tell me on [Twitter/BrettMN](https://twitter.com/BrettMN).

Don’t forget to sign up for **[The Weekly Stand-Up!](https://wipdeveloper.com/newsletter/)** to receive free the [WIPDeveloper.com](https://wipdeveloper.com/) weekly newsletter every Sunday

The post [Around the Web – 20190705](https://wipdeveloper.com/around-the-web-20190705/) appeared first on [WIPDeveloper.com](https://wipdeveloper.com).
How is My first ReactJs Book-store app? 
Tags: javascript, react, codenewbie, node
Published: 2019-07-06 01:55:07

I had created this Book store app using React Js, I had not used redux in it (still have to learn it) is only React js, the backend server is hosted on heroku using Node js, it took me almost one month to finish this project, initially I planned to add more functionality to it but the amount of code (long list of state & props) was just increasing and I was overwhelmed with it, I will include this project in my portfolio, & it may not look nice in mobile devices as spent less time to make it responsive. 

github link: https://shubham2270.github.io/book-store-app/

If anyone have time to look at my code & do advice how can I make my code more short & cleaner 

Note: You can use following username & password to login 
username : teddy@gmail.com 
password : teddy
Kotlin for C# Developers
Tags: kotlin, csharp, dotnet, tutorial
Published: 2019-07-06 01:47:05

Dive into the latest craze in languages and platforms - Kotlin. This time we will be looking at it from the perspective of a .NET C# developer, draw comparisons between the languages, and bridge the gap between these 2 amazing languages.

We'll look at:

Kotlin as a language
Platforms Kotlin is great for
Object Oriented Implementations in Kotlin
Extended Features
Features Kotlin has that C# doesn't
A demo Android application in Kotlin vs a Xamarin.Android app in C#
In the end you will leave with a foundational knowledge of Kotlin and its capabilities to build awesome apps with less code. You should feel comfortable comparing C# applications to Kotlin applications and know where to find resources to learn even more!

{% youtube yxTWpj4XQVw %}

**Thanks for reading** ❤
If you liked this post, share it with all of your programming buddies!
Follow us on **[Facebook]( https://www.facebook.com/moriohdotcom)** | **[Twitter]( https://twitter.com/moriohdotcom)**

### Further reading
☞ [C# Basics for Beginners - Learn C# Fundamentals by Coding](http://learnstartup.net/p/B18Jun7ykW "C# Basics for Beginners - Learn C# Fundamentals by Coding")
☞ [Selenium WebDriver with C# Tutorial for Beginners](https://morioh.com/p/69ddabe42289)
☞ [Top 5 Kotlin Features That Every Android App Developer Must Know](https://morioh.com/p/e092bcbcf0a7)
How to diversify your professional network
Tags: techlife
Published: 2019-07-06 00:00:43

---
title: How to diversify your professional network
published: true
description: 
tags: #techlife
cover_image: https://thepracticaldev.s3.amazonaws.com/i/e4p4j6h5ds0l2e0ayoyo.png
---


{% youtube IiBV0Hwvscs %}

In this video, I talk about the role that my diverse professional network has played in my career, and the three steps I take to cultivate a diverse network:

1. Start with your warm network
2. Figure out your multiple identities and reach out to communities that have those identities
3. Be respectful while being an ally

What are some ways you find a diverse professional network helpful and how do you cultivate your network?
TIL: Node.js has a built-in debug log method
Tags: javascript, node
Published: 2019-07-08 12:04:44

---
title: TIL: Node.js has a built-in debug log method
published: true
tags: javascript, node
canonical_url: https://www.stefanjudis.com/today-i-learned/node-js-has-a-built-in-debug-method/
---

Today I saw [a quick conversation](https://mobile.twitter.com/davidmarkclem/status/1147275278273658881) on Twitter between [@ThisIsMisEm](https://mobile.twitter.com/ThisIsMissEm) and [@davidmarkclem](https://mobile.twitter.com/davidmarkclem), which unveiled an interesting fact about Node.js.

While millions of packages depend on the very popular [debug package](https://www.npmjs.com/package/debug), it turns out that Node has similar functionality built-in via [`util.debuglog`](https://nodejs.org/api/util.html#util_util_debuglog_section). Using it, you could maybe get rid of one dependency in your apps. 

```javascript
// index.js
const util = require('util');
const debuglog = util.debuglog('app');

debuglog('hello from my debugger [%d]', 123);
```

When you run this code in your terminal, you won't see anything. However, when you set an environment variable `NODE_ENV=app`, the log messages appear:

```
$ NODE_DEBUG=app node index.js
APP 86155: hello from my debugger [123]
```

`util.debuglog` even supports wildcards (`*`). 

```javascript
// index.js
const util = require('util');
const logGeneral = util.debuglog('app-general');
const logTimer = util.debuglog('app-timer');
const delay = 500;

logGeneral('Kicking off the app');

setTimeout(() => {
  logTimer('timer fired after %d', delay);
}, delay);
```

Running the script with an `app-*` environment variable leads to the following:

```
$ NODE_DEBUG=app-* node index.js
APP-GENERAL 86188: Kicking off the app
APP-TIMER 86188: timer fired after 500
```

The `NODE_DEBUG` environment variable can also be used to get debug messages from Node.js internals. You may have come across it in the Node.js documentation now and then.

It's good to know about `util.debuglog`  but as [David points out](https://mobile.twitter.com/davidmarkclem/status/1147275278273658881), it doesn't cover all the functionality of `debug`. `debug` for example colors your log messages nicely. The missing colors may not be a breaker for you but they are very welcome for lots of people debugging larger apps. 

For me, `util.debuglog` will be a good alternative for `debug` in smaller projects and scripts.
Don’t Let Facts Get In The Way Of A Good Story
Tags: life, productivity, storytelling
Published: 2019-07-18 18:32:01

---
title: Don’t Let Facts Get In The Way Of A Good Story
published: true
tags: life, productivity, storytelling
canonical_url: https://stephencharlesweiss.com//2019-07-06/facts-and-storytelling/
---

# <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Don’t Let Facts Get In The Way Of A Good Story

The first time I heard about Jerry Seinfeld’s “Productivity System” was 2013.¹ ² The system is simple:

1. Get a big wall calendar
2. Draw a big red _X_ on each day you complete your task (e.g., writing)Then, after a few days of completing your task, you’ll have just one job:
3. Don’t break the chain

Though I never bought a wall calendar, I’ve been trying to make a habit of writing for years and I keep Jerry’s habit in my mind. Days that I write — those are good days. Days that I don’t — they’re less good. It’s working too. This year’s been my best year ever and last month was a personal best for me in terms of days writing.

This is true despite the fact that I’m aware that Jerry never used this system and that it’s an accident of internet lore that he’s credited as the progenitor.

The fact that he didn’t actually come up with the system doesn’t matter.³ The story is better for having Jerry as the protagonist. Simply defining a system (like I did above) won’t compel people. Telling them Jerry Seinfeld used it to cultivate his skill as a comedian will though.

This is not an endorsement for lying. If you have facts, use them. But don’t let them get in the way of telling a good story if the point is worth hearing.

# <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Sources

- ¹ [Why You Should Hustle Every Day (And How Jerry Seinfeld Did it) | Medium](https://medium.com/busy-building-things/why-you-should-hustle-every-day-and-how-jerry-seinfeld-did-it-1d0e7ca7d104)
- ² [Jerry Seinfeld’s Productivity Secret | LifeHacker](https://lifehacker.com/jerry-seinfelds-productivity-secret-281626)
- ³ [Jerry Seinfeld AMA | Reddit](https://www.reddit.com/r/IAmA/comments/1ujvrg/jerry_seinfeld_here_i_will_give_you_an_answer/ceitfxh/)
Tmux Vim Active Pane Focus
Tags: tmux, vim, dotfiles, config
Published: 2019-10-27 13:09:14

---
title: Tmux Vim Active Pane Focus
published: true
tags: tmux, vim, dotfiles, config
canonical_url: https://tech.serhatteker.com/post/2019-07/tmux-vim-focus/
---

If you are a best text editor —a.k.a `Vim`, user, and  you want to use our "active-inactive pane focus" feature that we implemented for tmux panes in this [tmux active focus post](https://dev.to/serhatteker/tmux-active-pane-focus-3h41) for `vim/nvim` as well, you need to make some tweak in your `vim colourscheme`.

![Tmux Vim Focus Active Inactive Pane](https://tech.serhatteker.com/img/vim-focus.png)

The picture above shows how the inactive panes are slightly greyed, and that the border of the active panes is blue.


## Active-inactive pane colors config

In order to apply active-inactive window style to Vim panes, it is necessary to check the line in your `colorscheme.vim` file that starts with `hi Normal`. Or write:

```vim
:hi Normal
```

The output should be like this:

```vim
Normal          xxx ctermfg=145 ctermbg=234 guifg=#ABB2BF guibg=#1c1c1c
```

We need to update these `background` settings to use our `.tmux.conf` settings set before.

delete:
```vim
highlight Normal ctermfg=145 guifg=#ABB2BF
```

or set to `none`:
```vim
highlight Normal ctermfg=145 ctermbg=none guifg=#ABB2BF guibg=none
```

I prefer latter since it is more verbose. Add this setting to your `.vimrc` after `colorscheme xxx`  line and source it.

It is very important adding **after**, otherwise will not give any effect.

All done.
Vertically and horizontally center text with flexbox
Tags: css, flexbox
Published: 2019-07-05 22:30:58

Today you will learn how to easily center text both vertically and horizontally.

![](https://thepracticaldev.s3.amazonaws.com/i/nsbng03fflb6l8si4v2s.jpg)

### The starting code

HTML

![](https://thepracticaldev.s3.amazonaws.com/i/152y0yukb1j9g5jbe2uy.jpg)

CSS

![](https://thepracticaldev.s3.amazonaws.com/i/344j9zr87a88fb1lw22o.jpg)

### How it works

Text inside a flex container becomes a flex item by automatically been wrapped in an [anonymous block container](https://www.w3.org/TR/css-display-3/#css-anonymous).

![](https://thepracticaldev.s3.amazonaws.com/i/vu0o2cl42lmwcyfn7yt5.jpg)

This converts the text into a flex item and allows it to participate in its container's flex formatting context.

Now any flexbox property can be applied to the anonymous block which contains the text.

In this case, we are centering horizontally with `justify-content: center;` and vertically with `align-items: center;`

![](https://thepracticaldev.s3.amazonaws.com/i/fzmkuryltm3wp2ax9iwu.jpg)

And that's how you center text both vertically and horizontally inside an element, with flexbox.

[Liked to be notified about new small HTML/CSS tips follow me on twitter @Eduardo__Uribe](https://twitter.com/Eduardo__Uribe)
Halfway Through 2019! New Years' Goals/Resolutions Check-In
Tags: goals, 2019, newyear, selfimprovement
Published: 2019-07-05 22:52:51

---
title: Halfway Through 2019! New Years' Goals/Resolutions Check-In
published: true
description: I share an update on how my goals are going since the start of the year and hope to help keep myself and everyone else accountable so we have a strong second half of the year ahead of us!
tags: goals, 2019, newyear, selfimprovement
---

I always ring in the new year with several goals - I don't believe in dramatic  resolutions, but I find it helpful to set the pace for the coming year with some things I want to achieve. Since we've just passed the halfway point of the year, I wanted to take some time to share how I'm progressing and ask how you've done on any goals you may have set for yourself.

I like to choose some goals from different parts of my life, so they are mixed between career/self-development, fitness/martial arts, and finances:
<ul>
<li><del>Read 12 technical/career development books</del> (currently on #13!</li>
<li>Write one blog post each week on dev.to (so far so good!)</li>
<li>Complete Salesforce .NET Developer Trailhead Series</li>
<li>Back Squat 200lbs (hit 175lbs)</li>
<li>Deadlift 250lbs (stopped deadlifting, retired this goal)</li>
<li>Bench Press 130lbs (hit 120lbs)</li>
<li><del>Pay down all credit card debt (excluding o% APR promos)</del></li>
<li><del>Pay high-interest private student loan in full</del></li>
<li>Have a more positive outlook, complain less (tough, work in progress)</li>
</ul>

So as you can see, I've already achieved a few of my goals but others are still out of reach at this point. This is good and this was my intention at the start of 2019 - I give myself some "easy wins" and that helps me keep momentum throughout the year.

---

Your turn! What goals did you ring in 2019 with? How are they going? What are your wins? Where can you use some work?
What does your markdown workflow look like?
Tags: writing, discuss, workflow, productivity
Published: 2019-07-05 22:33:34

I was wondering what your markdown workflow looks like?
- What tools are you using?
- What do you like about your workflow?
- What do you not like about it?

*****
# My workflow
For me I recently had to write a paper in markdown. For this my tools were:
- Editor: Atom, (Plugins: markdown preview, markdown writer)
- LaTeX: texmaker
- collaboration / notes: google docs

## What I like about it:
Atom is one of my favorite text editors, so I am really happy to keep using it. With the markdown preview plugin I can see the changes I make in real time.

## What I do not like about it:
In order to collaborate with other people I currently use google docs for live editing. If I want to get the text there, I am pasting it from my markdown document. After finishing the live editing I will then copy it from the docs and paste it into my markdown document again.

## Other aspects:
I see why I have to convert everything into `.tex` in order to see if the formatting and everything is working. An automated solution would probably be better but I haven't looked at it yet.