Hatalarımla, hoşgeldim. (Bir kısmını düzelttim.)
Düzgün okuma deneyimi için ufak düzenlemelerle, merhaba!
deney.im alan adını eski iş ortağımdan devralalı epey oluyor. Fakat anca en sık yaptığım işi bir iş modeline döküp bu sitede halka açmayı akıl edebildim.
Sıradan bir hoşgeldim yazısı yazmaktansa da, sitede karşılaştığım 3 teknik sıkıntıya nasıl çözüm ürettiğimi yazmak istedim; Kurumsal olmaya çalışırken saçmalamak yerine, bir faydam olsun diye.
HTML’de Elle Tireleme
Medium’da yazdığım şu hamburger menü yazısını deney.im’e aktarırken yaşayacağım en büyük sorun, son altbaşlığımdaki kelimenin sığmaması olacaktı. Yazıları Markdown kullanarak yazacağım için, metni hızlıca bir metin dosyasına geçirip gerekli kodları ekledim. Markdown’da başlıkları (H1) cümlenin başına “#”, alt başlıkları (H2) da “##” koyarak atıyorsunuz. Yani yazıdaki son alt başlığımı şu şekilde attım:
Büyük boyutlarda sorun değil ama, responsive yapı gereği küçültünce pencereyi n’oldu? Abuk kelime-olmayan-kelimem, sayfanın yapısını bozdu.
Bunun için ilk çözümüm, inanılmaz ilkeldi: Alt alta iki tane alt-başlık koy, CSS’le de arka arkaya gelen iki H2 etiketinde margin’i sıfırla. Bu, hem kelimeyi olması gerekenden kötü bir şekilde bölüyor, hem de her zaman bölünmesine sebep oluyordu.
Çare <wbr>­
Metni sadece gerektiğinde ikiye bölmenin bir yolu olmalıydı.
<wbr>
<wbr> etiketi, bir kelimeyi alanına sığmadığı noktadan bölmeye yarıyor. Fakat maalesef, tirelemeyi sağlamıyor. Elle tire koyarsak da, kelime bölünmese dahi gözükecek o çizgi.
­
­ ise soft-hyphen olarak geçiyor; normalde görünmeyen tireyi, kelime bölündüğü takdirde koyuyor.
Böylece, hamburgersizleştiremedik<wbr>­lerimizden yazdığım zaman, istediğim noktadan istediğim şekilde kırılan bir kelime elde ediyorum.
Sonuç:
Medium’dan daha fazla kontrol elde edebildik bile. Orada hiç kontrol sağlayamıyoruz kelimenin nereden kesileceğine dair, ve sonuçlar da çok hoş olmuyor.
₺ işaretini nasıl bozdum? (Ve düzelttim?)
Bu aslında benim hatam…
Fakat, insan salaklıklarını da itiraf edebilmeli umumi ortamlarda. Anlatayım.
deney.im’de kullandığım yazıtipi, Oxygen. Google Fonts’tan çektim, sonra da hızlıca tüm gövde için tanımlayıp ilerledim.
Mac’te ve iOS’te sorunsuzca çalışan bu kod, Windows’ta ₺ simgesi için şöyle bir sıkıntı doğurdu:
Denediğim veya düşündüğüm saçma sapan çözümler içerisinde;
- Tüm ₺ simgelerini <span>’lere sarıp sarmalayıp, başka yazıtipi vermek
- Tüm ₺ simgelerini SVG versiyonlarıyla değiştirmek
- Tüm ₺ simgelerini Javascript’le bulup düzenlemek
…gibi salakça yöntemler vardı.
Çare “sans-serif” imiş
Halbuki, standartları olması gerektiği gibi izleyip başından beri olması gereken şekilde ekleseymişim yazı tipini, yani seçtiğim yazıtipinin sonrasında sans-serif ekleseymişim, ₺ simgesi olması gerektiği gibi gözüküyor olacakmış.
Bonus Sorun: Tweet’leri Ortalama
Twitter’dan Medium’a tweet eklemek kolay; adresi kopyalayın/yapıştırın, otomatik olarak eklensin. Kendi blogunuza eklemek için ise, Twitter’dan paylaşım için HTML kodunu alıp, yazınıza eklemeniz lazım.
Bu kod, blockquote -yani alıntı- olarak geçiyor, altındaki Javascript ise Twitter’ımsı bir şekillendirmeye sokuyor. Mac’te Espresso ile kod yazdığım için, Xray’de üzerine tıklayıp Javascript kodunun soktuğu türe baktım, sonra Bootstrap’in ortalama kodunu vererek sayfada hizaladım:
Espresso, Webkit tabanlı bir yazılım. Kendi içerisindeki tarayıcı, Safari’yle aynı özelliklerde, uzun süredir güncellenmediği için birkaç nesil gerisinde olsa da. O yüzden gerek iPhone’dan, gerek iPad’den yaptığım denemelerde, hep düzgün gördüm.
Ta ki, Chrome’da bakana kadar…
Tarayıcısına göre muamele
Sanırım Twitter’ın Javascript’i, tarayıcıdan tarayıcıya farklılık gösteren değişiklikler yapıyor blockquote’una. Safarigillerde iframe’lerken tweet’i, Chrome’da <twitterwidget> diye bir etiket içine almış. Bu yüzden, yaptığım iframe ortalaması, Chrome’da çalışmamış. Çözümü neyse ki kolay oldu:
Blog yapmak kolay değil.
Özellikle Medium’un sunduklarından sonra, insanların kişisel bloglardan uzaklaşmasını anlayabiliyorum. Kurumsal firmalar bile Medium’a taşıyor yazılarını. Fakat self-hosted akımının koyu bir takipçisi ve ince detaylarla uğraşmayı seven biri olarak, kendime ait bir noktada kendime ait bir alan olması hoşuma gidiyor.
deney.im’in en kolay kısmının blog olduğunu da burada vurgulamam gerekiyor. Sitenin tamamı dinamik, fakat bununla ilgili daha sonra yazacağım.
Yine de hoşgeldim.
Kurumsal olmamamın da verdiği rahatlıkla, giriş yazısı olarak bu yazıyı yazabildim.
Hayalim, büyüyüp Pinboard olabilmek.
Aslen deney.im’de yazıldı, aynı gün burada da yayınlandı.
