Timegrove vẽ dòng thời gian theo ba kiểu. Đường thẳng là một vạch dọc với các thẻ treo hai bên; nó miễn phí, nó là mặc định, và nó không phải kiểu hạng hai — nó là kiểu duy nhất còn đọc được ở bề ngang 390 điểm khi hàng nào cũng có ảnh. Xương sống tách ra hai làn. Dây leo là một thân cây vừa trèo vừa lượn, và nó là kiểu người ta chụp màn hình đem đi khoe.
Nó cũng là kiểu phải làm tới lần thứ ba mới xong.
Một thân, không phải bốn mươi khúc
Luật đặt ra trước khi viết dòng mã nào: Dây leo là một đường duy nhất. Một đường cong sinh ra một lần, từ gốc lên tới ngọn. Không phải mỗi sự kiện một khúc, không phải một hoạ tiết lặp lại, không phải viền của một cái khung. Nếu bạn thấy mình đang nối chuỗi path theo từng hàng thì có gì đó đã hỏng rồi — các mối nối sẽ lộ, và lộ rõ nhất đúng ở chỗ đường cong đẹp nhất.
Thứ làm cho “một đường” khả thi là một ràng buộc về cách đường cong đi qua mỗi nút. Mỗi đoạn là một bezier bậc ba có hai điểm điều khiển nằm thẳng ngay trên và ngay dưới hai đầu mút. Như thế tiếp tuyến tại mọi nút đều thẳng đứng, hai đoạn liên tiếp gặp nhau cùng hướng, và mối nối biến mất. Làm sai chỗ này thì bạn có một chuỗi cung tròn gãy khúc ở mỗi sự kiện, nhìn ra ngay là một chồng đường cong rời — vì đúng là thế thật.
Những cái vịnh
Một cái thân chỉ ngoằn ngoèo cho vui thì là trang trí. Thân này lượn vì nó phải dẹp chỗ.
Timegrove có mười ba loại kỷ niệm, và chúng không cùng cỡ. Ghi chú hay Tâm trạng là một dòng chữ. Ảnh, Video, Album hay Bản quét là một khối hình đòi bề ngang. Nên cái thân chia chúng theo sức nặng:
- Hàng nặng — ảnh, video, album, bản quét — đẩy thân lượn hẳn sang một bên, để thẻ mở ra thành cái vịnh của riêng nó ở bên kia. Ảnh và video lấy phía phải khi thân nép sang trái; album và bản quét lấy phía trái khi thân đảo sang phải.
- Hàng nhẹ — tâm trạng, chỉ số, câu nói, cột mốc — không có thẻ. Chúng bám lấy thân: một chiếc lá, một bông hoa, một chùm quả mọng, vẽ trên đường cong và xoay theo đúng tiếp tuyến tại điểm đó.
Các con số được vẽ trên một khung ngang 354 điểm rồi co giãn theo màn hình: cú lượn xa 69, cú nghiêng nhẹ 24, và thẻ trong vịnh thò ngược qua đường tâm 28 điểm để nó đè lên thân chứ không ngồi lịch sự bên cạnh. Các giá trị theo chiều dọc thì không bao giờ co giãn — chúng là điểm thật, vì chiều cao một hàng do nội dung quyết định, kéo dãn nó ra là nói dối về lượng thứ nằm trong đó.
Bài toán hai hàng cùng cỡ
Đây là con bọ chỉ chui ra khi gặp dữ liệu thật.
Nhịp của cái thân đến từ chuyện xen kẽ: nghiêng nhẹ, rồi lượn xa, rồi đảo hẳn sang bên kia. Cách đó đẹp chừng nào các hàng liên tiếp còn xen kẽ nhẹ — nặng, mà đó lại đúng là điều một bản thiết kế mẫu vẽ tay luôn có, vì người thiết kế bày một cái cây mẫu thì tự khắc xen kẽ cho cân mắt.
Khu vườn thật thì không thế. Ai đó tải lên bốn tấm ảnh của cùng một buổi chiều. Thế là có hai hàng nặng đứng liền nhau, cùng đòi một cú lượn xa, cùng rơi vào một toạ độ x — mà thân nối hai điểm cùng x thì là một đoạn thẳng. Đường cong đặc trưng duỗi thẳng đúng vào lúc dòng thời gian bắt đầu có gì đáng xem.
Nên một cặp hàng cùng sức nặng phải được tách bằng tay: hàng ngoài lấy 90, hàng trong lấy 48. Còn một cặp hàng nhẹ thì chỉ tách ra ngoài được, không tách vào trong được, vì chiếc lá của một nút nhẹ vươn ngược qua thân chừng 48 điểm về phía nhãn của chính nó — kéo nút lại gần tâm là lá nằm đè lên chữ.
Vuốt nhọn, đổi màu, và hai thứ không làm theo cách hiển nhiên được
Vuốt nhọn
Thân vuốt từ 11 pixel ở gốc xuống còn 3 ở ngọn. Một path SVG đơn không làm được: stroke-width là một con số cho cả đường. Bản web chồng một path dày đã cắt nửa dưới lên một path mảnh; trong app thì nó được vẽ như một hình đặc. Kiểu nào cũng vậy, vuốt nhọn là thứ bạn phải dựng, không phải thuộc tính bạn đặt.
Màu của giai đoạn
Giai đoạn là thứ thứ hai. Một giai đoạn trong Timegrove là quãng bạn ở trong đó — một công việc, một lần mang thai, một năm ở nước ngoài — và cả sản phẩm treo vào chuyện vẽ nó song song với dòng thời gian chứ không phải một dải cắt ngang. Dải cắt ngang nói “chỗ này bạn bước qua một cái ranh”. Dải chạy dọc bên cạnh nói “tất cả quãng này là như thế”. Trên Dây leo thì chính cái thân đổi màu suốt quãng ấy, bằng một gradient có điểm dừng cứng tại mỗi mốc, tính theo tỉ lệ chiều dài đường. Mà làm được thế chỉ vì nó là một đường duy nhất với chiều dài biết trước — cái ràng buộc ở đầu bài tự trả công cho nó.
Dưới 760 điểm thì nó thôi làm dây leo
Không thứ gì ở trên sống nổi trên một chiếc điện thoại cầm một tay, và vờ như nó sống được chính là cách một kiểu hiển thị đặc trưng biến thành một kiểu không dùng được. Dưới 760 điểm bề ngang cột, Dây leo sập về Đường thẳng. Không phải một cái dây leo hẹp hơn, không phải chia 60/40 — về thẳng Đường thẳng.
Phương án hấp dẫn là giữ ý tưởng hai làn và cho thẻ 60% bề ngang. Ở 390 điểm thì ra những cái thẻ rộng 129 điểm, đủ chỗ cho một cái ngày tháng và chừng bốn chữ chú thích. Một bố cục dựng ra được về mặt kỹ thuật không giống một bố cục dùng được, và ở bề ngang đó thì nước đi tử tế là thừa nhận rằng đường cong vốn là một thứ xa xỉ của việc có chỗ rộng.
Cũng phép tính ấy quyết định trình xem trên web có hiện cột hướng dẫn hay không, và nó kèm một cái bẫy riêng. Cột hướng dẫn rộng 240 điểm, và chuyện hiện hay không phải tính từ cái vỏ ngoài — cái khung mà không thứ gì bên trong đổi được bề ngang của nó. Tính từ cột dòng thời gian thì bạn có một vòng lặp có nhịp tim: giấu cột hướng dẫn đi thì cột kia rộng ra, rộng ra thì cột hướng dẫn hiện lại, hiện lại thì cột kia hẹp đi, cứ thế mãi.
Hai lần làm sai
Bản đầu vẽ dây leo vào một hệ toạ độ cố định 0–1000 rồi kéo cả SVG cho vừa cột. Co giãn không đều làm cái thân dày theo chiều ngang hơn hẳn chiều dọc, và mọi chiếc lá méo thấy rõ. Hãy tính bằng pixel thật trên dải đã đo, và đừng bao giờ đặt preserveAspectRatio="none" lên một cái dây leo.
Lần thứ hai tệ hơn, vì nó không giống lỗi vẽ chút nào: màn hình trắng bóc. Quyết định bố cục bằng cách đo một hàng, trong khi chính bố cục là thứ quyết định kích thước hàng đó, thì thành vòng lặp — đo, đổi cỡ, đo, đổi cỡ, chạy theo từng khung hình, mãi mãi. Hình học phải lấy từ cái khung chứa. Đo cái vỏ ngoài, suy ra mọi thứ còn lại bằng số học, rồi mới đặt thẻ vào.
Cái giá của nó
Dây leo và Xương sống thuộc Premium; Đường thẳng miễn phí và có trên mọi cây. Bảng chia đầy đủ nằm ở trang giá. Chúng tôi thấy thoải mái khi thu tiền cho kiểu này, vì nó thật sự là kiểu tốn công dựng và tốn công giữ cho đúng nhất, và vì không có mẩu dữ liệu nào của bạn bị nhốt sau nó — Đường thẳng hiện đúng mọi kỷ niệm mà Dây leo hiện, còn các bản xuất mang được cả khu vườn thì miễn phí ở cả hai gói.
Bạn có thể nghịch cả ba kiểu trên dữ liệu thật mà không cần cài gì: mở bất kỳ cây nào trong các khu vườn mẫu rồi đổi kiểu ngay trong trình xem. Ba mươi hai khu vườn mẫu đang được đặt 21 cây Đường thẳng, 6 cây Xương sống và 5 cây Dây leo — cũng gần đúng tỉ lệ ngoài đời: Dây leo cho cái cây đem khoe, Đường thẳng cho những cây bạn thật sự chăm.