README.md

MyDailyLearn 🧑‍💻

This repository is a collection of useful commands, code snippets, and tutorials covering various technologies and concepts I encounter in my journey as a developer. 🌱

Explore, learn, and grow with me! 📚

Show your support: ✨

• Star ⭐ this repository to help it gain visibility.
• Share 📢 it with fellow developers who might find it useful.

Table of Contents

React	Vanilla JavaScript	Git	Node	Vue	Docker	Angular	Unit Testing

React

Hide/Show table of contents

Topic	Question
	Basic
	What is React
	Installing
	React Props
	Use Default Props
	Use PropTypes to Define the Props We Expect
	Life Cycle
	React Hook Flow Diagram
	React App Life-cycle Walk through
	LifeCycle Methods in Class Component
	React State
SetState
	Understanding React setState
	Update a State Property
	Passing a Function to setState()
	Access Previous State using Updater
Lazy Initialization
	What is useState Lazy Initialization?
Derived State
	When to Use Derived State?
flushSync
	What is flushSync?
	Alternative State Initialization
	React Hooks
useLayoutEffect
	Which is preferred, useLayoutEffect or useEffect?
	useLayoutEffect vs useEffect
	What would happen if a user clicks on a 'count button' on the UI?
	When to use useLayoutEffect instead of useEffect?
useImperativeHandle
	What is useImperativeHandle hook?
	Why use useImperativeHandle?
	How useImperativeHandle works?
	How can we focus a child component's input element using useImperativeHandle
	When to use useImperativeHandle
	Type of Components
	Stateless Functional Component, Stateless Component and Stateful Component
	Compound Component
	Uncontrolled Component
	Controlled Component
	Higher Order Component
	Fragment
	React Fragment
	Refs and the DOM
	Refs and the DOM
	When to Use Refs
	Creating Refs
	Accessing Refs
	Use Callback on Image Load with Ref
	React Portals
	React Portals
	Usage of Portals
	React Route
	Familiar with Various React Router Libraries
	How to Not Navigation with React Router
	Three (3) Types of Router
	Context API
	Understand Context API
	Referencing Context in Stateless Functional Components
	Redux vs Context API
	Performance
	Use of react-addons-perf
	What are the tricks we can use to optimize react app?
	Miscellaneous
	React vs ReactDOM
	How to Prevent from re-rendering?
	When to Use Component Instead of PureComponent?
	How can we avoid Props Drilling in React?
	What is the render props?
	React Unit Tests vs Integration Tests for Components?
	Migration from Class to Function Component

Vanilla JavaScript

Hide/Show Table of Contents

Topic	Question
	Hoisting
	Explain Hoisting in JavaScript
	Why Hoisting Important?
	First, memory is set aside for all necessary variables and declared functions
	Function Expressions are never hoisted! They are treated as assignments
	Check if return statement is at the top
	Analyzing Hoisting Load Order I
	Analyzing load order II
	Analyzing Load Order III
	The variables declared with let or const are hoisted but stay uninitialised
	Closure
	Closures and References
	Closures Help in Function Construction Zones
	Loops with Closure: A cautionary Tale
	Prototypes and Inheritance
	Prototypes!
	What is Constructor call?
	What is [[Prototype]] and where does it come from?
	How does [[Prototype]] affect the behavior of an object?
	What is the 3 different ways to find where an object[[Prototype]] linked to?
	Discuss: __proto__, [[Prototype]], prototype
	Two mechanism always exists in JavaScirpt -- Lexical Scopes & Prototype Chain
	Object Oriented in JavaScript
	Explanation of Prototype
	When an inherited function is executed, the value of this points to the inheriting object, not to the prototype object where the function is an own property
	New object using Object.create() (ES5)
	New object using class syntactical sugar
	Similar in Object pattern
	Use hasOwnProperty() to know if the property exists as it's own property
	Prototype shadowing
	Avoid Shadowing
	Object Linked
	OLOO (Object Linked to Other Object): delegated objects
	Convert the above codes to OLOO
	Class in ES6
	Different ways to create objects and the resulting prototype chain
	Dig into some examples from MDN
	Notes
	We have to call super first in constructor
	Coercion
	Explain Coercion in JavaScript with examples
	Class
	Public class fields
	Private class fields
	Public and static properties
	JavaScript this keyword
	How does this keyword change in different context?
	1. this in Global Context
	2. this in Object Constructor
	3. this in an Object Method
	4. this in a Simple function
	5. this in a Arrow function
	6. this in Event listener
	Default Rules
	Hard Binding of this
	Priority of this binding (top -> bottom: hight -> low)
	Immediately Invoked Function Expression (IIFE)
	Explain why the following doesn't work as an IIFE
	Event Loop
	Underesting Asynchronous JavaScript --- Event Loop
	Example 1
	Example 2
	Example 3: Callback Hell
	JavaScript Reactivity
	JavaScript Reactivity using 'Object.defineProperty()'
	Miscellaneous
	What is asynchronous programming and why is it important?
	Explain Event Delegation
	Describe Event Bubbling
	What are benefits of named function over a anonymous function
	Difference between target vs currentTarget
	What is Factory Function?
	Difference: null, undefined and undeclared?
	What does JavaScript get and getter keyword do?
	Define a getter on new objects in object initializers
	Defining a getter on existing objects using defineProperty
	Using a computed property
	Get vs defineProperty()
	What is the two conditions of being Module?
	How to get Unique values of an Array?
	How to remove all falsy values from an Array?
	How to create an Empty Object?
	How to require function parameters by force?
	How to get Query String Parameters?
	What is Debouncing in JavaScript?
	How to determine what should be the this keyword value?
	Convert a string to spinal string
	What type of Scoping Rule(s) does JavaScript have?
	What are 3 different ways we can create a new Scoped variable?
	What are the four things the new keyword actually does when we put in front of a function call?
	What is the different between undeclared and undefined?
	What is the only value in JS that is not equal to itself!?
	What does happen when we declare a variable with var and let?
	Compare: null, undefiend, NaN
	Implement an Event Emitter that supports standard operations
	How to Write Optimized JavaScript?

Git

Hide/Show Table of Contents

Topic	Question
Configure git
	Git config file locations
	Configure user's name & email
	Other config commands
Branching
	Common references and terminology
	Create new branch
	Delete branch
	Quick switch back to previous branch/commit-sha/references etc.
	Branch listing
	Rename a branch
	Track a new branch
Essential Git Commands
	Git Add
	Git Commit
	Git Amend
	Git Pull
	Git Push
	Git Merge
Checkout
	Checkout forward/backward
Cherry Pick
	Cherry Pick
Stashing
	Stashing
Logging
	Logging
Show
	Show - more logging
Recovery or Reset
	Recovery or Reset
	Reset using reflog
Squash
	Squash
Rebase
	Rebase
	Change the author of an earlier commit
	Change the commit message of an earlier commit
	Reordering commits using rebase
	Rebase options
Working with Remotes
	Working with remotes
Conflicts
	Conflicts
Submodules
	Git Submodules
Important operations
	Some important operations
	Cleanup garbage in remote repository
	Remove Large Files from Git History with BFG
	Search all of git history for a String
	Prune empty commits
	Create a new WorkTree and work in parallel in the same repo (different branch)
	Add a signed-off-by field in a commit
	How to tell git to ignore local changes (already tracked by git)?
	Generate a Git Hash (SHA1) for specific contents
Tag and Releases
	Tag and Releases
Fancy commands
	Fancy Commands
	Quickly browse the history of files in any git repos
Concepts
	Tracked vs Untrack file
	GitHub vs Git
	Commit Object
	Three areas where code lives
	Three types of git References
	Different types of HEAD
	The Seven Rules of a Great Git Commit Message
	Difference between HEAD~ and HEAD^

Vue

• What is Vue.js?
• Installing
• Known Options for Vue Instance
• Key Sentences
• For Loop
• Bind Attribute and Class Name
• Dynamic Components
  • Prevent Destroying components when rendering Dynamic components
• Lazy Loading Off-screen Components
• Disable Re-rendering with v-once
• Output Raw HTML with v-html Directives
• Get Event Data from the Event
• Pass Own Arguments with Event Object
• Modifying and Event with Modifiers
• Listening to Keyboard Events
• Write JavaScript Code into Template
• Using Tow Way Binding v-model="variable"
• Two Way Binding from Child to Parent
• Reacting to Changing with Computed Properties
• Dynamic Styling with CSS Classes
• Setting Styles Dynamically without CSS Classes
• Styling Elements with an Array Syntax
• Conditioning Rendering with v-if/v-else
• Alternative of v-if using <template>
• Use v-show if we don't want to detach element from DOM
• Rendering Lists with v-for
• Use of v-for with <template>
• Looping through Objects
• Looping through a Lists of Numbers
• Keeping Track of Elements When using v-for
• Access Template from Vue Module by Setting a Ref
• Mounting a Template
• VueJS instance Life Cycle
• Pass HTML Content from Parent to Child Using <slot>
• How Directives Works
• HTML5 History Mode
• Difference Between v-model and v-bind
• Vuex
• Service Worker Caching Config - Progressive Web App
• Toggling Similar Elements
• Vue Observable - Alternate to Vuex
• Vue Router has 3 Types of Guards
• Vue Filters
  • Define Local Filter
  • Define a Global Filter
  • Chained Filter
  • Filter with Arguments
• Mixin
• Vue Cheat Sheets
• Vuex Cheat Sheets
• Shortcuts
• Initial Render
• Virtual DOM
• Runtime + Compiler vs. Runtime-only
• Compile Templates in Client Manually
• Reactivity in Depth
  • Reactivity inside Computed Properties
• Parent-child Communication

Node

Angular

Gulp

Unit Testing

Docker

• Docker Install (latest or a specific version)
• Run docker as daemon
• Remove all containers
• Remove all images
• Run an image
• print log of a container
• Exec a container
• Run image with binding port