Hem GitHub, hem Bitbucket hem de yerel sunucuda kurulu Gitlab’da geliştirme yapmaya çalışınca bu durumla karşılaşmam kaçınılmaz oldu. Buna çözüm olarak iki farklı yöntem denedim. İki yöntemde de temel olarak her bir hesap için ayrı birer SSH anahtarı oluşturulması gerekiyor.

$ ssh-keygen -t rsa -C "sevil@codersgrave.com"

E-posta adresini kendi adresinizle değiştirip diğer adımları takip etmeniz yeterli. Tabii oluşturduğunuz SSH anahtarlarını ilgili servise (GitHub, Bitbucket v.s.) eklemeniz gerekiyor. Bununla ilgili olarak GitHub yardım sayfasını inceleyebilirsiniz.

Daha sonra aşağıdaki iki yöntemden birini tercih etmeniz gerekiyor.

1. Yöntem

~/.ssh/ klasörüne config isimli bir dosya oluşturup içine de aşağıdaki örnekteki gibi host ve public key tanımlamaları yapmalısınız.

# http://stackoverflow.com/a/17158985
# GitHub
Host github.com
    HostName github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/github_rsa

# Bitbucket
Host bitbucket.org
    HostName bitbucket.org
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/bitbucket_rsa

2. Yöntem

Bir diğer yöntem de Git Client’ın her açılışında SSH anahtarlarını bir SSH agent’a tanıtmak. Bunun için ~/.bashrc dosyası oluşturup içine aşağıdaki kodu eklemelisiniz. Burada dikkat etmeniz gereken nokta SSH anahtarlarının isimlerinin “_rsa” ile bittiğinden emin olmak.

.bashrc dosyasını oluşturmakta zorluk çekenler ana klasöre (~/) gelip bu komutu çalıştırarak dosyayı oluşturabilirler: touch .bashrc

#! /bin/bash 
eval `ssh-agent -s` 
ssh-add ~/.ssh/*_rsa

Git Client’ı her açtığınızda aşağıdakine benzer bir ekran göreceksiniz.

Test

En sonunda, yapılan işlemin çalışıp çalışmadığını da bu şekilde test edebilirsiniz:

$ ssh -T git@github.com
Hi sevilyilmaz! You've successfully authenticated, but GitHub does not provide shell access.

$ ssh -T git@bitbucket.org
logged in as sevilyilmaz.

The post Çoklu DVCS (Distributed revision control) Hesabı ile Git Kullanımı appeared first on Coders' Grave.

Ekim 2014’te NG Avrupa konferansında Angular ekibi Angular 2’nin AtScript‘le geliştirileceğini duyurmuştu. Ama görünen o ki TypeScript’in gelişimi için bu ismi kullanmaktan vazgeçip AtScript’in özelliklerini TypeScript’e dahil etmeye karar verdiler. MSDN blogunda bu olay büyük bir heyecanla duyuruldu:

We’re excited to unveil the result of a months-long partnership with the Angular team.

AtScript, büyük çoğunlukla TypeScript ve Dart’tan esinlenmiş bir superset. AtScript, JavaScript’e introspection gibi yeni özellikler getirerek daha hızlı bir geliştirme süreci amaçlıyor. Bu gibi bütün özellikleri yeni çıkacak olan TypeScript’in 1.5 versiyonuna uyarlanacak.

Angular 2’nin geriye uyumluluğunun olmaması yazılımcı topluluğunda hala tartışılırken bu gelişme framework‘un kullanılmasını ne kadar değiştirecek zamanla göreceğiz.

The post Angular 2 TypeScript İle Geliştiriliyor appeared first on Coders' Grave.

My brother needed a calendar that shows his availability to his clients for his website. So, I know that already, marvelous Google Calendar provides embedding calendar in your website with iframe. But you couldn’t change its design (color, icons etc.). This is a bad thing for websites without white background color. It looks like an alien attached to your website.

I googled it a bit and I found this article: Integrating Google Calendar with your website. There is a PHP code in the article that it isn’t correct. But it inspired me. I took its idea and code and I reworked on it. Here is the live result: https://taneryilmaz.pro/#schedule 

<?php
$your_google_calendar="[YOUR_CALENDAR_EMBED_URL]";

$url= parse_url($your_google_calendar);
$google_domain = $url['scheme'].'://'.$url['host'];

// Load and parse Google's raw calendar
$dom = new DOMDocument;
$dom->loadHTMLfile($your_google_calendar);

// Create a link to a new CSS file called schedule.min.css
$element = $dom->createElement('link');
$element->setAttribute('type', 'text/css');
$element->setAttribute('rel', 'stylesheet');
$element->setAttribute('href', '/css/schedule.min.css');

// Change Google's JS file to use absolute URLs
$scripts = $dom->getElementsByTagName('script');

foreach ($scripts as $script) {
  $js_src = $script->getAttribute('src');
  
  if ($js_src) {
    $parsed_js = parse_url($js_src, PHP_URL_HOST);
    if (!$parsed_js) {
      $script->setAttribute('src', $google_domain . $js_src);      
    }
  }
}

 // Append this link at the end of the element
$head = $dom->getElementsByTagName('head')->item(0);
$head->appendChild($element);

// Remove old stylesheet
$oldcss = $dom->documentElement;
$link = $oldcss->getElementsByTagName('link')->item(0);
$head->removeChild($link);

// Export the HTML
echo $dom->saveHTML();
?>

Save this as calendar.php and after change the $your_google_calendar variable with your calendars URL. Now, you can change the style of calendar from schedule.min.css file. After that, you can embed it to your web page like this:

<iframe style="border-width: 0;" src="/calendar.php" width="560" height="400" frameborder="0" scrolling="no"></iframe>

You need to store schedule.min.css on your server to achieve this. Feel free to ask if you get any trouble.

The post Integrating Styled Google Calendar with Your Website appeared first on Coders' Grave.

RedirectMatch 301 ^/(\d+)-([^/]+)/$ http://codersgrave.com/$2

Regex’in anlamı şu: / ile başlayıp rakamla yani (\d+) devam eden, sonrasında - işareti ile ayrılıp sonrasında / ile biten herhangi bir yazı yani ([^/]+) ile başlayan URL’leri http://codersgrave.com/$2 adresine yönlendir. Yönlendirilecek adresteki $2, ilk regex‘in “-” işeretinden sonraki kısma yani yazı alanına denk geliyor. Karışık geldiyse Yoast’ın yönlendirme kodu üreten sayfasını kullanabilirsiniz: Yönlendirme oluşturma. Coders’ Grave için kullanıldığım alanlar aşağıdaki gibidir:

Oluşan yönlendirme kodunu ana klasördeki .htaccess dosyasına eklediğinizde artık yönlendirme işleminiz hazır olacaktır. Ancak uygulamadan önce öncelikle .htaccess’in yedeğini almalı ve kodu herhangi bir regex tester‘da test etmenizde fayda var. Yoksa değişiklikten sonra siteniz hiç açılmayabilir. regular expression 101‘de, oluşan expression‘ın sonucu aşağıdaki gibidir. / karakteri regex‘de illegal olduğu için testte bunların öncesine \ kaçış karakteri ekledim.

Kalıcı bağlantı değişimi çok dikkatli alınması gereken bir karar. Bu değişikliği yapmadan önce iyice düşünmeli, kesin kararınızı vermeli ve değişikliği yaptıktan sonra buna bağlı kalmalısınız. Her ne kadar arama motorlarına bu sayfaların tamamen taşındığını 301 yönlendirmesi ile belirtsek bile bu işlemi sürekli yaptığınız takdirde arama motorlarının hoşuna gitmeyecek, sitenizin değerini düşürecektir. Bunun yanı sıra, çoğu site, hatta hemen hemen hepsi Facebook, Twitter, Google Plus gibi sosyal medya sitelerinin eklentilerini kullanıyor. Bu eklentilerdeki sayfa beğeni/paylaşım sayısı tamamen sayfa bağlantısı ile ilişkili. Bağlantıyı değiştirdiğinizde bu ilişkiyi kaybedip eklentilerin sayfanızı yeni bir sayfaymış gibi görmesini sağlayacak ve değerleri sıfırlayacaktır.

Güncelleme (14.02.2013)

Yukarıda bahsettiğim sosyal medya paylaşım sayısı kaybedilmesi sorununa Dave Ward bu yazısında güzel bir çözüm bulmuş.  Buradaki mantığa göre değişikliği yaptığınız tarihten önce paylaşılmış yazılar eski linkleri ile kalıp yeniler ise yeni formatlı bağlantılarıyla paylaşılıyor. Coders’ Grave’de kullanılan eski format “​/111-sitenizi-hizlandirin​/” şeklinde olduğu için makaledeki örneği buna göre düzenledim.

<?php

// Bağlantı yapısı 1/1/2015 tarihinde değiştirildi. 
// Bu kod bloku eski yazıların eski bağlantılarını kullanmasını 
// sağlayarak sosyal medya paylaşım sayısının korunmasını sağlıyor.
$url_change_date = strtotime("1/1/2015");
$post_date       = strtotime(get_the_date("n/j/Y"));
$sharing_url     = get_permalink();
$postid          = get_the_ID();

if ($post_date < $url_change_date) {
  $url_id_prefix = "/" . $postid . "-";
  $sharing_url   = str_replace("codersgrave.com/", "codersgrave.com" . $url_id_prefix, $sharing_url);
  $sharing_url;
}

// $sharing_url'i sosyal medya eklentilerinin URL ya da href
// alanlarına ekleyerek paylaşımların sayısı korunmuş oluyor.

?>

Yine de uzun vadede bu pek de mantıklı bir düzenleme gibi görünmüyor. Çünkü bu kod bloku ile eski yazılarınız hep eski bağlantıları ile paylaşılacak ve bu bağlantılarla siteye gelindiğinde yeni bağlantıya yönlendirme yapılacak. Bu durumda sitedeki yönlendirmeleri sitenin ömrü boyunca tutmak zorunda kalıp eski formatta yeni bir bağlantı oluşturamayacaksınız. Buradaki örneğe göre eski bağlantıları korursam asla şu şekilde bir bağlantı oluşturamam: “2015-seo-cozumleri”. Bu sebeple yeni bağlantılara bağlı kalıp eskilerden tamamen vazgeçmeye karar verdim. Eğer paylaşım sayılarınız çok yüksekse yukarıdaki çözümü de kullanmak isteyebilirsiniz. Bu karar siteden siteye farklılık gösterebilir.

The post WordPress’te kalıcı bağlantı değişimi ve bunun SEO’ya etkisi appeared first on Coders' Grave.

Modern tarayıcılarda DOM Level 3 altında olay tetiklemenin doğru yolu aşağıdaki gibidir:

// First create an event
var click_ev = document.createEvent("MouseEvent");

// Initialize the event
click_ev.initEvent("click", true /* bubble */, true /* cancelable */);

// Trigger the event
document.getElementById("someElement").dispatchEvent(click_ev);

Safari, Chrome, Firefox, Opera ve IE9’da çalışan jsfiddle örneğine buradan bakabilirsiniz.

Orijinal yazı

The post Modern Tarayıcılarda DOM Level 3 Altında Olay Tetikleme appeared first on Coders' Grave.

Alex Sexton bu sunumunda birden fazla çözüm önerisiyle anlatmış ve bunları artıları ve eksileriyle ortaya koymuş. Oldukça başarılı bir anlatım olmuş.

Bunların bir kısmını denedim ve SharePoint 2010 Intranet ortamında karşılaştığım sonuçları ve nihayi çözümü yazıyorum. Yapılanları tek tek anlatmayacağım, sadece çözümü detaylandıracağım. Diğerlerini Alex Sexton’ın sunumunda daha detaylı bulabilirsiniz.

Güvenlik nedenlerinden dolayı iletişimde olacak frame‘lerin protokolleri (http, https), port numaraları (http için 80), ve host‘ları aynı olmalıdır. Aksi takdirde aşağıdaki örnekteki uyarıyla karşılaşırsınız.

Örnek şu: A domainin içindeki B domain’li bir iframe içinden bir input‘ın değerini almak ya da iframe’in içindeki bir elemana değer atamak.
Bunu denediğiniz zaman karşılaşacağınız olası uyarı mesajı şu olacaktır (jQuery mesajı):
Unsafe JavaScript attempt to access frame with URL B from frame with URL A. Domains, protocols and ports must match.

Çözüm Denemeleri:

1- window.name

Buna erişmeyi denediğimde yine aynı uyarıyı aldım.

2- document.domain

İşe yaramadı.

3- iframe içinde en üstteki katmanın domain’inde bir iframe daha açmak

iframe dışındaki domain‘i bilmiyor. URL’ine yazdırılsa bile SharePoint’in bir işlemi sonrasında URL değişiyor. Sadece tek seferinde URL alınabiliyor. Alt katmanda yine işe yaramıyor.

4- window.postMessage

Parmaklar yukarı. Aynı zamanda uygulaması en kolay çözümlerden biri. Olay temelde şu: Bir “event listener” ekliyorsunuz. O mesajın gelmesini tetikte bekliyor. Mesaj bir frame’den diğerine gönderildiği anda onu yakalıyor.

var otherWindow = document.getElementsByTagName('iframe')[0].contentWindow,
    targetDomain = 'http://garage.codersgrave.com',
    sourceDomain = 'http://codersgrave.com';

/*
 * Eğer iframe içinden dışarıya gönderilecekse
 * otherWindow = parent olmalı
 */

// Mesajın gönderileceği ekrandaki kod
otherWindow.postMessage('hoop robocop', targetDomain);


// Mesajın alınacağı ekrandaki kod
if (window.addEventListener) {
  window.addEventListener('message', receiveMessage, false);

// IE8+
} else if (window.attachEvent) {
  window.attachEvent('onmessage', receiveMessage);
}

function receiveMessage (e) {

  // Mesaj beklediğiniz adresten gelmiş ise
  if (e.origin === sourceDomain) {
    alert(e.data);
  }
}

Tarayıcı desteği: Bu örnek IE8-9, Chrome ve Firefox’da test edildi. postMessage desteklemeyen tarayıcılar için Ben Alman’ın çok güzel bir jQuery plugin‘in var. postMessage’a polling, delay ve birkaç kontrol daha eklemiş. IE6-8 ve Opera 9 desteği de veriyor.

Yararlı Kaynaklar

• MDN window.postMessage
• MSDN postMessage method
• HTML5 Web messaging specification

Siz hangi metodu kullanıyorsunuz? Bu yöntem işinize yaradı mı? Yazmaktan çekinmeyin.

The post Cross Domain Engelini Aşmak appeared first on Coders' Grave.

Bu araştırmamdaki en büyük etken Burak’ın yazdığı kodların (CSS ve jQuery) üzerine onunla girdiğimiz tartışmaların sonucu doğru ve yanlış bildiğim şeyleri tekrar gözden geçirme isteği.

Not: Araştırmamın sonucunda ben haklı çıktım burası ayrı bir konu 😉 Ama doğru bildiğim bazı yanlışları da düzeltme fırsatı buldum.

Konuyu ayrı başlıklar altında inceleyeceğim. İlk önce CSS.

CSS

Bu sayfaları birçoğunuz biliyorsunuz zaten. Ama bilmediğiniz varsa iyi bir referans olur size çalışmalarınızda:

• Optimize browser rendering – Make the Web Faster — Google Developers
• Writing efficient CSS
• Remove unused CSS
• Efficiently Rendering CSS

Yukarıda anlatılanlara göre daha efektif ve performanslı bir CSS için:

Kullanılmayan CSS’leri sil

Kullanılmayan her stili silmek indirme süresini azaltarak sayfanızın daha hızlı taranmaya başlamasına başlar.

Aynı zamanda tarayıcının CSS motoru varolan tüm CSS kurallarının sayfada kullanılıp kullanılmadığını kontrol eder. Kullanılanları sayfaya uygular. Ancak kullanılmayanlar için de bir işlem gücü ve zaman harcar.

Sayfaya eklenen, eklenmeyen tüm stilleri ve harcanan süreleri görmek için Webkit’in CSS Profiler’ı kullanılabilir.

Efektif ve performanslı CSS için aşağıdakileri yapma

Etiket isimini anahtar olarak kullanma

#footer h3 {...}

Bunun yerine aşağıdaki kullanılabilir.

#footer .title {...}

Genel seçicileri anahtar olarak kullanma

.hide-scrollbars * {...}

Bunun yerine aşağıdaki kullanılabilir.

#hide-scrollbars .item {...}

Torun seçicileri anahtar olarak kullanma

ul > li > a {...}

Bunun yerine aşağıdaki kullanılabilir.

#list .link

Fazladan niteleyiciler

.container#content div.container

jQuery

CSS’in aksine JS’de daha iyi performans için bazı alanları eklemek gerekiyor. Fazladan niteleyici ve seçiciye en yakın ID’li kapsayanı eklemek gibi.

• jQuery Proven Performance Tips And Tricks (Slides) – jQuery takım üyesi Addy Osmani
• 10 Advanced jQuery Performance Tuning Tips from Paul Irish – Paul Irish’i biliyorsunuz zaten
• 15 Powerful jQuery Tips and Tricks for Developers
• jQuery Performance Tips Cheat Sheet
• JQuery Performance Tips And Tricks With Addy Osmani – Video

Yukarıdaki kaynaklara göre bu kurallar daha efektif ve performanslı bir jQuery kodu yazmamıza olanak sağlar:

Gerektiğinde düz JavaScript kullanın.

Sonuçta jQuery de bir JS kütüphanesi ve içinde düz JS kodlarıyla çalışıyor. O yüzden jQuery kullanmadan çözülebilecek yerleri düz JS ile çözün.

Nesnelerinizi önbelleğe yazın

var header = $('#header');

Sınıflara etiket ismi ekleyin

$('a.button');

Seçicileri en yakın ID’le elemanın torunu olarak çağırın

$('#navigation a.button');

Seçicileri sağdan sola modeline göre yazın

$('a.contact-links .side-wrapper');

Bunun yerine aşağıdaki kullanılmalı.

$('.contact-links div.side-wrapper');

jQuery’nin chaining(zincir) özelliğini kullanın

$('li.menu-item').click(function() {alert('test click')}).css('display', 'block').fadeTo(2, 0.7);

Context yerine jQuery’nin .find() özelliğini kullanın

var panels = $('div.panel', $('#content'));

Bunun yerine aşağıdaki kullanılabilir.

var panels = $('#content').find('div.panel');

Kullanmadığınız kodları sayfaya yüklemeyin

JS kodlarınızı birden fazla dosyaya bölün. İhtiyacınız olan sayfalarda bu dosyaları ekleyin.

Google CDN kullanın

Daha iyi tarayıcı önbelleklemesi için Google CDN kullanın

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

Bunlar temel olarak işinize yarayacak kısımlar. Ayrıntılı bilgiler için bağlantılardaki adreslere bakabilirsiniz.

Performanslı ve efektif bir kod için sen ne önerirsin?

The post CSS, jQuery: Daha Üstün Performans appeared first on Coders' Grave.

Temelde Mediawiki AuthPlugin’ini kullanıyorsunuz. WordPress tarafında hiçbir şey yapmıyorsunuz. PHP gurusu sayılmam; o yüzden yanlış yaptığım birşey varsa yorumlarla seslenin hemen.

Kullandığım WordPress versiyonu: 3.3.2; Mediawiki versiyonu da: 1.19.0.

Öncelikle wiki (WordPress ana klasörünün hemen içine yani) klasörüne Mediawiki’nin normal kurulumunu gerçekleştiriyorsunuz. Sonra buradan AuthWordpress.php’yi indiriyorsunuz:
AuthWordpress.php

Bu dosyayı da Mediawiki extensions klasörünün içine atıyorsunuz:

wiki/extensions/AuthWordpress.php

Dosyada ufak bir değişiklik yapmanız gerekiyor. Çünkü Mediawiki AuthPlugin.php’yi AuthWordpress.php ile aynı klasörde gibi düşünüp çağırmayı deniyor. Ama extensions içinde değil includes içinde dosya. O yüzden bu kodu:

require_once('AuthPlugin.php');

Bununla değiştirmelisiniz:

require_once('includes/AuthPlugin.php');

Ardından da MediaWiki LocalSettings.php dosyasına şu kodları eklemelisiniz.

require_once( 'extensions/AuthWordpress.php' );
$wgAuth = new AuthWordpress();
$wgAuth->setAuthWordpressTablePrefix('wp_'); // wp-config.php'deki db önekiyle uyuşmalı
$wgAuth->setAuthWordpressDBServer ('localhost'); // wordpress host (örnek: localhost)
$wgAuth->setAuthWordpressDBName('DB_ADI'); // wordpress database
$wgAuth->setAuthWordpressUser('DB_KULLANICI_ADI'); // wordpress db kullanıcı adı
$wgAuth->setAuthWordpressPassword('DB_PAROLASI'); // wordpress db parolası

Yukarıdaki bilgilerin wp-config.php’dekilerle aynı olduğuna emin olun.

Mediawiki’den kayıt olunmasını engellemek için aşağıdaki kodu da LocalSettings.php’ye ekleyin. Sonuçta giriş için WordPress kullanıcı bilgilerini kullacaksınız.

$wgGroupPermissions['*']['createaccount'] = false;

Mediawiki .htaccess dosyası da aşağıdaki gibi olmalı:

Options FollowSymLinks
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ index.php?title=$1 [L,QSA]

Hepsi bu kadar. Çalışan örneğini buradan görebilirsiniz: www.mudadost.org
Bir sorunla karşılaşırsanız yazın; birlikte çözelim.

The post WordPress Mediawiki Entegrasyonu appeared first on Coders' Grave.

Tasarım, HTML5/CSS3: taneryilmaz.pro

The post taneryilmaz.pro: Yeni Site appeared first on Coders' Grave.

Demo & Download

This plugin is no longer maintained. Feel free to fork and update! Github repo

• Ability to set a maximum number for friend selection
• Exclude as many people as you want from the list
• Ability to show random friends list
• Ability to set maximum friends on list
• Search
• Facebook invite option
• Ability to select/deselect all friends
• Ability to show selected friends
• Ability to predefine selected friends
• Overlay color selection
• Overlay opacity selection
• Ability to hide the overlay with a mouse click outside the box or a ESC key press
• Centers the box on window resize
• Ability to close the box onsubmit
• Ability to enable or disable to display the number of selected people in the box
• Seven color options (easily customizable)
• Adaptability of texts to any desired language
• Ability to decide what to do onstart
• Ability to decide what to do onclose
• Easy integration

The post Facebook Friend Selector appeared first on Coders' Grave.