REACT UI STYLING
Bu yazıda CSS Birimleri pixel, em ve rem gibi farklı türlerin neden olduğunu ve nasıl çalıştığını anlatcağım.
Pixel: Ekranı olan cihazlarda TV, Bilgisayar, Tablet , Cep Telefonu veya Saat ekrandaki kontrol edilebilen en küçük alan. Kontrol edilebenden kastım, ilgili noktada renk yoğunluğunu ayarlayabilmesi.
- RGB(Red, Green, Blue)
- CMYK(Cyan, Magenta, Yellow, Black)
Tabi eskiden monitorlar bu kadar iyi değiken bu renk sayısı belli bir sınırdaydı. Örneğin ilk ekranlar sadece 2 renk tonu gösterebiliyordu Monochrome
1 bpp, 21 = 2 colors (monochrome)
2 bpp, 22 = 4 colors
3 bpp, 23 = 8 colors
4 bpp, 24 = 16 colors
8 bpp, 28 = 256 colors
16 bpp, 216 = 65,536 colors (“Highcolor” )
24 bpp, 224 = 16,777,216 colors…
Frontend Kapsam
Bugünkü yazımda Drag And Drop için React’da kullanılan React Dnd Kütüphanesinden bahsediyor olacağım.
Drag and Drop kavramı WebAPI içerisinde sağlanan bir yapı bu konuda daha önceden bir blog yazısı yazmıştım. Bu yazıda direk Web API’deki drag-drop yapısını kullanıyorduk.
Bunun için React’ın özel Declerative ve Hooklardan faydalanabildiğiniz React Dnd kütüphanesi bulunuyor. Ben bunun için ufak bir örnek hazırladım ve zaman içerisinde örneklerimi genişletmeyi düşünüyorum.
Aşağıdaki SideBar köşe noktasınından tutarak genişletebilir veya daraltabilirsiniz.
Frontend Kapsam
Kayıtlı olduğum bazı sitelerden haftalık, aylık Haber Bülteni olarak bir çok mail atılıyor. Bu bültenlerde karşıma çıkan bazı kütüphane ve ürünleri incelererek bu yazıları oluşturuyorum.
Bu yazıda Log bilgisini göstermek için kullanılan bir kütüphaneden bahsedeceğim. Lazy Log. Örnek ufak bir proje geliştirdim.
Bu proje Local veya Remote bulunan bir Log içeriğini göstermeyi saglıyor.
FRONTEND KAPSAM
Kayıtlı olduğum bazı sitelerden haftalık, aylık Haber Bülteni olarak bir çok mail atılıyor. Bu bültenlerde karşıma çıkan bazı kütüphane ve ürünleri incelererek bu yazıları oluşturuyorum.
Öncelikle Emotion ve Faker kütüphanesini kullanarak oluşturduğum aşağıdaki demo sayfasını inceleyebilirsiniz.
Bu örnekte Emotion kütüphanesi ile dinamik Color ve Styling yapısına sahip düğmeler oluşturdum. Faker kütüphaneside ile de düğmelere fake isimler oluşturmak için kullandım.
Emotion Kütüphanesi
CSS in JS kavramını destekleyen bir kütüphane. Normalde bir Web uygulaması veya sayfası geliştirdiğimizde bu sayfa 3 temel parçadan oluşur;
- HTML
- JS
- CSS
CSS bir seviye ileriye götüren SaSS preprocessor kullanmayı anlatmıştım. Ama dinamik bir bileşen yapmaya çalıştığınızda SaSS pre-compiled bir yapıda olduğu için sunucuda önce en son halleri olan CSS dönüştürülerek dinamikliğini kaybeder.
Dinamikliği sağlayacak yapı ise;
- Media Query yapısı (Bu yazının içerisinden ulaşabilirsiniz)
- …
REACT
React bileşen kapsama yöntemi ile yeni bileşenleri kolayca oluşturabileceğiniz bir kütüphane. props.children bu işlemi yapmanızı sağlayacak olan bir araç.
React, Vue, Angular, Svelte UI yapısının kuvvetli olmasını sağlayan kısım bileşen mekanizması üzerine kurulmuş olması. Yani tüm bileşenler birbirini kapsayarak daha büyük bileşen ve sayfaları oluşturuyor.
Öneğin aşağıdaki Rehber Listesinin nasıl iç içe bileşenlerden oluştuğunu görebilirsiniz.
WEB EKOSISTEM
Birinci bölümde Netlify nedir ? konusuna değinmiştik. Bu yazıda Netlify klasik web app mimarisinden farklı nasıl bir ortam sağladığı üzerinde duracağız.
Netlify Web uygulama mimarisi ve işleyişi klasik Web App geliştirme yapısından bir takım farklılıklar içeriyor. Bu farklılıklar;
- Serverless
- Edge üzerinde çalışıyor
- Sürelerine ve amacına göre farklılaşmış ve özelleşmiş işlemci fonksiyonlar bulunması (Edge Handler, Functions, Background Functions)
- JAMStack yapısının üzerine kurulu framework ile çok iyi örtüşmesi
- ve Git Repoları (GitHub, GitLab …) otomatik CI/CD yapısını kolay bir şekilde oluşturması
Klasik Web Uygulaması Mimarisi (Wordpress , eTicaret vb..)
Klasik Web uygulamasında tüm yapı request/response üzerinden merkezi WebApp Servers üzerinden işletilir.
Kullanıcı DNS üzerinden tarayıcı ile Web Kullanıcı Arayüzlerine ulaşır. WebApp Server kullanıcının bu isteğine(request) cevap verebilmek için
- Veritabanı (RDS, DynamoDB vb..)
- Caching Service (Redis, MemCache …)
- Job Servers (Queue üzerinden…
WEB EKOSISTEM
Web uygulamalası geliştiricilerinin uygulamalarını genellikle (Jamstack) olanları Serverless (Edge) host ederek daha hızlı geliştirmelerini sağlayan bir platform
Netlify Frontend veya Jamstack dediğimiz blog, CMS ve benzeri uygulamalar için size hosting platformu sağlıyor.
Aşağıda bu Netlify ne olduğunu kısaca özetlemiş.
GELİŞTİRİCİ ARAÇLARI
Bu yazıda Digital Gardening ne olduğu, kişisel gelişim ve motivasyon olarak ne gibi faydalar sağladığı konusuna değineceğiz.
Digital Gardening denince benim aklıma bahçede yetiştirdiğimiz bitkilerin dijital hali. Tabi burda bir metafor var. Bizim yetiştireceğimiz bitki değil fikirler olacak. Fikirlerimizi ve düşüncelerimizi nasıl bitkileri yetiştirdiğimiz gibi yetiştirebiliriz ?
Bu konu oldukça dikkatimi çekti çünkü OnurDayibasi.com ve dev web sayfalarında uygulamaya çalıştığım yöntem buna benzer şeylerdi. Her ne kadar Digital Gardening kavramından bir haber olsamda 😃
Blog yazmak, tamamlanmış kaliteli bir blog yazısını yazıp bunu kronolojik olarak oluşturmak oldukça zor. Hele birde oluşturacağınız blog yazısı teknik bir yazı ise.
- Yazıyı oluşturmak için bir kere konuyu anlamış olmanız gerekiyor.
Konuyu Anlamak?
Aynı yazılım geliştirmede olduğu yani yazılım konusunda ufak ufak geliştirmeler yaparak…
React Development
In this article, I want to tell you how to write your own OptionSelector like a Checkbox, Toggle Button or Combobox.
Yesterday I wanted to try some UI development about responsive typography. I find different kinds of solutions, like media-query, viewport-based, or fluid responsive mechanics. But how can I display three of them on one screen?
The solution is not to display all the mechanics on the same screen. You give users options to select which they want.
STYLING
Basit hesap makinesinin styling yapmıştık. Şimdi de farklı farklı platformlar için Responsive olmasını sağlamaya çalışacağız.
Öncelikle örneğin linkini vereyim. (https://onurdayibasi.dev/simple-calculator)
Responsive: Web sayfanıza veya uygulamanızda farklı farklı cihazlardan girdiğimizde değişen ekran boyutlarına göre uygulamanızın farklılaşarak, ekran koşullarına göre şekillenmesidir.
