DEV Community: Arman

Notice

Arman — Tue, 01 Jun 2021 03:19:31 +0000

To All employees
From Desiree Yeung
Date Oct. 27, 2030
Subject Annual Physical Exam

Please note that the annual physical exam will be held inside the company office instead of a satellite clinic. This is to ensure the safety and security of everyone in Quicklight Pharmaceuticals.

Services will start at 7 AM. Please bring both HMO and company ID and fill up the digital registration form that will be sent to your email accounts.

189 49th Avenue
Grise Fiord, NU X0A 0J0
www.reallygreatsite.com
(098) 765-4321

official Notice

Arman — Tue, 01 Jun 2021 03:15:04 +0000

To Marketing Staff
From Desiree Yeung
Date Oct. 27, 2030
Subject Social Media Branding

The company has gone through significant growth in the past few months. As such, a few of our campaigns for the upcoming year needs to be reviewed and re-aligned.

One area that we want to focus on is the company's social media branding. While we have a strong following and a distinct brand identity, we want to be able to grow that and stay relevant for far longer.

The meeting with the marketing staff aims to hear ideas and suggestions on how we can move to this direction.

The meeting will be on November 5, 10 AM, Seelie Hall.
`

DLY Urban Club
123 Anywhere St., Any City ST 12345
hello@reallygreatsite.com

Memo

Arman — Tue, 01 Jun 2021 03:09:15 +0000

To All employees
From Ndemi Otieno
Date 23 November 2030
Subject Bank account change

Team,

Please be informed that the company will be changing its bank from Golden Ore Bank to Zenith Central Bank.

You will receive an email from finance within the week to facilitate this change. Please fill out the forms before 25 November 2030 so we can process the application for you. Any submission after that will have to be facilitated by the employee personally.

Please don't hesitate to reach out if you have any questions.

Sincerely,

Ndemi Otieno
Head of Human Resources

                                            2507 Snowbird Lane
                                            Bellevue, NE 68005
                                       www.reallygreatsite.com

Official Memo

Arman — Tue, 01 Jun 2021 03:03:46 +0000

TO UX/UI Team
From Cia Rodriguez
Date November 28, 2020
Subject Updated Work from Home Guidelines

Due to the increasing number of infected cases in the city, we are extending our Work from Home setup until further notice.

Please reach out to our office facilities if you need any of equipment from the office. We can arrange a delivery for you in the soonest possible time.

We are on flexi-time, but please ensure you are online and on time for meetings. Coordinate with your teams to create timelines especially if you have projects that are urgent.

We are here for you. Stay safe.

JavaScript Keys

Arman — Sun, 09 May 2021 05:12:32 +0000

What is JavaScript?

JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.

let x;
x = 1;   // x is a number
x = '1'; // x is a string
x = [1]; // x is an array

Seemingly different values equate to true when compared with == (loose or abstract equality) because JavaScript (effectively) converts each to a string representation before comparison:

// all true
1 == '1';
1 == [1];
'1' == [1];

A more obvious false result occurs when comparing with === (strict equality) because the type is considered:

// all false
1 === '1';
1 === [1];
'1' === [1];

Internally, JavaScript sets a value to one of six primitive data types:

Undefined (a variable with no defined value)
Null (a single null value)
Boolean (true or false)
Number (this includes Infinity and NaN – not a number!)
String (textual data)
Symbol (a unique and immutable primitive new to ES6/2015)

Everything else is an Object — including arrays.

Truthy and Falsy

As well as a type, each value also has an inherent boolean value, generally known as either truthy or falsy. Some of the rules are a little bizarre so understanding the concepts and effect on comparison helps when debugging JavaScript applications.

The following values are always falsy:

false
0 (zero)
'' or "" (empty string)
null
undefined
NaN

Everything else is truthy. That includes:

'0' (a string containing a single zero)
'false' (a string containing the text “false”)
[] (an empty array)
{} (an empty object)
function(){} (an “empty” function)

A single value can therefore be used within conditions, e.g.

if (value) {
  // value is truthy
}
else {
  // value is falsy
  // it could be false, 0, '', null, undefined or NaN
}

Loose Equality Comparisons With `==`

The rules:

false, zero and empty strings are all equivalent.
null and undefined are equivalent to themselves and each other but nothing else.
NaN is not equivalent to anything – including another NaN!
Infinity is truthy – but cannot be compared to true or false!
An empty array is truthy – yet comparing with true is false and comparing with false is true?!

Example:

// all true
false == 0;
0 == '';
null == undefined;
[] == false;
!![0] == true;

// all false
false == null;
NaN == NaN;
Infinity == true;
[] == true;
[0] == true;

Strict Equality Comparisons With `===`

The situation is clearer when using a strict comparison because the value types must match:

The only exception is NaN which remains stubbornly inequivalent to everything.

Recommendations

Truthy and falsy values can catch out the most experienced developers. Those new to programming or migrating from other languages have no chance! Fortunately, there are simple steps to catch the most difficult-to-spot errors when handling truthy and falsy variables:

1. Avoid direct comparisons

It’s rarely necessary to compare two truthy and falsy values when a single value will always equate to true or false:

// instead of
if (x == false) // ...
// runs if x is false, 0, '', or []

// use
if (!x) // ...
// runs if x is false, 0, '', NaN, null or undefined

2. Use `===` strict equality

Use a === strict equality (or !== strict inequality) comparisons to compare values and avoid type conversion issues:

// instead of
if (x == y) // ...
// runs if x and y are both truthy or both falsy
// e.g. x = null and y = undefined

// use
if (x === y) // ...
// runs if x and y are identical...
// except when both are NaN

What is Scope?

Scope determines the visibility or accessibility of a variable or other resource in the area of your code.

Global Scope

There's only one Global scope in the JavaScript document. The area outside all the functions is consider the global scope and the variables defined inside the global scope can be accessed and altered in any other scopes.

//global scope
var fruit = 'apple'
console.log(fruit);        //apple

function getFruit(){
    console.log(fruit);    //fruit is accessible here
}

getFruit();                //apple

Local Scope

Variables declared inside the functions become Local to the function and are considered in the corresponding local scope. Every Functions has its own scope. Same variable can be used in different functions because they are bound to the respective functions and are not mutual visible.

//global scope
function foo1(){
    //local scope 1
    function foo2(){
        //local scope 2
    }
}

//global scope
function foo3(){
    //local scope 3
}

//global scope

Local scope can be divided into function scope and block scope. The concept of block scope is introduced in ECMA script 6 (ES6) together with the new ways to declare variables -- const and let.

Function Scope

Whenever you declare a variable in a function, the variable is visible only within the function. You can't access it outside the function. var is the keyword to define variable for a function-scope accessibility.

function foo(){
    var fruit ='apple';
    console.log('inside function: ',fruit);
}

foo();                    //inside function: apple
console.log(fruit);       //error: fruit is not defined

Block Scope

A block scope is the area within if, switch conditions or for and while loops. Generally speaking, whenever you see {curly brackets}, it is a block. In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block.

function foo(){
    if(true){
        var fruit1 = 'apple';        //exist in function scope
        const fruit2 = 'banana';     //exist in block scope
        let fruit3 = 'strawberry';   //exist in block scope

    }
    console.log(fruit1);
    console.log(fruit2);
    console.log(fruit3);
}

foo();
//result:
//apple
//error: fruit2 is not defined
//error: fruit3 is not defined

Lexical Scope

Another point to mention is the lexical scope. Lexical scope means the children scope have the access to the variables defined in the parent scope. The children functions are lexically bound to the execution context of their parents.

function foo1(){
    var fruit1 = 'apple';        
    const fruit2 = 'banana';     
    let fruit3 = 'strawberry';
    function foo2(){
        console.log(fruit1);
        console.log(fruit2);
        console.log(fruit3);
    }
    foo2();
}

foo1();

//result:
//apple
//banana
//strawberry

JavaScript Overview

Arman — Sun, 09 May 2021 04:43:07 +0000

What is JavaScript?

Javascript History

JavaScript was developed by Brendan Eich in 1995, which appeared in Netscape, a popular browser of that time.
The language was initially called LiveScript and was later renamed JavaScript. There are many programmers who think that JavaScript and Java are the same. In fact, JavaScript and Java are very much unrelated. Java is a very complex programming language whereas JavaScript is only a scripting language. The syntax of JavaScript is mostly influenced by the programming language C.

How to Run JavaScript?

Being a scripting language, JavaScript cannot run on its own. In fact, the browser is responsible for running JavaScript code. When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it is up to the browser to execute it. The main advantage of JavaScript is that all modern web browsers support JavaScript. So, you do not have to worry about whether your site visitor uses Internet Explorer, Google Chrome, Firefox or any other browser. JavaScript will be supported. Also, JavaScript runs on any operating system including Windows, Linux or Mac. Thus, JavaScript overcomes the main disadvantages of VBScript (Now deprecated) which is limited to just IE and Windows.

Tools You Need

To start with, you need a text editor to write your code and a browser to display the web pages you develop. You can use a text editor of your choice including Notepad++, Visual Studio Code, Sublime Text, Atom or any other text editor you are comfortable with. You can use any web browser including Google Chrome, Firefox, Microsoft Edge, Internet Explorer etc.

A Simple JavaScript Program

You should place all your JavaScript code within tags (<script> and ) if you are keeping your JavaScript code within the HTML document itself. This helps your browser distinguish your JavaScript code from the rest of the code. As there are other client-side scripting languages (Example: VBScript), it is highly recommended that you specify the scripting language you use. We have to use the type attribute within the <script> tag and set its value to text or javascript like this

<script type="text/javascript>

Hello World Example:

<html>
<head>
    <title>My First JavaScript code!!!</title>
    <script type="text/javascript">
        alert("Hello World!");
    </script>
</head>
<body>
</body>
</html>

Note: type="text/javascript" is not necessary in HTML5. Following code will work.

<html>
<head>
    <title>My First JavaScript code!!!</title>
    <script>
        alert("Hello World!");
    </script>
</head>
<body>
</body>
</html>

Assign a Value to the Variable

You can assign a value to the variable either while declaring the variable or after declaring the variable.

var name = "John";

var name;

name = "John";

Naming Variables

<html>
<head>
<title>Variables!!!</title>
<script type="text/javascript">
var one = 22;
var two = 3;
var add = one + two;
var minus = one - two;
var multiply = one * two;
var divide = one/two;
    document.write("First No: = " + one + "<br />Second No: = " + two + " <br />");
    document.write(one + " + " + two + " = " + add + "<br/>");
    document.write(one + " - " + two + " = " + minus + "<br/>");
    document.write(one + " * " + two + " = " + multiply + "<br/>");
    document.write(one + " / " + two + " = " + divide + "<br/>");
</script>
</head>
<body>
</body>
</html>

JavaScript Array Methods

The Array object has many properties and methods which help developers to handle arrays easily and efficiently. You can get the value of a property by specifying arrayname.property and the output of a method by specifying arrayname.method().

length property --> If you want to know the number of elements in an array, you can use the length property.
prototype property --> If you want to add new properties and methods, you can use the prototype property.
reverse method --> You can reverse the order of items in an array using a reverse method.
sort method --> You can sort the items in an array using sort method.
pop method --> You can remove the last item of an array using a pop method.
shift method --> You can remove the first item of an array using shift method.
push method --> You can add a value as the last item of the array.

<html>
<head>
    <title>Arrays!!!</title>
    <script type="text/javascript">
        var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
        Array.prototype.displayItems=function(){
            for (i=0;i<this.length;i++){
                document.write(this[i] + "<br />");
            }
        }   
        document.write("students array<br />");
        students.displayItems();
        document.write("<br />The number of items in students array is " + students.length + "<br />");
        document.write("<br />The SORTED students array<br />");
        students.sort();
        students.displayItems();
        document.write("<br />The REVERSED students array<br />");
        students.reverse();
        students.displayItems();
        document.write("<br />THE students array after REMOVING the LAST item<br />");
        students.pop();
        students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
        students.displayItems();
    </script>
</head>
<body>
</body>
</html>

React Overview

Arman — Fri, 07 May 2021 09:12:10 +0000

What Is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

React has a few different kinds of components, but we’ll start with React.Component subclasses:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

We’ll get to the funny XML-like tags soon. We use components to tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components.

Here, ShoppingList is a React component class, or React component type. A component takes in parameters, called props (short for “properties”), and returns a hierarchy of views to display via the render method.

Adding React to an HTML Page

This quickstart tutorial will add React to a page like this:

<!DOCTYPE html>
<html lang="en">
<title>Test React</title>

<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load Babel Compiler -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<body>

<script type="text/babel">
    //  JSX Babel code goes here
</script>

</body>
</html>

What is Babel?

Babel is a JavaScript compiler that can translate markup or programming languages into JavaScript.

With Babel, we can use the newest features of JavaScript (ES6 - ECMAScript 2015).

Babel is available for different conversions. React uses Babel to convert JSX into JavaScript.

Please note that <script type="text/babel"> is needed for using Babel.

What is JSX?

JSX stands for JavaScript XML.

JSX is an XML/HTML like extension to JavaScript.

const element = <h1>Hello World!</h1>

As you can see above, JSX is not JavaScript nor HTML.

JSX is a XML syntax extension to JavaScript that also comes with the full power of ES6 (ECMAScript 2015).

Just like HTML, JSX tags can have a tag names, attributes, and children. If an attribute is wrapped in curly braces, the value is a JavaScript expression.

Note that JSX does not use quotes around the HTML text string.

React DOM Render:

The method ReactDom.render() is used to render (display) HTML elements:

<div id="id01">Hello World!</div>

<script type="text/babel">
ReactDOM.render(
    <h1>Hello React!</h1>,
    document.getElementById('id01'));
</script>

JSX Expressions:

Expressions can be used in JSX by wrapping them in curly {} braces.

<div id="id01">Hello World!</div>

<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
    <h1>Hello {name}!</h1>,
    document.getElementById('id01'));
</script>

React Elements

React applications are usually built around a single HTML element.

React developers often call this the root node (root element):
<div id="root"></div>

React elements look like this:
const element = <h1>Hello React!</h1>
Elements are rendered (displayed) with the ReactDOM.render() method:
ReactDOM.render(element, document.getElementById('root'));

React elements are immutable. They cannot be changed.

The only way to change a React element is to render a new element every time:

function tick() {
    const element = (<h1>{new Date().toLocaleTimeString()}</h1>);
    ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);

React Components

React components are JavaScript functions.

This example creates a React component named "Welcome":

function Welcome() {
    return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));

React can also use ES6 classes to create components.

This example creates a React component named Welcome with a render method:

class Welcome extends React.Component {
    render() { return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />, document.getElementById('root'));

React Component Properties

This example creates a React component named "Welcome" with property arguments:

function Welcome(props) {
    return <h1>Hello {props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>, document.getElementById('root'));

React can also use ES6 classes to create components.

This example also creates a React component named "Welcome" with property arguments:

class Welcome extends React.Component {
    render() { return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome name="John Doe"/>, document.getElementById('root'));

JSX Compiler

The examples on this page compiles JSX in the browser.
For production code, the compilation should be done separately.

Create React Application

Facebook has created a Create React Application with everything you need to build a React app.

It is a a development server that uses Webpack to compile React, JSX, and ES6, auto-prefix CSS files.

The Create React App uses ESLint to test and warn about mistakes in the code.

To create a Create React App run the following code on your terminal:

npx create-react-app react-tutorial

Make sure you have Node.js 5.2 or higher. Otherwise you must install npx:

npm i npx

Start one folder up from where you want your application to stay:

C:\Users\myUser>npx create-react-app react-tutorial

Success Result:

npx: installed 63 in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
+ react-dom@16.5.2
+ react@16.5.2
+ react-scripts@2.0.4
added 1732 packages from 664 contributors and audited 31900 packages in 355.501s
found 0 vulnerabilities+ react@16.5.2

Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!

We suggest that you begin by typing:

cd react-tutorial
npm start

DEV Community: Arman

Notice

official Notice

Memo

Official Memo

JavaScript Keys

What is JavaScript?

Truthy and Falsy

Loose Equality Comparisons With ==

Strict Equality Comparisons With ===

Recommendations

1. Avoid direct comparisons

2. Use === strict equality

What is Scope?

Global Scope

Local Scope

Function Scope

Block Scope

Lexical Scope

JavaScript Overview

What is JavaScript?

Javascript History

How to Run JavaScript?

Tools You Need

A Simple JavaScript Program

Hello World Example:

Assign a Value to the Variable

Naming Variables

JavaScript Array Methods

React Overview

What Is React?

Adding React to an HTML Page

What is Babel?

What is JSX?

React DOM Render:

JSX Expressions:

React Elements

React Components

React Component Properties

JSX Compiler

Create React Application

Success Result:

Loose Equality Comparisons With `==`

Strict Equality Comparisons With `===`

2. Use `===` strict equality