NGUYỄN ANH TUẤN

Xin keyworks thì cho keyworks thôi nhé: "online code editor", "web-based code execution", "online compiler", "online ide", "sandboxing" và "code testing libraries"...

Một số công nghệ phổ biến mà bạn có thể sử dụng để xây dựng trang web của mình như: Node.js, Express, React, Redux, PostgreSQL, Docker và một số công nghệ khác.

Bonus text search: How to create a sandboxing app with Express, React, Redux, PostgreSQL, Docker.... gõ vào ChatGPT hay google gì đấy nó trả lời cho 😁

Đơn giản mà sử dụng thư viện thôi

Có 2 cái thư viện bạn có thể xài để thực hiện task này là: puppeteer và html2canvas

Đại ý thì ý tưởng nó sẽ là vầy ko chính xác 100% đâu nhưng có thể tham khảo:

async function captureScreenshot(url) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle2' });

  const screenshot = await page.screenshot({ fullPage: true });

  await browser.close();
  return screenshot;
}

function App() {
  const handleButtonClick = useCallback(async () => {
    const url = 'trangB'; // URL của trang B
    const screenshot = await captureScreenshot(url);

    const link = document.createElement('a');
    link.href = URL.createObjectURL(new Blob([screenshot.buffer], { type: 'image/png' }));
    link.download = 'screenshot.png';
    link.click();
  }, []);

  return (
    <div>
      <h1>Trang A</h1>
      <button onClick={handleButtonClick}>Chụp ảnh trang B</button>
    </div>
  );
}

Cách sử dụng thư viện cụ thể bạn vào trang https://pptr.dev/ và https://html2canvas.hertzen.com/ để tham khảo thêm nhé.

Khả năng cao đến một lúc nào đó nó cũng sẽ tìm cách lấy tiền từ túi bạn.

Giống như Google Photo trước cho update free sau khi mình update ảnh lên nhiều rồi nó ngưng ko cho free nữa thế là phải Đăng ký hàng tháng thôi.

Hoặc nếu như ko bắt ae đăng ký thì có một câu rất cổ điển và khá đúng:

If it's not product then you are product. 🤣

Trước mình cũng hay cất tùm lung hết thảy cái gì thấy hay cũng cất hết, cứ như người siêu tầm tài liệu vậy đó. Nhưng sau này mới thấm cái gì mà không kiếm ra tiền thì nó là RÁC theo đúng nghĩa đen luôn.

Thay vì nghĩ việc xài free thì tìm cách dùng nó hiệu quả nó mà kiếm được tiền cho mình thì bao nhiêu cũng trả. 🤣

Thực ra có rất nhiều cách tiếp cận để giải quyết việc này hay hơn.

Nhưng mình đang hiểu case của bạn đang là như vậy:

app.put("/update-post", async (req, res) => {
  const { postId, updatedPost, newTags } = req.body;

  await updatePost(postId, updatedPost);

  const oldTags = await getTagsForPost(postId);

  const tagsToAdd = newTags.filter(tag => !oldTags.includes(tag));
  const tagsToRemove = oldTags.filter(tag => !newTags.includes(tag));

  //....

  await Promise.all([
    addTagsToPost(postId, tagsToAdd),
    removeTagsFromPost(postId, tagsToRemove),
    //....
  ]);

  res.send({});
});

Việc xử nhiều logic cùng một lúc ko phải là vấn đề. Vấn đề là mọi thứ cần clear từng bước một. Trong thực tế project mình xử lý một file markdown or csv từ phía client upload lên s3 (hoặc có thể trực tiếp từ post....) sau đó xử lý hàng trăm logic trước khi đẩy vào DB là chuyện rất bt.

That note: Nhiều logic ko có nghĩa là bạn xử lý toàn bộ data ở Nodejs. (remember: Non blocking IO)

Quan trọng vẫn phải là clear từng bước 1 khó quá thì mình tách ra từng cái nhỏ hơn. Khó hơn nữa thì tìm những design hoặc template hoặc source code có sẵn (khá nhiều trên github bạn tự research nhé) => bạn đọc trong đó xem thử người ta làm thế nào thì cover chế cháo lại.

Xoá lâu quá thì cho vào queue rồi chạy batch thôi. Delete Status thì update vào 1 table Update_Status. Nếu muốn người dùng biết khi nào delete xong thì khi chạy batch xong lưu status vào db và gửi 1 cái queue message trigger thông báo cho user. (pp này hay được gọi là implement queue system)

Nếu như vẫn thích 1 phát API là ok luôn cưỡng cầu thì cũng có thể được:

1. Bằng cách nào đó Cache hay Optimize GraphQL queries để mọi thứ nhanh lên tránh Timeout.
2. Trong phần Error handling thì thực hiện retries.... ma giáo các kiểu cũng được.
3. .... có ae nào hay cho tiếp ý kiến

Mình thấy phần Time của bạn đang chỉ lấy giá trị từ sheet mà ko format:

....
var Time = shee1.getRange('d3').getValue();
....

Thường thì nếu không format thì nó sẽ tự format theo Region phù hợp.

Mình nghĩ bạn cần format nó lại trước khi gửi cho telegram. Cách để format theo tài liệu chính thức của App Script thì như thế này:

const Time = shee1.getRange('d3').getValue();
const dateTime = new Date(Time);

// February 17, 2021 13:00:00 -0500
console.log(Utilities.formatDate(date, 'America/New_York', 'MMMM dd, yyyy HH:mm:ss Z'));

// February 17, 2021 10:00:00 -0800
console.log(Utilities.formatDate(date, 'America/Los_Angeles', 'MMMM dd, yyyy HH:mm:ss Z'));

// 2021-02-17T18:00:00.000Z
console.log(Utilities.formatDate(date, 'Etc/GMT', 'yyyy-MM-dd\'T\'HH:mm:ss.SSS\'Z\''));

Có rất nhiều định dạng bạn có thể sử dụng để format theo ý của mình.

Bạn tham khảo thêm ở đây nhé: https://developers.google.com/google-ads/scripts/docs/features/dates

Bạn thử dụng ::after pseudo-element và flex-wrap: wrap để tạo ra dấu gạch và loại bỏ nó khi cần thiết. 😀

Đầu tiên, bạn thêm ::after pseudo-element vào mỗi item trong danh sách của bạn và thiết lập content của nó là một dấu gạch |. Sau đó, sử dụng flex-wrap: wrap để cho phép các item trong danh sách của bạn xuống dòng khi không còn đủ chỗ trống trên hàng hiện tại. Cuối cùng, sử dụng :last-child pseudo-class để loại bỏ dấu gạch từ item cuối cùng trên mỗi hàng.

Bạn thử theo ví dụ này xem sao:

.item::after {
  content: "|";
}

.list {
  display: flex;
  flex-wrap: wrap;
}

.item:last-child::after {
  content: "";
}

Bạn style theo cách như vậy sẽ tạo ra dấu gạch giữa các item trong danh sách của bạn, nhưng loại bỏ dấu gạch từ item cuối cùng trên mỗi hàng.

Theo mình nghĩ có thể vì computed ko được update khi prop visible thay đổi.

Mình nghĩ bạn thử làm theo cách này xem sao:

<script setup lang="ts">
import { ref, computed, defineEmits } from "vue";

// Sử dụng ref thay cho reactive và defineProps để khai báo thuộc tính visible:
const visible = ref(false);
const emit = defineEmits(['closeModal']);

const visibleModal = computed({
  get() {
    return visible.value;
  },
  set(value) {
    visible.value = value;
    emit("closeModal");
  },
});
</script>

<template>
  // Sử dụng v-model để bind giá trị cho visibleModal và update nó khi có sự thay đổi
  <a-modal v-model="visibleModal" title="Basic Modal">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>

Đoạn code trên dùng để làm gì? Bạn có thể giải thích từng bước trong đoạn code đó không? (Ngữ cảnh của bạn là gì? bạn đang làm gì?... hoặc ít nhất cũng là 1 đoạn code hoàn chỉnh thì mn mới giúp bạn được)

Đăng ký mình để đón đọc series C++ siêu đơn giản nhé

Cái bài gà què này có gì mà khó hả ông nội . Nốt lần này thôi nhoé. Chúc thi tốt...

#include <iostream>

using namespace std;

int main()
{
  int choice, run = 1;

  cout << "*-------------------------------*" << endl;
  cout << "*      MOI CHON CONG VIEC       *" << endl;
  cout << "*-------------------------------*" << endl;
  cout << "*1. Bai toan ve tam giac        *" << endl;
  cout << "*2. Bai toan ve hinh chu nhat   *" << endl;
  cout << "*3. Bai toan ve hinh tron       *" << endl;
  cout << "*0. Thoat                       *" << endl;
  cout << "*-------------------------------*" << endl;
  cout << "Chon bai toan: ";
  cin >> choice;

  while (run == 1)
  {
    switch (choice)
    {
    case 1:
    {
      // Nhap a, b, c va kiem tra xem co phai la do dai 3 canh cua tam giac khong
      cout << "Nhap 3 so a, b, c: ";
      int a, b, c, cv = 0;
      cin >> a >> b >> c;

      while (cv == 0)
      {
        if (a + b > c && a + c > b && b + c > a)
        {
          // Neu dung, in ra chu vi cua tam giac
          cv = a + b + c;
          cout << "Chu vi tam giac: " << (cv) << endl;
          choice = -1;
        }
        else
        {
          // Neu sai, nhap lai 3 so a, b, c
          cout << "Khong phai do dai 3 canh cua tam giac." << endl;
          cout << "Vui long nhap lai 3 so a, b, c: ";
          cin >> a >> b >> c;
        }
      }
      break;
    }
    case 2:
    {
      // Nhap a, b va in ra diem tich, chu vi cua hinh chu nhat
      cout << "Nhap 2 so a, b: ";
      int a, b;
      cin >> a >> b;
      cout << "Dien tich hinh chu nhat: " << (a * b) << endl;
      cout << "Chu vi hinh chu nhat: " << ((a + b) * 2) << endl;
      choice = -1;
      break;
    }
    case 3:
    {
      // Nhap r va in ra diem tich, chu vi cua hinh tron
      cout << "Nhap so r: ";
      int r;
      cin >> r;
      cout << "Dien tich hinh tron: " << (3.14 * r * r) << endl;
      cout << "Chu vi hinh tron: " << (2 * 3.14 * r) << endl;
      choice = -1;
      break;
    }
    case 0:
      run = 0;
      cout << "Thoat." << endl;
      break;
    default:
      cout << "Chon bai toan: ";
      cin >> choice;
      break;
    }
  }

  return 0;
}

Câu hỏi bố của bố đời! Nhìn như đề cương ấy nhỉ .

Không biết câu trả lời dưới đây có giúp được gì cho bạn không.

Đăng ký mình để đón đọc series C++ siêu đơn giản nhé

1. Trong C++, câu lệnh rẽ nhánh switch … case: có hai dạng:

• Dạng đơn giản:

switch(biến)
{
  case giá_trị_1:
    // Do something
    break;
  case giá_trị_2:
    // Do something
    break;
  ...
  default:
    // Do something
    break;
}

• Dạng kết hợp với câu lệnh if … else:

switch(biến)
{
  case giá_trị_1:
    // Do something
    break;
  case giá_trị_2:
    // Do something
    break;
  ...
  default:
    if(điều_kiện)
    {
      // Do something
    }
    else
    {
      // Do something
    }
    break;
}

2. Trong khi viết chương trình, lúc nào dùng câu lệnh điều kiện if … else … ?

• Câu lệnh if … else … được dùng để xác định việc thực hiện một Block code nếu điều kiện được định nghĩa là đúng, hoặc thực hiện Block code khác nếu điều kiện được định nghĩa là sai. Ví dụ:

int a = 5;
if(a > 3)
{
  std::cout << "a lớn hơn 3" << std::endl;
}
else
{
  std::cout << "a nhỏ hơn hoặc bằng 3" << std::endl;
}

3. Trong ngôn ngữ lập trình, vì sao cần ép kiểu dữ liệu? (Chọn nhiều phương án!)

• Để chuyển đổi giá trị của biến từ một kiểu dữ liệu sang kiểu dữ liệu khác, để thực hiện các phép toán hoặc các thao tác khác trên giá trị đó.
• Để đảm bảo rằng giá trị của biến được lưu trữ và sử dụng trong chương trình theo cách đúng và an toàn nhất.
• Để đảm bảo rằng dữ liệu được lưu trữ và sử dụng trong chương trình theo cách hiệu quả và tối ưu nhất.

4. Thường dùng những cách nào để xây dựng thuật toán?

• Sử dụng các quy tắc và chuẩn hoá của ngôn ngữ lập trình để thiết kế các cấu trúc dữ liệu và các thuật toán phù hợp.
• Sử dụng các kĩ thuật tư duy và khả năng tổng quát hóa để tìm ra các giải pháp tối ưu cho bài toán.
• Sử dụng các kĩ thuật và phương pháp để định lý và chứng minh độ chính xác, hiệu quả và tính khả thi của thuật toán.
• Sử dụng các kĩ thuật để đánh giá và phân tích hiệu năng của thuật toán trong khối lượng dữ liệu khác nhau.

5. Trong chương trình C++, biến được khai báo như thế nào?

Trong chương trình C++, biến được khai báo bằng cách sử dụng từ khóa là "kiểu_dữ_liệu" trước tên của biến, ví dụ:

int a;
float b;
char c;
std::string d;

Trong đó, "int" là kiểu dữ liệu số nguyên, "float" là kiểu dữ liệu số thực, "char" là kiểu dữ liệu ký tự, và "std::string" là kiểu dữ liệu chuỗi ký tự.

6. Điều kiện trong câu lệnh if … else … phải như thế nào?

Điều kiện trong câu lệnh if … else … phải là một biểu thức logic (đúng hoặc sai) hoặc một biểu thức so sánh hai giá trị. Ví dụ:

int a = 5;
if(a > 3)
{
  std::cout << "a lớn hơn 3" << std::endl;
}
else
{
  std::cout << "a nhỏ hơn hoặc bằng 3" << std::endl;
}

Trong ví dụ trên, điều kiện là "a > 3", nghĩa là biểu thức so sánh hai giá trị.

7. Trong chương trình ngoài các kiểu dữ liệu biến, hằng còn có kiểu dữ liệu nào khác không?

Trong chương trình C++, hằng còn có kiểu dữ liệu "const", là kiểu dữ liệu không thể thay đổi giá trị sau khi đã khai báo. Để khai báo một hằng là kiểu "const", ta sử dụng từ khóa "const" trước kiểu dữ liệu của hằng, ví dụ:

const int a = 5;
const float b = 3.14;
const std::string c = "Hello, World!";

8. Khi viết chương trình, lúc nào dùng câu lệnh switch … case:

Câu lệnh switch … case: được sử dụng khi cần thực hiện một khối các lệnh khác nhau tùy thuộc vào giá trị của một biến hoặc hằng. Câu lệnh switch … case: có cấu trúc như sau:

switch(biến)
{
  case giá_trị_1:
    // Do something
    break;
  case giá_trị_2:
    // Do something
    break;
  ...
  default:
    // Do something
}

Trong đó, "biến" là biến hoặc hằng cần so sánh giá trị, "giá_trị_1", "giá_trị_2", ... là các giá trị mà biến có thể có, và "default" là khối lệnh sẽ được thực hiện nếu biến không có giá trị nào trong các "case".

9. Trong ngôn ngữ lập trình C++ để khai báo dữ liệu kiểu số nguyên lớn thì khai báo?

Để khai báo dữ liệu kiểu số nguyên lớn trong ngôn ngữ lập trình C++, ta có thể sử dụng kiểu dữ liệu "long long int", ví dụ:

long long int a = 999999999999;

10. Cho a=10000000, b=10000000; để viết kết quả của phép toán ab ra màn hình cần dùng lệnh:

cout << setprecision(15); cout << (double)a*b;

Khi sử dụng phép nhân hai số nguyên lớn, kết quả có thể tràn số nên không chính xác. Do đó, ta cần chuyển kiểu dữ liệu của kết quả sang số thực (bằng cách ép kiểu) và sử dụng lệnh setprecision để đặt độ chính xác của số thực.

11. Thế nào là hoạt động phụ thuộc vào điều kiện?

Hoạt động phụ thuộc vào điều kiện là hoạt động mà sẽ được thực hiện hoặc không được thực hiện tùy thuộc vào điều kiện đã được đặt ra. Ví dụ, trong chương trình C++, câu lệnh "if … else …" là một hoạt động phụ thuộc vào điều kiện, nghĩa là khối lệnh trong "if" sẽ được thực hiện nếu điều kiện đúng, còn khối lệnh trong "else" sẽ được thực hiện nếu điều kiện sai.

12. Trong tin học, bài toán là gì?

Trong tin học, bài toán là một vấn đề cần giải quyết bằng cách sử dụng ngôn ngữ lập trình, kĩ thuật tính toán hoặc các phần mềm khác. Bài toán có thể là một tác vụ cụ thể, một vấn đề cần giải quyết trong xử lý dữ liệu hoặc một vấn đề cần giải quyết trong thiết kế hệ thống.

13. Trong chương trình C++, hằng được khai báo như thế nào?

Để khai báo hằng trong chương trình C++, ta sử dụng từ khóa "const" trước kiểu dữ liệu của hằng, ví dụ:

const int a = 5;
const float b = 3.14;
const std::string c = "Hello, World!";

Để khai báo hằng số nguyên lớn, ta có thể sử dụng kiểu dữ liệu "long long int", ví dụ:

const long long int a = 999999999999;

Để tìm kiếm tiếng Việt trong MySQL, D có thể sử dụng câu truy vấn SELECT với operator LIKE và ký tự đại diện cho dấu nháy đơn (') để tìm kiếm các giá trị có chứa ký tự tiếng Việt.

Ví dụ, để tìm kiếm các học sinh có tên chứa ký tự "đ" trong bảng students, bạn có thể sử dụng câu truy vấn sau:

SELECT * FROM students WHERE name LIKE '%đ%';

Trong đó, '%đ%' là ký hiệu cho bất kỳ chuỗi nào chứa ký tự "đ".

Hoặc có thể sử dụng collation:

SELECT * FROM students WHERE name COLLATE utf8mb4_unicode_ci LIKE '%d%';

Bạn cũng có thể sử dụng câu truy vấn SELECT với hàm CONVERT() để chuyển đổi cột name sang dạng ASCII (không dấu) trước khi tìm kiếm.

SELECT * FROM students WHERE CONVERT(name USING ASCII) LIKE '%d%';

Lưu ý:

• Để tìm kiếm các ký tự tiếng Việt có dấu, bạn cần phải đảm bảo rằng cột name được lưu trữ dưới dạng Unicode (như utf8mb4). Nếu không, câu truy vấn sẽ không hoạt động đúng đâu nhé.

Nếu token của được lưu trong localStorage dưới dạng JWT (JSON Web Token: https://jwt.io/). Thì bạn hoàn toàn có thể lấy được thuộc tính exp (thời gian hết hạn của token).

Để remove token của user trong localStorage khi token hết hạn, ngoài cách của @huukimit bạn cũng có thể thử cách này:

1. Tạo một hàm removeExpiredToken:

function removeExpiredToken() {
  // Lấy thời gian hiện tại
  const currentTime = new Date().getTime() / 1000;

  // Lấy token từ localStorage
  const token = localStorage.getItem("token");

  // Nếu không tìm thấy token, return
  if (!token) return;

  // Parse token và lấy thông tin payload
  const payload = JSON.parse(atob(token.split(".")[1]));

  // Nếu thời gian hiện tại lớn hơn thời gian hết hạn của token, remove token khỏi localStorage
  if (currentTime > payload.exp) {
    localStorage.removeItem("token");
  }
}

2. Gọi hàm removeExpiredToken mỗi khi trang web được load:

window.addEventListener("load", removeExpiredToken);

3. Gọi hàm removeExpiredToken sau mỗi lần refresh trang:

window.addEventListener("beforeunload", removeExpiredToken);