teleren/devto huggingface dataset:
JavaScript “Optional Chaining Operator”
Tags: javascript
Published: 2021-05-31 08:52:19

The optional chaining operator provides a way to simplify accessing values through connected objects when it's possible that a reference or function may be undefined or null.

Things going over my head!!

## Lets first understand Problem
I have a response that is nested over multiple objects
```
const response = {
  human= {
    name: 'Alice',
    age: 10,
    gender: 'Male'
  }
}; 
```

To access the *name* property of that object, we can use this snippet right here:

```
const name = response.human.name;
```

### Temporary workaround
However, is it really safe!! What if response is null or undefined.

How we will make it actually safe.
```
const name = response && response.human && response.name;
```
This will work.

## Solution
“Optional Chaining Operator” ?. which provides us with a very elegant syntax and fail-safe approach to the issue

```
const name = response?.human?.name;
```

With the optional chaining operator (?.), you don't have to explicitly test and short-circuit based on the state of first property of object before trying to access second property.

This is equivalent to the following, except that the temporary variable is in fact not created:

```
let temp = response.human;
let nestedValue = ((temp === null || temp === undefined) ? undefined : temp.name);
```

                                                            

###### Learn more here:                                     
[Learn Optional Chaning: MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)
[Next](https://dev.to/anu365/nullish-coalescing-operator-23o1)
Kadence Cloud - Erstelle Pro Templates und sperre den Zugriff
Tags: wordpress, functionsphp, kadencewp, snippet
Published: 2021-06-01 11:43:19

---
title: Kadence Cloud - Erstelle Pro Templates und sperre den Zugriff
published: true
date: 2021-05-31 08:45:07 UTC
tags: Wordpress,functionsphp,KadenceWP,snippet
canonical_url: https://j0e.org/kadence-cloud-pro-templates/
---

![Kadence Cloud - So erstellst du Pro Templates](https://j0e.org/wp-content/uploads/2021/05/cloud-pro-templates.png)

 Mit dem Kadence Cloud Plugin kannst du auch einzelne Templates als Pro Templates in deiner …

[Kadence Cloud - Erstelle Pro Templates und sperre den Zugriff](https://j0e.org/kadence-cloud-pro-templates/)
Laravel 8 Ajax Pagination Example Tutorial

Tags: laravel, programming, php, tutorial
Published: 2021-05-31 08:39:14

<p>Hi Friends,</p>

<p>In this article,I will apportion you how to engender jquery ajax pagination in laravel 8, we will engender ajax pagination in laravel 8. i will justify a step by step simple ajax pagination in laravel 8. </p>

<p>In this article pagination avails us to load few records every time, that way cannot broken web page due to lots of data. If you are making pagination and do it utilizing ajax then it a better way. Ajax Pagination load only your table data in in lieu of the whole page. So ajax pagination is very subsidiary.</p>

more..

https://codingtracker.blogspot.com/2021/05/laravel-8-ajax-pagination-example.html
Adding more input on click inside of my form in ReactJS Hook

Tags: react, javascript
Published: 2021-05-31 08:34:30

I have a few problems inside of my React application, currently I build a multistep for in ReactJS with Hook, but I'm novice with this technology. The problem is : when I adding inputs in my form and I passed to the next step, the data is lost. Who I can fix thaht ?

To start again on a sounder basis than my attempts, I did not put the code that generates the input to you, knowing that it does not keep the data if I go to the next step.

The link of code : https://stackoverflow.com/questions/67770142/adding-more-input-on-click-inside-of-my-form-in-reactjs-hook
Discussion: best way add CSS to React/Next.js projects?
Tags: nextjs, react, css, discuss
Published: 2021-05-31 08:26:16

## Current situation 

At the company I work for, we currently have a lot of projects which work with Bootstrap to style the website.
Since we don't want to include the jQuery dependency to use the out-of-the-box components (like dropdowns, accordions, ...), we then use react-bootstrap to build (parts of) our UI.

## Problems with current situation

As we try to focus on performance/speed of our websites as much as possible, we are trying to limit the CSS that is being included on every page.
The problem with our current setup is that we have 1 entry point (main.scss) where we import all the bootstrap SCSS we need (so we do only include the parts we need), and include all our custom SCSS.
As you can imagine the output CSS file's size is quite big.

## Possible solutions

1. We tried to use [CSS purge](https://purgecss.com/) to purge all the unused CSS, but we noticed that too much CSS was being deleted from the final output file. 
This is caused by react-bootstrap which obfuscates the Bootstrap classes is uses (they are not present in the JSX we write). 
I didn't find a good solution to overcome this problem, so any suggestions here are very welcome!

2. We tried working with SCSS modules to include only the needed SCSS in our components. This caused some problems with missing Bootstrap variables/mixins/functions. This causes a lot of code repetition, and the "general" Bootstrap still gets included on every page.

3. We tried working with Tailwind CSS. This caused a much smaller output CSS file because it can easily be purged. We combined this with SCSS modules where needed. The problem here is that we don't have a library with pre-built components with Tailwind like we do with react-bootstrap (unless I'm missing something?). 

## What setup are you using?

I know CSS in JS is also an option to only include the relevant CSS on your pages, but the same question here as with Tailwind CSS, do you have a library with pre-built components? 

Or don't you use pre-built components and have a custom component library which you re-use in every project?

Happy to hear your opinion/setup!
My 200th Post.
Tags: programming
Published: 2021-05-31 08:19:31


I am thrilled to write my 200th post @[Hashnode](@hashnode) as a developer. In this post, I'll get you covered everything you should know about me. If you're here or have read anyone post on my blog, you're important to me, ALWAYS. 

---

### About Me

I'm Rahul, from India. I am a Coder and Blogger (Self Taught always). I know some front-end technologies and trying to learn backend tech. I am working on some personal projects, that will be Open-Source Soon. I am 16 currently (turning 17 this month on 16th June), I was always fascinated by Coding so wanted to try it out, some years backs I learned Python and PHP, I don't use them now 😂. On this blog, I write daily on the topic related to JavaScript and React, sometimes on productivity, CSS and HTML. For the last 3 weeks I have decided to take off on Sundays(so, no posts on Sundays). I don't know how to write about me 😅, this is just what you should know 😁. 

### Tools and Hardware I use

Let me give you the specs of my laptop and start on with the tools I use daily. I use Realme 5 as my phone has 8GB Ram😉.  I have the Asus Vivobook 14 laptop, it was not a gaming laptop but I converted it😂 so the new specs are
- Ram: 12GB
- Graphics: GeForce GTX 2050ti 4GB
- CPU: AMD Ryzen 5 3500X
- Keyboard: Cosmic Byte CB-GK-18 Firefly
- Mouse: COSMIC BYTE ZERO-G

Cool? 😁 

> Anyway I am looking to get the new iPad Pro M1 11 Inch, Wifi-Cellular. Should I get it? 

So now the tools I use in my daily life. 
- `VS Code for Writing and Coding
- `Figma` for Designing
- `MS Teams` for Stuff that I don't like to do
- `Discord` talking with strangers late at night
- `Notion` for managing my budget 
- `Google Keep` for reminding me every day to drink water
- `Hyper Terminal` for looking like a hacker
- `Slack` for time pass as everyone uses


### Insipiration

I love reading articles daily. I read over 12-20 articles daily, pretty weird but it's amazing reading people experiences and learning from them. I have a Medium Pro subscription😎 (unrelated😂). So there are many people on Hashnode their articles are just above the line(not average) they are amazing and have inspired and learned a lot from them. They are: 

- Chris Sir (DailyDevTips)
- Victoria Lo
- Tapas Adhikary
- Catalin Sir

---

I have done many mistakes in Grammar and coding on my blog. I'll say sorry for this. 

### Connect 
- [Twitter](https://twitter.com/rahxul) - I tweet a lot 😉
- Discord - RAHULISM#6907
- [mail] - gamerrahul1122[at]gmail[dot]com

I can't remember any other things now, I'll update this post frequently anyway adding more about me 😀

You may have wasted your time by reading this post today. Anyway thanks for Reading. You guys are amazing.
Dependabot for Azure DevOps: Automated Vulnerability Scanning
Tags: azuredevops, devops, devsecops, live
Published: 2021-05-31 08:08:04

If you want to have __automated vulnerability scanning in Azure DevOps__, this is for you! 

In this live streaming, part of the "_Build Live with Me_" series, I will show how to __add Dependabot to Azure DevOps__ and how it works.

Keeping track of any outdated dependencies can be a real nightmare, especially if you have lots of them. This is where Dependabot enters the ring. You can usually find it only in GitHub, but this time I'm adding it into Azure DevOps and Im gonna do it live with you.

{% youtube 4ELai1FivK4 %}

[Link to the video: https://youtu.be/4ELai1FivK4](https://youtu.be/4ELai1FivK4)

See you there!

__Like, share and follow me__ 🚀 for more content:

📽 [YouTube](https://www.youtube.com/CoderDave)
☕ [Buy me a coffee](https://buymeacoffee.com/CoderDave)
💖 [Patreon](https://patreon.com/CoderDave)
🌐 [CoderDave.io Website](https://coderdave.io)
👕 [Merch](https://geni.us/cdmerch)
👦🏻 [Facebook page](https://www.facebook.com/CoderDaveYT)
🐱‍💻 [GitHub](https://github.com/n3wt0n)
👲🏻 [Twitter](https://www.twitter.com/davide.benvegnu)
👴🏻 [LinkedIn](https://www.linkedin.com/in/davidebenvegnu/)
🔉 [Podcast](https://geni.us/cdpodcast)

<a href="https://www.buymeacoffee.com/CoderDave" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 30px !important; width: 108px !important;" ></a>
Reset git add after commit or push
Tags: git, howto, tips
Published: 2021-05-31 07:52:56


I also sometimes meet the situation:

```console
$ git add .

$ git commit -m "<commit-comments>"
[main xxxxxxxx] <commit-comments>
 99 files changed, 99999 insertions(+)
 ...
 create mode 100644 <unexpected-file>
```

"Hey, wait ( ﾟдﾟ)"

In such a case, `git reset HEAD^ <unexpected-file>` is available.

```console
$ git reset HEAD^ <unexpected-file>
[main xxxxxxxx] <commit-comments>
 98 files changed, 98888 insertions(+)
 ...
$ # "create ... <unexpected-file>" is not printed

$ git commit --amend
$ # HEAD^ is changed
```

Happier, possibly🙂

Besides, when `git push` has been already done, running `git push --force|-f origin main` after the commit above updates the remote repository. It may affect others.
Compare React with three.js and react-three-fiber
Tags: react, typescript, threejs
Published: 2021-05-31 07:48:56

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

The following codes show the same output like above.

### With threejs

```js
import React from 'react';
import './App.css';
import * as THREE from 'three';

function App() {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.innerHTML = '';
  document.body.appendChild(renderer.domElement);
  
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({
    color: 'blue',
  });

  camera.position.z = 5;

  const cube = new THREE.Mesh(geometry, material);

  scene.add(cube);

  const animate = () => {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }

  animate();

  window.addEventListener('resize', ()=>{
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix();
  })

  return(
    null
  );
}

export default App;
```

### With react-three-fiber

{% github pmndrs/react-three-fiber %}

react-three-fiber has components that allow us to use without creating each instance for scene, camera, material, mesh etc.

```js
import React, { useRef } from 'react';
import './App.css';
import { Canvas, useFrame } from 'react-three-fiber';

const Box = () => {
  const ref = useRef<THREE.Mesh>();
  useFrame((state) => {
    // console.log(state);
    if(ref.current !== undefined) {
      ref.current.rotation.x = ref.current.rotation.y += 0.01;
    }
  });

  return(
    <mesh ref={ref}>
        <boxBufferGeometry />
        <meshBasicMaterial color="blue" />
      </mesh>
  );
}

function App() {
  return(
    <div style={{ height:'100vh', width:'100vh'}}>
      <Canvas style={{ background: 'black'}}>
      <Box />
    </Canvas>
    </div>
  );
}

export default App;
```
Need help: Open API 3.0 generator
Tags: restful, openapi, restapi, swagger
Published: 2021-05-31 07:40:08

*Can anyone help me with the following Open API 3.0 confusion.*

Say I want to specify an endpoint for a sign-up use case.

```
POST /signup
```

The endpoint (on the frontend side) has a requestBody with a JSON:

```
{
"email": "user@user.com",
"password": "blaa",
"passwordConfirm": "blaa"
}
```

The endpoint (on the backend side) should look like this:
```
{
"email": "user@user.com",
"password": "blaa",
"passwordConfirm": "blaa",
"handle": "username",
"createdAt": "2021-05-28T12:39:47.802Z"
}
```

So there should be two more values, that only are handled by the backend side (createdAt and handle being initialized by the backend).

My goal is to generate the frontend and backend which should output different code:
- frontend: email, password, passwordConfirm
- backend: email, password, passwordConfirm, handle, createdAt

Is this something I can specify with Open API 3.0? 
How would the specification look like?

Thanks for your help.
Experiential Learning in Data Science
Tags: datascience, machinelearning, datasciencecourse, onlinecourse
Published: 2021-05-31 07:13:58

Techslate introduces Experiential Learning in Data Science which is the best <a href="https://techslate.ai/">data science online training</a> for those who have knowledge of Data Science but lacking experience in it. This course is specially designed for students, working professionals and business specialists, and owners who want to enhance their practical skills in Data Science.
Using React with ASP.NET Core MVC
Published: 2021-05-31 06:55:26

My team and I are building an e-commerce website using ASP.NET Core MVC. Recently we decided to create some parts of our website using React. We want to use React in all pages except product pages and shared layout. We are trying to avoid server-side rendering since the current server we are using is a shared database. 
Trying to integrate react with ASP.NET, I used Webpack to build a single js file and put that file in the root folder. ASP.NET Core routes pages that are supposed to be rendered by React to an empty view that has React js file in it. I also used react-router-dom to decide what page to render based on the current URL.
This method of integrating these two frameworks is completely made up by myself based on the knowledge I got from React and ASP.NET Core documentation. I was wondering if there is a better way of doing this. I am also told about frameworks like Next.js that can pre-render some pages, but I'm not sure if this is what I want.
I'll be thankful if anyone who has experience with React helps me with this situation. Is this usage of React common and how it supposed to be used? Can you name some popular websites using react in a multipage website? Should I continue using React in this way, or is it better to separate React from ASP.NET Core, and then pre-render pages that we need to be rendered for search engine crawlers?
A virtual environment in Powershell.
Tags: python, powershell, developer, package
Published: 2021-06-06 17:27:01

---
title: A virtual environment in Powershell.
published: True
date: 2021-05-31 06:54:43 UTC
tags: Python,Powershell,Developer,package
canonical_url: https://magbanum.tech/a-virtual-environment-in-powershell
---
![a virtual environment in powershell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80b1a8r1rs46ej0s7lfu.png)
The virtual environment is used to create an isolated environment for the different projects. This helps developers to keep the dependencies required by projects separate. So let's learn basic commands to create and activate the virtual env and install packages on it.

#### Prerequisites,

- Python
- PIP

Install `virtualenv` package using the following command,

```
python -m pip install --user virtualenv
```

Now go to the folder where you want to create a virtual environment and run the following command to create a virtual environment with the name "env". This will create the folder named "env" in a directory.

```
python -m venv env
```

> You can name it whatever you what just make it logical and relative to your project.

To activate the virtual environment, go to the directory where you installed it and run the following command by replacing "env" with your environment name.

```
env\Scripts\activate
```

To install any package make sure the virtual environment is active. Use the following command to install the package.

```
pip install package-name
```

To install multiple packages use a comma `,` to separate package names. For example,

```
pip install requests, Django, BeautifulSoup
```

To install packages using `requirements.txt` file, use the following command

```
pip install -r requirements.txt
```

To get package names installed on a virtual environment into a `requirements.txt` file use the following command.

```
pip freeze > requirements.txt
```

To deactivate the env use,

```
deactivate
```

I am a total beginner and might have missed command that I never used before. So, please comment below few commands that are helpful for developers. Thanks for reading and do follow for more such articles.

> Never stop learning!
Python Lambda functions
Tags: python
Published: 2021-05-31 06:43:08

The other day I wrote about [functions in Python](https://daily-dev-tips.com/posts/writing-functions-in-python/), and my good friend [Waylon](https://dev.to/waylonwalker/comment/1eo4a) noted me on the existence of Lambda functions.

So I started to research what they are, how they work, and when to use them.

## Lambda functions in Python

Lambda functions are tiny functions that have no specific name and can only have one expression.
They are also called anonymous functions.

We can create one of these functions like this:

```python
lambda foo : bar
```

Foo is the argument, and this can be multiple, and bar is the expression, so this is your one-liner return statement.

To give this more body, let's make a function that divides a number.

```python
divide = lambda num: num / 2
print(divide(4))
```

As you can see, we can make it, so it's assigned to a variable, and that variable we can pass the arguments into.

However, linters as the one I'm using in Visual Studio Code will use auto-format this to a regular function like this:

```python
def divide(num): return num / 2
print(divide(4))
```

Which again, does the same thing.

So pretty cool already, and my understanding is they truly come to power inside other objects as quick functions.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Brace Matching in C#
Tags: productivity, webdev, beginners, tutorial
Published: 2021-05-31 06:27:42

### What is Brace Matching?

As C# uses angular braces quite extensively, brace matching helps you identify the corresponding brace pair by highlighting it as shown below.

![](https://cdn-images-1.medium.com/max/2000/1*Tow6KFD7h1knxIsD484wsA.png)

By default, the visual studio uses a gray color highlighter to show brace matching, but the user can override the setting.

### Tip 1: Changing brace matching default color

Go to Tools > Options > Environment > Fonts and Colors and select the “Brace Matching” item from the Display items list.

![](https://cdn-images-1.medium.com/max/2000/1*BUWvbGULF4VeroyceFhC5Q.png)

Now choose the foreground & background from the color palette.

### Tip 2: Switch between braces with a keyboard shortcut

The above tip is really useful when a file has more lines of code or a larger document, and the user wants to know the starting curly brace of a method, class, or expression.

**Shortcut: “Ctrl + ]”**

Go to the start or end of any brace and then press the shortcut key. The cursor will move to the start or end of the brace respectively.

![](https://cdn-images-1.medium.com/max/2158/1*2IBBbQgP_lXWKmt_EDy9BQ.gif)

The above live demonstration shows the usage of this tip. To represent the cursor movement, I have written random text to represent where the cursor moved after the shortcut.

Thank you for reading, and I hope you liked the article. Please provide your feedback in the comment section.

## Follow me on

[C# Publication](https://medium.com/c-sharp-progarmming), [LinkedIn](https://www.linkedin.com/in/sukhpinder-singh-532284a2/), [Instagram](https://www.instagram.com/sukhpindersukh/), [Twitter](https://twitter.com/sukhsukhpinder), [Dev.to](https://dev.to/ssukhpinder), [Pinterest](https://in.pinterest.com/ssukhpinder/_created/), [Substack](https://sukhpinder.substack.com/), [Wix](https://www.csharp-dotnet.com/).

<a href="https://www.buymeacoffee.com/sukhpindersingh" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>