Mai Trung Đức

code mẫu cho bạn, (của mình là react-router-dom v6)

Theme mặc định của VSCode đã đẹp lắm rồi bạn , Material Icon extension nữa nhé

để làm vậy thì bạn cần đưa nó ra khỏi cái <router-outlet> hiện tại nhé, mình đoán giờ bạn đang có 1 cái layout chung, trong đó bạn có 1 cái <router-outlet>

<div>
  // nội dung layout
  //........
  <router-outlet></router-outlet>
</div>

Như kia thì tất cả các page của bạn đều sẽ được kế thừa layout cả.

Bạn cập nhật lại cấu hình router nom như sau nhé:

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: 'register',
        component: RegisterComponent,
      }
    ]
  }
];

Bạn nên search vài ví dụ để làm theo sẽ dễ hiểu hơn, key word là angular child route nhé

ko cần thiết phải build nếu như project của e ko dùng nhưng thứ như typescript, babel,...

Nếu project của e chỉ là nodejs bình thường (toàn các file JS), ko có gì custom thì start file entry cho project của e là được (file index.js hoặc server.js)

Khi deploy thì e cũng chạy y như local vậy: node index.js

Nhưng tốt hơn cả là e nên dùng 1 cái process manager, cụ thể là PM2 (https://pm2.keymetrics.io/), để chạy app của e, nó có 1 số thứ oke cho production (auto restart nếu app của e failed, limit memory, log,...). Em cài PM2 ở local, setup các thứ, chạy lên xem được hay ko, khi đã oke rồi thì e lên server cài PM2 và start y như local là xong

trong giới Javascript thì sự thay đổi và cải tiến diễn ra theo tháng, vài tháng lại có framework, lib mới. chứ nói gì 10 năm nữa khó đoán lắm bạn, 10 năm mình nghĩ với các ngành khác đã dài rồi chứ nói đến CNTT thì mình nghĩ nó lại là quá dài và nhiều thứ khó đoán định

bây giờ React đang "dominate" thị trường, nhưng rất có thể 1 vài năm tới lại có 1 cái nào khác đó soán ngôi. Ví dụ như trước React thì có AngularJS (angular 1), nó cũng khá là áp đảo lúc nó mới ra mắt, nhưng khi React ra đời thì nó win, và giờ thì ng ta lại gần như không dùng tới AngularJS nữa, điều tương tự cũng có thể xảy ra với React

7-8 năm trước khi mình mới học code thì Jquery đang thịnh hành vì nó có rất nhiều features hay để thao tác với DOM, nhưng đến giờ các framework/library mà phụ thuộc vào nó thì đang dần dần "drop support" Jquery - bỏ dần sự phụ thuộc đó và dùng những cái khác tốt hơn (mặc dù thực tế là số trang web dùng nó thì vẫn còn nhiều ). (khoảng 2 năm trở lại đây mình cũng gần như ko dùng lại jquery cho các project thật nữa, vì giờ JS thuần nó cũng đã có nhiều features của Jquery rồi mà nó còn là "native" - support sẵn bởi browser, nên ko phải lo về chất lượng của chúng )

Vậy nên mình nghĩ câu hỏi bạn cần đặt ra là "liệu project ReactJS bạn tạo ra cho mọi người sử dụng ở thời điểm hiện tại có hữu ích mang lại giá trị cho người sử dụng hay ko, họ có hài lòng hay ko" (tất nhiên sự hài lòng đó mình sẽ cố gắng làm nó càng dài lâu càng tốt ). Còn framework nào, lib nào, React/Angular/VueJS thì cũng hoàn toàn có thể bị thay thế và bạn phải thích nghi với điều đó (khi nó tới)

file được gửi từ trình duyệt tới server PHP của bạn, ở phía server cái nó nhìn thấy chỉ là cái file kia, tại thời điểm đó file còn chưa "thực sự" được lưu ở ở đâu cả, nên đâu có đường dẫn cố định nào để show cho bạn xem được đâu

Thường tại thời điểm đó file còn đang được lưu ở request (buffer, in memory)

Viblo dùng thư viện này để làm biểu tượng cảm xúc nhé bạn: https://github.com/missive/emoji-mart

ban dùng @ViewChild thì để access trực tiếp vào app-menu nhé

từ khoá là image to ascii nhé bạn

mình đã thử vào xem vào inspect thì thấy như sau:

• khi mình trong chế độ edit thì về cơ bản là họ có 1 cái video ở background sau đó cho các item HTML phía trên:

• Sau khi bạn Edit xong bấm save và preview thì họ export ra cho mình 1 video đầy đủ, content ở trong video luôn chứ ko phải chỉ đặt "ở phía trên" video nữa, cái này thì chắc là lúc Edit xong bấm Save thì họ lấy thông tin các item HTML (text, icon sticker,...) như vị trí màu sắc kích cỡ... rồi đem lên server xử lý và export ra đc 1 cái video cuối cùng:

P/s: mình có thử tìm xem họ có dùng canvas để làm mấy cái magic phía sau ko, kiểu mấy trang khác mà chuyên về đồ hoạ xử lý trực tiếp trên trình duyệt họ dùng canvas và gần như rất khó để mình biết logic trong canvas họ làm cái gì , nhưng với Promo này vì tất cả là HTML nên dò xem họ làm thế nào cũng dễ hơn

bạn xem cái này có giúp gì ko nhé: https://github.com/dylang/npm-check

với class component khi bạn gọi setState bạn có thể update từng trường trong state, còn với hook thì khi bạn gọi setUser là nó sẽ thay thế cả data cũ của bạn nhé

chia buồn với bạn là nó ko có support

Thử ag grid nhé bạn: https://www.ag-grid.com. đủ đồ chơi cho data table

hi bạn,

NextJS dùng ReactDOMServer của React để render HTML content từ phía server, thường là NodeJS server. Ý tưởng hiểu đơn giản là khi bạn request xem 1 page thì server sẽ tiến hành render content ngay trên đó, gửi về client đã ra HTML String về tới có thể xem đc ngay, khác với client side rendering (CSR), ở CSR thì client request vào page->download JS/CSS -> tiến hành render HTML content trên trình duyệt tại phía client.

Về việc dùng redux persist với SSR khi content trả về chỉ có duy nhất thẻ div id="__next", mình có search qua google và có nhiều người cũng bị như bạn. Bạn có thể xem thêm 1 discussion mình thấy có vẻ sẽ giúp ở đây: https://github.com/vercel/next.js/issues/8240 (trong đó cũng có 1 solution nhưng cũng chỉ ở dạng workaround, use with caution ). Theo mình tìm hiểu thêm (và đoán ), thì khả năng redux persist nó phụ thuộc vào client, nên khi bạn wrap app của bạn trong cái PersistGate nó ko support SSR nên nó ko render content j trên phía server cả

hi vọng giải đáp đc phần nào thắc mắc cho bạn

bạn thêm option này vào lúc chạy command build nhé --output-hashing=all. Ví dụ:

ng build --configuration production --output-hashing=all

dùng option đó khi build thì các file bundle sẽ có dạng: main.123456.js, trong đó 123456 là một mã hash đc sinh tự động.

Giải thích: giả sử hiện tại file bundle đang lưu ở client là main.1111.js. Sau khi bạn build lại production thì sinh ra file main.123456.js, thì lần tới client access vào nó sẽ tải file main.123456.js về và thấy rằng file mới khác file cũ thì nó sẽ tự động dùng file mới

trong trường hợp secret của bạn đã được encode bằng base64 thì bạn cần tick vào ô đó, để nó decode secret của bạn ra giá trị thực trước khi verify

lí do vì sao lại có base64 thì nó rất là phụ thuộc vào nơi bạn lấy secret họ implement như nào. Mình lấy 1 ví dụ cụ thể cho bạn. Trên Kubernetes khi lấy secret:

kubectl get secret my-secret -o yaml

thì secret trả về ở dưới dạng base64, thì nếu cái trang jwt.io nó ko support base64 thì bạn phải decode bằng tay:

echo "some secret in base64" | base64 --decode

sau đó mới đem lên jwt.io được.

Thì thay vì như thế jwt.io nó support bạn bước decode kia luôn

để debug lý do vì sao, tại trang web nơi bạn đã deploy trên EC2, bạn mở Inspect trên trình duyệt. tiến hành login, quan sát request gọi tới server để login, ở response phần headers sẽ có set-cookie, khả năng rất cao có lỗi ở đó nên browser nó sẽ ko lưu lại cookie sau khi bạn login (chú ý icon warning màu vàng ở cùng dòng với set-cookie, hover vào đó nó sẽ nói cho bạn lý do vì sao cookie ko đc lưu lại)

e thấy nó rất lâu và đứng lại ở lệnh chown cả 5 phút

cái đó là do nó phải đổi permission cho từng file ở trong vendor và node_modules(nếu có) nên lâu e nhé

Về lỗi đã chạy RUN chown ... mà vẫn ko thay được permission, thì khả năng cao là do e đang mount toàn bộ source từ bên ngoài vào, nên nó ăn theo permission bên ngoài (confirm lại có phải thế ko e nhé)

khi build docker image, thường nếu người ta muốn đổi permission thì họ làm trực tiếp tại bước COPY luôn, ví dụ trong trường hợp của e:

COPY --chown=www-data:www-data . .

Đoạn này a hiểu là e đang follow theo bài của a nên mới làm vậy, để a update lại bài của a

mỗi 1 lần bạn load lại trang thì mọi thứ coi như clear hoàn toàn, nên nếu bạn muốn lưu lại menu của bạn giữa các lần load trang thì cách đơn giản nhất là đẩy cái trạng thái menu của bạn vào localStorage:

// Mỗi khi có thay đổi
localStorage.set('menu', menuClass) // menuClass là biến (string) chứa tên class css của bạn

// Khi trang được load lên
window.onload = function() {
  const menuClass = localStorage.get('menu')
 console.log(menuClass)
.....
}

về cái này thì bạn có thể tạo 1 network với option --ip-range, chọn range mà ko bị conflict với IP của công ty bạn. Sau đó lúc chạy container thì cho container của bạn join vào network này

Link: https://docs.docker.com/engine/reference/commandline/network_create/#options