teleren/devto huggingface dataset:
JavaScript: .find()
Tags: javascript, blog, showdev
Published: 2019-04-18 15:32:12

---
title: "JavaScript: .find()"
published: true
description: "Web Developer Terrance Corley explains the .find() method in JavaScript."
tags: javascript, blog, showdev
---

If you need to search through an array and find a unique item in the dataset then you should consider using the .find() method, and here's why.

## Examples  

### .find()  
```javascript
    let people = ['sally', 'tom', 'brent', 'james'];  

    let personIWant = people.find((person) => {
        return person === 'brent';
    });
    console.log(personIWant); // 'brent'
```  
The .find() method searches our array looking for the *first* instance of the item that matches our conditional, in this case we are telling JavaScript to search for `'brent'`. If a match is found in the array, that match will be returned and the loop will break.

### .forEach()    
```javascript
    let people = ['sally', 'tom', 'brent', 'james'];

    let personIWant;
    people.forEach((person) => {
        if (person === 'brent') {
            personIWant = person;
        }
    });
```  
We can achieve the same result as the .find() method by using a .forEach() method, but there is no direct way to break out of this type of loop once we've found the item we're looking for. As the name states, forEach loops are meant to run over each item in the array, so even when the loop finds the value we want ('brent'), we still continue to execute the loop for every item in the array.

### Traditional For Loop  
```javascript
    let people = ['sally', 'tom', 'brent', 'james'];

    let personIWant;
    for (let i = 0; i < people.length; i++) {
        if (people[i] === 'brent') {
            personIWant = 'brent';
            break;
        }
    };
```  
Another type of loop where you can have the same functionality as the .find() method is a traditional for loop. You do however have to add your own break case, and the code for this is a little more lengthy.  

### The Takeaway  
If you are looking for a single unique item in an array or just looking to see if that item exists, the .find() method might just be what you're looking for.
--- 
Thank you for taking the time to read my post today if you've made it this far! Happy coding! *Originally posted at [https://terrancecorley.com/blog/2019-04-17-javascript-find-method/](https://terrancecorley.com/blog/2019-04-17-javascript-find-method/)*.
Configure encryption for data at rest 
Tags: azure, security
Published: 2019-04-18 16:04:43

---
title: Configure encryption for data at rest 
published: true
description: Secure data and applications
tags: #Azure , #Security
---
**Implement SQL Database Always Encrypted**
- Primary characteristics of SQL Database Always Encrypted:
    - Protects data at rest, in transit, and in use
    - Ensures that data is accessible from client applications and application servers only
- Implement SQL Database Always Encrypted:
    - Use the Always Encrypted wizard in SSMS to create Always Encrypted keys:
        - Create a column master key
        - Create a column encryption key
    - Create a database table and encrypt columns
    - Create an application that inserts, selects, and displays data from the encrypted columns

**Implement database encryption**
![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/glulmqnahnl4xscz5zr6.png)

**Implement SSE**
- Primary characteristics of Azure Storage Service Encryption:
    - Applies automatically to all Azure Storage accounts and cannot be disabled
    - Encrypts on write and decrypts on read
    - Supports all four storage services (Blob, Queue, Table, and Files)
    - Supports both storage performance tiers (Standard and Premium)
    - Supports both deployment models (Resource Manager and classic)
- Configuring SSE:
    - By default, SSE uses platform-assigned keys
    - Customers have the option to use their own keys

**Implement Azure Disk Encryption**
- Primary characteristics of Disk Encryption:
    - Uses BitLocker on Windows VMs and DM-Crypt on Linux VMs
    - Provides encryption of the operating system and data disks
    - Stores encryption keys in a customer-managed key vault
    - Requires granting the Azure platform access to the key vault
- Implementing disk encryption:
    - Azure Resource Manager templates
    - PowerShell
    - Azure CLI

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/k4pr0bkzxvgbn4hy50ye.png)

**Implement Azure Backup encryption**
- Primary characteristics of Azure Backup:
    - Supports Windows and Linux operating systems
    - Is capable of protecting on-premises and cloud-resident workloads
    - Allows for backup and recovery of files, folders, system state, and applications
- Implementing Azure Backup encryption:
    - For on-premises workloads, encryption is based on a customer-provided passphrase
    - For Azure VMs, encryption uses SSE
Underrated Articles on Dev.to Last Week
Tags: top7, webdev, meta, bestofdev
Published: 2019-04-18 15:45:15

---
title: Underrated Articles on Dev.to Last Week
published: true
description: 
tags: icymi, webdev, meta, bestofdev 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/tew6ztigalx23etvfcx0.png
series: Underrated Articles
---
Hello! I'm back with another installment of underrated posts of last week! Let's check them out.

## 1. Techniques to Leave Work at Home

Just like a list of career goals, it's important to make a list of your personal priorities or goals that you can accomplish with some effort. Cubicle Buddha shares four tips that will help you to leave work at home.
{% link https://dev.to/cubiclebuddha/go-home-4-techniques-that-help-you-to-leave-work-at-work-42h0 %}

## 2. It's Important to Take Breaks

In this article, DeChamp explains his experience of taking a break from his tech life. He shares how he feels more alive and happy, after this vacation.  
{% link https://dev.to/dechamp/what-happened-when-i-took-a-7-day-break-from-the-tech-world-48p3 %}

## 3. Mission Statements of Projects

Project Mission Statement, if formulated correctly, can give project members a focus for working toward a common goal. Lisa states the importance of mission statements of projects. She also explains how these mission statements should be formulated.
{% link https://dev.to/workingwebsites/why-projects-should-have-mission-statements-4okj %}

## 4. Test Automation for Blockchain

In this post, Mariusz discusses the importance of software testing in blockchain and benefits of automation testing, and how we can implement Quality Assurance.  
{% link https://dev.to/4miners/test-automation-for-blockchain-how-to-improve-development-speed-and-code-quality-part-2-3ppe %}

## 5. Four Reasons to Write Console Applications

 Claudio writes four reasons why console applications are great. Simplicity, robustness, low development cost and great for automation are key points explained in this post.
{% link https://dev.to/claudiobernasconi/4-reasons-why-console-applications-are-great-3pnd %}

## 6. Becoming Tester for Web Applications

In this post, Lars sum up the prerequisites for having a successful application talk in the agile web tester domain. This will help to give candidates a clearer view of what to expect and what is expected.
{% link https://dev.to/frantzen/howto-become-a-tester-for-web-applications-5hbh %}

---

*That's all for this week. These were my personal favorite underrated posts from last week. I hope you liked this post. Tell me about your favorite posts that went underrated in the comments below!* ❤️
One stop to all Git repository
Tags: showdev, git, vue, electronjs
Published: 2019-04-18 15:14:33

---
title: One stop to all Git repository
published: true
description: Thermal is an open-source desktop application to manage all your Git repository with built-in features commits, history, repository settings and more.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6uwhsjn5tplyi0yxwrp5.png
tags: showdev, git, vuejs, electronjs
---


# What is Thermal?

[Thermal](https://thermal.netlify.com) is open-source desktop application allows you to manage all Git repository at one place by providing you a simple to use graphic user interface with built-in features commits, history, repository settings and more.

You can also watch a [quick demo video](https://dev.to/mittalyashu/quick-thermal-app-tour-i7o).

![Thermal app screenshots](https://thepracticaldev.s3.amazonaws.com/i/t0733ds66gdecza1m2ys.png)

## Features

- Commit changes
- Commit history
- Commit details
- File diff
- Repository settings
- Push to a remote repository
- Create new repository
- and a lot more...

Try now for free, by downloading the [**thermal application**](https://thermal.netlify.com/download/).

# Development

The source code the applications is available on [GitHub](https://github.com/gitthermal/thermal) and welcome you to [contribute to the project](https://www.notion.so/gitthermal/Contribute-9d82f521342f4573b853d1bc793bdf02).

*We are just getting started with this application and there are lot more planned features to build, [join our discord server](https://discord.gg/s2PYYJV) for your questions regarding the application and to stay up to date with the development.*

We're working on creating a landing page for Thermal application.

![New thermal website landing page design preview](https://thepracticaldev.s3.amazonaws.com/i/r0n5ztlloprkegvb2ohs.gif)

> Even our [roadmap](https://www.notion.so/gitthermal/Thermal-060703b03c174d4bb36daf0ddaf27277) and detail about each feature is publicity available on Notion.

We would love to hear from you, leave a comment below or chat with me in [Thermal discord server](https://discord.gg/s2PYYJV).

_Originally published at [CodeCarrot Blogs](https://blog.codecarrot.net/one-stop-to-all-git-repository/)._
CJS Cascading JavaScript Style
Tags: javascript, css, react, beginners
Published: 2019-04-18 14:59:31

---
title: CJS Cascading JavaScript Style
published: true
description: using cascading styles inside of JavaScript styles in React
tags: javascript, CSS, React, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2jclbj0n4rubupt4i6te.PNG
---

# CSS in JSX

I have been working on some new React projects and the way that the CSS works in JavaScript seemed odd and simple to me at the same time. I like the idea of working with JSON objects but thought it was odd that most of the demos I have seen never did much outside of the simple inline CSS.

This is what most of them show.

```javascript

<div style={{background:'red'}}>Hello World!</div>

```

Basically, you are putting a Javascript object of `{background = 'red'} ` as an inline style.

The next step would be to pull this out to a const and then put that in the style. This start to look more like normal CSS.

```javascript
 render() {
    const style = {
        background: 'red'
    }
        return (
            <div>
                <div style={style}>Hello World! Object</div>
            </div>
        );
    }
```

And this works well at a CSS class level but when you want to do more you start getting stuck. This is where the concept of cascading comes in.

This is what it looks like in normal CSS

```html

<style>
.Item{
 background:"Red";
}

.Item .Large{
    font-size:30px;
}

</style>

<div class="Item">Item 1</div>
<div class="Item Large">Item 2</div>


```

Then in JSX

```javascript
render() {
    const style = {}

    style.Item = {
        background: 'red'
    };

    style.Item.Large = {
        ... style.Item,
        fontSize: 30
    }

        return (
            <div>
                <div style={style.Item}>Hello World! Cascading </div>
                <div style={style.Item.Large}>Hello World! Cascading Large</div>
            </div>
        );
    }

```

In the JSX I started using the spread operator `...` to copy down the items in the related object or cascade them.

I had this aha🤦‍♂️ moment a few days ago and hope this helps someone down the path of CSS in JavaScript in React.
Dynamic UI with CDK TemplatePortal and DomPortalHost
Tags: angular, webdev, javascript
Published: 2019-04-18 14:12:45

---
title: Dynamic UI with CDK TemplatePortal and DomPortalHost
published: true
description: Dynamically place a piece of UI from one component into another, without them having to know each other
tags: angular, webdev, javascript
cover_image: https://juristr.com/blog/assets/imgs/portal-toolbar-action.png
canonical_url: https://juristr.com/blog/2018/05/dynamic-UI-with-cdk-portals/
---

_Ever wanted to place some piece of UI dynamically from one component to another? But the component that owns the content doesn't have any connection to the component that should display the content. In this article we'll learn how we can leverage Angular CDK Portals for achieving exactly that._

Let's assume we have this simple (mobile-like) application.

![App Home Screen](https://juristr.com/blog/assets/imgs/portal-toolbar-empty.png)

As you can see we have a toolbar with the side-bar menu button and application title, and a central area, currently displaying the home app screen. When the user clicks the menu, he/she can navigate to different screens as you might expect. Each of these screens (i.e. our routed components) has a set of specific actions. Whenever the routed component gets activated, we'd like to display those actions (lets call them **page actions**) inside our application's toolbar. This is a common scenario especially in mobile apps.

![](https://juristr.com/blog/assets/imgs/portal-toolbar-action.png)

_Note the "add" icon at the top-right of our toolbar._

Now, from a "componentization" point of view, we have some kind of `ShellComponent` which creates the overall layout including the toolbar, the sidebar (both of which could also be separate components) as well as a central area where our routed components will be placed. That said, **the routed components don't have any knowledge where they're placed**. We don't want to have a hard-coded reference to the toolbar or whatsoever. 

Basically in our specific demo app,

- the `ContactListComponent` does not have any knowledge of the toolbar. It might reside in a different (even lazy loaded) Angular module. Also, we wouldn't want to couple them together.
- The displayed action is context specific though, meaning if we click the "+" button, some function on our `ContactListComponent` gets triggered.

[Read more &raquo;](https://juristr.com/blog/2018/05/dynamic-UI-with-cdk-portals/?utm_source=devto&utm_medium=crosspost)
How do I use Async/Await with Array.map?
Tags: javascript
Published: 2019-04-18 14:02:41

---
title: How do I use Async/Await with Array.map?
published: true
description: 
tags: JavaScript
---
![Await](https://thepracticaldev.s3.amazonaws.com/i/e6dpui3dg7zcxxobdr3x.jpg)

You can't, but you can do something similar. This always trips me up so I thought I'd better write it down.

You can't async/await `Array.map`  since **synchronous code won't sit and wait for your asynchronous code to resolve**, instead it will the fire the function and move on. This is desired behaviour as we don't want our `Array.map` to block the thread otherwise nothing would run whilst `Array.map` goes and does its thing. Knowing that is cool, however, it doesn't really help us if we need to await our `Array.map()`.

Thankfully there is a solution, we can achieve what we want by utilising `Promise.all`

For example, the following won't work:

    const postIds = ['123', 'dn28e29', 'dn22je3'];
    
    const posts = await postIds.map(id => {
      return axios
        .get(`https://example.com/post/${id}`)
        .then(res => res.data)
        .catch(e => console.error(e));
    }
    
    console.log(posts) // [] it returns the promise, not the results 💩

But this will:

    const postIds = ['123', 'dn28e29', 'dn22je3'];
    
    const posts = posts.map(post => {
      return axios
        .get(`https://example.com/post/${post.id}`)
        .then(res => res.data)
        .catch(e => console.error(e));
    }
    
    Promise.all(posts).then(res => console.log(`We have posts: ${res}!`));

Instead of immediately returning the `Array.map` we're assigning it to a variable and passing that variable to `Promise.all`, once that resolves we then have access to the new array returned by `Array.map`.

Happy JavaScripting.
On learning GO and code that grows nicely
Tags: ddd, go
Published: 2019-04-17 18:53:50

---
title: On learning GO and code that grows nicely
published: true
description: maybe I'm more experienced than yesterday?
tags: DDD, golang, go
---

A few days ago I decided to learn GO because I'm falling in love with typed and compiled languages (i.e. Rust too) but with GO you can make a http server with the std library in a few lines!? and deployment is just running a binary on the server, no need to install dependencies or production environment? I was sold.

But for whatever reason (I'd dare to say experience) when I started learning GO instead of learning the traditional string methods and loops and syntax I was interested in code organization, microservices, deployment and test and such... came across DDD and other ideas for software architecture. This wasn't really related to GO but GO seems to push to to write code than can grow without becoming a _unworkable blob of stuff_

And then I picked up a project last Sunday and oh boy do I love GO! Writing GO, testing GO and adding code that it's easy to plug in new features... and then I had to write Python for a helper script... ugh! programming is scary, don't go out there without a compiler buddy to help you along and without structures that tell you what certain data does and how is that data shaped.

Anyways, just a quick post to share some of my excitement learning a new language and thinking a little more like a software architect for the first time!

So if you wanna learn Go just Go and do it! (sorry, it's physically impossible to write about Go without including a pun!)
Thoughts on Software Architecture
Tags: software, architecture, architect, leadership
Published: 2019-04-18 13:51:43

*I originally posted this as [a thread on Twitter](https://twitter.com/ramsey/status/1118331261079228417) in response to [a recent #DevDiscuss topic](https://twitter.com/ThePracticalDev/status/1118318764930551813). I'm reposting here to preserve these thoughts and for others to easily refer to it.*

Software architecture concerns itself with how the software is built, including high-level design and technical standards, as well as coding standards, tools, platforms, etc.<sup>[1]</sup>

A software architect is a software developer who has become an expert in these things through extensive experience practicing them and learning from others.

A software architect (as a role) is a leader in the organization, helping the team turn a problem domain into software. They are able to grasp the concepts of the domain and communicate how to represent them in code. Additionally, they work with the team to set standards and develop practices that will ensure the quality of the software created and the long-term maintainability of the code. They balance purity with pragmatism, considering the business goals and priorities—and they articulate the risk to the business when sacrificing quality/purity for accelerated timelines.

I believe a software architect should be a mentor, using their experience to teach others how to create the best software they can. This involves in-depth code reviews and pair programming, among other teaching techniques. Good software architects are humble and patient. They don’t berate or belittle their team for not yet grasping concepts that they see clearly. Instead, they use these moments as teaching opportunities.

Many see coding as formulaic as algebra equations. Software developers are natural problem-solvers, often seeing a code solution based on a formula before fully understanding the problem. Software architecture is different. There is no formula for it. There are recurring patterns seen across problem domains, and Martin Fowler has cataloged many, but his book Patterns of Enterprise Application Architecture cannot be treated as a formula by filling in the blanks and generating the code. It doesn’t work that way.

Learning to design software from an architectural perspective is an exercise in grokking<sup>[2]</sup> the problem, taking a Zen-like approach to perceiving its true nature. To do this, you must exercise restraint so you don’t cloud your mind with thoughts of the solution before you fully understand the problem.

[1]: https://en.wikipedia.org/wiki/Software_architect
[2]: https://en.wikipedia.org/wiki/Grok
I Made It To 💯 Youtube Subscribers! Lets Celebrate 🎉
Tags: junkpost, personalnews
Published: 2019-04-18 13:49:16

---
title: I Made It To 💯 Youtube Subscribers! Lets Celebrate  🎉
published: true
description: 
tags: junkpost, personalnews
---

Yes, this is a junk post, but I don't care. I just want to share the joy. 
It's a very small number but I did it by producing highest-quality content I'm currently able to create. 

There are shortcuts to subscribers but I really wanted them to count.

It has been an incredibly stress filled and difficult month and I foresee the year only getting harder so it's important to enjoy the small wins.


[![](https://thepracticaldev.s3.amazonaws.com/i/wprxcd3y0mfteq3v3uyg.png)](https://www.youtube.com/c/ExamProChannel)

💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯

![](https://media.giphy.com/media/3oEjI9byGIPCDolVBK/giphy.gif)

![](https://media.giphy.com/media/1nQ7lKpz4XiAOB3K38/giphy.gif)


![](https://media.giphy.com/media/87NS05bya11mg/giphy.gif)

![](https://media.giphy.com/media/yCjr0U8WCOQM0/giphy.gif)

![](https://media.giphy.com/media/YJ5OlVLZ2QNl6/giphy.gif)

![](https://media.giphy.com/media/l46CimW38a7TFxLVe/giphy.gif)

![](https://media.giphy.com/media/J0a9SREMHkBAA/giphy.gif)

![](https://media.giphy.com/media/oiH8n9eNzfSHC/giphy.gif)

![](https://media.giphy.com/media/HjheuybfwDGnu/giphy.gif)