Dwitter - Bộ sưu tập demo JavaScript 140 ký tự

 (beta.dwitter.net)
8 điểm bởi GN⁺ 2026-01-11 | 2 bình luận | Chia sẻ qua WhatsApp
  • Dwitter là một nền tảng cho phép viết và chia sẻ các demo trực quan bằng mã JavaScript trong phạm vi 140 ký tự
  • Mỗi bài đăng được gọi là một “dweet”, hiển thị đồ họa hoạt hình chạy ngay lập tức cùng với mã
  • Người dùng tương tác thông qua bình luận, remix, hashtag, và việc biến thể cũng như tái sáng tạo từ mã diễn ra rất sôi nổi
  • Có thể khám phá nội dung phổ biến theo nhiều tiêu chí sắp xếp như hot, new, top (tuần/tháng/năm/toàn thời gian)
  • Đây là một sân chơi thử nghiệm lập trình sáng tạo để hiện thực hóa các hiệu ứng thị giác phức tạp bằng mã ngắn

Tổng quan về Dwitter.net

  • Dwitter.net là một nền tảng web tạo demo trực quan bằng mã JavaScript giới hạn 140 ký tự
    • Mỗi demo được gọi là một “dweet”, tạo ra đồ họa hoạt hình chạy ngay trong trình duyệt
    • Sau khi đăng nhập, người dùng có thể viết dweet mới hoặc remix tác phẩm hiện có
  • Trang web cho phép khám phá nội dung phổ biến theo nhiều tiêu chí sắp xếp như hot, new, top (tuần/tháng/năm/toàn thời gian)
  • Mỗi dweet có các chức năng chia sẻ, toàn màn hình, báo cáo, bình luận

Một số dweet tiêu biểu

  • “Bubble universe colour expansion” được đánh giá cao nhờ màu sắc đa dạng và hiệu ứng thị giác rõ nét
    • Trong phần bình luận có những phản hồi như “A whole universe!”
  • “Ants! 🐜” là tác phẩm thể hiện một đàn kiến bằng mã ngắn, nhận được lời khen như “god level dweetage!”
  • “Trees, shadows, hills.” là hoạt ảnh mô tả cây, bóng đổ và đồi núi, nhận phản hồi như “Amazing stuff!”
  • “Flight Over Destroyed City ✈️” tái hiện cảnh bay phía trên một thành phố bị tàn phá
    • Phần bình luận tiếp tục xuất hiện những phản ứng hài hước như “i love the smell of sulfur and uranium in the morning”
  • “Solar Orbit ☀️🌘” hiện thực hóa quỹ đạo hành tinh trong 140 byte, tạo nên sự kinh ngạc như “How did you fit a whole planetary system in 140 BYTES OF JAVASCRIPT!?!?”

Hoạt động cộng đồng và văn hóa remix

  • Mỗi dweet có thể được remix dựa trên mã của người dùng khác, và liên kết đến bản gốc được ghi rõ
  • Phần bình luận pha trộn phản hồi kỹ thuật, cảm nhận, sự hài hước, tạo nên bầu không khí cộng đồng sôi động
  • Qua tính năng hashtag, có thể khám phá theo chủ đề như #space, #galaxy, #lighting, #scene

Đặc điểm kỹ thuật

  • Phần lớn mã được nén dưới dạng eval(unescape(escape...)), nhằm tạo ra hiệu ứng thị giác tối đa trong giới hạn 140 ký tự
  • Trong mã, việc biểu đạt hình khối, màu sắc và chuyển động chủ yếu dựa trên Canvas API
  • Mỗi dweet đều ghi rõ độ dài mã (ví dụ: “// 136/140”), nên kỹ thuật tối ưu hóa và nén là yếu tố quan trọng

Sân chơi cho thử nghiệm lập trình sáng tạo

  • Dwitter là hình thức kết hợp giữa code golf và nghệ thuật thị giác, thúc đẩy sự cạnh tranh sáng tạo giữa các nhà phát triển
  • Quá trình tạo ra kết quả thị giác phức tạp từ mã đơn giản được xem như một thẩm mỹ của lập trình
  • Nền tảng này hoạt động như một không gian thử nghiệm để khám phá ranh giới giữa biểu đạt nghệ thuật và nén kỹ thuật

Bài viết liên quan

2 bình luận

 
roxie 2026-02-27

Thật sự quá kỳ diệu.
 
GN⁺ 2026-01-11
Ý kiến trên Hacker News
  • Thật vui khi thấy cái này trên HN :D
    Xin lỗi vì đã phải khởi động lại máy chủ trong chốc lát. Nhờ bài học rút ra từ lần trước khi chuyện tương tự xảy ra, tôi đã điều chỉnh kích thước DigitalOcean droplet
  • Nó rất ngầu, nhưng nếu giới hạn theo số ký tự thì sẽ xuất hiện một metagame dùng ký tự Unicode đa byte để nén ký tự ASCII
    Ví dụ như dạng eval(unescape(escape\<<97 wide characters>>`.replace(/u../g,'')))`, tức là khôi phục 194 ký tự ASCII từ 97 ký tự Unicode
    Tôi thà có một sự đồng thuận kiểu như cuộc đối thoại giữa Ford Prefect và Mr Prosser: “cứ coi như đã nhét 194 ký tự vào 140 ký tự và cứ hiển thị thế đi”
    Điều này cũng giống logic của giới demoparty với giới hạn 4096 byte, trong khi thực tế dùng Crinkler để nén 12~20KB cho vừa
    • Frontend beta tại beta.dwitter.net/top có nút gạt “compressed” để xem theo cách bạn muốn
    • Một cách khác là đơn giản giới hạn theo số byte UTF-8 (ví dụ: 140 byte)
    • 140 byte tương đương khoảng 160 ký tự ASCII. Nếu bỏ qua ký tự điều khiển thì có thể lên tới 170 ký tự
    • Có lẽ đây là bình luận có nhiều trả lời nhất mà tôi từng thấy trên HN :-)
    • Thật vui khi gặp người cũng nhận ra tham chiếu HHG (Hitchhiker’s Guide)
  • Mùa đông này Dwitter sẽ tròn 10 năm tuổi
    Tôi tìm lại một cuộc phỏng vấn cũ và thấy khá thú vị: phỏng vấn trên Medium
    Phép màu thật sự nằm ở cộng đồng: cộng đồng Discord
  • Tôi đã tổng hợp một bộ phác thảo tạo sinh được làm trong 140 ký tự trên Dwitter
  • Trước đây tôi từng tham gia một cuộc thi nhỏ trong phiên bản Autohotkey của Dwitter và đã thắng với hoạt ảnh bánh răng
    GIF hoạt ảnh
    Xem thêm chi tiết trong bài viết trên diễn đàn Autohotkey
  • Những trang như Dwitter khiến tôi lấy lại niềm tin vào sự sáng tạo của con người
    Khi có ràng buộc, sự đa dạng lại bùng nổ. Ảo giác thị giác, những câu ngắn, các thử nghiệm theo hướng không ngờ tới
    Ràng buộc giúp tập trung hơn và làm giảm chi phí của thất bại, nên khuyến khích thử nghiệm
    Phần lớn nền tảng cố mở rộng sáng tạo bằng cách thêm tính năng, nhưng lại khiến mọi thứ phức tạp hơn
    Tôi thường nghĩ đến quy luật ràng buộc tạo ra niềm vui
    Tôi tò mò khi nào ràng buộc tạo ra kết quả tốt hơn, và khi nào nó lại mang cảm giác giả tạo
  • Tôi từng cực kỳ say mê code golf 140 byte vào thời kỳ đầu của Twitter
    Trải nghiệm đó đã thay đổi hoàn toàn cách tôi tư duy về code
    Trong một cộng đồng nhỏ, chúng tôi chia sẻ các kỹ thuật tiết kiệm byte và làm từ bộ dựng Mandelbrot đến trình giải Sudoku
    10 năm sau, tôi thực sự sốc khi phát hiện bản triển khai UUID mình từng viết ngày xưa trong codebase của công ty
    Liên kết liên quan: video YouTube, Byte-saving techniques, UUID gist
  • Hôm nay tôi mới biết rằng: 
    js_func`string`
    Đây là cú pháp JS hợp lệ. js_func được gọi như một tagged template literal
    Giờ tôi sẽ thử dùng mấy thứ như console.log\weeee``
    • Một số thư viện dùng cú pháp này để hỗ trợ cú pháp kiểu JSX mà không cần bước build
      Ví dụ: htm, lit.dev
    • Gần đây tôi cũng dùng tính năng này trong trình tạo ảnh trong code
      Tôi lưu dữ liệu SVG nhỏ dưới dạng mã inline và tạo ra một sampler 13KB
      liên kết ví dụ
    • Giờ tôi mới hiểu vì sao cú pháp này được dùng trong template SQL và GraphQL
      Ví dụ: 
      sql`SELECT * FROM users WHERE id = ${userId}`
gql`query GetUser { user(id: ${userId}) { name email } }`
  • Tôi thích Dwitter, nhưng mong họ chặn việc dùng eval
    Thay vào đó nên thêm nhiều phím tắt hơn. Ví dụ s có nghĩa là Math.sign, nhưng lẽ ra có thể mở rộng thêm
    • Những nền tảng như vậy phải tồn tại trước thì mới có cách để “phá” luật
      Nếu đổi sau này thì mục tiêu cố định sẽ biến mất và sức hấp dẫn cũng giảm đi
      beta.dwitter.net cải thiện khả năng tiếp cận của các kiểu mã hóa mà vẫn giữ được mục tiêu cố định
      Những ngoại lệ như Math.sin hay bộ mã hóa màu CSS được thêm vào vì lý do thực dụng
      Trong Dwitter 2 cũng từng có thảo luận về việc đưa vào nhiều ký tự định nghĩa sẵn hơn để người dùng có thể tự mở rộng
      Cuối cùng điều quan trọng vẫn là sự sáng tạo. Dù có bẻ cong luật thì bản thân điều đó cũng là một hành vi sáng tạo
    • Nếu đổi cách tính điểm sang đơn vị byte UTF-8 thì có thể giải quyết tận gốc vấn đề eval
      Vẫn có thể nén dữ liệu bằng literal chuỗi, nhưng mức độ nén của toàn bộ code sẽ giảm đi
    • Tôi đã dùng dwitter.net rất lâu rồi và hài lòng với việc cho phép eval. Luật là luật (hoặc là không có luật)
  • Ví dụ liên quan: