teleren/devto huggingface dataset:
How to download You Tube video using Python
Tags: python, beginners, programming, projectbenatar
Published: 2021-12-22 11:21:02

##Intro
In this post you know about how to download youtube vidoes very easily in only in only four lines of code!!

##Save your time watch video!
[Watch now](https://youtu.be/2Wb2313oHxc)

##Requirments
`pip install pytube`

**Pytube:** Pytube is a very serious, lightweight, dependency-free Python library (and command-line utility) for downloading YouTube Videos. If You want to know more about pytube take a look of [documentaion](pytube.io) 

##Let's code
First import youtube from pytube

```
from pytube import YouTube
```

**Get more tkinter projects ideas [here](https://amzn.to/30TUp7Q)**

Make a variable and paste the web url link of any video don't use the link which you get click on share button.

```
youtube = YouTube('https://www.youtube.com/watch?v=2Wb2313oHxc')
video = youtube.streams.first()
```

The streams function is fetch video description, title, thumbnail and all these things but only for download video use first() with streams

Then finally use the download function to download the video and give the directory path where you want to download video

```
video.download('C:/Users/96650/Desktop/')
```

The all code look like this!

```
from pytube import YouTube
youtube = YouTube('https://www.youtube.com/watch?v=2Wb2313oHxc')
video = youtube.streams.first()
video.download('C:/Users/96650/Desktop/')
```

**If you still reading here please like my content**
## For more projects subscribe to [channel](https://www.youtube.com/channel/UCKTATjpJ8uzVDbtaMpwlMbA) and 
##Get more Python projects [here](https://amzn.to/3Fq3sMX)

**AFFILIATE DISCLOSER: ** This post includes affiliate links.I may receive compensation if you purchase products or services from the different links provided in this article.
Use session and cookie variables in Smarty Php template
Tags: php, smarty
Published: 2021-12-22 11:16:39

Cookies: if they are in devtools/Application tab, we can access like this:
 Chrome Devtools: Name: companyId Value: 8
 Smarty: {$smarty.cookies.companyId}

Session variables: 
Set: $_SESSION["userid"] = 1
 {$smarty.session.userid}

Parameters in url: example: myurl.com?myindex=34
 {$smarty.get.myindex}

Get contents of an array, $_SESSION for example: 
 {$smarty.session|@json_encode}

To see which file is running the current page:
 {$smarty.server.SCRIPT_NAME}
React's new Context API and Actions
Tags: javascript, webdev, react, vscode
Published: 2021-12-22 11:10:21

Context API seems interesting. Context API comes with several solutions in react.  The solutions are : 
It provides a single source of truth for data that can be directly accessed by components that are interested, which means:
It avoids the "prop-drilling" problem, where components receive data only to pass it on to their children, making it hard to reason about where changes to state are (or aren't) happening.

## What's Context do?

There are many articles on how the context api works. So you can check there. I’m here to tell you how to use the context api with some of my examples. 

## Simple Context Example?

First of all, we have to create a custom component. And wrap the App.js. Here app.js will be children of the custom wrapper component. In the component, we have to create a context using createContext(). Like So: 


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

Now we can use the DuckifyConsumer to read that state.

## Passing Functions: 

In javascript, functions are known as “first-class”, meaning we can treat them as objects and pass them, around even in state and the providers value prop. The maintainers didn’t use state prop they uses the value prop. Because they want to separate the concepts of value and state. In this case, we can add an dispatch function to the DuckifyProvider state. dispatch will take in an action (defined as a simple object), and call a reducer function (see below) to update the Provider's state (I saw this method of implementing a redux-like reducer without redux somewhere, but I'm not sure where. If you know where, let me know so I can properly credit the source!).
We pass the state into the value for the Provider, so the consumer will have access to that dispatch function as well.
Two ways to launch Electron app
Tags: node, electron, webdev, webpack
Published: 2021-12-22 11:07:34

> At the time of writing it was 12'21, a bonus tip for Webpack updated on 01'22 

---

1) First and most common classic way of doing so :

**package.json**
```javascript
"..." : "...",
"main" : "main.js",
"scripts" : {
"start" : "electron .",
}
"..." : "..."
```

Secondly, within current working directory (cwd) run the following on terminal : 

> npm run start

> How main works have a read [this](https://dev.to/projektorius96/packagejson-practical-side-clarified-13id) practical article of mine 

> **NOTE** : test, start, restart, and stop – are npm recognizable commands , so alias of **run** is optional , although for the sake of idiomatic convention I used a full term of <u>**npm run** start</u>

2) Alternatively we can forget **package.json** config by simple doing :

> npx electron main.js

> **EXPLANATION** : **npx** vs. **npm** have a few contextual cases in terms how it works , but herein it serves as executable for `./node_modules/.bin/electron .` which was not added to PATH on my Win10 machine as I tend to install Electron locally, this is side effect of such behaviour I had & will have to use npx over npm as shown above to avoid some of package.json configs

---

> **BONUS TIP** : similar approach to above can be applied to locally installed webpack compiling process for `./node_modules/.bin/webpack` within cwd running `npx webpack`
Odoo ERP System - Synconics
Tags: erpsoftware, odooerp, odooerpsolutions, erp
Published: 2021-12-22 10:49:06


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

[**Synconics**](https://www.synconics.com/) provides best odoo solutions/services from odoo implementation, odoo customisation, odoo development, odoo installation, odoo apps for small, medium and large business/industries to worldwide.

We consult our clients on IT strategy, business process reengineering, IT staffing, Odoo ERP implementation, project management oversight and Organizational change management.

E-mail: contact@synconics.com
Skype: synconics.technologies
Route Parameter Validation Where in Route - Laravel
Tags: php, laravel, beginners, programming
Published: 2021-12-22 10:45:00

Let's start quickly here. We want to check who is coming from a route with a specific parameter to fetch the data
```php
Route::get('users\{period}',[IndexController::class, 'index']);
```
 so we used in_array()
```php
public function index($period){
  if(!in_array($period, ['week','month'])) {
     abort(404);
  }
  //...
}
```
Let's see the best way is to put where in Route and dispense in_array()
```php
Route::get('users\{period}',[IndexController::class, 'index'])
     ->where('period','week|month');
```
Source :- https://www.youtube.com/watch?v=TPfyHe7h-h4
I hope you enjoyed the code.
A 20-minute video introducing GraphQL-state
Tags: react
Published: 2021-12-22 09:56:11

I created a 20-minute video introducing GraphQL-state(An intelligent react state management framework).

[https://www.youtube.com/watch?v=05Xx_t8GC18](https://www.youtube.com/watch?v=05Xx_t8GC18)
*(My English is too bad, so I can only use AI to synthesize speech, sorry)*

In daily development, React developers will encounter a type of complex problems that have not been solved by any other state management frameworks. GraphQL-state is committed to a simple and intelligent way to solve those complex problems.

This video can show you how powerful and smart it is.

Welcome everyone to put forward your valuable opinions, let's work together to make it better and better, smarter and smarter.
React Virtual DOM and diffing- algorithm Simplified
Tags: react, javascript, webdev, programming
Published: 2021-12-22 09:56:08

## React: 

React is JavaScript open-source library. Using which we can make various interactions in the UI. 

## JSX: 

React gives us a markup syntax of its own, with which we can create a react element, called JSX. That is, JavaScript XML. It looks like HTML but not HTML. 

React generates HTML code with JSX. Although we write the syntax of JSX inside the JavaScript file, although JavaScript does not understand JSX, we have to use a transpiler. For example Babel. Babel converts JSX codes to JavaScript. 

## Virtual DOM:

React creates elements for itself using its createsElements () function. By combining all the elements, he creates a separate dom inside himself. This dom is called Virtual Dom. React's virtual dom basically renders as much as the browser's dom has changed. 

We can imagine the Virtual Dom as a simple tree. The different notes of which are one component. Whenever we change the state of a component, a tree is created first. Where the modified component and its child components are reconstructed. That is, React has two representations of the virtual dom. One is the state before it, and the other is the state after the change. React compares these two conditions. 

## Diffing-Algorithm:

React uses the "Diff" algorithm to do this comparison. With that, React can understand which places have changed. React then changes only the part of the dom where the change was made. 

## Conclusion:

Attempts have been made to simply explain the virtual DOM and diffing-algorithm without any explanation.

## Thanks for reading

**Reach out to me on:**

- [Portfolio](https://nasirul-islam.netlify.app/)
- [GitHub](https://github.com/Nasirul-Islam)
- [LinkedIn](https://www.linkedin.com/in/nasirul866/)
Props, PropTypes, JSX
Published: 2021-12-22 09:50:30


Props:
React allows us to pass information to components using things called props (short for properties). Because React comprises several components, props make it possible to share the same data across the components that need them. It makes use of one-directional data flow (parent-to-child components). However, with a callback function, it’s possible to pass props back from a child to a parent component.
These data can come in different forms: numbers, strings, arrays, functions, objects, etc. We can pass props to any component, just as we can declare attributes in any HTML tag. Take a look at the code below:

In this snippet, we are passing a prop named posts to a component named PostList. This prop has a value of {postsList} Let’s break down how to access and pass data.

PropTypes:
PropTypes are a mechanism to ensure that components use the correct data type and pass the right data, and that components use the right type of props, and that receiving components receive the right type of props.

We can think of it like a fruits s being delivered to a fruit store. The pet store doesn’t want pigs, lions, frogs, or geckos — it wants puppies. PropTypes ensure that the correct data type (fruits) is delivered to the pet store, and not some other kind of fruit.

In the section above, we saw how to pass information to any component using props. We passed props directly as an attribute to the component, and we also passed props from outside of the component and used them in that component. But we didn’t check what type of values we are getting in our component through props or that everything still works.

It’s totally upon us whether to validate the data we get in a component through props. But in a complex application, it is always a good practice to validate that data.

JSX:
JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together.
Take a look:
const jsx =

This is JSX
This is simple JSX code in React. But the browser does not understand this JSX because it's not valid JavaScript code. This is because we're assigning an HTML tag to a variable that is not a string but just HTML code.

So to convert it to browser understandable JavaScript code, we use a tool like Babel which is a JavaScript compiler/transpiler.

You can set up your own babel configuration using Webpack as I show in this article. Or you can use create-react-app which internally uses Babel for the JSX to JavaScript conversion.
React context API
Tags: react
Published: 2021-12-22 09:50:14

**Context API** is a new addition of React JS. It's an awesome feature is react. Context API makes the state management system becomes more manageable. Before coming context API, we passed state from one component to another component using props and the way was harder because, in a large application, it will be uncontrollable. Here context API helps us a lot and It is the best way to ignore props drilling. In the context API part, we will learn different purposes of context API and how to create a context, and how to use it.

**Uses of context API and a simple example:**
We can create a context API in four steps,
1. First, we have to create a context using createContext method
2. Then we have to wrap all necessary components using Context.Provider where we want to pass the context value. 
3. Then pass the value using value props inside Context.Provider.
4. Then we can read or use the provided value using Context.Consumer or using useConetxt hook.
**Example:**

```
import React, { createContext, useContext } from 'react';
export const MyContext = createContext();
function App() {
  const name = "Khayrul"
  return (
    <MyContext.Provider value={name}>
      <Author />
    </MyContext.Provider>
  )
}
const Author = () => {
  const value = useContext(MyContext);
  return <h1>{value}</h1>;
}
export default App;
```

**React Context API vs Redux:**
Many people think that, is context PAI replace Redux. The answer is No. Because some of the case context API is helpful and some of the case Redux is not ignorable.

Redux is a complete state management library. Redux is an efficient way to manage the state and in some cases, it is mandatory to use. In a large application, we may have so many states, and managing those states using context API or props drilling is very difficult. Here we should use Redux.
On the other hand, in a small application, using redux is not preferable, and it's one kind of harmful. Because for a simple action we have to write code in three or more files. Here we use context API or props drilling system.
Why is Python One of The Most Versatile and Popular Languages?
Tags: python
Published: 2021-12-22 09:48:13

So, the years go by, but Python stays in the development world's top of the pops. What is the secret of Guido van Rossum's brainchild success? Relatively simple syntax? Extensive toolkit? Or maybe the convenience when developing AI and Machine Learning solutions? Let's figure it out. Read our article "ADVANTAGES OF PYTHON: VERSATILE SOFTWARE DEVELOPMENT TOOL" https://codeit.us/blog/advantages-of-python
Adobe Launch Release Standards
Tags: javascript, adobelaunch, tagging
Published: 2021-12-22 09:31:22


> This post is part of a series about auto-tagging

Adobe Launch release process is by design simple. This simplicity sometimes comes at a cost as quality checks are often missing before code goes to production. You should also have [tagging](https://dev.to/alcazes/adobe-launch-tagging-standards-3aak) and [coding](https://dev.to/alcazes/adobe-launch-coding-standards-e22) standards set up to facilitate the release process.

## Peer review

Adobe Launch publishing process is built in a way that your build should be approved before being pushed to production. During this approval process, you should have one of your tagging peers to review the build and validate that the tagging and coding standards are being followed. 

You should also use a tool like JIRA to document the peer review process and only if an "approved" comment is present should you then release to production.

## Release types

While it is possible to deploy Adobe Launch build when and how you see fit, it is a good idea to understand when the best time is to deploy sensitive changes to the website. This will minimise the impact of any issues.

### Normal release

A normal release will usually contain one or more logic, configuration, and code changes. These changes are the most sensitive. While you would have done the necessary tests on the dev or stage instances, there is always a slim chance that things can go wrong. 

To minimise the impact of any issues you should always deploy in the morning from Monday to Thursday. In the morning because usually this is where the traffic of your site will be low enough. You should avoid releasing on Friday as it is unlikely someone will monitor your changes over the weekend, and you run the risk to introduce an issue over the whole weekend.

### Configuration changes

Usually, configuration changes are minimal and should only have changes related to data elements. Data elements will hold specific logic to return the configuration needed for a marketing pixel to fire correctly.

You should still apply same timeframes as for normal changes unless your campaign goes live later during the day or on a Friday.

### Hotfix changes

There will be times where you tagging build simply breaks something due to your release or the platform release. It has not been caught during testing and every minute you wait costs money.

For hotfixes it is usually accepted to release whenever the fix is ready and tested, may it be day or night, weekday, or weekends.
Clear some react concept
Published: 2021-12-22 09:26:42

## Topic - 1: React PropTypes

Props and PropTypes are two most important concepts in React. Props are used to pass read only data from parent component to child component. If we pass any wrong data as props, it can lead to bugs and unexpected errors in our application. So we should check the prop type to avoid these kinds of bugs. But JavaScript does not provide any built-in type checking facility. That's why many developers use TypeScript for type checking. But React has a built-in props type validation mechanism which is called propTypes.

Before React version 15.5.0 propTypes was a part of the React package. But in the later version of React, we need to add a dependency called prop-types to use PropTypes.



## Topic - 2: JSX

JSX stands for JavaScript syntax extension. It’s a syntax extension to JavaScript that helps us to write HTML code in JavaScript. Instead of putting JavaScript into HTML, JSX allows us to put HTML in JavaScript.
If a JavaScript contains JSX, that file needs to be translated into regular JavaScript before the file gets to the browser. So before sending the code to the browser, a transpiler like Babel will translate the HTML code into regular JavaScript code.


## Topic - 3: Component Life Cycle

Every React component goes through a cycle of life. Lifecycle of a component are some series of methods that are invoked in different stages of the component’s life. A React component goes through three stages of its life - 
Mount : Creation or birth of a component.
Update :  Change or growth of a component.
Un-mount : Removed or death of a component.


## Topic - 4: React Hooks

Hooks are a new feature introduced in React 16.8. It allows us to use state and other React features in a functional component, which was not possible before React 16.8. Hooks are actually some functions that are hooked into React features like state and lifecycle methods. Hooks cannot be used in class components.


## Topic - 5: React Virtual DOM

A virtual DOM is a representation or copy of a real DOM. For every DOM object React creates a virtual DOM. So, whenever we make any changes to the code, React will compare the virtual DOM with the Real DOM and it will re-render only the modified DOM element.
Free Fire React JS Concepts 
Tags: beginners, react, javascript, programming
Published: 2021-12-22 09:21:52

Hello Everyone, Today We Will Discuss About SOME React JS Concepts. We Have a Perfect Name For This BLOG, Which is called, Free Fire React JS Concepts. Sound Cools. Because There Are Lot Of GAMERS, I Know BUT, Today Topic is not Gaming, Something Crazy. Because We Will Clear Some Concepts Here. **Let's Start**,

---

### ReactJS
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tepvfvvamp0dl0t2svf4.png)
React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. 
Today, ReactJS is the highly used open-source JavaScript Library.  And It’s Easy to Learn and Use, Creating Dynamic Web Applications Becomes Easier, Reusable Components, Performance Enhancement And Everything Has some disadvantages also, Like Poor Documentation, the high pace of development, JSX as a barrier. I Choose ReactJS For My Application Because, As You See in the advantages, And Also React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple.


---

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

JSX stands for JavaScript XML. It allows us to directly write HTML in React (within JavaScript code). Basically, by using JSX you can write concise HTML/XML-like structures in the same file as you write JavaScript code, then Babel will transform these expressions into actual JavaScript code.

---

### Virtual Dom
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjvo1gi1dkf444u62dv8.png)
 
A virtual DOM is a lightweight JavaScript representation of the DOM used in declarative web frameworks such as React JS. DOM stands for 'Document Object Model'. In simple terms, it is a structured representation of the HTML elements that are present in a webpage or web-app.

---

### React different from Angular
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjcpoxi2pwazibxms4iz.png)
 
ReactJS is a Server-side rendering And Angular is a Client Side Rendering. React uses Virtual DOM And Angular Uses Real DOM. React is one way data binding And Angular is a two way data binding.  

---

### Redux & Uses
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hcslgel1jcturlkhqn3.png)
 
Redux is a predictable state container for JavaScript apps. Redux helps us to write applications that behave consistently. And run in client, server, and native environments, and It’s easy to test. I can use Redux with ReactJS.

---

### Optimize ReactJS
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohf0lp1xjsqjdebrpano.png)
 
There are lots of ways to get high performance, You can Optimize Your Dependency, Use React.Fragments For to Avoid Additional HTML Element Wrappers, Avoid Inline Function Definition in the Render Function. Avoiding Props in Initial States, etc.