Neyden vazgeçiyorsunuz

Sandığınızdan azından. Bir details öğesi açılıp kapanır, bir form gönderilir, bir link Speculation Rules ile sonraki sayfayı önceden yükler. Tarayıcı, son baktığımızdan beri çok şey öğrendi.

• Menüler ve akordeonlar: <details> ve <summary>
• Koyu tema: prefers-color-scheme
• Anında geçiş: üzerine gelince önceden yükleme

Ne kazanıyorsunuz

İlk istekte çizilen, ekran okuyucunun anladığı ve on yıl sonra da çalışan sayfalar. Bir sayfanın gerçekten script'e ihtiyacı varsa bunu yüksek sesle söylemeli.

En hızlı script, hiç göndermediğiniz script'tir.

Sıfırdan başlayın ve sayfanın istediğini ekleyin. Her şeyle başlayıp eksiltmeye çalışmaktan daha iyi bir varsayılan.

Her collection'a bir şema

Alanları bir kez, collection'ın yanında tanımlayın ve build her dosyayı bu şemadan geçirsin.

const posts = z.object({
  title: z.string(),
  date: z.coerce.date(),
  tags: z.array(z.string()).default([]),
});

Aynı şema editöre formunu, layout'lara tiplerini verir. Olmayan bir alan sayfada boşluk değil, şablonda tip hatası olur.

Bir yeri gösteren hatalar

Hata mesajı da bir arayüzdür. "Geçersiz girdi" kimseye yardım etmez; content/posts/hello.md:3: date: Invalid date sizi doğrudan satıra götürür.

Dosyaları değil okumaları izleyin

Her layout bir şey okur: bir başlık, bir tarih, yazıların listesi. Build bu okumaları kaydederse, her kayıttan sonra kesin bir soruyu yanıtlayabilir: değişen şeyi hangi sayfalar okudu?

1. Her sayfayı dokunduğu anahtarları not eden bir proxy ile render edin.
2. Bu anahtarların arkasındaki değerlerin parmak izini alın.
3. Sonraki kayıtta parmak izlerini karşılaştırıp yalnız okumaları değişen sayfaları render edin.

Sıkıcı kısım

Proxy yirmi satır. Zor olan, artımlı çıktının tam build'le byte byte aynı olduğundan emin olmak; bu yüzden her test ikisini de çalıştırıp karşılaştırır.

Dosyaların kendisini düzenleyin

Panel yalnız sizin makinenizde, dev sunucusunun yanında çalışır. Collection şemalarını okur, her alan için bir form çizer ve aynı Markdown dosyasına kaydeder.

Diff'i küçük tutun

Bir dosya editörünün sınavı geride bıraktığı diff'tir. Bir başlığı değiştirdiğinizde commit tek satır göstermeli; yorumlarınız, tırnaklarınız ve anahtar sıranız olduğu gibi kalmalı.

• Değişmeyen bloklar byte byte korunur
• Yeni anahtarlar şemanın koyduğu yere girer
• Bir çakışma, kaybolan iş olarak değil çakışma olarak görünür

Panel işini bitirdiğinde ortadan kalkar: yayınlanan siteye ondan hiçbir şey ulaşmaz.

Desen yaratan kısıtlar

Dokuma yalnız belirli açılara izin verir; bu yüzden her yerde baklavalar ve basamaklar görürüz. Kısıtın kendisi üsluptur. CSS grid bize tersini verir: her şey mümkündür, dolayısıyla hiçbir şey kararlaştırılmamıştır.

Önce sıraları seçin

• Bir sütun sayısı ve bir boşluk seçin, onlara sadık kalın
• Yeni genişlikler icat etmek yerine içeriği sütunlara yayın
• Yeni bir motif eklemek yerine bir motifi tekrarlayın

Üç genişliği tekrarlayan bir sayfa, on bir genişlik kullanan bir sayfadan daha sakin okunur. Dokumacı bunu, tasarım sistemleri için bir kelimemiz olmadan yüzyıllar önce biliyordu.

Desen, defalarca tutulan bir sözdür.

Zaten orada olan yazı tiplerini kullanın

Her sistem iyi bir serifle gelir. Bunun gibi bir yığın indirme gerektirmez ve her yerde bilinçli görünür:

font-family: Charter, "Bitstream Charter", "Iowan Old Style",
  "Sitka Text", Cambria, Georgia, serif;

Önce satır uzunluğu, sonra boyut

60 ile 75 karakterlik bir satır, tipografinin en eski kuralıdır ve bir nedeni var. Önce sütun genişliğini, sonra onu dolduran boyutu, sonra 1.6 civarı bir satır yüksekliğini seçin.

Serif, 120 karakterlik satırı olan bir sayfayı kurtarmaz. İyi bir satır uzunluğu ise neredeyse her yazı tipini kurtarır.

Dardan başlayın

375 pikselde her satıra tek bir fikir sığar. Orada ayakta kalan her şey geniş ekranda zarifçe yeniden dizilir; tersi nadiren doğrudur.

Her zamanki şüpheliler

• Sarmayı reddeden uzun bir URL ya da kod satırı
• Ekrandan geniş bir tablo
• Birinin aceleyle yazdığı sabit bir genişlik

Her biri bir sayfayı bozuk hissettiren yatay kaydırmayı yaratır. overflow-wrap: anywhere ve kendi kutusunda kayan bir tablo çoğunu düzeltir.

Her seferinde kontrol edin

Geçen ay çalışan bir düzen tek bir yeni yazıyla bozulabilir. Dar ekran kontrolünü yayın günü hatırladığınız bir şey değil, build'in bir parçası yapın.

Gürültü bir maliyettir

Her ilerleme çubuğu, emoji ve afiş bir bakış ister. Bunu günde yüz çalıştırmayla çarpın; araç hiç susmayan bir iş arkadaşına dönüşür.

Sessizlik için bir liste

• Başarıda sessiz, hatada net
• Sorun başına bir satır, nereye bakılacağıyla
• Renkler yalnız bir anlam taşıdığında
• Makineler için bir --json bayrağı

Sessiz, gizli demek değildir. Sessiz bir araç sorduğunuz anda kendini uzun uzun anlatabilir; yalnızca her seferinde dinlemek istediğinizi varsaymaz.

1. Richard Sennett'ten Zanaatkâr, ellerde yaşayan beceri üzerine.
2. Ellen Lupton'dan Thinking with Type, var olan en samimi tipografi kitabı.
3. Christopher Alexander'dan A Pattern Language, her yazılımcının eninde sonunda bulduğu kitap.
4. Don Norman'dan Gündelik Şeylerin Tasarımı, çekmeniz gerekirken ittiğiniz kapılar için.
5. Matthew Crawford'dan Shop Class as Soulcraft, bir şeyi tamir etmenin onuru üzerine.

Nasıl okuyorum

Yavaşça, elimde kalemle, akşam başına bir bölüm. Hiçbiri yazılım hakkında değil, hepsi yazılım hakkında.

Ne değişti

İlk saat günün en verimli saati oldu; buna benden başka kimse şaşırmadı. Daha ilginci ikinci saatti: mesajlar hâlâ oradaydı ve hiçbiri beklediği için daha kötü hale gelmemişti.

Ne değişmedi

Bazı günler o saat pencereden dışarı bakmaya gitti. O da sayılır. Amaç sabaha daha çok iş sıkıştırmak değil, güne kendi seçtiğim bir şeyle başlamaktı.

Telefonuma hâlâ fazla bakıyorum. Ama ikinci sırada bakıyorum.