Mehmet Köse

Building blazing fast applications. Loves everything new around the Web.

Web

Web'de Img Etiketini Efektif Kullanmak

web resim responsive lazy
Yıllardır kullandığımız img etiketi süreç içinde oldukça duyarlı hale geldi. Logo gibi imaj dosyalarını responsive yapmak yıllardır uygulanan bir şeydi. Kod seviyesinde düşünürsek standartların da günceli yakaladığını söyleyebiliriz. Bu yazıda değinilen iki konu var aslında; resim performansı ve resim deneyimi. Aşağıdaki koda bakacak olursanız, srcset attribute’ü ile cihaz genişliğine göre resim versiyonu girilebildiğini görebilirsiniz. Resimler pek dikkat etmediğimiz ama bizi büyük performans kaybına uğratan şeyler. Birkaç versiyonunu tutmak ve bu şekilde sunmakta fayda var. Read more...

296 byte CSS kodu ile erişilebilir web sayfaları

css minimal web
Kodumunsitesi‘ni bilirsiniz. Aslı https://motherfuckingwebsite.com/ olan bu fikri biraz daha ilerletip içine biraz CSS katmışlar Şu yazıda. Özetle her türlü içeriği düzgünce okunabilir hale getirecek minimum düzeyde CSS kodu ortaya çıkartılmış. Üzerine daha fazla araştırma yapılıp birkaç adım ileriye taşınabilir ve gerçekten tüm web sayfalarını kapsayacak hale getirilebilir. Dursun burada da. body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; line-height: 1.6; color: #222; max-width: 40rem; padding: 2rem; margin: auto; background: #fafafa; } img { max-width: 100%; } a { color: #2ECC40; } h1, h2, strong { color: #111; }

Sayfa Assetlerinizi Html İçine Toparlayın : Node Inline

node web performans base64 gulp
Neden? Öncelikle amacımız ne ona bakalım, kütüphanenin amacı sayfa asset’lerini html içine gömerek tek dosyaya indirgimeye çalışmak. Peki bizim amacımız ne olabilir? Performans olabilir mesela. Lighthouse’da test yapıyorsunuz ve gereksiz asset’lerin arayüzün çizilmesini engellediği yönünde hatalar alıyorsunuz. Muhtemelen statikleri inline gömmek sorununuzu çözecektir. Veya interneti crawl edip sayfaları yedekliyor olabilirsiniz. Assetler ile birleştirmek mantıklı bir fikir olabilirdi. Ya da, web sitenizi Electron ile desktop uygulaması olarak derlemek istiyor, ama assetleri taşıyarak, path’ler ile uğraşarak vakit kaybetmek istemiyorsunuz. Read more...

Native Grid Temelli Bir CSS Grid Kütüphanesi: Raster

web css grid frontend
Bu tarz bir grid sistemine ihtiyacım olmuştu bir ara, grid temelli bir abstraction aradığımda bulamamış, zaman içinde HN’de denk gelince yer imlerine kaydetmiştim. Ama yer imlerini de parça pinçik bir çok yerde tuttuğum için ve nafile bir milenyum koleksiyonculuğundan öte gidemediğimden dolayı, kalıcı olsun diye buraya da yazayım dedim. Benim gibi kişisel projelerde minimal çözümler arayan, yeni şeyler denemek isteyenlerdenseniz, şans vermek isteyebileceğiniz bir zımbırtı olabilir Raster. Bi kere grid etiketini kullanarak yerleşimleri ayarlıyorsunuz. Read more...

Web Nereye Gidiyor?

web mobile desktop electron deskgap electrino quark
Antalya’daki meetuplarımızda panpalarla laflarken son 5-6 senedir platformlar arası kıyaslamalar yaptığımız durumlarda yatırımı web’e yapmak gerektiği yönünde tartışmalara girdiğimi hatırlıyorum. Nitekim geldiğimiz nokta şu; henüz yolun başında olsa da WebAssembly denen şeyle büyük ve zorlu hesaplamaları derleyip tarayıcı içinde binary dosya çalıştırmak mümkün hale geldi. PWA yaygınlaştı. Windows 10’a kurulabilir hale geldi. Eğer manifest dosyası düzgün yapılandırılmışsa PWA’yı doğrudan mobil cihazların menülerine bir uygulamaymışcasına eklemek mümkün. Bu sene başında, PWA’ların doğrudan Play Store’da yayınlanabilir olacağı yönünde söylentiler arttı, doğrulandı, şöyle bir yazı var. Read more...
1 of 1