DEV Community: bricourse

Most Successful Developers use Python Virtual Environments. Do you know how ?

bricourse — Fri, 12 Mar 2021 07:41:07 +0000

Virtual environments are key to safely tinkering with different versions of Python and combinations of packages

For some time, Python has included support for managing virtual environments. Python 3.3 even added the built-in venv module for creating environments without third-party libraries. Python programmers use several different tools to manage their environments, and the one I use is called **virtualenvwrapper**.

Virtual environments are a way of separating your Python project and its dependencies from your system-installed Python. If you use a macOS or Linux-based operating system, it very likely comes with a version of Python as part of the installation, and in fact, it will probably be dependent on that particular version of Python to function properly. But it’s your computer, and you may want to use it for your own purposes. You may need to install another version of Python than the operating system provides. You may need to install some additional libraries, too. Although it’s possible to upgrade your system Python, it’s not recommended. It’s also possible to install other libraries, but you must take care not to interfere with anything the system relies on.

It’s useful to verify your own state of affairs when it comes to the python and pip commands before starting to use virtual environments. More information about your pip instances can be found by running the command pip debug or pip3 debug.

The equivalent information on my Linux computer, which runs Ubuntu, is almost identical (except that it’s Python 3.8); and it’s very similar on my Macbook, except that the only system Python is 2.6, and I used brew to install Python 3.8, so it's located at /usr/local/bin/python3 instead (along with pip3).

Get the book: Learning Python Flask for Beginners

Installing virtualenvwrapper

You’ll need to install virtualenvwrapper using your system pip for Python 3:

**sudo pip3 install virtualenvwrapper**

The next step is to configure your shell to load the virtualenvwrapper commands. You do this by editing your shell’s RC file (e.g. .bashrc, .bash_profile, or .zshrc) and adding the following lines:

**export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
export VIRTUALENVWRAPPER_VIRTUALENV=/usr/local/bin/virtualenv
source /usr/local/bin/virtualenvwrapper.sh**

If your Python 3 is located elsewhere, change the first line according to your setup.

Close your terminal and reopen it for this to take effect. The first time you open the terminal, you should see some output from virtualenvwrapper. This will only happen once, as some directories are created as part of the setup.

Now you should be able to type the command mkvirtualenv --version to verify that virtualenvwrapper is installed.

Creating a new virtual environment

Say you’re working on a project called flashylights. To create a virtual environment with this name, run the command:

**mkvirtualenv flashylights**

The environment has been created and activated, so you’ll see that (flashlylights) appears before your prompt:

Now that the environment is activated, things have changed. The python now points at a completely different Python instance than the one(s) you identified on your system earlier. It's created a directory for your environment and placed a copy of the Python 3 binary, the pip command, and more inside it. Type which python and which pip to see where they're located:

If you run a Python program now, you can run it with python instead of python3, and you can use pip instead of pip3. Any packages you install using pip will be installed within this environment alone, and they will not interfere with your other projects, other environments, or your system installation.

To deactivate the environment, run the command deactivate. To re-enable it, run workon flashylights.

You can list all available environments with workon or use lsvirtualenv. You can delete an environment with rmvirtualenv flashylights.

Adding virtual environments to your development routine is a sensible thing to do. In my experience, it keeps me from installing libraries I’m experimenting with system-wide, which can lead to problems. I find virtualenvwrapper the easiest way for me to get into that routine and manage my project environments hassle-free without thinking too much or remembering too many commands.

Advanced features

You can install multiple Python versions on your system (e.g., using the deadsnakes PPA on Ubuntu) and create a virtual environment with that particular version using, for example, mkvirtualenv -p /usr/bin/python3.9 myproject.
You can automate activation/deactivation upon entering/leaving a directory.
You can use the postmkvirtualenv hook to install common tools every time a new environment is created.

Recommended resources to learn Python:

Web Developer Bootcamp with Flask and Python

Learn Python Programming Masterclass

Reference sites: https://opensource.com/article/21/2/python-virtualenvwrapper

The Ultimate Python Dictionaries Tutorial for Beginners

bricourse — Thu, 11 Mar 2021 14:08:23 +0000

In this short tutorial, let’s learn how to implement data structures with dictionaries for fast data retrieval management.

Dictionaries are the Python programming language’s way of implementing data structures. A Python dictionary consists of several key-value pairs; each pair maps the key to its associated value.

For example, say you’re a teacher who wants to match students’ names to their grades. You could use a Python dictionary to map the keys (names) to their associated values (grades).

If you need to find a specific student’s grade on an exam, you can access it from your dictionary. This lookup shortcut should save you time over parsing an entire list to find the student’s grade.

This article shows you how to access dictionary values through each value’s key. Before you begin the tutorial, make sure you have the Anaconda package manager and Jupyter Notebook installed on your machine.

Get the book: Data Structures and Algorithims for job interviews

1. Open a new notebook in Jupyter

Begin by opening Jupyter and running it in a tab in your web browser. Then:

Go to File in the top-left corner.
Select New Notebook, then Python 3.

Your new notebook starts off untitled, but you can rename it anything you’d like. I named mine OpenSource.com Data Dictionary Tutorial.

The line number you see in your new Jupyter notebook is where you will write your code. (That is, your input.)

On macOS, you’ll hit Shift then Return to receive your output. Make sure to do this before creating new line numbers; otherwise, any additional code you write might not run.

2. Create a key-value pair

Write the keys and values you wish to access in your dictionary. To start, you’ll need to define what they are in the context of your dictionary:

**empty_dictionary = {}
grades = {
    "Kelsey": 87,
    "Finley": 92
}**

**one_line = {a: 1, b: 2}**

This allows the dictionary to associate specific keys with their respective values. Dictionaries store data by name, which allows faster lookup.

3. Access a dictionary value by its key

Say you want to find a specific dictionary value; in this case, a specific student’s grade. To start, hit Insert then Insert Cell Below.

In your new cell, define the keys and values in your dictionary.

Then, find the value you need by telling your dictionary to print that value’s key. For example, look for a specific student’s name — Kelsey:

***# Access data in a dictionary*
grades = {
    "Kelsey": 87,
    "Finley": 92
}**

**print(grades["Kelsey"])
87**

Once you’ve asked for Kelsey’s grade (that is, the value you’re trying to find), hit Shift (if you’re on macOS), then Return.

You see your desired value — Kelsey’s grade — as an output below your cell.

4. Update an existing key

What if you realize you added the wrong grade for a student to your dictionary? You can fix it by updating your dictionary to store an additional value.

To start, choose which key you want to update. In this case, say you entered Finley’s grade incorrectly. That is the key you’ll update in this example.

To update Finley’s grade, insert a new cell below, then create a new key-value pair. Tell your cell to print the dictionary, then hit Shift and Return:

**grades["Finley"] = 90
print(grades)**

**{'Kelsey': 87; "Finley": 90}**

The updated dictionary, with Finley’s new grade, appears as your output.

5. Add a new key

Say you get a new student’s grade for an exam. You can add that student’s name and grade to your dictionary by adding a new key-value pair.

Insert a new cell below, then add the new student’s name and grade as a key-value pair. Once you’re done, tell your cell to print the dictionary, then hit Shift and Return:

**grades["Alex"] = 88
print(grades)**

**{'Kelsey': 87, 'Finley': 90, 'Alex': 88}**

All key-value pairs should appear as output.

Using dictionaries

Remember that keys and values can be any data type, but it’s rare for them to be non-primitive types. Additionally, dictionaries don’t store or structure their content in any specific order. If you need an ordered sequence of items, it’s best to create a list in Python, not a dictionary.

If you’re thinking of using a dictionary, first confirm if your data is structured the right way, i.e., like a phone book. If not, then using a list, tuple, tree, or other data structure might be the best option.

Additional resources to learn Python:

The Complete Python Course: Build 10 Real World OOP Programs

Learn Python Programming Masterclass

Reference site: **Lauren Maffeo **https://opensource.com/article/21/3/dictionary-values-python

Other interesting Dev.to Posts:

Finally Understanding the Advanced uses of "This" in Javascript

bricourse — Wed, 10 Mar 2021 10:48:57 +0000

In this short tutorial we are going to learn how to use "this" in Javascript with 7 different examples …

If the function is defined as an arrow function: {: #arrow-functions }

const arrowFunction = () => {
  console.log(this);
};

In this case, the value of this is always the same as this in the parent scope:

const outerThis = this;

const arrowFunction = () => {
  // Always logs `true`:
  console.log(this === outerThis);
};

Arrow functions are great because the inner value of this can't be changed, it's always the same
as the outer this.

Other examples

With arrow functions, the value of this can't be changed with bind:

// Logs `true` - bound `this` value is ignored:
arrowFunction.bind({foo: 'bar'})();

With arrow functions, the value of this can't be changed with call or apply:

// Logs `true` - called `this` value is ignored:
arrowFunction.call({foo: 'bar'});
// Logs `true` - applied `this` value is ignored:
arrowFunction.apply({foo: 'bar'});

With arrow functions, the value of this can't be changed by calling the function as a member of
another object:

const obj = {arrowFunction};
// Logs `true` - parent object is ignored:
obj.arrowFunction();

With arrow functions, the value of this can't be changed by calling the function as a
constructor:

// TypeError: arrowFunction is not a constructor
new arrowFunction();

'Bound' instance methods

With instance methods, if you want to ensure this always refers to the class instance, the best
way is to use arrow functions and class
fields:

class Whatever {
  someMethod = () => {
    // Always the instance of Whatever:
    console.log(this);
  };
}

This pattern is really useful when using instance methods as event listeners in components (such as
React components, or web components).

The above might feel like it's breaking the "this will be the same as this in the parent scope"
rule, but it starts to make sense if you think of class fields as syntactic sugar for setting things
in the constructor:

class Whatever {
  someMethod = (() => {
    const outerThis = this;
    return () => {
      // Always logs `true`:
      console.log(this === outerThis);
    };
  })();
}

// …is roughly equivalent to:

class Whatever {
  constructor() {
    const outerThis = this;
    this.someMethod = () => {
      // Always logs `true`:
      console.log(this === outerThis);
    };
  }
}

Alternative pattens involve binding an existing function in the constructor, or assigning the
function in the constructor. If you can't use class fields for some reason, assigning functions in
the constructor is a reasonable alternative:

class Whatever {
  constructor() {
    this.someMethod = () => {
      // …
    };
  }
}

Otherwise, if the function/class is called with `new`: {: #new }

new Whatever();

The above will call Whatever (or its constructor function if it's a class) with this set to the
result of Object.create(Whatever.prototype).

class MyClass {
  constructor() {
    console.log(
      this.constructor === Object.create(MyClass.prototype).constructor,
    );
  }
}

// Logs `true`:
new MyClass();

The same is true for older-style constructors:

function MyClass() {
  console.log(
    this.constructor === Object.create(MyClass.prototype).constructor,
  );
}

// Logs `true`:
new MyClass();

Other examples

When called with new, the value of this can't be changed with bind:

const BoundMyClass = MyClass.bind({foo: 'bar'});
// Logs `true` - bound `this` value is ignored:
new BoundMyClass();

When called with new, the value of this can't be changed by calling the function as a member
of another object:

const obj = {MyClass};
// Logs `true` - parent object is ignored:
new obj.MyClass();

Otherwise, if the function has a 'bound' `this` value: {: #bound }

function someFunction() {
  return this;
}

const boundObject = {hello: 'world'};
const boundFunction = someFunction.bind(boundObject);

Whenever boundFunction is called, its this value will be the object passed to bind
(boundObject).

// Logs `false`:
console.log(someFunction() === boundObject);
// Logs `true`:
console.log(boundFunction() === boundObject);

Avoid using bind to bind a function to its outer this. Instead, use arrow functions, as they make this clear from the function declaration, rather than
something that happens later in the code.

Don't use bind to set this to some value unrelated to the parent object; it's usually unexpected and it's why this gets such a bad reputation. Consider passing the value as an argument instead; it's more explicit, and works with arrow functions.

Other examples

When calling a bound function, the value of this can't be changed with call or
apply:

// Logs `true` - called `this` value is ignored:
console.log(boundFunction.call({foo: 'bar'}) === boundObject);
// Logs `true` - applied `this` value is ignored:
console.log(boundFunction.apply({foo: 'bar'}) === boundObject);

When calling a bound function, the value of this can't be changed by calling the function as a
member of another object:

const obj = {boundFunction};
// Logs `true` - parent object is ignored:
console.log(obj.boundFunction() === boundObject);

Otherwise, if `this` is set at call-time: {: #call-apply }

function someFunction() {
  return this;
}

const someObject = {hello: 'world'};

// Logs `true`:
console.log(someFunction.call(someObject) === someObject);
// Logs `true`:
console.log(someFunction.apply(someObject) === someObject);

The value of this is the object passed to call/apply.

Don't use call/apply to set this to some value unrelated to the parent object; it's usually unexpected and it's why this gets such a bad reputation. Consider passing the value as an argument instead; it's more explicit, and works with arrow functions.

Unfortunately this is set to some other value by things like DOM event listeners, and using it can
result in difficult-to-understand code:

element.addEventListener('click', function (event) {
  // Logs `element`, since the DOM spec sets `this` to
  // the element the handler is attached to.
  console.log(this);
});

I avoid using this in cases like above, and instead:

element.addEventListener('click', (event) => {
  // Ideally, grab it from a parent scope:
  console.log(element);
  // But if you can't do that, get it from the event object:
  console.log(event.currentTarget);
});

Otherwise, if the function is called via a parent object (`parent.func()`): {: #object-member }

const obj = {
  someMethod() {
    return this;
  },
};

// Logs `true`:
console.log(obj.someMethod() === obj);

In this case the function is called as a member of obj, so this will be obj. This happens at
call-time, so the link is broken if the function is called without its parent object, or with a
different parent object:

const {someMethod} = obj;
// Logs `false`:
console.log(someMethod() === obj);

const anotherObj = {someMethod};
// Logs `false`:
console.log(anotherObj.someMethod() === obj);
// Logs `true`:
console.log(anotherObj.someMethod() === anotherObj);

someMethod() === obj is false because someMethod isn't called as a member of obj. You might
have encountered this gotcha when trying something like this:

const $ = document.querySelector;
// TypeError: Illegal invocation
const el = $('.some-element');

This breaks because the implementation of querySelector looks at its own this value and expects
it to be a DOM node of sorts, and the above breaks that connection. To achieve the above correctly:

const $ = document.querySelector.bind(document);
// Or:
const $ = (...args) => document.querySelector(...args);

Fun fact: Not all APIs use this internally. Console methods like console.log were changed to
avoid this references, so log doesn't need to be bound to console.

Don't transplant a function onto an object just to set this to some value unrelated to the parent object; it's usually unexpected and it's why this gets such a bad reputation. Consider passing the value as an argument instead; it's more explicit, and works with arrow functions.

Otherwise, if the function or parent scope is in strict mode: {: #strict }

function someFunction() {
  'use strict';
  return this;
}

// Logs `true`:
console.log(someFunction() === undefined);

In this case, the value of this is undefined. 'use strict' isn't needed in the function if the parent scope is in strict
mode (and all modules are in strict mode).

Don't rely on this. I mean, there are easier ways to get an undefined value 😀.

Otherwise: {: #otherwise }

function someFunction() {
  return this;
}

// Logs `true`:
console.log(someFunction() === globalThis);

In this case, the value of this is the same as globalThis.

Most folks (including me) call globalThis the global object, but this isn't 100% technically correct. Here's [Mathias Bynens with the details (https://mathiasbynens.be/notes/globalthis#terminology), including why it's called globalThis rather than simply global.

Avoid using this to reference the global object (yes, I'm still calling it that). Instead, use globalThis,
which is much more explicit.

Additional resources to learn Javascript:

Get the book: Javascript Challenges

JavaScript: Understanding the Weird Parts

Monster JavaScript Course - 50+ projects and applications

reference sites: https://web.dev/javascript-this/

Taking your JS Skills to the Next Level { with The Most Powerful JS_Tutorial }

bricourse — Mon, 08 Mar 2021 16:46:10 +0000

JavaScript (JS) is a dynamic interpreted language that powers the web. It is widely used in browsers (where JS scripts are interpreted by JavaScript engines like Chrome's V8) and increasingly on servers (on a Node.js runtime environment).

JS is a prototype-based scripting language with first-class functions and dynamic typing. Because of its super flexibility, JS supports multiple styles of programming including imperative, object-oriented and functional.

Here's what all those big words above mean:

Interpreted Language: a language (eg. JS, Python) in which most of its implementations execute instructions directly, without previously compiling a program into machine-language instructions like compiled languages do (eg. C++)
JavaScript Engine: a virtual machine that interprets and executes JS
Prototype-Based: unlike classical OOP with classes and objects, in JS, objects are cloned from other objects, and all objects have prototypes (kinda like the template they inherit from)
First-Class Functions: JS supports passing functions as arguments to other functions, returning them as the values from other functions, and assigning them to variables or storing them in data structures
Dynamically Typed: The "type" of all variables is only interpreted at run-time unlike statically typed languages where all variables have a type at compile-time
Imperative Programming: Statement based programming
Object-Oriented Programming: Object based programming
Functional Programming: Function based programming

Quick Access Links

Basics
1. Primitives
2. Operators
More Basic Syntax
1. Variables
2. Arrays
3. Logic and Control Structures
Objects and Functions
1. Objects
2. Functions
3. Bind, Call and Apply
Function Execution, Variable Scope, Closures & Callbacks
1. Hoisting
2. Scope Chain
3. Closures
4. Callbacks
Object-Oriented JS and Prototypal Inheritance
1. Constructors
2. Prototypes
3. Prototypal Inheritance
4. Built-In Constructors
Bugs and Error Handling
New ES6 stuff

Get the book: Javascript Challenges

1. Basics

Everything in JS is either an object or a primitive.


// This is a single line comment,
/* and this is a 
multiline comment */

// Semicolons (;) to terminate lines are optional
// However, the JS engine will (usually) automatically insert semicolons upon seeing '\n'
// This can cause some weird behaviour so ALWAYS use semicolons
doStuff();

i. Primitives: Number, String, Boolean (and some special ones)

// JavaScript has one number type (which is a 64-bit IEEE 754 double).
// Doubles have a 52-bit mantissa, which is enough to store integers
//    up to about 9✕10¹⁵ precisely.
3; // = 3
1.5; // = 1.5

// Some basic arithmetic works as you'd expect.
1 + 1; // = 2
0.1 + 0.2; // = 0.30000000000000004 (funky floating point arithmetic--be careful!)
8 - 1; // = 7
10 * 2; // = 20
10 ** 2; // =100 (10 raised to the power 2) same as Math.pow(10, 2)
35 / 5; // = 7

// Including uneven division.
5 / 2; // = 2.5

// Bitwise operations also work; when you perform a bitwise operation your float
// is converted to a signed int *up to* 32 bits.
1 << 2; // = 4

// Precedence is enforced with parentheses.
(1 + 3) * 2; // = 8

// There are special primitive values:
Infinity; // result of e.g. 1/0
-Infinity; // result of e.g. -1/0
NaN; // result of e.g. 0/0
undefined; // never use this yourself. This is the default value for "not assigned"
null; // use this instead. This is the programmer setting a var to "not assigned"

// There's also a boolean type.
true;
false;

// Strings are created with single quotes (') or double quotes (").
'abc';
"Hello, world";

// You can access characters in a string with `charAt`
"This is a string".charAt(0);  // = 'T'

// ...or use `substring` to get larger pieces.
"Hello world".substring(0, 5); // = "Hello"
"Hello world".slice(0, 5); // does the same thing
"Hello world".substr(0, 5); // yet again

// `length` is a property, so don't use ().
"Hello".length; // = 5

// Searching strings
"Mary had a little lamb".search("had"); // returns 5
"Mary had a little lamb".indexOf("zebra"); // returns -1
"Mary had a little lamb".includes("had"); //returns true (ES7). includes() will return true if the parameter provided is in the string, and false otherwise.

// String to a character array
"one two three four".split(" "); // ['one', 'two', 'three', 'four']

// String replace
"happy birthday henry!".replace("h", "H"); // "Happy birthday Henry!"

// ES6 also introduces Symbol as a new primitive type
// But I'll add that on here once I actually figure out what it is

ii. Operators aka weirdly written functions

// Operators have both a precedence (order of importance, like * before +) 
// and an associativity (order of evaluation, like left-to-right)
// A table of operators can be found here 
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)

// Negation uses the ! symbol
!true; // = false
!false; // = true

// There's shorthand operators for performing math operations on variables:
someVar += 5; // equivalent to someVar = someVar + 5;
someVar *= 10; // someVar = someVar * 10;

// and an even-shorter-hand  operators for adding or subtracting 1
someVar++; 
someVar--; 

// Strings are concatenated with +
"Hello " + "world!"; // = "Hello world!"

// Comparison Operators
1 < 10; // = true
1 > 10; // = false
2 <= 2; // = true
2 >= 2; // = true

// and are compared with < and >
"a" < "b"; // = true

// Strict Equality is ===
// Strict meaning both type AND value are the same
1 === 1; // = true
2 === 1; // = false

// Strict Inequality is !==
1 !== 1; // = false
2 !== 1; // = true

// == allows for type coercion (conversion) and only checks if the values are equal after coercion
"5" == 5; // = true
null == undefined; // = true

// ...which can result in some weird behaviour...so use === whenever possible
13 + !0; // 14
"13" + !0; // '13true'

// false, null, undefined, NaN, 0 and "" are falsy; everything else is truthy.
// Note that 0 is falsy and "0" is truthy, even though 0 == "0".

// We can use this to our advantage when checking for existence
if (x) { //doSomething };

// Or to set default values
x = x || "default" 
// if x exists, do nothing and short-circuit, else set x to a default

// but a problem arises if x = 0. It exists, but will coerce to false
// be wary of this

// figuring out types of literals and vars
typeof "Hello"; // = "string"
typeof 42; // = "number"
typeof undefined // = "undefined"
typeof null // = 'object' THIS IS A JS BUG!

// figuring out if an object is an instance of another object
// checks all the way down the prototype chain
var x = {}
x instanceof Object // = true
x instanceof Function // = false

2. More Basic Syntax

i. Variables

// Variables are declared with the `var` keyword. JavaScript is dynamically
// typed, so you don't need to specify type. Assignment uses a single `=`
// character.
var someVar = 5;

// if you leave the var keyword off, you won't get an error...
someOtherVar = 10;

// ...but your variable will be created in the global scope, not in the scope
// you defined it in.

// Variables declared without being assigned to are set to undefined.
var someThirdVar; // = undefined

ii. Arrays

// Arrays are ordered lists of values, of any type.
var myArray = ["Hello", 45, true];

// Their members can be accessed using the square-brackets subscript syntax.
// Array indices start at zero.
myArray[1]; // = 45

// Arrays are mutable and of variable length (dynamically sized arrays)
myArray.push("World"); // adds to the end
myArray.length; // = 4

// Add/Modify at specific index
myArray[3] = "Hello";

//ES7 includes() can be used with arrays to check for the presence of a value. it is case sensitive
let names = ["Samuel", "Hamilton", "Eric"];
names.includes("Samuel"); //true
names.includes("samuel"); //false
names.includes("John"); //false

iii. Logic and Control Structures

// The `if` structure works as you'd expect.
var count = 1;
if (count === 3){
    // evaluated if count is 3
} else if (count === 4){
    // evaluated if count is 4
} else {
    // evaluated if it's not either 3 or 4
}

// As does `while`.
while (true){
    // An infinite loop!
}

// Do-while loops are like while loops, except they always run at least once.
var input;
do {
    input = getInput();
} while (!isValid(input))

// The `for` loop is the same as C++ and Java:
// initialisation; continue condition; iteration.
for (var i = 0; i < 5; i++){
    // will run 5 times
}

// && is logical AND, || is logical OR
if (house.size === "big" && house.colour === "blue"){
    house.contains = "bear";
}
if (colour === "red" || colour === "blue"){
    // colour is either red or blue
}

// The `switch` statement checks for equality with `===`.
// use 'break' after each case 
// or the cases after the correct one will be executed too. 
grade = 'B';
switch (grade) {
  case 'A':
    console.log("Great job");
    break;
  case 'B':
    console.log("OK job");
    break;
  case 'C':
    console.log("You can do better");
    break;
  default:
    console.log("Oy vey");
    break;
}

3. Objects and Functions

i. Objects

An object is simply an unordered collection of key-value pairs.

// They can be made literally:
var myObj = {key1: "Hello", key2: "World"};
// or using the Object constructor:
var myObj = new Object();

// Keys are strings, but quotes aren't required if they're a valid
// JavaScript identifier. Values can be any type including other objects.
var myObj = {myKey: "myValue", "my other key": 4};

// Objects can even contain functions (called methods)
// When functions attached to an object are called, they can access the object
// they're attached to using the `this` keyword.
var myObj = { 
  name: "Destiny's Child",
  sayMyName: function() {
    console.log(this.name);
  }
}
myObj.sayMyName(); // outputs "Destiny's Child"

// Object attributes can also be accessed using the subscript syntax,
myObj["my other key"]; // = 4

// ... or using the dot syntax, provided the key is a valid identifier.
myObj.myKey; // = "myValue"

// Objects are mutable; values can be changed and new keys added.
myObj.myThirdKey = true;

// If you try to access a value that's not yet set, you'll get undefined.
myObj.myFourthKey; // = undefined

// iterating through objects
for(var property in myObj) { // do something }

// JSON (JavaScript Object Notation) is just a special case of Object literal notation
// where the keys are strings wrapped in quotes
var json_stuff = {
  "firstName": "John",
  "lastName": "Doe",
  "Age": 25
}

// JS Object => JSON
JSON.stringify(myObj);

// JSON => JS Object
JSON.parse(json_stuff);

ii. Functions

Functions are special kinds of objects! Functions can have their own methods and properties just like other objects, but they're rarely used in that way.

Remember, functions in JS are first-class. Meaning they can be assigned and passed just like any other variable can.

Functions are special in that they have an optional name property and a code property (which is the body of the function that actually does stuff). The function's code is executed by the invocation operator ().

// JavaScript functions are declared with the `function` keyword.
// This is a function statement
function myFunction(thing){
    return thing.toUpperCase();
}

// This is a function expression
var makeUpperCase = function() {
    return think.toUpperCase();
}

// Note that the value to be returned must start on the same line as the
// `return` keyword, otherwise you'll always return `undefined` due to
// automatic semicolon insertion. Watch out for this when using Allman style.
function myFunction()
{
    return // <- semicolon automatically inserted here
    {
        thisIsAn: 'object literal'
    }
}
myFunction(); // = undefined

// JavaScript functions are first class objects, so they can be reassigned to
// different variable names and passed to other functions as arguments - for
// example, when supplying an event handler:
function myFunction(){
    // this code will be called in 5 seconds' time
}
setTimeout(myFunction, 5000);
// Note: setTimeout isn't part of the JS language, but is provided by browsers
// and Node.js.

Function objects don't even have to be declared with a name - you can write an anonymous function definition directly into the arguments of another.

setTimeout(function(){
    console.log("It's been 5 seconds!");
    // this code will be called in 5 seconds time
}, 5000);

This has led to a common pattern of "immediately-executing anonymous functions", which prevent temporary variables from leaking into the global scope. The function expression is wrapped in parenthesis and then is invoked using ()

(function(){
    var temporary = 5;
})();
temporary; // raises ReferenceError
permanent; // = 10

An important distinction: primitives Pass by Value while objects Pass by Reference

// Primitives are passed by value
var i = 2;
function double(i){  i*2;  } // another i is created with the same value in a different execution context
double(i);
console.log(i); // still 2 

// Objects (including functions) are passed by reference
var obj = { hero: "Superman" };
function bestSuperhero(obj){
  obj.hero = "Batman";
}
bestSuperhero(obj);
console.log(obj.hero); // = "Batman"

The this keyword within methods, always refers to the object that the method is tied to. However, if the method has an inner function, its this refers to the global object. Some regard this as a bug in JS, so the good practice is to create and use a variable called self.

var c = {
    name: 'The c object',
    log: function() {
        var self = this;

        self.name = 'Updated c object';
        console.log(self);

        var setname = function(newname) {
            self.name = newname;   
        }
        setname('Updated again! The c object');
        console.log(self);
    }
}
c.log(); // outputs "Updated again! The c object"

iii. Bind, Call and Apply

Functions that aren't tied to objects can use this and still be useful. Consider this example.

var cow = { says: "moo" };
var dog = { says: "woof" };
var pig = { says: "oink" };

function speak(times) { 
  for(i = 0; i < times; i++) {
    console.log(this.says);
  }
}
speak(4); // error because this is the global object which doesn't have a 'says' property

To use speak, we need to use the .bind, .call or .apply methods, which are available to all functions. The first parameter of these functions is the object which becomes this within the function.

// bind creates a copy of the function it's being called on
var cowSpeak = speak.bind(cow);
cowSpeak(4); // outputs "moo moo"

// call directly executes the function with the first parameter being 'this'
// and all the other parameters being the function's parameters
speak.call(dog, 3); // outputs "woof woof woof"

// apply directly executes the function with the first parameter being 'this'
// and all the other function parameters being passed in as an array
speak.apply(pig, [1]); // outputs "oink"

The call and apply methods allow us to do something called Function Borrowing.

var darthVader = { 
  son: "Luke",
  saying: function(){
    console.log(this.son + ", I am your father");
  }
};
var luke = { son: "Ben" };

darthVader.saying.call(luke);
// borrowing Darth Vader's saying
// outputs "Ben, I am your father"

The bind method allows us to do Function Currying.

// Creating a copy of a function with preset parameters
function multiply(a,b){ return a*b }

// first parameter can be 'this' or null or anything--doesn't matter since 'this' is not used
// the second parameter (a) is permanently set to 2
var double = multiply.bind(this, 2);
double(16); // outputs 32

4. Function Execution, Variable Scope, Closures & Callbacks

A few important concepts:

Global means not inside a function. The global object is 'window' in browsers.
The Lexical Environment is where something sits physically in the code
'this' is a reference to the object that the currently running method is tied to (by default it's tied to the global object)
The Execution Context consists of the environment (state of variables) of the function currently being evaluated. It also includes 'this' and a reference to the outer environment (aka what object is sitting outside this function lexically)
The Execution Stack or Call Stack is the "stack" of execution contexts with the global execution context being the bottommost. When the program flow enters a function, a new execution context is popped onto the call stack, and when the function returns, it is popped off.

i. Hoisting

Before actually executing any of the code, the JS engine first looks at all the variable declarations and function statements and sets aside some memory space for them effectively moving them to the top of the code. This is known as hoisting.

// Variable example

function a(){
  console.log(x);
  var x = 2;
  console.log(x);
}
a(); // outputs 'undefined' then 2

// Function a is essentially equivalent to:
function a(){
  var x; // the var declaration is hoisted up to the top and is set to undefined
  console.log(x); // outputs undefined
  x = 2; // the variable assignment stays. It is NOT hoisted.
  console.log(x); // outputs 2
}

// Function example

a(); // will run properly
b(); // will fail with TypeError because b isn't assigned until line 4
function a() { }
var b = function() { }

The above is equivalent to:
function a() {} // the function statement is hoisted
var b;
a();
b(); // = undefined(); invoking undefined raises an error
b = function() {}

JS is always synchronous (executing code 1 line at a time and in-order) and single-threaded (only 1 command at a time). However, jQuery, event handlers and AJAX calls make use of callbacks which appear to run asynchronously. AJAX calls are delegated off to a different part of the browser (outside the JS engine) which is why they are run asynchronously. When the call returns, or if there's a user click, then these events fill up the Event Queue. The JS Engine only handles the Event Queue when the Execution Stack is empty.

ii. Scope Chain

To find a variable when functions are running, JS looks further than just the variable environment of the currently executing context, it also looks at the outer environment (the environment to which this function is lexically attached). This process continues looking all the way down to the global environment in a process known as the _scope chain.

function b() {
    console.log(myVar);
}

function a() {
    var myVar = 2;
    b();
}

var myVar = 1;
a();

// function b does not have a myVar variable so it looks to its outer environment
// here, b is lexically attached to the global object, and myVar exists in the global environment
// therefore, it logs '1'


// JavaScript has function scope; functions get their own scope but other blocks
// do not.
if (true){
    var i = 5;
}
i; // = 5 - not undefined as you'd expect in a block-scoped language

iii. Closures

One of JS's most powerful features is closures. Whenever a function is nested within another function, the inner function has access to all the outer function's variables even after the outer function exits.
After the outer function exits, it is popped off the Execution Stack, however if any of its variables are referenced in the inner function, then those variables are "closed into" the inner function's Execution Context and are accessible by the inner function.

// Example 1

function sayHelloInFiveSeconds(name){
    var prompt = "Hello, " + name + "!";
    // Inner functions are put in the local scope by default, as if they were
    // declared with `var`.
    function inner(){
        alert(prompt);
    }
    setTimeout(inner, 5000);
    // setTimeout is asynchronous, so the sayHelloInFiveSeconds function will
    // exit immediately, and setTimeout will call inner afterwards. However,
    // because inner is "closed over" sayHelloInFiveSeconds, inner still has
    // access to the `prompt` variable when it is finally called.
}
sayHelloInFiveSeconds("Adam"); // will open a popup with "Hello, Adam!" in 5s


// Example 2

function buildFunctions() {
    var arr = [];    
    for (var i = 0; i < 3; i++) {
        arr.push(
            function() {
                console.log(i);   
            }
        )
    }
    return arr;
}

var fs = buildFunctions();
fs[0]();
fs[1]();
fs[2]();
// all 3 of these will log '3' because after buildFunctions finishes, i = 3
// when fs[0..2] are invoked, they look for the value of i and they all see 3

// Avoid creating functions in loops. It will lead to bad behaviour.

iv. Callbacks

Callbacks are simply functions passed as arguments to other functions to be run when the other functions are finished.

function alertWhenDone(callback){
  // do some work
  callback(); // invoke the callback right before exiting
}

alertWhenDone(function(){
  alert("I am done!"); 
});

// Callback making use of the JavaScript Timer
setTimeout(function(){
  alert("3 seconds have passed.");
}, 3000);

5. Object-Oriented JS and Prototypal Inheritance

i. Function Constructors

When you call a function with the new keyword, a new object is created in memory, and is made available to the function via the this keyword. Functions designed to be called like that are called constructors.

var MyConstructor = function(){
    // public variables are declared using this
    this.myNumber = 5;
    // private variables are declared using var
    var secretNum = 4;
    // public getter for the private variable
    this.getSecret = function(){ return secretNum };
}
myNewObj = new MyConstructor(); // = {myNumber: 5, secretNum: 4}
myNewObj.myNumber; // = 5
myNewObj.secretNum; // undefined
myNewObj.getSecret(); // = 4

ii. Prototypes

Every JavaScript object has a 'prototype' property, which is simply a reference to another object. When you go to access a property that doesn't exist on the actual object, the interpreter will look at its prototype. If it doesn't exist on the prototype, it'll look at the prototype's prototype. It will keep looking down this prototype chain until it hits the base object Object, which doesn't have a prototype.

// Some JS implementations let you access an object's prototype on the magic
// property `__proto__`. While this is useful for explaining prototypes it's not
// part of the standard; we'll get to standard ways of using prototypes later.
var myObj = {
    myString: "Hello world!"
};
var myPrototype = {
    meaningOfLife: 42,
    myFunc: function(){
        return this.myString.toLowerCase()
    }
};

myObj.__proto__ = myPrototype;
myObj.meaningOfLife; // = 42

// This works for functions, too.
myObj.myFunc(); // = "hello world!"

// Of course, if your property isn't on your prototype, the prototype's
// prototype is searched, and so on.
myPrototype.__proto__ = {
    myBoolean: true
};
myObj.myBoolean; // = true

// There's no copying involved here; each object stores a reference to its
// prototype. This means we can alter the prototype and our changes will be
// reflected everywhere.
myPrototype.meaningOfLife = 43;
myObj.meaningOfLife; // = 43

iii. Prototypal Inheritance aka setting prototypes of new objects

Accessing __proto__ is non-standard, and there are no standard ways to change the prototype of an existing object. However, there are two ways to create a new object with a given prototype.

// The first is Object.create, which is a recent addition to JS, and therefore
// not available in all implementations yet.
var myObj = Object.create(myPrototype);
myObj.meaningOfLife; // = 43

Every JS function also has a property called 'prototype'. When used as a normal function, the 'prototype' property is not used. Only when functions are used as constructors with the new keyword, the 'prototype' sets the prototype of the object being created.

// Constructors have a property called prototype. This is *not* the prototype of
// the constructor function itself; instead, it's the prototype that new objects
// are given when they're created with that constructor and the new keyword.
MyConstructor.prototype = {
    myNumber: 5,
    getMyNumber: function(){
        return this.myNumber;
    }
};
var myNewObj2 = new MyConstructor();
myNewObj2.getMyNumber(); // = 5
myNewObj2.myNumber = 6
myNewObj2.getMyNumber(); // = 6

iv. Built-In Constructors

// Built-in types like strings and numbers also have constructors that create
// equivalent wrapper objects.
var myNumber = 12;
var myNumberObj = new Number(12);
myNumber == myNumberObj; // = true

// Except, they aren't exactly equivalent.
typeof myNumber; // = 'number'
typeof myNumberObj; // = 'object'
myNumber === myNumberObj; // = false
if (0){
    // This code won't execute, because 0 is falsy.
}
if (new Number(0)){
   // This code will execute, because wrapped numbers are objects, and objects
   // are always truthy.
}

// However, the wrapper objects and the regular builtins share a prototype, so
// you can actually add functionality to a string, for instance.
String.prototype.firstCharacter = function(){
    return this.charAt(0);
}
"abc".firstCharacter(); // = "a"

Polyfilling takes advantage of the fact that we can modify the built-in prototypes to implement newer features of JavaScript in an older subset of JavaScript, so that they can be used in older environments such as outdated browsers.

// For instance, Object.create isn't yet available in all
// implementations, but we can still use it with this polyfill:
if (Object.create === undefined){ // don't overwrite it if it exists
    Object.create = function(proto){
        // make a temporary constructor with the right prototype
        var Constructor = function(){};
        Constructor.prototype = proto;
        // then use it to create a new, appropriately-prototyped object
        return new Constructor();
    }
}

6. Bugs and Error Handling

// You can opt in to tell the JS engine to be very strict in its interpretation
// It must go at the top of the file to interpret the whole file in strict mode
// Or at the top of a function, to make just that function strict
"use strict"

7. New ES6 stuff

Arrows

Arrows are a function shorthands for anonymous functions used with the => syntax. They pass the outside lexical scope (ie. this) to the function.

// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);

// Statement bodies
nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v);
});

// Lexical this
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
}

Classes

Object-oriented syntactic sugar for the prototypal inheritance pattern.

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  get boneCount() {
    return this.bones.length;
  }
  set matrixType(matrixType) {
    this.idMatrix = SkinnedMesh[matrixType]();
  }
  static defaultMatrix() {
    return new THREE.Matrix4();
  }
}

String Interpolation

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

`let` and `const`

let is like var except it is block-scoped. Variables declared with const can only be assigned once.

if (1 < 2) {
  let i = 4;
  const name = 'Jon Snow'
}
var i = 5; // error, i is already defined
name = 'Samwell Tarly' // error, const can only be defined once

Generator

Functions that can be paused using the yield keyword and restarted from the outside. yield _____ is called a "yield expression" which gets evaluated with whatever value we send in when we restart the generator. yield is making a request for a value.

function* fibonacci() {
  let a = 0, b = 1;

  while(true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

// Enumerates the Fibonacci numbers
for(let value of fibonacci()) {
  console.log(value);
}

Generators are useful because they return (i.e. create) iterators. In turn, an iterator, an object with a next method, actually executes the body of generators. The next method, when repeatedly called, partially executes the corresponding generator, gradually advancing through the body until a yield keyword is hit.

function* argumentsGenerator() {
  for (let i = 0; i < arguments.length; i += 1) {
    yield arguments[i];
  }
}

var argumentsIterator = argumentsGenerator('a', 'b', 'c');

// Prints "a b c"
console.log(
    argumentsIterator.next().value,
    argumentsIterator.next().value,
    argumentsIterator.next().value
);

// ES6 has syntactic sugar for iteration.
// Prints "a", "b", "c"
for(let value of argumentsIterator) {
  console.log(value);
}

The next method of an iterator returns an object with a value property and a done property, as long as the body of the corresponding generator has not returned. The value property refers the value yielded or returned. The done property is false up until the generator body returns, at which point it is true. If the next method is called after done is true, an error is thrown.

Maps, Sets, WeakMap, WeakSet

A Map is an object for which the keys can be any arbitrary object. A Set is a data structure which contains a finite set of elements, each occurring only once. WeakMaps and WeakSets provide leak-free object-key’d side tables. The JavaScript virtual machine periodically frees memory allocated to objects no longer in scope. An object is no longer in scope if there is no chain of references from the current scope leading to it.

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Because the added object has no other references, it will not be held in the set

Promises

Promises are a library for asynchronous programming. Promises are a first class representation of a value that may be made available in the future. A Promise is in one of these states:

pending: initial state, not fulfilled or rejected.
fulfilled: successful operation
rejected: failed operation.
settled: the Promise is either fulfilled or rejected, but not pending.

var someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // this will throw, x does not exist
    resolve(x + 2);
  });
};

someAsyncThing().then(function() {
  console.log('everything is great');
}).catch(function(error) {
  console.log('oh no', error);
});

Modules

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

Proxy

Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc).

// lib/proxy.js
export function create(target) {
  var target = {};
  return new Proxy(target, {});
}

// app.js
import * as proxy from 'lib/proxy';
var target = {};
var origin = proxy.create(target);
origin.a = 37; // operation forwarded to the target
alert('target.a = ' + target.a); // The operation has been properly forwarded

Reference sites: https://github.com/krishnr/JavaScript-cheat-sheet

Additional Resources to learn Javascript:

Javascript Tutorial and Projects Course

The Most Powerful React JS Cheat Sheet

bricourse — Sat, 06 Mar 2021 14:21:16 +0000

React is a JavaScript library for building user interfaces. This guide targets React v15 to v16.

Components

import React from 'react'
import ReactDOM from 'react-dom'

class Hello extends React.Component {
  render () {
    return <div className='message-box'>
      Hello {this.props.name}
    </div>
  }
}

const el = document.body
ReactDOM.render(<Hello name='John' />, el)

Use the React.js jsfiddle to start hacking. (or the unofficial jsbin)

Import multiple exports

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class Hello extends Component {
  ...
}

Properties

<Video fullscreen={true} autoplay={false} />

render () {
  this.props.fullscreen
  const { fullscreen, autoplay } = this.props
  ···
}

Use this.props to access properties passed to the component.

See: Properties

States

constructor(props) {
  super(props)
  this.state = { username: undefined }
}

this.setState({ username: 'rstacruz' })

render () {
  this.state.username
  const { username } = this.state
  ···
}

Use states (this.state) to manage dynamic data.

With Babel you can use proposal-class-fields and get rid of constructor

class Hello extends Component {
  state = { username: undefined };
  ...
}

See: States

Get the Book: Performance Optimized React Applications

Nesting

class Info extends Component {
  render () {
    const { avatar, username } = this.props

    return <div>
      <UserAvatar src={avatar} />
      <UserProfile username={username} />
    </div>
  }
}

As of React v16.2.0, fragments can be used to return multiple children without adding extra wrapping nodes to the DOM.

import React, {
  Component,
  Fragment
} from 'react'

class Info extends Component {
  render () {
    const { avatar, username } = this.props

    return (
      <Fragment>
        <UserAvatar src={avatar} />
        <UserProfile username={username} />
      </Fragment>
    )
  }
}

Nest components to separate concerns.

See: Composing Components

Children

<AlertBox>
  <h1>You have pending notifications</h1>
</AlertBox>

class AlertBox extends Component {
  render () {
    return <div className='alert-box'>
      {this.props.children}
    </div>
  }
}

Children are passed as the children property.

Defaults

Setting default props

Hello.defaultProps = {
  color: 'blue'
}

See: defaultProps

Setting default state

class Hello extends Component {
  constructor (props) {
    super(props)
    this.state = { visible: true }
  }
}

Set the default state in the constructor().

And without constructor using Babel with proposal-class-fields.

class Hello extends Component {
  state = { visible: true }
}

See: Setting the default state

Other components

Functional components

function MyComponent ({ name }) {
  return <div className='message-box'>
    Hello {name}
  </div>
}

Functional components have no state. Also, their props are passed as the first parameter to a function.

See: Function and Class Components

Pure components

import React, {PureComponent} from 'react'

class MessageBox extends PureComponent {
  ···
}

Performance-optimized version of React.Component. Doesn't rerender if props/state hasn't changed.

See: Pure components

Component API

this.forceUpdate()

this.setState({ ... })
this.setState(state => { ... })

this.state
this.props

These methods and properties are available for Component instances.

See: Component API

Lifecycle

Mounting

Method	Description
`constructor` (props)	Before rendering #
`componentWillMount()`	Don't use this #
`render()`	Render #
`componentDidMount()`	After rendering (DOM available) #
---	---
`componentWillUnmount()`	Before DOM removal #
---	---
`componentDidCatch()`	Catch errors (16+) #

Set initial the state on constructor().
Add DOM event handlers, timers (etc) on componentDidMount(), then remove them on componentWillUnmount().

Updating

Method	Description
`componentDidUpdate` (prevProps, prevState, snapshot)	Use `setState()` here, but remember to compare props
`shouldComponentUpdate` (newProps, newState)	Skips `render()` if returns false
`render()`	Render
`componentDidUpdate` (prevProps, prevState)	Operate on the DOM here

Called when parents change properties and .setState(). These are not called for initial renders.

See: Component specs

Hooks (New)

State Hook

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Hooks are a new addition in React 16.8.

See: Hooks at a Glance

Declaring multiple state variables

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

Effect hook

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

By default, React runs the effects after every render — including the first render.

Building your own hooks

Define FriendStatus

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  }, [props.friend.id]);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

Effects may also optionally specify how to “clean up” after them by returning a function.

Use FriendStatus

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

See: Building Your Own Hooks

Hooks API Reference

Also see: Hooks FAQ

Basic Hooks

Hook	Description
`useState`(initialState)
`useEffect`(() => { ... })
`useContext`(MyContext)	value returned from `React.createContext`

Full details: Basic Hooks

Additional Hooks

Hook	Description
`useReducer`(reducer, initialArg, init)
`useCallback`(() => { ... })
`useMemo`(() => { ... })
`useRef`(initialValue)
`useImperativeHandle`(ref, () => { ... })
`useLayoutEffect`	identical to `useEffect`, but it fires synchronously after all DOM mutations
`useDebugValue`(value)	display a label for custom hooks in React DevTools

Full details: Additional Hooks

DOM nodes

References

class MyComponent extends Component {
  render () {
    return <div>
      <input ref={el => this.input = el} />
    </div>
  }

  componentDidMount () {
    this.input.focus()
  }
}

Allows access to DOM nodes.

See: Refs and the DOM

DOM Events

class MyComponent extends Component {
  render () {
    <input type="text"
        value={this.state.value}
        onChange={event => this.onChange(event)} />
  }

  onChange (event) {
    this.setState({ value: event.target.value })
  }
}

Pass functions to attributes like onChange.

See: Events

Other features

Transferring props

<VideoPlayer src="video.mp4" />

class VideoPlayer extends Component {
  render () {
    return <VideoEmbed {...this.props} />
  }
}

Propagates src="..." down to the sub-component.

See Transferring props

Top-level API

React.createClass({ ... })
React.isValidElement(c)

ReactDOM.render(<Component />, domnode, [callback])
ReactDOM.unmountComponentAtNode(domnode)

ReactDOMServer.renderToString(<Component />)
ReactDOMServer.renderToStaticMarkup(<Component />)

There are more, but these are most common.

See: React top-level API

JSX patterns

Style shorthand

const style = { height: 10 }
return <div style={style}></div>

return <div style={{ margin: 0, padding: 0 }}></div>

See: Inline styles

Inner HTML

function markdownify() { return "<p>...</p>"; }
<div dangerouslySetInnerHTML={{__html: markdownify()}} />

See: Dangerously set innerHTML

Lists

class TodoList extends Component {
  render () {
    const { items } = this.props

    return <ul>
      {items.map(item =>
        <TodoItem item={item} key={item.key} />)}
    </ul>
  }
}

Always supply a key property.

Conditionals

<Fragment>
  {showMyComponent
    ? <MyComponent />
    : <OtherComponent />}
</Fragment>

Short-circuit evaluation

<Fragment>
  {showPopup && <Popup />}
  ...
</Fragment>

New features

Returning multiple elements

You can return multiple elements as arrays or fragments.

Arrays

render () {
  // Don't forget the keys!
  return [
    <li key="A">First item</li>,
    <li key="B">Second item</li>
  ]
}

Fragments

render () {
  // Fragments don't require keys!
  return (
    <Fragment>
      <li>First item</li>
      <li>Second item</li>
    </Fragment>
  )
}

See: Fragments and strings

Returning strings

render() {
  return 'Look ma, no spans!';
}

You can return just a string.

See: Fragments and strings

Errors

class MyComponent extends Component {
  ···
  componentDidCatch (error, info) {
    this.setState({ error })
  }
}

Catch errors via componentDidCatch. (React 16+)

See: Error handling in React 16

Portals

render () {
  return React.createPortal(
    this.props.children,
    document.getElementById('menu')
  )
}

This renders this.props.children into any location in the DOM.

See: Portals

Hydration

const el = document.getElementById('app')
ReactDOM.hydrate(<App />, el)

Use ReactDOM.hydrate instead of using ReactDOM.render if you're rendering over the output of ReactDOMServer.

See: Hydrate

Property validation

PropTypes

import PropTypes from 'prop-types'

See: Typechecking with PropTypes

Key	Description
`any`	Anything

Basic

Key	Description
`string`
`number`
`func`	Function
`bool`	True or false

Enum

Key	Description
`oneOf`(any)	Enum types
`oneOfType`(type array)	Union

Array

Key	Description
`array`
`arrayOf`(...)

Object

Key	Description
`object`
`objectOf`(...)	Object with values of a certain type
`instanceOf`(...)	Instance of a class
`shape`(...)

Elements

Key	Description
`element`	React element
`node`	DOM node

Required

Key	Description
`(···).isRequired`	Required

Basic types

MyComponent.propTypes = {
  email:      PropTypes.string,
  seats:      PropTypes.number,
  callback:   PropTypes.func,
  isClosed:   PropTypes.bool,
  any:        PropTypes.any
}

Required types

MyCo.propTypes = {
  name:  PropTypes.string.isRequired
}

Elements

MyCo.propTypes = {
  // React element
  element: PropTypes.element,

  // num, string, element, or an array of those
  node: PropTypes.node
}

Enumerables (oneOf)

MyCo.propTypes = {
  direction: PropTypes.oneOf([
    'left', 'right'
  ])
}

Arrays and objects

MyCo.propTypes = {
  list: PropTypes.array,
  ages: PropTypes.arrayOf(PropTypes.number),
  user: PropTypes.object,
  user: PropTypes.objectOf(PropTypes.number),
  message: PropTypes.instanceOf(Message)
}

MyCo.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    age:  PropTypes.number
  })
}

Use .array[Of], .object[Of], .instanceOf, .shape.

Custom validation

MyCo.propTypes = {
  customProp: (props, key, componentName) => {
    if (!/matchme/.test(props[key])) {
      return new Error('Validation failed!')
    }
  }
}

Additional resources to learn React:

The Complete React Native + Hooks Course [2020 Edition]

The Modern React Bootcamp (Hooks, Context, NextJS, Router)

Reference site: https://devhints.io/react

All you Need to Know to Become a Top React Native Animations Developer

bricourse — Sat, 06 Mar 2021 11:36:01 +0000

Here are the tools you need to overcome performance challenges when implementing React Native animations.

React Native animation is a popular topic for workshops and classes, perhaps because many developers find it challenging to work with. While many online blogs and resources focus on the performance aspects of React Native, few take you through the basics. In this article, we will cover the fundamentals of how to implement React Native animations.

Using the Animated API to improve performance

Still, it is not unusual for developers to encounter performance issues, especially when they are working on complex animations.

As mentioned above, performance bottlenecks in React Native animations are caused by heavy workloads on JavaScript threads, which reduces the frame rate and causes a sluggish user experience. To overcome this problem, you need to maintain a frame rate of 60 frames per second.

Using the Animated API is the best solution to this as it optimizes the required serialization/deserialization time. It does this by using a declarative API to describe animations. The idea behind this is to declare the entire animation at once in advance so that the declaration in JavaScript can be serialized and sent to the bridge. A driver then executes the animations frame by frame.

How to implement animations in React Native

There are several ways to implement animations in React Native. Here are some that I find most useful.

Animated values

Animated values tops my list as the building block for animations in any React Native app. These generally point to a real value, which is converted back to a real number when passed with an animated component.

Let’s look at an example:

    **Animated.timing(this.valueToAnimate, {
        toValue: 42;
        duration: 1000;
    }).start()**

In the above example, I have declared value.ToAnimate as 42, which will be executed after 1000 milliseconds.

You can also use Animated values to declare properties such as opacity or position. Here’s an example implementation of opacity with Animated values:

    **<Animated.View style={{ opacity: myAnimatedOpacity }} />**

Animation drivers: Animated.timing, Animated.event, Animated.decay

Think of drivers like nodes in a graph that changes an Animated value with each frame. For instance, Animated.timing will increase a value, while Animated.decay will reduce a value over each frame.

Let’s look at an example:

    **Animated.decay(this.valueToAnimate, {
       velocity: 2.0,
       deceleration: 0.9
    }).start();**

This example launches the animation at a particular velocity and gradually decelerates at a particular time. I like to do this in a cross-platform app when docs on the material design initially surface. It feels pretty great, and there are many ways to make the animation deliver a memorable experience.

You can also use Animated.event to drive a value as your user scroll:

    **<ScrollView onScroll={Animated.event(
      [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
    )}
    >
    </ScrollView>**

In the above example, Animated.event returns a function that sets the scrollView's nativeEvent.contentOffset.y to your current scrollY state.

All in all, animated drivers can be used in association with Animated values or other Animated drivers.

As a side note, keep in mind that when a driver updates each frame, the new value will instantly update the View property. So be careful while declaring the variables and mindful of their scope while using them.

Transform methods

Transform methods enable you to convert an Animated value to a new Animated value.

You can use methods such as Animated.add(), Animated.multiply(), or Animated.interpolate() to implement transform operations. You can execute a transform operation on any node in the Animated graph with this:

    **newAnimated.Value(55).interpolate(.....) // Transformation operation using Animated.interpolate() method**

Animated props

Animated props are special nodes that map an Animated value to a prop on a component. It is generated when you render an Animated.view and assign it properties.

Let’s look at the following code snippet:

    **Var opacity = new Animated.Value(0.7);
    <Animated.View style={{ opacity }} />**

Here, I’ve added an Animated prop that converts the value 0.7 to a property. If a method updates the value, the change will be reflected in the View’s property.

The methods described above work in conjunction with, and play a crucial role in, animating objects in React Native.

The animated value for every frame of the animation is changed by the animation driver (Animated.Timing, Animated.Event, or Animated.Decay). The result is then passed along to any transformation operation, where it gets stored as the prop of the view (opacity or transform value).

The result is then handed over to the native realm by JavaScript, where the view gets updated while calling setNativeProps. Finally, it is passed over to iOS or Android, where UIView or Android.View gets updated.

Implementing animations using the Animated API and Native Driver

Since the inception of the React Native Animated API, a JavaScript driver has been used for frame execution, but it resulted in frame drop as the business logic directly falls on the JavaScript thread.

To address frame drops, the latest version of the driver was made purely native, and it is now capable of executing animations frame by frame in native realm.

The Native Driver, when used alongside the Animated API, allows the native animated module to update views directly without the need to calculate the value in JavaScript.

In order to use Native Driver, you must specify useNativeDriver to be true while configuring your animations:

    **useNativeDriver: true**

Get the Book: Performance Optimized React Applications

Using PanResponder for handling gestures in React Native

The React Native Animated API can do most of the “grunt work” for you while implementing React Native animations. However, it has a key limitation when it comes to implementing gestures in animations: It is unable to respond to gestures beyond the scope of a ScrollView.

While you can do many things with a simple ScrollView component, you will likely agree that mobile is incomplete without gestures, which are the actions users perform with animations, such as scroll or pan.

In React Native, gestures can be handled seamlessly by using PanResponder with the Animated API.

PanResponder combines various touches into a specific gesture. It makes a single touch responsive to extra touches so that gestures function smoothly.

By default, PanResponder consists of an InteractionManager handle, which blocks the events running on the JS thread from interrupting the gestures.

Improving uptime for slow Navigator transitions

Any React Native animation that involves moving from one app screen to another should usually be done using navigation components. Navigation components such as React Navigation are generally used for navigation transitions.

In React Native, navigation transitions usually happen in JavaScript threads, which can result in slow transitions in for low-end/low-memory devices (typically Androids, as iOS devices handle these more effectively). Slow navigation transitions usually happen when React Native is trying to render a new screen while an animation is still executing in the background.

To avoid such situations, InteractionManager allows long-running tasks to be scheduled after an animation or interaction has executed in the JavaScript thread.

Layout animations

LayoutAnimation is a simple API that automatically animates the view to the next consecutive position when the next layout happens. It works on the UI thread, which makes it highly performant.

Animations configured using LayoutAnimation will apply on all the components once it is called, in contrast to Animated, in which you control the specific values to animate. LayoutAnimation is capable of animating everything that changes on the next rendering, so you should call it before calling setState.

Configuring a layout animation before calling setState will ensure smooth animations in native thread and prevent your animations from being affected if code in another setState diff is triggered (under normal conditions, this would compromise your app’s animation).

Another way of using LayoutAnimation is to call it inside the component WillReceiveProps method. Simply call LayoutAnimation.configureNext by passing the appropriate parameters for animation configuration, as shown below:

**LayoutAnimation.configureNext(animationConfiguration, callbackCompletionMethod);
this.setState({ stateToChange: newStateValue });**

LayoutAnimation supports only two properties: opacity and scalability.

It identifies views by using their unique keys and computing their expected position. Moreover, it animates the frame changes as long as the view keeps the same key between changes of states.

Animations implemented using LayoutAnimation happen natively, which is good from a performance perspective, but it can be challenging if all properties need to be animated between states.

Reference sites: https://opensource.com/article/18/6/getting-started-react-native-animations

Additional resources to learn React:

The Complete React Native + Hooks Course [2020 Edition]

The Modern React Bootcamp (Hooks, Context, NextJS, Router)

Finally Understanding Javascript Closures like the Pros

bricourse — Sat, 06 Mar 2021 08:59:39 +0000

Short guide to get a better understanding of how JavaScript code works and executes by diving into one of the advanced concept: closures.

According to Mozilla Developer Network (MDN), “A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).” Simplified, this means that a function inside another function can access the variables from the outer (parent) function.

To better understand closures, take a look at scopes and their execution context.

Here is a simple code snippet:

**var hello = "Hello";**

**function sayHelloWorld() {
var world = "World";
        function wish() {
                var year = "2021";
                console.log(hello + " " + world + " "+ year);
}
wish();
}
sayHelloWorld();**

Here’s the execution context for this code:

(Nimisha Mukherjee, CC BY-SA 4.0)

Closures are created every time a function is created (at function-creation time). Every closure has three scopes:

Local scope (own scope)
Outer functions scope
Global scope

I’ll modify the above code slightly to demonstrate closure:

**var hello = "Hello";**

**var sayHelloWorld = function() {
var world = "World";
        function wish() {
                var year = "2021";
                console.log(hello + " " + world + " "+ year);
}
return wish;
}
var callFunc = sayHelloWorld();
callFunc();**

The inner function wish() is returned from the outer function before it's executed. This happens because functions in JavaScript form closures.

callFunc holds a reference to the function wish when sayHelloWorld runs
wish maintains a reference to its surrounding (lexical) environment where the variable world exists.

Private variables and methods

Natively, JavaScript does not support the creation of private variables and methods. A common and practical use of closure is to emulate private variables and methods and allow data privacy. Methods defined within the closure scope are privileged.

This code snippet captures how closures are commonly written and used in JavaScript:

**var resourceRecord = function(myName, myAddress) {
 var resourceName = myName;
 var resourceAddress = myAddress;
 var accessRight = "HR";
 return {
   changeName: function(updateName, privilege) {
     *//only HR can change the name*
     if(privilege === accessRight ) {
       resourceName = updateName;
       return true;
     } else {
       return false;
     }
   },  
   changeAddress: function(newAddress) {
     *//any associate can change the address*
     resourceAddress = newAddress;          
   },  
   showResourceDetail: function() {
     console.log ("Name:" + resourceName + " ; Address:" + resourceAddress);
   }
 }
}
*//Create first record*
var resourceRecord1 = resourceRecord("Perry","Office");
*//Create second record*
var resourceRecord2 = resourceRecord("Emma","Office");
*//Change the address on the first record*
resourceRecord1.changeAddress("Home");
resourceRecord1.changeName("Perry Berry", "Associate"); *//Output is false as only an HR can change the name*
resourceRecord2.changeName("Emma Freeman", "HR"); *//Output is true as HR changes the name*
resourceRecord1.showResourceDetail(); *//Output - Name:Perry ; Address:Home*
resourceRecord2.showResourceDetail(); *//Output - Name:Emma Freeman ; Address:Office***

The resource records (resourceRecord1 and resourceRecord2) are independent of one another. Each closure references a different version of the resourceName and resourceAddress variable through its own closure. You can also apply specific rules to how private variables need to be handled—I added a check on who can modify resourceName.

Use closures

Understanding closure is important, as it enables deeper knowledge of how variables and functions relate to one another and how JavaScript code works and executes.

Get the Book: Up to Speed with Javascript in 59 minutes

Additional resources to learn Javascript:

The Complete JavaScript Course 2021: From Zero to Expert

Javascript Tutorial and Projects Course

Reference sites: https://opensource.com/article/21/2/javascript-closures

Adding mobile-friendly interactive maps to your App the Easiest way 🗺️

bricourse — Fri, 05 Mar 2021 14:21:37 +0000

an open-source JavaScript library for mobile-friendly interactive maps

This step-by-step guide will quickly get you started on Leaflet basics, including setting up a Leaflet map, working with markers, polylines and popups, and dealing with events.

Preparing your page

Before writing any code for the map, you need to do the following preparation steps on your page:

Include Leaflet CSS file in the head section of your document:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="    crossorigin=""/>

Include Leaflet JavaScript file after Leaflet’s CSS:

<!-- Make sure you put this AFTER Leaflet's CSS --> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

Put a div element with a certain id where you want your map to be:

<div id="mapid"></div>

Make sure the map container has a defined height, for example by setting it in CSS:

#mapid { height: 180px; }

Now you’re ready to initialize the map and do some stuff with it.

Setting up the map

Let’s create a map of the center of London with pretty Mapbox Streets tiles. First we’ll initialize the map and set its view to our chosen geographical coordinates and a zoom level:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

By default (as we didn’t pass any options when creating the map instance), all mouse and touch interactions on the map are enabled, and it has zoom and attribution controls.

Note that setView call also returns the map object — most Leaflet methods act like this when they don’t return an explicit value, which allows convenient jQuery-like method chaining.

Next we’ll add a tile layer to add to our map, in this case it’s a Mapbox Streets tile layer. Creating a tile layer usually involves setting the URL template for the tile images, the attribution text and the maximum zoom level of the layer. In this example we’ll use the mapbox/streets-v11 tiles from Mapbox’s Static Tiles API (in order to use tiles from Mapbox, you must also request an access token). Because this API returns 512x512 tiles by default (instead of 256x256), we will also have to explicitly specify this and offset our zoom by a value of -1.

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

Make sure all the code is called after the div and leaflet.js inclusion. That’s it! You have a working Leaflet map now.

It’s worth noting that Leaflet is provider-agnostic, meaning that it doesn’t enforce a particular choice of providers for tiles. You can try replacing mapbox/streets-v11 with mapbox/satellite-v9, and see what happens. Also, Leaflet doesn’t even contain a single provider-specific line of code, so you’re free to use other providers if you need to (we’d suggest Mapbox though, it looks beautiful).

Whenever using anything based on OpenStreetMap, an attribution is obligatory as per the copyright notice. Most other tile providers (such as Mapbox, Stamen or Thunderforest) require an attribution as well. Make sure to give credit where credit is due.

Get the Book: Javascript challenges

Markers, circles and polygons

Besides tile layers, you can easily add other things to your map, including markers, polylines, polygons, circles, and popups. Let’s add a marker:

var marker = L.marker([51.5, -0.09]).addTo(mymap);

Adding a circle is the same (except for specifying the radius in meters as a second argument), but lets you control how it looks by passing options as the last argument when creating the object:

var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(mymap);

Adding a polygon is as easy:

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);

Working with popups

Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this:

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

Try clicking on our objects. The bindPopup method attaches a popup with the specified HTML content to your marker so the popup appears when you click on the object, and the openPopup method (for markers only) immediately opens the attached popup.

You can also use popups as layers (when you need something more than attaching a popup to an object):

var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(mymap);

Here we use openOn instead of addTo because it handles automatic closing of a previously opened popup when opening a new one which is good for usability.

Dealing with events

Every time something happens in Leaflet, e.g. user clicks on a marker or map zoom changes, the corresponding object sends an event which you can subscribe to with a function. It allows you to react to user interaction:

function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}

mymap.on('click', onMapClick);

Each object has its own set of events — see documentation for details. The first argument of the listener function is an event object — it contains useful information about the event that happened. For example, map click event object (e in the example above) has latlng property which is a location at which the click occurred.

Let’s improve our example by using a popup instead of an alert:

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}

mymap.on('click', onMapClick);

Additional resources to learn Javascript:

The Complete JavaScript Course 2021: From Zero to Expert

Google Maps JavaScript API — Complete Training

Making your Python Debugging Sweeter with some “IceCream” 🍦😉

bricourse — Fri, 05 Mar 2021 11:22:47 +0000

Never use print() to debug again.

IceCream — Never use print() to debug again

Do you ever use print() or log() to debug your code? Of course you do. IceCream, or ic for short, makes print debugging a little sweeter.

Inspect Variables

Have you ever printed variables or expressions to debug your program? If you’ve ever typed something like

    print(foo('123'))

or the more thorough

    print("foo('123')", foo('123'))

then ic() is here to help. With arguments, ic() inspects itself and prints both its own arguments and the values of those arguments.

    from icecream import ic

    def foo(i):
        return i + 333

    ic(foo(123))

Prints

    ic| foo(123): 456

Similarly,

    d = {'key': {1: 'one'}}
    ic(d['key'][1])

    class klass():
        attr = 'yep'
    ic(klass.attr)

Prints

    ic| d['key'][1]: 'one'
    ic| klass.attr: 'yep'

Just give ic() a variable or expression and you're done. Easy.

Inspect Execution

Have you ever used print() to determine which parts of your program are executed, and in which order they're executed? For example, if you've ever added print statements to debug code like

    def foo():
        print(0)
        first()

        if expression:
            print(1)
            second()
        else:
            print(2)
            third()

then ic() helps here, too. Without arguments, ic() inspects itself and prints the calling filename, line number, and parent function.

    from icecream import ic

    def foo():
        ic()
        first()

        if expression:
            ic()
            second()
        else:
            ic()
            third()

Prints

    ic| example.py:4 in foo()
    ic| example.py:11 in foo()

Just call ic() and you're done. Simple.

Return Value

ic() returns its argument(s), so ic() can easily be inserted into pre-existing code.

    >>> a = 6
    >>> def half(i):
    >>>     return i / 2
    >>> b = half(ic(a))
    ic| a: 6
    >>> ic(b)
    ic| b: 3

Miscellaneous

ic.format(*args) is like ic() but the output is returned as a string instead of written to stderr.

    >>> from icecream import ic
    >>> s = 'sup'
    >>> out = ic.format(s)
    >>> print(out)
    ic| s: 'sup'

Additionally, ic()'s output can be entirely disabled, and later re-enabled, with ic.disable() and ic.enable() respectively.

    from icecream import ic

    ic(1)

    ic.disable()
    ic(2)

    ic.enable()
    ic(3)

Prints

    ic| 1: 1
    ic| 3: 3

ic() continues to return its arguments when disabled, of course; no existing code with ic() breaks.

Get the book: Learn Python Programming from Scratch

Import Tricks

To make ic() available in every file without needing to be imported in every file, you can install() it. For example, in a root A.py:

    #!/usr/bin/env python3
    # -*- coding: utf-8 -*-

    from icecream import install
    install()

    from B import foo
    foo()

and then in B.py, which is imported by A.py, just call ic():

    # -*- coding: utf-8 -*-

    def foo():
        x = 3
        ic(x)

install() adds ic() to the builtins module, which is shared amongst all files imported by the interpreter. Similarly, ic() can later be uninstall()ed, too.

ic() can also be imported in a manner that fails gracefully if IceCream isn't installed, like in production environments (i.e. not development). To that end, this fallback import snippet may prove useful:

    try:
        from icecream import ic
    except ImportError:  # Graceful fallback if IceCream isn't installed.
        ic = lambda *a: None if not a else (a[0] if len(a) == 1 else a)  # noqa

Configuration

ic.configureOutput(prefix, outputFunction, argToStringFunction, includeContext) can be used to adopt a custom output prefix (the default is ic| ), change the output function (default is to write to stderr), customize how arguments are serialized to strings, and/or include the ic() call's context (filename, line number, and parent function) in ic() output with arguments.

    >>> from icecream import ic
    >>> ic.configureOutput(prefix='hello -> ')
    >>> ic('world')
    hello -> 'world'

prefix can optionally be a function, too.

    >>> import time
    >>> from icecream import ic
    >>>  
    >>> def unixTimestamp():
    >>>     return '%i |> ' % int(time.time())
    >>>
    >>> ic.configureOutput(prefix=unixTimestamp)
    >>> ic('world')
    1519185860 |> 'world': 'world'

outputFunction, if provided, is called with ic()'s output instead of that output being written to stderr (the default).

    >>> import logging
    >>> from icecream import ic
    >>>
    >>> def warn(s):
    >>>     logging.warning(s)
    >>>
    >>> ic.configureOutput(outputFunction=warn)
    >>> ic('eep')
    WARNING:root:ic| 'eep': 'eep'

argToStringFunction, if provided, is called with argument values to be serialized to displayable strings. The default is PrettyPrint's pprint.pformat(), but this can be changed to, for example, handle non-standard datatypes in a custom fashion.

    >>> from icecream import ic
    >>> 
    >>> def toString(obj):
    >>>    if isinstance(obj, str):
    >>>        return '[!string %r with length %i!]' % (obj, len(obj))
    >>>    return repr(obj)
    >>> 
    >>> ic.configureOutput(argToStringFunction=toString)
    >>> ic(7, 'hello')
    ic| 7: 7, 'hello': [!string 'hello' with length 5!]

includeContext, if provided and True, adds the ic() call's filename, line number, and parent function to ic()'s output.

    >>> from icecream import ic
    >>> ic.configureOutput(includeContext=True)
    >>> 
    >>> def foo():
    >>>   ic('str')
    >>> foo()
    ic| example.py:12 in foo()- 'str': 'str'

includeContext is False by default.

Installation

Installing IceCream with pip is easy.

    $ pip install icecream

Github: https://github.com/gruns/icecream

Additional Resources to learn Python:

The Python Mega Course: Build 10 Real World Applications

Learn Python Programming Masterclass

Making your App really Sexy with a React Singleton Hook

bricourse — Thu, 04 Mar 2021 08:10:13 +0000

Create singleton hook from regular react hook

What is a singleton hook

Singleton hooks very similar to React Context in terms of functionality. Each singleton hook has a body, you might think of it as of Context Provider body. Hook has a return value, it’s similar to the value provided by context. Using a singleton hook from a component is like consuming a context.
Singleton hooks are lazy. The body is not executed until the hook is called by some component or other hook. Once loaded, the hook body remains loaded forever. If you want to eager-load some Singleton hooks, use them at the top-level component of your App.
Singleton hooks do not require a provider or a special App structure. Under the hood, it uses useState/useRef/useEffect and some less-known react features for performance and portability.
It’s possible to mix into single app Singleton hooks, React-Redux hooks api, React Context hooks and any custom

Installation

To use React Singleton Hook with your React app, install it as a dependency:

    # If you use npm:
    npm install react-singleton-hook

    # Or if you use Yarn:
    yarn add react-singleton-hook

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

Get the book: React js Hooks PDF

Examples

convert any custom hook into singleton hook

In the code below, the user profile is not fetched until useUserProfile used by some component, and once fetched it is never reloaded again, the hook remains mounted forever into hidden component.

    import  { useEffect, useState } from 'react';
    import { singletonHook } from 'react-singleton-hook';
    const api = { async getMe() { return { name: 'test' }; } };

    const init = { loading: true };

    const useUserProfileImpl = () => {
      const [profile, setProfile] = useState(init);
      useEffect(() => {
        api.getMe()
          .then(profile => setProfile({ profile }))
          .catch(error => setProfile({ error }));
      }, []);

      return profile;
    };


    export const useUserProfile = singletonHook(init, useUserProfileImpl);

dark/light mode switch

Whenever Configurator changes darkMode, all subscribed components are updated.

    /***************    file:src/services/darkMode.js    ***************/  
    import { useState } from 'react';
    import { singletonHook } from 'react-singleton-hook';

    const initDarkMode = false;
    let globalSetMode = () => { throw new Error('you must useDarkMode before setting its state'); };

    export const useDarkMode = singletonHook(initDarkMode, () => {
      const [mode, setMode] = useState(initDarkMode);
      globalSetMode = setMode;
      return mode;
    });

    export const setDarkMode = mode => globalSetMode(mode);


    /***************    file:src/compoents/App.js    ***************/

    import  React from 'react';
    import { useDarkMode, setDarkMode } from 'src/services/darkMode';

    const Consumer1 = () => {
      const mode = useDarkMode();
      return <div className={`is-dark-${mode}`}>Consumer1 - {`${mode}`}</div>;
    };

    const Consumer2 = () => {
      const mode = useDarkMode();
      return <div className={`is-dark-${mode}`}>Consumer2 - {`${mode}`}</div>;
    };

    const Configurator = () => {
      const mode = useDarkMode();
      return <button onClick={() => setDarkMode(!mode)}>Toggle dark/light</button>;
    };

imperatively read hook state for non-react code

    import { useState } from 'react';
    import { singletonHook } from 'react-singleton-hook';

    const initDarkMode = false;
    let currentMode = initDarkMode;
    let globalSetMode = () => { throw new Error(`you must useDarkMode before setting its state`); };

    export const useDarkMode = singletonHook(initDarkMode, () => {
      const [mode, setMode] = useState(initDarkMode);
      globalSetMode = setMode;
      currentMode = mode;
      return mode;
    });

    export const setDarkMode = mode => globalSetMode(mode);
    export const getDarkMode = () => currentMode;

use react-redux (or any other context) inside singletonHook

To use react-redux or any other context-based functionality, singleton hooks should be mounted under provider in your app. To do that, import SingletonHooksContainer from react-singleton-hook and mount anywhere in you app. SingletonHooksContainer must be rendered ealier then any component using singleton hook! By default you are not required to dial with a SingletonHooksContainer, we run this component internally in separate react app.

    /***************    file:src/services/currentUser.js    ***************/
    import { singletonHook } from 'react-singleton-hook';
    import { useSelector } from 'react-redux';

    const init = { loading: true };
    const useCurrentUserImpl = () => {
      const session = useSelector(state => state.session);
      if (session.loading) return init;
      return session.user;
    };

    export const useCurrentUser = singletonHook(init, useCurrentUserImpl);

    /***************    file:src/App.js    ***************/

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { SingletonHooksContainer } from 'react-singleton-hook';
    import { Provider } from 'react-redux';
    import store from 'src/store';
    import App from 'src/views';

    const app = (
      <Provider store={store}>
        <>
          <SingletonHooksContainer/>
          <App/>
        </>
      </Provider>
    );

    ReactDOM.render(app, document.getElementById('root'));

### top-level components updated before low-level components

    /***************    file:src/services/session.js    ***************/

    import { useEffect, useState } from 'react';
    import { singletonHook } from 'react-singleton-hook';

    const initState = { loading: true };
    let setSessionGlobal = () => { throw new Error('you must useSession before login'); };

    const useSessionImpl = () => {
      const [session, setSession] = useState(initState);
      setSessionGlobal = setSession;
      useEffect(() => { setSession({ loggedIn: false }); }, []);
      return session;
    };

    export const useSession = singletonHook(initState, useSessionImpl);

    export const login = (name, pass) => {
      setSessionGlobal({ loggedIn: true, user: { name: 'test' } });
    };

    /***************    file:src/index.js    ***************/
    import React, { useEffect } from 'react';
    import ReactDOM from 'react-dom';
    import { login, useSession } from 'src/services/session';

    const LoggedInView = () => {
      const session = useSession();
      console.log(`LoggerInView rendered with ${JSON.stringify(session)}`);
      return null;
    };

    const LoggedOutView = () => {
      const session = useSession();
      console.log(`LoggedOutView rendered with ${JSON.stringify(session)}`);
      return null;
    };

    const WaitingForSessionView = () => {
      const session = useSession();
      console.log(`WaitingForSessionView rendered with ${JSON.stringify(session)}`);
      return null;
    };

    const MainComponent = () => {
      const session = useSession();

      useEffect(() => {
        setTimeout(() => { login('testuser'); }, 2000);
      }, []);

      console.log(`MainComponent rendered with ${JSON.stringify(session)}`);

      if (session.loading) return <WaitingForSessionView/>;
      if (session.loggedIn) return <LoggedInView/>;
      return <LoggedOutView/>;
    };


    ReactDOM.render(<MainComponent/>, document.getElementById('root'));

    /***************    console.log    ***************/
    /*

    MainComponent rendered with {"loading":true}
    WaitingForSessionView rendered with {"loading":true}
    MainComponent rendered with {"loggedIn":false}
    LoggedOutView rendered with {"loggedIn":false}
    MainComponent rendered with {"loggedIn":true,"user":{"name":"test"}}
    LoggerInView rendered with {"loggedIn":true,"user":{"name":"test"}}

    */

Initial state callback

As of version 3.0, singletonHook accepts a callback that calculates initial state instead of predefined initial state. This callback is called once and only when the value is required. You can use it to calculate expensive initial values or avoid an extra render (and a state flickering) when initial state changes before any component consumes the hook:

example: subscribe components to pre-existing get/set data module

    /***************    file:src/services/darkMode.js    ***************/

    import { useState } from 'react';
    import { singletonHook } from 'react-singleton-hook';

    let isDarkMode = false; // the state of the module
    let updateSubscribers = (mode) => {}; //update subscribers callback - do nothing by default

    // pre-existing functions to manipulate the state
    export const getDarkMode = () => isDarkMode;

    export const setDarkMode = (newMode) => {
     isDarkMode = newMode;
     updateSubscribers(isDarkMode); // call updateSubscribers when setting new state
    };

    // new function - custom hook for components to subscribe.
    // using getDarkMode as an init callback to get most relevant state
    export const useDarkMode = singletonHook(getDarkMode, () => {
     const [mode, setMode] = useState(getDarkMode);
     updateSubscribers = setMode; // subscribing for further updates
     return mode;
    });

    /***************    file:src/index.js    ***************/

    // you can call setter and getter any time
    setDarkMode(true);
    setInterval(() => setDarkMode(!getDarkMode()), 2000);

    const App = () => {
     // component will be updated on darkMode change 
     // on first render "mode" is set to the current value getDarkMode returns
     const mode = useDarkMode();
     return <div className={`is-dark-${mode}`}>App - {`${mode}`}</div>;
    };

Github: https://github.com/Light-Keeper/react-singleton-hook

Additional Resources to learn React:

Django with React | An Ecommerce Website

Redux Saga (with React and Redux): Fast-track intro course

Making Your Life Easier with the Top 5 Ansible Modules

bricourse — Tue, 02 Mar 2021 07:05:55 +0000

Ansible is a radically simple IT automation engine that automates cloud provisioning, configuration management, application deployment, intra-service orchestration, and many other IT needs.

Designed for multi-tier deployments since day one, Ansible models your IT infrastructure by describing how all of your systems inter-relate, rather than just managing one system at a time.

It uses no agents and no additional custom security infrastructure, so it’s easy to deploy — and most importantly, it uses a very simple language (YAML, in the form of Ansible Playbooks) that allow you to describe your automation jobs in a way that approaches plain English.

5. authorized_key

Secure shell (SSH) is at the heart of Ansible, at least for almost everything besides Windows. Key (no pun intended) to using SSH efficiently with Ansible is… keys! Slight aside — there are a lot of very cool things you can do for security with SSH keys. It’s worth perusing the **authorized_keys **section of the sshd manual page. Managing SSH keys can become laborious if you’re getting into the realms of granular user access, and although we could do it with either of my next two favourites, I prefer to use the module because it enables easy management through variables.

4. file

Besides the obvious function of placing a file somewhere, the file module also sets ownership and permissions. I’d say that’s a lot of bang for your buck with one module. I’d proffer a substantial portion of security relates to setting permissions too, so the file module plays nicely with authorized_keys.

3. template

There are so many ways to manipulate the contents of files, and I see lots of folk use **lineinfile. I’ve used it myself for small tasks. However, the **template module is so much clearer because you maintain the entire file for context. My preference is to write Ansible content in such a way that anyone can understand it easily — which to me means not making it hard to understand what is happening. Use of template means being able to see the entire file you’re putting into place, complete with the variables you are using to change pieces.

2. uri

Many modules in the current distribution leverage Ansible as an orchestrator. They talk to another service, rather than doing something specific like putting a file into place. Usually, that talking is over HTTP too. In the days before many of these modules existed, you could program an API directly using the uri module. It’s a powerful access tool, enabling you to do a lot. I wouldn’t be without it in my fictitious Ansible shed.

1. shell

The joker card in our pack. The Swiss Army Knife. If you’re absolutely stuck for how to control something else, use shell. Some will argue we’re now talking about making Ansible a Bash script — but, I would say it’s still better because with the use of the name parameter in your plays and roles, you document every step. To me, that’s as big a bonus as anything. Back in the days when I was still consulting, I once helped a database administrator (DBA) migrate to Ansible. The DBA wasn’t one for change and pushed back at changing working methods. So, to ease into the Ansible way, we called some existing DB management scripts from Ansible using the shell module. With an informative name statement to accompany the task.

Get the book: Sysadmin Interview Questions

Additional learning resources:

Ansible Advanced — Hands-On — DevOps

Mastering Ansible

reference sites: https://opensource.com/article/19/11/ansible-modules

The Only React Hook for Sound Effects You Will Ever Need

bricourse — Thu, 25 Feb 2021 07:12:30 +0000

**useSound **A React Hook for Sound Effects

The web needs more (tasteful) sounds!

👂 Lets your website communicate using 2 human senses instead of 1
🔥 Declarative Hooks API
⚡️ <1kb bytes (gzip) in your bundle! ~10kb loaded async.
✨ Built with Typescript
🗣 Uses a powerful, battle-tested audio utility: Howler.js

Installation

Package can be added using yarn:

yarn add use-sound

Or, use NPM:

npm install use-sound

UMD build available on unpkg.

Demo

The tutorial includes many demos, as well as instructions for finding and preparing sound effects. It’s a great place to start.

You can also view the storybook, which includes lots of quick examples.

Get the Book: Collection of React Hooks PDF

Play sound on click

import useSound from 'use-sound';

import boopSfx from '../../sounds/boop.mp3';

const BoopButton = () => {
  const [play] = useSound(boopSfx);

  return <button onClick={play}>Boop!</button>;
};

Playing on hover

This demo only plays the sound while hovering over an element. The sound pauses when the mouse leaves the element:

NOTE: Many browsers disable sounds until the user has clicked somewhere on the page. If you’re not hearing anything with this example, try clicking anywhere and trying again.

import useSound from 'use-sound';

import fanfareSfx from '../../sounds/fanfare.mp3';

const FanfareButton = () => {
  const [play, { stop }] = useSound(fanfareSfx);

  return (
    <button onMouseEnter={play} onMouseLeave={stop}>
      <span role="img" aria-label="trumpet">
        🎺
      </span>
    </button>
  );
};

Increase pitch on every click

With the playbackRate option, you can change the speed/pitch of the sample. This example plays a sound and makes it 10% faster each time:

import useSound from 'use-sound';

import glugSfx from '../../sounds/glug.mp3';

export const RisingPitch = () => {
  const [playbackRate, setPlaybackRate] = React.useState(0.75);

  const [play] = useSound(glugSfx, {
    playbackRate,
    // `interrupt` ensures that if the sound starts again before it's
    // ended, it will truncate it. Otherwise, the sound can overlap.
    interrupt: true,
  });

  const handleClick = () => {
    setPlaybackRate(playbackRate + 0.1);
    play();
  };

  return (
    <Button onClick={handleClick}>
      <span role="img" aria-label="Person with lines near mouth">
        🗣
      </span>
    </Button>
  );
};

API Documentation

The useSound hook takes two arguments:

A URL to the sound that it wil load
A config object (HookOptions)

It produces an array with two values:

A function you can call to trigger the sound
An object with additional data and controls (ExposedData)

When calling the function to play the sound, you can pass it a set of options (PlayOptions).

Let’s go through each of these in turn.

HookOptions

When calling useSound, you can pass it a variety of options:

NameValuevolumenumberplaybackRatenumberinterruptbooleansoundEnabledbooleanspriteSpriteMap[delegated] —

volume is a number from 0 to 1, where 1 is full volume and 0 is comletely muted.
playbackRate is a number from 0.5 to 4. It can be used to slow down or speed up the sample. Like a turntable, changes to speed also affect pitch.
interrupt specifies whether or not the sound should be able to "overlap" if the play function is called again before the sound has ended.
soundEnabled allows you to pass a value (typically from context or redux or something) to mute all sounds. Note that this can be overridden in the PlayOptions, see below
sprite allows you to use a single useSound hook for multiple sound effects. See “Sprites” below.

[delegated] refers to the fact that any additional argument you pass in HookOptions will be forwarded to the Howl constructor. See "Escape hatches" below for more information.

The play function

When calling the hook, you get back a play function as the first item in the tuple:

const [play] = useSound('/meow.mp3');
//      ^ What we're talking about

You can call this function without any arguments when you want to trigger the sound. You can also call it with a PlayOptions object:

NameValueidstringforceSoundEnabledbooleanplaybackRatenumber

id is used for sprite identification. See “Sprites” below.
forceSoundEnabled allows you to override the soundEnabled boolean passed to HookOptions. You generally never want to do this. The only exception I've found: triggering a sound on the "Mute" button.
playbackRate is another way you can set a new playback rate, same as in HookOptions. In general you should prefer to do it through HookOptions, this is an escape hatch.

ExposedData

The hook produces a tuple with 2 options, the play function and an ExposedData object:

const [play, exposedData] = useSound('/meow.mp3');
//                ^ What we're talking about

NameValuestopfunction ((id?: string) => void)pausefunction ((id?: string) => void)isPlayingbooleandurationnumber (or null)soundHowl (or null)

stop is a function you can use to pre-emptively halt the sound.
pause is like stop, except it can be resumed from the same point. Unless you know you'll want to resume, you should use stop; pause hogs resources, since it expects to be resumed at some point.
isPlaying lets you know whether this sound is currently playing or not. When the sound reaches the end, or it's interrupted with stop or paused, this value will flip back to false. You can use this to show some UI only while the sound is playing.
duration is the length of the sample, in milliseconds. It will be null until the sample has been loaded. Note that for sprites, it's the length of the entire file.
sound is an escape hatch. It grants you access to the underlying Howl instance. See the Howler documentation to learn more about how to use it. Note that this will be null for the first few moments after the component mounts.

Advanced

Sprites

An audio sprite is a single audio file that holds multiple samples. Instead of loading many individual sounds, you can load a single file and slice it up into multiple sections which can be triggered independently.

There can be a performance benefit to this, since it’s less parallel network requests, but it can also be worth doing this if a single component needs multiple samples. See the Drum Machine story for an example.

For sprites, we’ll need to define a SpriteMap. It looks like this:

const spriteMap = {
  laser: [0, 300],
  explosion: [1000, 300],
  meow: [2000, 75],
};

SpriteMap is an object. The keys are the ids for individual sounds. The value is a tuple (array of fixed length) with 2 items:

The starting time of the sample, in milliseconds, counted from the very beginning of the sample
The length of the sample, in milliseconds.

This visualization might make it clearer:

We can pass our SpriteMap as one of our HookOptions:

const [play] = useSound('/path/to/sprite.mp3', {
  sprite: {
    laser: [0, 300],
    explosion: [1000, 300],
    meow: [2000, 75],
  },
});

To play a specific sprite, we’ll pass its id when calling the play function:

<button
  onClick={() => play({id: 'laser'})}
>

Escape hatches

Howler is a very powerful library, and we’ve only exposed a tiny slice of what it can do in useSound. We expose two escape hatches to give you more control.

First, any unrecognized option you pass to HookOptions will be delegated to Howl. You can see the full list of options in the Howler docs. Here's an example of how we can use onend to fire a function when our sound stops playing:

const [play] = useSound('/thing.mp3', {
  onend: () => {
    console.info('Sound ended!');
  },
});

If you need more control, you should be able to use the sound object directly, which is an instance of Howler.

For example: Howler exposes a fade method, which lets you fade a sound in or out. You can call this method directly on the sound object:

const Arcade = () => {
  const [play, { sound }] = useSound('/win-theme.mp3');

  return (
    <button
      onClick={() => {
        // You win! Fade in the victory theme
        sound.fade(0, 1, 1000);
      }}
    >
      Click to win
    </button>
  );
};

Additional Resources for learning React:

React Hooks Video Player

React — The Complete Guide (incl Hooks, React Router, Redux)

Github: https://github.com/joshwcomeau/use-sound

DEV Community: bricourse

Most Successful Developers use Python Virtual Environments. Do you know how ?

Installing virtualenvwrapper

Creating a new virtual environment

Advanced features

The Ultimate Python Dictionaries Tutorial for Beginners

1. Open a new notebook in Jupyter

2. Create a key-value pair

3. Access a dictionary value by its key

4. Update an existing key

5. Add a new key

Using dictionaries

Finally Understanding the Advanced uses of "This" in Javascript

If the function is defined as an arrow function: {: #arrow-functions }

Other examples

'Bound' instance methods

Otherwise, if the function/class is called with new: {: #new }

Other examples

Otherwise, if the function has a 'bound' this value: {: #bound }

Other examples

Otherwise, if this is set at call-time: {: #call-apply }

Otherwise, if the function is called via a parent object (parent.func()): {: #object-member }

Otherwise, if the function or parent scope is in strict mode: {: #strict }

Otherwise: {: #otherwise }

Taking your JS Skills to the Next Level { with The Most Powerful JS_Tutorial }

Quick Access Links

1. Basics

i. Primitives: Number, String, Boolean (and some special ones)

ii. Operators aka weirdly written functions

2. More Basic Syntax

i. Variables

ii. Arrays

iii. Logic and Control Structures

3. Objects and Functions

i. Objects

ii. Functions

iii. Bind, Call and Apply

4. Function Execution, Variable Scope, Closures & Callbacks

i. Hoisting

ii. Scope Chain

iii. Closures

iv. Callbacks

5. Object-Oriented JS and Prototypal Inheritance

i. Function Constructors

ii. Prototypes

iii. Prototypal Inheritance aka setting prototypes of new objects

iv. Built-In Constructors

6. Bugs and Error Handling

7. New ES6 stuff

Arrows

Classes

String Interpolation

let and const

Generator

Maps, Sets, WeakMap, WeakSet

Promises

Modules

Proxy

The Most Powerful React JS Cheat Sheet

Components

Import multiple exports

Properties

States

Nesting

Children

Defaults

Setting default props

Setting default state

Other components

Functional components

Pure components

Component API

Lifecycle

Mounting

Updating

Hooks (New)

State Hook

Declaring multiple state variables

Effect hook

Building your own hooks

Otherwise, if the function/class is called with `new`: {: #new }

Otherwise, if the function has a 'bound' `this` value: {: #bound }

Otherwise, if `this` is set at call-time: {: #call-apply }

Otherwise, if the function is called via a parent object (`parent.func()`): {: #object-member }

`let` and `const`