DEV Community: Bunlong

The Benefits of Design Principles and Design Patterns

Bunlong — Mon, 29 Mar 2021 09:17:33 +0000

1. What is Design Principles?

Design Principles are a set of general guidelines that are used to design and structure a class in object-oriented designing. It make code easier to understand, collaborate, extend & maintain.

2. What is Design Patterns?

Design Patterns is best practices to implement Design Principles.

Conclusion

Design Principles and Design Patterns make the program easier to read, understand, extend, maintain and scalable.

Intro to Visual Studio Code Debug Visualizer

Bunlong — Sat, 14 Nov 2020 10:29:10 +0000

Debug Visualizer is a vscode extension for visualizing data structures while debugging.

Supported Languages

These languages and debuggers are verified to work with this extension: JavaScript/TypeScript, Go, Python, C#, PHP, Java, C++, Swift, Rust.

Installation

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install hediet.debug-visualizer

Usage

After installing this extension go to View and click on Command Palette (Ctrl + Shift +P) of VS Code.

And use the command Debug Visualizer: New View to open a new visualizer view.

Visualizer view:

And then go to View and click on Command Palette (Ctrl + Shift +P) of VS Code again.

And use the command Debug Visualizer: Use Selection as Expression (Shift + F1) to use the currently selected text as expression in the most recently opened debug visualizer.

Download sample JavaScript repository here and following command line:

$ cd demos/js
$ npm install
$ npm run dev

Open demo_sorting.ts in Visual Studio Code and set breakpoint at line 69.

And then go to Run and click on Start Debugging (F5) of VS Code.

And then input the variable array that you want to debug.

Debug Visualizer show the graph as following.

Thanks for reading ❤

GitHub: AlgorithmsHub
Twitter: AlgorithmsHub
LinkedIn: AlgorithmsHub
FB: AlgorithmsHub

Should I focus on Data Structures and Algorithms or Programming Languages?

Bunlong — Wed, 12 Feb 2020 02:47:21 +0000

Data Structures along with Algorithms is a core key of computer science so we should focus on both.

Data Structures and Algorithms

Data Structures and Algorithms is the heart of Computer Science and it is inevitably being used in almost all domain of the computer science industry.

Arrays.binarySearch() method in Java.

Arrays.binarySearch(array, searchElement);

It does a search with a given array and searchElement. But what we usually don't know is that how binary search works internally, we end up using DSA everyday.

A lot of methods/functions we use daily in any programming languages is implemented in the most efficient way using DSA.

Programming Languages and Frameworks

Pretty sure we can't develop an application just using only DSA we really need some kind of programming languages, frameworks and tools to implement it.

Assume that we want to build a web application it required a front-end, a back-end, and a database.

At front-end can be built using some kind of scripts, programmings and tools as below:

HTML
CSS
Bootstrap, Material UI, Tailwind
ReactJS, AngularJS, VueJS, PreactJS, SvelteJS

At back-end can be built using some kind of programmings and framework as below:

PHP (Laravel)
Ruby (Ruby on Rails)
Java (Spring)
Erlang (Chicago Boss)
Go (Gin)
Python (Django)
Node (Express)
Deno

All the above points give us a clear understanding that knowing only DSA won't help us build a full-fledged application.

Data Structures and Algorithms is used to make the implementation more efficient in terms of time and space. Programming Languages is used to implement and build applications and make the friendly user interface.

Both are very important for developing a full-fledged and efficient application for the users.

With real world example of building Google maps:

Google Maps is being used by millions users. Google Maps has a very friendly UI and it is very easy to use and running so fast. But how? because the engineers at google made it so efficient by applying DSA, distributed servers, architecture and programming languages. They are really very important.

To be a Good Programmer

Experiences in developing various applications in various businesses using various programming languages.
Have good knowledge of data structures and algorithms.
Have good knowledge of database related concepts.
Have good knowledge of the basic networking concepts.
Have good knowledge of microservices architectures.
Have concepts of making friendly user interface.

Summary

Technology changes fast. Don't get left behind. Learn as much as we can.

Thanks for reading ❤ Say Hello! Github | LinkedIn | Twitter

Why Data Structures and Algorithms?

Bunlong — Mon, 10 Feb 2020 15:44:14 +0000

Data Structures and Algorithms are some of the most essential topics for programmers, both to get a job and to do well on a job.

Good knowledge of data structures and algorithms is the foundation of developing the high quality applications.

What is Algorithms?

Basically an algorithms is a process or set of rules which is used to solve a computer problem.

What is Algorithms used for?

Algorithms is used to solve a particular problem with the best approach.

There are different approaches to solve a problem. Some approaches take more time and effort and some don't according to programmers knowledge and experience on how they implements the best algorithm for that particular problem.

Let consider the task of searching an element in an array:

Algorithm 1: Using Linear search.
Algorithm 2: Using Binary search.

Linear search and Binary search, which one is faster? To get to know the faster one you have to get your hands dirty with data structures and algorithms.

Algorithm analysis (Big O Notation, Big Omega Notation, Big Theta Notation) is a technique that is used to measure the performance of the algorithms. Speed is one of the key parameters in determining the potential of an algorithm.

There are some other factors like user-friendliness, security, maintainability, and usage space that determine the quality of an algorithm. Time and space complexity are metrics used to measure parameters.

To apply algorithms in programming, firstly you need to pick up one of computer programming language to implement the algorithms and then apply the usage of variables, loops, make the use of jump statements as it makes algorithms run smoothly using little space of memory, or use the break to terminate the process, and so on.

What is Data Structures?

Data Structures is a particular way of organizing data in a computer so that it can be used efficiently.

What is Data Structures used for?

Data Structures is used to organize the storage and retrieval of information stored in both main memory(Known as RAM) and secondary memory(Known as Hard Disks).

You know? Data Structures is a core key factor in software design.

A data structure is selected or designed to store data for the purpose of applying with various algorithms.

Summary

All the above points give you a clear understanding that how the organizing of data is really important in programmers day to day life.

Data structures along with algorithms is a core key of computer science.

Thanks for reading ❤ Say Hello! Github | LinkedIn | Twitter

Arrow Functions Return Rules in JavaScript

Bunlong — Tue, 04 Feb 2020 14:02:45 +0000

There are 2 ways for returning values in arrow functions:

Explicit Return
Implicit Return

1. Explicit Return

What is Explicit Return?

A function is returned values using the return keyword, it’s called an explicit return.

The Rules of Explicit Return

You must use an explicit return statement in a block body.

Example

// Single-line
const explicit = (value) => { return value; }

// Multi-line
const explicit = (value) => {
  return value;
}

2. Implicit Return

What is Implicit Return?

A function is returned values without using the return keyword, it’s called an implicit return.

The Rules of Implicit Return

You must use an implicit return in a concise body.

Example

// Single-line
const implicit = (value) => value;

// Multi-line
const implicit = (value) => (
  value
);

Issue Returning Objects

When using implicit returns, object literals must be wrapped in parenthesis so that the curly braces are not mistaken for the opening of the function’s body.

const implicit = () => { value: 1 };
implicit(); // undefined

const implicit = () => ({ value: 1 });
implicit(); // { value: 1 }

Parens Rules

Arrow functions can omit parentheses when they have exactly one parameter.

// Arrow Functions, with parentheses
const myFunction = (p) => {}

// Arrow Functions, without parentheses
const myFunction = p => {}

In all other cases (multiple parameters), the parameter(s) must be wrapped in parentheses.

// Arrow Function, with parentheses
const myFunction = (p1, p2) => {}

References

Thanks for reading ❤ Say Hello! Github | LinkedIn | Twitter

React Component Lifecycle Hooks Cheatsheet

Bunlong — Sun, 02 Feb 2020 13:44:36 +0000

React Component Lifecycle Methods Cheatsheet

React Component Lifecycle Hooks Cheatsheet

useState, useEffect, useRef and React.memo are the hooks and the higher order component that allow you to replace React class component lifecycle methods.

useState

Use: to manage a component’s local state.
Purpose: to replace the need for this.state and constructor.

useEffect

Use: to manage side effects (Ex. an API request, tracking analytics, interacting with DOM not contained inside your React app, etc).
Purpose: to replace the need for lifecycle methods (React Component Lifecycle Methods Cheatsheet).

useRef

Use: to provide the way to access DOM nodes or HTML elements created in the render method.
Purpose: to helps the useEffect to replaces the need for componentDidUpdate.

memo

Use: to manage a component’s re-rendering.
Purpose: to replace the need for shouldComponentUpdate.

Explanation with Words and Code

const {useEffect, useState, useRef, memo} = React;

const ReactLifecycleHooks = (props) => {

  // Commonly Used Hooks
  // Purpose: Initialize state, read and update state variable.

  // The useState hook allows you to read and update a state variable.
  // The usetState function returns an array containing the current value and the function to 
  // update the value.        
  const [desc, setDesc] = useState('user');
  const [prevCount, setPrevCount] = useState(null);

  // The mounted variable of useRef here is used to check the component is rendered.
  const mounted = useRef();

  console.log('render');

  // The useEffect hook takes 2 arguments, a function containing a side effect action and an array.
  // The array contains the variable(s) that you want to track.
  // When a value in the array changes, the side effect function is executed.

  // The empty array is passed to useEffect as its second argument
  // in the purpose of replacing the useEffect with componentDidMount & componentWillUnmount.
  useEffect(() => {
    console.log('componentDidMount');
    // Lifecycle: Mount immediately after render.
    // Purpose: Initialize state that requires DOM nodes, Network requests and side effects.
    return () => {
      console.log('componentWillUnmount');
      // Lifecycle: Unmount.
      // Purpost: Clean up things such as event handlers, cancel network request, etc.
    }
  }, []);

  // The array containing props.count is passed to useEffect as its second argument
  // in the purpose of replacing the useEffect with componentDidUpdate.
  // The useEffect is tracking the value of props.count, and when it sees a change, the side effect
  // function is executed.
  // When the side effect function executes, the logic of checking componentDidUpdate is executed.
  useEffect(() => {
    if (!mounted.current) {
      mounted.current = true;
    } else {
      console.log('componentDidUpdate');
      // Lifecycle: Update immediately after render.
      // Purpose: Operate on updated DOM or handle network requests.
    }
  }, [props.count]);

  // The logic of calling function getDerivedStateFromProps.
  if (prevCount !== props.count) {
    setDesc(ReactLifecycleHooksOptimization.getDerivedStateFromProps(props, desc));
    setPrevCount(props.count);
  }

  // Required
  // Code to display the component.
  return (
    <>
      {props.count} {desc}
    </>
  )
}

// Return true if you don't want it to rerender, return false if you want it to render.
const shouldComponentUpdate = (prevProps, nextProps) => {
  console.log('shouldComponentUpdate');
  // Lifecycle: Update immediately before render.
  // Purpose: Allows developer to prevent rendering.
  return nextProps.count === prevProps.count;
};

// The memo higher order component allows you to replace the need for shouldComponentUpdate.
// The memo higher order component takes 2 arguments, a component and a comparison function of 
// prevProps and nextProps.
const ReactLifecycleHooksOptimization = memo(ReactLifecycleHooks, shouldComponentUpdate);

// Rarely Used Lifecycle

// The getDerivedStateFromProps function here is created for the purpose of 
// using getDerivedStateFromProps in hooks.
ReactLifecycleHooksOptimization.getDerivedStateFromProps = (nextProps, prevState) => {
  console.log(`getDerivedStateFromProps
  nextProps.count=${nextProps.count}
  prevState=${prevState}`);
  // Lifecycle: Mount and update immediately before render.
  // Purpose: When your state depends on props (should be avoided).
  if (nextProps.count === 0 || nextProps.count > 1) {
    return 'users';
  }
  return 'user';
}

const Nothing = () => 'Nothing';
const App = () => {
  const [component, setComponent] = useState(1);
  const [count, setCount] = useState(1);
  const Component = component > 0 ? ReactLifecycleHooksOptimization : Nothing;  
  return (
    <>
      <button onClick={() => (console.clear(), setComponent(component > 0 ? 0 : 1))}>Mount/Unmount</button>
      <button onClick={() => (console.clear(), setCount(count + 1))}>Update value</button>
      <Component count={count} />
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('app'));

Live demo is available on CodePen.

Note

According to the React docs, getSnapshotBeforeUpdate, componentDidCatch and getDerivedStateFromError, there are no Hook equivalents for these methods yet.

References

Hooks at a Glance — React

Thanks for reading ❤ Say Hello! Github | LinkedIn | Twitter

React Component Lifecycle Methods Cheatsheet

Bunlong — Sun, 02 Feb 2020 13:23:03 +0000

React Component Lifecycle Methods Cheatsheet

React Component Lifecycle Hooks Cheatsheet

Each component in React has a lifecycle which you can monitor and manipulate.

Lifecycle Explanation:

Mounting: Called before your component is displayed on the UI.
Updating: Caused by a change to props or state and rerendered the UI.
Unmounting: Called when your UI will no longer display the component.

Mounting

constructor

Lifecycle: Mount immediately before render.
Purpose: Initialize state.

// Commonly Used Lifecycle Methods
constructor() {

}

componentDidMount

Lifecycle: Mount immediately after render.
Purpose: Initialize state that requires DOM nodes, Network requests and side effects.

componentDidMount() {

}

Updating

shouldComponentUpdate

Lifecycle: Update immediately before render.
Purpose: Allows developer to prevent rendering.

shouldComponentUpdate(nextProps, nextState) { // Optional Parameters

}

render

Code to display the component.

// Required
render() {

}

getSnapshotBeforeUpdate

Lifecycle: Update immediately before render output is committed to DOM.
Purpose: Capture DOM information such as scroll position which could change.

getSnapshotBeforeUpdate(prevProps, prevState) { // Optional Parameters

}

componentDidUpdate

Lifecycle: Update immediately after render.
Purpose: Operate on updated DOM or handle network requests.

componentDidUpdate(prevProps, prevState, snapshot) { // Optional Parameters

}

Mounting & Updating

getDerivedStateFromProps

Lifecycle: Mount and update immediately before render.
Purpose: When your state depends on props (should be avoided).

// Rarely Used Lifecycle Methods
static getDerivedStateFromProps(props, state) { // Optional Parameters

}

Unmounting

componentWillUnmount

Lifecycle: Unmount.
Purpose: Clean up things such as event handlers, cancel network request, etc.

componentWillUnmount() {

}

Other Methods

componentDidCatch

Creates an error boundary to captures errors from child components.

// Special Use Cases
componentDidCatch(error, info) { // Optional Parameters

}

References

React.Component - React

Thanks for reading ❤ Say Hello! Github | LinkedIn | Twitter