The Commodore 64 Keyboard Font, For Everyone

Chen Hui Jing137 Hot5 min1 mo agoAI

I still like writing websites by hand

Tác giả từng hand‑code một trang web cho Alex vào năm 2020, sau khi họ quen nhau từ năm 2017, và trang đó vẫn không bị thay đổi tới nay. Ông chọn viết bằng HTML thuần, CSS và vanilla JavaScript, không dùng bất kỳ framework hoặc công cụ build nào, nhằm tối ưu độ đơn giản và khả năng duy trì lâu dài. Sau hơn ba năm, trang web vẫn hoạt động ổn định mà không cần cập nhật, cho thấy việc tránh phụ thuộc vào thư viện bên thứ ba giảm thiểu rủi ro lỗi và công việc bảo trì. Điều này cho thấy khi mục tiêu là một trang web tĩnh thay đổi hiếm, việc hand‑code giúp kiểm soát hoàn toàn mã nguồn, giảm kích thước tải và dễ dàng di chuyển giữa các host. Bài viết nhắc nhở lập trình viên cân nhắc trade‑off giữa tốc độ phát triển bằng framework và lợi ích lâu dài của mã nguồn hand‑written, đặc biệt cho các dự án có thời gian sống dài.

Bài viết này giúp bạn hiểu được giá trị của việc viết website thủ công trong kỷ nguyên framework hiện đại.

#css #ui-design #astro Source

Terence Eden6 Hot2 min1 mo agoAI

Death to px, long live ch!

Bài viết chỉ ra rằng khái niệm pixel trong CSS không phản ánh thực tế vì màn hình hiện đại không có lưới vuông hoàn hảo và 1px có thể bao gồm nhiều điểm vật lý trên màn hình độ phân giải cao. Tuy nhiên, vì 1px được định nghĩa là một góc nhìn cụ thể (1/96 inch) và đượcScale theo độ phân thiết bị, nó không luôn tương ứng với một điểm vật lý, dẫn đến sự sai lệch khi thiết kế “pixel perfect”. Tác giả khuyên thay vì dựa vào px, nhà phát triển nên sử dụng đơn vị dựa trên ký tự như ch (chiều rộng của ký tự “0”) vì nó thay đổi theo font-size và cung cấp kích thước liên quan đến nội dung thực tế. Ví dụ, trên màn hình Retina, 1px có thể chiếm 2-4 điểm vật lý, trong khi 1cm trong CSS cũng không chính xác bằng một centimet SI vì trình duyệt áp dụng hệ số thay đổi dựa trên dpi của thiết bị. Bài học chính là khi thiết kế giao diện responsive, ưu tiên các đơn vị tương đối (em, rem, ch, vw) thay vì px để tránh phụ thuộc vào độ phân giải phần cứng và duy nhất nhất quán trên các thiết bị khác nhau.

Bài này giúp lập trình viên hiểu bản chất thực sự của đơn vị pixel trong CSS để tránh những ảo tưởng thiết kế.

#webdev #css #ui-design Source

Frontend Masters1 Hot1 min19 d agoAI

Understanding CSS Text-Box: Simplifying Padding Solutions

Tính năng CSS text-box giúp đơn giản hóa việc điều chỉnh padding cho các button mà không cần dùng đến magic numbers. Các lập trình viên thường gặp vấn đề khi căn giữa nội dung trong button với padding khác nhau, nhưng text-box giải quyết hiệu quả vấn đề này bằng cách sử dụng text-box-trim và text-box-edge property. Công nghệ này đặc biệt hữu ích cho các component có text-align center và padding không đồng đều theo các cạnh. Tính năng này đang được hỗ trợ trong Chrome 117 và Edge 117, mang lại trải nghiệm phát triển mượt mà hơn.

Tìm hiểu CSS text-box giúp bạn đơn giản hóa việc điều chỉnh padding cho button mà không cần dùng đến những con số ma thuật.

#css #typography Source

Community Picks216 Hot1 min2 y agoAI

7 Practical Tips for Cheating at Design

Các developer web thường xuyên phải đưa ra quyết định thiết kế visual dù không phải chuyên môn. Nguyên nhân chính là thiếu designer full-time trong nhiều công ty, dẫn đến việc developer phải tự đảm nhiệm task này. Hệ quả là sản phẩm thường thiếu tính nhất quán và chuyên nghiệp. Bài viết đưa ra 7 practical tips giúp developer "lách luật" design mà không cần học design chuyên sâu, bao gồm kỹ thuật như CSS Grid, Flexbox và custom properties. Điều đáng học là cách áp dụng nguyên tắc "design systems" để tự động hóa quy trình thiết kế ngay trong code.

Bài viết này cung cấp cho lập trình viên 7 mẹo thực tế để cải thiện kỹ năng thiết kế mà không cần thành thạo chuyên môn design.

#webdev #typography Source

Hackaday1 Hot2 min1 mo agoAI

Artificial Intelligence As It Once Was

Internet Archive vừa công bố bộ sưu tập "Vintage Artificial Intelligence" cho phép truy cập và chạy phần mềm AI từ thập niên 1970 đến 1990 trực tiếp trên trình duyệt qua mô phỏng. Bộ sưu tập này chứa nhiều phiên bản của Eliza, các trò chơi phiêu lưu hội thoại, môi trường Lisp và Prolog, Racter (chương trình viết truyện đầu tiên), Alter Ego, một số triển khai của Conway's Game of Life và chương trình cờ vua Sargon. Mặc dù một số tác phẩm nổi tiếng như Hexapawn, Parry và công cụ George không được bao gồm, nhưng bộ sưu tập vẫn cung cấp đủ материала để nghiên cứu cách các hệ thống dựa trên quy tắc và xử lý ngôn ngữ tự động hoạt động trong thời kỳ đầu của AI. Nhờ khả năng mô phỏng trong trình duyệt, nhà phát triển và nhà nghiên cứu có thể kiểm tra, so sánh và học hỏi từ mã nguồn gốc mà không cần cài đặt phần mềm cũ hoặc máy tính thời đại. Điều này nhắc nhở chúng ta về giá trị của việc lưu trữ và truy cập phần mềm lịch sử để tránh mất mát kiến thức về thiết kế hệ thống chuyên gia đầu tiên và cung cấp cảm hứng cho các phương pháp AI hiện tại dựa trên quy tắc.

Bài viết này giúp lập trình viên khám phá và trải nghiệm nền tảng lịch sử của trí tuệ nhân tạo từ những năm 1970-1990.

#ai #retrocomputing Source

Six Labors : ImageSharp1 Hot16 min1 mo agoAI

Six Labors : Fitting Type to the Pixel Grid

Bài viết giải thích khái niệm hinting của phông chữ và vai trò của nó trong việc đưa đường viền ký tự vào lưới pixel để hiển thị sắc nét ở kích thước nhỏ. Nó so sánh cách TrueType và CFF thực hiện hinting khác nhau, nêu rõ TrueType sử dụng chương trình hint dựa trên bytecode trong khi CFF dựa trên các hướng dẫn PostScript và không có vòng lặp. Do sự khác biệt này, các bộ render truyền thống thường phải chọn một phương pháp hoặc thực hiện chuyển đổi phức tạp, dẫn đến chất lượng hiển thị không đồng nhất giữa hai định dạng. SixLabors.Fonts phiên bản 3.1 đưa ra một bộ grid‑fit chung có thể xử lý cả hai định dạng, áp dụng các quy tắc hinting của TrueType và mô phỏng hướng dẫn CFF trên cùng một pipeline rasterizer. Kết quả là văn bản nhỏ được hiển thị nét hơn và nhất quán trên các thiết bị khác nhau, cho thấy lợi ích của việc thống nhất quá trình hinting thay vì dựa vào các giải pháp riêng cho từng định dạng.

Bài viết này giúp lập trình viên hiểu rõ về font hinting và cách SixLabors.Fonts tối ưu hiển thị chữ sắc nét trên màn hình.

#typography Source

Hackaday0 Hot2 min23 d agoAI

It’s The Speech Synthesiser You Wanted, For The Computer You Had

Perfect Paul ][ là dự án DIY tái tạo bộ speech synthesizer DECtalk kinh điển thành một card cắm thay thế cho máy Apple ][. Thiết kế sử dụng RP2040 microcontroller, I2S DAC, amplifier và speaker cùng logic bus-interface để card xuất hiện tại một dãy địa chỉ bộ nhớ. Phần mềm có thể gửi lệnh speech bằng cách POKE giá trị, tương tự các synthesizer dựa trên SP0256 thời kỳ đó nhưng với chất lượng voice DECtalk cao cấp hơn. Người tạo ra dự án đề xuất thiết kế này có thể được điều chỉnh cho các máy 8-bit khác.

Bài viết giúp bạn hiểu cách tái tạo công nghệ tổng hợp giọng nói DECtalk cổ điển cho máy tính Apple ][ bằng linh kiện hiện đại.

#deep-learning #retrocomputing Source

Hackaday0 Hot9 min22 d agoAI

Rosy Retrocomputing

Tác giả đã xây dựng một trình tiền xử lý tên BAL/lblbasic cho ngôn ngữ MBASIC trên hệ điều hành CP/M, thêm các nhãn, cấu trúc điều khiển (IF/THEN/ENDIF, WHILE/WEND) và ngăn xếp số học. Công cụ ban đầu được viết bằng awk, sau khi chuyển sang Python (với sự hỗ trợ của LLM) và cuối cùng được tái triển khai bằng MBASIC để có thể tự chạy trên phần cứng thập niên 1980. Các mẫu chương trình như trình điều khiển màn hình LED TM1637 và chương trình HILO.BAL (~1300 dòng tạo ra ~900 dòng BASIC) chứng minh hiệu quả của phương pháp này. Bài viết cho thấy rằng với một số công cụ phù hợp, retrocomputing trở nên thực sự thú vị chứ không chỉ là sự hoài niệm lãng mạn.

Bài viết này cho thấy cách tạo công cụ phần mềm giúp biến lập trình retro trở nên thú vị và hiệu quả trên phần cứng cũ.

#bash #retrocomputing Source

The Commodore 64 Keyboard Font, For Everyone

Recommended for you

Bình luận

I still like writing websites by hand

Death to px, long live ch!

Understanding CSS Text-Box: Simplifying Padding Solutions

7 Practical Tips for Cheating at Design

Artificial Intelligence As It Once Was

Six Labors : Fitting Type to the Pixel Grid

It’s The Speech Synthesiser You Wanted, For The Computer You Had

Rosy Retrocomputing

One account, the whole ecosystem

8syncdev.com

Courses

Coding practice

IELTS

ZUS — AI IDE

mind0

AcoLeads