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.

https://t.co/pxYirymXug'dan Fatih Hayrioğlu CSS Flex anlatıyor. pic.twitter.com/u8DyNAe3jg

— Bülent Sakarya (@bulentsakarya) 27 Ocak 2018

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.

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.

Ş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

• https://www.sitepoint.com/quick-tip-how-z-index-and-auto-margins-work-in-flexbox/
• https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6
• https://codepen.io/samserif/pen/KdrQaB?editors=1100
• https://codepen.io/goerk/pen/uFkny
• https://codepen.io/samserif/pen/KdrQaB?editors=1100

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.

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.

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

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

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.

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.

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

• https://parceljs.org/
• https://scotch.io/tutorials/a-zero-configuration-module-bundler-meet-parcel?ref=daily
• https://github.com/parcel-bundler/parcel/issues/105
• https://github.com/parcel-bundler/website/pull/38
• https://hackernoon.com/code-splitting-with-parcel-web-app-bundler-fe06cc3a20da
• https://medium.freecodecamp.org/all-you-need-to-know-about-parcel-dbe151b70082
• https://github.com/parcel-bundler/parcel/issues/105

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 eslint@^#.#.# eslint-plugin-import@^#.#.#

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.

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.

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 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

• http://www.sublimelinter.com/en/latest/about.html
• https://eslint.org/
• https://helpx.adobe.com/tr/dreamweaver/using/linting-code.html
• http://aslanbakan.com/tr/blog/sublime-text-3-incelemesi-ve-en-iyi-33-eklenti/
• https://stackoverflow.com/questions/8503559/what-is-linting
• https://www.youtube.com/watch?v=lEtWF3_FR2w