Blog

Planck Keyboard'a Emoji Layer Eklemek

Sat, 13 Mar 2021 00:00:00 GMT

Klavye yapım sürecini buradan okuyabilirsiniz.

Merhaba, yakın zamanda klavyeme emojilerden oluşan bir layer ekledim, bu süreçte karşılaştığım sorun ve uyguladığım çözümden bahsedeceğim.

Klavyede qmk firmware kullandığımdan bir önceki yazıda bahsetmiştim. Qmk dokümanı altında unicode desteğini 3 faklı yöntemle nasıl uygulanacağı anlatılıyor. Ben bunlardan Unicode Map yöntemini tercih ettim.

rules.mk dosyasında unicode map’i açtım. Kullanacağım emojileri unicode_names enum’ına çıkardım.

enum unicode_names {
    // Row 0
    JOY,   // 😂
    SMIL2, // 😅
    SMILE, // 😁
    GRIN,  // 😊
    KISS,  // 😘
    HALO,  // 😇
    PHEW,  // 😌
    CONFU, // 😕
    PENSV, // 😔
    UNAMU, // 😒
    DISAP, // 😞

    // Row 1
    CELE,  // 🙌
    OK,    // 👌
    PRAY,  // 🙏
    CLAP,  // 👏
    THMUP, // 👍

    // Row 2
    EYES,  // 👀
    HUNRD  // 💯
};

Bu seçtiğim emojilerin unicode değerlerini unicode-table üzerinden bulup unicode_map içerisinde eşleştirdim.

const uint32_t PROGMEM unicode_map[] = {
   // Row 0
   [JOY]   = 0X1F602,
   [SMIL2] = 0x1F605,
   [SMILE] = 0x1F601,
   [GRIN]  = 0x1F600,
   [KISS]  = 0x1F618,
   [HALO]  = 0x1F607,
   [PHEW]  = 0x1F60C,
   [CONFU] = 0x1F615,
   [PENSV] = 0x1F614,
   [UNAMU] = 0x1F612,
   [DISAP] = 0x1F61E,

   // Row 1
   [CELE]  = 0x1F64C,
   [OK]    = 0x1F44C,
   [PRAY]  = 0x1F64F,
   [CLAP]  = 0x1F44F,
   [THMUP] = 0x1F44D,

   // Row 2
   [EYES]  = 0x1F440,
   [HUNRD] = 0x1F4AF
};

_EMOJI adında bir layer oluşturup emojileri bu layer’a ekledim. Layer’in son hali aşağıdaki gibi oldu.

İkinci aşamada belirtilen unicode hex input klavyesini ekledim.

Burada karşılaştığım sorun emojileri düzgün ekrana basabilmek için hex inputuna anlık geçip daha sonra diğer input yöntemine dönmekti.

Bunun için yaptığım “hacky” çözüm EMOJI adında bir macro oluşturup bu EMOJI tuşuna basıldığı an, önce ctrl+alt+space ile hex iput switch’ine geçip daha sonra _EMOJI layer’ını aktif etmek, tuştan parmak kaldırıldığında da yeniden ctrl+alt+space ile bir sonraki input source’a geçmek oldu.

case EMOJI:
    if (record->event.pressed) {
        register_code(KC_LCTL);
        register_code(KC_LALT);
        register_code(KC_SPC);
        layer_on(_EMOJI);
        unregister_code(KC_LCTL);
        unregister_code(KC_LALT);
        unregister_code(KC_SPC);
    } else {
        register_code(KC_LCTL);
        register_code(KC_LALT);
        register_code(KC_SPC);
        layer_off(_EMOJI);
        unregister_code(KC_LCTL);
        unregister_code(KC_LALT);
        unregister_code(KC_SPC);
    }
    break;

Böylece emoji layer’ını sorunsuz şekilde kullanmaya başladım. Yukarıda dediğim gibi bu benim “hacky” çözümüm, eğer daha verimli bir çözüm bulmuş ve kullanıyorsanız github‘dan issue veya pr açabilirsiniz.

Planck Keyboard

Mon, 01 Mar 2021 00:00:00 GMT

Merhaba, bu yazıda yukarıdaki planck klavyenin yapım sürecinden bahsedeceğim.

Başlangıç

Yıllardır mekanik klavyelere ilgili birisiyim. Mekanik klavye kullanmaya 2016’da %75 layouta sahip bir model ile başladım, 2018’de %100luk full-size bir mekanik klavyeye geçtim. O dönemde redditteki r/Mechanical Keyboards ve r/olkb subredditlerini yoğun şekilde takip ediyordum. Bir süre sonra ben de yapmaya karar verdim.

Rev 1.0 (2019)

%100 layout, boyut ve ağırlık(1.3kg) anlamında dezavantaj yaratmaya başladığında küçük ve taşınabilir bir klavyeye geçme düşüncem şekillenmeye başlamıştı. Planck klavyeyi gözume kestirdim, nasıl yapıldığını araştırıp klavye için gerekli ekipmanları temin ettim. Kasa için 2mm plexiglass kullandım, switch ve keycap’leri halihazırda kullandığım mekanik klavyeden aldık.

O dönemde elektronik ile ilgi ve alakam sıfır olduğu için elektronik konusunda bilgili arkadaşım Burkay‘dan yardım istedim. Beraber ilk custom build’ımızı tamamladık. Space tuşundan anlaşılacağı üzere Planck MIT layout tercih ederek 2u büyüklüğünde space kullandık.

Klavyeyi kullanmaya başladım, hatta çantamda taşıyabilmek için bir taşıma kesesi diktim. Kısa bir süre sonra bazı tuşlarda temassızlık ve kasanın plate kısmında çatlamalar oldu.

Ve ben klavyeyi rafa kaldırdım.

(2020)

2020 içerisinde klavyeyi düzeltmeyi ve tekrar kullanmaya başlamayı çok istesem de pandemi nedeniyle o motivasyonu yakalayamadım.

Rev 2.0 (2021)

Aslında 2021 de 2020’den çok farklı ilerlemiyordu ancak Seyfeddin Bassarac‘ın twitch’teki mekanik klavye yayını ve Fatih Arslan‘ın mekanik klavyeye geçisi motivasyonumu yükseltti.

2019 sonunda figma üzerinde yeni bir kasa çizip bunu 3mm’lik plexiglass ile kestirmiştim.

Kesimden sonra fark ettim ki kayma olmuş, figma bu iş için doğru araç olmayabilir. Detay

Yeni plate 3mm kalınlığında olduğundan switchleri sabit tutabilmek için sıcak silikon ile yapıştırdım, diyotları ve sütunları lehimledim. Bu sefer önceki buildden farklı olarak Planck Grid layout tercih ettim. 1 tane 2u space yerinde 2 tane 1u space tuşu koydum.

Switch olarak eski buildi parçalayıp çoğunlukla aynı switchlerden devam ettim. 43 adet SteelSeries QX1 Linear, Arda Kılıçdağı‘nın 2019’da test için yolladığı 4 adet Gateron Brown (space ve layer tuşları) ve 1 adet Zealios V2 (backspace tuşu).

Daha sonra satırları ve sütunları Pro Micro’ya bağlayıp tüm tuşların çalışıp çalışmadığını kontol ettim. Her tuşun çalıştığından emin olduktan sonra 6li led şeriti bağlayıp kasayı kapattım.

Yazılım

Yazılım olarak Qmk Firmware kullandım, açık kaynak olarak GitHub’ıma koydum. Glosso

Şu an kullandığım keymap’e buradan ulaşabilirsiniz.

Yanlış hatırlamıyorsam Pro Micro’nun belleği 20 civarinda layer’a kadar yetiyor. Hangi tuşa başıldığında ne yapması gerektiğini kod üzerinden belirlediğiniz için yapılabileceklerin sınırı hayal gücünüz aslında. Örnek

Kapanış

İlk görselle bu görsel arasında bazı tuslar farklı. Bunun nedeni tamamen ergonomik olarak bu düzenin daha rahat hissettirmesi.

Genel olarak planck kullanmaktan memnunum. İlk seferde olduğu gibi standart layout ve ortholinear layout arasında geçişte zorlanmadım. Rahatça bu klavye ve laptop klavyesi arasında geçiş yapabiliyorum. Şimdilik burada da qwerty layout kullanmaya devam ediyorum.

Seller Center Optimizasyon Günlükleri 1: UI Kütüphanesi

Fri, 03 Jul 2020 00:00:00 GMT

Yazının orijinaline buradan ulaşabilirsiniz.

Bu seride Trendyol Seller Center üzerinde yaptığımız çeşitli optimizasyonları derleyeceğiz. İlk yazı konusu olarak geliştirdiğimiz UI kütüphanesinde yaptığımız iyileştirmelerden bahsettik. Keyifli okumalar.

Seller Center, Trendyol içerisinde satış yapan işletmelerin ürünlerini yükleyip düzenleyebildiği, kampanyalar oluşturabildiği, sipariş süreçlerinin bulunduğu, finans metriklerinin takibini yapabildiği çok boyutlu bir platform.

UI Kütüphanesi oluşturulması

2020 başında frontend altyapımızı monolith’ten micro frontend’e taşıdık. Geçiş süreci ile ilgili yazıya aşağıdan ulaşabilirsiniz.

Micro Frontends: How It Changed Our Development Process

Micro frontend yapısına geçmeden önce komponentler monolith uygulama içerisinde components/ klasörü altında bulunuyordu. Geçiş sırasında bu komponentleri ayrı bir projeye çıkarma işine başladık. Ayrı projeye çıkarma sürecinde dokümante edebilmek icin Storybook tercih ettik. Storybook içerisindeki knobs eklentisi sayesinde komponentlerin aldığı prop’ları dinamik olarak değiştirerek davranışlarını rahatlıkla gözlemleyebilir hale geldik. Aşağıda örnek bir komponenti ve aldığı prop’larını görebilirsiniz.

Seller Center UI Kütüphanesi

Trendyol’da testin önemi çok yüksek, biz de her komponentin unit ve snapshot testleri olmasına özen göstererek geliştirmelerimizi yaptık. Günün sonunda 30’un üzerinde komponenti taşıdık. Dosya yapısında tutarlılık sağlamak icin aşağıdaki düzeni tüm komponentlerde uyguladık.

Dosya yapısı

Bu noktaya kadar her şey çok güzel gelmişti ancak bir sorun vardı, bundle size.

Büyük Bağımlılıkların Bundle içerisinden Çıkarılması

UI kütüphanesi içerisinde rich text editor, drag and drop, date picker ve input mask gibi büyük paketler içeriyordu. Bu paketler hiç kullanılmayacak bile olsa bundle içerisinde geliyordu. Optimizasyon işine buradan basladık. Paketleri bundle anında ana bundle’dan çıkararak kullanılacağı app içerisinde yüklenmesine karar verdik. Bu optimizasyon sayesinde bundle size’ımız yaklaşık 405kb kadar küçüldü. Tekil bakıldığında boyutu makul gözüken paketler bir araya geldiğinde ciddi yük bindirebiliyor.

Moment.js Yerine Day.js Kullanılması

Tarih/saat dönüşümleri her uygulamada yapılan bir işlem. Micro frontend öncesinde biz de bu dönüşümler için moment.js kullanıyorduk. Moment.js çok başarılı olmasına rağmen boyut anlamında bir o kadar başı dertte olan bir kütüphane. UI kütüphanesi oluşturmaya başladığımızda burada da bir optimizasyon yapmak istedik. Moment.js kullandığımız yerleri neredeyse aynı api’a sahip ama çok daha makul boyutlarda olan day.js ile değiştirmeye başladık. Bu geçiş sonrasında bundle size’ımda yaklaşık 270kb’lık bir küçülme yaşandı.

Bu noktada %50 oranında iyileştirme sağladık ancak yine de 650kb civarında bir paket yükletmemiz gerekiyordu. Micro frontend altınaki bazı uygulamalar sadece birkaç komponente ihtiyaç duyuyordu. Biz ise 30’un üzerinde komponenti import etmesini istiyorduk.

Komponentlerin Bağımsız Paketlenmesi

Nasıl daha iyi yapabiliriz diye düşündük ve bundle anında her komponentin bağımsız olarak paketlenmesinin güzel bir optimizasyon olabileceğine karar verdik. Komponentleri stillendirirken scoped css tercih ettik. Bunun avantajını bundle anında da kullanarak css’leri ayrı dosyalarda tutmayıp komponentlerin içerisinde bıraktık. Böylece örneğin ScButton.js dosyası tek başına çalışabilir hale geldi. Her komponentin ayrı dosyada paketlenmiş olması bu komponentleri çağırırken ufak bir değişiklik yapmamızı gerektirdi. Artık herhangi bir komponenti import etmek istediğimizde tüm bundle içerisinden değil de komponentin bundle’ını import etmemiz gerekti.

import

Örnek Uygulama

Micro frontend mimarisini üzerinde çalışan 15’in üzerinde micro-app’imiz var. Bunlardan account-app’i inceleyecek olursak; giriş, kayıt ol ve parola değiştirme ekranları olan ufak bir micro-app. Bu uygulama UI kütüphanemizden sadece button ve input komponentlerini kullanıyor. Aşağıdaki grafikte yapılan iyileştirmeler sonucunca bu iki komponentin account-app’ine olan maliyetini görebilirsiniz.

bundle size

Sonuç

Büyük paketlerin çıkarılması ve Day.js geçişi herkese önerebileceğim iyileştirmeler olacaktır. Komponentlerin bağımsız paketlenmesinde ise durum biraz farklı. Webpack, Rollup gibi modern bundler’lar benzer tree-shaking yani dead code elimination özelliklerine sahipler ve yeterli optimizasyonu sağlıyorlar. Bizim tercihimiz ise bu adımı micro-app’ler içerisinde değil de sorunun kaynağında çözmek oldu. Bu yöntem herkes için doğru olmayabilir. Ama böyle de bir çözüm olduğundan bahsetmek istedim.

Umarım okurken keyif almışsınızdır. Görüşmek üzere :)

VSCode: ESLint, Stylelint ve Prettier'ı sorunsuz kullanmak

Mon, 10 Dec 2018 00:00:00 GMT

Kod yazan her insanın kendine özgü bir yazım stili var. Bazı diller farklılıkların önüne geçebilmek için kendi style guidelarına göre formatterlara sahipler. Go(gofmt) ve ReasonML(refmt) bunlara örnek gösterilebilir. Javascript dilinde bu tarz bir çözüm dil ile birlikte gelmiyor, bunun için çeşitli yardımcı paketler kullanmamız gerekmekte. Prettier bu konuda en popüler çözüm olarak göze çarpıyor. Ancak daha önce bu konuda uğraşanlar da anlayacaktır ki projede hem linter hem de formatterı aynı anda kullanmak istersek bazı sorunlar ortaya çıkabiliyor. Örneğin linterın kuralları ile formatterın kuralları birbirini ezip kodu okunamaz hale getirebiliyor. VSCode içerisinde bu paketlerin uyumlu çalışmasını sağlamak için yapmamız gereken birkaç şey var.

yarn add --dev prettier-eslint prettier-eslint-cli prettier-stylelint

VSCode içerisinde entegrasyon için bu 3 aracın eklentisini yüklememiz gerek. Eklentiler;

Ardından projemiz içerisinde .vscode/settings.json içerisine şu ayarları eklemeliyiz.

// .vscode/settings.json
{
  "prettier.eslintIntegration": true,
  "prettier.stylelintIntegration": true,
  "eslint.autoFixOnSave": false,
  "editor.formatOnSave": true
}

.eslintrc.json dosyasına prettierın ruleslarını kullanacağımızı belirtiyoruz.

// .eslintrc.json
{
  "parser": "babel-eslint",
  "extends": ["prettier", "react-app", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"],
    "jsx-a11y/href-no-hash": [0],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
  }
}

package.json içersine bu scriptleri ekledikten sonra işlem tamamdır.

// package.json
{
  "scripts": {
    "fix-code": "prettier-eslint --write 'source/**/*.{js,jsx}' ",
    "fix-styles": "prettier-stylelint --write 'source/**/*.{css,scss}' "
  }
}

Artık projede kaç kişi çalışıyorsa çalışın, codebase tek elden çıkmış şekilde olacak. Kod okunabilirliği açısından önemli detaylardan birini halletmiş olduk.

Dilerseniz husky tarzı pre-commit araçları kullanarak her commit atıldığında otomatik tüm codebasei formatlayabilirsiniz.

// .lintstagedrc
{
  "*.js": ["yarn fix-code", "git add"],
  "*.scss": ["yarn fix-styles", "git add"]
}

GüçlendirMac

Wed, 25 Oct 2017 00:00:00 GMT

Son zamanlarda çevremdeki insanlar kullandığım kısa yollar, uygulamalar vs. hakkında sorular sormaya başlayınca bu yazı kafamda kendi kendini yazmaya başlamıştı. Bende geçtim bilgisayarın başına, bilgisayarımı hangi ayarlarla, hangi uygulamalarla kullanıyorum hepsini teker teker anlattım. 😄

Başlamadan önce Adem Ilter‘in yazısını da okumanızı öneririm.

BasitleştirMac

Öncelikle hangi cihazı kullanıyorum; elimde 2 yıldır Early 2015 bir MacBook Air var. Tabi ki 2 yıldır her gün kullandığım bir işletim sistemini daha kullanışlı hale getirecek bazı geliştirmeler yaptım.

Bu anlatacağım ayarlar maçOS 10.13 High Sierra üzerinde kullanılıyor olup yıllar içerisinde yazıdaki anlattığım bir ayarın yeri değişmiş olabilir.

Desktop & Dock

Bilgisayarı çoğunlukla mobil olarak kullandığım için trackpadi çok fazla kullanıyorum, üst üste birden fazla windowun bulunması ve onların arasında kaybolmak beni yormaya başladıktan sonra çoklu desktop kullanımına geçtim. İlk desktopta çoğunlukla Safari ve finderı kullanıyorum, ikinci desktopta VSCode ve iTerm2 açık oluyor ve geliştirme yapacağımda ikinci desktopa kayıyorum. Üçüncü desktopta ise Spotify her zaman açık oluyor.

KISS (Keep It Simple, Stupid)

Desktopta klasör ve dosya barındırmayı sevmediğim için tüm dosyalarım belli dizinlerin içerisinde. Bu konuya yazının devamında değineceğim.

Dockta ise her gün açtığım uygulamaları sabitlemiş durumdayım. Diğer uygulamaları açmak için çoğunlukla spotlight (cmd+space) kullanıyorum.

Launchpad

Launchpadde de 3 sayfa kullanıyorum. Her şeyin tek sayfada karmaşık olmasının yerine kategorilerine göre ayrı sayfalarda olmasından yanayım. İlk sayfayı varsayılan gelen haliyle tutmak gibi ilginç bir alışkanlığım var, telefonda da aynısı söz konusu. İkinci sayfada günlük olarak kullandığım yardımcı araçlar yer alıyor, üçüncü sayfada da development ile alakalı araçlar yer alıyor.

Kullandığım uygulamaları yazının devamında tek tek açıklayacağım, özellikle ikinci sayfadakileri.

Finder

Gelelim findera. Buraya kadar pek fazla bir özelleştirme söz konusu değildi ama iş findera gelince her gün ama her gün kullandığım bir aracı daha kullanışlı hale getirmem gerekiyordu.

Finder ikonuna bastığımda karşıma gelen ekran

Başta biraz renkli ve karmaşık gelebilir, ancak sadelik karmaşıklığın doruğudur diye bir söz var.

Öncelikle git kullanan projeleri (yani hepsini) dev isimli bir klasöre topladım ve finderın yeni pencere açılma pathini dev olarak ayarladım.

Ama yukarıdan da göreceğiniz üzere kendi projelerim, iş projeleri, okumak/incelemek için indirdiğim projeler derken dev pathi karmakarışık bir hal aldı. Neredeyse 1 buçuk yıldır kullanmadığım ve “ne işe yarayacak ki” dediğim etiketler imdadıma koştu.

5 ana başlık belirledim, bunları yanda görüyorsunuz. dev pathindeki her projeyi bu etiketler ile etiketledim. Sadece dev pathi ile kalmadı tabi bu. Örneğin google drive klasörümde bulunan bir kitabı da Read etiketiyle etiketlediğim zaman finderdaki sidebardan sadece Read kısmına basarak erişebiliyorum, hangi pathte olduğu önemini yitiriyor.

Örneğin Review’a tıkladığımda etiketlediğim tüm projeleri görebiliyorum

Dosyalarımı yedeklemek için Google Drive kullanıyorum, bir süre önce Backup and Sync from Google ismine dönüşen program ile artık bilgisayardaki herhangi bir pathi de yedekleyebiliyorsunuz.

Drive klasörümde kitaplar, okuldaki projeleri içeren klasör, sunumlar, ekran görüntüleri ve sketch dosyalarını içen klasörler var. Ekran görüntüleri dikkatinizi çekmiş olabilir. Evet macteki ekran görüntülerini drive içerisindeki Screenshots isimli klasörde tutuyorum. Bu sayede bilgisayarı açamadığım durumda bile telefonumdan ekran görüntülerine erişebiliyorum.

Downloads klasörümü de google driveda tutuyorum. Burası da dağınık değil. İndirdiğim dosya saklamaya değer ise bu klasörlerden birine giriyor, değil ise zaten cöpü boyluyor.

Open in code adında ufak bir eklenti de kullanıyorum finder içerisinde. Bu ikona tıkladığımda o an bulunduğum pathi VSCode ile açıyor.

Apps

Kullandığım yardımcı araçları anlatmaya başlayabilirim artık. 😄

VLC, Shazam gibi bilinenler haricinde diğerlerini açıklayacağım.

Backup and Sync from Google: Google Drive uygulamasının yeni adı.

KeepingYouAwake: Caffeine isimli bilgisayarın uykuya dalmasını engelleyen uygulamanın open source muadili.

4K Video Downloader: Youtubedan video indirmek için kullanıdığım araç.

Mos: Yakın zamanda klavye ve mouse alarak evde maci masaüstü gibi kullanmaya başladım ancak ben scroll directionı natural kullandığım için mouse kullanırken reverse scrolling yapmam gerekiyordu. Ayrıca magic mouse olmadığı için smooth scrolling de yapamıyordum. Arayışlarım sonucunda bu uygulama ile iki sorunu da tek seferde çözdüm.

Kap: kısa gifler hazırlamak için kullandığım menübar uygulaması.

App Cleaner: Birkaç mb olmasına rağmen kaldırmak istediğiniz uygulamanın işletim sistemindeki tüm izlerini silmenize yardımcı oluyor.

Itsycal: Ufak, sade bir takvim uygulaması.

Shiftit: Gün içinde en fazla kullandığım uygulama olabilir. ctrl+alt+cmd ile c / m / - /+/ sağ / sol / yukarı / aşağı gibi kısayolları olan pencereleri hizalamanıza yarayan efsane bir open source uygulama.

ShowKeys: Hangi tuşa bastığınızı büyük bir şekilde konumlandırdığınız pencerede gösteren uygulama.

Spotify Notifications: Ben spotifyı 3. desktopta kullandığım için ismini bilmediğim bir şarkıda git gel toplam 4 defa kaydırma yapmam gerekiyordu. Bu yüzden githubda bu uygulamayı buldum, her yeni şarkı başladığında bildirim olarak gösteriyor. (eskiden spotify içerisinde olan bu özellik daha sonra kaldırılmış.)

Terminal

Terminali full screen kullanan kişilerdenim, İkinci desktopta iTerm2 her zaman açık halde bekler. Mac kullananların bildiği üzere full screen appler yeni bir desktop olarak açılıyor. Ama hem ikinci desktopta hem de full screen nasıl kullanılıyor diye sormuş olabilirsiniz, iTerm2nin ayarlarında native full screen windows tikini kaldırdığınızda artık bulunduğunuz desktop içinde full screen kullanabilirsiniz.

Tabi her seferinde -cmd+tab olmadığını varsayarsak- docktaki ikona tıklamak zahmetli olacağı için Pointer menüsü altından iTerm2’ye bir hotkey atadım (ctrl+t). Bu sayede hangi desktopta olursam olayım ctrl+t’ye basarak terminale geçebiliyorum. Tabi bir sorun daha var, mac klavyelerinde ctrl tuşu çok saçma bir yerde. Ben bu tuşu caps lock ile değiştirdim. Bu sayede serçe parmağımı saçma sapan bükmeden rahatlıkla ctrl tuşuna basabiliyorum.

Githubdan çektiğim dosyaları dev pathi altına çektiğimi söylemiştim. Ama terminalde cd yaptığım zaman ~/ pathine dönüyordu. Bunun için ve başka şeyler için de birkaç alias yazmam gerekti.

En alttaki png ve jpg aliasları aldığım screenshotı hangi dosya formatında kaydedeceğimi belirlemek için kullanıyorum. Örneğin twitterda png yerine jpg resim yüklüyorum çünkü png bazen patlıyor.

Şimdilik aklıma gelenler bunlar, aklıma geldikçe eklemeler düzenlemeler yapmaya çalışacağım. Sizin de bu tarzda iyileştirmeleriniz varsa paylaşmaktan çekinmeyin.

iPhone X ve Garip Tasarımının Nedeni

Sat, 16 Sep 2017 00:00:00 GMT

Dün twitterda vakit geçirirken Yasir Buğra Eryılmaz’ın floodun gördükten sonra bunu görselleştirmek istedim.

Flooda aşağıdan ulaşabilirsiniz.

Flood

Yıllar boyunca birçok yerde telefon ikonu için aşağıdaki (solda) iPhone ikonu kullanıldı. Ancak son yıllarda akıllı telefonlarda çerçevelerin kapladığı alanı azaltma yarışına girildi. Apple da buna kayıtsız kalamadı ki 12 eylül 2017’de düzenlenen Keynote’unda iPhone X adında radikal tasarım değişikliklerine sahip bir cihaz tanıttı.

Tim Cook’un iPhone X’i tanıtırken söylediklerinden anlaşılacağı üzere yeni iPhone tasarımını uzun bir süre göreceğiz.

The first iPhone revolutionized a decade of technology and change the world in the process. Now 10 years later, it is only fitting that we are here in this place on this day to reveal a product that will set the path for technology for the next decade.

Yıllardır gördüğümüz iPhone ikonu (solda), ve önümüzdeki günlerde sıkça görmeye başlayacağımız iPhone ikonu (sağda)

Son yıllarda çıkan android telefonların genel görünümü aşağıdaki şekilde (solda). İki farklı ikona bakıldığında hangisinin iPhone olduğu rahatlıkla seçilebiliyor. Apple’ın da bu yeni-garip tasarımda başarmak istediği buydu ve başaracakmış gibi gözüküyor.

Son yıllarda android telefonların genel görünümü (solda), yeni iPhone ikonu (sağda)

Edit: The Verge’de de bu konuyla ilgili bir yazı yazılmış. Link