Website của tôi xấu vì chính tôi đã làm ra nó
(goodinternetmagazine.com)- Có lẽ ai đó đã có thể làm website của tôi trông đẹp hơn, nhưng như vậy thì nó đã không còn là của tôi nữa
- Cá tính của một website đến từ gu thẩm mỹ, sự ám ảnh và dấu tay trực tiếp của người tạo ra nó
- Theo đuổi sự đơn giản và cảm giác gần gũi, tôi giảm thiểu CSS và JS, đồng thời áp dụng các quy tắc biến thể CSS trực tiếp để tạo ra cảm giác hỗn độn, lặp lại và chất thơ như một hiệu sách cũ
- Website được thiết kế để phản hồi tương tác của người dùng chỉ bằng CSS, với đặc trưng là chất cảm mộc mạc và những thay đổi bất ngờ
- Website liên tục thay đổi, lớn lên và biến hình cùng chủ nhân của nó, khiến “cái xấu” của riêng mỗi người sống động theo cách riêng
Website do tôi làm, và ý nghĩa của cái xấu đó
- Nếu mẹ tôi muốn dán một bức tranh đẹp lên tủ lạnh, hẳn bà đã sao chép tranh của những họa sĩ nổi tiếng như Vermeer, Lichtenstein hay Wyeth để dán lên
- Nhưng điều mẹ tôi muốn không phải thứ nghệ thuật đó, mà là bức tranh do chính tôi vẽ
- Một nhà thiết kế có gu hoàn toàn có thể làm site của tôi đẹp hơn, nhưng làm vậy thì nó sẽ không còn là của tôi nữa
- Có người muốn tự trồng lúa mì, khai thác muối và nuôi cấy men để nướng bánh, nhưng tôi thì không
- Khẩu vị còn vụng về của tôi hài lòng với việc ăn thật nhiều breadstick của Olive Garden
- Những sở thích như thế bắt nguồn từ cảm giác sở hữu khác nhau ở mỗi người
- Vì những lý do của riêng mình, ai cũng đang tự trang hoàng không gian Internet của chính họ
Sự tồn tại của nhiều kiểu web cá nhân
- Có người vận hành website tự host bằng năng lượng mặt trời
- Có người khác chia sẻ trí tuệ thông qua Substack
- Có người đào sâu về hiện trường sản xuất trên YouTube
- Gwern thì đang làm một điều gì đó rất riêng
- Mọi hành động ấy đều bắt nguồn từ động lực nội tại và khao khát rằng “nếu không phải tôi thì sẽ không ai làm được”
- Tôi không có động lực để làm bánh, dựng server hay chế tạo chip, nhưng khao khát ấy lại bộc lộ qua hài hước, hệ thống, phần mềm và cấu trúc
- Khi cảm xúc trở nên quá mạnh, nó bùng ra thành tiểu thuyết, HTML/CSS, robot tồi tàn, những bài hát buồn
- Vì thế website của tôi là của tôi
Sự cùng tồn tại của đơn giản và cá tính
- Trước đây tôi chỉ muốn sự đơn giản và cảm giác thân thiện
- Loại bỏ nhiễu
- Nhấn mạnh tương phản sáng tối
- Giảm độ sâu của menu
- HTML nhàm chán
- Tối giản CSS
- Tránh JS v.v.
- Website của tôi năm 2023 là như thế này (xem hình trong bài gốc)
Thiết kế hỗn độn và câu chuyện CSS
- Đến một lúc tôi quyết định dùng không gian ngang rộng hơn, và vấn đề bắt đầu từ đó
- Kế hoạch ban đầu rất đơn giản: áp dụng
flex-wrapchoul - Nhưng vì văn bản cũng bị xuống dòng, ranh giới giữa các liên kết trở nên không còn rõ ràng
- Có người đọc nó như inline, cũng có người cảm nhận nó như inline-block
- Tôi cũng thử tăng thêm khoảng trắng, thêm viền quanh từng liên kết, hoặc chèn dấu chấm giữa các liên kết, nhưng đều không thấy ưng ý
-
Vì vậy tôi chọn cách thêm biến tấu cho các liên kết
-
Sự hỗn độn trên trang chủ thực ra đến từ một vài quy tắc đơn giản
li:nth-child(4n + 0) { transform: rotate(1deg); } li:nth-child(4n + 1) { transform: rotate(-0.6deg); } li:nth-child(4n + 2) { transform: rotate(0.5deg); } li:nth-child(4n + 3) { transform: rotate(-0.75deg); } li:nth-child(6n + 0) { font-family: Times; } li:nth-child(6n + 1) { font-family: Helvetica; } li:nth-child(6n + 2) { font-family: Georgia; } li:nth-child(6n + 3) { font-family: Times; } li:nth-child(6n + 4) { font-family: Arial; } li:nth-child(6n + 5) { font-family: "Trebuchet MS"; } -
Ban đầu tôi dùng các số nguyên nguyên tố cùng nhau (coprime integer) để tạo thêm nhiều biến đổi, nhưng rồi chính sự tinh tế của mẫu lặp lại lại khiến tôi thích hơn
- Tôi yêu chủ nghĩa tối giản, nhưng ghét cảm giác lạnh lẽo
- Để thể hiện chất cảm ấm áp như một “hiệu sách cũ”, tôi thêm vài yếu tố CSS gây bất ngờ
li:nth-child(5n + 2) { font-weight: 100; } li:nth-child(7n + 2) { letter-spacing: -1px; } li:nth-child(41n + 31) { transform: rotate(181deg); }
- Web vẫn là một phương tiện tương tác, nên tôi muốn nó phản ứng với chuyển động con trỏ ngay cả khi không dùng JS
- Nhờ CSS dưới đây, tôi tạo ra cảm giác như “chạm vào cỏ”
li:nth-child(2n + 0):hover { transform: rotate(-2deg); } li:nth-child(2n + 1):hover { transform: rotate(2deg); } - Nhờ đó website phản hồi theo thời gian thực với chuyển động con trỏ
- Và vì tôi muốn nhấn mạnh cảm giác cuộn mà không cần scrolljacking, tôi làm cho trang trông như “giấy” bằng nền có texture
- Dùng css-doodle để ghép texture
svg { viewBox: .5 .5 10 10; fill: #000; circle*1000 { cx, cy: @r(10), @r(10); r: @r(.005, .01); } } - Ở chế độ sáng là cảm giác bụi giấy, còn ở chế độ tối là cảm giác sao trên bầu trời đêm
- Website của tôi năm 2024 đã thay đổi thành như thế này (xem hình trong bài gốc)
Tôi thay đổi, website cũng thay đổi
- Chẳng bao lâu nữa website của tôi sẽ lại đổi sang một diện mạo hoàn toàn khác
- Bởi vì tôi là chủ nhân của website của mình, và bản thân tôi cũng luôn thay đổi
- Rồi bạn cũng sẽ thay đổi
- Đam mê và hệ giá trị của bạn sẽ lan sang một điều gì đó khác
- Dù có vẻ xấu xí, tác phẩm do bạn tạo ra vẫn sẽ tiếp tục sống và chuyển động
Taylor Troesh, tác giả bài viết, là thị trưởng của taylor.town, tác giả scrapscript, và là người thưởng thức những thứ tồi tàn
3 bình luận
Tôi vào xem thử rồi, đúng là khó hiểu thật...
https://taylor.town/
Tôi rất đồng cảm sâu sắc với nội dung bài viết. Tôi cũng đang cố gắng dùng những framework do các nhà thiết kế dày công tạo ra để che giấu gu thẩm mỹ thiết kế tệ hại của mình, nhưng dù vậy tôi vẫn cứ kiên trì làm đến tận bây giờ.
Mỗi lần đều suy nghĩ về một thiết kế tốt hơn, vừa sửa cái này cái kia vừa xây dựng và vận hành, nên cũng có cái thú riêng.
Có lẽ nhờ những hoạt động như vậy mà tôi càng thấy gắn bó và cũng cảm thấy vui hơn. haha
Ý kiến trên Hacker News
make), đang vận hành nhiều shell script để upload file tới các vị trí riêng tư, favicon cũng là pixel art tôi làm từ thời đại học (liên kết), từng thử tự làm font riêng nhưng bỏ cuộc rồi dùng một font lấy cảm hứng từ Naruto, và nếu dùng tính năng 'view-page-source' để xem mã nguồn thì lại có thêm một kiểu thú vị khác. Nhìn vào site của mình, tôi cảm thấy nó lưu lại dấu vết trưởng thành của tôi với tư cách một kỹ sư phần mềm, nên tôi rất trân quý tác phẩm giản dị này