Yaklaşık bir hafta önce flex hakkında Bursa’da Girişimci Engelliler Derneği’nin davetlisi olarak bir seminere gittim. Seminer çok güzel geçti. Seminer için Bülent Sakarya ve Samet Şahin’e teşekkürler. Seminere katılan arkadaşlara bir şeyler anlatmak için hazırlanırken ben bir şeyler öğrendim. Bu makalede bunları sizlerle paylaşacağım.

Flex’in bize kazandırdığı en güzel özelliklerden birisi de hizalama özellikleri. Burada anlatacağım konu flex ile margin tanımının auto değerinin birlikte kullanımı ile ortaya çıkan süper bir özellik.

flex ve margin auto

zingat.com‘dan bir örnek ile bu konuyu anlatmaya başlıyayım. Yukarıda gördüğünüz sonucu normal float ile oluşturmak için bazı değişiklikler yapmak gerekiyor. Örneğin ikonları sahte elemanlarda kullanmak zorunda olmamız gibi. Flexi le bunu yapmanın kolay bir yolu var.

Kapsayıcı elemana flex tanımı yaptığımızda ögelerin her birini yan yana dizildi. Bizim istediğimiz ise harita (map) ikonu ve kilometre bilgisini sağa tarafa hizalaması. Burada ortaya margin-left: auto; ile ikon ve yazıyı sağ tarafa hizalıyoruz. Daha doğru bir tanım ile harita ikonunun sol yanını autoya çekiyoruz.

Sonuç istediğimiz gibi. Bunu tek satır css kodu ile yaptık.

Aynı mantıkla başka bir örnek yapalım. Örneğimizde bir menü yaptığımızı düşünelim. Seminerde twitter menüsünü örnek vermiştim. Örneği burada da paylaşayım.

Kodun can alıcı kısmı

.twitter {
  margin-left: auto;
  margin-right: auto;
}

kısmıdır. Flex ile sıraladığımız menü elemanlarından twitter sınıfı tanımlı olanı ortada kalan boşlukta ortalamak için sadece iki satır kod yazdık. :)

Dikey örnekler

Dikeyde benzer örnekler yapabiliriz. Zamanında uğraştığım için iyi biliyorum. livego’da çalışırken sol menü yapımında bu tip bir kod çok ihtiyaç duymuştum. Çok ciddi zamanımı almıştı sol ve sağ kolonlar.

livego flex ve margin auto

Şimdi aynı sonucu elde etmek sadece iki satır kod.

Menü yüksekliğini ekran yüksekliğine eşitlemek için height: 100vh verdik. Yatayda kullandığımız gibi ilgili ögenin (.add-account) margin değerini auto yaptık. Bu sefer alta hizalamak için margin-top: auto tanımladık.

Bu yöntemi birçok yerde kullanabiliriz. Süper bir kazanım.

Kalın sağlıcakla.

Kaynaklar

Arayüz geliştiricilerin dünyası Nodejs sonrasında olumlu olarak değişti. Değişmeye de devam ediyor. Hızlı gelişen bu dünyada en büyük sorunlardan bir tanesi çok fazla araç çıkıyor ve bu araçları öğrenmek zaman alıyor.

Bu gelişmelerin başında Grunt, Gulp gibi işleri otomatize eden yapılar ve sonrasında paketleme araçları olarak geçen Webpack, Browserify ve Rollup gibi yapılar. Bu araçlar çok güzel ve bizi bir çok dertten kurtarıyor. Ancak ilk pargrafta bahsettiğim gibi bazı geliştiriciler bu nasıl bir iş her hafta yeni bir şey çıkıyor takip edemiyoruz diye yakınıyor.

Tam bunları söylerken size yeni bir geliştirme aracını tanıtmak istiyorum. Parceljs. Parcel bizlere yapılandırma dosyası olmadan paketleme yapma imkanı sağlayan bir araç. Webpack çok güzel ve kullanışlı ancak yapılandırma dosyasını oluşturmak çok zor. Ayrıca webpack’in öğrenme eğrisi yüksek. (Benim gördüğüm kadarıyla.)

Parcel tam bu noktada ortaya çıkıyor ve diyorki yapılandırma dosyası oluşturmadan da bu işleri yapabiliriz. Bu yaklaşım insanların hoşuna gitti, şu an github’da 18.300 yıldızı var. Kısa sürede bu kadar beğeni toplaması bu kolaylığından kaynaklanıyor. Webpack bu gelişmelere kayıtsız kalmadı ve Webpack 4.0 sürümünde yapılandırma yapmadan bir çözüm üreteceğini belirtti.

Parcel aynı zamanda diğerlerine göre daha hızlı bir araç olduğunu yayınladığı hız testleriyle idda etti.

Paketleyici Zaman
browserify 22.98s
webpack 20.71s
parcel 9.98s
parcel - with cache 2.64s

Parcel’in temel özellikleri

  • Hızlı bir derleme
  • Tüm paket ihtiyaçları için hızlı ve kolay çözüm
  • Otomatik dönüştürme. Babel, PostCSS ve PostHTML
  • Sıfır yapılandırma ile kod bloklarına ayırma imkanı
  • Modüle özel güncelleme (Hot module replacement)
  • Kolay hata ayıklama imkanı

Bu vaatlerin gerçekliğini uygulama yaptıkça göreceğiz.

Bu makalede basit bir sitede parcel kullanımı göreceğiz.

Hadi başlayalım.

Kurulum

Parcel’i yarn ve npm ile kurmak için:

Yarn ile:

yarn global add parcel-bundler

Npm için:

npm install -g parcel-bundler

kurulum bititkten sonra yeni bir proje klasörü açalım.

mkdir parcel-ikinci-deneme

niye ikinci dediğimi aşağıda açıklayacağım.

cd parcel-ikinci-deneme

proje klasörüne girelim.

package.json dosyasını oluşturmak için:

yarn için

yarn init -y

npm için

npm init -y

çalıştıralım. Gerekli bilgileri verdikten sonra package.json dosyamız hazır olacaktır. Detaylı bilgiye buradan ulaşabilirsiniz.

Sıra geldi basit bir site yapısı oluşturmaya. Basit olduğu için bir html ve bir js dosyası oluşturup başlayalım.

ister terminalden

touch index.html && touch index.js

ile oluşturun isterseniz editörünüzden oluşturun. Dosyaları oluşturduktan sonra basit bir html içeriği oluşturup, dosyamıza js dosyasını eklyelim.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Parcel İkinci Deneme</title>
</head>
<body>
    <script src="./index.js"></script>
</body>
</html>

javascript dosyamıza da

console.log('Şampiyon Trabzonspor');

yazalım. Buraya kadar normal bir süreç idi. Sıra geldi Parcel’i çalıştırmaya. package.json dosyamıza parcel’i çalıştırmak için aşağıdaki kodu eklyelim.

...
"scripts": {
    "start": "parcel index.html"
},
.....

sonra terminalden

npm run start

deyince hata verdi :(

İlk denememde hata aldım biraz araştırdığımda cevabını da bulamadım. İlk denemem için fazla zamanım olmadığı için öylece bıraktım.

Sonra belirli bir süre sonra ikinci bir deneme yapayım dedim. Aynı yoları izledim. Yine aynı hatayı aldım biraz araştırınca hatanın Nodejs sürümünden kaynakladığını öğrendim. Hatayı şimdi net hatırlamıyorum ama şu idi sanki

Can't find variable: require

Ondan dolayı proje ismini parcel-ikinci-deneme yaptım. :)

Çözüm için nvm kurmam gerekti. Sonra nvm ile ilgili bir makale de yazdım. NVM Nedir? Nasıl Kullanılır? İşin ilginç olan tarafı Parcel dokümantasyonlarında node sürümüyle ilgili bir bilgilendirmenin olmamasıydı. Ben node’un 8.9.3 sürümüne geçince hata düzeldi.

Sonra tekrar

npm run start

deyince çalıştı ve aşağıdaki gibi bir görüntü verdi.

parcel ilk çalışma

Tarayıcıda http://localhost:1234/ açınca tarayıcının konsolunda ‘Şampiyon Trabzonspor’ yazısını gördüm. Sevindim :)

parceljs ilk deneme chrome sonuç

Parcel bizim için bir yerel sunucu çalıştırdı. Ayrıca projede otomatik dist klasörü oluşturdu. İçinde iki adet dosya var.

parcel dist

Evet parcel’i çalıştırdık ama çok da birşey yapmadık. Biraz iş ekleyelim.

Projeye Sass ekleyelim

Pacel’i çalıştırmaya başladık. Şimdi ona bazı işler ekleyerek çalışmasını görelim. İlk olarak CSS önderleyicilerden biri olan Sass ekleyelim.

Sass eklemek için önce projeye node-sass paketini eklemeliyiz. Daha önce genel olarak kurdu iseniz bu adımı geçebilirisiniz. Kurmayanlar için

npm install node-sass

veya yarn için

yarn add node-sass

paketi ekleyelim. Bir tane sass dosyası ekleyelim. style.sass

body
  margin: 0
  padding: 0

ul
  list-style: none
  display: flex

  li
    flex: 1 0 auto

    a
      text-decoration: none

Bu sass dosyasını index.js‘e ekleyelim. Parcel’in dosyanızı derlemesi çin index.js‘e eklemeniz gerektiğini unutmayın.

index.js

import './assets/sass/style.sass';

Tekrar parcel’i çalıştıralım.

npm run start

Parcel kodumuzu derleyip aşağıdaki gib bir sonuç verecektir. Ayrıca dist kalsörüne de pacell.css dosyasını ekleyecektir.

parceljs sass eklemek

ES6 import kullanımı

Parcel ES6 import ve CommonJs require kullanımlarını destekliyor. Biz burada ES6 import kullanarak sayfamıza dışardan bir js dosyası ekleyelim.

veri.js

export const detay = {
     adSoyad: "Fatih Hayrioğlu",
     sirket: "zingat.com",
     gorev: "Arayüz Geliştirici"
}

Bu dosyayı index.js içinde çekip html içine yazalım.

index.js

import './assets/sass/style.sass';
import { detay } from './veri';

let bilgi = `Benim adım ${detay.adSoyad} ${detay.sirket} şirketinde ${detay.gorev} görevinde çalışıyorum.`;

document.getElementById('icerik').innerHTML = bilgi;

sonuç aşağıdaki gibi görünecektir.

parceljs es6 import denemesi sonucu

Projeyi yayına alma

Projelerimiz yayına almak için package.json dosyasına bir satır daha eklemek gerekiyor.

"build": "parcel build index.js"

bu kodu çalıştırdığımızda parcel bize dist klasörü içinde yayına çıkacak bir dosyaları hazırlar.

parcel build index.js -d yayin/ciktisi

kodu ile de dist‘ten farklı bir klasöre de çıktı alabiliriz.

Sonuç

Bu denemeden sonra şunu söyliyebilirim ki Parcel ufak ve orta çaplı projelerde çok güzel iş görür. Ancak büyük bir projede nasıl olur bilemedim. Benim tahminim büyük projeler için biraz erken. Parcel çok hızlı bir şekilde gelişiyor. Birkaç gün önce 1.5 sürümü çıktı. Yakın bir gelecekte tüm paketleme ihtiyaçlarımızı tek başına karşılayan bir çözüm olabilir.

Hızlı gelişen araçların takibi zor. Ancak Parcel gibi yeni araçlar sayesinde zamanla bu işlerin basitleşeceğini düşünüyorum.

Makalenin başında Parcel’in temel özelliklerini belirttikten sonra bunlar vaatler gerçekliğini uygulama yaptıkça göreceğiz demiştim. İlk uygulama sonunda vaatleri tek tek incelersek:

  • Hızlı bir derleme basit bir projede sonuçlar hızlı ama büyük projede test etmek gerek.
  • Tüm paket ihtiyaçları için hızlı ve kolay çözüm Bu proje için evet ama büyük projelerde durum ne olur bakacağız.
  • Otomatik dönüştürme. Babel, PostCSS ve PostHTML Bu projede kullanmadık.
  • Sıfır yapılandırma ile kod bloklarına ayırma imkanı Bu özellik süper.
  • Modüle özel güncelleme (Hot module replacement) Güzel çalışıyor. Proje küçük olduğu için hızlı ancak proje büyüyünce ne olur bakmak lazım.
  • Kolay hata ayıklama imkanı. Webpack’e göre daha açıklayıcı hataları var.

Kaynak kodlarına https://github.com/fatihhayri/parcel-ikinci-deneme buradan erişebilirsiniz.

Kalın sağlıcakla.

## Kaynaklar

Kod yazarken mümkün olduğu kadar hatasız kod üretmek isteriz. Ancak bu işin kaçınılmaz sonucudur hatalar. Hatasız kod olmaz. Amaç en az hata çıkaracak kod yazmak ve bunu sağlayacak süreçleri oturtmaktır.

Bu süreçlerin ilk başı kodu yazarken hataları ayıklamaktan geçer. Bunun için yazılan kod parçalarına linter, yapılan işe linting denir. Türkçe tam karşılığını bulamadım. Biz size burada Sublime Text’e linter nasıl kurulur ve çalıştırılır onu göstereceğiz.

Linter nedir?

Linter, kodu stil veya programlama hataları için kontrol eden küçük programcıklardır. JavaScript, CSS, HTML, Python vb. gibi birçok dil için kullanılabilir. Örnek olarak ESlint, JSLint, CSSLint, JSHint, Pylint verilebilir.

Biçimlendirme tutarsızlıklarını, kodlama standartlarını, belirli kuralları ve bazı mantıksal hataları düzeltmek için linter kullanılır.

Sublime Text’e Linter eklenmesi

Sublime Text’e linter eklemek için SublimeLinter kurmak gerekiyor. SublimeLinter; linter kütüphanelerini Sublime Text üzerinde çalıştırmamızı sağlayan anaçatıdır.

SublimeLinter’ı Sublime Text Paket Kontrol (Package Control) yardımıyla kolayca kurabiliriz.

  • Komut penceresini açalım (cmd+shift+p Mac OS, ctrl+shift+p Linux/Windows).
  • install yazın gelen listeden listeden Package Control: Install Package seçin. Tıkladıktan sonra tepki süresi 2-3 saniyeyi bulabilir.
  • Kullanılabilir paket listesinden SublimeLinter seçin.
  • Birkaç saniye sonra yükleme işlemi başlayacak ve Sublimelinter yüklenecektir.
  • Yüklendi mesajı geldikten sonra Sublime Text’i kapatıp açın.

Linter eklentileri eklemek

SublimeLinter ekledikten sonra sıra linter eklentilerini eklemeye geldi. SublimeLinter’ın desteklediği linter eklentileri listesine https://github.com/SublimeLinter bu bağlantıdan erişebilirisiniz. Bunların dışında bir çok eklentiye Sublime Text paket yöneticisinden erişebilirsiniz.

Ben bu makalede size javascript hatalarını yaklamak için kullanılan ESLint eklentisinin kurulumunu ve çalışmasını göstereeceğim. Javascript hatalarını yakalamak için birden fazla lint eklenetisi vardır. ESLint, JSLint, ve JSHint. Son zamanlarda ESLint popülerlik kazandı. ESLint’in geliştiricisi Nicholas C. Zakas. ESLint dokümantasyonu da gayet başarılı.

Sublime Text’e ESLint eklenmesi

1.adım : ESLint’i yüklemek için ilk başta bilgisayarımıza ESLint’i global olarak yüklememiz gerekiyor.

npm install -g eslint

İsterseniz proje bazlı da ekleyebilirsiniz.

2.adım : ESLint yapılandırma dosyasını oluşturmalıyız. Projemizin ana dizininde .eslintrc isminde bir dosya oluşturmalıyız. Kendi yapılandırma ayarlarımızı da yapabiliriz veya hazır yapılandırma dosyasını kullanıp üzerine ekleme yapabiliriz. Biz zingat’da airbnb’nin yapılandırma dosyasının üzerine kurduk .eslintrc dosyasını.

Başka örnek alınacak kodlar da var ama biz projede airbnb’kini kullandığımız için için onu örnek vereyim. Kullanacağımız yapılandırma dosyasının kodunu indirip

npm install --save-dev eslint-config-airbnb-base [email protected]^#.#.# [email protected]^#.#.#

terminalden yazıp paketi indirelim. Sonra .eslintrc dosyası şöyle olur.

{
  "extends": ["airbnb-base"]
}

3.adım : Sublime Text pkaet yönetiminden ESLint paketini yükleyelim.

  • Komut penceresini açalım (cmd+shift+p Mac OS, ctrl+shift+p Linux/Windows).
  • install yazın gelen listeden Package Control: Install Package seçin. Tıkladıktan sonra tepki süresi 2-3 saniyeyi bulabilir.
  • sublimelinter-contrib-eslint aratalım. Gelen seçeneği yükleyelim.
  • Yüklendi mesajı geldikten sonra Sublime Text’i kapatıp açın.

Artık Sublime Text javascript hatalarını göstermeye başladı.

Örnek olması için javascript dosyasında 1431. satırın sonundaki noktalı virgülü sildim. 1-2 sn sonra Sublime Text hatayı gösterdi.

Sublime Text linter

Sağda satır sayısı yanında kırmızı yuvarlak bir uyarı, kod satırının içinde de kırmızı alt çizgi ile bie hatayı gösteriyor Sublime Text.

Sublime Text linter statusbar

Alt durum çubuğunda hatanın satır ve kolonu belirtiliyor. Ayrıca hatayı nasıl düzelteceğimizin bilgisini veriyor. (Bende kurulu pretier eklentisi mi yapıyor bunu emin olamadım)

Sublime Text linter console

Sublime text konsolunda hatalar ve ikazlar liste halinde gösteriliyor. Uzun satırlı dosyalarda hataların takibi zorlaşıyor. Sublime Text konsolda hepsinin listesini görmek güzel oluyor.

Benzer şekilde CSS ve HTML hatalarımızı da görebiliriz.

Sonuç

Kod yazarken hataları görmek ve daha derlenmeden, tarayıcıya gitmeden düzeltmek süper bir kolaylık.

Bizim gibi mevcut büyük bir projeniz varsa linter eklemek mevcut kodları düzeltmek için sıkıntılı oluyor. Biraz zaman alsa da linter hatalarını düzelttikten sonra sonuç güzel oluyor. Büyük projelerde ESLint yapılandırma dosyası biraz kabarabiliyor. ESLint dosyası hakkında daha detaylı bilgiyi belki Doğan Öztürk yazar.

Hatasız kod yazmak dileğiyle. Hadi kalın sağlıcakla.

Kaynaklar

zingat.com’da yaklaşık 4-5 aydır jquery yerine javascript ile yazmaya başladık. Çalışma arkadaşlarımın da yardımıyla jQuery’yi siteden çıkarma hedefimize doğru ilerliyoruz. Bu süreçte gördüklerimi sizlerle paylaşıyorum. Bu makalemde javascript ile elementlere nasıl stil atarız ve atanmış stil bilgisini nasıl okuruz sorularının cevabını bulacağız.

Hesaplanan değer (Computed values) ve çözümlenmiş değer (resolved values) kavramları

Değerler konusunda CSS’de iki farklı anlayış vardır.

1- Hesaplanan değerler: Bir elemana tanımlanmış değerler ve kalıtsal gelen değerlerin hepsinin olduğu değerlere denir. Örneğin line-height: 1.3em veya font-size: 120%.

2- Çözümlenmiş değerler: Elemana uygulanmış değerlerin son halidir. Yukarıdaki örneklerde line-height: 1.3em ve font-size: 120% değerleri göreceli değerlerdir. Tarayıcı bu değerleri uygulamadan önce mutlak değerlere çevirerek atar. Örneğin line-height: 16px ve font-size: 18px olarak çevirir ve uygular.

Standart oluşturucular başlangıçta getComputedStyle metodu hesaplanan değerleri almak için oluşturdu ancak sonra çözümlenmiş değerlerin alınmasının daha avantajlı olduğuna karar verip değiştirdi. Bundan dolayıdır ki getComputedStyle metodu çözümlenmiş değerleri bize verir.

Stilleri okumak

Stilleri okumak için getComputedStyle metodunu kullanırız.

var stiller = window.getComputedStyle(elem);

Bu elemana atanmış tüm stilleri aldık.

var renk = window.getComputedStyle(elem).color;

Bu kod ile de elemana atanmış renk değerini alırız. Atanmış diğer stilleride aynı şekilde alabiliriz.

var padding = window.getComputedStyle(elem).padding;

Elemanın padding değerini aldık.

Elemente stil atamak

elem.style objesi style özniteliğine karşılık gelen bir nesnedir.

elem.style.color = 'red';

kodu

<div id='deneme' style='color:red'></div>

şeklinde uygulanacaktır.

Dikkat etmemiz gereken bir ayrıntı da birden fazla kelimeden oluşan tanımların CSS ile kebap-case şeklinde birleştirilirken, javascript ile birleştirilirken camelCase şeklinde yazarız. Örneğin background-color tanımını elem.style.backgroundColor şeklinde tanımlarız.

Çoklu stil tanımlamak

Birden fazla stil tanımlamak için cssText özelliğini kullanırız.

elem.style.cssText = 'background-color: red; color: white';

Bu özelliğin şöyle bir dezavantajı var. Mevcut tanımların üzerine yeni stilleri yazar, yeni ekleme yapmaz. Bunu çözmek için bir kaç yöntem var. Çoklu tanım için yarımcı bir metot yazmak, ikincisi ise global bir css dosyasını oluşturup ona tanımlamak.

Kalın sağlıcakla.

Kaynaklar

Normal şartlarda kodlarımızın küçük bloklar halinde farklı dosyalarda olduğu bir dünya düşünürken genelde projelerimizde 2000, 3000 satırlık kod blokları olur.

Hayaller Hawaii hayatlar Sanayii:)

Uzun sayfalarda editörde belli bloklar arasında yukarı aşağı gezinmek sorun oluyor. Bu durumu çözecek bir özellik editör yerimi (Bookmarking) özelliği.

sublime text bookmarking

Yerimi ekleme kısayolu (MacOS için) kntrl + shift + r tekrar bastığınız da ise kaldırıyor.

sublime text bookmarking

Yerimim eklendiğini satır numarası yazan yerin solunda yerimi ikonu çıkıyor. Yerimleri arasınra gezinmek için kısayol olarak fn + F2 kullanıyoruz. Bu tuş kombinasyonuna her bastığımızda yerimleri arasında geziniyoruz.

CSS’de Uyumlu web geliştirmeleri yaparken normal kod ile media tanımları arasında gezinirken de yardımcı olur.

Kalın sağlıcakla.

Kaynaklar