Özkan ÖZSERT

Welcome to Jekyll!

2020-07-01T13:49:47+00:00

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

Jekyll requires blog post files to be named according to the following format:

YEAR-MONTH-DAY-title.MARKUP

Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.

#3 - Keşif

2018-09-09T16:20:00+00:00

Web sitenizde zıplayan kaydırma

Bu yazıda William Lim, scroll bouncing etkisini ve farklı tarayıcılarda nasıl çalıştığını açıklamış. Özellikle ios tabanlı tarayıcılarda zıplamayı önlemek için kullanılabilecek bir kaç farklı trickden bahsetmiş.

CSS hap yazısı : CSS Scroll Snap

Murat Doğan arkadaşımız bizlere CSS’in yeni özelliği olan Scroll Snapin sunduğu nimetlerinden bahsetmiş. Sonraki bölümlerde bu özelliği kullanarak bir kaç örnek yapabilirim. Çünkü ilgi çekici :)

Meetup

Geçmiş Meetup

Yazılımcılar için uzaktan çalışma fırsatları

Devnot Yazılımcı Buluşmaları adına Uğur Umutluoğlu hocamızın düzenlediği harika bir etkinlikti. Konuşmacı olan Ahmet KAKICI ve Erman KÜPLÜ uzaktan çalışmak ile ilgili bizlerle güzel deneyimlerini paylaştılar.

Etkinlik sırasında canlı yayın için video alınmış. İlgili videoya başlıktan ulaşabilirsiniz

Gelecek Meetuplar

Flutter Study Jam

Google’ın native uygulamalar için ürettiği Flutter hakkında bilgi sahibi olmak için GDG İstanbul’un düzenlediği güzel bir etkinlik.

Geleceğin Teknolojisi Blazor ve VSTS Uygulamaları

VSTS ve Blazor uygulamaları hakkında teknik bilgi sahibi olmak için güzel bir etkinlik

#kenardakalsin

2000 Slack Chat Grubu ve Toplulukları

Siteye girdiğimizde düzenli bir şekilde kategorilendirilmiş fazlaca slack grubu mevcut. Kısacası herkes için slack grubu var burada.

Hatta kategorilendirme şekli çok iyimiş, şöyle ki:

Product Talks - 186
IT Talks - 278
Programming Talks - 251
Marketing Talks - 35
Finance Talks - 145
Hardware Talks - 42
Miscellaneous - 326
Local Talks - 730

Renk Arama Motoru

Renk için arama motoru yapmışlar. Örnek olarak arama kutusuna “spring” yazınca bahar ile alakalı görselleri Google’dan çekerek, görseldeki yoğun olan rengi HEX kodu olarak bize veriyor.

Chrome Eklentileri

🕸️ Loom - Ekran kaydedici (webcam ile)

️️️🕸️ Grammarly - İngilizce gramer düzeltici

#2 - Keşif

2018-09-01T17:20:00+00:00

Front-End-Performance-Checklist

frontendchecklist.io kurucusu olduğu thedaviddias‘ın yeni derlediği fakat henüz web sitesinden yayına almadığı; web site performansına yönelik güncel github reposu.

CSS Shape Editors

Firefox 62’de image’in shape-outside’ı ile oynamaya imkan tanıyan sahip olduğu inspect modu sayesinde görselle yanaşık yazılarda okunmasını kolaylaştırmaya ve yerleşimini oynamanaza olanak sağlayan dahili plugin.

Henüz Chrome’da yok fakat onun için ek plugin mevcutmuş. Chris, Firefox’a katkıda bulunan Razvan Caliman’a teşekkürde bulunmuş.

Hali hazırda bulunan online shape generator için de Clippy adında bir tool mevcut. Bilmeyenler deneyebilir, clip path oluşturmak için harika bir tooldur.

Progressive Tooling

Sayfa performansını iyileştirmek için kullanılabilecek, üçüncü parti araçların listesinin bulunduğu web sitesi. GoogleChromeLabs topluluğu tarafından yapılmış.

Make My Persona

Kendi personalarınızı oluşturabileceğiniz Hubspot’un muazzam persona toolkiti. Gerçekten muazzam, deneyin :)

Ufak tefek

Slugify

Lazım oldukça açıp kullandığım, linkleri slug-url’e çeviren bir araç

Title Case

Adının Title Case olduğuna bakmayın, farklı methodlarda kullanılan case generateleri mevcut.

Youtube Videolarından Altyazı Çekmek

2018-09-01T16:00:00+00:00

Aslında altyazıları “.srt” olarak gayet güzel şekilde çeken generatorler mevcut fakat aşağıdaki kodlarda, pencerenin farklı bir persektifinden bakmak için derlediğim bir yazı oldu.

Not: Bu yöntem otomatik olarak çevrilen çeviriler için verimli çalışmayabilir.

Method:

function CaptionCollector() {
  var that = this;
  this.captions = '';
  var nowShowing = '';

  this.collect = function(){
    try {
      var currentCaption = document.getElementsByClassName("captions-text")[0].innerText;
    } catch (e) {
      var currentCaption = null;
    }

    if(currentCaption && nowShowing != currentCaption) {
      nowShowing = currentCaption;
      that.captions += ' ' + nowShowing;
    }

    setTimeout(that.collect, 300);
  }
}

var foo = new CaptionCollector();
foo.collect();

Altyazı foo.captions olarak gelecektir. “foo” yerine istediğinizi kullanabilirsiniz.

var captionCollector = {
    captions : '',
    nowShowing: '',

    collect : function(){
      try {
        var currentCaption = document.getElementsByClassName("captions-text")[0].innerText;
      } catch (e) {
        var currentCaption = null;
      }
    if(currentCaption && this.nowShowing != currentCaption) {
        this.nowShowing = currentCaption;
        captionCollector.captions += ' ' + captionCollector.nowShowing;
     }
    setTimeout(captionCollector.collect, 300);
  }
}

captionCollector.collect();

Bu methodda captionCollector.captions olarak getirir

Ya da global değişkene atayarak da yapabilirsiniz.

(function(){
    ___captions = '';
    var ___nowShowing = '';

    function getCaption() {
        try {
          var currentCaption = document.getElementsByClassName("captions-text")[0].innerText;
        } catch (e) {
          var currentCaption = null;
        }

        if(currentCaption && ___nowShowing != currentCaption) {
          ___nowShowing = currentCaption;
          ___captions += ' ' + ___nowShowing;
        }
        setTimeout(getCaption, 300);
    }

    getCaption();
})();

Bu methodda, konsolu global değişkenle yazdırıyorsunuz ___captions

Youtube’un videolar için kullandığı “captions-text” classı kullandığı için yalnızca Youtube’da çalışır. Diğer video hizmetleri için classname’i değiştirin.

Tüm altyazıları çekmek için tüm videoyu oynatmanız gerekecektir. Ayarlarla videoyu iki kat hızlı oynatabilirsiniz.

Video bittiğinde konsolu temizleyin. Değişkenleri çağırın yazdırın ve hepsini seçip kopyalayın.

İşlem tamam.

Kaynak:

http://www.standardista.com/capturing-captions-from-youtube-videos

Photoshop’da Fontları Listelemek

2018-08-30T19:00:00+00:00

Photoshop’da yapılan tasarım için kullanılan fontları listelemenize yarayabilecek küçük bir jsx dosyası.

Photoshop Scripti Kurulumu

Github linki üzerinden List Fonts.jsx dosyasını indirip “Applications/Adobe Photoshop [version]/Presets/Scripts” klasörünün içine atın.

Photoshop Scripti Kullanımı

Mobilde Hover Simule Etmek

2018-08-26T18:00:00+00:00

Mobilde aslında hover özelliği olan bir şeye dokunduktan sonra bıraktığımızda basılı kalıyordu. Bir projemde bu özelliğin önüne geçip kullanıcıya mobil uygulama hissiyatı kazandırmak için bu sıkıntıyı çözmem gerekiyordu.

Stackoverflow’da çözümünü buldum.

jQuery

$(document).ready(function () {
    // .hover elementine dokunulduğunda o elemente hover_effect classını uygula
    $('.hover').on('touchstart touchend', function (e) {
        $(this).toggleClass('hover_effect');
    });
});

Ama sonra sadece yukarıdaki kodu çalıştırınca elementin üzerinde scroll yapmakta zorlandığımı farkettim ve aşağıdaki kodu da ekledim.

Yine document.ready içine ekledim;

$(document.body).on("touchmove", function (event) {
    event.preventDefault();
    event.stopPropagation();
});

CSS

.hover {
    -webkit-user-select: none; /* basılı tutulduğu zaman elemanları seçili hale getirmemesi için */
    -webkit-touch-callout: none; /* iOS cihazlarda basılı tutup bir kaç saniye bekletildiğinde bağlantı hakkında info çıkartmaması için */
}
.element.hover_effect {
    /* hover olduğunda olacak şeyler */
}

Kaynak

https://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers

Chrome’da Eklentisiz Screenshot

2018-08-25T20:50:00+00:00

Geçenlerde yine inspect modundayım, yanlışlıkla kendimi VSCode’da sanıp CTRL + P yapmıştım, bir tane kutu geldi sayfanın render ettiği dosyaları gösteren.

Type ‘?’ to see aviable commands demiş, işime yarayabilir bir şeyler çıkar diyerek kurcuklayayım dedim.

No	Key	Açıklama
1	…	Open file
2	:	Go to line
3	@	Go to symbol
4	!	Run snippet
5	>	Run command

Open file seçeneği kullanılabilir dosyalarda gezinmek için.
Go to line kesin kullanırım, belirli satıra gitmek için süper olur.
Go to symbol tam olarak çözemedim ama anladığım kadarıyla css ve javascript kodlarında ilgili değişken ve fonksiyonlara gidiyor.
Run snippet bunu daha önce kullanmamıştım ama bu özelliğinde de kullanışlı olduğunu anladım. Hemen açıklayayım;

Run snippet

DevTools’da Sources sekmesine geldikten sonra sol taraftaki sidebarda genellikle Page seçili gelir. Aslında orada 5 adet sekme bulunuyor. Sidebarı genişletince veya » ikonuna tıkladığımızda Snippet sekmesi karşımıza çıkacak.

Burada + New Snippet diyerek içerisine; nasıl ki console kısmına bazen sürekli yazdığımız kodlar oluyor ya, hah! işte o kodları her zaman yazmayalım diye buraya “snippet” olarak ekleyebiliyoruz ve tek komutla çalıştırabiliyoruz. Çok güzel değil mi yav :)

Geldik asıl olaya, eklentisiz screenshot nasıl alırız :)

5 numaralı Run Command kısayolumuz, diğer bir kısayolu CTRL + SHIFT + P olan komut çalıştırma bölümü. Burada türlü tefarek olaylar dönüyor, hepsini anlatmaya gün yetmez. Siz deneyip bulursunuz onları artık, ben yolu gösterdim :)

Şimdi burada >screenshot yazıyoruz

No	Komut	Açıklama
1	Capture full size screenshot	Ekranın baştan aşağı tam görüntüsünü alıyor
2	Capture node screenshot	`CTRL + SHIFT + C` ile seçili olan alanın görüntüsünü alıyor
3	Capture screenshot	Bulunan pencerenin monitöre göre gözüken kısmın görüntüsünü alıyor

Harika değil mi yahu! :)

Konum Çekme

2018-08-25T19:00:00+00:00

Geolocation API’nı kullanarak kullanıcının kendi rızası ile kendi yerini bildirmesini sağlar.

Nerelerde kullanılır?

Kullanıcıyı bulunduğu hedeften yakın hedeflere yönlendirme, benzer hedeflere yönlendirme, bulunduğu alanı işaretleme gibi gibi bir çok yerde kullanılabilir.

Örneğin, projenizde fotoğraf yükleme alanı var ve fotoğrafın çekildiği yerin nereye ait olduğunu yazdırmak için Geolocation API kullanarak lat ve lng koordinat değerlerini çektirebilirsiniz.

Nasıl kullanılır?

Bir buton ekliyorum

<button type="button">Konum al</button>

Hata mesajı için yazdırması bir div ekliyorum

<div id="nudge" style="display:none">Hata: konum alınamadı.</div>

Lat ve Lng değerlerini yazabilmesi için gereken iki div ekliyorum

<div id="startLat"></div>
<div id="startLon"></div>

Ve son olarak javascript kodlarını sayfama dahil ediyorum

var button = $('button');
button.onclick = function() {
  var startPos;
  var nudge = document.getElementById("nudge");

  var showNudgeBanner = function() {
    nudge.style.display = "block";
  };

  var hideNudgeBanner = function() {
    nudge.style.display = "none";
  };

  var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);

  var geoSuccess = function(position) {
    hideNudgeBanner();
    // We have the location, don't display banner
    clearTimeout(nudgeTimeoutId);

    // Do magic with location
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function(error) {
    switch(error.code) {
      case error.TIMEOUT:
        // The user didn't accept the callout
        showNudgeBanner();
        break;
    }
  };

  navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};

Burada ne oluyor?

Konumu çekmek için butona tıklandıktan sonra 5 saniye bekletiyor.
Sonuç olumlu dönerse, bekletmeyi devre dışı bırakıp değerleri #startLat ve #startLon divlerine yazdırıyor.
Ama eğer zaman aşımından sonra olumsuz dönerse #nudge divi içine hata mesajı yazdırıyor.

Chrome DevTools’dan lokasyon emule etmek

Eğer sensör sekmesi sizde kapalıysa;

Mobilde İkon Kullanımı ve Tarayıcı Sekmesi Rengi

2018-08-25T18:00:00+00:00

Günümüz tarayıcılarında kullanıcılarla etkileşimi arttıran, ikon ve adres çubuğu rengi gibi belirli alanları özelleştirmeyi sağlayan basit ince ayarlar mevcut.

Web sayfamız görüntülendiğinde, tarayıcımız web sayfasının ikonunu favicon olarak çekebiliyor. Web sayfamızı mobilde incelediğimizde, aslında ikonumuzu diğer özelleştirilmiş alanlarda da göstermemiz mümkün.

Tam olarak neresi oluyor bu özelleştirilmiş alan?

Tarayıcı sekmesi, arkaplanda çalışan uygulamaların görüldüğü bölüm, yeni sekme sayfası açarken çıkan alan gibi bir yerleri özelleştirebiliyoruz.

Yalnızca modern tarayıcılarda çalışan bu özellik için <head> etiketi içine bir kaç tag eklemek yeterli.

<!-- Yüksek çözünürlüklü ikon -->
<link rel="icon" sizes="192x192" href="icon.png">

<!-- Safari tarayıcısı için aynı ikonu tekrar çağır -->
<link rel="apple-touch-icon" href="ios-icon.png">

<!-- IE tarayıcıları için -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">

İkonların boyutları 48px, 96px, 144px ve 192px olması gerekiyor.

Safari

Safari’nin kullandığı <link> etiketinin rel özniteliği: apple-touch-icon olması gerekir.

Her boyut için farklı bir etiket kullanarak farklı tema ve görünüme sahip olan telefonların ikonu otomatik olarak yeniden boyutlandırarak çözünürlüğünü bozmak yerine aşağıdaki etiketleri kullanarak farklı görünümler için farklı boyutlarda ikonları tanıtabilirsiniz.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

Internet Explorer ve Windows Phone

Her ne kadar Türkiye pazarında fazla bir popülasyona sahip olmasa da hedef kitleniz windows phone kullanıyorsa aşağıdaki meta etiketlerini tanımlayabilirsiniz.

<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">

Renkli tarayıcı sekmeleri

Farklı meta etiketi kullanarak, tarayıcıyı özelleştirebiliyoruz. Sadece modern tarayıcılarda çalışacaktır.

<!-- Chrome, Firefox OS ve Opera -->
<meta name="theme-color" content="#4285f4">

#1 - Keşif

2018-08-24T03:30:00+00:00

🚩 Fractal Fantasy

Müzikleri fena değil, arkada hayvan gibi javascript yazmışlar.
Yön oklarına falan basınca değişik şeyler oluyor, kurcuklamak lazım.

Three.js kullandıkları aşikâr, gerçekten çok başarılı bir kütüphane.
Müzik playerı kendileri yazmışlar, Ezra Miller ve Sinjin Hawke adında iki güzel insan. Repo için tıklayın –Sinjin Hawke, müzikleri yapan producer olabilir–
İçerisinde DetectorMixtape.js adında bir WebGL işlemleri yaptıran script mevcut, yazarları şu iki siteyi de yapmışlar; http://alteredqualia.com - http://mrdoob.com

🚩 Dinahmoe Labs

#adamlaryapmis ve #kenardakalsin etiketini hak eden bir site. Müzik ile alakalı multiplayer ve singleplayer olarak farklı farklı icatlar yapmışlar. İnsanın müzik yaratıcılığını artıyor resmen.

Aynı zamanda anonim yerlerden bağlanan kişilerle bir orkestra oluşturup müziğin keyfine doyum olmuyor 👌

🚩 Map Crunch

Google map üzerinde random gezinme şeysi.
Yurt dışı gezilerimi buradan yapıyorum. Bazen ilginç şeylerle karşılaşıyorum.

Aynı yapımcının diğer projesi de var ancak daha minimal yapmış. Teşekkürler Nick Nicholaou