teleren/devto huggingface dataset:
Difference between var, let and const
Tags: javascript, variables, let, const
Published: 2021-11-09 17:16:48

The word var, let and const are keywords for declaring JavaScript variables. Var is an earliest way for declaring variables and still in use by many while let and const is a modern way of declaring variables but there is a difference in using any of them. I will use JavaScript block scope to explain them.

VAR: When a variable is declared using the keyword 'var', it does not follow JavaScript block scope.

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

From the code base above, you will observe that the program ran because the keyword "var" does not obey JavaScript block scope. The program was able to compile the global variables which are age = 45, name = 'Malush' and address = '23' despite that the variable 'address' was in a local scope.

LET and CONST: Unlike the 'var' keyword, the 'let' and 'const' obeys JavaScript block scope therefore making the program to fail and throw a ReferenceError of "address is not defined".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66a14pn8m3v5rd96kui4.PNG)

This error just as it were above shows that the variable address declared with the keyword 'let' could not be reached because the variable address was declared within a local scope.

In summary, variable declared with "var" are exposed globally irrespective of its local block, "let" is used to declare a variable which can change at anytime and "const" is used to declare a variable which you don't want to change in the course of that program.

If this was educating please drop a comment and follow me on twitter: https://twitter.com/callmefarad
Weekly Challenge 138
Tags: perl, theweeklychallenge
Published: 2021-11-09 17:12:08

[Challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-138/), [My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-138/sgreen)

## TASK #1 › Workdays

### Task

You are given a year, `$year` in 4-digits form. Write a script to calculate the total number of workdays in the given year. For the task, we consider Monday - Friday as workdays.

### My solution

This expands on last weeks task. Unlike last week, I'm taking a short cut by using the excellent [Date::Calc](https://metacpan.org/pod/Date::Calc) module to calculate the day of week of January 1st, and whether it is a leap year.

With those two pieces of information, we can deduce the following facts (for all years [after 1752](https://familyhistorydaily.com/genealogy-help-and-how-to/1752-calendar-change/)):

* January 1st to December 30th (or 29th in a leap year) will always be exactly 260 work days (52 weeks × 5 days).
* December 31st (or 30th in a leap year) will be the same day of week as January 1st. Therefore is January 1st is a work day, we add one more work day for the 31st (or 30th in a leap year).
* In a leap year, December 31st will be the day of week after January 1st. If January 1st is not a Friday or Saturday (meaning December 31st is not a Saturday or Sunday), we add an additional work day for December 31st.

### Examples

```
 ./ch-1.pl 2020
262

$ ./ch-1.pl 2021
261
```

## TASK #2 › Split Number

### Task

You are given a perfect square.

Write a script to figure out if the square root the given number is same as sum of 2 or more splits of the given number.

### My solution

I had two cracks at this as my first method worked in my head, but was harder to implement. It involved using a binary operator to decide whether to join two digits or put a plus sign in between them (thus resulting in 2<sup>length($n)</sup>-1 permutations).

In the end I went to use a recursive function, as I often do with these tasks. Like usual, I'll be interested to see how other Team PWC members tackled this challenge.

My recursive function is called `_can_split` and takes three values:

1. The target we are trying to reach (the square root of the input)
1. The numbers we have used so far (an array)
1. The pool of digits remaining (starts with the provided number)

For each iteration, we take from 1 to the length of the pool digits from the pool and place them in an array, and call the subroutine again with the new remaining value. The exception is the first value, where we won't check the possibility of not splitting the numbers. This is because the task states that the number must be split two or more times.

### Examples

```
$ ./ch-2.pl 81
1

$ ./ch-2.pl 9801
1

$ ./ch-2.pl 36
0

$ ./ch-2.pl 1
0

```
React: Pass a Callback as Props
Tags: react, devops, beginners, javascript
Published: 2021-11-09 17:08:01

* You can also pass handler functions or any method that's defined on a React component to a child component. This is how you allow child components to interact with their parent components. You pass methods to a child just like a regular prop. It's assigned a name and you have access to that method name under `this.props` in the child component.
* Below there are three components outlined in the code editor. The `MyApp` component is the parent that will render the `GetInput` and `RenderInput` child components. 
```React
class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
        { /* Change code below this line */ }

        { /* Change code above this line */ }
       </div>
    );
  }
};

class GetInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Get Input:</h3>
        <input
          value={this.props.input}
          onChange={this.props.handleChange}/>
      </div>
    );
  }
};

class RenderInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Input Render:</h3>
        <p>{this.props.input}</p>
      </div>
    );
  }
};
```
* What they want us to do is add the `GetInput` component to the render method in `MyApp`s `state`. Also create a prop called `handleChange` and pass the input handler `handleChange` to it. Next, add `RenderInput` to the render method in `MyApp`, then create a prop called `input` and pass the `inputValue` from `state` to it. Once you are finished you will be able to type in the `input` field in the `GetInput` component, which then calls the handler method in its parent via props. This updates the input in the `state` of the parent, which is passed as props to both children. 

* Answer:

```React
class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
        <GetInput handleChange = {this.handleChange} input = {this.state.inputValue} />
        <RenderInput input = {this.state.inputValue}/>
       </div>
    );
  }
};
```
React: Creating a Controlled Input
Tags: react, javascript, devops, beginners
Published: 2021-11-09 16:06:25

* Our application may have more complex intteractions between state and the rendered UI. Ex, form control elements for text input such as input and textarea, maintain their own state in the DOM as the user types. With React, we can move this mutable state into React Component's state. The user's input becomes part of the application state, so React controls the value of that input field. Usually will be a controlled input form.
* FreeCodeCamp provided us with the code Editor which looks like this right now.
```React
class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // Change code below this line

    // Change code above this line
  }
  // Change code below this line

  // Change code above this line
  render() {
    return (
      <div>
        { /* Change code below this line */}

        { /* Change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};
```
* There's a skeleton of a component called `ControlledInput` to create a controlled `input` element. Component's `state` as a input property with a empty string. That value represents the text a user types into the `input` field.
* First they want us to create a method called `handleChange()` that has a parameter called `event`. When it's called it receives an `event` object that contains a string of text from `input` element. We can access this sting with `event.target.value` inside the method.
* Second in the `render` method, let's create the `input` element added a `value` attribute which is equal to the `input` property of the component's `state`. Then add an `onChange()` event handler set to the `handleChange()` method.
* Answer:
```React
class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    })

  }

  render() {
    return (
      <div>
        <input value = {this.state.input} onChange = {this.handleChange}></input>
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};
```
* What will happen is when you type in the `input` box, that text is processed by the `handleChange()` method, set as the `input` property in the local `state`. and rendered as the value in the `input` box on the page.
1 line of code: How to get every odd item of an Array
Tags: javascript, webdev, performance, codequality
Published: 2021-11-09 16:39:30

```javascript
const oddItems = arr => arr.filter((_, i) => i & 1 === 1);
```
Returns an array which contains every odd (second) item of the original array.

---

## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---
React: Pass State as Props to Child Components
Tags: react, javascript, devops, beginners
Published: 2021-11-09 16:37:29

* A great thing about FreeCodeCamp aside from it being free it gives you like a great introduction to many different areas. In this case we're working on React. Here For example, The `MyApp` component is stateful and renders a `Navbar` component as a child. We have to pass the `name `property in its `state` down to the child component, then show the `name` in the `h1` tag that's part of the `Navbar` render method. `name` should appear after the text `Hello, my name is:`.

* Ex:
```React
class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'CamperBot'
    }
  }
  render() {
    return (
       <div>
         {/* Change code below this line */}
         <Navbar name = {this.state.name}/>
         {/* Change code above this line */}
       </div>
    );
  }
};

class Navbar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
    <div>
      {/* Change code below this line */}
      <h1>Hello, my name is: {this.props.name}</h1>
      {/* Change code above this line */}
    </div>
    );
  }
};
```

####Notes:
* About React, there's an important pattern to it. The first is unidirectional data flow.
* State flows in one direction down the tree of your application's components, from the stateful parent component to child components. The child components only receive the state data they need. 
* The second is that complex stateful apps can be broken down into just a few, or maybe a single, stateful component. The rest of your components simply receive state from the parent as props, and render a UI from that state. 

Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/react
MACHINE LEARNING
Tags: tutorial
Published: 2021-11-09 16:36:14

Machine learning (ML) is the study of computer algorithms that can improve automatically through experience and by the use of data.[1] It is seen as a part of artificial intelligence. Machine learning algorithms build a model based on sample data, known as training data, in order to make predictions or decisions without being explicitly programmed to do so. Machine learning algorithms are used in a wide variety of applications, such as in medicine, email filtering, speech recognition, and computer vision, where it is difficult or unfeasible to develop conventional algorithms to perform the needed tasks.

A subset of machine learning is closely related to computational statistics, which focuses on making predictions using computers; but not all machine learning is statistical learning. The study of mathematical optimization delivers methods, theory and application domains to the field of machine learning. Data mining is a related field of study, focusing on exploratory data analysis through unsupervised learning. Some implementations of machine learning use data and neural networks in a way that mimics the working of a biological brain. In its application across business problems, machine learning is also referred to as predictive analytics.
Machine learning (ML), reorganized as a separate field, started to flourish in the 1990s. The field changed its goal from achieving artificial intelligence to tackling solvable problems of a practical nature. It shifted focus away from the symbolic approaches it had inherited from AI, and toward methods and models borrowed from statistics and probability theory.

Classification:-
Classification, also known as categorization, is a machine learning technique that uses known data to determine how the new data should be classified into a set of existing categories. Classification is a form of supervised learning.

Mail service providers such as Yahoo! and Gmail use this technique to decide whether a new mail should be classified as a spam. The categorization algorithm trains itself by analyzing user habits of marking certain mails as spams. Based on that, the classifier decides whether a future mail should be deposited in your inbox or in the spams folder.

iTunes application uses classification to prepare playlists.
Ocean cleaning game with JavaScript
Tags: javascript, opensource, gamedev, programming
Published: 2021-11-09 16:35:12

Let's simulate ocean cleaning using JavaScript and Three JS
[![Ocean cleaning game preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7acxe9enjpvjp42lzml.png)](https://ocean-cleaner.netlify.app/)
 
After [#TeamTrees](https://teamtrees.org/) MrBeast, Mark Rober have took the initiative to clean oceans and created [#TeamsSeas](https://teamseas.org/). We estimate to clean 30Million pounds of trash from ocean by the end of 2021. And for each $1 donation, one pound of trash will be removed from the Ocean. So go to [teamseas.org](https://teamseas.org/) donate what ever amount you can.

Inspired by this I have created this game using JavaScript.
## You can [Play It Here](https://ocean-cleaner.netlify.app/) (*models take some time to load*)
## Here is the Github repo [for the codes](https://github.com/0shuvo0/ocean-cleaner)
## Also watch the tutorial on how to create this game
{% youtube JdkHeQojLr0 %}

Make sure you checkout my other articles and YouTube channel
{% user 0shuvo0 %}
## Was it helpful? Support me on Patreon
[![Patreon Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vnw8g7vs5pok3jwgtgv.png)](https://www.patreon.com/0shuvo0)
sadfasdf
Published: 2021-11-09 16:26:32

* FreeCodeCamp in our last challenge showed us that React can control the internal state for certain elements like input and textarea, which makes them controlled components. This applies to other forms elements as well including the regular HTML form element.
* Here `MyForm` component is set up with an empty `form`. As you can see it has the `type` set to `submit` indicating it is the button controlling the form. They want us to add the `input` element in the `form` and set its `value` and `onChange()` attributes like the last post.

```React
class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    // Change code below this line

    // Change code above this line
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          {/* Change code below this line */}

          {/* Change code above this line */}
          <button type='submit'>Submit!</button>
        </form>
        {/* Change code below this line */}

        {/* Change code above this line */}
      </div>
    );
  }
}
```

* We should also call `event.preventDefault()` in the submit handler, to prevent default form submit behavior which will refresh the web page.
* Lastly they want us to create an `h1` tag after the `form` which renders the `submit` value from the component's `state`. 

* Answer:
```React
class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    event.preventDefault()
    this.setState({
      submit: this.state.input
    })
  
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input value = {this.state.input} onChange = {this.handleChange}/>
          <button type='submit'>Submit!</button>
        </form>
        <h1>{this.state.submit}</h1>
      </div>
    );
  }
}
```
The Human Body and HTML, CSS & JS
Tags: html, css, javascript, webdev
Published: 2021-11-09 16:16:25

Wait, what? 

Yes, exactly. Hear me out. 

Believe it or not, The Human Body is synonymous to any application built with HTML, CSS & JS. And here's why:

1. HTML is synonymous to the skeletal system in our body. One HTML tag out of place and the entire system can break.

2. CSS is synonymous to the way we appear. The muscles and fats around our bones gives a structure that everyone identifies with. Muscles are the good css and Fats are the bad css. Why? 🤣 Muscles make us look good while excess fat would make us look bad.

3. JS is synonymous to the nervous system. It is responsible for observing the events and having callbacks for such events. Similar to the action reaction response by our nervous system.

4. Extending it over HTML, CSS & JS. React can be considered as transplants. If you could have someone's healthy heart, assuming yours is bad, how awesome would it be. No harm intended.

I'll add to this list as I think more about it 😄

Until next time... 



PS: This is light interpretation and is not meant to be taken seriously.

Feel free to post your interpretations that could be drawn from the above. Would love to read them 😁 Maybe I would update them as well 😉
DevOps League upcoming Terraform workshop
Tags: terraform, devops, terragrunt
Published: 2021-11-09 16:14:44

Hello all!

Last year we decided to open our internal DevOps workshops to everyone and we had our first DevOps League event, which was a big success (unfortunately it was in Greek, but still a big success!)

This time around we decided to go global (all presentations will be in English), go bigger (4 different companies will participate) and explore the exciting ecosystem of Terraform in a ~5h event. We'll start small with the foundations and work ourselves to the top in terms of complexity and best practises.

If you want to join us at the 22th of November, feel free to register at https://globalwebindex.zoom.us/webinar/register/1716364742396/WN_SgkXTQZdSlmM5R50295S-A or spread the word if you know anyone who might be interested. Attendance is free, and the whole event is a labor of love from various DevOps in different companies.
Roadmap to Master Javascript
Tags: javascript, html, css, programming
Published: 2021-11-09 16:14:17

I always wonder what it looks like to be a Javascript Master, well, I am still not a Master in Javascript 😅. Today, I will be sharing with you all, the way which I use to learn Javascript and learn it effectively.So, Let's start with the List. 
![Lets begin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0seyd7cwudo1w7t048u.gif)
## Here Comes the List 🔥
1. __HTML/CSS__ :- Syntax, Structure, Responsive Design, Bootstrap
2. __Javascript__ :- Syntax, Data Types, Methods, Arrays, Objects, AJAX and DOM
3. __Essentials__ :- Responsive Page Layouts and Menus, UI Components, Form Manipulation (Login, Register)
4. __Advanced javascript__ :- Scopes, Closures, Promises, ES6, Arrow Functions, IIFEs, OOP
5. __Third Party Libraries__ :- NPM, Grunt, Rxjs, Lodash, UnderScore, Moment, D3, Chartjs
6. __More Essentials__ :- Data Manipulation and Representation, Async Operations, Search Functionality, Service Intergration
7. __Frameworks__ :- Vue, React, Angular
8. __Server__ :- NodeJs, ExpressJs
9. __Mobile__ :- React Native, Ionic

Everything depends on your needs and what you want to achieve. Learn according to your needs and Projects. 

Feels free to write any suggestions / Comments. I appreciate your concerns. 😇