Tiếp thị số, xử lý dữ liệu và lập trình
Viblo
Initializing search
GitHub
Nơi này là nơi nào
✍️Lập trình
👏Sản phẩm
📊Tổ chức dữ liệu. Phân tích dữ liệu
🔊Tiếp thị số
🔠Sắp chữ, thiết kế
🖥️Mạng máy tính
Tiếp thị số, xử lý dữ liệu và lập trình
GitHub
Nơi này là nơi nào
✍️Lập trình
✍️Lập trình
Cloud, webhook, API
Cloud, webhook, API
API đưa thông tin là thụ động. Webhook đưa thông tin chủ động
Cloud bản chất là đi thuê local của người khác
Endpoint
Node là một vật thể có ID riêng. Edge là vật thể liên kết giữa các node. Field là thuộc tính của vật thể
Web service là những API dùng trên HTTP
Facebook API
Facebook API
Các API thường dùng cho PHP
Fb hạn chế rất nhiều API để tránh việc làm nhái page
me/accounts liệt kê tất cả các page mình quản lý
Fibery
Fibery
Non ASCII or non English characters in field or database names will be transliterated to English
Google API
Google API
Build service object
OAuth, access token
OAuth, access token
Auth không phải là xác thực
Authorization sinh ra access token để client sử dụng
Client ID là để authorization server biết client nào là client nào, còn client secret là để nó đảm bảo rằng client này chính là client đó
Client gửi access token đến authorization server để được truy cập
Client là ứng dụng muốn truy cập vào dữ liệu của user
Khi access token hết hạn truy cập, client gửi refresh token đến authorization server để được cấp access token mới
OAuth giúp vẫn biết user kể cả khi user đổi mật khẩu
OAuth là cách để cấp quyền truy cập dữ liệu mà người dùng không phải cấp mật khẩu
Redirect URI là nơi
Scope là những phạm vi dữ liệu khi ứng dụng truy cập
❓OAuth là cấp phép cho ai, token là cấp phép được làm cái gì
Công cụ
Công cụ
Prettier là để làm cho dễ nhìn. Linter là để hạn chế dính bug khi dự án mở rộng
Docker
Docker
Container chỉ là một process
Container là phù du
Có vẻ như ngày xưa engine với daemon là một
Docker Desktop tạo ra một máy ảo để chạy docker engine
Engine bao gồm CLI client, API và deamon
Image là template để chạy container
Mỗi một dòng trong dockerfile sẽ tương ứng với một step khi dựng image
Nếu dựng lại image mà đánh tag giống nhau thì image cũ sẽ thành danling image
Việc dựng image được thiết lập qua dockerfile
Volume là cách để đồng bộ dữ liệu giữa máy chủ và máy ảo
Exec để chạy lệnh cho một container đang chạy
IDE (VS Code)
IDE (VS Code)
Bấm F12 để biết thêm thông tin về biến
Các biểu tượng dùng trong VS Code
Dùng snippet để viết tắt code
Giao diện VS Code
Hằng là xanh lợt, biến là xanh đậm
Language server là thứ khiến cho IDE hỗ trợ tốt hơn việc lập trình
Nhiều người có thể cùng chỉnh sửa cùng lúc như Google Docs
Phím tắt trong VS Code
Plugin hay cho người mới
VS Code chỉ là code editor, không phải IDE
VS Code nhiều khi không tìm hết file được do tên quá dài
Video hướng dẫn
Launch.json dùng để thiết lập debugger
Setting.json giúp tuỳ chỉnh thiết lập theo ý mình
Đường dẫn trong launch.json là cwd
Log, test, debug
Log, test, debug
Dùng test khi muốn biết code chạy có đúng không. Dùng debug khi muốn biết code chạy sai chỗ nào
Dễ xem kết quả các giá trị trong console debug hơn là ở Variables
Debugger
Debugger
Dùng logpoint thay cho console.log() khi debug
Không cần viết hàm quản lý debug khi đã có logpoint
Launch vs attach
Log
Log
Ngoài console.log còn có console.assert, console.trace, console.table, console.error
Tổng quan về log
Console.log chỉ hiển thị nội dung tại thời điểm vật thể được xem, chứ không phải vào lúc lệnh được thực thi
Test
Test
Lý do thấy test trước bất tiện
Tổng quan về kiểm thử phần mềm
Unit test
Hệ điều hành, path và terminal
Hệ điều hành, path và terminal
Admin privilege
Bạn không cần dùng GUI
Sự khác biệt giữa Windows và Android, Mac trong tên file
Path, env
Path, env
Article dùng cho những nội dung độc lập, chứ không nhất định phải là một bài viết dài
Biến môi trường giúp ta điền những giá trị lặp đi lặp lại nhanh hơn
PATH là đường dẫn mặc định tới những tập tin nhị phân (binary)
Việc có khoảng trắng trong tên file sẽ khiến việc xử lý code phức tạp hơn
env của người dùng được ưu tiên hơn env của hệ thống. Nhưng với biến path thì ngược lại
Pwd là thư mục mà process sẽ chạy (process working directory). cwd là thư mục mà mình đang ở đó (current working directory)
Đường dẫn đến tệp ngoài trong một script phụ thuộc vào cwd, không phải đường dẫn tới script mình đang viết
Terminal, shell, console
Terminal, shell, console
Shell là cái vỏ bảo vệ lõi của hệ điều hành
Terminal là cái chương trình để làm việc với shell
Terminal, console, shell và command line thường được dùng lẫn lộn với nhau
PowerShell
PowerShell
Các lệnh PowerShell thường dùng
PowerShell là một ngôn ngữ shell
Windows Terminal có thể được kích hoạt trong Explorer
Cmd vẫn được dùng để chạy exe
cmdlet dùng định dạng Verb Noun
Windows
Windows
Cài win mới
Local app data
Windows rất lằng nhằng trong việc thiết lập cấu hình
Khái niệm cơ bản và nguyên lý lập trình
Khái niệm cơ bản và nguyên lý lập trình
Compile time là lúc chuyển từ ngôn ngữ lập trình mà người hiểu sang ngôn ngữ máy chỉ có máy mới hiểu. Runtime là lúc máy chạy mã máy
Quy ước đặt tên biến
Việc biến đổi dữ liệu chủ yếu là để người dùng đọc cho tiện, và để máy kiểm tra dữ liệu
Việc đặt tên không có tiền tố gì sẽ tiện khi nó thường được dùng thường xuyên ở những nơi khác, ở trong một danh sách, hoặc liệt kê các thuộc tính
toString hoặc href sẽ luôn thêm slash vào sau
Khái niệm cơ bản về lập trình hướng vật thể
Khái niệm cơ bản về lập trình hướng vật thể
4 đặc điểm của lập trình hướng vật thể
Biểu thức (expression) là những thứ trả lại một giá trị nào đó
Hoạt động trung tâm của lập trình hướng vật thể là phân loại
Hàm
Hàm
Giao diện là cái khuôn của phương thức
Hàm cần gọi phải ở trong then
Hàm vô danh chính là lambda
Phương thức cho ta biết mình có thể làm gì với vật thể đó
Phương thức là một thuộc tính của vật thể
Phương thức phải gắn lên một vật thể cụ thể nào đó để có tác dụng
This, self là cách để nói rằng hành động mà phương thức sẽ làm sẽ phải gắn lên một vật thể cụ thể của lớp, thứ mà bây giờ chưa được tạo ra
Để tránh phụ thuộc lòng vòng (circular dependency) có thể dùng hàm
Mô đun
Mô đun
API là giao diện của một chương trình
Giao diện là cách để sử dụng vật thể mà không cần biết bên trong nó có gì
Khi import một hàm thì cả file chứa hàm đó sẽ được chạy. Các import cũng sẽ chạy theo, dù là để import vào một hàm khác mình không import
Nên tách bạch file util cho client và util cho server
Package và library là những cái tên khác nhau cho cùng một thứ
Vật thể, lớp
Vật thể, lớp
Chưa rõ lý do vì sao lại dịch object ra thành đối tượng chứ không phải vật thể
Dùng class khi ta có logic nghiệp vụ thực sự cần được implement để thực thi. Dùng interface để tạo ràng buộc kiểu cho biến
Không cần biết vật thể chứa dữ liệu gì, chỉ cần quan tâm nó làm được gì
Lớp là một cái khuôn để tạo các vật thể cho nhanh
Những vật thể đơn giản dùng để tra cứu dữ liệu theo từ khoá gọi là từ điển
Prototype là những thuộc tính không cần tạo ra cũng có sẵn
Thay vì ta thao túng trực tiếp dữ liệu, ta điều khiển vật thể qua phần giao tiếp của nó với bên ngoài
Nếu tất cả thuộc tính của vật thể đều đơn giản, và vật thể được dùng để tra cứu dữ liệu theo từ khoá chứ không phải là để thao tác và thay đổi thuộc tính bằng phương thức, thì nó được gọi là từ điển
Việc đóng gói (encapsulation) giúp ta không cần quan tâm vật thể lưu dữ liệu thế nào, mà chỉ cần quan tâm tới thuộc tính và phương thức của nó
Vật thể ngoài tự nhiên không chứa hướng dẫn để sử dụng nó. Vật thể trong máy tính có hướng dẫn sử dụng nó
Vật thể được tạo nên bởi những thuộc tính
Nguyên lý
Nguyên lý
Bộ nguyên lý SOLID giúp phần mềm dễ bảo trì, dễ mở rộng
Cái trừu tượng không nên phụ thuộc vào những cái cụ thể mà những cái cụ thể nên phụ thuộc vào cái trừu tượng
Mẫu thiết kế (design pattern) là những giải pháp cho những vấn đề thường gặp trong lập trình mà nhiều thế hệ lập trình viên đã đúc kết và chứng minh tính hiệu quả của nó
Stable = the APIs are not expected to change in a breaking way. Production ready = supports its intended usecases and doesn't contain major bugs.
Việc tách một khối code thành một hàm khiến cho việc đọc từng dòng trở thành đọc từng bước
While familiarity is a perfectly fine reason, it is really a bad sign if it is the only reason
Cấu trúc dữ liệu
Cấu trúc dữ liệu
Mảng các vật thể và mảng các mảng
Mặc dù mảng lưu giữ thứ tự, nhưng nhiều khi ta không quan tâm đến thứ tự đó cho lắm
Thành phần chương trình
Thành phần chương trình
Giao diện người dùng, logic, dữ liệu là 3 thành phần cơ bản cho một chương trình. Mỗi thành phần này có mục tiêu khác nhau, kỹ thuật xử lý khác nhau. Không thể trộn lẫn lộn với nhau được.
Model không biết đến View, View không biết đến Controller
Viết comment
Viết comment
Block comment dành cho việc giải thích ý tưởng của code, viết doc. Line comment để debug hoặc hướng dẫn editor đọc code của mình (directive)
Bản thân việc lập trình bằng ngôn ngữ bậc cao đã là một dạng comment
Comment có thể cho thông tin sai, nhưng code thì không
Comment cũng có bug, nhưng không giống như code, không có chương trình nào hỗ trợ debug được nó
Giải thích về thuật toán, các đánh đổi trong việc ra quyết định hoặc dẫn nguồn là các lý do tốt để comment
Hãy viết code sao cho mình khỏi comment
Thay vì comment, hãy document. Thay vì giải thích cách code hoạt động, hãy hướng dẫn cách sử dụng nó
Đơn nhiệm
Đơn nhiệm
Mỗi lớp, hàm, mô đun chỉ đảm nhiệm một nhiệm vụ xác định
Sự couple dễ được sinh ra khi muốn xử lý các dữ liệu giống nhau về chức năng và na ná nhau về cấu trúc và cách xử lý
Tránh dùng hàm lồng để làm giảm sự couple
Việc chia các lệnh trong kịch bản thành các hàm nhỏ hơn sẽ giúp dễ bắt lỗi hơn
Ngôn ngữ
Ngôn ngữ
Ngôn ngữ scripting sinh ra là để xử lý văn bản, không nhấn mạnh về kiểu, khai báo
Ngôn ngữ lập trình
Ngôn ngữ lập trình
Các ngôn ngữ lập trình tiến hoá dần để trở thành Lisp
Map, dictionary, associative array, hash, hash table là những cái tên cho cùng một thứ
Nên để dư một dấu phẩy ở phần tử cuối cùng khi tạo vật thể hoặc mảng
Việc hiển thị nội dung dữ liệu như thế nào là do công cụ quyết định, không phải ngôn ngữ quyết định
AutoHotKey
AutoHotKey
AutoHotkey combines 3 concepts into 1 built in basic object type
Tạo phím tắt bằng AutoHotKey
JavaScript và Python
JavaScript và Python
JavaScript
JavaScript
Lịch sử phát triển của JavaScript
Strick mode là chế độ code nghiêm ngặt, nó bắt buộc lập trình viên phải tuân thủ theo quy tắc mà javascript đưa ra
Biến và hàm
Biến và hàm
Biến được so sánh với nhau bằng địa chỉ bộ nhớ, không phải giá trị thực sự của biến
Biến được tạo mà không có từ khoá khai báo (var, let, const) luôn là biến toàn cục, kể cả khi được tạo trong hàm
Dùng map tiện hơn dùng for vì nó tạo ra một mảng mới cho mình và không cần phải lo mảng cũ bị sửa đổi
Luôn dùng for of, đừng dùng for in
Named export thường dùng cho các file lưu trữ nhiều function, object như utils, constant, api, store… Export default thường dùng cho class, function component
Phương thức json() của Request và Response là để chuyển từ dạng chuỗi sang vật thể
F(a)(b) để gọi hàm f(a) có chứa hàm con f1(b)
Callback, promise, async, await
Callback, promise, async, await
Callback là những hàm được dùng như đối số của hàm khác
Dùng await trong filter sẽ chẳng filter được gì
Hàm gọi hàm callback đã xác định sẵn tham số truyền vào cho callback. Callback bắt buộc phải có đúng thứ tự và kiểu biến được hàm gọi cho trước
Promise chỉ là một vật thể để việc lập trình được tiện hơn, không phải là một tính năng mà những phiên bản JS trước không làm được
Promise được sinh ra là để không phải dùng if lồng quá nhiều
Thực chất promise không giải quyết được chuyện lồng, vì promise cũng lồng vào nhau như if thôi. Thứ nó giải quyết là việc các giá trị trả về từ promise trông như không lồng vào nhau gì cả
Await với async là cách để viết hàm bất đồng bộ với tư duy khi viết hàm tuần tự
Callback là một hàm được truyền vào một hàm khác giống như một tham số bình thường
Chuỗi
Chuỗi
JSON.stringify(new Error()) trả về một vật thể rỗng
String(x) giống x.tostring(), nhưng không gây ra lỗi nếu x là null hoặc undefined
object Object xảy ra khi một vật thể bị chuyển sang dạng chuỗi
Sự kiện
Sự kiện
Mọi sự kiện đều capture và target, nhưng không phải sự kiện nào cũng bubble
Toán tử
Toán tử
Với ||, `0, '', NaN` sẽ trả về false. Với ??, chúng sẽ trả về true
Luôn dùng ===. Nếu không có lý do hợp lý thì đừng dùng ==
Mọi phép so sánh với NaN đều trả về false
Runtime
Runtime
Bundler dùng để gom hết tất cả các script lại vào làm một
Các chương trình dùng electron ngốn ram
Những API của môi trường thực thi không chạy được trên trình duyệt
Deno
Deno
Cứ 4kb thì tạo thành một read unit, chứ không phải là một lần chạy lệnh
Dùng Array.fromAsync để việc lấy dữ liệu từ KV không phải chờ tải về hết rồi mới bắt đầu lọc
Làm quen Deno cho người mới
Sau một thập kỷ phát triển, tác giả của Node viết Deno để khắc phục những thiếu sót của Node
deno info giúp thấy chỗ script được chuyển sang JS
Node
Node
Cần thiết lập EMS cho node trước khi chạy
node.js là cách để dùng JS ở backend
Npm là chương trình quản lý package cho node.js
Package.json dùng để thiết lập node
Thư viện, API
Thư viện, API
Temporal được sinh ra để giải quyết rắc rối của Date
VanillaJS chỉ là JS bình thường
TypeScript
TypeScript
/// cung cấp chỉ dẫn cho TS
Các ký hiệu trong TS
Index signature giúp khai báo kiểu của tên thuộc tính và giá trị của nó trong vật thể, dù không biết vật thể đó có cấu trúc thế nào
Index signature và record là các cách khai báo kiểu vật thể
Nếu dữ liệu không nhất thiết ở dạng vật thể thì type gọn hơn và linh hoạt hơn. Nếu đã xác định dữ liệu cần ở dạng vật thể thì interface sẽ thể hiện tốt ý tưởng của người viết hơn
as, is là những cách để nói cho TS biết là mình hiểu nhiều hơn nó
Satisfied là để kiểm tra xem dữ liệu mình nhập bằng tay có thoả kiểu hay không
tsc là TypeScript compiler, là thứ dịch TypeScript sang JavaScript
Tsconfig
Void là kết quả của những hàm không trả kết quả nào
Generic
Generic
Generic là biến dành cho kiểu
Generic là cách để giữ được tính chung chung mà vẫn không bị mất thông tin
Generic là tính từ, không phải danh từ
Thư viện, plugin
Thư viện, plugin
DefinitelyTyped
Dùng string ts để bắt kiểu cho chuỗi được tốt hơn
Dùng ts reset để sửa những lỗi kỳ lạ của TS
Người mới học TS thì nên cài extension Total TypeScript để bớt sợ
TS chỉ có thể bắt lỗi kiểu dữ liệu trong lúc viết code. Zod giúp bắt lỗi kiểu do người dùng trả về
Thay vì dùng Copilot để gợi ý code, có thể dùng 30 seconds of TypeScript
Khác biệt giữa JS và Python
Khác biệt giữa JS và Python
Về mặt kỹ thuật
Về mặt kỹ thuật
JS uses {} syntax for object literals, Python uses it for dictionary and set literals
Map trong JS tương đương với dictionary trong Python
Trong JS, console.log() sẽ hiển thị toàn bộ nội dung vật thể mà không phải làm gì. Trong Python, print() sẽ chỉ hiển thị nội dung vật thể nếu str () đã được định nghĩa
Từ điển dùng để chứa và thao tác với dữ liệu, trong khi JSON về bản chất dùng để mã hóa và giải mã dữ liệu
Ý nghĩa tên folder
Ở JS, nếu một biến có giá trị là một chuỗi JSON thì nó sẽ được hiểu là vật thể. Ở Python, nó được hiểu là từ điển
Về mặt triết lý
Về mặt triết lý
JS và Python đều không yêu cầu phải khai báo kiểu ngay lúc viết
JS được sinh ra để chạy trên trình duyệt và không được dùng để làm việc với lượng code lớn
Python tách bạch từ điển và vật thể, còn JS không làm vậy
Python tập trung vào việc cung cấp một ngôn ngữ lập trình tổng quát, dễ đọc và dễ viết
Python
Python
Exception
IPython
Jupyter notebook giúp chạy lệnh theo từng ô kèm diễn giải
Không thể thay đổi tuple một khi đã được tạo ra
Những phương thức có hai dấu gạch dưới hai bên được gọi là dunder (double underscore)
Tuple là mảng nhưng không thay đổi được số lượng phần tử
init () chỉ tạo giá trị cho lớp. new () mới thực sự là hàm tạo
init .py nói cho Python biết folder chứa nó là một package
Elif là để phân biệt else thuộc if nào
shell=True cần cho
Class
Class
Nếu lớp không định nghĩa cả repr () và str () thì kết quả trả về có dạng main .Class name object at 0x1025c4ed0
Trong REPL, gọi trực tiếp vật thể ra thì kết quả là repr (). Nếu dùng print thì kết quả là str ()
repr () trả về mô tả chi tiết để người lập trình bảo trì và sửa lỗi. str () trả về mô tả đơn giản cho người dùng sử dụng
Path, env, version
Path, env, version
Khi chạy Python trong VS Code, thư mục được chạy không phải là thư mục chứa script
Nên cài Python bằng bộ cài tải từ website nếu muốn lập trình
Pip là chương trình quản lý package của Python
Việc cài phiên bản mới không xoá phiên bản cũ đi khiến cho người mới hay bị lẫn lộn phiên bản
py là chương trình hỗ trợ việc quản lý phiên bản trên Windows
Venv tạo môi trường ảo để tránh trường hợp chồng chéo các gói và xung đột phiên bản giữa các thư viện
Conda
Conda
Anaconda giống như một fork Python có bổ sung thêm nhiều công cụ cho khoa học dữ liệu
Conda là trình quản lý thư viện, không chỉ của Python mà còn của các ngôn ngữ khác
Với những người chỉ cần dùng Python để làm dữ liệu chứ không lập trình, chỉ cần cài Anaconda là đủ. Không cần và không nên cài Python riêng
venv chỉ tạo môi trường ảo cho phiên bản hiện tại. Miniconda tạo môi trường ảo cho nhiều phiên bản
Rust
Rust
Crate là file, package là tập hợp nhiều crate
Mỗi lần refactor là một cực hình
Nếu compiler không làm cho lập trình viên thấy rõ lỗi của họ là gì, thì đó là lỗi của Rust, không phải của họ
Rust phù hợp khi code đã ổn định rồi
TS là để thêm kiểu vào một ngôn ngữ từ đầu đã không muốn có kiểu. Rust được sinh ra với ý định có kiểu ngay từ đầu
Viết chương trình bằng Rust giống như sống trong mối quan hệ bạo hành
Cargo giống npm hay pip
Ngôn ngữ đánh dấu
Ngôn ngữ đánh dấu
Chữ ML trong HTML, XML, YAML, TOML là viết tắt của markup language
JSON
JSON
JSON Schema dùng để đảm bảo file JSON được viết đúng
JSON hữu ích trong việc truyền dữ liệu vì nó hướng đến việc trở thành phần giao của các ngôn ngữ, chứ không phải phần hợp của chúng
JSON là cách để biểu diễn vật thể ra chữ, chứ tự nó không phải là vật thể
YAML
YAML
Chuyển từ YAML sang JSON
YAML thì để con người dễ đọc, còn JSON là để máy dễ đọc
YAML được sinh ra để con người đọc và viết metadata một cách dễ dàng
Regex, Unicode, tiếng Việt, emoji
Regex, Unicode, tiếng Việt, emoji
Bộ gõ tiếng Việt
Các quy chuẩn thời gian ISO và RFC
Under the hood, hệ điều hành và trình duyệt chỉ sử dụng đường dẫn ASCII
Lý thuyết Unicode
Lý thuyết Unicode
Các ký tự ASCII có 1 điểm mã
Cách máy tính hiểu ký tự khác với cách con người hiểu ký tự
Không gian mã là không gian chứa tất cả các điểm mã của Unicode
Kể cả khi viết nội dung bằng ngôn ngữ khác thì số ký tự ASCII vẫn nhiều hơn
Mỗi điểm mã được biểu diễn dưới dạng U+XXYYYY
Những số bắt đầu bằng 0x là những số hex
Tuỳ vào phương thức mã hoá mà mỗi ký tự Unicode sẽ được biểu diễn bởi 1 4 đơn vị mã, 1 2 đơn vị mã, hoặc chỉ một đơn vị mã duy nhất
UTF là cách thức để chuyển đổi từ điểm mã sang hệ nhị phân
Unicode chia thành 17 plane, mỗi plane chứa 65,536 (= 16⁴) điểm mã
Điểm mã không phải là cách để máy tính lưu ký tự
Điểm mã liên quan đến việc con người đánh số thứ tự của ký tự thế nào. Đơn vị mã liên quan đến việc máy tính dùng phương thức nào để biết tìm ký tự đó ở đâu
Regex
Regex
Cần escape regex
Ký tự unicode nếu dùng \b ngay sau thì không được
Lazy quantifier chỉ lười về bên phải, chứ không lười về bên trái
Regex giúp tìm kiếm những chuỗi phức tạp
Tiếng Việt có 2 cách đặt dấu thanh, căn cứ vào thẩm mỹ hoặc vào ngữ âm
Tự học regex
JavaScript
JavaScript
Dùng regex.exec() với while dễ vào vòng lặp vô hạn
Dùng regex.test(string) trực tiếp ngay trong if có thể ra sai
Regex.exec(), regex.test() thay đổi kết quả sau những lần gọi mới
Xử lý Unicode
Xử lý Unicode
Cài PangoCairo trước khi dùng unicode trong Graphviz
Web
Web
CORS là để trình duyệt bảo vệ người dùng, không phải để bảo vệ máy chủ
Cache giúp giảm thời gian tải trang
Cookie lưu thông tin cá nhân để server nhận dạng được ai với ai
Nếu tạo CORS proxy thì chỉ trả về đúng HTML thôi, đừng xử lý gì hết trên đó
Render phía máy chủ nhanh và SEO tốt. Render phía người dùng phù hợp cho những ứng dụng cần tương tác nhiều
Same origin policy ngăn chặn việc script ở tab này điều khiển tab kia
Cào web
Cào web
Kiếm backend API trước hơn là cào bằng frontend
BeautifulSoup
BeautifulSoup
Có 4 loại vật thể (4 lớp): Tag, NavigableString, BeautifulSoup, và Comment
NavigableString là những chữ có trong tag
Tag là từ điển
Find() chỉ kiếm tag đầu tiên, find all() mới kiếm tất cả các tag
Selenium
Selenium
Remote Control được sinh ra để giải quyết vấn đề Same Origin Policy
Selenium bao gồm IDE, Remote Control, WebDriver và Grid. Selenium 1 thực ra là Remote Control. Selenium 2 thực ra là Remote Control có thêm WebDriver
Framework
Framework
Nói cho đến cùng thì trang web chỉ là form
Route là code viết cho server. Island là code viết cho client
So sánh Single Page App (SPA) vs Progressive Web App (PWA)
UI là kết quả của state và data. State nằm ở client, data nằm ở server
Component, render, JSX
Component, render, JSX
Component hàm không có trạng thái (stateless). Component lớp có trạng thái (stateful)
Component là những hàm hoặc lớp trả về một khối JSX
Dùng fetch dạng promise chứ đừng await trong component
Không có async component vì hiệu suất quá tệ
Những hàm được export default và được viết hoa ký tự đầu tiên là component
Nếu truyền HTML làm giá trị biến thì cần dùng dangerouslySetInnerHTML, nếu không thì sẽ bị mã hoá hết
Render là quá trình chuyển đổi dữ liệu và code sang HTML
JSX, props
JSX, props
JSX là cách để viết JS như thể viết HTML
Phải viết JSX trong .jsx hoặc .tsx
Props giúp việc thêm property cho DOM giống như thêm attribute cho HTML
Props là viết tắt của property, nghĩa gốc là tài sản. Tài sản của cha mẹ thì con dùng được, nhưng tài sản của con thì cha mẹ không đụng được
Props là đối số đầu tiên của hàm component, dùng để truyền giá trị các thuộc tính của nó
Key là một thuộc tính đặc biệt của vật thể props để việc render được hiệu quả hơn
Fresh, Preact, React
Fresh, Preact, React
Fresh dùng Preact cho UI
Fresh và Astro đều cung cấp khả năng render island lần đầu tại server và những lần sau tại client
Fresh đối với Preact cũng giống như Next.js đối với React. React với Preact cung cấp khả năng render (làm framework), còn Fresh hay Next xử lý những thứ còn lại (làm meta framework)
JS là để tăng trải nghiệm người dùng. Framework là để tăng trải nghiệm lập trình viên
Lịch sử phát triển framework JavaScript
Next.js, Remix, Gatsby là những framework mà chính React giới thiệu là nên dùng
Preact chỉ là một thư viện render. Nó không có biết gì về server hay routing cả
React nên được alias thành preact/compat
React được sinh ra để làm việc với trạng thái
Vì Node, Deno viết trên V8 chứ không phải Gecko, nên chỉ có Chrome mới debug được chứ Firefox thì không
Form
Ở Preact, onInput sẽ kích hoạt ngay trong lúc nhập, còn onChange chỉ kích hoạt khi người dùng đổi focus
Island, state
Island, state
Component nằm trong thư mục island sẽ được render lần đầu ở server, còn những lần sau đều ở client
Các hàm được môi trường thực thi cung cấp không hoạt động được ở island
Island là những component ở trong thư mục islands
Island với partial hydration là một
Khi một vật thể được đổ dữ liệu vào, nó được gọi là được tưới nước
Mỗi khi state thay đổi thì islands được render lại
State giúp cập nhật dữ liệu mà không cần tải lại trang
Quản lý state
Quản lý state
Context
Context
Giá trị trả về của useContext() là giá trị được truyền vào thuộc tính value của provider
createContext() nằm ngoài global, useContext() nằm trong component
useContext() là cách để không phải dùng Consumer
Đối số của createContext() quyết định kiểu của value của Context.Provider
Hook
Hook
Chính vì setState render lại cả component, nên với những file component muốn tách ra nhiều hàm độc lập, và state
Các hàm set của hook sẽ kích hoạt việc render lại component nơi nó được khai báo
Cách dùng useEffect với useState
Dùng setState gọn hơn signal nếu không phải truyền setter qua nhiều hàm khác nhau
Không dùng mảng hoặc vật thể trong setState được
Phải viết hook trong component. Không viết trong loop hoặc if được
Trong useEffect chỉ dùng được promise, không dùng async được
useEffect được sinh ra là để side effect không tự động chạy mỗi khi component được render
Signal
Signal
Signal chỉ render lại mỗi phần tử HTML chứa giá trị của nó
Signal giúp giải quyết các vấn đề do useState hoặc Context tạo ra
Effect khác computed ở chỗ một cái có return, một cái không có return
Route, handler
Route, handler
Có một số hàm ở server sẽ không serialize được
Khi có một yêu cầu tới một route, handler được gọi trước, sau đó tới component
Kết quả được trả về ctx.render(arg) của handler sẽ được truyền lại vào props.data của component
Route cần có ít nhất một handler hoặc một component
Route không bao giờ được gửi đến client. Island được chạy ở cả server và client
Serialize là cách duy nhất để truyền dữ liệu từ server tới client và ngược lại
HTML, CSS
HTML, CSS
DOM là kết quả của việc parse HTML
DOM property khác HTML attribute
Dùng tag ngữ nghĩa thay vì dùng div
HTML giống như từng thành phần trong bộ đồ như quần, áo, nón, giày. CSS giống như màu sắc, kích thước của quần, áo. JS là thứ giúp thay đổi màu sắc, kích thước của quần, áo
Khi chỉnh CSS mà thấy không thay đổi, thử xoá cache xem
Property nghĩa gốc là tài sản. Attribute nghĩa gốc là thêm vào
Web tĩnh
Web tĩnh
Github Page, Netlifier, Verxel là những
Mkdocs giúp dựng một web tĩnh từ các file markdown
Muốn cái nào làm trang chủ thì để tên là index.html
MkDocs
MkDocs
Bất cứ một tệp nào trong overrides sẽ thay thế tệp ở theme gốc
Main.html là template
Main.html mở rộng base.html
Obsidian Mkdocs Publisher
Obsidian Mkdocs Publisher
Plugin ezlinks vừa nhiều lỗi vừa không cần thiết
py obsidianmd gặp lỗi khi chuyển từ ALL sang FRONTMATTER
Web động
Web động
Nội dung của một website WordPress được lưu trữ trong cơ sở dữ liệu dạng bảng
Nội dung trong cơ sở dữ liệu được PHP hiển thị thành HTML
PHP là một ngôn ngữ lập trình cho web
phpMyAdmin là GUI để dùng MySQL
WordPress
WordPress
WordPress là một hệ thống quản lý nội dung
WordPress viết trên nền PHP
WordPress.org là phần mềm mã nguồn mở. WordPress.com là dịch vụ hosting
Ξ Nguồn và tài nguyên hỗ trợ
Ξ Nguồn và tài nguyên hỗ trợ
Tài nguyên hỗ trợ
Tài nguyên hỗ trợ
Khoa học máy tính
Tiếng Anh
Tiếng Anh
MDN chất lượng hơn W3School
Stack Overflow
Ξ Nguồn
Ξ Nguồn
CodeAnalogies
Google Support
IBM
MDN
Phạm Đình Khánh
Real Python
Refactoring.Guru
Stack Overflow
Tự ngẫm nghĩ, trải nghiệm
Viblo
Wikipedia
freeCodeCamp
Tuhocict
👏Sản phẩm
👏Sản phẩm
Trấn Kỳ
Trấn Kỳ
Lý do viết Trấn Kỳ
Hướng dẫn sử dụng Trấn Kỳ
Hướng dẫn sử dụng Trấn Kỳ
1. Cài đặt và sử dụng nhanh
1. Cài đặt và sử dụng nhanh
1.1 Cài đặt PowerShell, Deno, Python, Git, VS Code
1.2 Lấy code
1.3 Tải code
2. Thiết lập chương trình
2. Thiết lập chương trình
Sử dụng main.ts
Sử dụng tranky.py
Thiết lập trên Fibery
3. Hiểu code nói gì
3. Hiểu code nói gì
3.1 Mô hình xử lý dữ liệu
Chiều, từ và nhãn
Ý nghĩa của biểu thức regex trong hàm lọcDữLiệuCầnTựĐộngNhậnDạng()
Ý nghĩa của biểu thức regex trong hàm lọcSốTiền()
4. Thành phần bổ trợ
4. Thành phần bổ trợ
Chạy chương trình định kỳ
Hướng dẫn debug
Sử dụng Docker
Đối ⊷ thoại
Đối ⊷ thoại
Xác định bài đăng giống nhau
Readme
📊Tổ chức dữ liệu. Phân tích dữ liệu
📊Tổ chức dữ liệu. Phân tích dữ liệu
Phân tích dữ liệu
Phân tích dữ liệu
Cách để AI không bị ảo giác là kêu nó viết query cho Wikidata
Numpy và Pandas
Ontology
Python, R
❓Không dùng vật thể mà chỉ dùng khối
Phân tích mạng lưới
Phân tích mạng lưới
Concept map, knowledge graph
The Semantic Web is essentially a distributed objects framework
Thế mạnh của RDF triplestore là tạo ra những liên kết mới không có sẵn lúc nhập vào
Phân tích xu hướng, NLP
Phân tích xu hướng, NLP
Các công cụ lắng nghe xã hội có sẵn giống như một ảnh chụp màn hình nhanh về những gì đang diễn ra
Feature Extraction, Text Representation, Text Extraction, Text Vectorization là những cái tên khác nhau cho cùng một thứ
Gensim tập trung vào mô hình chủ đề
Không giám sát nghĩa là giả định rằng người huấn luyện không có giả định nào
Mô hình trích chọn từ
Tổng quan về mô hình chủ đề
Tổng quan về xử lý tiếng Việt
Xử lý ngôn ngữ tự nhiên chính là một công cụ nghĩ
Mô hình
Mô hình
Bản chất của mô hình chủ đề là tô màu cho văn bản và từ
Mô hình bản chất là một phép biến đổi không gian vector
Mô hình chủ đề rất hữu dụng cho việc diễn giải
SVD ban đầu là để tìm ra một phép xoay không gian mà vẫn giữ nguyên tích vô hướng của các vector
Tf idf giúp xác định độ quan trọng của một từ trong một văn bản trong bộ văn bản
Tf idf mạnh hơn count vector
Vector
Vector
Bộ từ trong dictionary sẽ quyết định bộ vector
Túi từ không phân biệt được những câu có cùng các từ bởi nó không phân biệt thứ tự trước sau của các từ trong một câu
Việc biểu diễn các từ dưới dạng các vector one hot chỉ đáp ứng được khả năng huấn luyện mà chưa phản ảnh được mối liên hệ về mặt ngữ nghĩa của các từ
Việc vector hoá các văn bản là để máy tính có thể xử lý được
Độ tương đồng của hai vector chính là tích vô hướng vừa nó
Toán
Toán
Nếu xem ma trận giống như dãy số thì cũng giống như xem sách giống như dãy chữ
Phép cộng và phép nhân thể hiện sức mạnh của dữ liệu. Phép trừ và phép chia thể hiện tương quan dữ liệu
Xác suất thống kê
Xác suất thống kê
Khi các xác suất độc lập với nhau thì dùng phép nhân
Phương sai là để biết mức độ phân tán của dữ liệu so với giá trị trung bình
Tổ chức dữ liệu
Tổ chức dữ liệu
Dữ liệu dưới dạng văn bản phù hợp cho việc quản lý kiến thức
Việc lưu dữ liệu ở các công cụ khác nhau tạo thành các đảo thông tin
❓Tại sao không cho người chưa biết gì về công nghệ thông tin bắt đầu bằng việc học cơ sở dữ liệu trước thay vì học lập trình？
Chia sẻ dữ liệu
Chia sẻ dữ liệu
Syncthing dành cho đồng bộ dữ liệu giữa các thiết bị của cùng một người. Git chuyên cho việc hợp tác làm việc giữa nhiều người
Cơ sở dữ liệu
Cơ sở dữ liệu
Các chương trình ứng dụng không giao tiếp trực tiếp với CSDL mà qua một trung gian gọi là hệ quản trị cơ sở dữ liệu
DBMS cấu trúc những cách ta tổ chức và tương tác với mọi dữ liệu được lưu trữ
Dữ liệu dưới dạng cơ sở dữ liệu đảm bảo các bên tham gia nhập dữ liệu cùng một định dạng
Excel không phù hợp cho việc lập cơ sở dữ liệu
File Google Docs không thực sự là file
Giao diện block cho phép người dùng linh hoạt hơn mà vẫn giữ được sự cấu trúc
Khó có thể copy dữ liệu dạng block giữa các app khác nhau
Mở rộng quy mô bằng việc nâng cấp RAM, CPU dễ hơn với SQL. Mở rộng quy mô bằng việc chạy cùng lúc nhiều máy dễ hơn với NoSQL
Việc phân loại SQL và NoSQL giống như việc phân loại người dị tính hợp giới và người không dị tính hợp giới, hoặc phân loại người Kinh và người không Kinh
Ứng dụng quản lý là một dạng giao diện giữa người dùng và cơ sở dữ liệu
Git
Git
Dùng git tag n liệt kê tất cả các tag
Facebook chuyển sang Mercurial vì nhóm phát triển Git năm 2012 không mặn mà với monorepo
Git giúp ta du hành thời gian
Git không biết gì về folder
Real time collaboration isn't necessary in most cases, but asynchronous collaboration
Thứ ta đang trực tiếp chỉnh sửa mà ta tưởng là dữ liệu của mình thực chất là thứ được vay mượn từ commit
Việc commit giúp ta phá code mà không sợ gì, giống như có đồ bảo hộ rồi thì tha hồ nghịch điện cao thế
Vấn đề hay gặp khi dùng Git
Vật thể git
Branch
Branch
Khi merge, ours là branch hiện tại. Khi rebase, theirs là branch hiện tại
Khi viết tính năng mới nên tạo branch mới
Commit
Commit
@ là viết tắt của HEAD
Các lệnh git thường sử dụng
HEAD là commit hiện tại
Git log giúp xem lịch sử các commit
~ và ^ là để chỉ các commit trước đó
File
File
Diff does not take into account untracked files
Git diff
Git status giúp xem những file nào đã được vào stage
Ls files chỉ làm việc với index
Pathspecs giúp chọn đường dẫn một cách linh hoạt và tinh tế hơn
GitHub
GitHub
Bấm dấu . để mở VS Code web ngay trên GitHub
Template và fork
Website GitHub giống như để remote control máy của GitHub
Pull không lấy file mới về, mà lấy commit mới về
Stage, index, cache
Stage, index, cache
Stage, cache, index là những cái tên khác nhau cho cùng một thứ
Untracked, staged, unchanged và unstaged là 4 trạng thái chính của một file
git add A làm cho index giống như ở working directory. git commit am chỉ áp dụng cho những file đã có sẵn trong index
Tệp và thư mục
Tệp và thư mục
Cấu trúc phân cấp thường cứng nhắc và nhân tạo
Dữ liệu dưới dạng văn bản là dạng dữ liệu phi cấu trúc
File là thứ mà nhiều chương trình khác nhau đều đọc được
Sự sắp xếp thư mục khác nhau theo chức năng và theo sản phẩm
Văn bản thuần là dạng tổ chức dữ liệu đơn giản nhất
Đánh số phiên bản
🔊Tiếp thị số
🔊Tiếp thị số
Quảng cáo trên Facebook
Rút gọn link
SEO
Tiếp thị số
Tên miền có dấu
Facebook
Facebook
Có những người mình mong họ like nhưng họ lại không phải là người mình cần
Có vẻ như để bài viết dưới dạng link hay dạng ảnh thì fb cũng đều phân phối như nhau
Quảng cáo trên Facebook
Seeding
Share bài từ page thì thấy được số tương tác trên Facebook
Tất cả like, share từ các phiên bản URL khác nhau sẽ được đổ hết về og:url
Để biết được bài đăng của mình tiếp cận được bao nhiêu người, vào Business Suite
❓Vai trò của các chỉ số trên Facebook trong phân tích web
Schema
Schema
JSON LD là một cách để tạo schema
Open Graph chuyên cho việc chia sẻ trên mạng xã hội. Schema chuyên cho việc tìm kiếm trên Google
Open Graph và Schema.org là từ vựng. JSON LD, RDFa và Microdata là ngữ pháp
Web analytics
Web analytics
Chiến dịch là sản phẩm
Client side tracking thiếu chính xác
Có thể có tới 40% người dùng dùng adblock. Số độc giả rành công nghệ có thể lên tới 58%
Dự án là sản phẩm
Google Marketing Platform
Google Search Console chỉ lưu dữ liệu trong 16 tháng
Google Search Console dùng để biết thiên hạ đang google web mình thế nào
Link referrer không hiện đầy đủ mà chỉ có tên miền vì URL có thể chứa thông tin cá nhân
Web analytics đã thay đổi trong nhiều năm qua
Google Analytics
Google Analytics
Chỉ cần dùng một measurement ID cho các subdomain
Google Analytics dùng cookie để theo dõi hoạt động
Nếu web có ít người sử dụng thì một số dữ liệu sẽ bị giấu đi để đảm bảo tính riêng tư cho người dùng
Traffic, social, channel
Traffic, social, channel
Các URL dài có thể là organic traffic chứ không phải direct traffic
Các organic branded traffic nên được xem như là direct traffic
GA xem zalo, wordpress, stackexchange là social
Nếu medium không có gì đặc biệt thì cứ để trống để google tự phân loại
Referral channel group bao gồm organic social trong đó
Social về bản chất là referral, nhưng được tách ra để phân tích sâu hơn
Gắn tag
Gắn tag
App điện thoại có thể trở thành data stream, nhưng không thể trở thành destination
Các dữ liệu cần xử lý chung một chỗ cần được đổ về cùng một property
Các tag có thể thêm vào
Destination ID cho GA trùng với Measurement ID của web data stream
Destination là nơi nhận dữ liệu của Google tag
Google tag đổ dữ liệu về Google Analytics, không phải Google Tag Manager
Google tag, global site tag, gtag là những cái tên khác nhau cho đoạn script theo dõi người dùng của Google Analytics
Một Google tag có thể có nhiều ID
Một tag có thể có nhiều destination, nhưng một destination chỉ thuộc về một tag
Nên cài Google tag trong Google Tag Manager thay vì cài trực tiếp trên web hoặc qua plugin
❓Measurement ID của web data stream chính là Google tag ID
Google Tag Manager
Google Tag Manager
Container
Data layer variable là
Google Tag Manager là một trình quản lý các mã JavaScript được gắn vào web
Workspace
Data layer tập trung mọi dữ liệu lại vào một chỗ rồi truyền đến container
Để kích hoạt một tag trước tất cả các tag khác, chọn ❝Initialization – All Pages❞
🔠Sắp chữ, thiết kế
🔠Sắp chữ, thiết kế
TeX
TeX
LaTeX đối với TeX cũng giống như jQuery đối với JavaScript
TeX dùng cho máy in. LaTeX dùng cho tác giả
TeX là ngôn ngữ lập trình cho việc sắp chữ. LaTeX là các macro để việc định dạng được thân thiện hơn
Engine
Engine
Macro dùng để viết tắt
TeX chỉ tạo ra được DVI. pdfTeX, XeTeX, LuaTeX tạo ra được PDF
🖥️Mạng máy tính
🖥️Mạng máy tính
Giao thức
Giao thức
Protocol là cách để các bên nhận và gửi dữ liệu hiểu nhau
HTTP
HTTP
HTTP là ngôn ngữ để trình duyệt và webserver nói chuyện với nhau
Request là thứ client gửi cho server. Response là thứ server gửi cho client
SSL và TLS tạo một ống bảo vệ cho HTTP
Trình duyệt chỉ gửi yêu cầu và nhận phản hồi ở dạng HTTP
Yêu cầu HTTP chỉ là một file text
IP, DNS, DHCP
IP, DNS, DHCP
DDNS cách để không cần phải biết IP của mình là gì mà vẫn có thể truy cập được, kể cả khi nó thay đổi không báo trước
DHCP giúp thiết bị có được những thông số cần thiết để kết nối mạng
DNS giúp chuyển tên miền mà con người hiểu được thành IP mà máy tính hiểu được
DNS sẽ đi hỏi các root nameserver
Default gateway là IP của router
IP mọi người thường sử dụng là IP động
MAC không thay đổi được, còn IP thì thay đổi được
Subnet mask là độ lớn của host network
Switch là cái bưu điện. Mọi thư từ đều được gửi đến đó chứ không gửi đến địa chỉ người nhận
Máy chủ
Máy chủ
Apache, Nginx là những web server phổ biến
CDN tạo ra điểm truy cập gần nhất dựa vào vị trí địa lý của người dùng, để thời gian tải web không chịu ảnh hưởng bởi việc nó được đặt ở đâu
CNAME là
Cloudflare đóng vai trò là một proxy và CDN
Cpanel là
Edge là sự kết hợp giữa CDN và serverless
Proxy làm trung gian để client lấy dữ liệu từ server
Reverse proxy chủ yếu bảo vệ server. Forward proxy chủ yếu bảo vệ client
Server là phần mềm cung cấp dữ liệu cho phần mềm khác. Client là phần mềm đòi hỏi phần mềm khác cung cấp dữ liệu cho mình
Serverless là loại server tự khởi động mỗi lần có người truy cập thay vì luôn trực sẵn chờ người truy cập
Tên miền, URI
Tên miền, URI
127.0.0.1 và localhost là một
Mọi URL đều là URI
Origin là sự kết hợp của protocol, hostname và port
Port là số hiệu của chương trình cụ thể được nhận gói tin
URL bao gồm scheme, host, port, path, query, fragment
URN giống như tên người, còn URL giống như địa chỉ nhà
Www thực ra chỉ là một tên miền thứ cấp như bao tên miền thứ cấp bình thường khác
Viblo
Nguồn::
Cập nhật lần cuối
:
30 tháng 6, 2024
Tạo
:
3 tháng 11, 2023
Trở lại mục lục