teleren/devto huggingface dataset:
Solved:TypeError: Cannot read property 'map' of undefined in next 9.3.6
Tags: help, discuss, nextjs
Published: 2020-05-07 21:49:56

Hi everyone,

I was following the nextjs tutorial and reached the stage of using prerendering for markdown files. 

After following all the steps in the tutorial I got:

`TypeError: Cannot read property 'map' of undefined`

Has anyone managed to understand why this is happening?

The tutorial can be found [here](https://nextjs.org/learn/basics/data-fetching/implement-getstaticprops)

I only found this [git issue](https://github.com/zeit/next.js/issues/9970#event-3233879995)

Update

Submitted a Github issue to Nextjs Team, the issue can be found [here](https://github.com/zeit/next.js/issues/12668) 

Update 2

The problem got fixed: I had a typo in `_app.js` `Pros instead of Props`

Thanks @kartikpandey2, for showing me where the problem was.

Thanks in advance
A Little Recursion Refresher
Tags: functional, javascript, learning
Published: 2020-05-07 21:40:50

---
title: A Little Recursion Refresher
published: true
description: 
tags: #functional, #javascript, #learning
---
Recursion is the bread and butter tool of every proper functional programmer. Here is a brief refresher about its major forms:

```javascript
// body recursion

const mapRec = f => ([x, ...xs]) =>
  x === undefined
    ? []
    : [f(x), ...mapRec(f) (xs)];

// tail recursion

const mapTRec = f => ([x, ...xs], acc = []) =>
  x === undefined
    ? acc
    : mapTRec(f) (xs, acc.concat(f(x)));

// recursion in continuation passing style

const mapCPS = f => ([x, ...xs]) => k =>
  x === undefined
    ? k([])
    : mapCPS(f) (xs) (ys => k([f(x), ...ys]));

const sqr = x => x * x;
const id = x => x;

mapRec(sqr) ([1,2,3]); // [1,4,9]
mapTRec(sqr) ([1,2,3]); // [1,4,9]
mapCPS(sqr) ([1,2,3]) (id); // [1,4,9]
```
Actually there is still tail recursion modulo cons, mutual recursion, monad recurison, corecursion etc.

[Learn more about recursion and trampolining at my course](https://github.com/kongware/scriptum/blob/master/ch-9.md).
What’s your alternative solution? Challenge #37
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-05-07 21:33:14

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Create a function that will capitalize the first letter of each word in a text

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge32

println(captializeWords("Create a function that will capitalize the first letter of each word in a text"));

function captializeWords(text)
{
    var text2 = "";
    
    for(var i = 0; i < text.length; i++)
    {
        var currChr = text[i];
        var prevChr = i > 0 ? text[i - 1] : " ";
        
        if (!isSeparator(currChr) && isSeparator(prevChr))
        {
            currChr = currChr.toUpperCase();
        }
        
        text2 += currChr;
    }
    
    return text2;
}

function isSeparator(c)
{
    var separators = [" ", "\t", "\n", "\r", ",", ";", ".", "!", "?"];
    return separators.includes(c);
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
What is BEM and why use it to name your HTML classes!
Tags: html, css, webdev
Published: 2020-05-07 20:51:01

Good day!
Today I will be talking about one of the tools I use on my web development projects that makes me code prettier and my life easier: BEM!

##What is BEM?
BEM (Block, Element, Modifier) is a naming convention for classes in HTML and CSS what was developed by [Yandex](https://tech.yandex.com/bem/).
Basically, it is a methodology to help you understand better what is going on between you HTML and CSS and styling it better.

##Why use BEM?
You don't have to, of course. So why use it?
- BEM gives some structure to you code, it is quite simple to use.
- It makes easier to style your HTML elements and read it. 
- It helps to avoid style conflicts,
- Consistency!!!

##So, how do I use it?

Okay, let's go to the fun part!

```html
<div class="hero">
   <img class="hero__img">
</div> 

<div class="main">
    <h1 class="main__title">
    <p class="main__text"></p> 
    <p class="main__text-special"></p>  
    <p class="main__text"></p>
</div>

```
So here, we have a very simple piece of code.
**Block:** 
The < div > is out block. The block element only needs one nice name, and in this case we have hero and main.

**Element:** 
The elements are the item we are putting inside de block. They are part of the block, so they first get the blocks name.
Their second name, should be a description of what it is. Here we have:
"main\__text", "main\__title"  and "hero\__img". 

**Modifier:** 
While you will use this one probably a little less than the first two, modifiers are important. They tell you that some item may be special yet, still be an element. Our second < p > is called "main\___ text\-special".
Maybe this one will have a bigger font, of a brighter background. Who knows?
But while it is still a "main\__ text", adding the "\-special" tells that it will have a differential.

##What about those \__ and \- ???
It is just the way BEM works.
Blocks just need a name, Elements need the block name, the \__ and them the elements name, and the modifiers need the above and a \- followed by the modifiers name.

##Conclusion

I tried to keep this explanation as code newbie as possible and I hope it helps.
BEM is a very helpful methodology, and the few times I don't use it, you bet I will have some style heritage issue lol


*P.S.If you would like something more complete, [Smashing Magazine](https://www.smashingmagazine.com/2018/06/bem-for-beginners/) has a great post for Beginners! *
What is a compiler and an interpreter?
Published: 2020-05-07 20:40:56

I have has experiences with developers who don't know the differences of a compiler and interpreter, or why they should care. The difference between the two is required to know, as it can mean the difference in speed, functionality, and shipping code. Not only that you can see many issues when trying to do things in interpreted languages that compiled ones don't have.

# What is a compiler?
A compiler is a set of code to read files and shoves it into assembly code for the CPU to translate into machine code so it can run it. The compiler targets the direct architecture the compiler is compiling for, and ships it to that architecture. Some people say compilers compile to machine code, and while this might be true sometimes, most compile to assembly (whether it'd be amd64, ARM, RISC-V, etc.).

# What is an interpreter?
An interpreter is a set of code to read files and execute them line by line, figuring everything out as it goes along. The interpreter doesn't care for architecture of the CPU and runs it without going into assembly language first.

# Benefits of compiled over interpreted
Compiled languages are faster, and are easier to debug and ship. Compilers don't need the same exact interpreter to run, with the same exact version. As long as the code set is supported and the binary used on the proper architecture, the overall result will work anywhere. It can also (depending on dependencies) work anywhere.

# Benefits of interpreted over compiled
As long as the person has the proper interpreter version, it will work anywhere, on any hardware, on any OS no matter what. Even dependencies will be easier to ship with as it will run the same interpreter (or close versions of the same interpreter). They are also easier and faster to run (although slower to execute).

# Which should you pick
It depends on a lot of factors, more than I stated here. This is the absolute basics. Need more speed? Compiled. Need the ability to run anywhere regardless of speed? Interpreted.

# Examples of compiled and interpreted languages
Compiled: C, C++, Java, Haskell, Vala
Interpreted: Python, JavaScript (Nodejs), 

----

Why did I make this? Boredome.
JavaScript's Three Dots: Spread Operator vs. Rest Parameters
Tags: javascript, webdev
Published: 2020-05-07 20:27:02

What is the difference between the spread operator and rest parameters, anyway? Aren't they the same thing? I thought so too, but they are pretty much opposites.

# TL;DR: When you pass in arguments to a function using the spread operator, you are using rest parameter syntax.

The spread operator allows expressions to be expanded in places where multiple arguments, elements or variables are expected. In both cases below, the spread operator copies every element in the original array, and any elements that come afterward are pushed onto the end. I've also used the spread operator in solving a common interview question called Max Characters.

## Copy an Array

![Alt Text: An array called 'arr' has three elements: the numbers 1, 2, and 3. Set a variable called 'arrCopy' equal to [...arr, 4, 5], and it replaces the array method 'slice.' If you log out 'arrCopy', it includes the numbers 1, 2, 3, 4 and 5.](https://dev-to-uploads.s3.amazonaws.com/i/u104vlqr8zx59xno3njk.png)

## Concatenate an Array

![Alt Text: If you have two arrays called 'arr' and 'arrTwo', you can concatenate them using the spread operator. Set 'arr' equal to [...arr, ...arrTwo], and 'arr' will include all the elements in both arrays in the order in which they are received.](https://dev-to-uploads.s3.amazonaws.com/i/k2081zkucbf9waqa16q8.png)

## Find the Most Frequent Character in a String

![Alt Text: To solve Max Characters, create a character map of each character in a string, use spread syntax to find the max value in that map and finally, return the key at the maximum value.](https://dev-to-uploads.s3.amazonaws.com/i/xlzzjki8v1bedjwop2tk.png)

## Rest Parameters - You Can Use Array Methods!

Rest parameters condense elements into an array. <strong>You are using rest parameters if the three dots are being passed in as an argument into a function.</strong> In the below example:
- Rest parameter syntax allows an unlimited number of arguments to be passed down to the multiply function. 
- Each time you will return an array with the same number of elements as the number of arguments passed in, minus one. 
- The values of each element will equal the original values multiplied by the first number. 

![Alt Text: Pass a number and '...args' as arguments to a function called multiply, and return args.map, where you multiply each element by the number. If you pass any number of numbers into this function, the first number will always be the multiplier and you will return an array with the same number of elements as the number of arguments passed in, minus one. The values of each element will equal the original values passed in, times the first number.](https://dev-to-uploads.s3.amazonaws.com/i/2tel2vprqpvh8icf5j11.png)

That's it! Now you know. 👋
Codility GenomicRangeQuery (Resolvido)
Published: 2020-05-07 20:08:31

Depois de um tempo pensando na solução performática para o desafio do codility GenomicRangeQuery. Consegui resolve-lo com O(n+m).

O desafio é esse: https://app.codility.com/programmers/lessons/5-prefix_sums/genomic_range_query/

Lendo a questão, a primeira solução que me veio a cabeça, de cara, era muito lenta resultando time complexity de O(n*m), dando timeout em alguns cenários.

Então comecei a pensar em outra possibilidade e cheguei a seguinte solução:

Peguei todas as letras de S e montei a seguinte estrutura:
Supondo o input: "CAGCCTA"
```
dna: {
   "C": [1,1,1,2,2,2,2],
   "A": [0,1,1,1,1,1,2],
   "G": [0,0,1,1,1,1,1],
   "T": [0,0,0,0,0,1,0]
}
```

Como podemos ver, montei um array, somando a ocorrência em cada index, dessa forma temos uma linha do tempo e caso queiramos saber qual o menor valor entre dois intervalos, basta fazer:
```
   for(let l = 0; l < letters.length; l++){
             let letter = letters[l];
             
             
             let startSumValue = start > 0 ? dnaMap[letter].sums[start - 1] : 0;
             if(startSumValue != dnaMap[letter].sums[end]){
                result.push(dnaMap[letter].value);
                break;
            }
        }
```
A solução final ficou assim:
```
function solution(S, P, Q) {
    
    var dnaMap = {
        'A': {value:1, last:0, sums:[] },
        'C': {value:2, last:0, sums:[] },
        'G': {value:3, last:0, sums:[] },
        'T': {value:4, last:0, sums:[] },
    }
    
    var letters = [..."ACGT"];
    
    var result = [];

    for(let i = 0; i < S.length; i++){
       let dna = S[i];
      
       
       letters.forEach((letter)=>{
            var lastValue = dnaMap[letter].last;
            
            if(S[i] == letter){
                lastValue++;
                dnaMap[letter].last += 1;
            }
            dnaMap[letter].sums.push(lastValue);
       })
    }
    

    for(let i = 0; i < P.length; i++){
        
        let start = P[i];
        let end = Q[i];
        
        if(start == end){
            result.push(dnaMap[S[start]].value);
            continue;
        }
        
        for(let l = 0; l < letters.length; l++){
             let letter = letters[l];
             
             
             let startSumValue = start > 0 ? dnaMap[letter].sums[start - 1] : 0;
             if(startSumValue != dnaMap[letter].sums[end]){
                result.push(dnaMap[letter].value);
                break;
            }
        }
      
      
    }

    return result;
}
```
Don't Over - React about frameworks/libraries
Tags: react, vue, angular, javascript
Published: 2020-05-07 19:47:39

I know many of you are probably trying to determine whether or not to use Angular, Vue, or React in your current projects. Have you considered not using them?

#Do not feel pressure of deciding what to use

I am almost entirely sure 80% of beginners fall into tutorial hell (I did too). Where you don't know what to get better at because you don't know what companies are looking for and you don't value what skills you have. I personally feel like a lot of this fear comes from not understanding enough of the basics.

##Do not become comfortable with what you know about the basics

You will never understand everything. But what helps you become better at understanding complex concepts is to keep hitting the books, videos, or livestreams (whatever your poison is) on the basics. If you do not understand JavaScript itself don't skip it to learn a framework. Take that ES6/ES7 course because I promise you that if you understand that first, it won't be so hard figuring out how to start on your next project. 

Just recently I went back through [FreeCodeCamp's](https://freecodecamp.org/) material and learned a bunch from revisiting the basics. For example: I always use a theming framework for my grids but stopped using them since they showed me how to use CSS's new grid system. 

I also found a ton of value in taking short Udemy courses like this one.
[JavaScript, ES6, ES7, ES8, and beyond](https://www.udemy.com/course/javascript-es6-es7-es8-and-beyond-course/)
which shows you all the latest and greatest features of JavaScript. 

Another great course would be [JavaScript, understanding the weird parts](https://www.udemy.com/course/understand-javascript/) which took my understanding to a whole other level. 

There are a ton of resources out there, but please (at least once a month) go back to the beginning. You will 100% feel more confident in yourself once you explain what a call stack is, or what lexical scope is. Once you understand the basics everything else just falls into place. 

---
You can find my social media profiles on my profile here, please feel free to reach out if you need help finding the right material to guide your learning!
I've made a GitHub action to get deployment URL on pull requests
Tags: devops, showdev, github
Published: 2020-05-07 19:45:30

---
title: I've made a GitHub action to get deployment URL on pull requests
published: true
description: It's become easier than ever to run tests against a deployment in GitHub actions
tags: devops, showdev, github
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/v39xvgepwjepxbeo9yk0.png
---

My [blog](https://dorshinar.me/) is hosted on [Vercel (formerly Zeit Now)](https://vercel.com/), and while Vercel does a great job deploying my blog on every change (which in itself is super convenient), I could not figure out how to run tests against said deployments.  

I've explored GitHub actions previously, and even wrote about it [here](https://dev.to/dorshinar/continuous-integration-with-github-actions-and-puppeteer-4gbb), so I was familiar with the concept, but it still baffled me, so I've decided to give up on it and just run a local server as part of my CI pipeline.

Some months past, and I've had more time to experiment with it, and what I ended up with was an action I wrote myself, to query GitHub's GraphQL API and get the deployment url as a step output, so I could consume it in later steps. 

You can find the action on the [GitHub Marketplace](https://github.com/marketplace/actions/get-deployment-url). Using it is very straight forward:

```yaml
# Rest of your workflow.yml...

- name: Get deployment URL
  id: deployment
  uses: dorshinar/get-deployment-url@v1.0.0
  timeout-minutes: 5 
  with:
    token: ${{ secrets.GITHUB_TOKEN }}

- name: Run end-to-end tests
  run: npm run test:e2e
  env:
    deployment: ${{ steps.deployment.outputs.deployment }}

# Rest of your workflow.yml...
```

The action should (hopefully) work with all CI pipelines, given that they use GitHub's Deployment API. Please note that the action _waits_ for the deployment to complete, and so I added `timeout-minutes` to it, so it doesn't run for too long.

That all. I'm planning on writing a more technical article explaining exactly how I accomplished it, but I just wanted to share it with you.
Don't teach kids programming
Tags: learning, kids, technology
Published: 2020-05-07 19:33:55

Programming is increasingly being introduced to primary schools. This is an initiative that is recognized all around the world - many kids are being taught programming.

Stop! We're wrong! Do not teach children programming!

The assumption is wrong. What we are doing is observing the present and noticing the rising trend of the need for developers. We extrapolate this fact and base the future on it, assuming that the same rules will apply in 10 or 20 years from now, at the time our children become old enough to work.

If there is something we do not know, it is what the future holds for the world. The dynamics of change in the digital industry are so extensive that there is no pattern which can be applied to them. The amount of information is multiplying; requirements change faster than ever. The truth is that we have no idea what the world will look like in 20 years. In such an environment, programming is, unfortunately, not a "joker" wildcard that will give our heirs a chance to master the world of the future.

Moreover, the type of programming the IT market is looking for is mercilessly monotonous and stumbling. It is all about the skill; programming today has been reduced to being more about the framework timing, and less about the science. Do we really want to involve children in such an anaemic world of programming?

Programming should not have a meaning in itself. Programming should be a tool - in fact, only one of the tools that will be available to people. The technical knowledge which we boast of and so passionately wish to put into young brains should not be taken as the primary source of knowledge.

Instead, we need to teach children critical thinking. In a world without censorship, but with fake news, a critical attitude is more important than programming patterns.

We need to teach children communication. A world in which everyone has a voice and an opinion about everything requires precise and clear communication skills and the ability to exchange ideas and thoughts.

We have to teach children to work together. In a world where there are more screens than people, cooperation becomes a necessary ingredient of progress.

And finally, we have to teach children creativity. Creativity is a part of what it means to be human. Creativity is something we need to constantly stimulate, now more than ever before, because that is the only way our children will discover how the world of tomorrow will function. Do not teach children programming. Teach them that they can and should change the present - that is going to be our future.
#WebDev on web.dev - Lint tags for consistency #2240
Tags: webdev, javascript, opensource, frontend
Published: 2020-05-07 19:32:45

{% youtube hdcRVGmT5Kc %}

Hey y'all, my name is Michael and I'm one of the engineers who works on Google's [web.dev](https://web.dev/) site.

On May 7th at 1 PM PST I'll be doing some coding of the site live on YouTube and would love for you to join in.

We host a lot of content on web.dev that's surfaced via specific tags. But some of the content doesn't use supported tags, so we want to catch these posts and add the right tags. Today we'll make a linter that will scan web.dev posts and let us know when we're not using the right tag.

[(Join the chat here)](https://youtu.be/hdcRVGmT5Kc)