Các bài viết ngắn – phần 12

Mảng trong JavaScript

Có hai cách để tạo mảng trong JavaScript là tạo đối tượng của lớp Array: let arr = new Array(1, 2)hay sử dụng cú pháp mảng []: let arr1 = [3, 4]

Khi làm việc với một danh sách, sẽ có các thao tác cơ bản như: (các phương thức của mảng sẽ bắt đầu với dấu .)

– thêm một phần tử vào danh sách .push(), .unshift(), .splice()

– xóa một phần tử ra khỏi danh sách .pop(), .shift(), .splice()

– thay thế phần tử trong mảng với .splice()

– lặp qua từng phần tử của mảng để lấy dữ liệu hay xử lý logic for, .forEach(), .map() (lưu ý map trả về mảng mới)

– kiểm tra index của một giá trị trong mảng với .indexOf()

– kiểm tra giá trị nào với vị trí index đã biết .at()

– nối hai mảng với nhau với .concat()

– nối các phần tử trong mảng với một ký tự liên kết với .join()

– chuyển đổi mảng về chuỗi với .toString() (lưu ý phương thức này của object, và array cũng là object)

– tìm kiếm phần tử đầu tiên thỏa điều kiện với .find()

– tìm kiếm tất cả phần tử thỏa điều kiện với .filter()

– lấy ra một mảng con từ mảng ban đầu

– sắp xếp mảng theo một thứ tự nào đó với .sort(), đảo ngược mảng với .reverse()

– kiểm tra tất cả các phần tử trong mảng thỏa điều kiện với .every(), kiểm tra một vài phần tử trong mảng thỏa điều kiện với .some()

Khi sử dụng các phương thức này bạn cần chú ý một số điều sau:

– Hiểu rõ phương thức sử dụng làm gì

– Nắm rõ cú pháp

– Kiểm tra giá trị trả về

– Kiểm tra xem phương thức có làm thay đổi mảng ban đầu hay không

Bạn có thể đọc thêm ví dụ ở bài viết sau.

BeautyOnCode - các bài viết được xem nhiều nhất

Hôm kiểm tra blog giật mình nhận ra BeautyOnCode đã xuất bản 86 bài viết. Vậy là cái ngày đạt con số 100 đầu tiên đang tiến tới rất gần 🥰

(Chuyện tâm linh là cứ viết 100 bài là bạn tự dưng nổi tiếng luôn 😅)

Sau khi lướt qua lượt xem nhìn nhận ra có nhiều bài viết đạt số người xem khá ấn tượng, nên mình đã thêm một chuyên mục “Xem Nhiều Nhất” với số lượt xem từ 500 trở lên (có bài hơn 2k views), có 36 bài viết hiện đang ở đây.

Điều là mình vui nhất là các bài viết được xem nhiều nhất lại về kỹ thuật, các chủ đề tech được giới thiệu theo phong cách tự do lại được bạn đọc đón nhận ngày càng nhiều.

Top 5 bài viết trên một ngàn lượt xem về tech:

Thêm vào đó, một số bài viết non-tech cũng được bạn đọc quan tâm:

Nay bạn có thể xem các bài viết này bằng cách bấm vào “XEM NHIỀU NHẤT” (https://beautyoncode.com/category/most-views/) ở thanh điều hướng chính của blog nhé.

Bật mí nhỏ là đây chỉ mới là lượt xem trực tiếp trên blog cá nhân, bên cạnh đó còn hơn 30 ngàn lượt xem trên viblo, kipalog nữa.


Nhân đây mình cũng gửi lời cám ơn đến tất cả mọi người đã ủng hộ blog trong suốt 3 năm vừa qua với hơn 40 ngàn lượt xem trên blog BeautyOnCode hơn 35 ngàn lượt xem trên Viblo, Kipalog.

Cám ơn sự tin tưởng của 1164 bạn theo dõi trên Careerly, hơn 600 bạn theo dõi trên fanpage BeatyOnCode, gần 700 người theo dõi trên Linkedin, 300 bạn theo dõi trên Kipalog, gần 50 bạn theo dõi trên Viblo.

Cám ơn sự tin tưởng và đồng hành của mọi người, đây chính là nguồn động lực giúp mình chăm học hơn mỗi ngày.

Hi vọng có thể mang đến nhiều bài viết thú vị và bổ ích cho mọi người.

Thank you.

Kỹ năng debug

Khi gặp bug, hẳn bạn sẽ chăm chăm vào con bug và tìm cách sửa chúng. Tuy nhiên việc fix được một con bug chưa quan trọng bằng việc tìm hiểu nguyên nhân vì sao chúng lại xảy ra và làm sao tránh sinh thêm bug tương tự trong tương lai.

Julia Evans giới thiệu đến bạn một số cách để quy trình debug hiệu quả hơn (từ paper “Learning to Troubleshooting”), bằng cách chú trọng vào nguyên nhân, nâng cao kiến thức để có thêm nhiều manh mối khi debug:

Học code base

Đầu tiên bạn cần hiểu về code base của dự án, hiểu về cách dự án đang hoạt động.

Học về hệ thống

Hiểu về ngôn ngữ, thư viện, hệ thống bạn đang sử dụng. Ví dụ như HTTP caching hoạt động ra sao, CORs diễn ra như thế nào, …

Học về các công cụ

Biết và có thể sử dụng các công cụ debug như debugger, devtools, profilers, trace, dumps …

Học các chiến lược

Tìm hiểu về các chiến lược có thể debug hiệu quả như viết unit test hay viết một chương trình nhỏ để tái tạo lại bug, in và tracking log, nghỉ ngơi, nói chuyện với người có kinh nghiệm hơn, …

Học từ trải nghiệm

Không ngại sai và học hỏi nghiêm túc từ các trải nghiệm, giúp đỡ người khác fix bugs cũng là một cách tăng trải nghiệm của bản thân. Cảng nhiều kinh nghiệm thì việc debug sẽ càng dễ dàng hơn.

https://jvns.ca/blog/2022/08/30/a-way-to-categorize-debugging-skills/

CSS-in-JS là gì?

CSS-in-JS là một thuật ngữ mô tả việc viết code style CSS trong code JS, tức viết vào file .js , .jsx thay vì viết code CSS vào file .css như thông thường.

CSS-in-JS ra đời khi mà trang web ngày càng phức tạp và việc maintain tất cả các CSS của toàn bộ trang web trong một scope global document (hay global scope selectors) duy nhất của của file css gây nhiều xung đột khi trùng tên class, id hay việc ghi đè CSS trở nên khó khăn hơn.

Thêm vào đó xu hướng component-based development (hay component driven development) ngày càng phát triển với React khiến việc style từng component càng trở nên cấp thiết.

CSS-in-JS đã giúp giải quyết vấn đề này như thế nào?

CSS-in-JS sẽ trích xuất CSS theo từng component thay vì theo document như CSS.

Những ưu và nhược điểm khi sử dụng CSS-in-JS

Ưu điểm

– Code ngắn gọn hơn

– Giảm xung đột CSS

– CSS dynamic với props

– Kế thừa style

– Cú pháp SASS giúp style dễ dàng với pseudo element và pseudo class

– Tự động tạo prefix cho class CSS, không sợ bị trùng nhau

– Có thể viết unit test cho CSS

– Dễ dàng đổi theme với ThemeContext

Nhược điểm

– Không phù hợp với người chưa biết JS

– Tốn thời gian làm quen với thư viện, code base gây khó khăn cho người mới

– Sẽ khó khăn khi muốn debug bằng tên class

– Hiệu suất không tốt bằng CSS bình thường do tăng code base

Bạn tìm hiểu thêm ở link bên dưới nhé https://beautyoncode.com/css-trong-js-la-gi/

Vì sao nên gán min-width cho button?

Một vấn đề phổ biến khi tạo một nút bấm (button) là để chiều rộng của nút tùy vào nội dung của nút (text content) cộng với khoảng cách hai bên (padding).

Một vài lý do cho vấn đề này:

– Nút bấm có nội dung hiển thị thay đổi trên UI tuỳ loại ngôn ngữ là rất phổ biến. Ví dụ nút Done trong tiếng Anh hiển thị qua tiếng Việt có thể là Đã Xong, và trong tiếng Arabic thì là تمthì khi đó button Done trong tiếng Anh có độ rộng là 72px thì sẽ có độ rộng 95px trong tiếng Việt và 43px trong tiếng Ả Rập.

– Việc hai nút bấm đứng cạnh nhau có cùng chiều rộng như DoneCancel cũng thường xảy ra

– Hoặc nội dung nút bấm ở phiên bản đầu là Done nhưng qua phiên bản sau đổi thành Finished cũng làm cho kích thước của nút bấm thay đổi theo

Vì thế, việc gán cho nút thuộc tính min-width sẽ giúp hạn chế những vấn đề ở trên. Nút Done

sẽ được gán min-width là 95px và sẽ hiển thị tốt cho cả ngôn ngữ là tiếng Việt hay tiếng Ả Rập.

.button {
  min-width: 95px;
}

Nội dung này thuộc BeautyOnCode’s short posts là các bài viết ngắn tóm tắt nội dung và ý kiến cá nhân từ các nguồn như các slack channels (công ty, cộng đồng), các new letters, …

Các bài viết này cũng được đăng ở:

👉 BeautyOnCode trên Careerly (lời hứa với Careerly) Trên đây có gần 900 người theo dõi, và là trang tin công nghệ khá hay, bạn có thể tải app rồi theo dõi mình nhé.

👉 Blog BeautyOnCode, chuyên mục “Short Posts”

👉 Fanpage BeautyOnCode

👉Trang notion này tổng kết các bài viết

Nếu bạn thích đọc hàng ngày thì hãy follow các trang trên nhé. Chúc bạn đọc vui ^^

Nếu bạn nghĩ những nội dung này là hữu ích, bạn có thể khích lệ mình bằng cách:

Mời mình ☕️ cafe qua Ko-fi hay Momo

Theo dõi 👀 để nhận các bài viết mới trên: Careerly, fanpage, linkedin

Subscribe channel Youtube BeautyOnCode giúp mình với! 

🤘 Nhắn mình nhé 🤘

Hẹn gặp mọi người một ngày nào đó!

Leave a Reply

Your email address will not be published. Required fields are marked *

RELATED POST

Cặp đôi hủy diệt code xấu: DRY và Orthogonality

Bạn có nghĩ giai đoạn bảo trì (maintenance) là sau khi chương trình được phát hành (release)? Và trong giai…

Nguyên tắc SOLID trong lập trình hướng đối tượng (OOP) – thực hành cùng ngôn ngữ Python

SOLID là gì? SOLID là 5 nguyên tắc nền tảng trong lập trình hướng đối tượng OOP (Object Oriented Programming), giúp…

Bốn bước để học và viết trong thời gian dài

Bài blog này mình muốn gửi đến 4 bước mình đã làm để có thể duy trì việc học và rèn luyện…

BeautyOnCode đạt top 1 trên Careerly

Time flies! Nhanh thật, vậy là mình đã đồng hành cùng các đọc giả trên Careerly được hơn 6 tháng,…

%d bloggers like this: