Forem: Senichi

Object is possibly 'undefined'.ts(2532)

Senichi — Fri, 08 Jul 2022 08:00:44 +0000

Let me tell you now, there is no solution, but there is a method of deal with the error.

Microsoft team member for Typescript said in a related trend that "This is working as intended".

Many developers are talking about this from different use cases as arrays, function callbacks, string values, html elements inside a React components (my case), and the list grows and grows...

I could found suggested solution that it doesn't worked, as background is that "The type system would effectively have to make a distinction between empty and non-empty arrays which isn't something we track".

So, a few links where this is discussed:

Suppressing errors

the deal

Suppress errors in .ts files using ’// @ts-ignore’ comments

A // @ts-ignore comment suppresses all errors that originate on the following line. It is recommended practice to have the remainder of the comment following @ts-ignore explain which error is being suppressed.

Please note that this comment only suppresses the error reporting, and we recommend you use this comments very sparingly.

How I solve this

"the right combination of types and assertion"

So, TypeScript also has a special syntax for removing null and undefined from a type without doing any explicit checking. Writing ! after any expression is effectively a type assertion that the value isn’t null or undefined:

# case
const textElementRef = useRef();
// this provokes the error in the next line
const text = textElementRef.current;
// Object is possibly 'undefined'.ts(2532)'
const textWidth = text.offsetWidth;

# what I was trying
const textElementRef = useRef();
const text = textElementRef.current; 
const textWidth = text!.offsetWidth; <-- type assertion
// causing : Property 'offsetWidth' does not exist on type 'never'.ts(2339)

# then I have to change the useRef definition too
const textElementRef = useRef<HTMLSpanElement>(null);
const text = textElementRef.current!; <-- type assertion
const textWidth = text.offsetWidth;

How-to find specific information within huge Git Log

Senichi — Wed, 01 Jun 2022 10:54:06 +0000

This is a hack (not even as much xD), not feature. A simple solution to achieve a complex task powered by the command-line.

redirect the output of git log to a file as git log > .tmp.gitlog.txt
use vim to open that file and search for the query
- use / to activate search
- introduce the query to be found

Hope it helps.

Kubernetes & Docker -> Deploy a Flask Application - Manually (Simple Steps)

Senichi — Wed, 27 Oct 2021 20:16:34 +0000

1. Create a named Kubernetes cluster

eksctl create cluster --name [cluster-name]  --profile [profile-name]

2. Image registry (get or create)

Create/Build a Docker Image and push it to their Docker Hub repository.

Docker images are loaded from the container registry into Kubernetes pods. Access to the pods are exposed to consumers through a service.

3. Deployment

The manual deployment needs a YAML file that will describe things like number of replicas, deployment strategy, Docker image name, and port on which the application can be accessed.

1. Deployment mockup yaml file

apiVersion: apps/v1
kind: Deployment
metadata:
  name: simple-flask-deployment
  labels:
    app: simple-flask
spec:
  replicas: 3
  selector:
    matchLabels:
      app: simple-flask
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxUnavailable: 2
      maxSurge: 2
  template:
    metadata:
      labels:
        app: simple-flask
    spec:
      containers:
      - name: simple-flask
        image: [docker-username]/[image-name]
        securityContext:
          privileged: false
          readOnlyRootFilesystem: false
          allowPrivilegeEscalation: false
        ports:
          - containerPort: 8080

2. In your terminal

Navigate to deployment-mockup-yaml-file, and run:

kubectl apply -f deployment.yml

# It will show the message as :
# deployment.apps/simple-flask-deployment created

3. Other useful commands are:

# Verify the deployment
kubectl get deployments

# Check the rollout status
kubectl rollout status deployment/simple-flask-deployment

# Show the pods in the cluster
kubectl get pods

# Show the services in the cluster
kubectl describe services

# Display information about the cluster
kubectl cluster-info

4. Troubleshoot:

If your pods do not show up as "Ready" while running the kubectl get nodes1 command, use the following troubleshooting tips:

# List all namespaces, all pods
kubectl get all -A

# Show all events
kubectl get events -w

# Show component status
kubectl get componentstatuses

5. Clean up

Let's delete the deployment as well the Kubernetes cluster:

# Delete your deployment
kubectl delete deployments/simple-flask-deployment

# Tear down your cluster
eksctl delete cluster eksctl-demo --profile <profile-name>

Kubernetes Cheatsheet

What-is Flask decorator

Senichi — Sat, 09 Oct 2021 16:55:47 +0000

A function that takes another function as a parameter and returns another function.

A function can be used as a parameter, a return value, and can be assigned to a variable.

Definition :
A decorator is a function that takes another function and extends the behavior of the latter function without explicitly modifying it.

Mechanism :

@decorator
def f(argument):

f is replaced by decorator(f)
f(argument) is equivalent decorator(f)(argument)

@wraps as a decorator

Decorators work as wrappers.

Modifying the behavior of the code, before and after a target function execution.

Allow to augmenting the original functionality, without the need to modify the function itself.

Thus decorating it.

Composition of Decorators

Function decorators are simply wrappers to existing functions.

Let's consider a function that wraps the string output of another function by p tags.

def get_text(name):
   return "lorem ipsum, {0} dolor sit amet".format(name)

def p_decorate(func):
   def func_wrapper(name):
       return "<p>{0}</p>".format(func(name))
   return func_wrapper

my_get_text = p_decorate(get_text)

print(my_get_text("John"))

# <p>Outputs lorem ipsum, John dolor sit amet</p>

Decorator Composition : syntactic sugar

There is a neat shortcut, mention the name of the decorating function before the function to be decorated. The name of the decorator should be perpended with an @ symbol.

def p_decorate(func):
   def func_wrapper(name):
       return "<p>{0}</p>".format(func(name))
   return func_wrapper

@p_decorate
def get_text(name):
   return "lorem ipsum, {0} dolor sit amet".format(name)

print(get_text("John"))

# Outputs <p>lorem ipsum, John dolor sit amet</p>

This is a short resume of this coders awesome articles

https://medium.com/@nguyenkims/python-decorator-and-flask-3954dd186cda

https://www.thecodeship.com/patterns/guide-to-python-function-decorators/

common @wrap example

This example show how to implement jwt check.

from functools import wraps

def get_token_auth_header():
  if 'Authorization' not in request.headers:
    abort(401)
  auth_header = request.headers['Authorization']
  header_parts = auth_header.split(' ')
  if len(header_parts) != 2:
    abort(401)
  elif header_parts[0].lower() != 'bearer':
    abort(401)
  return header_parts[1]

def requires_auth(f):
  @wraps(f)
  def wrapper(*args, **kwargs):
    jwt = get_token_auth_header()
    return f(jwt, *args, **kwargs)

@app.route('/taget')
@requires_auth
def target():
  print(jwt)
  return 'welcome to target'

How-To check a pattern into a string & retrieve it

Senichi — Fri, 01 Oct 2021 08:27:31 +0000

This is an interview test so, there are no unique questions, even correct or incorrect. Because it was meant to see how a developer think and develop itself with their knowledge.

This was my answer...

const string = 'qweaawq23,4ñmñleaaaaa23rt-.y90_4gsdn_klaaaaa23-4nper-etrç.mn4wetaaaaaaaaasx+';
const patt = /a+/g;

const result = string.match(patt)
// what catch the regex
console.log(result)
const arrSizes = result.map( item => item.length )
let bigger = []
let longest = 0
result.forEach( (item, index) => {
  if( item.length > longest ){
    bigger = [index, item, item.length]
    longest = parseInt(item.length)
  }
})
// what's the result of the loop
console.log(bigger)
// checking correlation
console.log(result[3])

Why do this ?

Checking a pattern it's not easy, even less into a string because there are no marks or flags that tell us by them self when something start and end. So, get that coordinates is the developer task.

My original idea was to extract all the patterns encountered in the string, get them into an array and compare each other to find the longest, maybe with a kind of loop.

So, regex was my first choice: but why? Because Regex are very "smart" or very efficient looking for things, they are in many situations the best option to find certain kinds of patterns: like strings.

But, that was my firts and easiest option so I decide to try before with a for loop. Result: DISASTER

The `for loop` disaster: a horror experience based in a real history.

Trying a for loop was very very cubersome... Because that from before: there are no marks or flags that tell us by them self when something start and end. So trying to set this marks was veeeeeeeeeeeeeeeeeeeeery borring and not efficient from my perspective, even more, this reinforced the idea about use regex.

Some problems encountered was:

build a stop mark for : pattern comparison
build a stop mark for : length counter between candidates
exponentiation of variables needed
etc...

regex : a happy ending

The proper expression let me fit the requirements to a logic, like "recognize one or more coincidences of 'a' (/a+/) in the string (g)" : /a+/g

From that point the logic flows into more or less basic structure.

So, to apply .match method to the string gives me the array of patterns I dream at the first look.

Then, .map (that return a new array) provides the longest length but I thought that It was not useful to retrieve the longest pattern if we dont know where is it or we cant have it, so...

From my personal point of view to achieve this, an iteration over each of the items could be a good option, in this case where time or memory consumption it wasn't a must.

Finally, in the sake of keep all simple I use an array variable called bigger to save the bigger pattern and their index to have a reference of their position in the result array to be retrieved.

A numeric variable with the longest value, because this logic is inspired in a binary algoritmic search so, my desition was to compare the first item length with zero and whatever value it was this allow to continue the comparisions in a progresive manner.

Why is inspired in a binary search? Because comparisons increase in an exponential manner. This means that 4 items would give six posibilities and 10 items would give 45. So, in a binary search inspiration logic one value would be compared with one another value that result in one possibility, keeping things flat.

By last, a if statement check an absolute length that belongs to the longest pattern with the actual length. If true, an array was choosen to keep the pattern and their index.

Conclusion

Awesome super fun test, the result is a logic that return the index of the longest pattern, the pattern, and their length.

unsafe react hooks

Senichi — Mon, 20 Sep 2021 23:01:20 +0000

One of the biggest driving forces behind React 17 is asynchronous rendering which aims to improve both the user and developer experience.

In React v16.3 the React team introduced few new lifecycles and deprecated some of the old ones.

Not due to security, these lifecycles will be more likely to have bugs in future versions of React, especially once async rendering is enabled.

To allow asynchronous rendering, there has to be a change in the component lifecycle and this involves deprecation of lifecycle methods which were introduced without async rendering in mind.

componentWillMount → UNSAFE_componentWillMount
componentWillReceiveProps → UNSAFE_componentWillReceiveProps
componentWillUpdate → UNSAFE_componentWillUpdate

React 16.9 did not contain breaking changes, and the old names continue to work in this release. But you will now see a warning when using any of the old names. These warnings provide better alternatives to these lifecycle methods.

Easily Renaming UNSAFE Methods

To allow easy renaming for projects where one may not have adequate time to migrate to the recommended lifecycle methods, the React team recommended a script from codemod that automates this process.

cd your_project
npx react-codemod rename-unsafe-lifecycles

Conclusion

Asynchronous rendering is driving into version changes. To prevent bugs in future once async rendering is enabled.

To allow asynchronous rendering involves deprecation of lifecycle methods without async rendering in mind.

componentWillMount → UNSAFE_componentWillMount
componentWillReceiveProps → UNSAFE_componentWillReceiveProps
componentWillUpdate → UNSAFE_componentWillUpdate

Now warnings provide better alternatives to these lifecycle methods.

Few new lifecycles was introduced too.

React Team has introduced one new lifecycle method named getDerivedStateFromProps() to achieve the same functionality as UNSAFE_componentWillReceiveProps will provide.

Replacement in Functional Component is no complete 1:1 but still we can achieve or use different Hooks at different scenarios to achieve the same result.

useMemo() React hook specify all the props in an array that are dependent, it will run before everything whenever the props change.

Together getSnapshotBeforeUpdate(prevProps, prevState) with componentDidUpdate, this new lifecycle should cover all use cases for the legacy componentWillUpdate.

Nodejs takeaway

Senichi — Mon, 20 Sep 2021 22:07:32 +0000

1. What is Node.js and how it works?
2. How is Node.js better than other frameworks most popularly used?
3. How do you manage packages in your node.js project?
4. What is the Event Loop?
5. What is fork in node JS?
6. How many types of API functions are there in Node.js?
7. What is REPL?
8. How does Node.js overcome the problem of blocking of I/O operations?
9. What are node.js buffers?
10. What is node.js streams?
11. Why should you separate Express app and server?
12. Why V8 engine?
13. Exit codes of Node.js
14. What is an Event Emitter in Node.js?
15. Clustering
16. What is a thread pool and which library handles?
17. How are worker threads different from clusters?
18. How to measure the duration of async operations?
19 How to measure the performance of async operations?

1. What is Node.js and how it works?

Node.js is a virtual machine that uses JavaScript as its scripting language and runs Chrome’s V8 JavaScript engine.

It's based on an asynchronously event-driven non-blocking architecture where I/O making it lightweight and efficient.

It provides API to access OS-level features such as file system, network, etc..., being used even in developing desktop applications with electron.

2. How is Node.js better than other

Other frameworks where developers have to use thread management.

Provides simplicity in development because of its non-blocking I/O.

And event-based model results in short response time and concurrent processing.

Also since we will use Javascript in both the frontend and backend the development will be much faster.

And at last, there are ample libraries so that we don't need to reinvent the wheel.

3. How do you manage packages in your node.js project?

Mostly used are npm or yarn. Both provide almost all libraries of javascript with extended features of controlling environment-specific configurations.

To maintain versions of libs being installed in a project we use package.json and package-lock.json so that there is no issue in porting that app to a different environment.

But It can be managed by a number of package installers and their configuration file accordingly.

4. What is the Event Loop?

In computer science, the event loop is a programming construct or design pattern that waits for and dispatches events or messages in a program.

The event loop works by making a request to some internal or external "event provider" (that generally blocks the request until an event has arrived), then calls the relevant event handler ("dispatches the event"). The event loop is also sometimes referred to as the message dispatcher, message loop, message pump, or run loop.

We could think of event loop as a queue (First in first out operation), where list of events are registered, and the code associated with that event is executed.

Node.js JavaScript Event Loop run initialization code and callbacks. Offers a Worker Pool to handle expensive tasks like file I/O.

It uses a small number of threads to handle many clients. Because It has only a few threads, you must structure your application to use them wisely.

Applications first complete an initialization phase, require'ing modules and registering callbacks for events.

Then enter the Event Loop to respond incoming client requests by executing the appropriate callback.

This callback executes synchronously, and may register asynchronous requests to continue processing after it completes.

The callbacks for these asynchronous requests will also be executed on the Event Loop.

The Event Loop will also fulfill the non-blocking asynchronous requests made by its callbacks, e.g., network I/O.

In summary, the Event Loop executes the JavaScript callbacks registered for events, and is also responsible for fulfilling non-blocking asynchronous requests like network I/O.

5. What is fork in node JS?

A fork in general is used to spawn child processes. In node it is used to create a new instance of v8 engine to run multiple workers to execute the code.

6. How many types of API functions are there in Node.js?

There are two types of API functions:

Asynchronous, non-blocking functions - mostly I/O operations which can be fork out of the main loop.
Synchronous, blocking functions - mostly operations that influence the process running in the main loop

7. What is REPL?

REPL in Node.js stands for Read, Eval, Print, and Loop, which further means evaluating code on the go.

8. How does Node.js overcome the problem of blocking of I/O operations?

Nodejs has an event loop that can be used to handle all the I/O operations in an asynchronous manner without blocking the main function.

if some network call needs to happen it will be scheduled in the event loop instead of the main thread (single thread).

If there were multiple I/O calls each one will be queued accordingly to be executed separately (other than the main thread).

Even though we have single-threaded JS, I/O ops are handled in a nonblocking way.

9. What are node.js buffers?

In general, buffers is a temporary memory that is mainly used by stream to hold on to some data until consumed.

Buffers are introduced with additional use cases than JavaScript’s Unit8Array and are mainly used to represent a fixed-length sequence of bytes.

This also supports legacy encodings like ASCII, utf-8, etc. It is a fixed (non-resizable) allocated memory outside the v8.

10. What is node.js streams?

Streams are instances of EventEmitter which can be used to work with streaming data in Nodejs. They can be used for handling and manipulating streaming large files(videos, mp3, etc) over the network. They use buffers as their temporary storage.

There are mainly four types of the stream:

Writable: streams to which data can be written (for example, fs.createWriteStream()).
Readable: streams from which data can be read (for example, fs.createReadStream()).
Duplex: streams that are both Readable and Writable (for example, net.Socket).
Transform: Duplex streams that can modify or transform the data as it is written and read (for example, zlib.createDeflate())

11. Why should you separate Express app and server?

This ensures that the business logic is encapsulated and decoupled from the application logic which makes the project more readable and maintainable.

The server is responsible for initializing the routes, middleware, and other application logic whereas the app has all the business logic which will be served by the routes initiated by the server.

12. Why V8 engine?

Google's v8 is the open-source most evolved, by a huge community helping in developing features and fixing bugs.

The fastest as a JavaScript and WebAssembly engine till now, since it's written in c++.

And it is portable to almost every machine known

13. Exit codes of Node.js

Exit codes give us an idea of how a process got terminated or the reason behind termination.

A few of them are:

Uncaught fatal exception - (code - 1)
There has been an exception that is not handled
Unused - (code - 2)
This is reserved by bash
Fatal Error - (code - 5)
There has been an error in V8 with stderr output of the description
Internal Exception handler Run-time failure - (code - 7)
There has been an exception when bootstrapping function was called
Internal JavaScript Evaluation Failure - (code - 4)
There has been an exception when the bootstrapping process failed to return function value when evaluated

14. What is an Event Emitter in Node.js?

EventEmitter is a Node.js class that includes all the objects that are basically capable of emitting events.

This can be done by attaching named events that are emitted by the object using an eventEmitter.on() function.

Thus whenever this object throws an even the attached functions are invoked synchronously.

const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
myEmitter.on('event', () => {
 console.log('an event occurred!');
});
myEmitter.emit('event')

15. Clustering.

Node.js applications run on a single processor, which means that by default they don’t take advantage of a multiple-core system.

Cluster mode is used to start up multiple node.js processes thereby having multiple instances of the event loop.

When we start using cluster behind the scene multiple processes are created but there is also a parent process called the cluster manager which is responsible for monitoring the health of the individual instances of our application.

16. What is a thread pool and which library handles it?

The Thread pool is handled by the libuv library.

libuv is a multi-platform C library that provides support for asynchronous I/O-based operations such as file systems, networking, and concurrency.

17. How are worker threads different from clusters?

Cluster:
- There is one process on each CPU with an IPC to communicate.
- In case we want to have multiple servers accepting HTTP requests via a single port, clusters can be helpful.
- The processes are spawned in each CPU thus will have separate memory and node instance which further will lead to memory issues.
Worker threads:
- There is only one process in total with multiple threads.
- Each thread has one Node instance (one event loop, one JS engine) with most of the APIs accessible.
- Shares memory with other threads (e.g. SharedArrayBuffer).
- This can be used for CPU-intensive tasks like processing data or accessing the file system since NodeJS is single-threaded, synchronous tasks can be made more efficient leveraging the worker's threads.

18. How to measure the duration of async operations?

Performance API provides us with tools to figure out the necessary performance metrics. A simple example would be using async_hooks and perf_hooks. This would give us the exact time it took to execute the callback.

'use strict';
const async_hooks = require('async_hooks');
const {
 performance,
 PerformanceObserver
} = require('perf_hooks');
const set = new Set();
const hook = async_hooks.createHook({
 init(id, type) {
if (type === 'Timeout') {
  performance.mark(`Timeout-${id}-Init`);
  set.add(id);
}
 },
 destroy(id) {
if (set.has(id)) {
  set.delete(id);
  performance.mark(`Timeout-${id}-Destroy`);
  performance.measure(`Timeout-${id}`,
                      `Timeout-${id}-Init`,
                      `Timeout-${id}-Destroy`);
}
 }
});
hook.enable();
const obs = new PerformanceObserver((list, observer) => {
 console.log(list.getEntries()[0]);
 performance.clearMarks();
 observer.disconnect();
});
obs.observe({ entryTypes: ['measure'], buffered: true });
setTimeout(() => {}, 1000);

19 How to measure the performance of async operations?

Performance API provides us with tools to figure out the necessary performance metrics.

A simple example would be:

const { PerformanceObserver, performance } = require('perf_hooks');
const obs = new PerformanceObserver((items) => {
 console.log(items.getEntries()[0].duration);
 performance.clearMarks();
});
obs.observe({ entryTypes: ['measure'] });
performance.measure('Start to Now');
performance.mark('A');
doSomeLongRunningProcess(() => {
 performance.measure('A to Now', 'A');
 performance.mark('B');
 performance.measure('A to B', 'A', 'B');
});

"use strict" is Strict Mode

Senichi — Mon, 20 Sep 2021 17:47:44 +0000

Inside native ECMAScript modules (with import and export statements) and ES6 classes, strict mode is always enabled and cannot be disabled.

So, the first thing to know:

1. Nowadays we use Strict Mode everyday.

Strict Mode is now supported by all major browsers.

The syntax, for declaring strict mode, was designed to be compatible with older versions of JavaScript to has no side effects. So "use strict"; only matters to new compilers that "understand" the meaning of it.

Strict mode code and non-strict mode code can coexist, so scripts can opt into strict mode incrementally.

So, the second thing to know:

2. "use strict"; is ignored by earlier versions of JavaScript.

The "use strict" directive was new in ECMAScript version 5.

ECMAScript 2009, also known as ES5, was the first major revision to JavaScript.

Strict mode isn't just a subset: it intentionally has different semantics from normal code.

Strict mode changes both syntax and runtime behavior.

JavaScript was designed to be easy for novice developers, and sometimes it solves operations which should be semantic errors into non-error operations. Sometimes this fixes the immediate problem, but sometimes this creates worse problems in the future.

Strict mode treats these mistakes as errors so that they're discovered and promptly fixed.

So, the third thing to know:

3. Strict Mode is the beginning of modernity.

It states the before and after into javascript paradigm. It is the base of the current javascript programming basics.

Changes converted mistakes into errors (as syntax errors or at runtime).
Changes simplifyed how the particular variable for a given use of a name is computed.
Changes make it easier to write "secure" JavaScript.
Changes anticipating future ECMAScript evolution.

Time travel to the past

There was a time when such amazing things were possible, like:

you could use undeclared variables (wtf! 😳)

// set a variable without the 'var' keyword
x = 3.14;

function myFunction() {
  y = 3.14;
}

Mistyping a variable name creates a new global variable
not unique function parameter names (wtf! 🤨)

// available through 
arguments[i]

declare functions inside control structures

if (true) {
  function f() { }
  f();
}

for (var i = 0; i < 5; i++) {
  function f2()
  f2();
}

eval() were allowed to create variables

eval ("var x = 2");
alert (x);

In normal mode this would return the global object (window):

function myFunction() {
  alert(this);
}
myFunction();

delete keyword usuallly deletes

// variable/object/function/property
var x = 3.14;
delete x;

Back to the Future

In strict mode a non-existing variable/object, any assignment to a non-writable property and etc... will throw an error.

Strict mode changes previously accepted "bad syntax" into real errors.

Strict mode makes it easier to write "secure" JavaScript.

So, the third fourth to know:

4. Strict Mode move the language to a new programming style.

In general, the changes enabled by strict mode are all for the better.

Improving its resiliency make it easier to understand what's going on when there are problems.

JavaScript did not have exception handling until ECMAScript 3.

JavaScript’s creator, Brendan Eich, had no choice but to create the language very quickly from several programming languages: Java (syntax, primitive values versus objects), Scheme and AWK (first-class functions), Self (prototypal inheritance), and Perl and Python (strings, arrays, and regular expressions).

On one hand, JavaScript had quirks missing quite a bit of functionality. On the other hand, it had several powerful features that allowed you to work around these problems.

Given its influences, JavaScript enables a programming style that is a mixture of functional programming (higher-order functions; built-in map, reduce, etc.) and object-oriented programming (objects, inheritance).

So, the fiveth and last to know:

4. Strict Mode breaks from the initial scheme and possibilities into more formal OOP.

You can use strict mode in all your programs. The "use strict" directive defines that the JavaScript code should be executed in "strict mode". "use strict" is just a string expression. Old browsers will not throw an error if they don't understand it.

Declaring Strict Mode

Strict mode is declared by adding "use strict"; to the beginning of a script or a function.

Declared at the beginning of a script, it has global scope (all code in the script will execute in strict mode):

"use strict";
x = 3.14;  // throw error
var x = 3.14;  // OK

Declared inside a function, it has local scope (only the code inside the function is in strict mode):

function myFunction() {
  "use strict";
  y = 3.14;   // throw error
  var y = 3.14;   // OK
}

Declare local or global "use strict" will throw an error feedback by any not legal assignment.

Conclusion

Nowadays we use Strict Mode everyday because inside native ECMAScript modules (with import and export statements) and ES6 classes, strict mode is always enabled and cannot be disabled.

Strict mode code and non-strict mode code can coexist. In general, the changes enabled by strict mode are all for the better.

Strict mode changes both syntax and runtime behavior and previously accepted "bad syntax" changes into real errors.

Strict mode treats these mistakes as errors or "bad syntax" to they're discovered and promptly fixed.

"use strict" is just a string expression. Old browsers will not throw an error if they don't understand it.

Declared at the beginning of a script (global scope)

// global scope - (on top)
"use strict";

// local scope - inside block
function myFunction() {
  "use strict";
  [...]
}

What are the different types of errors in JavaScript?

Senichi — Sun, 19 Sep 2021 16:28:42 +0000

Errors are statements which don't let the program run properly. There are three main types of errors that can occur while compiling a JavaScript program. These errors include syntax errors, runtime errors, and logical errors.

1. Syntax Errors (most common)

Incorrect syntax raises parsing errors and occur at the interpretation time. Simple example is to introduce a semicolon where a double-colon it's needed.

let exObj = { name; 'Rick' }

2. Runtime Errors

Occur after the compiler interpret the code, when the code ran. Also known as exceptions. It can occur by calling a function that It wasn't declared.

The syntax is correct but the function is not present.

// calling not declared function
doSomeStuff()

3. Logical Errors (most difficult to find)

Error in the flow of data. The logical elements are well structured, the syntax is correct, but the confluence of data lands improperly.

Consider the script "There is a movie called Terminator 2". Consider the happy ending statement path: ''John Connor kills Terminator.''

Now consider a logical error: ''Terminator kills John Connor.''

These kind of errors change how your program should work from the result we would expect.

Synthesis

syntax errors : while interpretation. Simple example: misspelling.
runtime errors: while execution. Simple example: due to misuse.
logical errors: scrambled logical perform. Simple example: ''Terminator kills John Connor.''

Forem: Senichi

Object is possibly 'undefined'.ts(2532)

Suppressing errors

How I solve this

How-to find specific information within huge Git Log

Kubernetes & Docker -> Deploy a Flask Application - Manually (Simple Steps)

1. Create a named Kubernetes cluster

2. Image registry (get or create)

3. Deployment

1. Deployment mockup yaml file

2. In your terminal

3. Other useful commands are:

4. Troubleshoot:

5. Clean up

What-is Flask decorator

@wraps as a decorator

Composition of Decorators

Decorator Composition : syntactic sugar

common @wrap example

How-To check a pattern into a string & retrieve it

Why do this ?

The for loop disaster: a horror experience based in a real history.

regex : a happy ending

Conclusion

unsafe react hooks

Easily Renaming UNSAFE Methods

Conclusion

Nodejs takeaway

1. What is Node.js and how it works?

2. How is Node.js better than other

3. How do you manage packages in your node.js project?

4. What is the Event Loop?

5. What is fork in node JS?

6. How many types of API functions are there in Node.js?

7. What is REPL?

8. How does Node.js overcome the problem of blocking of I/O operations?

9. What are node.js buffers?

10. What is node.js streams?

11. Why should you separate Express app and server?

12. Why V8 engine?

13. Exit codes of Node.js

14. What is an Event Emitter in Node.js?

15. Clustering.

16. What is a thread pool and which library handles it?

17. How are worker threads different from clusters?

18. How to measure the duration of async operations?

19 How to measure the performance of async operations?

"use strict" is Strict Mode

Time travel to the past

Back to the Future

Declaring Strict Mode

Conclusion

What are the different types of errors in JavaScript?

Synthesis

The `for loop` disaster: a horror experience based in a real history.