teleren/devto huggingface dataset:
Setup React App With Redux Store
Tags: javascript, react, redux, reduxstore
Published: 2021-03-27 18:10:46

Step 1: Create React App
``` npx create-react-app my-app```
```cd my-app```

Step 2: Instal Redux , React Redux & Redux Thunk With Following CMD's
```npm install redux```
```npm install react-redux```
```npm install redux-thunk```

Step 3: Create reducers/reducer.js in src

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91wu8xzp60yxteyahxvn.png)

Add Code as below in reducer.js:

```javascript
const initialState = {
   name:prathamesh
}

function reducer(state = initialState, action) {
    switch (action.type) {
        case 'SET_CHECKED':
            return {
                ...state,
                name:action.payload.name
            }
            break;
    
        default:
            return state;
            break;
    }
}

export default reducer;
```
Step 4: Time to connect store
Open src/index.js & import 
```javascript
import {Provider} from 'react-redux';
import {createStore,applyMiddleware, compose} from 'redux'
import reducer from './reducers/reducer'
import thunk from 'redux-thunk';
```
Then make changes as below
```javascript
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer,composeEnhancers(
  applyMiddleware(thunk),
));

ReactDOM.render(
  <Provider store={store}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);
```
This will connect our store to app with react devtool.

Step 5:Connect any of the component to store
```javascript
import React, { Component } from 'react'
import { connect } from 'react-redux'

class Check extends Component {

    render() {
        return (
            <div>
               <h1>{this.props.name}</h1>
            </div>
        )
    }
}

const mapStateToProps  = state => {
    return {
        isChecked : state.name
    }
}

export default connect(mapStateToProps,null)(Check);
```
Above is a component named Check where we have connected store with connect function at the bottom which we have imported from react-redux & we can access the state by mapStateToProps.
N x N Tic Tac toe Game in Javascript.
Published: 2021-03-27 18:05:10

```
// Let's create  afunction to generate an N x N board for us
const createBoard = (n) => {
  return [...Array(n)].map((row) => Array(n).fill(null))
}

// Get the board  3 x 3 as an example
const board  = createBoard(3)






//Check if the user is Row winner
const isHorizontalWinner = (currentPlayer, board) => {
 return board.some((moves) => moves.every((move) => move === currentPlayer))
}

// Check if the user is Column winner
const transposeBoard = (board) => {
  return board.map((_,index) => board.map((row) => row[index]))
}
const isVerticalWinner = (currentPlayer, board) => {
  return transposeBoard(board).some((moves) => moves.every((move) => move === currentPlayer))
}

// Get diagonal moves from the board  This will be used to check if a particular user has won //diagonally
const getDiagonalMoves = (board) => {
  
  const diagonalMoves = [];
  const equalBasedDiagonal = []; // i === j
  const sumBasedDiagonal = [] // i + j == n -1 
  
  // Check for left to right diagonal moves
  for(let row = 0; row < board.length; row++){
    for (col = 0; col < board.length; col++) {
      if (row === col) {
        equalBasedDiagonal.push(board[row][col])
      }
    }
  }
  
  // Check for right to left diagonal moves
  for(let row = 0; row < board.length; row++){
    for (col = 0; col < board.length; col++) {
      if (row + col === board.length -1 ) {
        sumBasedDiagonal.push(board[row][col])
      }
    }
  }

  diagonalMoves.push(equalBasedDiagonal,sumBasedDiagonal);
  return diagonalMoves;
}

// Use the diagonal moves to check if the user is a winner
const isDiagonalWinner = (currentPlayer,board) => {
  return getDiagonalMoves(board).some((moves) => moves.every((move) => move === currentPlayer))
  
}

// is Winner
const isWinner = (player,board) => isHorizontalWinner(player,board) || isVerticalWinner(player,board) || isDiagonalWinner(player,board)


// Check if all the moves have been filled 

const isGameOver = (board) => board.every((row) => row.every((move) => !!move))


// the main function to check for game winner 
// row & col indicates user moves 

const play = (board, [row,col], player) => {
  
  if(isGameOver(board)) {
    console.log('Game over')
    return;
  }
  
  if(board[row][col]) {
    return
  } else {
    board[row][col] = player
  }
  
  if (isWinner(player,board)) {
    console.log(`${player} WON!`)
  } else{
    console.log('Go on')
  }
}

```
Weather App Next Js
Tags: nextjs, javascript, 100daysofcode, css
Published: 2021-03-27 17:36:18

![nextjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yx75tmbcvfanvcrrxfdt.PNG)

the day 97 of challenge #100DaysOfcode

Weather App Using Next Js

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day97

Follow Me On Github
https://github.com/saidMounaim
Flickering with React/Nextjs
Tags: help, javascript, react, nextjs
Published: 2021-03-27 17:24:43

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jeeo93ajtm7t7h186da7.gif)

Hi guys, i've this behavior happening when i try to test my authentication. 
I wonder if someone have already deal or knows how to deal with it.

Thanks
Shortest & Usefullest React component you'll ever use 
Tags: react, programming, codequality
Published: 2021-03-27 17:17:49

# React (**IF**) component for conditional rendering.

Have you bothered writing that conditional rendering syntax and getting that curly braces shape, therefore getting chaos and messy code?.

You will never ever use it again with this 1 line of code.
```
// (elseChildren = null) because you won't always have else
statement.
export default IF(condition, children, elseChildren = null) {
      return condition ? children : elseChildren
}
```
And then you can use it anywhere.
```
import IF from "./IF"

function mustSleep({time}) {
    return (
        <h1>
            <IF condition={time >= 9} 
                elseChildren={Write Code.}>
                Go Sleep!
             </IF>
        </h1>  
    )
}

export default mustSleep
```

Don't hesitate to add this component to your project
and be clean with your code!

I genuinely hope that helped you devs!.
Inspiring by this article: [A React "if component"](https://www.stefanjudis.com/snippets/a-react-if-component/)
Why I decided to Study Software Engineering!
Published: 2021-03-27 17:10:38

<h1> My Inspiration </h1> 
I decided to study software engineering because I like the freedom it brings to my creativity. I have always liked to work with my hands and create things from scratch. My fondest memories from my childhood have come from building either motorcycles, cars, or other projects in the garage with my father. My father encouraged my incessant and sometimes overly optimistic DIY projects around the house as well. He threw me deep into the waters of learning about combustion engines and the efficiency of electrical circuits and I did not want to come up for air. As technology continued to grow so did my curiosity.  

<h2> My Work Flow </h2>
This enthusiasm ultimately lead me to go to Lincoln Technical Institute to pursue a career in automotive technology. I graduated in the top one percent of my grade which is a big deal, but it only felt natural for me. I never considered learning about my passion to be hard work. 

After I graduated I got out into the field and worked for several different dealerships. I have worked for Honda, Mazda, and Toyota and over the years I noticed a trend in the automotive world. The onboard computers were quickly becoming more sophisticated. This sophistication has started to phase out older technicians who did not want to learn the electronics aspect of it. My passion to learn more about cars wouldn't let me stop there. Programming cars is the new age way of making them go faster. Long gone are the days of tuning carburetors. The world of racing has become all about flashing the onboard computer every race to get the most performance out of your vehicle every pass.

<h2>From Computer to Computer </h2>
The concept that computers have become this integral to such an old sport prompted other questions for me. What else can computers do? How else have they changed my life? How can I use programming to change my life further? These were all questions I had to know the answer to. I started shifting away from cars and started to look for coding boot camps. A familiarity in drive became immediately apparent to me. I loved to see how I can manipulate the digital space with my hands and my mind. There seemed to be no limitation to what I can accomplish with computers. This amazing world didn't have the financial hard caps that buying new car or bike parts did. I could spend the whole day building something amazing without having to spend a single dime!

<h3> My name is Michael Woodley and I Love Coding!</h3>
Day 40
Tags: 100daysofcode, programming, javascript
Published: 2021-03-27 17:05:48

Day 40/100 of #100DaysOfCode

codewars

Hours coded: 0.9
Lines of code: 88
Keystrokes: 1501

via @software_hq's #vscode extension https://www.software.com/100-days-of-code
Navigating with the keyboard
Tags: a11y
Published: 2021-03-27 17:04:42

Did you know it was possible to navigate the web using only the keyboard? You're probably familiar with using the up and down keys scroll up and down. Page up and page down do the same thing, a page at a time. You can also scroll down a whole page using the spacebar. And up again using Shift+Space.

These are useful to know because if you have some JavaScript that does something when a key is pressed, then depending on the key, it might also do something else.

But the keyboard can do more than that. If you press tab on a website it will go to the next (first if you haven't done anything on it yet) selectable element. That will be a link, button, form input etc. If you keep pressing tab it keeps taking you to the next one. To go back, it's Shift+Tab.

Once something is selected you can then type in the input box or go to the link/press the button using the Enter key.

Which could be useful if you already have your hands on the keyboard and don't want to go all the way over to the mouse. But there are also some people who can't use a mouse, so this is how they navigate everything on their computer.

Which means that if something on your page is selectable with the mouse, it should be selectable with the keyboard too. HTML is pretty good and if you have a button element it'll work with the mouse and the keyboard, you don't have to do anything extra. But if you just have a div and a JS listener for it being clicked that's not going to help anyone with a keyboard.

The selectable elements should also be in an order that makes sense. Say you have all your social links at the very top of the page, followed by the navigation, then a hero image, then your content. Where are people going to want to go first?

What if you have a user with a small screen, or their browser set to a small width and the menu has collapsed to a hamburger. Can they open that? Or are they going to be stuck on the home page forever?

These are all accessibility things to think about when creating pages for the web.
Two way data binding in vue,react and vanilla js
Tags: react, vue, javascript
Published: 2021-03-27 17:02:00

The react way
``` js
  const [nameS,setName]=useState({
        names:[
            {name:'sourav',age:30},
            {name:'Toton',age:50},
            {name:'Rick grimes',age:10}
        ],
        btn:"Switch all names"
    })
  
  // the function which is called when the input value is changed
      const twoWay=(event)=>
      {

        setName({
        names:[
            {name:event.target.value,age:35},
            {name:'Toton',age:50},
            {name:'Rick grimes',age:10}
        ],
            btn:"Name switched!"
        })
      }
      
      // passing the function as a props to NewComp named component
        <NewComp chan={twoWay}/>
          
        // NewComp.js is the stateless component
            <input type='text' onChange={props.chan} /> {/* calling the funtion in onChange event*/}
```
The vue js way
```vue
<template>
    <h2>Tasks</h2>
    <!-- <Check/> -->
    <h4>{{msg}}</h4>
    <input type="text" v-model="msg">
    <!-- <p v-html="html"></p> -->
    <!-- <button v-bind:disabled='disbtn'>Thanos</button>111 -->
</template>
<script>
import Check from './Check'
export default {
    name:'So',
    components:{
        Check
    },
    data()
    {
        return(
        {
            name:'Sourav',
            html:' <h1>  Your name</h1>',
            disbtn:false,
            msg:'This is data'
        }
        
        )
    }
}
</script>
```

The vanilla js way
```js
// the html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Two way data binding</title>
</head>
<body>
  <h1 id='pr'>Hello</h1>
  <input type="text" id="two">
  <script src="app.js" charset="utf-8"></script>
</body>
</html>

// the app.js
const inp=document.getElementById('two')
const h1=document.getElementById('pr')
eve();
function eve()
{
  inp.addEventListener('keyup',cm)
}
function cm(e)
{
  h1.innerText=e.target.value
}

```

I like the vue way what about you :)
Quantum computing? About learning and teaching complex topics
Tags: career, productivity, webdev, beginners
Published: 2021-03-27 16:59:11

Anastasia Marchenkova, a software engineer and a researcher. Some of you may know her by her Youtube channel, where she talks about super interesting topics like quantum computing, AI, blockchain etc. What makes her channel special in my opinion is how entertaining yet educating it is.

The reason why we're here today is to learn about Anastasia's journey of becoming an engineer and a quantum researcher. I already know that this path hasn't been straightforward and includes multiple detours, for example creating her own startup. We're also going to learn about her habits, learning methods and other universal knowledge you can use to become a better developer.

{% youtube 1xR-1jnn6Bc %}

---
And a shameless promo - if you are interested in coding, growth mindset and are willing to share your experiences, ideas, then please do PM me on Twitter :)!

**DeveloperHabits**
📷 Youtube: [developerHabits](https://www.youtube.com/channel/UCJLZwePkNHps5Bv7VwISyTA)
👉 Twitter: [https://twitter.com/developerHabits](https://twitter.com/developerHabits)
👉 IG: [https://www.instagram.com/developerhabits](https://www.instagram.com/developerhabits)
The free weekend at Vue School is live! 🎉
Published: 2021-03-27 16:50:05

📣 Access the Vue.js 3 Masterclass for FREE this weekend at Vue School. 

Start building a real-world application from scratch with our signature course! 

The course is worth $329 and it will be free this weekend only! 

Start learning today! 👇 
https://vueschool.io/free-weekend/
Animated bottom Tabs and iCons in SINGLE LINE of code!
Tags: reactnative, animatedicon, icons, bottomtab
Published: 2021-03-27 16:41:13

Animated bottom tabs, New way for more interactive feedback

Animated bottom tab not only gives pleasure feel it also helps the color blinded people to easily detect the tab switch and a button click.


Click on the below video to learn how you can easily convert a normal plain bottom tab to animated one in a single line of code.

Here we are integrating the animated icon to bottom tabs which is created using React Navigation 5.

Fun and interesting coding go and check this out.


{% youtube 8gTaXwmnuNE %}
How much do you know about Markdown?
Tags: todayilearned, markdown, webdev, codenewbie
Published: 2021-03-27 16:37:16

## Hello Friends 👋️

🔍️ If you search **Markdown** on Google you will see this info Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber and Aaron Swartz created Markdown in 2004 as a markup language that is appealing to human readers in its source code form.

<br>


😮️ 1310 companies reportedly use Markdown in their tech stacks, including Reddit, StackShare, GitHub and our DEV community. [read more](https://stackshare.io/markdown)

<br>

![Markdown in simple word](https://media.giphy.com/media/oYtVHSxngR3lC/giphy.gif)

<br>

### In simple words 😍️  "*Markdown is a text-to-HTML conversion tool for web writers*"

---
### According to me :snow_capped_mountain: 
markdown is a little bit similar to HTML but it doesn't have lot's of fancy tags, It has limited tags but useful tags which is enough for a web page. Is easy to read and write because of fewer tags and syntax.

<br>

#### Now if you interested and ready to understand and learn **Markdown** these are the list of some great and **FREE** resources.

---

🐣️ **Scrimba:** is a code learning platform it has a great learning combination of video lectures and code. And they have created a free course of Markdown.

![Free Markdown course by Scrimba](https://i.ibb.co/2hHV21b/scrimba-markdown.png)

### [Jump to the course](https://scrimba.com/learn/markdownblog)


<br>

{% link https://dev.to/atulcodex/how-to-add-loader-in-the-website-in-a-few-seconds-4k7n %}

---

🦊️ **Brad Traversy** has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media which is a successful web development YouTube channel with over 1M+ subscription. Check out his free Markdown crash course.

{%youtube HUBNt18RFbo %}
### [Watch Now ](https://www.youtube.com/watch?v=HUBNt18RFbo&t=8s) 

<br>

{% link https://dev.to/atulcodex/eligent-restaurant-website-4m70 %}

---

**HackMd 🦄️** Hackmd is a free and online markdown editor which is very easy and simple. Even I also understand markdown from this platform 🤫️ If you guy knows a little bit of HTML and you don't want to waste your valuable time by watching lengthy video tutorials then I personally recommend this platform 🏁️

![HackMD Markdown](https://i.ibb.co/9vWyKGS/Hackmd-platform.gif)

#### [HackMD 🚀️](https://hackmd.io/8mIS2ufMS0aailnvtnzZqg?both=)

---

### Conclusion
So the final goal of this post to aware our community of how Markdown is covering the IT industry and in the first section of this post we have talked about the big industry leaders are already added Markdown to their stack list. I personally recommend you to grab Markdown language.
Putting this out into the ✨universe✨
Published: 2021-03-27 16:18:52

Update on 2021 new year's resolution: I haven't done **anything**.
What I tell myself is that 2020 was brutal and demoralizing and generally hard. These are all excuses.
I'd say I'm a realist and practical person but lately, whenever I hear "putting something out into the universe", it brings me joy. It feels like a tangible piece of hope.

So here it goes:
I would *LOVE* to get a new and exciting job. The dream company is still YNAB, but I'd settle for a fun tech centric company. That is all.

Thank you universe.


{% comment n8k0 %}
MUST DO JAVASCRIPT PROJECTS FOR BEGINNERS
Tags: codenewbie, coding, javascript
Published: 2021-03-27 16:15:03

Hellooo..Coders, When we start with our programming journey we tend to get confused at every step we take, but no worries this happens with everyone, you're not alone. 

In this blog I am going to share with you some simple projects, which can help you get started with. If you think you can build them easily you can skip them and build some intermediate projects.

##Calculator

There are high chances that you have already build one. But if you haven't then you should definitely give it a try. This is the best project to get started, as it is easy and best to clear your basics. You can also take this project at next level by making it more advance.

##To Do List

To Do List is a another great project to test your programming skills. By implementing this app you are going to face new challenges and learn how an app can be used in real life. It involves buttons, animation, user interaction and events. So, don't miss this project, you will learn a lot through this.

##BMI Application

Similar to to-do list in this project also you will be creating basic layout and perform some basic logic on the basis of input entered by the user. By using this applcation users can calculate their Body Mass Index(BMI). Inputs and formulas will be the main components of this application.

##TIC TAC TOE

Yes, this is famous childhood game. Can you build this..? You might think it will be easy, but according to me it is going to be the most difficult in this list. It is not as easy as it sounds. It requires a bit of strategy. Layout creation part is the easiest, the logic is where it gets interesting. It will be the best project to exercise you mind. Don't even think of missing this one.

##Rock Paper Scissor

Second project in our list is Rock Paper Scissor you should definitely try out. It requires both user input and randomizing element. The outcome will be a basic and interesting game.

##Snake Game

Sounds difficult? No worries you can do it. Snake game is just a sequence of logical pieces. With a thorough understanding of a language you can build this project.

Yes, this is it. But I would like to give you a tip if you're just starting with your coding journey. 

* Don't get into complex projects initially as that can easily get intimidating. Take one step at a time and move upwards gradually.

Now, you have these projects pick one and get started without any excuse.
3 Easy Ways to Center in CSS
Tags: webdev, css, productivity
Published: 2021-03-27 16:07:39

A common task while using CSS is trying to figure out how to center text or images. Personally I have encountered this while trying to develop a project, but I found out a way of that.
I will show you the ways to get around that problem in an easy manner.
### Lets get started:
- Method 1
```css
display: grid;
place-items: center;
```
Example:
### Without style:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki3d287opl9n80gpgy58.PNG)
### After Adding code snippet:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4e5qzai2vvrw7udisikv.PNG)
- Method 2
Center both horizontally and vertically
```CSS
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
```
We will and center an image:
### Without style:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqh78agqvgr74rsmawui.PNG)
### After Adding code snippet:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kspf0imb1d9joyah46bg.PNG)
- Method 3
```CSS
display: flex;
align-items: center;
justify-content: center;
```
### Without style:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki3d287opl9n80gpgy58.PNG)
### After Adding code snippet:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4e5qzai2vvrw7udisikv.PNG)
Now go forth and center all the things. 

Like my work: 
[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/V7R03ZL69)

Connect With me at [Twitter](https://twitter.com/larymak1) | [Insta](https://www.instagram.com/nextgencoders/) | [YouTube](https://www.youtube.com/channel/UCrT1ARRZfLOuf6nc_97eXEg) | [LinkedIn](https://www.linkedin.com/in/hillary-nyakundi-3a64b11ab/) | [GitHub](https://github.com/larymak)

Do share your valuable opinion, I appreciate your honest feedback!    

Enjoy Coding ❤
Help! Deploy Django website to GCP Cloud Run using VS Code
Tags: django, googlecloud, vscode, cloudrun
Published: 2021-03-27 15:38:31

Hello Guys!! I need guidance to deploy my existing django website which is in my windows machine to Google Cloud Platform's Cloud Run using VS Code. I saw there's a documentation related to it but I'm not able to understand what all to change in my django's settings.py and how will the database would be configured. Please guide me as what all should I change to my django app so that I can deploy it through my VS Code.