teleren/devto huggingface dataset:
Array Methods Used on an Array of Objects
Tags: javascript, beginners
Published: 2018-11-09 21:48:05

---
title: Array Methods Used on an Array of Objects
published: true
description: Demonstrates how array methods can be used on an array of objects
tags: javascript, beginners
---
Array methods can be used on an array of objects with relative ease with one nuance – accounting for object properties.  The solution is to utilize dot notation. 

A simple array of objects is provided below as a demonstration. 

<img src="https://thepracticaldev.s3.amazonaws.com/i/fya42ih1doqc0hd0u05x.png"/>

The some() array method is used when you are trying to determine whether at least one of the items in the array passes a certain condition. The output will return ‘true’ or ‘false’. In the example below, the ‘some’ array method is checking to determine whether any of the array of objects has a guest with the age property of greater than 21 years.

<img src="https://thepracticaldev.s3.amazonaws.com/i/8y6jyn9cpqa7s8b1ny8y.png"/>

The every() array method similarly checks to determine whether any item meets the established condition. In this case, the ‘every’ method is checking to determine whether ‘every’ one of the array of objects has a guest with an age property greater than 21 years. The output will return ‘true’ or ‘false’.

<img src="https://thepracticaldev.s3.amazonaws.com/i/aulc3bfvt95weyi95cdc.png"/>

The find() array method simply finds the specified item and returns it. In the case below, it returns the entire object that includes the specified property.

<img src="https://thepracticaldev.s3.amazonaws.com/i/oglf2bt7n6nf17cbk0q4.png"/>

In addition, the methods can be combined.  The example below demonstrates the combination of the filter(), includes(), and map() methods.  The filter() array method loops through the list to find the condition which it was passed, producing the new array with only the items that meet that condition. In the case below, the ‘filter’ method was combined with the ‘includes’ method, which normally would produce a ‘true’ or ‘false’ result, to ‘filter’ through the items, finding the ‘music’ property on each object.  Then, a new array with the conditioned items are rendered with the ‘map’ method.

<img src="https://thepracticaldev.s3.amazonaws.com/i/0jgwj75drxkghfw6bdop.png"/>

The forEach() array method is useful when you want to display the entire array, or, in this case, the array of objects.  The method loops through every item, rendering the entire guest list.

<img src="https://thepracticaldev.s3.amazonaws.com/i/k33qx18yhxgounxn8ryr.png"/>


<img src="https://thepracticaldev.s3.amazonaws.com/i/yqqh5hsbf1dw7p6os9nc.png"/>
SEM & BIO: Are Heros Components, Objects, or Pattern?
Tags: discuss, css
Published: 2018-11-09 21:33:00

I've really enjoyed digging into CSS methods in the last several days. Hat tip to @bhaibel for her [great response](https://dev.to/bhaibel/comment/6ggk) to a question from @allison_seboldt, [How Do You Organize Your CSS?](https://dev.to/allison_seboldt/how-do-you-organize-your-css-4p97/comments).

I'm reading [_Combining SEM and BIO for Improving CSS_ by Ryan Yu](https://css-tricks.com/combining-the-powers-of-sem-and-bio-for-improving-css/), and it's a fantastic synthesis of a bunch of methods (BEM, ITCSS, OOCSS).

Hero units are a staple for content pages these days. Here's what Ryan has to say about layers in ITCSS:

- "Objects (namespace: o-) are used for design patterns, such as layouts, where items are being arranged rather than decorated."
- "A component (namespace: c-) is a small feature that makes up a part of the website. Think buttons, accordions, sliders, modal dialogs, etc."
- "On the other hand, the header, for example, would be a pattern because it is not scaleable (the header cannot be used in the content or sidebar area) and also contains other components such as buttons, accordions, menus, logos, search form etc."

This seems to indicate a hero would be a pattern. But I think it's odd to define "scalability" in terms of where something is used on a page. Is that what we mean we talk about "scalable CSS"?

Ember and React have me thinking of components as pieces of UI, which semantically a hero is, but I'm thinking that "component" in the markup sense is different than "component" in the ITCSS sense.

What do you think?
A basic intro to different kinds of loops and conditionals
Published: 2018-11-09 21:03:47

---
title: A basic intro to different kinds of loops and conditionals
published: true
description: A basic intro to loops and conditionals
tags: 
---

Looping through information in javascript is something that happens in almost every program or functioning website. The basics of forming these loops and testing them out in javascript is really easy though! First of all a loop is a section of code that, depending on how its written, cycles through that specific section until certain conditions are met. That's where the conditionals come in. They determine how and when these loops run, so you can control their functionality. Here are some examples of the more common types of loops you'll encounter early in your coding career!

The first is the "for" loop. The "for" loop, loops through the data until the conditions in the parenthesis are met. As long as "i" is less than or equal to "<=" 10, the loop will run.

<img src = "https://thepracticaldev.s3.amazonaws.com/i/0fjbsuaptcb2sfsacjtt.png"/>

Another type of of loop is the "while" loop. This is similar to the "for" loop because it also loops through the data while the conditions you pass are true. While "i" is less than or equal to 10, the loop will continue to run.


<img src = "https://thepracticaldev.s3.amazonaws.com/i/drofi25yihj5kt8lkhh2.png"/>

Conditionals are important to loops because otherwise the loops would just run forever. "if" and "else" are two important conditionals that go hand in hand. It basically mean "if" these conditions aren't met, run this code. Otherwise or "else", run this code. 

<img src = "https://thepracticaldev.s3.amazonaws.com/i/8bkyclktz7gl3mtf2qd6.png"/>

These are just basic counting examples to demonstrate how these loops and conditionals work, but you can start to imagine how useful these tools can be while coding with large quantities of data. The applications of loops are almost endless so they are a good thing to master early on!
Learn To Build a DEX on Ethereum with my video course on Manning!
Tags: dappcourse, ethereumcourse, solidity, ethereum
Published: 2018-11-09 20:37:33

---
title: Learn To Build a DEX on Ethereum with my video course on Manning!
published: true
description: New course from Manning to learn Ethereum Dapps
tags: Dapp course, Ethereum course, Solidity, Ethereum
---

https://thepracticaldev.s3.amazonaws.com/i/10e496oa5krfnpau2abk.png

I have just released "Ethereum Dapps In Motion", my premium video course for Ethereum Dapp Developers, in partnership with Manning:

https://www.manning.com/livevideo/ethereum-dapps-in-motion

You have 7 days to get the course at 50pct off using the vlklepatch coupon code (coupon ends on november 14), and save 25 USD.

In this course I will teach you how to build real, production-ready Dapps on Ethereum. We will start slowly by building a simple smart contract, then gradually increase the difficulty with a MultiSig Wallet Dapp, to finally reach our final project, a fully functional Decentralized Exchange (DEX), the most popular kind of Dapp on Ethereum now. This course covers Remix, Truffle, Ganache, Metamask, Web3, Solidity, and Dapp testing.

This course is the result of 100's of hours of research, refinements, and iterations, validated by the technical reviewers of Manning.

After you complete this course you will be able to apply for Blockchain developer jobs or build your own Dapps.

The course has a total of 36 videos, for a total duration of several hours of content. This is currently the presale phase at a discounted price with the coupon vlklepatch. More than 50pct of the content is ready, and the final delivery is expected in January 2019.

On top of learning Solidity and Dapps, there is a entire chapter dedicated to introducing Blockchain, Ethereum & Dapps, full of simple diagrams and other visual explanations.

I have made a short introduction video here: https://www.youtube.com/watch?v=TVXt8ZUKxwM&feature=youtu.be
Should job interviews include questions of thoughts and opinions on diversity and inclusion?
Tags: diversity, career, interview, discuss
Published: 2018-11-09 20:15:16

---
title: Should job interviews include questions of thoughts and opinions on diversity and inclusion?
published: true
description: 
tags: #diversity #career #interview #discussion
---
I would like to strengthen the interview process at my current company. My company values diversity and inclusion within the workplace, however, I've found that it's difficult to figure out if interviewee's hold similar beliefs on diversity and inclusion. Do you believe asking candidates their thoughts on diversity and inclusion is worthwhile and should be implemented in the interview process within the tech industry? Why or why not? If so, what sorts of questions should be asked surrounding these topics?
Multi-cursor in Visual Studio Code
Tags: productivity, devhelp, webdev
Published: 2018-11-09 19:42:13

---
title: Multi-cursor in Visual Studio Code
description: 
tags: productivity, devhelp, webdev
series: VSCode productivity features
---

Multi-cursor is one of those features that impresses many non-programmers but, in our world, this is quite an old one. Many people know about this but I think they are not using it to its full potential. So here is what you can do with multi-cursor:

### 1) Add multi-cursor below/above (`CTRL`+`ALT`+`↑`/`↓`)

This is a simple functionality but it's hidden by its strange shortcut that also turns your screen upside-down. I always re-bind this functionality to `CTRL`+`SHIFT`+`↑`/`↓` so it's the same with Visual Studio.

Example video:
{% instagram Bp61pn7lfe6 %}

### 2) Add multi-cursor to next occurrence (`CTRL`+`D`)

Simply select a piece of text, and when you use this shortcut it will add another cursor to the next occurrence of the selected text, after that, you can edit both at once. This will help you edit code real fast.

Example video:
{% instagram Boj19i6BUXt %}

### 3) Add multi-cursor to all occurrences (`CTRL`+`SHIFT`+`L`)

Same mechanism as above but instead of just adding a cursor to the next occurrence it adds it to all the occurrences in the current file. This can be a really quick and flexible find and replace.

Example video:
{% instagram Bo1RAMdB-l1 %}

### 4) Undo last cursor operation (`CTRL`+`U`)

This one I didn't know about for a long time. It's simple and straightforward. If you accidentally add too many cursors you can undo that operation using this shortcut. It will help you from the hassle of going aaaallll the way back and re-selecting only the occurrences you need.

Example video:
{% instagram Bp9SNryFkQ_ %}

And that's it! They are fairly simple and straightforward features that you can 100% customize their key binding.

I hope this helped you, I know it helped me!

 * What features do you think are worth checking out next?
 * Do you know anything I missed relating this feature?
Visual Studio Code productivity features - Intro
Tags: productivity, webdev, devhelp
Published: 2018-11-09 19:41:57

---
title: Visual Studio Code productivity features - Intro
published: true
description: 
tags: productivity, webdev, devhelp
series: VSCode productivity features
---

First off, what is the goal of this series?

Ever since I laid eyes on the first featureful IDE I wanted to use it at its full potential. I would take the list of all shortcuts in the editor and start reading and trying to memorize them. It is safe to say that this did not work out.

Nowadays, editors have such a large amount of features that it is very difficult to learn them all in one go. This series is just for that. Helping **you** understand and hopefully start using these features so you can do your **job faster** without impacting code quality. 

*For each feature there will be small videos that demonstrate what it does. Also, this is the first time using the series feature on this site, hope it will all work out*

See you on the other side! Let's get started!
"for" vs. "forEach" and the value of documentation
Tags: documentation, javascript
Published: 2018-11-09 19:31:24

---
title: "for" vs. "forEach" and the value of documentation
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/976i48jklp6w71f8d66z.jpg
tags: documentation, javascript
---

This post is a quick note to underscore how important it is for devs to get comfortable with documentation. Mind you, I'm the first one over on StackOverflow when I encounter problems while coding, and I've relished the ease of dev tutorial training-wheels (more on that [here](https://dev.to/msarit/web-dev-tutorials-taking-the-training-wheelsoff-2nb8)). But I am falling in love with the detailed, example-rich help that well-written docs can give.

Case in point: I recently wanted perform some calculations on each item of an array. So I coded the following:

```javascript
array1 = [2,3,4,5];
function greaterThan(numbr){
	array1.forEach(function(item){
		if (item >= numbr){
			return true;
        };
    });
	return false;
};

greaterThan(4); // expect "true"
greaterThan(9); // expect "false"
greaterThan(2); // expect "true"
greaterThan(1); // expect "true"
```

However, all my function calls above returned `false`. I resisted the urge to google "forEach not working" and went straight to [MDN](https://developer.mozilla.org/en-US/). Sure enough, in the docs for "forEach" I read the following:


> There is no way to stop or break a `forEach()` loop other than by throwing an exception. If you need such behavior, the `forEach()` method is the wrong tool.


So simple. So straightforward. My `return true` line wasn't breaking the `forEach` loop; its execution continued to the end. I verified this by running `greaterThan(5)`; it came back `true` since `5` was the last number in my array, and hence the last number processed. I rewrote my code using a simple for-loop and all was right with the world.

What are some ways that you have embraced documentation over other information sources?
What Skills do you wish you learned earlier
Tags: beginners
Published: 2018-11-09 18:57:18

---
title: What Skills do you wish you learned earlier
published: true
description: A call to discuss skills and habits that would have made all the difference to have learned earlier
tags: beginner, 
---

![alt text](https://thepracticaldev.s3.amazonaws.com/i/0xj9apbdc2j9dhg4xzg2.jpeg)

_TLDR; Scribble first code later._

# Paddle before you dive

I think that as a novice programmer I, and a lot of others have made the same consistent sets of mistakes. Saying that, the most consistently painful of mine has been an utter lack of planning.

I wish that I had learned earlier that the simple act of taking out a pen and paper to just _roughly_ sketch out an implementation or idea would make my life **1000** times easier.

It's all too easy to get overexcited about an idea or a quick fix for an assignment and dive headfirst in to suddenly crack hard against a brick wall. Something that would have been fixed so quickly by taking _10 minutes_ to hash out the idea, maybe even come up with some actual edge cases. It almost goes without saying that more than half of the act of programming is about solving the problem, but its easy to get carried away and try to solve that problem on the fly.

## Slowing down

The act of simply sketching a couple of ideas or hashing out some abstract attributes forces you to think about the problem in ways that are certain to save hours of time and effort down the road.

Pushing it a little further and asking for the opinion of a peer, especially if they're of a similar level of proficiency as you only adds to this.

You're not asking for a solution from them, just an extra pair of eyes to see what you miss.

The volume of trouble I'd have saved by learning this is immense, but that's all part of the process! So go and get a pencil and some paper, scribble out you're grand plans, and hopefully, avoid the pitfalls.

## Your thoughts

What skills do you wish you learned earlier in your career, either as a programmer, a student or otherwise? What heartache might it have saved you in the long run?
What's one thing you want to know more about?
Tags: discuss
Published: 2018-11-09 18:54:37

---
title: What's one thing you want to know more about?
published: true
description: Quick question about future learning
tags: discuss
---

Hey DEV-ers, what is one thing you want to learn more about? It can be related to anything - tech, career, hobbies, health - whatever. I just want to know what you'd like to know more about.
I really like Bulma dog.
Tags: discuss, css
Published: 2018-11-09 18:29:27

Bulma has to be my all time favorite CSS framework. I have used it in production at a large company I worked for and it stood up great! My next job I wrote most of the CSS myself. That held up fine too, but not as well, and it was a HUGE pain to write. 

I have always hated using big heavy style frameworks like Bootstrap or Foundation, mostly because of their dependency on jQuery. And sure there are packages for react & bootstrap, but idk. It just feels klunky and gross. Bulma feels fun sleek and sexy. 

I feel like Bulma does *just* the right amount. It makes no assumptions on your JS, has no dependency to jQuery, it doesn't come with a million different components. It doesn't have a million variants of everything. Just a couple simple great building blocs that I love using. I plan on using Bulma when building Realm of React and probably in the course work itself.
dev.to Repo Recap
Tags: changelog, meta, opensource
Published: 2018-11-09 17:16:17

---
title: dev.to Repo Recap
published: true
description: A new weekly post recapping what's happened in our repo.
tags: changelog, meta, opensource
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hc0yatvqwjpg1p592lim.gif
---

This is a new-ish weekly post where we go over our repository's open source activity from the past week. New-ish because we think this type of a post is a better form-factor than the [previous iteration](https://dev.to/devteam/notable-devto-issues-up-for-grabs-4h64). We'll be recapping last week, starting from Monday October 29th to Sunday November 4th.

# Features

- We now automatically give open-source contributors their DEV [contributor badge](https://dev.to/badge/dev-contributor)! This is a chron job that runs periodically. Thanks to [@fredplante](https://dev.to/fredplante) for the contribution! [Click here for their pull request.](https://github.com/thepracticaldev/dev.to/pull/1016)

- We added another Liquid tag that lets you embed a CodeSandbox. Credits to [@ben](https://dev.to/ben) for this one. [Pull request and details here.](https://github.com/thepracticaldev/dev.to/pull/1052)

- You can now create series for posts! We've technically had this supported for a while, but it previously had to be set by an admin. Check out Ben's changelog post below for all the details. You can also view all the technical notes [in the associated pull request.](https://github.com/thepracticaldev/dev.to/pull/1034)

{% link https://dev.to/ben/changelog-create-series-of-posts-4o63 %}

# Bug Fixes

- Thanks to [@florinionce](https://dev.to/florinionce) for fixing a bug with our [podcast player](https://dev.to/pod). You should now be able to close the player properly. [Pull request here](https://github.com/thepracticaldev/dev.to/pull/1039)

- We previously had an issue where the [integrations page in settings](https://dev.to/settings/integrations) would occasionally timeout. This would mostly happen when someone had a lot of repos on their account. We now load the request asynchronously, and the widget is now a Preact component. [Pull request by me here](https://github.com/thepracticaldev/dev.to/pull/986)

- Thanks again to [@fredplante](https://dev.to/fredplante) for fixing this next error! We now properly send a 404 response when you try to visit an unmatched setting tab. [Find their pull request here](https://github.com/thepracticaldev/dev.to/pull/1011)

- Honorable mention to [Dependabot](https://dependabot.com) for handling three security vulnerabilities through our dependencies!

# New Issues/Discussions

- [@flexdinesh](https://dev.to/flexdinesh) opened a feature request for bookmarking a comment. [See the details and chime in here.](https://github.com/thepracticaldev/dev.to/issues/1038)

That's it for this week! We'll have another recap next week.
From Scratch : User Authentication (Part 2)
Tags: fromscratch, authentication, authorization, cleancode
Published: 2018-11-09 16:58:32

---
title: From Scratch : User Authentication (Part 2)
published: true
description: Thoughts about user authorization
tags: from-scratch, authentication, authorization, clean-code
---

In my previous [article](https://dev.to/absolux/from-scratch-user-authentication-37a7), I've exposed user identification solutions, and how we can make it simple and clean. In this article, I'm just going to talk briefly about the next step after a successful authentication, which is called : `User authorization`.

To summarize, user authentication is the process to check and retrieve the user object based on its credentials, as shown below:

```
                      ++++++++++++++++++
                      +                +
    Credentials --->  + Authentication +  ---> User?
                      +                +
                      ++++++++++++++++++
```

*But, what should happen after a user has been successfully identified ?*

In most cases, we have to check the user's ability to access the resource and reject the incoming request, with a `403 Forbidden` error, if not authorized.

I don't have yet a clear vision about the implementation, but it will follow the same philosophy as authentication, where the `boolean` result indicates whether or not the the user is granted:

```
               +++++++++++++++++
               +               +
    User --->  + Authorization +  ---> boolean
               +               +
               +++++++++++++++++
```

I'm open to any suggestion, idea or article, on how to make the implementation as clean as possible. So, don't hesitate to share it in comments.

Thanks.
When Test-driven Development Clicks
Tags: bestofdev, testing, tdd
Published: 2018-11-09 15:50:15

Test-driven development (TDD) is a tremendous approach for writing reliable software programs, but it's not a tremendously intuitive one. I recently asked the question [What was your TDD aha moment?](https://dev.to/ben/what-was-your-tdd-aha-moment-h5f) and I want to share the top comment, which provides good insight into the subject.

{% devcomment 6e1f %}

Early in my software career I struggled with imposter syndrome over the fact that TDD had not clicked for me. It's okay to _not_ TDD. Most developers do not use this approach.

{% devcomment 6e36 %}

TDD is one of the finer approaches for software development, but don't stress if it has not clicked for you.

If you're interested in getting started with TDD, this post may be helpful:

{% link https://dev.to/kylegalbraith/how-to-get-started-with-test-driven-development-today-401j %}