Çalışma odamDaha önce yazdığım evden çalışma ile alakalı yazımdan sonra bazı deneyimlerim oldu. Yaklaşık 10 aydır evden çalışıyorum. Yemek masası ve sandalyesinde başlayan serüven şimdi kendi çalışma ortamıma dönüştü. Bu uzun süreli deneyimlerimi sizlerle paylaşmak istedim.

Sandalye

Ikea MARKUS sandalyem idare ediyor ancak tam olarak memnun değilim. Alt tablanın ve kolçakların hareketli olmaması beni sıkıntıya sokuyor. Bir iki kademe daha kalitelilere bakmaya başladım. Henüz karar verebilmiş değilim. 🟡 6/10

Mouse (Logitech MX Vertical Advance Ergonomic Mouse)

Hala tek geçeceğim fare. Ne zaman şarj ettiğinizi unutuyorsunuz. Geçen yazıda uygulamasını kuramadım demiştim. Onu da kurdum. 10/10 Devam 🟢

Telefon Tututucu (Benks Masaüstü Telefon Tutucu)

Telefon tutucu ile de devam ediyorum. Bebek ve çocuk testinden başarıyla geçerek parasının hakkını verdi. Şirketin gönderdiği ufak tahta telefon tutucu da gayet iş görüyor. 8/10 Devam 🟢

Monitör (Dell UltraSharp 24 USB-C U2419HC)

Daha büyükleri ve oval olanlar ilgimi çekse de bu da gayet iş görüyor. 8/10 Devam 🟢

Masa (Ikea BEKANT)

Ikea BEKANTEn çok rahatsız olduğum ürün masa oldu. Keşke dedirtti. Çok çabuk kirleniyor ve köşeleri çok sivri. Üzerine yüklendiğimde ufaktan ses çıkarıyor. Eski şirketteki Ikea masa bundan çok çok iyiydi.

Ikea’dan yükseltilebilir SKARSTA bakıyordum ancak istediğim boyutta masalar stokta kalmayınca Bekant tipine döndüm onda da istediğim boyut stokta kalmayınca ikinci el aramaya başladım. letgo’dan temiz ve eve yakın bir Bekant 120x80 masa buldum. Hem hesaplı hem de istediğim boyutta masa bulmak beni fazlaca sevindirdi.

Yüzeyi çok iyi, ayakları ayarlanabiliyor. Köşeleri oval ve pürüzsüz. Fiş için altta toplama filesi var.

9/10 Değiştirdim 🔴 - 🟢

Kulaklık (Huawei FreeBuds 3 Bluetooth kulaklık)

Huawei kulaklıktan memnunum bu zamana kadar iki kere zoom görüşmesi sırasında seste dalgalanma oluyor diye geri bildirim aldım onun dışında gayet süper. Şarj süresi uzun soluklu günlerde sıkıntı çıkarsa da hızlı şarjla o kısmı hallediyor.

Şöyle bir pratiğim oldu, pil bitiyor uyarısını duyunca kulaklığın birini şarja koyup diğeriyle devam ediyorum. Sonra diğerini şarj edip devam ediyorum. 9/10 Devam 🟢

İnternet (Vodafone Evde internet + Turkcell SuperBox)

Superbox’tan memnunum ancak fiyat vergiler dahil olunca 141 tl oldu. Bazı saatlerde hızda dalgalanmalar oluyor. Fiber bu mahalleye uzun süre gelmeyeceğini düşünürsek SuperBox’a mecburum.

Superbox’ın kota bilgileriyle alakalı şöyle birşey var. Modem’in admin ekranından kota takibi yapabiliyoruz. Ayrıca bir telefonumuz olmadığı(SMS ile şifre alamadığımız) için dijital işlemlere giremiyordum. Modem admin ekranında SMS atma ve alma bölümü var. Buradan SMS alıp Dijital İşlemler üzerinden kota sorgusunu yapabiliyoruz. 7 / 10 🟡

Klavye

Klavye konsunda

İlker’in klavyesini görene kadar memnundum ama bu klavyeyi 10 parmak öğrenimimi tamamlarsam kendime hediye olarak almayı planlıyorum. Bir klavyeye 1100 tl vermeye kendimi hazırlamam lazım. 6 / 10 🟡

Dizüstü Bilgisayar Standı (Dock Ağır Alüminyum Stabil Macbook Notebook Tam Ayarlı Büyük Laptop Standı)

iDock StandMevcut stand yetiyor ama şık ve taşınabilir bir alternatifi düşünebilirim demiştim ve buldum bir tane. Dock Ağır Alüminyum Stabil Macbook Notebook Tam Ayarlı Büyük Laptop Standı şık, kullanışlı ve daha az yer kaplayan bir stand olarak ilgimim çekti.

Bilgisayarın kapağını açarken alttaki tutamaçlara takılma sorunu oluyordu onu halletmiş oldu. Ayrıca önceki standın arkasına erişimim zor olduğu için temizlenmesi zor oluyor ve masayı daha kalabalık gösteriyordu. Tek sorun olarak resimlerde daha pürüzsüz görünen stand geldiğinde daha pürüzlü görünüyor. 9 / 10 Değiştirdim 🔴 - 🟢

Işık (SAYWİN Ring Light)

Işık yeterli ve az yer kaplaması konusunda süper ancak direk vurunca gözümü rahatsız ediyor. Masayı değiştirince yerleşimi konusunda sorunlarım olsa da idare edeiyoruz. 6 / 10 Devam 🟢

Kütüphane / raf / saklama alanı

RafZamanla kullandığım araçlarla (şarj kabloları, kulaklık, vd, malzemelerle dolunca) masamın üzeri kalabalıklaştı. Çözüm için çare aramaya başladım. Masam küçük olduğu için (eski masam) masa üstü ve altına konacak bir çözüm bana uymadı. Bende raf aramaya başladım. Odanın köşesinde yerleştiğim için köşeye uygun bir raf aldım. Hanım pek beğenmese de benim işimi hayli hayli gördü. 7 / 10 Devam 🟢

Sonuç

İhtiyaçlar zamanla değişiyor ve kullandıkça daha iyisini bulunca değiştiriyorum. Geçen yazıdan sonra

  • Sandalye 🟡
  • Mouse 🟢
  • Telefon Tututucu 🟢
  • Monitör 🟢
  • Masa 🔴 - 🟢
  • Kulaklık 🟢
  • İnternet 🟡
  • Klavye 🟡
  • Dizüstü Bilgisayar Standı 🔴 - 🟢
  • Işık 🟢
  • Kütüphane / raf / saklama alanı - 🟢

  1. CSS Grid’e (Izgara) Giriş
  2. CSS Grid Özellikleri
  3. fr birimi
  4. CSS Izgara çizgi isimlendirmesi ve kullanımı
  5. Sayfa planlama sihirbazı grid-template-areas
  6. Explicit(belirlenmiş) ve implicit(belirlenmemiş) grid ögeleri
  7. CSS minmax işlevsel değeri
  8. repeat() işlevi, auto-fill ve auto-fit değerleri
  9. CSS Grid öge özellikleri
  10. Grid hizalama ve sıralama işlemleri
  11. CSS Grid kısayolları - grid-template ve grid
  12. CSS grid ile ögeleri üst üste bindirme
  13. Grid geliştirme araçları

Grid yazılarımızın 14. sünde sizlere CSS Grid ile uyumlu web(responsive) hakkında bir şeyler paylaşacağız. CSS grid modülü çıkana kadar sayfa planlama biz geliştiricilere modül, özellik grubu veya tanım olarak bir çözüm sunmamıştı. Geliştiriciler mevcut şartları sağlayacak özellikleri sayfa planlaması için kullandı.

İlk olarak <table> etiketiyle ve position tanımlarıyla HTML yoğunluklu çözmeye çalıştık. Daha sonra <div> etiketi ve float, width tanımlarıyla CSS yoğun çözümlerle çözmeye çalıştık. Daha sonra flex ile çözmeye çalıştık ancak bunların hiçbiri W3C’nin sayfa planlama için çıkardığı özellikler değildi. Belli bir amaca hizmet ediyordu ve geliştiriciler tarafından sayfa planlama için kullanıldı.

İlk defa sayfa planlama için bir modül olarak grid modülünü biz geliştiricilere sundu. Tüm ihtiyaçları gidermesi zor olsa da birçok gerekliliği karşılıyor. Yeni eklenen subgrid özelliği de sayfa planlamadaki ihtiyaçları karşılamaya yönelik. Ayrıca daha yeni eklenen grid masonry özelliği standart koyucuların ihtiyaçlara göre çözüm üretme eğiliminde olduğunu gösteriyor.

CSS Grid modülü ve özellikleri uyumlu sayfalar üretmek için yeni avantajlar sunuyor. Bu yazımızda bu avatajlardan bahsetmeye çalışacağım.

İki eksen avatanjı

Daha önceleri tek eksenli sayfa kodlamaları yaptığımız için uyumlu web sayfalarındaki bazı yer değiştirmeleri zor oluyordu, bazı tasarımları gerçekleştirme imkanı olmadığı için bazı kod bloklarının iki kopyasını oluşturduğumuz oluyordu. Bu durum grid’in iki eksenli yapısıyla tarihe karıştı.

Zingat’ta ilan detay sayfasında breadcrumb’ın yeri sorun olmuştu. Mobilde resmin altında olan breadcrumb desktopta tüm içerik ve sağ kolonun üzerinde konumlandırılmak istenmişti. Tek eksenli bir düşünce ile bu işi halletmek çok zor bir iş olduğu için biz içeriği iki kere sayfaya ekleyip mobilde birini desktop’ta diğerini göstererek geçmiştik. Şimdi iki eksenli bir grid ile bu işi nasıl yaparım diye düşününce nispeten basit ve tek içerik ile bu durumu çözebiliyoruz.

Nasıl? İyi değil mi?

Tekrar eden alanlarda medya sorgusu olmadan uyumlu hale getirmek

Bir diğer konu, tekrar eden alanlar için kullandığımız repeat işlevi ve bu işlevin dinamik olarak uyumlu alanlar oluşturması. Bu süper bir olay. Tekrarlanan alanlarda uyumluluk konusunda bir kod yazmamıza gerek yok.

repeat() işlevi, auto-fill ve auto-fit değerleri yazımızdaki örnek

auto-fill auto-fit karşılaştırma Ayrıca Juan Martín García’nın Trello-Style Card Layout örneği de incelmeye değer.

Uyumlu web sayfaları oluştururken bize zaman kaybettiren konulardan bir tanesi çok fazla medya sorgusuyla kodumuzun okuma ve yönetiminin zorlaşmasıydı. Grid bu konuda işimizi kolaylaştırıyor.

Grid isimlendirmeyle anlamlı alanlar

Grid kodlarken alanları temelde iki şekilde kodluyoruz. Birinci grid çizgi numaraları, ikincisi grid alanlarını isimleriyle. grid-template-areas tanımı ile isimlendirilen bu alanların nasıl yerleşeceğini görmüştük. Bu flex’teki order’ın çok ötesinde bir kullanım. Çok büyük kolaylık.

Sayfa planlama sihirbazı grid-template-areas yazımızdaki örnekte görüldüğü gibi isimlerle sayfa planı yapabiliyoruz.

codepen örneklerinde masaüstü görünümünü görmek için zoom değerini 0.25x seçiniz.

fr birimiyle esnek alanlar oluşturmak

CSS Grid ile gelen ve sadece grid tanımlarında kullanılan fr birimi bize esnek alanlarımızı oluşturmamızda yardım eder. Yüzde değerleri gibi bulunduğu kapsayıcıya göre değişkenlik gösteren fr tanımlı elemanlar. Bize yüzde değerlerinden daha avantajlı imkanlar sağlar.

fr birimi yazımıza ve örneklerine bakmanızı tavsiye ederiz.

Başta belirttiğim gibi tüm sayfa planlarını karşılıyor demek çok iddialı bir laf olur ama karşılacağımız sayfa planlarının çoğuna çözüm üreten bir yapısı var grid’in.

Kalın sağlıcakla.

Kaynaklar

Bu hata ilk olarak 7-8 ay önce karşıma çıkmıştı. Chrome bir sitede kayıtlı şifreniz varsa sitedeki tüm type=”password” girdi alanlarını otomatik olarak dolduruyor. Normalde bu sorunu çözmek için autocomplete="no" tanımı yeterli oluyordu, ancak bu kabulü Chrome kaldırmış.

chrome şifreli alanlarda sorun

Stackoverflow’da önerilen yötemler işe yaramamıştı. Bu sefer denediğimde autocomplete="new-password" tanımı işe yaradı.

<input type="text" name="tel">
<input type="password" name="password" autocomplete="new-password">

Kalın sağlıcakla.