teleren/devto huggingface dataset:
How to create a React JS application with the Pokémon API
Tags: react, api, javascript, pokemon
Published: 2021-12-23 22:36:02

We are going to create an application that shows the information of the pokemos, consumed from an API.

Api: https://pokeapi.co/
Github: https://github.com/rodrigolazo/apiPokemon

**Code:**
**_App.js_**

```
import React, { useEffect } from 'react';
import './App.css';

import CharacterGrid from './components/characters/CharacterGrid'
import Header from './components/ui/Header'

function App() {
  const [result, setResult] = React.useState([]);
  const [poke, setPoke] = React.useState([]);
  const [load, setLoad] = React.useState('true');
  const arr = [];

  useEffect(() => {
    fetch('https://pokeapi.co/api/v2/pokemon/?limit=400')
      .then((response) => response.json())
      .then((data) => setResult(
        data.results.map((item) => {
          fetch(item.url)
            .then((response) => response.json())
            .then((allpokemon) => arr.push(allpokemon));
          setPoke(arr);
        }),
      ));
  }, []);
  setTimeout(() => {
    setLoad(false);
  }, 1000);
  return (
    <div className='container'>
      <Header />

      <CharacterGrid poke={poke} />
    </div>
  );
}
export default App;

```
**_Header.js_**

```
import React from 'react'
import logo from '../../img/logo.png'

const Header = () => {
  return (
    <header className='center'>
      <img src={logo} alt='' />
    </header>
  )
}

export default Header

```
**_CharacterGrid.js_**

```
import React from 'react'
import CharacterItem from './CharacterItem'
import Spinner from '../ui/Spinner'

const CharacterGrid = ({ poke, isLoading }) => {
  return isLoading ? (
    <Spinner />
  ) : (
    <section className='cards'>
      {poke.map((item) => (
        <CharacterItem key={item.id} item={item}></CharacterItem>
      ))}
    </section>
  )
}

export default CharacterGrid
```
**_CharacterItem.js_**

```
import React from 'react'

const CharacterItem = ({ item }) => {
  return (
    <div className='card'>
      <div className='card-inner'>
        <div className='card-front'>
          <img src={item.sprites.other.dream_world.front_default} alt='' />
        </div>
        <div className='card-back'>
          <h1>{item.name}</h1>
          <ul>
            <li>
              <strong>Hp:</strong> {item.stats[0].base_stat}
            </li>
            <li>
              <strong>Experience:</strong> {item.base_experience}
            </li>
            <li>
              <strong>attack:</strong> {item.stats[1].base_stat}
            </li>
            <li>
              <strong>Special:</strong> {item.stats[2].base_stat}
            </li>
            <li>
              <strong>Defence:</strong> {item.stats[3].base_stat}
            </li>
          </ul>
        </div>

      </div>
    </div>
  )
}

export default CharacterItem
```
**Results**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tt34fzpo9aaeapn2skuh.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z41h6dtpwsem4hz9zqu2.png)
 
Download the project to test the applied styles, I hope it helps you
How I Started Understanding the Why of Data Structures and Algorithms Using Mobile Games
Tags: webdev, beginners, programming
Published: 2021-12-23 22:30:42

I am a creative and primarily self-taught programmer whose mind runs like a movie with subtitles at 2x speed.

The better I understand, the more precise and detailed the movie with the subs.

I attended a code boot camp (Bloom Tech f.k.a Lambda School) to upgrade my skills and have a structured path since there are many branches in Web development after the basics of HTML/CSS. Lambda is where I first learned about Data Structures and Algorithms and how to solve them using Python.

After focusing on JavaScript for most of the Bootcamp (4 months if you are Full-Time), switching to a new language was a bit jarring, but I got used to it quickly. I somehow passed and graduated, but Data Structures and Algorithms were still a blurry movie to me for the most part.

Some of the algorithm questions turned the movie into a smudged mess, which frustrated me, and I avoided them for a while, especially when I started trying them on my own on other platforms like HackerRank, Code Signal, or LeetCode. I decided to relearn and practice the fundamentals of JavaScript and try again.

Going over the basics helped, but it still wasn't clicking in my head **_WHY_** these were useful until I was playing a random mobile game on my iPad and the movie became clear.

While playing a hotel game, I realized that it was using find the shortest path.

While playing a different type of game, I noticed it used singly linked, doubly linked, or circular linked lists depending on the section.

I am unsure what they are using because I can't see their code, but the games made those algorithm movies more apparent. Enough to the point, I am back at trying to solve those types of problems again on LeetCode.

Plus, the Microsoft LEAP Apprenticeship program thought I was good enough to interview, and I am also prepping for that.

I plan to write a post on each problem, explain how I understood and solved it using current knowledge. Of course, I will go back and refactor them to make them more efficient/faster as I learn more.

I will post the problem and the platform I practiced it on in the title.

I feel blogging will help me explain my thinking better as my level is not quite a beginner but not intermediate either. 

Although, future posts may help someone.

Look for more posts from me soon!
Scrimba Free JS Course 
Tags: javascript, beginners, scrimba
Published: 2021-12-23 22:14:36

So I just finished the JS course from Scrimba and I really liked it because you had the chance to build your first small projects which is a good motivation. 
My only experience before this course was the FCC HTML course and a part of the JS course, so I knew already some of the things that were shown, but it was still a good training and also taught many things I didn't knew.
All in all I can recommend this course.
How to add react-gtm-module in  PWA Studio 
Tags: tutorial, gtm, pwastudio, magento
Published: 2021-12-23 21:25:31

**Disclaimer:** I have created this tutorial on Mac and have used yarn because it is recommended by PWA Studio. 

In this blog i will tell you how to add react-gtm-module in your PWA Studio storefront project. So there are some steps which need to be followed.

## Step1:
 Your must have a storefront project in pwa studio. You can also create a new one by using command `yarn create @magento/pwa` or `npm init @magento/pwa`. 

## Step2:
 You must install **Fooman VeniaUiOverrideResolver for PWA Studio** either by using `yarn add @fooman/venia-ui-override-resolver` or by using `npm i @fooman/venia-ui-override-resolver`. The main reason behind installing Fooman extension is we need to override a component file where we will add our gtm module. For example if we want to add our gtm module in our main.js file then inside our src folder we have to create  
`overrides/venia-ui/components/Main/main.js` and inside main.js we have to copy and paste the whole code from 
`node_modules/@magento/venia-ui/lib/components/Main/main.js`
 

## Step3: 
Now we have created our main.js file inside `src/overrides/venia-ui/components/Main` we have to create an index.js file inside `Main` folder. 
```
\\index.js
export { default } from './main';
```
##Step4: 
Open your package.json file and inside your `"devDependencies"` add "react-gtm-module" like this 
```
"react": "~17.0.1",
"react-dom": "~17.0.1",
"react-gtm-module": "~2.0.11",
```
Now open your terminal and type command `yarn install` or `npm install`

## Step5: 
Now this is the main part where we have two options that either we add our react-gtm-module in our main.js directly or  create a new component inside `src/overrides/venia-ui/components/your-gtm-component-folder` and then copy and paste the gtm-module code. 

```
//Your gtm component.js
import React from "react"
import TagManager from 'react-gtm-module'

const tagManagerArgs = {
    gtmId: 'GTM-XXXXXXX'}

TagManager.initialize(tagManagerArgs)

const GoogleTagManager = () => {

    window.dataLayer.push({

        event: 'MainPageView'
       
      });

return(
    <h1>Hello from GTM!</h1>
)
}
export default GoogleTagManager
```
Now create index.js file inside your gtm component folder and  write 
```
\\index.js
export { default } from './your-gtm-component';
```

## Step6:
Last but not least do not forget to import your gtm component inside your override main.js file and add it like so 

```

    return (
        <main className={rootClass}>
            <Header />
            <YourGTMcomponent>
            <div className={pageClass}>{children}</div>
            <Footer />
        </main>
    );
```

References and helpful links: 
[https://developer.adobe.com/commerce/pwa-studio/](Pwa Studio)
[https://github.com/fooman/venia-ui-override-resolver](Fooman overrider)
[https://www.npmjs.com/package/react-gtm-module](react-gtm-module)
Advent of PBT 2021 - Day 23
Tags: challenge, testing, webdev, javascript
Published: 2021-12-23 08:10:51

---
title: Advent of PBT 2021 - Day 23
published: true
description: Advent of Property Based Testing - Day 23
tags: challenge,testing,webdev,javascript
//cover_image: https://direct_url_to_image.jpg
---

> _Advent of PBT 2021 — Learn how to use property based testing and [fast-check](https://github.com/dubzzz/fast-check) through examples_

Our algorithm today is: **wishListsDiffer**.
It comes with the following documentation and prototype:
```ts
/**
 * Each year, Santa receives wish lists coming from everywhere.
 *
 * Lists are ordered starting by the most important present to the last
 * important one. Santa does not always offer the most important one.
 * From time to time he wants to wait one more year to check if the
 * present stays in the top.
 *
 * Each year, Santa manually performs a diff of the list with
 * the one of the year before. Based on this diff he makes his choice.
 *
 * You can see the diff manually computed by Santa as an usual git diff
 * between two strings including many lines.
 *
 * Let's take the example:
 *
 *   Year N:
 *     Cars
 *     Trains
 *     Planes
 *
 *   Year N+1:
 *     Cars
 *     Buses
 *     Trains
 *     Boats
 *
 *   Diff of Santa:
 *     === Cars
 *     +++ Buses
 *     === Trains
 *     +++ Boats
 *     --- Planes
 *
 * @param before - String representing the list of presents (before)
 * @param after - String representing the list of presents (after)
 */
declare function wishListsDiffer(before: string, after: string): string;
```

We already wrote some examples based tests for it:
```ts
it("should compute the appropriate diff", () => {
  // Arrange
  const previousYear = "Cars\nTrains\nPlanes";
  const currentYear = "Cars\nBuses\nTrains\nBoats";

  // Act
  const diff = wishListsDiffer(previousYear, currentYear);

  // Assert
  // prettier-ignore
  expect(diff).toEqual(
    "=== Cars\n" +
    "+++ Buses\n" +
    "=== Trains\n" +
    "+++ Boats\n" +
    "--- Planes"
  );
});
```

How would you cover it with Property Based Tests?

In order to ease your task we provide you with an already setup CodeSandbox, with examples based tests already written and a possible implementation of the algorithm: https://codesandbox.io/s/advent-of-pbt-day-23-q1468?file=/src/index.spec.ts&previewwindow=tests

You wanna see the solution? Here is the set of properties I came with to cover today's algorithm: https://dev.to/dubzzz/advent-of-pbt-2021-day-23-solution-4lg4

---

[Back to "Advent of PBT 2021"](https://dev.to/dubzzz/advent-of-pbt-2021-13ee) to see topics covered during the other days and their solutions.

More about this serie on [@ndubien](https://twitter.com/ndubien) or with the hashtag [#AdventOfPBT](https://twitter.com/search?q=%23AdventOfPBT).
Anyone want to join a JavaScript Book Club?
Tags: javascript, bookclub, webdev
Published: 2021-12-23 20:41:51

---
title: Anyone want to join a JavaScript Book Club?
published: true
description: I started a JavaDcript book club that anyone can join for free. Meetings are currently hosted daily @ 9pm est. Meetings are via Zoom and can be found in the JavaScript-Book-Club discord channel at https://discord.gg/wUU9pcBQey. You can signup for the google calendar at https://JavaScriptBookClub.com and all future zoom meeting invites will be found in your calendar event description. Hope to see you there.
tags: #JavaScript #bookclub #webdev 
//cover_image: https://direct_url_to_image.jpg
---
Step by Step Guide to Scrape Google Using Python 
 & Scrapy 
Published: 2021-12-23 20:28:54

Collecting Customer Feedback Data to Inform Your Marketing
In the modern shopping experience, it is common for consumers to look for product reviews before deciding on a purchase.

With this in mind, a powerful application for a Google SERPs scraper is to collect reviews and customer feedback from your competitor’s products to understand what’s working and what’s not working for them.

It can be to improve your product, find a way to differentiate yourself from the competition, or to know which features or experiences to highlight in your marketing.

Keep this in mind because we’ll be building our scraper around this issue exactly.

https://www.scraperapi.com/blog/scrape-data-google-search-results/
S Collection:     
Published: 2021-12-23 20:26:05

>  **This is it!…what felt like years of hard work, frustration, tears and of course the many victories is all finally coming together!!**

###Project:
My final project here at Flatiron… S COLLECTION is a  e commerce web application built using Ruby on Rails for the backend and React JS for the front. I wanted to venture out of my comfort zone and create something completely different to be able to add to my portfolio. This application consist of three models: User, Product and Transaction. 


![my models code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngkm0n0n2cy0xtai749x.png)

A user is able to Signup/Login to view a list of the pieces in the COLLECTION. They’re also able to select a specific piece to view more information and to be able to add it to his/her cart. I also implemented user authentication using Bcrypt and Jwt.

## Challenges Faced:

One of the things I struggled most with was updating my state after my `"REMOVE_FROM_CART" Delete action` was fired. In  order words, I needed my current state, my action(delete) to return a newState upon deleting an item.

## Final remark:

As my journey in the bootcamp draws near, I know that learning is something that never stops, especially in the world of development. I am extremely excited to see what the future holds. I am super thankful for Flatiron, for giving me the opportunity to break into Tech , and for also pushing me out my comfort zone . I will be forever grateful when I look back and see how far I have come.

Happy Coding 😁
Why will you use default parameters in Javascript?
Tags: javascript
Published: 2021-12-23 20:24:28

By default, default parameter is undefined in a function.
If you can not set a parameter in a function, the program output shows NaN. So you should set the default parameter.
Example:
```javascript
function myFunction(x,y=2){
  return x+y;
}
console.log(myFunction(5));
//the output is : 7
//y=2 is a default parameter.
```
***

- 
If you can't pass parameter, but you set default parameter, then you get the correct output.
 Example:

```javascript
function myFunction(x=5){
  return x;
}
console.log(myFunction());
//the output is : 5
//x=5 is a default parameter.
```
***

- 
If you pass parameter, and also you set default parameter, then you get what you pass inside of a function.
 Example:

```javascript
function myFunction(x=2){
  return x;
}
console.log(myFunction(5));
//the output is : 5
//x=2 is a default parameter.
```
***
- 
If you pass parameter, and also you set default parameter as undefined, then you get the default parameter value.
 Example:

```javascript
function myFunction(x=2){
  return x;
}
console.log(myFunction(undefined));
//the output is : 2
//x=2 is a default parameter.
```
***
- 
If you pass parameter, and also you set default parameter as null, then you get the output null.
 Example:

```javascript
function myFunction(x=2){
  return x;
}
console.log(myFunction(null));
//the output is : null
//x=2 is a default parameter.
```
Javascript Getter and Setter
Published: 2021-12-23 19:57:40

Today i  am talking about javascript getter and getter.
Js Setter and getter using for highly manupulate javascript object value. We can calculate js object value using this two things.

```javascript 

class Thermostat {
	constructor(fahrenheit) {
	  this.fahrenheit = fahrenheit;
	}
	
	get temperature() {
	  return (5 / 9) * (this.fahrenheit - 32);
	}
	
	set temperature(celsius) {
	  this.fahrenheit = (celsius * 9.0) / 5 + 32;
	}
  }
```
This article is all about media queries:
Published: 2021-12-23 19:53:06

Media queries are used to modify our website based on devices.it means media queries are used for responsive our web page by CSS properties as screen resolution and viewport width. We responsive a web page in plain or vanilla CSS by media queries.

**Some styles of using media queries on the webpage**

Using @media to conditionally apply CSS properties.
To target specific style, like, source, and HTML element by media=attribute.
 To test and monitor media status Window.matchMedia() and mediaQueryList.addlistener() in javascript method.
 

  **    Breakpoints:	**

	   When we make a website it is based on desktop or laptop. But this website is not looking 
Good. Basically, it a webpage is created with rows and columns. For this reason in 
media queries make breakpoint which makes the website more perfect on any 
device. initially, there are three types of breakpoints those are :
     desktop 
     Tablet
     Mobile
	
Generally, Set breakpoint depends on these. Firstly we use minimum px means 
min-width like 688px and below for mobile. Another breakpoint is 992 for laptops. And 
large devices like desktop big monitors are above 922px.
The best practice is always to make a website mobile-first before making a website for desktop or any other device.

**    Orientation:   **

The orientations are can two types as like:
Portrait and Landscape

**Now we discuss how to actually use media query in the CSS style sheet**

	There is some syntax on how to to use media queries. This is very case-sensitive. 
Some to use media queries:
 
            1.Media types : 

Media types define device categories. Like as All, Print, Screen, and 
speech.
`Ex: @media print {  ……  }  or @media screen print { ....... }
`
.	     2. Media feature: media features define the characteristics of user. And Output Or 
         environment. 
	Ex: @media { hover: hover }  or  @media (mex-width: 922px )

            3. Logical operator: used operators and, not, only for use logical implementation.
We can also use media features using logical operators and media types. It seems to hear that we can use media queries combined. For example :					@media screen and (min-width: 688px) and (orientation: landscape) { …..  }




In media queries, we use all CSS styles and properties. For example, an element is invisible but we can hide the same element in small devices which is not the most important. Also can change the font size or any size of elements. 

Finally, I would like to say something like summary media queries. Media queries are the most important thing for designing.This is very interesting part for web designers. That’s all today. I hope you will enjoy it.
Thank you.
How to Create the UI that suits.
Tags: uiweekly, tutorial, design, ux
Published: 2021-12-23 19:40:29

## How to UI?
Art of UI creation is so common I guess. Many people ignore the part of UI planning and directly hopes into HTML and CSS. What is fascinating is that planning and creating a design template is better as it allows you to check which font and colors suit your website and style, because it's not easy to change theme of whole website once it's somewhat or maybe completely built as compare to UI creation tools.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61t4c2drnkeq8n7dmsps.jpg)

Using such tools like FIGMA and Adobe XD allows us to quickly do those changes and finalize the design, all then is left to implement them in real-time website.

## Some Important websites to enhance UI creation.

_**1. Icons **_
A website https://www.flaticon.com/ that I personally use when it comes to icons and small vectors to aid website looks.
Website is perfect for such purposes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxzjzf4w0tvetv2916sh.jpg)

_**2. Theme and colors**_
One of the most important aspect is selecting that perfect theme and colors for your navbars or texts...
If you ask me I'm always to use https://flatuicolors.com/ as it provides best colors and combos that are so perfect when actually implemented. It's easy and free to use :)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omwlck89nxzbz4dkjs0q.jpg)

_**3. Images**_
You just can't ignore images and you're not gonna click every images by yourself (YES!). In that case I prefer using unsplash https://unsplash.com/ although you might already know about it. But something that you might not be knowing is that they also provide users with an API that provide aesthetic images by artists for you to implement in your source code.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuw7l3egzqajf9w0yma0.jpg)

_**4. Fonts. YES! please**_
For the love of god please stop using those default Calibri font on your beginner projects. That's why I'll suggest you using https://fonts.google.com/ or https://fontawesome.com/ (font awesome provides icons as well).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qz16h17rfzy4p6l5adtl.jpg)

Hope all this was useful to you and I hope you'll apply these in your projects so they would look even more attractive.
_Try finding the best resources that suits and make your paragraphs sexier!_
Day 2 again
Published: 2021-12-23 19:30:29

I successfully created a CloudFront distribution with the origin being a S3 static website and an SSL certificate.  For some reason yesterday, I could not add my Amazon CA domain to the CloudFront distribution.

I created a S3 static website (public settings enabled) reachable by the Object URL. I then created a CloudFront distribution with the S3 bucket as the origin domain and an Amazon issued SSL certificate. No issues as I am able to reach the distribution through the distribution domain name. Next, I wanted to add a domain (Amazon is the CA and I have a hosted zone) to the distribution, but yesterday it did not work (maybe it was the issues in us-east-1).

I added a alternate domain name in the distribution with the website domain name and created an alias in Route 53 pointing the record name to the distribution domain name.   But it did not work.  

Tried recreating the alias again today, and voila!  My domain https://boricuaenlanube.net worked!   

On to the next step, connecting my DynamoDB to my JavaScript to store the information about visitors.
GitUI - v0.19 handle bare repos
Tags: github, terminal, productivity, rust
Published: 2021-12-23 19:02:10

[GitUI](https://github.com/extrawurst/gitui) is a terminal UI for git written in Rust. We aim to simplify common git tasks in a fast, keyboard-only and cross platform way without leaving your beloved CLI.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nftttcnsnxfj920eq9uj.gif)

## Release Highlights

* support opening bare repos
* file finder highlighting matches
* made key bindings less fragile
* [much more](https://github.com/extrawurst/gitui/releases/tag/v0.19.0)

Thanks for your interest and support!❤️