FE Basic Seminar (Outline)

#html #javascript #css #react

Khái niệm cần biết

HTML

Charset: dịch ra tiếng việt là tập hợp(set) các kí tự(char). Ví dụ UTF-8 và ASCII sẽ có set khác nhau (tham khảo Differences Between Character Sets). Mỗi device (mobile, pc, tablet) sẽ hỗ trợ các bộ charset, nếu thiết bị nào không hỗ trợ thì sẽ không hiển thị được kí tự đó (vì không decode được), về bản chất các kí tự nhập từ bàn phím sẽ truyền vào dưới dạng binary(0,1) -> hexadecimal digits, thiết bị sẽ biên dịch sang kí tự và hiển thị lên màn hình.
HTML URL Encoding: các url gửi qua http đều phải được encode về ASCII
Canvas & SVG: hỗ trợ vẽ ra những UI phức tạp 2D, 3D. Canvas base on javascript, SVG base on XML. Trong các dự án thực tế canvas thường được dùng phát triển html5 game, mediastream (liên quan tới image hoặc video),... Một số browser hỗ trợ WebGL API (nằm trong bộ Web APIs) để đơn giản và mở rộng khả năng của canvas. Còn svg thường sẽ sử dụng để tạo ra các animation, ảnh động, icon,...
HTML Plug-Ins: mở rộng khả năng của trình duyệt, giúp tương tác sâu hơn với thiết bị ngoài phạm vi trình duyệt, các extension của Chrome (ví du Hello World).
Iframe: dùng để nhúng nội dung HTML bên ngoài vào. Lưu ý, không thể truy cập hay chỉnh sửa phần HTML bên trong iframe nếu content owner không cho phép.
Elements: Có 2 khái niệm DOM và BOM thì element là 1 object con của built-in object document, nhiều elements tạo nên DOM (Document Object Model)
Attributes
Block & Inline
Class & Id

CSS

Selectors: dịch ra tiếng Việt là bộ chọn, hiểu đơn giản nó là công cụ/cú pháp để css hoặc javascript trỏ được tới DOM
- Simple selectors (select elements based on name, id, class)
- Combinator selectors (select elements based on a specific relationship between them)
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute value)
Box Model: là 1 biểu thị hình ảnh cụ thể kích thước của 1 element bao gồm content, border, margin, padding. Kết hợp với hàm calc() của css để tính toán ứng dụng cho responsive,...
Outline: là 1 đường viền nằm ngoài border

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

Fonts: trình duyệt sẽ mặc định hỗ trợ 1 số font mặc định (Web Safe Fonts). Muốn sử dụng font khác (Web Fonts) phải import vào source (hoặc dùng cdn) và khai báo font-face. Ví dụ sử dụng google fonts

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
  <style>
    body {
      font-family: "Sofia", sans-serif;
    }
  </style>
</head>

CSS Display: về bản chất hoàn toàn có thể biến 1 thẻ span thành div hoặc ngược lại bằng cách thay đổi giá trị display của 1 elements. Giá trị display: none sẽ tương đương với width:0, height:0. Giá trị visibility:hidden sẽ tương đương với opacity:0.
Responsive:
- Viewport: phần màn hình hiển thị trước mắt (không tính scroll và thanh địa chỉ, tabbar) gọi là viewport. Trong head có define 1 tag meta viewport dùng để scale nội dung luôn fit trên nhiều thiết bị <meta name="viewport" content="width=device-width, initial-scale=1.0">
- Độ phân giải màn hình: giá trị outerWidth/outerHeight chính là giá trị của viewport (bao gồm cả thanh địa chỉ, tabbar của trình duyệt). Giá trị innerWidth/innerHeight là giá trị của viewport
- Media Queries: khuyên dùng design cho mobile first để các thiết bị nhỏ hiển thị nhanh hơn.
- Images và Video: lưu ý về aspect ratio, mỗi hình ảnh, video có tỉ lệ width/height (vd 1 số tỉ lệ chuẩn 16:9, 3:2,...). Khi response phải điều chỉnh theo tỉ lệ, nếu không sẽ bị hiện tượng vỡ hình, giảm chất lượng. media có pixel càng lớn thì sẽ càng nặng nhưng scale nhỏ lại chất lượng sẽ được bảo toàn, trong trường hợp scale lớn thì chất lượng sẽ bị giảm.
- EM/REM: là đơn vị thường dùng cho font với em, kích thước element con sẽ phụ thuộc vào font-size define ở element cha. Còn REM sẽ phụ thuộc vào font-size define ở root element (html).
- % & vw/vh: % sẽ tương đối theo element cha, còn vw/vh sẽ tương đối theo viewport

JAVASCRIPT

DOM & BOM

JS Variables: mặc định các biến khai báo k dùng từ khóa hoặc dùng keyword var (khai báo ở global scope) sẽ có scope global (a = 2 <=> window.a = 2). Từ khóa var nếu khai báo trong function sẽ có function scope. Let và const để hỗ trợ khai báo block scope (scope nằm trong 2 dấu ngoặc nhọn). Khai báo 1 hằng với const có kiểu object thì vẫn có thể update property và method của object đó.
JS Data Types: có 2 nhóm là kiểu nguyên thủy và tham chiếu. == để so sánh giá trị, === để so sánh cả giá trị và địa chỉ nhớ.
JS Function: function có thể return về 1 function khác => sẽ có cú pháp như này export default connect()(TodoItem). Anonymous Function sẽ chạy không cần gọi. Arrow function ngoài làm gọn code thì có tác dụng không tạo ra context (es5 sử dụng bind, call, apply)
JS Object: 1 function define nếu sử dụng từ khóa new cũng sẽ tạo ra object. Object trong JS có 3 điều cần lưu ý, tất cả variable, object sinh ra sẽ được add vào BOM Tree và là con của Window. Có method và property, context (this => bind, call, apply, arrow function) và kế thừa (prototype, class extends) và đóng gói (module).
JS Events: nguyên lý là global, bất đồng bộ, vì vậy khi tạo ra phải hủy đi nếu không dùng nửa.
[JS Array]: làm việc với array là việc với vòng lặp, vì vậy hạn chế tối đa loop để tăng performance.
[JS Date]: Timezone, ISO, UTC, GMT
JS RegExp
JS Error: try, catch, finally, exception, throw
JS Hoisting: cơ chế của JS

Declare Your Variables At the Top !
Hoisting is (to many developers) an unknown or overlooked behavior of JavaScript.
If a developer doesn't understand hoisting, programs may contain bugs (errors).
To avoid bugs, always declare all variables at the beginning of every scope.
Since this is how JavaScript interprets the code, it is always a good rule.

JS Closure: tạo ra private variable cho function
JS Async: callback, promise, async/await. Cách Javascript hoạt động

REACT

Trang web được load lên như thế nào?

Nguồn tham khảo:

https://www.w3schools.com
https://developer.mozilla.org/en-US/docs/Web
https://viblo.asia/p/cach-javascript-hoat-dong-khai-niem-ve-engine-runtime-va-call-stack-trong-javascript-3P0lPaa45ox
https://reactjs.org/docs/getting-started.html

DEV Community

FE Basic Seminar (Outline)

Khái niệm cần biết

HTML

CSS

JAVASCRIPT

REACT

Trang web được load lên như thế nào?

Nguồn tham khảo:

Oldest comments (0)

Read next

Working with Dates and Times in JavaScript

Start to use VueJS

Mastering CSS unicode-bidi Property

React Type Error: not assignable LegacyRef<V> && 'V' refers to a value, did you mean 'typeof V'?