teleren/devto huggingface dataset:
JavaScript Essentials for React Developers
Tags: essentials, javascript, react
Published: 2022-02-11 17:39:35





 **Basics**

⇥  Variable Declaration
⇥  Variable Scope
⇥  Variable Hoisting
⇥  Functions
⇥  Arrow Functions
⇥  Callback Functions
⇥  Closure
⇥  Basic Operators
⇥  Array Literals
⇥  Object Literals
⇥  if, if...else
⇥  for, for...in, for...of, while, do...while


 **Array.prototype Methods**

⇥  forEach()
⇥  map()
⇥  reduce()
⇥  flat()
⇥  flatMap()
⇥  find()
⇥  filter()
⇥  slice()
⇥  splice()
⇥  push()
⇥  pop()
⇥  shift()
⇥  unshift()
⇥  some()
⇥  every()




 **Array Destructuring**

It's frequently used in hooks esp. useState()

Example:

⇥  const [fruits, setFruits] = useState([]);



 **Array Spread**

There are so many use cases. One of the place where we frequently spread an array is adding/updating/removing an item from the state.

Example:
Add an item to the starting of Array

⇥  let newArray = [itemToAdd, ...oldArray]



**Object Destructuring**

⬒  Properties are passed as an object parameter to our function component.

⬓  We can destructure it and, specify only those properties that we are going to use.

Example:

function MyComponent({name, address}) {

}


 **Object Spread**

We may spread an object to pass those to a child component.

Example:

function MyComponent({name, address, ...rest}) {
  return <ChildComponent {...rest} />
}


**Template Literals**

⇥  Untagged Template Literals
⇥  Tagged Template Literals
      This one is used heavily in few styling libraries.


**ES Modules**

⇥  import
⇥  import {}
⇥  export
⇥  export default


**Conclusion**

⬖  Learning method varies from person to person.

⬘  Though it's not mandatory to have JS knowledge, you can learn both React and JS at the same time.

⬗  But for a smooth riding, it's advisable to have basic knowledge of JS before starting your React journey.
Are there modern JavaScript frameworks without NodeJS dependency?
Tags: javascript, webdev, programming, question
Published: 2022-02-11 17:23:46

Some time ago I have checked in the Internet JavaScript frameworks for my pet project and found out that there is no frameworks what can work purely on client side (in browser) and have no dependency to NodeJS.
 
If you know any framework that is commonly used (more or less) and is not require NodeJS please let me know in comments 🙂
What's your github labels? #2
Tags: github, management, opensource, productivity
Published: 2022-02-11 17:20:26

Hi 👋,

[_LittleUpdateFromMyPreviousArticle_](https://dev.to/ruizalexandre/what-s-yours-github-labels-5eed)

There are all Github labels we use on our projects.

* **bug** : Bug fixing
* **chore** : Internal task/operation
* **documentation** : Documentation
* **feature** : New feature
* **refactor** : Refactor
* **release** : Release package
* **test** : Unit, functional, integration, E2E tests
* **theming** : Theming and global ui improvements
* **to discuss** : Need to discuss about

There is the [Github Gist](https://gist.github.com/ruizalexandre/a8c361bb2e8ad77fafbf156664ed877e). Enjoy it :)

Bye bye 👋
Day-5 training at cognizant
Published: 2022-02-11 17:13:45

Date:11/02/2022
Day:friday

today, I started at about 9:00 am and ended till 6:00 pm today there was no dedicated session all were getting mails by mentors allotted to each one.and accordingly courses were provided and we followed up in same manner. this way my day ended up.
Day-4 Training at cognizant
Published: 2022-02-11 17:10:43

Date:10/02/2022
Day:Thursday

today, I started at about 9 am and it ended till about 6:00 basically there were various sessions abut their policies and what is the atmosphere they provide with cognizant and whole day they were discussing their polices and they they took session to solve students problems faced by them . this way my day ended up.
Day 18/100 Java
Published: 2022-02-11 17:01:25

I have realised the importance of going through the theory before getting to project work is quite hight.

Day 18/100

**Language:**
JAVA

**Time Period Spent:**
2hrs

**Course Taken:**
Udemy: Java Programming Masterclass - Tim Buchalka

**Todays Learning:**
- Polymorphism
- OOP Master

- Challenges:
	- Polymorphism
	- OOP Master Challenge
	- Bill's Burgers

**Additional Notes:**
Today we've put the following two sections into good use. Creating a real-world application to allow us to make calculations for a supposed client that wanted an application for his burger company.

The brief was to create a system that allows the customer to choose one of three burgers, we then allow them to select from a range of additional items to add to the burger at an additional cost. Included in this, allow the company to print out the base price, addition price, chosen burger and a description.

I did this using all the concepts that were learnt in the previous two sections. Polymorphism, Over-right, Encapsulation and Composition. This covers OOP (Object Oriented Programming).
tsParticles 1.41.0 Released
Tags: webdev, javascript, typescript, showdev
Published: 2022-02-11 16:56:00

# tsParticles 1.41.0 Changelog

## Bugfixes

- Fixed type on `particles.vue3` `particlesLoaded` property
- Fixed issue with path generators
- Fixed polygon path generator
- Fixed polygon path options

## New Features

- Refactored path plugins to be more compatible with the new instance hierarchy
- Added more options to path plugins
- Updated `ng-particles` to Angular 13

---

{% github matteobruni/tsparticles %}
Day-22 Training at Ryaz
Tags: webdev, beginners
Published: 2022-02-11 16:54:44

- Date:11/02/2022
- Day:Friday

Today, I started at about 11:00 pm as I had completed the task-3 now I was to shift to another task men while I was asked to learn few things about es6 concepts what I get to know about was as it was introduced in 2015 which have different techniques than ordinary javascript. es6 is abrogated as ECMA script it was loaded with more of interesting things after studying then I shifted towards task-4 that include first component to build various cards basically I was provided with the various links like of material-ui from which I was supposed to observe and hard code different card components with the help of HTML and CSS basically it was good experience while working with card component as it included various different placement of text and image to get different view of cards and it also included card with text upon image which I have never practiced earlier so, this way my day ended up and I got to learn many new things and this helped me to enhance my knoledge.
Kubernetes tutorial | Install Kubernetes on Raspberry Pi FAST in 2022
Tags: raspberrypi, kubernetes, k3s, k8s
Published: 2022-02-11 16:41:33

I've just uploaded a new video where I show how to install your own Kubernetes cluster on your own Raspberry Pi. In this video I'm using Raspberry Pi OS x64 that was recently released.

Please check it out and subscribe to my channel to be notified when my new videos will be released.

Thank you in advance.

Link to video: https://youtu.be/rOXkutK8ANc

Link to my personal blog: https://www.anmalkov.com

Link to my playlist: [Kubernetes tutorial - Learn Kubernetes FAST by doing](https://www.youtube.com/playlist?list=PLDoQ6gLAki7fbKfOVeY-WgqRgsF3Q5OMa)
How To Activate "God Mode" on Windows
Tags: productivity, windows, tutorial, beginners
Published: 2022-02-11 16:38:48

###Windows God mode 
Windows **God mode** puts an icon on your desktop that contains quick access to over 200 settings you might need. Windows **God Mode** originated with windows vista in 2007. It can be activated in windows 10 and Windows 11.

The **God Mode** menu is very simple to implement but can be a bit difficult to remember since it requires entering a long sequence of characters

To implement the **God Mode** icon on your desktop.
"up, up, down, down, left, right, left, right, B, A." No, wait. Wrong cheat code. Just follow these two simple steps.

*Right-click on your desktop and select Create Folder.
![Demo1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttbymn5k7zku9iyhxs7l.png)

*Now name it: `GodMode.{ED7BA470-8E54-465E-825C-99712043E01C}`, Now press Enter.
![Demo2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4cm20i0gsvh8xczcnw8.png)

The folder icon will transform into what looks like a small control panel. Congratulations! You have activated **God Mode!**

![Demo3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1wvgbcka1ifmi6dzuoz.png)

###Why God Mode?
God Mode is quite handy if you hate trying to navigate through the ever-changing Windows Control Panel a.k.a. Settings menu. God Mode gives you instant access to every control in Windows, including some you will not find in the regular Settings app, Some of these settings are well hidden.

Obviously, there are going to be tons of settings in the God Mode folder you will never use -- probably most of them -- but there are a few that frequently come in handy.
or 
Thanks For Reading, Don't Forget to follow me here and on twitter @set_addo
How To Remove Download Tab From Woocommerce My Account Page

Tags: woocommerce, wordpress, remove, download
Published: 2022-02-11 16:38:27

Hello there,
Today we will discuss **HOW** and **WHY** we need to remove Download Button from WooCommerce MyAccount Page.


![Removing Download Button Codes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nx9pg0rebw3opvfn6zv9.jpeg)

Imagine you have a WordPress website along with Woocommerce. You are selling physical products like digital goods or clothing there. When customers access their account page, they see a layout that looks like the general layout of the WooCommerce account page. 
It's normal, right? But for regular users, this layout must be optimized, right? So, they can understand their panel better. 

If you don't have any digital products in your store, that "Download Button" or "Download Section" does not make any sense. In some cases, it can also be confusing too.

Considering that, we need to remove that button. 
**How can we do that? **

Let's say we can do that by using CSS! Easy Peasy

```
.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--downloads{

display: none;
}

```

Yes, you can do that, but that's not right and not the solution we are looking for. 

## The Solution - Our Solution :sunglasses:

Use these codes in your function.php file to remove the downloads tab from the WooCommerce MyAccount page.

## [Check The GitHub Hack Repo Link](https://github.com/ShaonPro/Remove-The-Downloads-Tab-on-The-My-Account-Page-Woocommerce) 


```

add_filter( 'woocommerce_account_menu_items', 'ShaonPro_remove_downloads_tab_my_account', 999 );
 
function ShaonPro_remove_downloads_tab_my_account( $items ) {
// You can add other tab names
unset($items['downloads']);
return $items;
}

```



> Here's the regular MyAccount Page with the Download Button before applying any code.

![With Download Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7u178j9u5k8aml8b3wc.png)


> After applying the code, MyAccount Page with no download button.


![Without Download Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mooxj659j30xpxjkqvyi.png)

We are good to go now :innocent: - Thanks for your support.
Java - Inheritance
Tags: java, devjournal
Published: 2022-02-11 16:31:11

Inheritance in Java is a mechanism in which one object acquires all the properties and behaviors of a parent object. 

The idea behind inheritance in Java is that you can create new classes that are built upon existing classes. When you inherit from an existing class, you can reuse methods and fields of the parent class. Moreover, you can add new methods and fields in your current class also.

In Java, every class implicitly extends the java.lang.Object class

keyword: _extends_

   ` class Subclass-name extends Superclass-name  
    {  
       //methods and fields  
    }  `

The Super class is similar as a Parent or a Base class and the Sub class is similar to a Child or Derived class.

Inheritance represents the IS-A relationship which is also known as a parent-child relationship.

When the child class object is instantiated, the JVM automatically instantiates its Parent class first and then it instantiates the child class.

**Types of Inheritance:**

1. _Single Inheritance_: When a class inherits another class, it is known as a single inheritance.

2. _Multilevel Inheritance_: When there is a chain of inheritance, it is known as multilevel inheritance.

3. _Hierarchical Inheritance_: When two or more classes inherits a single class, it is known as hierarchical inheritance.

_Method Overriding_: Method Overriding happens when method in child class with same exact signature of the parent class.

Rules for Java Method Overriding

1. The method must have the same name as in the parent class
2. The method must have the same parameter as in the parent class.
3. There must be an IS-A relationship (inheritance).

By using @Override, instead of getting a logical error we get a compile time error.

_Super Keyword_: Super keyword allows us to access the parent's methods from within a child class.

_Super Method_: Super Method is used to invoke the parent class constructor. The super method invocation must be first line in the child class constructor.

_Constructor Chaining_: Using _super_ and _this_ methods, we can access more than one constructor of the child and parent in a single object creation.
How to version Docker images with GitLab CI/CD
Tags: gitlab, docker, devops, nelsoncode
Published: 2022-02-11 16:29:43

For this example we will use GitLab Container Registry and we will version the images by commit

### Variables of GitLab 

CI_REGISTRY_USER: User actually of GitLab
CI_REGISTRY_PASSWORD: Password actually of GitLab
CI_REGISTRY: "registry.gitlab.com"
CI_PROJECT_PATH: "gitlab-example/my-project"
CI_COMMIT_SHORT_SHA: Recent commit ID

1.Docker Login (GitLab Container registry)
```bash
docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY

```
2.Build image with ID COMMIT SHA
```bash
docker build . -t $CI_REGISTRY/$CI_PROJECT_PATH/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA

```

3.Get ID from previous image
```bash
IMAGE_ID=$(docker images | grep $CI_REGISTRY/$CI_PROJECT_PATH\/$IMAGE_NAME | awk '{print $3}')

```

4.Retag image latest with digest from previous image
```bash
docker tag $IMAGE_ID $CI_REGISTRY/$CI_PROJECT_PATH/$IMAGE_NAME:latest

```

5.Push image latest and commit sha
```bash
docker push $CI_REGISTRY/$CI_PROJECT_PATH/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA
docker push $CI_REGISTRY/$CI_PROJECT_PATH/$IMAGE_NAME:latest

```

6.Pipeline

```yaml
build:
  image: docker:19.03.12
  stage: build
  services:
    - docker:19.03.12-dind
  rules:
    - if: $CI_PIPELINE_SOURCE == "push"
  variables:
    IMAGE_NAME: "my-app"
  script:
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY

    # BUILD IMAGE WITH COMMIT SHA

    - docker build . -t $CI_REGISTRY/$CI_PROJECT_PATH/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA

    # RETAG IMAGE LATEST WITH DIGEST FROM PREVIOUS IMAGE 

    - IMAGE_ID=$(docker images | grep $CI_REGISTRY/$CI_PROJECT_PATH\/$IMAGE_NAME | awk '{print $3}')
    - docker tag $IMAGE_ID $CI_REGISTRY/$CI_PROJECT_PATH/$IMAGE_NAME:latest

    # PUSH IMAGE COMMIT SHA and LATEST

    - docker push $CI_REGISTRY/$CI_PROJECT_PATH/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA
    - docker push $CI_REGISTRY/$CI_PROJECT_PATH/$IMAGE_NAME:latest

```
8.Images in Docker Registry

The latest image will always point to the latest version

```
68713c41   Published 1 minute ago
41.58 MiB  Digest: 2fd477a

latest     Published 1 minute ago
41.58 MiB  Digest: 2fd477a
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctzlqod44jmmdauh46mb.png)
Introduction to Modern Python
Published: 2022-02-11 16:21:33

```

```
## Introduction to Modern Python

> Having been hearing about python over a decade ago, i did not realize the fancy staff and power of what python can do. Some times, i remember the times i used to waste in stuffs that are totally not beneficial to me. Yet i would start my journey in python.
> Well, three years ago, i was taking up C programing course, did every basic stuff in C programming, but what makes things worse, i never develop a project yet i had the skill to do that. Was it lazyness?, well maybe !!, one may predict like that.

> Alright, that was a short boring story, now its time to be what we want to be ( are you getting the point) 

```python
yourThought = "are you getting the point"
if(yourThought):
  print('you know what am meaning')
else:
  print('you can still guess')
```
. Its time to chill with the **BIG BOY**, thats the Modern Python. Its never to let for you and me to start our journey of becoming friends , Oooh sorry!!! i meant software developers, engineers and even much belong that. Join me and we will all share the ripe fruits of technology. Wish you the best in Modern **[Python](https://www.python.org)**.
Handling multiple inputs in react.
Tags: javascript, react, webdev, beginners
Published: 2022-02-11 15:22:26

**Hello everyone**,
_In this article, let us understand how to handle multiple inputs in react._

Recently I was working on one side project where I had multiple `input` fields.

Let's take the example of the below code.

```
const Form = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  const [country, setCountry] = useState('');
  console.log(name, age, country);
  return (
    <form>
      <input
        type='text'
        value={name}
        onChange={(e) => {
          setName(e.target.value);
        }}
      />
      <input
        type='text'
        value={age}
        onChange={(e) => {
          setAge(e.target.value);
        }}
      />
      <input
        type='text'
        value={country}
        onChange={(e) => {
          setCountry(e.target.value);
        }}
      />
    </form>
  );
};
```

In the above example we have 3 different `input` fields, we may have more than 3 also, and 3 different `states` and 3 `onChange` function to update respective states.

We can solve this problem with help of the following approach.

```
const AnotherForm = () => {
  const [inputValues, setInputValues] = useState({
    name: '',
    age: '',
    country: '',
  });
  const inputChangeHandler = (e) => {
    const { id, value } = e.target;
    setInputValues({ ...inputValues, [id]: value });
  };
  
  return (
    <form>
      <input
        id='name'
        type='text'
        value={inputValues.name}
        onChange={inputChangeHandler}
      />
      <input
        id='age'
        type='text'
        value={inputValues.age}
        onChange={inputChangeHandler}
      />
      <input
        id='country'
        type='text'
        value={inputValues.country}
        onChange={inputChangeHandler}
      />
    </form>
  );
};

```

In this solution, we have to manage only one `state` which is having a `object`, with property of the respective input field, as an initial value. All input fields will have `value` attribute with their respective value. e.g `value={inputValues.name}`.
We will define one single handler function `inputChangeHandler`, which will handle `onChange` event for every input change.






How does all this work? let us understand step by step.

- First we are destructuring `e.target` object to get  `id` and `value` attributes from input fields.
- Then we are updating `inputValues` state object with existing values with help of `setInputValues` and spread operator.
- And now we are updating `value` of the input field that is being triggered with `onChange`. e.g. - `[id] : value`, here we are setting dynamic `id` property key.
#PowerPoint – Integrate your live camera 🎦 feed in your slides
Tags: englishpost, cameo, camera
Published: 2022-02-12 16:21:35

---
title: #PowerPoint – Integrate your live camera 🎦 feed in your slides
published: true
date: 2022-02-11 16:17:18 UTC
tags: EnglishPost,Cameo,Camera,EnglishPost
canonical_url: 
---

Hi !

Wow, I opened PowerPoint today to check my slides for a presentation later today and I find a new super cool feature that allow me to add a live camera feed into my slides.

![Power Point Camera Cameo Preview](https://brunocapuano.files.wordpress.com/2022/02/power-point-camera-cameo-preview.jpg?w=1024)

This is part of a set of new features for Office Insiders and it’s called: CAMEO. You can read the full introduction in the references section.

It’s super easy to use, just browse to the [Insert] Ribbon and then add [Cameo].

![insert Cameo](https://brunocapuano.files.wordpress.com/2022/02/insert-cameo.jpg?w=412)

Once you insert your Camera / Cameo, you will find a very familiar set of options to define the style of your Cameo.

![Camera options](https://brunocapuano.files.wordpress.com/2022/02/camera-options.jpg?w=848)

I realized that it didn’t recognized my OBS Virtual Cam, so there is something here to work on. However, with 2 clicks I think I can add my Chroma Key filter effect to my Logitech Brio camera.

More on that later !😀

[Original Post](https://elbruno.com/2022/02/11/powerpoint-integrate-your-live-camera-c%f0%9f%8e%a6-feed-in-your-slides/)


Happy coding!

Greetings

El Bruno

* * *

## References

[Office Insiders – Integrate a live camera feed into your presentation with cameo in PowerPoint](https://insider.office.com/en-us/blog/integrate-a-live-camera-feed-into-your-presentation-with-cameo-in-powerpoint?s=08)