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 […]
Category: Programming
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 […]
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
Categories
console.log()
The console.log() method outputs a message to the web console. Syntax console.log(obj1 [, obj2, …, objN]);console.log(msg [, subst1, …, substN]); Output single value / object Note: what you get logged on the console is a reference to the object, which is not necessarily the ‘value’ of the object at the moment in time you call console.log(), but it is […]
Getting Started JavaScript ranks first place in the most popular technologies at Stack Overflow for year 2020 Where does JavaScript code run? JavaScript Engine in browsers (originally for frontend) FireFox: SpiderMonkey Chrome: v8 Node (runtime environment for backend) a C++ program include Google’s v8 JavaScript engine Difference between ECMAScript & JavaScript ECMAScript: specification JavaScript programming […]
Categories
Testing in JS
What is “Testing”? We have expected result of our code, and testing is to make sure that the expectation is achieved, otherwise modification should be done. Instead of manually do it, we prefer to automate and simplify the process. Why Test? Get an error in case break code save time think about possible issues and […]
Yujin's Amusement Park 