teleren/devto huggingface dataset:
Visualising documentation: JavaScript array.from
Tags: javascript, beginners, tutorial, codenewbie
Published: 2020-08-28 13:56:19

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ui0vjza304c7iyxmjcm3.jpg)

Today’s function is array.from(), mdn description [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from). 

This function creates an array from whatever it has been given. 

For example, if you give it a string it will split the string into chars and build an array from that. You could also give it an existing array and a function, and it will create a new array from the results of applying the function to each item in the original array. 

For this second use case, it's interesting to consider when to use array.from() vs array.map(). Would welcome any comments :)

I've done my own version of the docs with sketches together. Here’s the folder for [array.from](https://github.com/cfereday/javascript-core-functions/tree/master/arrays/do%20not%20mutate/returns%20a%20new%20array/from). Check out the [readme](https://github.com/cfereday/javascript-core-functions/blob/master/README.md) to see how you can run the examples.
What is Infrastructure as Code? 🤔 and the difference of IaC Tools
Tags: devops, infrastructure, beginners, terraform
Published: 2020-08-28 13:54:35

With the below [Infrastructure as Code video](https://youtu.be/POPP2WTJ8es) 🎬  you'll get a good overview of what Infrastructure as Code is and how the IaC tools differ from each other.

###What is Infrastructure as Code? 🤔 ###
To understand the Infrastructure as Code concept better, I explain how DevOps tasks were done
- **before** automation and
- **after** automation.

####► DevOps tasks BEFORE automation####
Before automation you were doing everything by hand 🙌🏼:
- setup servers
- configure networking
- install and configure software
- etc.

In addition to that all the tasks needed to be done for multiple environments like DEV, TEST and PROD environment. 🤦🏼‍♂️

![DevOps tasks before automation](https://dev-to-uploads.s3.amazonaws.com/i/hmofdrkhvri98ysu997f.png)

####► DevOps tasks AFTER automation####

Now, Infrastructure as Code is a way to automate all these DevOps tasks end to end instead of doing it manually. 🚀 
All the knowledge and expertise of system administrators or DevOps engineers are packed into programs and applications that carry out those tasks.

>So, Infrastructure as Code or IaC is a concept and there are Infrastructure as Code tools, like Ansible, Puppet, Terraform or Cloudformation etc  that you can use for different tasks.

![Infrastructure as Code concept](https://dev-to-uploads.s3.amazonaws.com/i/fz4ayz9yjrohhxn52r2d.png)

---

###Difference of Infrastructure as Code tools 🛠 ###

Why do we have so many different tools, can't we just use one IaC tool? 🙄

Well, no. Because no tool can do everything and each one is great in a specific area. **IaC tools automate tasks in different categories for different phases:**

####3 main task categories:####
- infrastructure provisioning
- configuration of provisioned infrastructure
- deployment of application

####Distinction of phases:####
- initial setup phase
- maintaining phase

![DevOps tools in different categories and phases](https://dev-to-uploads.s3.amazonaws.com/i/fiy7l7aql3gj62uk0g64.png)


So, in most cases you would use a combination of 2 or more IaC tools.

####Distinction in how they work####
Moreover, the IaC tools differ in the way **HOW they work**:
- declarative vs procedural
- mutable vs immutable
- agent vs agentless

Watch the full video here 🤓
{% youtube POPP2WTJ8es %}

-----------------
► Get **30% off** - with this code: UDEMY_NANA_OCT2020: [Udemy course here](https://bit.ly/2IkzZez)
► **Kubernetes 101**: [Compact and easy-to-read ebook bundle 🚀](https://www.techworld-with-nana.com/e-books) 
It's a handy way to quickly look something up or refresh your knowledge at work and use it as your cheatsheet  😎


**Like, share and follow me** 😍 for more content:
- [Private FB group](https://www.facebook.com/groups/techworldwithnana)
- [Twitter](https://twitter.com/Njuchi_)
- [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1)
- [Instagram](https://www.instagram.com/techworld_with_nana/)
- [LinkedIn](linkedin.com/in/nana-janashia)
How to design an overview of events
Tags: design, frontend
Published: 2020-08-28 13:53:52

Hey fellow devs!

I am thinking about the following project. I want to create a page which shows an overview of upcoming events. The events are cultural, nature focused. And they follow a somewhat 'local' feeling.

I can simply create a stack of cards, but that is not that 'nature' feeling. How would you approach such a idea? Where can I get good ideas on these ages. I am looking through Dribble but I find it difficult to wrap my head around it.

Which other design resources do you use for inspiration?

Thanks in advance!
Why doesn't it exist?
Tags: discuss, watercooler
Published: 2020-08-28 13:46:17

### I love python

* The language is beginner-friendly
* Easy to understand
* "Just works" (but not in a bad way)
* Requires way fewer lines of code

### Python is slow

The one thing I always see tossed around about python is that it's **slow**.

> Yes people I am aware you can make it fast, by using blocks of C code for your logic and loading them into Python or using builtin functions etc.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5ksh8zj3x6otxpzyw7mz.png)


### What am I looking for - Maybe Go?

A language which is simple like python but also relatively faster.
Off the top of my head, I can say *GoLang* looks simple, but it also requires comparatively more lines of code than python does to do *stuff*.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h6oykrreuzemsvt367nr.png)

### My question

Is there any language in the works - which provides all the pythonic features but is also relatively faster?
The Price of Currying
Tags: performance, javascript, currying
Published: 2020-08-28 13:32:37

---
title: The Price of Currying
published: true
description: 
tags: performance, javascript, currying
cover_image: https://images.unsplash.com/photo-1567529854338-fc097b962123?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80
---

I stumbled upon [this very interesting article](https://dev.to/heytulsiprasad/what-the-heck-is-currying-anyway-p83) on the concept of currying and how to it in practice, I definitely recommend you read it =).

As I am very interested in the performance cost of how we program, I had to explore the impact of using this method/feature or whatever we want to call it, here are my findings.

# Test 1 (add)

Curried Version (from the referenced article, using lodash)
```javascript
function add(a, b, c) {

   return a + b + c;
}

const curryAdd = _.curry(add);

curryAdd(1)(2)(3);
```

Basic JS Version
```javascript
function add(a, b, c) {

   return a + b + c;
}

add(1, 2, 3);
```
And the results are just horrible. Using the curried version here is 99.96% slower, its so slow its almost unfathomable.

# Test 2 (isType)

Base Items List for this test (from the referenced article)
```javascript
const items = [
      { name: "Mango", type: "Fruit" },
      { name: "Tomato", type: "Vegetable" },
      { name: "Strawberry", type: "Fruit" },
      { name: "Potato", type: "Vegetable" },
      { name: "Turnip", type: "Vegetable" },
      { name: "Banana", type: "Fruit" },
      { name: "Carrot", type: "Vegetable" },
    ];
```

Curried Version (from the referenced article)
```javascript
const isType = obj => type => obj.type === type;

const isFruit = item => isType(item)("Fruit");
const isVegetable = item => isType(item)("Vegetable");

const fruits = items.filter(isFruit);
const vegetables = items.filter(isVegetable);
```

Basic JS Version
```javascript
function isFruit(obj) { return (obj.type == 'Fruit'); }
function isVegetable(obj) { return (obj.type == 'Vegetable'); }

const fruits = items.filter(isFruit);
const vegetables = items.filter(isVegetable);
```

Performance here is IDENTICAL for both versions which is nice, and expected, since you end up with basically the same thing for .filter to do. 

# Wrap Up

As is illustrated in the referenced article there are certainly use cases for currying, but do use it with restraint, especially if your code is executed by many many people, or many many times. 

--

All benchmarking done with https://jsbench.me/ in the latest version of Chrome on a Windows PC. Actually declaring the functions was NOT included in the benchmarked code, that happens in the setup stage. That is slower in the curried case for both tests above.
Demystifying NODE_ENV var 
Tags: node, javascript, webdev
Published: 2020-08-28 13:32:26

There might be some confusion regarding using `NODE_ENV` variable in Node.js apps. A few things you need to be aware of:

**(1)** Do not set `NODE_ENV` to anything other than `production`, `development` or `test`.

When you deploy your app to let's say Google Cloud Functions, the `NODE_ENV` variable will always be set to `production`, you will not be able to override it.

Similarly, when you run unit tests, the `NODE_ENV` variable will always be set to `test` by the test runner (this is a good default value that you don't want to mess around with, too many tools depend on it).

When you run your app locally, `NODE_ENV` needs to be set to `development`. If you're using a tool such as Webpack, it's going to be handled for you.

**(2)** Use custom environment variables such as `APP_ENV`, `APP_VERSION` to tell the app in which (deployment) environment it is running. For example:

* `http://localhost:8080` -> `APP_ENV=local`, `APP_VERSION=latest`
* `https://example.com` -> `APP_ENV=production`, `APP_VERSION=1`
* `https://test.example.com` -> `APP_ENV=test`, `APP_VERSION=1`

Most likely you want to use one of the following values for setting `APP_ENV` variable - `production`, `staging`, `test` (QA), `development` (shared development), or `local` (local development).

`APP_VERSION` can be set to `latest` or the OS username when you run/test the app locally. And once deployed it would be set to the actual version number by CI/CD pipeline. This will be particularly helpful when you need to notify users about the new version of the app that had been deployed:

<img src="https://dev-to-uploads.s3.amazonaws.com/i/clppgr7h6wg89o1z60mf.png" width="534" />

**(3)** Ensure that the correct `NODE_ENV` (or, `BABEL_ENV`) variable is passed when you build the app with Babel for local testing vs production deployment.

---

**P.S.:** You will be surprised how many developers are struggling with this issue. Here is some random comment from GitHub:

<img src="https://dev-to-uploads.s3.amazonaws.com/i/inic094hc4l7brf9prpu.png" width="565" />

---

Find a complete example of a Node.js application setup here:

https://github.com/kriasoft/nodejs-api-starter
AWS Lambda Deep Dive
Tags: aws, lambda, serverless, faas
Published: 2020-08-28 13:28:38

A brief history lesson about serving web applications, followed by an in-depth look at Functions as a Service on AWS using Lambda.
• Lambda REST API
• How functions are created and invoked
• Connecting to HTTP events with API Gateway
• Limitations
• Custom runtimes
• How layers work

{% youtube bGzty_IUDP0 %}
Kubernetes as a Service webinar is live — by Sardina Systems and StorPool Storage
Tags: kubernetes, storage, opensource, openstack
Published: 2020-08-28 13:21:47

Watch our webinar about Kubernetes as a Service organized by StorPool Storage and Sardina Systems here https://bit.ly/2D7MyYC

Sardina and StorPool joined forces to solve the challenge of managing a Kubernetes environment by providing a scalable, fast, highly available, and fully managed KaaS platform.

In this webinar, we present what is a Kubernetes as a Service, the technical side of the solution, and what benefits it will bring for your business:
— Automation
— Scalability
— Flexibility
— High Performance
— Eliminated Vendor Lock-in
#30DaysOfCJS: Machine Learning for Front-End Devs
Tags: community, javascript, machinelearning, frontend
Published: 2020-08-28 13:05:39

---
title: #30DaysOfCJS: Machine Learning for Front-End Devs
published: true
description: #30DaysOfCJS Day 27, Machine Learning for Front-End Devs
tags: community, javascript, machinelearning, frontend
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/286l5y8zxebir7y9p3ec.png
series: 30DaysOfCJS
---

*This is a follow up post for Day 27 of* **#30DaysOfCJS**, *learn more about* **#30DaysOfCJS** *here* {% link jimcalliu/30daysofcjs-1jd3 %}

**Machine Learning for Front-End Devs | Charlie Gerard | CascadiaJS 2019**

{% user devdevcharlie %}

If you'd like to watch the talk, here is the Youtube link.
{% youtube xB8lkqxQluw %}

Further readings:
- [talk slides](https://docs.google.com/presentation/d/1f--c4Ui1VcmVgW4Gj3v-e_17GYfxRlbUSMnyk4sOVjg/edit#slide=id.g4688909fd8_0_242)
YouTube Video | JS Crash Course -4
Tags: javascript, youtube, webdev, beginners
Published: 2020-08-28 13:03:26

This video series  we will go over the fundamentals of JavaScript including some modern syntax like classes, arrow functions, etc. This is the starting point for learning JS.

This is the fourth part of the series.

{% youtube Yfd55_nEROU %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | JS Crash Course -3
Tags: youtube, webdev, javascript, showdev
Published: 2020-08-28 13:01:52

This video series  we will go over the fundamentals of JavaScript including some modern syntax like classes, arrow functions, etc. This is the starting point for learning JS.

This is the third part of the series.

{% youtube y7FaHZe7Xos %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | JS Crash Course -2
Tags: javascript, youtube, beginners, webdev
Published: 2020-08-28 13:00:17

This video series  we will go over the fundamentals of JavaScript including some modern syntax like classes, arrow functions, etc. This is the starting point for learning JS.

This is the second part of the series.

{% youtube jla7D8Kd-5s %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
How To Find A Relevant Website Design Company In Easy Steps
Published: 2020-08-28 12:58:55

Selecting the most appropriate site design company is vital for online merchants so as to accomplish a prominent web presence. A reliable company ensures quality together with cost-effectiveness.

Once you've realized the importance of a website for your business venture, your next step is to determine where to start and the best way to realize your thoughts. If your website is meant to grab the audiences' attention, represent your brand & promote conversions, you will likely require the assistance of a [professional web site design firm](https://www.propelguru.com/website-development/). But, the issue is the way you would know what business is the best fit for you. Assessing comprehensive research to find your ideal company is the primary step to start with site development. By following the basic steps rightly, you will be able to get the appropriate web design company quickly. This way you'll be able to focus your time and attention towards managing your small business.



**List Your Thoughts:** Prior to starting the hunt, you have to understand just what you're seeking. Determine your requirements & preferences, understand how you want your website to look and function. You may also ask for suggestions or ideas from the developer. By analyzing the requirements and objectives of your business enterprise, he will have the ability to work in your job effectively.

**Assess Competitors' Website:** Another way to know what you expect from your website is assessing your competitors' websites. Browse the sites to catch ideas of colour schemes, content, design and much more.

**Analyze Portfolios:** Reputed companies frequently showcase portfolio on their website, which shows their own capability to accomplish specific project. So, how are you going to pick the best one from lots of firms with portfolios. Go through them one by one and check if anything special catches your attention. You might not find any website sample that comes within your specified niche, but you are probably get one, which closely suites your vision and requirements.

**Interview Your Developer:** the majority of the online retailers become confused or just do not understand what questions to ask from their developer or programmer. Ask the company what procedure they will follow to design your site. Know whether you'll have the complete control of your website (coding, articles, images, hosting, and much more ) following the job completion. Do they provide any special training that will help you manage your site.

**Conclusion**

Developing a site is a complicated and time-consuming procedure, which cannot be successfully carried out alone. You would probably want the aid of skillful designers and developers. That is where approaching a dependable website design company seems to be a worthy option.
YouTube Video | JS Crash Course -1
Tags: youtube, javascript, webdev, beginners
Published: 2020-08-28 12:58:34

This video series  we will go over the fundamentals of JavaScript including some modern syntax like classes, arrow functions, etc. This is the starting point for learning JS.

This is the first part of the series.

{% youtube H2bF0laN9AE %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
What new features are introduced in React- version 17?
Tags: react17, react, productivity
Published: 2020-08-28 12:53:07

React Fiber(React v16) is amazing and has taken several big steps to enhance the performance of the developer as well as the quality of the applications developed with React. It has introduced several changes in the new version and some of them are as below:

<ol> <li> <b>New Lifecycle Methods- </b>The new lifecycle methods are switched with the deprecated lifecycle methods. These two methods are: getDerivedStateFromProps and getSnapShotBeforeUpdate.</li>

<li> <b>Native Component Stacks- </b>In React 17, component stacks are created using a different process to thread them together from regular native JavaScript stacks. This helps you to locate the completely symbolical React component stack traces in the production process. </li>

<li> <b>Removing Private Exports- </b>In React 17, private exports have been eliminated.  React Native for Web was the only project that used them, and they have already completed a migration to a new approach that does not rely on private exports. </li>

<li> <b>Optimizing Effect cleanup- </b>In the past, the cleanup feature would run synchronously before the next frame was created. In fact, most apps do not allow screen updates to be delayed while cleanup methods are operating. And now they're going to run asynchronously after React has made the next frame. This is supposed to result in faster switching times between components. You can also use the useLayoutEffect framework to run a cleanup process that blocks the rendering loop. </li>

<li> <b> No More Event Pooling-</b> Event pooling is extremely messed up and does not have any functionality for major browsers. Instead, it might result in some odd bugs when operating with multiple components that experience the same case. One event handler might set an event to be null, so the other components using an event might run into a null variable error. To sum up, the newer version of React will enable users to access event fields anytime you need them. </li>
</ol>

<h3><b> Conclusion

These are just some of the changes that I noticed. <a href=" https://codersera.com/blog/what-is-new-in-react-v17/" > React version 17 </a> has come up with more such changes that will prove to be very efficient in the long run.
New GitHub Action to set up docker-compose
Tags: actionshackathon, github, opensource, dockercompose
Published: 2020-08-28 12:23:36

---
title: New GitHub Action to set up docker-compose
published: true
description: My submission to the GitHub Actions x DEV Hackathon!
tags: actionshackathon, github, opensource, dockercompose
---

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)

### My Action

This [setup-docker-compose action](https://github.com/KengoTODA/actions-setup-docker-compose) downloads the `docker-compose` command and add it to the `PATH` for following executions. At this moment, It supports the Linux environment only.

### Submission Category: 

Wacky Wildcards. Usually, FOSS projects don't need to use this action, because action runners hosted by GitHub already have `docker-compose` in its `PATH`. So other categories aren't suitable to submit.

### Yaml File or Link to Code

{% github https://github.com/KengoTODA/actions-setup-docker-compose %}

### Additional Resources / Info

As noted above, FOSS projects usually don't need to use this action. So there is no FOSS project depending on it for now.

This action is for who's trying to integrate FOSS power into in-house development with the self-hosted runner.
How to Fix #REF! Error in Excel Office 365? – [with Example]
Tags: referrorinexceloffic, excelerrors
Published: 2020-08-29 08:10:37

---
title: How to Fix #REF! Error in Excel Office 365? – [with Example]
published: true
date: 2020-08-28 12:18:22 UTC
tags: REFErrorinExcelOffic,ExcelErrors
canonical_url: https://geekexcel.com/how-to-fix-ref-error-in-excel-office-365-with-example/
---

## #REF! Error in Excel:

In this article, we are going to learn what is **#REF! Error in Excel Office 365** , why it occurs, and how to fix it. Let’s get into this article!! Get an official version of **MS Excel** from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)



## #REF! Error in Excel:

- **#REF!** Error occurs when a cell reference is invalid.
- If the relative reference is copied to the new location, it may show this error.
- If you delete any row or column in Excel, it will return **#REF!** Error.

## #REF! Error – Reasons:

- In the following image, you can see that the **C7**  **cell** is copied and placed into the **cell F5. ** It has shown the **#REF!** Error value.

![Example](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/08/EXCEL_Btc63cxUUu.png)<figcaption id="caption-attachment-12882">Example</figcaption>

## How to fix it?

- You can edit the formula and replace the error with valid references.

## Wrap-Up:

In this article, you can understand what is **#REF! Error in Excel Office 365** , why it occurs, and how to fix it. Share your **feedback** in the comment section. Thanks for visiting **[Geek Excel.](https://geekexcel.com/)** Keep Learning!!