Category Archives: Techniques

Thiết lập lời chào người dùng tùy theo giờ trong ngày bằng JavaScript thuần

Kha khá website và ứng dụng bây giờ có một lời chào người dùng ở landing page, giống như “Good morning, Phuc Nguyen dep trai“. Bạn cũng có thể lập trình chức năng này bằng một số dòng lệnh đơn giản như sau đây blog sẽ trình bày ^^.

Trong HTML, tạo một thẻ div với idgreeting

<div id="greeting"></div>

Sau đó, trong JavaScript, chúng ta sẽ sử dụng phương thức getHours() sau khi tạo một đối tượng mới kiểu Date. Với logic đơn giản như là:

  • 0:00 – 12:00: buổi sáng.
  • 12:00 – 18:00: buổi chiều.
  • 18:00 – 0:00: buổi tối.

ta sẽ so sánh giá trị mà phương thức trên trả về với các thời gian đã nêu, sau đó truyền lại thông tin lời chào cho thẻ div greeting ở trên.

Code JS như sau:

<script>
    const greeting = document.getElementById("greeting");
    const hour = new Date().getHours();
    const welcomeTypes = ["Chào buổi sáng ", "Chào buổi chiều, ", "Chào buổi tổi "];
    let welcomeText = "";
    if (hour < 12) welcomeText = welcomeTypes[0];
    else if (hour < 18) welcomeText = welcomeTypes[1];
    else welcomeText = welcomeTypes[2];
    greeting.innerHTML = welcomeText;
  </script>
Đơn giản vậy thôi, chúc các bạn lập trình vui vẻ!

A rare yet super useful React + Flask tutorial

Hey folks, how’s your coding coming along?

Our multidisciplinary project this semester is about realizing a website for the machine learning department of the head lecturer. The required tech stack is quite unfamiliar to us, and the general archive of tutorials doesn’t help.

When searching for a Flask + React tutorial, there’s not many that pops up. Luckily, I’ve found one very useful tutorial:

This man is my savior! Basically what you’d do is to write RESTful APIs in Flask and then connect to the Reactjs frontend using a proxy. Let’s see how this goes.

Happy coding.

2 công cụ hỗ trợ về màu sắc cho lập trình viên

Lập trình web hay mobile thì đều tới lúc phải chọn màu sắc sao cho đẹp, vừa mắt và phù hợp với nội dung mình muốn truyền tải. Sau đây là 2 trang web mình thấy khá hay để hỗ trợ dev (vốn không quá ‘giỏi’ về mặt thẩm mỹ, ý kiến chủ quan) trong việc xây dựng trang web hay ứng dụng mobile.

Để chọn palette màu: https://colors.dopely.top/palettes

Để đổi màu từ hex code sang RGBA: https://rgbacolorpicker.com/hex-to-rgba

Mình đang làm việc với flutter, và cách công nghệ này chọn màu với ngôn ngữ Dart làm mình hơi lúng túng — tại có nhiều lựa chọn quá. Nếu truyền mã hex như trên mạng (ví dụ #F4F1DE thành 0xF4F1DE) rồi đặt biến thì nó hơi phiền ở chỗ: (1) nó là một biến int, khó quản lý, (2) nó hiển thị màu không đúng như ý mình. Do đó, mình chuyển nó thành RGBA, rồi gán nó vào một biến Color luôn.

Color mainColor = const Color.fromARGB(255, 244, 122, 95);

Happy coding!

Update 21/7/2022: thực ra không cần làm nhiều như thế, chỉ cần lấy mã hex xong append nó vào string sau: “0xFF”. Ví dụ màu ở trên sẽ là #0xFFF4F1DE. Learned this the hard way. 😅

Set working directory of your R script automatically

When you’re working with some datasets in R-studio, you have to define an absolute path to such file and set the working directory of your script accordingly. Doing this would be very time-consuming in some occasions. Luckily, there’s an API call that can simplify the process.

setwd(dirname(rstudioapi::getActiveDocumentContext()$path))

It is best that  you place the R-script and the datasets in the same folder. Make sure to include the given command at the top of your script for the best portability. If your collaborators want to run the R-script on their computer, they wouldn’t have to change the working directory themselves, how cool is that!

 

Kiểm tra số chẵn, số lẻ bằng phép thao tác bit trên c++

Với một người không rành máy móc thì hẳn họ cũng sẽ biết rằng máy tính hoạt động theo nguyên tắc của hệ nhị phân (0 và 1). Các phép thao tác bit (bit-wise operations) trong C++ là một thứ khá hay ho để ta có thể vận dụng hệ nhị phân để giải quyết một số bài toán lập trình, mà chủ đề hôm nay sẽ là về kiểm tra tính chẵn lẻ của một số bất kỳ.

Thuật toán kiểm tra cơ bản rất dễ hiểu. Ta thử xem liệu số n nào đó có chia hết cho 2 hay không: nếu chia hết thì số đó là số chẵn, ngược lại là số lẻ.

Với các thao tác bit, ta sẽ ghép n với số 1 bằng toán tử AND. Toán tử AND sẽ chỉ trả về 1 nếu cả hai bit đầu vào đều là 1, đúng theo bảng chân trị của lý thuyết toán rời rạc. Khi một số lẻ ở hệ thập phân được chuyển đổi sang hệ nhị phân, chữ số cuối cùng sẽ luôn là số 1. Lợi dụng điều này, ta sẽ biết được số n ban đầu là lẻ hay chẵn bằng cách xem xét output của AND.

Ưu điểm của thao tác bit là nó chạy nhanh hơn cách thông thường, với lại làm bạn ngầu hơn với cả những người đã biết lập trình (haha).

Sau đây là đoạn code C++ mô phỏng lại những gì mình vừa nói.

#include <bits/stdc++.h>
using namespace std;
int main(){
     int n = 7;
     if (n & 1){
           cout << "odd number.";
     } //& là ký hiệu của phép AND trên C++.
     else cout << "even number.";
}

Một bài lập trình hay về số nguyên tố

Số nguyên tố là thứ quá đỗi quen thuộc với những ai học toán, cũng như đối với các lập trình viên. Ai học giải thuật đều đã giải qua những bài về số nguyên tố, với độ khó dàn trải từ đơn giản tới phức tạp, từ vòng lặp thử tính chia hết tới sàng số nguyên tố Eratosthene…

Hôm nay mình rảnh thì có nghĩ ra một bài như thế này, các bạn xem qua nhé!

Đề bài: Cho hai số nguyên dương x và y (các test case đưa vào luôn đảm bảo x > y). Viết chương trình kiểm tra xem x2 – y2 có phải là số nguyên tố hay không.

Thoạt nhìn qua thì bài này khá đơn giản. Tính x2 – y2, rồi kiểm tra. Nhưng khi x và y lớn, ví dụ cỡ 1018 thì cách này sẽ chạy quá thời gian.

Hãy quan sát biểu thức x2 – y2. Nếu bạn đã học 7 hằng đẳng thức đáng nhớ, sẽ dễ thấy rằng x2 – y2 có thể được viết dưới dạng (x-y)(x+y). Vì x và y đều là các số nguyên dương, nên x 1 và y 1. Từ đó suy ra: (x+y) 1.

Xét biểu thức còn lại, x-y. Sẽ xảy ra hai trường hợp là (x-y) 1 và (x-y)=1. Với trường hợp đầu tiên, x2 – y2 sẽ không là số nguyên tố vì vi phạm định nghĩa (chỉ có hai ước là 1 và chính nó). Do đó với (x-y)=1, biểu thức ban đầu sẽ tương đương với chỉ x+y. Ta chỉ cần xét x+y là đủ. Sau đây là code miêu tả bài toán này.

bool primeSquare(long long a, long long b)
{
    if (a-b != 1) return false;
    long long num = a + b;
    if (num % 2 == 0) return false;
    for (long long i = 3; i*i <= num; i += 2)
    {
        if (num % i == 0) return false;
    }
    return true;
}

Lost Desktop icons after uninstalling Komorebi on Linux Mint

Komorebi is an application that enables animations for desktop wallpapers. When uninstall Komorebi, there is a possibility that desktop will become unresponsive: desklets are still displaying but no icons, right click doesn’t show anything. To fix it, run this code in Terminal:

gsettings set org.nemo.desktop show-desktop-icons true

Thing should be fine after this.

Best way to install Node.js and NPM

I’m writing this post as I need to install node.js and npm to install packages for reveal.js, I’m on Ubuntu 18.04 Bionic.

Normally we can install node.js via terminal by

sudo apt install nodejs

But this is not the best way since the version is outdated and some dependencies won’t meet. The best way to install the latest node.js and npm is via nvm.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

Note that the version number can be checked by going directly to the website and see. The above script will download all the package and put nvm into the Linux alias (so we can use the nvm command globally). After this, log out and log in to activate the alias.

Once you log in, run below script

nvm install node

To update:

nvm install node
nvm alias default nodenvm install node
nvm alias default node

From this answer: https://askubuntu.com/a/1009527