teleren/devto huggingface dataset:
Simple Array Sum –[HackerRank Coding Challenge]
Published: 2021-01-31 23:35:57

Warning, it is assumed that if you are reading this you understand JavaScript ES6 concepts.

# Problem

Given an array of integers, find the sum of its elements.

For example, if the array [1,2,3], 1 + 2 + 3 = 6 , so return 6.

Function Description

Complete the simpleArraySum function in the editor below. It must return the sum of the array elements as an integer.

simpleArraySum has the following parameter(s):

ar: an array of integers


# Solution

```
const simpleArraySum = arr => arr.reduce((acc,curr) => acc + curr, 0) 
```

Read more on the reduce() JavaScript ES6 array method here => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

P.s. here's another really cool resource I like for learning more about JavaScript and reduce() => https://www.youtube.com/watch?v=-LFjnY1PEDA&t=401s&ab_channel=TheCodingTrain

Happy Coding!
Day 1: Two Sum
Tags: 100daysofcode, javascript
Published: 2021-01-31 23:10:24

Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.

Javascript:
```javascript
var dayOne = function (nums, target) {
  var sum = {}
  for (var i = 0; i < nums.length; i++) {
    if (!Object.prototype.hasOwnProperty.call(sum, (target - nums[i]))) {
      sum[nums[i]] = i
    } else {
      return [i, sum[target - nums[i]]]
    }
  }
}

console.log(dayOne([2, 7, 11, 15], 9))
```
Audiotarky Tech stack
Tags: webmonetization
Published: 2021-01-31 13:25:36

> Buy it, use it, break it, fix it, trash it, change it, mail, upgrade it

_This was originally published on the [Audiotarky blog](https://blog.audiotarky.com/2020/11/15/tech-stack/index.html) in November 2020, there's an update due..._

While we're still very much "in development" I thought it might be interesting to write up the tech stack that's in use today, if only as a historical record to compare back to in the future.

The site uses [Flask][flask] in the backend, and [Jekyll][jekyll] to render static content. For the initial phase of development, we're avoiding databases in the backend - the content is not that dynamic, in fact its almost write once. Jekyll means we can pre-render the pages, apply changes to templates etc. easily. There are a few "interesting" templates that are being built, and that probably points to Jekyll not being a long term solution ([Hugo](https://gohugo.io/) looks interesting).

We've so far avoided a front end framework, though I expect that will be changing soon. That said, I'd like to keep any UI framework minimal, & standards based.

We're trying to be privacy concious, and the architecture & use of [Coil][coil] means we _need_ to know very little about our audience, but also do want to understand _some_ of what people are doing. To that end we've got [Fathom][fathom]* providing some "non-creepy" analytics.

The flask app is hosted on [PythonAnywhere][pythonanywhere]* which I stumbled upon, and have so far been very impressed with. There's some work to do to better use their service (static assets, some scheduled tasks, maybe some further deployment automation) but for now it's doing whats needed. It's simple, it does what you need & gets out the way - winner!

The flask app is used to change how audio is served based on whether the listener has [Coil][coil] enabled. To do this we're using [Vanilla][vanilla] to verify a payment stream, and some code that will be open sourced in the future.

Last there are some google forms/sheets & associated python scripts to pull data. These are used for [expression of interest][eoi] & artist sign up


<p class="small">* referal link</p>
[fathom]: https://usefathom.com/ref/KP7MDR
[flask]: https://flask.palletsprojects.com/en/1.1.x/
[pythonanywhere]: https://www.pythonanywhere.com/?affiliate_id=0086ceb1
[jekyll]: https://jekyllrb.com/
[vanilla]: https://admin.vanilla.so/
[coil]: https://coil.com
[eoi]: https://forms.gle/7irCZKrSUaZjRnZk7
Filter and Map...
Published: 2021-01-31 22:24:09

How exactly does a map function work>>?? Map takes two arguements and then the callback will run through the entire array and then it will return a new value for each item in the array. Thus resulting in a new array. Filter on the other hand is different. If you have an array and only want to few specific things from it and don't need the rest. This is the function that you would use. It takes information from your current array that returns "true", if it doesn't return as true, then it won't be filtered. It will create a new array and not change the first one. This is what we learned last week and it took me till today to remember all of that.
Go-Assessment
Tags: go
Published: 2021-01-31 21:23:33

---
title: Go-Assessment
published: true
description: A tool for learning and assessing beginner programming in Go
tags: go
---
https://github.com/dmh2000/go-assessment

Your job is to make the tests pass!

This is a tool for assessing or practicing beginner level programming in Golang. It is inspired by Rebecca Murphey's js-assessment.

![Go-Assessment Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/gvbiih5ituywj6u6rxb7.png)
Destructuring Tweets - Episode 5 - Comparing Arrays
Tags: snippet, javascript, destructuring, array
Published: 2021-01-31 20:57:04

---
title: Destructuring Tweets - Episode 5 - Comparing Arrays
published: true
description: I pick a more or less random snippet from Twitter and analyze it in depth in this series. It shall help me, and you understand the trickery behind it. This episode features the comparison of Arrays.
tags: snippet, javascript, destructuring, array
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/cr953b5arm4f1c4m14cz.png
---
What's kickin', little chicken? Welcome to my series about destructuring those JavaScript quizzes on Twitter. Enjoy the fifth episode!

# Snippet of the Week

This week's [snippet](https://twitter.com/jsstartup/status/1355911036201693184) is from [Javascript Startup](https://twitter.com/jsstartup):
```javascript
let arrOne = [8];
let arrTwo = [9];

console.log(arrOne == 8);
console.log(arrTwo == 9);
console.log(arrOne < arrTwo);
```
They first initialize two arrays and store them in a variable. Both of them only have one single item. The first holds the number 8, the second one number 9.
Three logs conclude the snippet by printing the output of different comparisons.

# The Output

Well, intuitively, one would guess that this will put out three times `false`. You can't just compare an array to a number, can you?
Well, the thing is, the contrary is true. The output is actually `true`, `true`, and `true`.

# Analysis

To demystify the snippet, we only need to know how Equal (`==`) behaves when comparing an Object to a primitive type. Cause an Array, is, indeed, of type Object.

> When comparing a number to a string, try to convert the string to a numeric value.
> (...)
> If one of the operands is an object and the other is a number or a string, try to convert the object to a primitive using the object's valueOf() and toString() methods.

That means that the Array gets converted to a string and the string then to a number. And if we then know how the `toString` method of Array works, we finally understand why the snippet logs `true`.

> The Array object overrides the toString method of Object. For Array objects, the toString method joins the array and returns one string containing each array element separated by commas.

Remember, we only have one element. Thus we do not have to deal with any comma concatenation.
Well, it's more or less the same for less than (`<`).

# Snippet Summary
- **Trickery**: Equals even converts Arrays
- **Key Learning**: Array is an Object, its `toString` method joins and returns the elements with a comma, and Equal tries to convert a string to number 
- **Further Reading**:
    - [Less Than Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Less_than)
    - [Equal Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality)
    - [Array toString Method](https://developer.mozilla.org/en-us/docs/Web/JavaScript/Reference/Global_Objects/Array/toString)
Nute
Tags: sideprojects
Published: 2021-01-31 20:48:36

Notion is nice but sometimes all you need is an app like [Nute](https://nute.app/).

Nute is lightweight and it loads in an instant, even on slow connections. The app has no account system, so there’s no user registration or login, and no syncing across devices. You can, however, download whatever you type in the app as a .txt file on your system.

Nute is a PWA, so you can install it on almost any operating system. It works offline.

Nute is free and always will be. It has no ads or trackers.

I use Nute to help me remember things I’d most likely forget when browsing the web. Hopefully you find it useful too.

To install, visit nute.app from Chrome or Safari. On Android, tap menu button and select Add to Home screen from the options. On iOS, tap share button and select Add to Home screen from the options.
Growing My Connections
Tags: webdev, challenge, devjournal, productivity
Published: 2021-01-31 20:48:00

Week 3 of my 'post-graduation' / 'job-hunt' journey and well here is where I am. 

This week was the most draining one. I consider myself to be an introvert when I first meet people. And this week I forced myself to step outside my comfort zone and contact people that work with companies I admire. 

I started with a mock technical interview which was challenging but a great learning experience. I felt good about what I did and now I know what I need to work on. Especially controlling my nerves, which always creates fear and sometimes blocks me from thinking clearly. 

Next thing, I met with the CTO of a company I respect and admire. This was more of an informal meeting to get to know me and what I can offer. This is such an important part of the job search, reaching out and connecting with people who know the position best. I ended up leaving the meeting feeling good and hopeful.

Right after that, I met with a very talented and nice software engineer whose path I admire. This was a very eye-opening talk. It was refreshing learning about how another Software Engineer got to where he is. He was extremely helpful in answering all of my questions and worries that come during the job search.

Overall, this week was mentally draining. Having to step out of my comfort zone was very challenging but taught me a lot more than I could ask for. I now know what I need to work on to better my work and made amazing connections.

01-31-2020,
Ken
[help] Unable to install this plugin
Tags: reactnative
Published: 2021-01-31 20:32:36

Hi everyone I'm new to RN.
I'm trying to install [this](https://www.npmjs.com/package/react-native-ibm-mobilefirst) plugin with the latest version of bare RN (0.63)
but I'm getting this error:
```
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1002 file(s) to forward-jetify. Using 8 workers...
info Starting JS server...
info Installing the app...
Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.2/userguide/command_line_interface.html#sec:command_line_warnings
FAILURE: Build failed with an exception.
* Where:
Build file 'C:\Users\mooli.morano\workspace\reactnative\AwesomeProject\node_modules\react-native-ibm-mobilefirst\android\build.gradle' line: 44
* What went wrong:
A problem occurred evaluating project ':react-native-ibm-mobilefirst'.
> Project with path ':react-native-bridge' could not be found in project ':react-native-ibm-mobilefirst'.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 5s
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbos
e flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
error Command failed with exit code 1.
```

Any idea how to solve this? (edited)
React component displaying different props than given
Tags: react, components
Published: 2021-01-31 20:26:41

I have created a minimized test site on codesandbox.io to illustrate my issue:

[https://codesandbox.io/s/floral-glitter-ege9o?file=/src/functions/helperFunctions.js]

It appears to me the component to which I am passing props receives props other than what I am providing. I would appreciate any assistance in understanding why this is occurring.

On the Home.js page, I am mapping over an array of items from the provided local data file (data/data.js). For this test, I display on the sandbox browser the id property of the data item being supplied as props to the component. I have also logged to the console the value of the prop within the map method. One may see, however, with a few sandbox browser refreshes that the two values do not always match.

Little Update (but still no answer) :

It seems to matter how I am preparing the data before mapping over it to create the TestCard component. Why should that matter? Of course, when I use the raw data before messing with it, it just displays all data in order without issue.

I need to be able to find only data that has images (in the real project data, some items in the data array don’t have images), and then randomize the selection to display different images on each page visit.

Latest Update (with an answer) :

A programmer friend of mine assisted me with finding an answer to this. It seemed no matter how I pulled the code apart and inspected each line, or rewrote it as simpler methods and with simpler data, it still would not work.

His answer was to simply remove everything from inside the Home() function block in Home.js, except for the function's return statement for the display. I moved every line of code up above the Home() function and all data showed integrity at every line.

Why this worked, however, for me is still a mystery. I will definitely continue my research into it. If anyone seeing this has time to share their thoughts, I would certainly appreciate it.
What is the Execution Context in Javascript?
Tags: javascript, codenewbie, webdev, react
Published: 2021-01-31 20:19:53

Javascript is quite often referred to as the most loved program and the most hated programming language. This is because for people new to Javascript there needs to be some understanding of what's going on under the hood. So we are going to focus on the Execution Context to learn how every line of code is executed in Javascript.

# Execution Context 
The Execution Context is the environment in which the code is being recognized and executed. Everything happens inside an Execution Context in Javascript. when Javascript starts in the browser the beginning Execution Context is always the Global Execution Context and refers to the window object. When a new function is created and executed a new Execution Context is created called the Function Execution Context and it refers to the function object.

```javascript 
// this function creates a function execution context 
function sayHi(name) {
    let greeting = `Hi, ${name}`
    return console.log(greeting)
}
```

The Execution Context is made up of two whole parts. The Local Memory, which saves contents inside of the current context into space in memory like variables or functions inside the execution context. Also, The Thread of Execution, which travels through the Execution Context for instance a function execution context, and executes each line in the function. 


# Call Stack 
Javascript is a single-threaded and synchronous language. Meaning each piece of code is read one line at a time through one single thread of execution at a time. In order to efficiently keep track of each execution context in a program, Javascript takes advantage of a Last In, First Out data structure called the Call Stack. New execution contexts are pushed into the call stack starting with the global execution context as they are created and popped off the call stack when they are executed. 

![Call Stack](https://dev-to-uploads.s3.amazonaws.com/i/x70s7w25hx8gl53u7gvd.jpg)

# Let's chat about context

So now you know how the execution context is flowing through your Javascript code. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with the execution context.

Happy Coding,
Terry Threatt
A production-ready Docker image for React
Tags: react, docker, nginx
Published: 2021-01-31 20:08:03

---
title: A production-ready Docker image for React
published: true
description: Use this production-ready Docker image to dockerize any React app in no time
tags:
  - react
  - docker
  - nginx
//cover_image: https://direct_url_to_image.jpg
---

I made this Docker image so I can reuse it easily with every React project I dockerize or start from scratch. I open-sourced it so everyone can use it to move their app easily to production. Here is the GitHub URL: https://github.com/fitiavana07/docker-react.

# How do I use it?

Just copy this into a new Dockerfile.

```dockerfile
# The first image is for compiling the client files, the second is for serving.

# BUILD IMAGE
FROM node:14-alpine as build-stage

WORKDIR /app

# Install dependencies
COPY package*.json ./
RUN npm install

# Build
COPY . .
RUN npm run build

# -----------------------------------------------------------------------------
# SERVING IMAGE
FROM fitiavana07/nginx-react

# Copy built files
COPY --from=build-stage /app/build /usr/share/nginx/html

# 80 for HTTP
EXPOSE 80

# Run nginx
CMD nginx -g 'daemon off;'
```

# The stack

I used Nginx to serve the built files, along with the config for serving React properly. The whole is bundled into the docker image `fitiavana07/nginx-react`, so you don't need to worry about the config.

# Does it support react-router?

Yes, it supports react-router. All routes other than the root are handled properly.

Suggestions are welcome.
Flutter : A new Boom or Flop Hype?
Tags: flutter, android, ios
Published: 2021-01-31 18:59:31

I was just curious to know about demand of Flutter developers in industry so i did some research and was bit shocked..There was very less number of jobs available in comparison to other frameworks like react.

Why i did this all?
I just started learning Flutter and i can it is awesome, also it has a lots of things to offer like Hot reload and faster apps etc, despite having lots of awesome features, there are very less number of jobs available.

So i wanna know the reason, please reply to this post..
thank you
Name an every day object/scenario that serves as an example of a popular data structure
Tags: explainlikeimfive
Published: 2021-01-31 17:32:58

---
title: Name an every day object/scenario that serves as an example of a popular data structure
published: true
description: 
tags: explainlikeimfive
//cover_image: https://direct_url_to_image.jpg
---
How to host Angular app on Heroku
Tags: angular, heroku, node, javascript
Published: 2021-01-31 17:04:33

We need an express server to make the Angular app live.

## Install express and path.
`npm install express path`

Create `server.js`

```javascript
const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(__dirname + '/dist/<FOLDER_NAME>'));

// Link index.html of build folder with router.
app.get('/*', (req,res,next) => {
    res.sendFile(path.join(__dirname + '/dist/<FOLDER_NAME>/index.html'));
});


app.listen(process.env.PORT || 8000);
```

## Add these lines in `package.json`

inside `scripts`
```json
"start": "node server.js",
"heroku-postbuild": "ng build --prod"
```

Add engines inside `package.json`
```json
"engines": {
    "node": "14.15.3",
    "npm": "6.14.9"
  },
```

### Add this project to GitHub and connect this repository with your Heroku app.

Click on deploy.

Thanks for reading :)
Day 31 - Next Permutation
Tags: leetcode, python, challenge
Published: 2021-01-31 16:57:24

## The Problem

> Implement __next permutation__, which rearranges numbers into the lexicographically next greater permutation of numbers.

> If such an arrangement is not possible, it must rearrange it as the lowest possible order (i.e., sorted in ascending order).

> The replacement must be in place and use only constant extra memory.

 

__Example 1:__

```
Input: nums = [1,2,3]
Output: [1,3,2]
```

__Example 2:__

```
Input: nums = [3,2,1]
Output: [1,2,3]
```

__Example 3:__

```
Input: nums = [1,1,5]
Output: [1,5,1]
```

__Example 4:__

```
Input: nums = [1]
Output: [1]
```

__Constraints:__

* `1 <= nums.length <= 100`
* `0 <= nums[i] <= 100`


## Tests

```python 
import pytest
from .Day31_NextPermutation import Solution

s = Solution()


@pytest.mark.parametrize(
    "nums,expected",
    [
        ([1, 2, 3], [1, 3, 2]),
        ([3, 2, 1], [1, 2, 3]),
        ([1, 1, 5], [1, 5, 1]),
        ([1], [1]),
    ],
)
def test_next_permutation(nums, expected):
    s.nextPermutation(nums)

    assert nums == expected
```

## Solution

```python
from typing import List


class Solution:
    def nextPermutation(self, nums: List[int]) -> None:
        """
        Do not return anything, modify nums in-place instead.
        """
        i = len(nums) - 2
        while i >= 0 and nums[i + 1] <= nums[i]:
            i -= 1

        if i >= 0:
            j = len(nums) - 1
            while j >= 0 and nums[j] <= nums[i]:
                j -= 1
            nums[i], nums[j] = nums[j], nums[i]

        k = len(nums) - 1
        while i < k:
            i += 1
            nums[i], nums[k] = nums[k], nums[i]
            k -= 1
```

## Analysis

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