Open in app

Sign In

Write

Sign In

Ömer Gülçiçek
Ömer Gülçiçek

231 Followers

Home

About

Published in

Kodcular

·Oct 8, 2022

2022 CSS İstatistikleri

2022 yılı geride kalırken, CSS ile ilgili güzel istatistikler açıklandı. Bunları birlikte inceleyelim. En Sık Kullanılan CSS Class’ları 2020 ve 2021’de olduğu gibi yine en sık kullanılan class adı active. Ardından Font Awesome’ın kullandığı fa ve fa-* 2. ve 3. sıradaki yerlerini korumuş. clearfix class’ı ise ilk 20’den kayboldu ve sayfaların sadece %10’unda kullanılıyormuş. …

Frontend

2 min read

2022 CSS İstatistikleri
2022 CSS İstatistikleri
Frontend

2 min read


Published in

Kodcular

·Sep 9, 2022

Grid-Template-Areas ile Layout Oluşturmak

CSS Grid ile layout’u oluşturmak çok kolay ve fonksiyonel. Bu makalede grid özelliklerinden olan grid-template-areas özelliği ile HTML bileşenlerimizi nasıl component gibi kullanabiliriz, bunu göreceğiz. Layout’umuzu Parçalara Bölmek Uzun bir süre Bootstrap’ten gelen bir alışkanlık olarak layout’u kolonlar ile bölerdik. Örneğin, 3 eşit parça için 3 x .col-4 yapısını kullanırdık. …

CSS

2 min read

Grid-Template-Areas ile Layout Oluşturmak
Grid-Template-Areas ile Layout Oluşturmak
CSS

2 min read


Published in

Kodcular

·Jun 26, 2022

CSS Object-View-Box Özelliği ile Görüntüyü Kırpmak

CSS’te bir resmin istediğimiz bir bölümünü kırpmamız için doğal bir yöntem yoktu. Ya resmi saran farklı bir elemente ihtiyacımız vardı (<figure> gibi) yada background-image kodu ile resmin pozisyonunu ve boyutunu ayarlamak gerekiyordu. İki yöntemide nasıl kullanacağımıza bakalım. Resmi Farklı Bir Element ile Sarmak Bu yöntemde üç adımda istediğimiz sonuca ulaşabiliyoruz. <img /> etiketimizi bir kapsayıcı element…

Front End Development

2 min read

CSS Object-View-Box Özelliği ile Görüntüyü Kırpmak
CSS Object-View-Box Özelliği ile Görüntüyü Kırpmak
Front End Development

2 min read


Apr 22, 2022

Kişisel Sitemin NextJS Versiyonu

omergulcicek.com — Düzenli aralıklarla kişisel sitemi farklı yazılım dilleriyle baştan yazıyorum. Teknolojinin yanı sıra, tasarımsal olarakta daha minimal, sade ve şık bir arayüz yapmaya özen gösteriyorum. v6 olarak isimlendirdiğim bir önceki versiyonda React başlangıç kiti olan Gatsby ile geliştirmiştim. Kaynak kodlara GitHub’tan ulaşabilirsiniz. v7 yani NextJS ile geliştirilmiş olan versiyonu yayına almış…

Nextjs

2 min read

Nextjs

2 min read


Published in

Kodcular

·Jan 25, 2022

Styled Component ile Dinamik Css Yazmak

Çalıştığım projede tasarımı dinamik olarak render edilen componentlere ihtiyacımız oldu. Detaylandırmak gerekirse, default bir butonumuz var fakat bu butonu isteyen kişi istediği gibi stillerini customize edebilecek ve özelleştirilmiş stilleri içeren JSON Frontend’e geldiğinde buna uygun bir çıktı elde edecek. Buradaki asıl sıkıntımız ise, var olan CSS’lerin üzerine yeni bir CSS…

Styled Components

2 min read

Styled Component ile Dinamik Css Yazmak
Styled Component ile Dinamik Css Yazmak
Styled Components

2 min read


Jan 25, 2022

2022 Hedeflerim

Yeni bir yıl, yeni hayaller, yeni hedefler… Geride bıraktığımız senede hedeflerimi büyük oranda başarmıştım. Yeni yılda çok daha hareketli, gezgin, sosyal bir kişi olmayı hedefleyeceğim. 🎮 Alınacaklar Listesi Teknolojik olarak büyük donanımları hep aldım. Fakat güzel bir çalışma masası ve mouse’a ihtiyacım var. …

2022

2 min read

2022

2 min read


Published in

Kodcular

·Nov 26, 2021

CSS Container Sorguları

Responsive Design kavramı 25 Mayıs 2010 tarihinde Ethan Marcotte adlı bir arayüz tasarımcısı sayesinde hayatımıza girmişti. Responsive Web Design başlığı ile duyrulan bu fikir, her Frontend geliştiricisinin aktif olarak kullandığı bir özellik konumunda. CSS Media Sorgularıyla İlgili Sorunlar Responsive design harika fakat yetersiz kaldığı noktalar olabiliyor. Bunu bir örnek üzerinden kavramaya çalışalım.

Frontend

3 min read

CSS Container Sorguları
CSS Container Sorguları
Frontend

3 min read


Published in

Kodcular

·Oct 28, 2021

JavaScript Selectorlerinin Çalışma Hızları

Her yiğidin yoğurt yiğişi ayrıdır, bir kodu birden çok şekilde yazabilirsiniz. Hepsi doğru çıktığı verebilir fakat performans anlamında birbirlerine göre artı eksileri olabilir. Şöyle örnek bir resim etiketimiz olsun: <img id="logo" src="/logos/turkey-national-day-2021.png" alt="Cumhuriyet Bayramı kutlu olsun!" title="Cumhuriyet Bayramı kutlu olsun!" height="200" width="500" /> JavaScript’te bir HTML etiketine erişmek için çeşitli…

Front End Development

2 min read

JavaScript Selectorlerinin Çalışma Hızları
JavaScript Selectorlerinin Çalışma Hızları
Front End Development

2 min read


Aug 12, 2021

İzmir, Marmaris, Ölüdeniz Tatili

15 Temmuz sabahı bavullarımızı alıp 4 üniversite arkadaşım ile Fethiye’ye doğru yola çıktık. Güzergah üzerinde önce İzmir’i gezdik, ardından Marmaris İçmeler plajında yüzdükten sonra, son ve asıl durağımız olan Fethiye Ölüdeniz’e gittik. Arkadaşlarla ilk tatilim olması açısından benim için önemliydi. Tarihe not düşmek adına biraz özet, birazda fotoğraflar paylaşmak istedim. İzmir …

Fethiye

2 min read

İzmir, Marmaris, Ölüdeniz Tatili
İzmir, Marmaris, Ölüdeniz Tatili
Fethiye

2 min read


Published in

Kodcular

·Jun 27, 2021

CSS’te Min Max ve Clamp Fonksiyonları

CSS yazarken hayatımızı kolaylaştıran bazı fonksiyonlar var. Bazı durumlarda kullanılan genişlik, font-size gibi değerlerin dinamik olarak hesaplanmasına ihtiyacımız olabiliyor. Örneğin, bir kart sayfada 70% yer kaplasın fakat 300px’den küçük olmasın gibi bir senaryomuz varsa, bu durumda şöyle bir CSS yazılmasını bekleriz; .card { width: 70%; min-width: 300px; } CSS min()…

CSS

2 min read

CSS’te Min Max ve Clamp Fonksiyonları
CSS’te Min Max ve Clamp Fonksiyonları
CSS

2 min read

Ömer Gülçiçek

Ömer Gülçiçek

231 Followers

Frontend Developer

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech

Teams