MyDailyLearn

Here is some important commands or code snippets on different topics that I am learning in my developing life.

Table of Contents

• MyDailyLearn
  • Table of Contents
• Git
• JavaScript
  • Vanilla JavaScript
  • Vue
  • Node
  • React
  • Angular
  • Gulp
  • Unit Testing
• Docker

Git

• Configure git
  • Config file locations
  • Configure user's name & email
  • Various important config commands
• Branching
  • Create new branch
  • Delete branch
  • Quick switch back to previous branch/commit-sha/references etc.
  • Branch listing
  • Rename a branch
  • Track new branch
  • Checkout branch/commit-sha/references/etc. (go forward/backward)
• Add, Commit, Amend, Pull, Push, Merge & Delete
• Checkout forward/backward
• Cherry Pick
• Stashing
• Logging
• Show - more logging
• Recovery or Reset
  • Reset using reflog
• Squash
• 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
• Conflicts
  • e.g. Merging release branch into master and we have 3 folders foo/, bar/, js/. Now want to resolve conflicts such as foo/, bar/ should like master and js/ should like release branch.
• Git Submodules
• Some important operations
  • Cleanup garbage in remote repository
  • Prune empty commits
  • Create a new WorkTree and work paralley in the same repo (diffeent 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
• Fancy Commands
• 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^

JavaScript

Vanilla JavaScript

• 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)

• Event Loop

  • Underesting Asynchronous JavaScript --- Event Loop
  • Example 1
  • Example 2
  • Example 3: Callback Hell

• JavaScript Reactivity Using Object.defineProperty()

• JS Questions and Answers

  • 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?

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

React

• What is React
• Installing
• Use Default Props
• Use PropTypes to Define the Props We Expect
• Understanding React setState
  • Update a State Property
  • Passing a Function to setState()
  • Access Previous State using Updater
• Stateless Function Component, Stateless Component and Stateful Component
• Compound, Uncontrolled and Controlled Components
  • Compound Component
  • Uncontrolled Component
  • Controlled Component
• React Fragment
• React App Life-cycle Walk through
• Understand Context API
  • Referencing Context in Stateless Functional Components
• Higher Order Component
• Alternative State Initialization
• Redux vs Context API
• LifeCycle Hooks or Methods
• Res and the DOM
  • When to Use Refs
  • Creating Refs
  • Accessing Refs
  • Use Callback on Image Load with Ref
• React Route
  • Familiar with Various React Router Libraries
  • How to Not Navigation with React Router
  • Three (3) Types of Router
• React Portals
  • Usage of Portals
• React Questions and Answers
  • How to Prevent from re-rendering?
  • When to Use Component Instead of PureComponent?
  • What is the render props?
  • React Unit Tests vs Integration Tests for Components?
  • Migration from Class to Function Component

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