ShareSpot

1. CSS Grid: a. Introduction: - It is two dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. - Evolution: Table -> Float -> Flexbox (one-dimension) -> CSS Grid (two dimension) -  It is currently a  W3C Candidate Recommendation  despite already being adopted by most major browsers. b. Browser support: c. Terminology: Grid Container:   The element on which   display: grid || inline-grid   is applied. It's the direct parent of all the grid items. .grid-container  {   display :  grid ; } Grid Item :  The children (e.g.  direct  descendants) of the grid container. Here the  item elements are grid items, but  sub-item  isn't . Grid Line : The dividing lines that make up the structure of the grid. They can be either vertical ("column grid lines") or horizontal ("row grid lines") and ...

When to use Component or PureComponent I switched to using PureComponent awhile back on the premise of it being a more performant version of Component. This turned out to be true, but the performance gains come with a few strings attached. Let’s dig in to PureComponent and understand why we should be using it. Component and PureComponent have one difference PureComponent  is exactly the same as  Component  except that it handles the shouldComponentUpdate  method for you . When props or state changes,  PureComponent  will do a  shallow comparison  on both props and state.  Component  on the other hand won’t compare current props and state to next out of the box. Thus, the component will re-render by default whenever  shouldComponentUpdate  is called. Shallow Comparison 101 When comparing previous props and state to next, a shallow comparison will check that primitives have the same value (eg,  1 equals 1  or...

  Operand B     Undefined Null Number String Boolean Object Operand A Undefined true true false false false false Null true true false false false false Number false false A === B A === ToNumber(B) A === ToNumber(B) A == ToPrimitive(B) String false false ToNumber(A) === B A === B ToNumber(A) === ToNumber(B) A == ToPrimitive(B) Boolean false false ToNumber(A) === B ToNumber(A) === ToNumber(B) A === B ToNumber(A) == ToPrimitive(B) Object false false ToPrimitive(A) == B ToPrimitive(A) == B ToPrimitive(A) == ToNumber(B) A === B

Do đâu mà 1 năm phân thành 4 mùa?   Có thể hiểu nôm na là do thời lượng chiếu của ánh sáng mặt trời tại các thời điểm này khác nhau. Còn tại sao có chuyện xảy ra như thế thì là do trục xoay trái đất. Hãy xem lại cái cách mà trái đất xoay quanh mặt trời và tự xoay quanh nó. Trái đất tự xoay quanh nó trên 1 trục nghiêng 23,5 o  (so với mặt phẳng quỹ đạo) và di chuyển quanh mặt trời theo 1 quỹ đạo hình bầu dục mất thời gian là 1 năm. Điều lưu ý là trái đất di chuyển nhưng vẫn luôn giữ phương nghiêng của trục xoay trong suốt 1 năm đó. Trong 1 chu kỳ di chuyển quanh mặt trời, chúng ta có những cột mốc đại diện cho 4 mùa. Ngày 21 tháng 6: rơi vào giữa mùa hè Thu Phân (23/9) :  mùa thu Ngày 21 tháng 12: Mùa đông Xuân phân (21/3): Mùa Xuân Tại sao có mùa hè (summer) và mùa đông (winter) Hiện tượng 1 năm có 4 mùa xảy ra ở các vùng ôn đới, mà rõ rệt nhất là khu vực trên đường Hạ chí tuyến (the tropic of Cancer) và Đông chí tuyến (Tropic of Ca...

1. bauble/ ornament: trái châu 2. Christmas tree: cây thông noel 3. reindeer: con tùng lộc 4. sleigh: xe trượt tuyết 5. Santa Clause/ Farther Christmas: ông già noel 6. fairy lights: dây đèn nhỏ 7. tinsel: dây kim tuyến 8. mistletoe: cây có hoa màu xanh để trang trí 9. bell: cái chuông 10. stocking: vớ dài 11. present/ gift: quà 12. Christmas Eve: ngày trước giáng sinh 24/12 13. Boxing Day: ngày sau giáng sinh 14. wreath: vòng hoa 15. manger: cái máng ăn 16. seppherd: người chăng cừu 17. angle: thiên thần 18. chimney: ống khói 19. fireplace: lò sưởi 20. holly: cây tầm gửi 21. snowman: người tuyết 22. Santa suit: bộ đồ ông già Noel 23. Jesus/ Joseph/Mary 24. candy cane: cây kẹo có hình cây gậy móc 25. yule log: bánh kem hình khúc gỗ 26. ginger bread: bánh gừng 27. carol: bài ca giáng sinh 28. elf: chú lùn

React.Component Components  let you split the UI into independent, reusable pieces, and think about each piece in isolation.  React.Component  is provided by  React . Overview React.Component  is an abstract base class, so it rarely makes sense to refer to  React.Component  directly. Instead, you will typically subclass it, and define at least a  render()  method. Normally you would define a React component as a plain  JavaScript class : class Greeting extends React . Component { render ( ) { return < h1 > Hello , { this . props . name } </ h1 > ; } } If you don’t use ES6 yet, you may use the  create-react-class  module instead. Take a look at  Using React without ES6  to learn more. The Component Lifecycle Each component has several “lifecycle methods” that you can override to run code at particular times in the process. Methods prefixed with  will  are ...