Fatih Turan

FontPrep uygulaması ile herhangi bir çevirim içi web font üretecine ihtiyaç duymadan fontları .eot, .woff, .ttf ve .otf dosya biçimine çevirebiliyorsunuz. Uygulamanın fiyatı 5$ gibi küçük bir rakam olmasına rağmen bu uygulama gerçekten çok iyi bir iş çıkarıyor. Bütün web geliştiricilere tavsiye ederim.

XtraFinder uygulaması ile OS X’deki Finder’a sekme özelliğini eklemenin yanı sıra, yine Finder’daki ek özellikleri de aktifleştirebiliyorsunuz. Hem de ücretsiz… Her OS X kullanıcısının elinin altında olmalı. Mutlaka deneyin.

Photoshop’ta köşeleri oval olan kare ya da diktörtgen şeklindeki vektör objelerin ovalliklerini tekrar değiştirmek istediğimizde o objeyi tekrar çizmek zorunda olduğumuzu biliyorsunuzdur.

Artık David Jensen’in Photoshop için yazdığı Rounded Rectangle Radius Resizer adlı betik sayesinde kare ya da dikdörtgen şeklindeki vektör objelerin ovalliklerini dinamik olarak değiştirebiliyoruz.

Kurulum oldukça basit:

1. Betiği Photoshop Scripts adlı siteden indirin.
2. .jsx uzantılı dosyayı Photoshop’un kurulduğu klasör altındaki Presets/Scripts klasörüne taşıyın.

Kurulum sonrası betiği çalıştırabilmek için Layers paletinden vektör objenizin bulunduğu katmanı seçin ve ardından Photoshop’un menüsünden Files → Scripts → Rounded Rectangle Radius Resizer adlı menü komutuna tıklamanız yeterli. Betiği çalıştırdıktan sonra aşağıdaki gibi bir pencere ile karşılaşacaksınız:

Bu pencerede her bir köşe için ayrı ovallik derecesini girebilir ya da ortada yer alan kutuya her bir köşe için tek bir değer verebilirsiniz.

İpucu: Bu betiği çalıştırmak için her defasında aynı menü komutunu uygulamak yerine Actions paletinden yeni bir makro (action) kaydedip klavyenizdeki herhangi bir kısa yol tuş kombinasyonunu bu makroya atayabilirsiniz.

Düzenleme: Kullanıma dair küçük bir ekran kaydı videosu hazırladım. Belki bu betiğin size nasıl kullanıldığına dair daha iyi bir fikir verebilir.

Sitelerin görünümünü CSS kullanarak manipüle etmeye yarayan Stylebot Chrome eklentisi ile bir süredir sık sık kullandığım ve takip ettiğim web siteleri için bazı stil dosyaları hazırlamıştım. Bunları Stylebot eklentisinin yan sitesi olan Stylebot Social‘da paylaştım. Belki başkalarının işine yarar ya da hoşuna gider düşüncesiyle blogumda da bunları paylaşmak istedim.

• Hacker News — Realign: Hacker News’deki haber başlıklarının font büyüklüğünü, font türünü, yazı renklerini değiştirmenin yanı sıra küçük birkaç makyaj içermekte. Hacker News’de haberleri okumayı daha da kolaylaştırmak adına bu stili geliştirmiştim.
• Twitter — Change Sidebar Position: Kenar çubuğu (sidebar) ile ana kolonun yerini değiştiriyor. Tıpkı eski Twitter’daki gibi.
• Dribbble — Large Bucket Popup: Özellikle yüksek çözünürlüklü kullanıcıların Dribbble kullanırken işine yarayacağını düşündüğüm bu stil ile Bucket açılır penceresinin yüksekliği arttırılıyor. Böylece daha fazla öge görüntülenebiliyor.
• Quora — Highlight Rows: Quora’daki soru ve cevapların yer aldığı satırların üzerlerine gelindiğinde arkaplanı farklı bir renk ile değişir. Sitedeki konuları daha rahat takip edilebilmesini sağlar.

Bu stilleri Firefox’da Stylish eklentisini kurarak ya da herhangi bir sitede Shift + F7’ye basarak elle ekleyerek kullanılmasını sağlayabilirsiniz.

Uzunca bir süredir bir çok web sitesinde görmeye alışık olduğumuz yapışkan elementleri Javascript ile geliştirmek yerine artık CSS ile kolayca geliştirebileceğiz.

Başta Google Chrome ve Safari’de tarayıcı motoru olarak kullanılan Webkit‘e entegre edilen position:sticky tanımlamasıyla (şimdilik -webkit ön eki ile) sayfadaki istediğiniz elementi istediğiniz konumda yapışık hale getirebiliyorsunuz.

Çalışır haldeki örneği görmek için Google Chrome’ın en uç sürümü olan Canary‘yi indirip şu adresten canlı olarak inceleyebilir veya şu video üzerinden gösterimi izleyebilirsiniz.

Daha önce LESS ya da SASS‘da gördüğümüz CSS değişkenleri özelliği WebKit’in Nightly sürümüne entegre edilmiş. Bu da demek oluyor ki ileride CSS değişkenlerini klasik CSS yazarken de kullanabileceğiz.

CSS değişkenleri için W3C sayfasında detaylı bir açıklamanın yanısıra aşağıdaki gibi bir kullanım örneği de yer almakta:

:root { var-main-color: blue; } 

h1 { color: $main-color; }