Getting Started Comparison with React & Angular Extremely lean & small great runtime performance feature-rich, very extendable Vue instance is the core of a VueJs application Using VueJS to Interactwith the DOM The {{ }} syntax is called “interpolation” or “String interpolation”, inside value should be something that could be converted to a string cannot […]
Author: Yujin Wang
Categories
React – The Complete Guide – Udemy
Section 1: Getting Started React is a JavaScript library for building user interfaces A client-side JavaScript library All about building modern, reactive user interfaces for the web Declarative, component focused approach React.js Alternatives Section 2: JavaScript Refresher declare variable let -> variable values const -> constant values Arrow functions keep it context (this issue) parentheses […]
Forms Elements in HTML forms maintain their own state and update according to input Controlled Components A React component controls the form it renders Single source Tie the form state to component state State mutation has an associated handler function Form Validation Uncontrolled Components Handle the form data by the DOM itself Instead event handle […]
Component Types Presentational / Skinny / Dumb / Stateless receive data, purely responsible for rendering the view Container / Fat / Smart / Stateful responsible for storing state, pass props to presentational components Presentational Components Mainly concerned with rendering the “view” markup, styles Based on the data that is passed to them in props Do […]
Categories
All about Git
Basic Git cmd git init – initialises the current folder as a git repository git status – current status of the folder git add <file(s)/folder(s)> – commit the changes to the git repository git commit -m <“message”> git log <–oneline> – a brief log of commits git checkout <commit> <file> – checkout the file from […]
Full Stack JavaScript Development What is Node.js? JavaScript runtime built on Chrome V8 JavaScript Engine Uses an event-driven, non-blocking I/O model – lightweight & efficient What is package.json? Usage documentation for what packages including their versions, your project depends on makes build reproducible Commands npm init – in project folder, follow prompt Online Git repos […]
Categories
Split background
Scenario A cms element from one of my projects: the background of the media section is not full but partial. Solution: Add an additional element to fulfill the background. background: linear-gradient background: linear-gradient(to bottom, red 50%, white 50%); Bonus: Gradient with multi-position color stops Tilt Default
Categories
call(), apply() and bind()
https://stackoverflow.com/a/54562241 call and apply call a function while bind creates a function. Use .bind() when you want that function to later be called with a certain context, useful in events. Use .call() or .apply() when you want to invoke the function immediately, and modify the context. call() & apply()
Getting started OOP (Object-oriented programming) A programming paradigm centered around objects rather than functions 4 pillars Encapsulation Related variables and functions are combined into an objects variables => properties functions = > methods Abstraction Benefits: Simpler interface Reduce the impact of change Inheritance A way to eliminate redundant code Polymorphism Encapsulation Reduce complexity + increase […]
Categories
typeof
The typeof operator returns a string indicating the type of the unevaluated operand. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof
Yujin's Amusement Park 