Những điều chỉ lập trình viên web thập niên 90 mới nhớ (2014)

 (zachholman.com)
1 điểm bởi GN⁺ 2024-01-26 | 1 bình luận | Chia sẻ qua WhatsApp
  • Web cá nhân thập niên 1990 là thời kỳ thiếu các công cụ layout được chuẩn hóa, nên người ta phải gượng ép tạo bố cục và hiệu ứng bằng các kỹ thuật như , , 1x1.gif,  , DHTML
  • Trước khi CSS layout trở nên phổ biến, 1x1.gif và các chuỗi   lặp lại được dùng như công cụ bố cục cốt lõi để đẩy vị trí phần tử; bài viết châm biếm điều đó bằng một nỗi hoài niệm được phóng đại
  • CSS thời kỳ đầu tập trung vào các hiệu ứng thị giác nhỏ như bỏ gạch chân liên kết và đổi kiểu a:hover, khiến ranh giới giữa liên kết và văn bản thường trở nên mơ hồ
  • DHTML gắn liền với văn hóa sao chép-dán: trộn CSS và JavaScript để tạo các hiệu ứng như alert() khi tải trang, bông tuyết, menu accordion, hay tùy biến bằng
  • Pixel font, nút 88x31, Internet Explorer 4.0, GeoCities, FrontPage ’98 xuất hiện như những cách mà website cá nhân thời đó phô trương lựa chọn công nghệ và bản sắc của mình

Thời và là hoạt hình

  • Tổ hợp đặt bên trong từng được nói đùa như một dạng hoạt hình máy tính ghê gớm trên web thập niên 1990
  • Ẩn bên dưới là một kiểu tự hào phóng đại, rằng lập trình viên web thập niên 1990 có những câu chuyện quan trọng hơn cả jQuery hay cơ sở dữ liệu phi quan hệ ngày nay

Layout đẩy trang bằng 1x1.gif

  • 1x1.gif, spacer.gif, transparent.gif đều chỉ GIF trong suốt 1 pixel × 1 pixel
  • Bằng cách đặt lớn thuộc tính WIDTH và HEIGHT của ảnh HTML, người ta có thể tạo ra khoảng trống vô hình và đẩy các phần tử trên trang đến vị trí mong muốn
  • Mã ví dụ dùng chung , , , , ``, và web counter CGI để xử lý cả cấu trúc lẫn trang trí cùng lúc
  • Bài viết tiếp tục châm biếm rằng 1x1.gif cho phép đặt phần tử ở bất cứ đâu trên trang, và cho đến tận hôm nay vẫn là cách duy nhất để căn giữa theo chiều dọc

Canh khoảng cách thủ công bằng  

  • Nếu khó dùng thẻ ảnh, cũng có cách lặp lại   để canh khoảng cách
  • Có ví dụ chèn nhiều   giữa PLEASE SIGN và MY GUESTBOOK BELOW: để đặt dòng chữ guestbook
  • Bài viết tiếp tục bằng câu đùa rằng nếu ở thập niên 1990, mỗi lần dùng   mà được nhận một đồng nickel, thì đã có đủ tiền trả phí vượt mức hằng tháng của AOL

CSS thời kỳ đầu bắt đầu bằng việc bỏ gạch chân liên kết

  • CSS được giới thiệu như công nghệ xuất hiện vào cuối thời kỳ hoàng kim của HTML, hứa hẹn tách nội dung khỏi kiểu trình bày
  • Việc đầu tiên người ta làm với CSS khi đó là bỏ gạch chân của liên kết
  • Liên kết trông như văn bản, còn văn bản lại trông như liên kết, khiến người dùng khó biết phải bấm vào đâu
  • Hiệu ứng để lại vệt lửa phía sau con trỏ chuột cũng được nhắc đến cùng lúc
  • Ví dụ file index.shtml năm 2000 chỉ có CSS inline a:hover {text-decoration: none; color: #000000}
    • Đây là đoạn mã bỏ gạch chân khi hover và đổi màu thành đen
    • Việc đây là file index.shtml dùng SSI cũng được nhấn mạnh như một trò đùa

DHTML và văn hóa sao chép mã

  • Sau khi dùng CSS để bỏ gạch chân liên kết, luồng tiếp theo là dùng JavaScript hiển thị alert("Welcome to my website!") khi tải trang
  • Sự kết hợp giữa CSS và JavaScript được châm biếm là “công nghệ kinh hoàng” mang tên DHTML
  • Các hiệu ứng DHTML bao gồm bông tuyết rơi trên trang, imagemap hoạt hình cho menu accordion, và tùy biến dùng
  • Nhờ các trang như Dynamic Drive, mọi thứ được mô tả như thể thay vì tự giải quyết vấn đề, chỉ cần sao chép và dán một khối mã 50 dòng là xong
  • DHTML được ví như Twitter Bootstrap của thời đó

Pixel font và mỹ học của độ phân giải thấp

  • Màn hình máy tính thời đó là CRT nên về mặt vật lý khá lớn, nhưng độ phân giải không cao
  • Có xu hướng dùng phông chữ nhỏ cỡ 6 point để tận dụng hiệu quả số pixel hạn chế
  • Khi thấy các kiểu chữ đơn giản dựa trên pixel, nhiều lập trình viên web muốn trở thành họa sĩ minh họa; cũng có những nỗ lực đưa minh họa pixel isometric vào splash screen
  • Bài viết còn đùa rằng có lẽ nên dùng thời gian và tiền bạc đó để đầu tư vào IPO dot-com thay vì cài Photoshop

Internet Explorer 4.0 và nút 88x31

  • Bài viết châm biếm rằng lý do ngày nay người ta ghét Internet Explorer là vì nó đã rời xa “hình thái thuần khiết” của Internet Explorer 4.0
  • Internet Explorer 4.0 được phóng đại như một trình duyệt hoàn hảo với Active Desktop và Channels
  • Trên các website thời đó thường gắn rất nhiều nút 88x31 pixel để cho khách truy cập biết nên dùng trình duyệt nào, cũng như site dùng công cụ và dịch vụ nào
  • Các nút này được ví như huân chương trên quân phục, thể hiện lựa chọn và phe nhóm của người vận hành site
    • Ví dụ trình biên tập là FrontPage ’98
    • Ví dụ máy chủ web là GeoCities
    • Có câu đùa rằng web ring muốn có nơi đẩy site lên cao nhất, nhưng thực tế lại không có nơi nào như vậy

Câu đùa về web ngày nay

  • Web ngày nay được mô tả là trạng thái có nhiều lớp trừu tượng chồng lên trên JavaScript
  • Kết lại bằng câu đùa rằng JavaScript thậm chí còn không tính toán đúng toán học, nên thật đáng ngạc nhiên là chúng ta đã đi đến được web ngày nay
  • Bài viết kết thúc bằng đề xuất gắn thật nhiều   vào pull request tiếp theo để trêu đội của bạn một cách tinh nghịch

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-01-26
Các ý kiến trên Hacker News

  • Chuyện về image map phía máy chủ nghe thật sự không hề xa lạ
    Tôi là quản trị hệ thống, thỉnh thoảng làm các công cụ dựa trên web hơn là một lập trình viên web, nên kỹ năng web của tôi dừng lại ở đầu những năm 2000, và tôi cũng có cảm giác bài xích kỳ lạ với JavaScript. Gần đây trong một công cụ, tôi cần thao tác cơ bản với các điểm trên ảnh; việc đáng ra chỉ cần 5 dòng JavaScript thì đến năm 2023 tôi lại xử lý bằng image map phía máy chủ
    Kết quả là thay vì 5 dòng JavaScript, tôi có 50 dòng Python để quản lý trạng thái và một trường hợp đặc biệt trong request handler để xử lý cú pháp fragment kỳ quặc. Hơi ngượng, nhưng việc làm cho nó chạy được vẫn khiến tôi thấy tự hào một cách lạ lùng

    • Điều tệ nhất của image map phía máy chủ là nó phá hỏng hoàn toàn việc lưu trữ
      Nếu tìm một trang cũ trên archive.org Wayback Machine mà toàn bộ trang chủ là image map phía máy chủ, thì không có máy chủ gốc sẽ không có cách nào biết URL đích của phần còn lại của trang, và bạn hoàn toàn đi vào ngõ cụt
    • Năm 2015 tôi từng sửa hỗ trợ image map phía máy chủ của Chromium
      Khi đó nó gần như hỏng: nếu mức phóng to/thu nhỏ không phải 100% hoặc padding không phải 0 thì tọa độ bị lệch, và còn nhiều vấn đề tương tự. Không ai nhận ra vì bản thân image map đã hiếm khi được dùng, còn image map phía máy chủ thì lại càng hiếm hơn
      Tôi cũng nhớ đến HTML thập niên 90 vì muốn thoát thân dễ dàng mà không cần JavaScript, nhưng cuối cùng sau khi sửa lỗi Chromium, tôi kết luận image map phía máy chủ không hay lắm, rồi dùng JavaScript, và phiên bản JavaScript tốt hơn
    • Tôi hoàn toàn đồng cảm với cảm giác “dù chỉ là đúng 5 dòng JavaScript trong cả thứ địa ngục này, tôi cũng không đưa vào chương trình của mình”
      HTMX thật sự như một sự cứu rỗi, và nếu mua Tailwind UI thì ai cũng có thể trở thành một người khá nguy hiểm ở frontend. Dù vậy tôi cũng tò mò về những góc nhìn khác về việc vì sao JavaScript gây cảm giác khó chịu. Cá nhân tôi thấy vấn đề lớn là cú pháp thiếu nhất quán, còn phía TypeScript thì chỉ nhìn thư mục node_modules thôi cũng thấy buồn nôn
      Cảm giác không thể kiểm soát được toàn cục chuyện gì đang diễn ra khiến tôi rời xa frontend trong một thời gian dài
    • Cuối năm 2019, tôi cần thao tác GUI của một thiết bị ở công ty từ nhà, nhưng không có remote desktop, chỉ có công cụ chụp màn hình và một công cụ dòng lệnh để chèn cú nhấp chuột
      Tôi viết vài chục dòng Lisp để dựng một web server cung cấp image map của màn hình, và khi có request image map thì chèn cú nhấp. Ban đầu chỉ là một công cụ dùng một lần nho nhỏ để khỏi phải đi làm qua lại, nhưng rồi COVID bùng phát, quá nhiều người bắt đầu dùng nó, và đến giờ tôi cũng không biết liệu vẫn còn ai đang dùng không

  • “Đây vẫn là cách duy nhất để căn giữa theo chiều dọc một phần tử” không còn đúng nữa, nhưng chi phí năng suất trong 30 năm qua vì không thể chỉ dùng vertical-align: middle; bên trong div chắc phải lên tới hàng chục tỷ đô la
    Tôi cũng nhớ trào lưu đặt kiểu overline cho :hover của liên kết vào thời IE4 hay IE6 gì đó. Người ta còn dùng bảng để tạo div và nút có góc bo tròn, và ngay cả trong thập niên 2000, nỗi khổ cắt ảnh trong Photoshop rồi nhét vào các ô bảng vẫn tiếp diễn

    • Ngay thời đó, trong ô bảng đã có VALIGN=MIDDLE
      Tôi không biết thập niên 90 có làm được không, nhưng trong thập niên 2000 thì chắc chắn là có
    • Dạo này tôi để ChatGPT viết kiểu CSS đó, và buồn cười là nó có vẻ đưa ra ít nhất cả tá cách giải
      Tuy nhiên nó cũng thường trộn vào các rule dư thừa, kiểu chỉ cần 2–3 rule là đủ mà lại gắn thêm 5 rule trở lên. Thật sự ngu ngốc đến mức buồn cười
    • Thời dùng bảng để làm góc bo tròn đúng là rất thịnh hành
      Không biết đã tốn bao nhiêu thời gian chỉ vì mấy cái góc chết tiệt đó
    • Đến giờ căn giữa theo chiều dọc vẫn là một vấn đề rất đau đầu, và cần hiểu khá nhiều chi tiết tinh vi
      Ngay cả trong Tailwind CSS cũng không đơn giản; cứ phải xét xem phần tử là block hay text, layout của phần tử cha là gì, v.v.
    • Một trong những mẹo CSS tôi thích là div { display: table-cell; vertical-align: middle; }
      Nó không dùng được trong mọi tình huống, nhưng dù ban đầu thấy bẩn, sự tách biệt mối quan tâm vẫn được giữ nguyên và tôi cũng không thấy nhược điểm nào khác đáng kể

  • DHTML trong ngữ cảnh này là Dynamic HTML chứ không phải Distributed HTML, và vì thế đó cũng là chữ Dynamic trong Dynamic Drive

    • “DHTML rõ ràng là distributed HTML” vốn là một câu đùa, nhưng có vẻ đã bị trích dẫn sai
      Thấy những người khác cũng trích dẫn sai y hệt, tôi cũng nghĩ có khả năng tác giả gần đây đã sửa lại một cách đùa cợt
    • Dù vậy, mô tả “Technology of Terror” vẫn hoàn toàn đúng, không cần phản bác
    • Tôi tự hỏi có phải họ muốn ám chỉ phần “chỉ cần sao chép và dán” ở bên dưới không, và cũng có thể đó là một cách chơi chữ với DCOM
    • Đã có thảo luận ở thread bên dưới: https://news.ycombinator.com/item?id=39127528
      Kết luận là tuy đó là một câu đùa, nhưng không phải câu đùa hay
    • Có vẻ ở đây đã thật sự tìm ra được phe cấm vui

  • Không thể không nhắc đến frame. Đó từng là “giải pháp” ban đầu cho vấn đề phải sửa thanh điều hướng trên mọi trang.
    Vấn đề là công cụ tìm kiếm có thể lập chỉ mục riêng từng trang trong frame, nên phải xử lý trường hợp ai đó vào thẳng một trang frame. Đường phân cách giữa các phần cũng lúc nào cũng rõ mồn một, trông gượng gạo và bất tiện.

    • Những cao thủ thật sự dùng server-side include.
      Chỉ cần đặt một chú thích đặc biệt trong HTML, Apache sẽ thay nó bằng nội dung của một tệp khác trước khi gửi cho client.
    • Nếu website khác nhúng trang của mình vào frame, ta phát hành script frame-buster; còn nếu trang bị mồ côi khi không có frame của mình, ta gọi đến script frame-joiner.
    • Frame đến nay vẫn được dùng khá ổn một cách bất ngờ như một công nghệ micro-frontend nền tảng.
      Lý thuyết có ở https://martinfowler.com/articles/micro-frontends.html#Run-t..., còn triển khai có thể xem tại https://luigi-project.io.
    • Một tỷ lệ lớn đến buồn cười trong các cách dùng JavaScript kiểu “AJAX” thực ra cũng có thể xử lý bằng frame, và nếu frame không bị chững lại mà phát triển thêm một chút, có lẽ hiệu năng còn tốt hơn.
      Nếu thêm vào đó HTML table có sẵn các tính năng cơ bản, và các bảng cùng list view dựa trên nguồn dữ liệu được cung cấp vào giữa thập niên 2000, hẳn đã tiết kiệm được một lượng thời gian và tiền bạc khổng lồ.
      Còn nếu bắt đầu nói đến chuyện web chấp nhận tiêu chuẩn thanh toán để chính trình duyệt xử lý việc nhập thông tin thanh toán thì không biết đã tiết kiệm được bao nhiêu tiền nữa.
    • Ranh giới giữa các phần cũng không giống hệt nhau trên từng trình duyệt.
      Các bạn à, từng có một thời không phải ai cũng dùng cùng một trình duyệt.

  • Năm 1996, trang chủ Microsoft có một thanh menu bung ra khi rê chuột lên, và tôi đã quyết tâm tìm hiểu xem nó hoạt động thế nào.
    Lúc đó IE có nút “View Source”, nhưng vì thiếu cảm giác nền tảng nên nó mở bằng Notepad; máy chủ thì chạy Unix nên xuống dòng là \n, còn Windows lại mong \r, thành ra mã nguồn HTML hiện ra như một tài liệu dài một dòng.
    Tôi soi kỹ mã nguồn nhưng các thẻ HTML đều là những thứ tôi đã biết, nội dung cũng chỉ là văn bản hiển thị trên trang. Thứ duy nhất lạ là HTML entity, và vì site nào có menu chuyển động cũng thấy chúng, tôi tin chắc chúng có liên quan.
    Suốt 6 tháng tôi tin rằng hiệu ứng DHTML hóa ra được thực hiện bằng những câu thần chú của HTML entity, rồi sau đó khi tìm được hướng dẫn trên WebMonkey, chuyện đó đã dẫn tới cả sự nghiệp của tôi.

    • View Source là điểm khởi đầu của tôi.
      Công cụ minify và compiler rất tuyệt, nhưng tôi thật sự nhớ thời được đọc mã nguồn gọn gàng, được quản lý tốt của những site thiết kế chỉn chu.
      Tôi vẫn nghĩ giá mà chúng ta đi theo một cách nén vẫn giữ được định dạng nguồn gốc ngay cả trong mã vận hành, và duy trì kỳ vọng rằng những người khác trên khắp thế giới sẽ đọc code của mình. Văn hóa đó cũng đóng vai trò lớn trong việc web thời kỳ đầu phát triển nhanh chóng, và chắc chắn là một phần lớn trong câu chuyện tôi bước vào ngành này.
    • Tôi tò mò không biết lúc đó thực sự thứ gì đã tạo ra menu chuyển động. Vì tôi không thuộc thế hệ lập trình thời ấy, nên có lẽ nguyên nhân là một thẻ hoặc script nào đó.
    • Tôi cũng có trải nghiệm tương tự khi muốn đổi hình ảnh lúc rê chuột lên.
      Tôi mua JavaScript Bible ở Barnes & Noble, đọc hết cuối tuần, rồi từ đó cứ tiếp tục học.
    • WebMonkey cơ à, ký ức ùa về thật.

  • Đừng quên rằng table cũng từng được dùng cho góc bo tròn.
    Người ta tạo một table 3×3 rồi đặt ảnh vào các ô ngoại trừ ô giữa để tạo phần tử website có góc bo tròn, và lúc đó cảm giác như đỉnh cao của khả năng biểu đạt của con người.
    Email HTML cũng đang thịnh hành, mà client email thì cập nhật chậm hơn trình duyệt rất nhiều, nên nếu muốn hiển thị đúng, kỹ thuật này vẫn còn được dùng đến tận thập niên 2010.

    • Tôi sẽ không bao giờ quên việc tạo các bộ ảnh kiểu tl.gif, tr.gif, bl.gif cho table 3×3.
      Trình duyệt thời đó không render ảnh nền của ô trống, nên để nền của các ô trái phải hiện ra thì cũng cần 1x1.gif như bài viết đã nói. Những ngày tươi đẹp.
    • Ngay khi có border-radius thì xu hướng thiết kế đổi hướng, và chẳng ai còn muốn góc bo tròn nữa.
    • Nhiều mục trong bài có vẻ gần với đầu thập niên 2000 hơn là thập niên 90.
      Trước khi làm góc bo tròn bằng table, tôi nhớ mình từng vọc ứng dụng chat đa nền Trillian như thể tùy biến skin. Nó xử lý Yahoo Chat, ICQ, v.v., và tôi đặt ảnh lặp ở các ô phía trên và hai bên giống như xử lý góc bo tròn để cửa sổ co giãn tốt.
    • https://www.folklore.org/Round_Rects_Are_Everywhere.html
      Thành tựu lớn nhất của Oz vĩ đại và toàn năng. Ừ thì, iPhone có thể còn lớn hơn.
    • Table cũng từng được dùng cho đổ bóng.

  • Nhắc đến website thập niên 90/00 thì không thể thiếu nút “tối ưu cho độ phân giải 800×600”.
    Nếu muốn trông ngầu hơn chút nữa thì gắn thêm “Valid HTML 4.01”.
    Quảng cáo hồi đó không phải những bó JavaScript phức tạp và quảng cáo video như bây giờ, mà chỉ là banner kích thước chuẩn đơn giản. Tôi nhớ mình đã sốc khi thấy Norton Internet Security 2003 âm thầm viết lại HTML của trang đã truy cập, chỉ loại bỏ các banner có kích thước quảng cáo chuẩn và để nguyên phần còn lại. Đó cũng là một xác nhận đã 20 năm tuổi rằng trình chặn quảng cáo là một giải pháp bảo mật.

  • Trong toàn bộ bài viết mà không có lấy một lần xuất hiện từ webmaster, làm tôi tự hỏi liệu Zach có thật sự sống ở thập niên 90 không.

    • Tôi vẫn còn giữ danh thiếp “Webmaster” làm vào cuối thập niên 90.
      Không ai có thể hiểu được hồi đó chức danh ấy “ngầu” đến mức nào. Bây giờ nhìn lại thì ngay cả tôi cũng thấy hơi sến, nhưng thật sự có rất nhiều kỷ niệm đẹp.
    • Tôi từng làm việc với một phụ nữ chính thức tự gọi mình là “webmistress”.
      Không phải đùa đâu.

  • Nếu muốn tự mình trải nghiệm web thập niên 90, tôi khuyên nên xem The Geocities Gallery https://geocities.restorativland.org/
    Những trang web cá nhân như thế này có một điều gì đó rất đẹp. Mỗi trang đều có diện mạo riêng rõ rệt, và chỉ riêng điều đó cũng thể hiện khá nhiều tính cách của người viết
    Thường thì chúng có phần tự giới thiệu, vài bức ảnh cá nhân ngẫu nhiên, danh sách liên kết được đề xuất kèm mô tả ngắn, những bài viết thoải mái về sở thích, nên rất cá nhân và điềm tĩnh. Điều này tương phản rõ với mạng xã hội ngày nay, nơi mọi trang hồ sơ đều trông nhạt nhẽo và nhàm chán như nhau, lại có áp lực phải duy trì một dòng nội dung kéo dài bất tận và một hình ảnh đời sống nhất định

    • Nhờ vậy mà tôi đã rơi vào hang thỏ
      Tôi đã mất khá nhiều thời gian để tìm trang web cũ của mình, không nhớ nó từng nằm trong thư mục nào bên dưới Area51 và có khi cũng chưa từng được lưu trữ, rồi đơn giản là để sống lại thời đó
      Ký ức thật kỳ lạ. Nhìn Geocities khiến tôi nhớ cả mùi của Internet xưa, có lẽ thực ra là mùi của phòng sinh hoạt gia đình nơi đặt chiếc máy tính
    • Tôi nhớ vào giữa thập niên 90 mình từng kết hợp nền gạch của Windows với graffiti GIF trong suốt để tạo ra một hiệu ứng khá ngầu
      Những tác phẩm thời kỳ đầu của các nhóm nghệ thuật BBS như ACID, ICE, FIRE khi ấy cũng thật sự rất ấn tượng
      Trước thời IE5/6 thống trị, những thứ cao cấp hơn phần lớn đã bị đẩy sang Flash. Đầu những năm 2000, đã có một framework giống React dựa trên E4X; ActionScript/Flash/Flex và Mozilla/Netscape hỗ trợ nó, và nó cũng tương tự cú pháp literal XML của VB.Net
      Microsoft và Google đã không áp dụng, và cuối cùng JSON trở thành vua

  • Vào thập niên 90, câu trả lời cho các câu hỏi về bố cục web hầu như luôn là bảng
    Căn chỉnh văn bản bị lệch? Bảng. Cần một menu đẹp? Bảng. Dựng cả trang web? Bảng lồng nhau. Khi có thể hack thiết kế bằng hàng và ô thì cần CSS làm gì

    • Đến năm 2024, điều này vẫn đúng với bố cục email
    • Và cũng đừng quên rằng khi đó phải nhét thẻ font vào từng ô
    • Hồi đó tất cả đều là TDD. Tức là TD-Driven Design
    • Tôi vẫn thích bảng
      Chúng thật sự tuyệt vời cho thiết kế động, hỗ trợ gộp cột/hàng, căn chỉnh và trọng số. CSS vẫn phức tạp hơn nhiều so với bảng ngày xưa
    • Giờ thì chúng ta đã có một cách đúng về mặt ngữ nghĩa hơn để làm việc đó