Tasarımlarda Standart Sistem Fontunu Kullanmak

Kodladığımız tasarımlarda farklı işletim sistemlerinde farklı font görüntüleri alıyoruz. Çünkü ne olursa olsun hepsinin kendine göre kriterleri var ve aynı sonucu göstermiyor. Ancak sistemlerin kendi standart fontları yeterince tutarlı öyle değil mi? O halde bootstrap 4’ün yaptığı gibi bizde hangi işletim sisteminden girildiyse o işletim sistemine ait standart fontu gösterebiliriz.

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Bunu kullandıktan sonra farklı işletim sistemlerinden deneyerek sonuca ulaşabilirsiniz.

Zincirleme (Chain) Metodu

Bir çoğunuz yazılmış sınıfları incelediğinizde şu şekilde bir yazım tarzıyla karşılaşmış olabilirsiniz.

$text = new Text();
echo $text->write('Tayfun Erbilen')->color('red')->fontSize('20px')->show();

Bu örneğe ait sınıfımızı oluşturalım hemen.

class Text {
    
    private $text;
    private $style;

    public function write($text)
    {
        $this->text = $text;
    }

    public function color($color)
    {
        $this->style .= 'color: ' . $color . ';';
    }

    public function fontSize($size)
    {
        $this->style .= 'font-size: ' . $size . ';';
    }

    public function show()
    {
        return '<div style="' . $this->style . '">' . $this->text . '</div>';
    }

}

Ancak bu örnek hata verecektir. Çünkü bu şekilde bir yazım tarzı için yapmanız gereken $this objenizi geriye döndürmek. Yani sınıfımızı şu şekilde düzenlersek eğer;

class Text {
    
    private $text;
    private $style;

    public function write($text)
    {
        $this->text = $text;
        return $this;
    }

    public function color($color)
    {
        $this->style .= 'color: ' . $color . ';';
        return $this;
    }

    public function fontSize($size)
    {
        $this->style .= 'font-size: ' . $size . ';';
        return $this;
    }

    public function show()
    {
        return '<div style="' . $this->style . '">' . $this->text . '</div>';
    }

}

Artık bu şekilde bir kullanımı yapmaya hazırız.

Chain (zincirleme) metodu aynı zamanda jQuery içinde aynı mantıkta çalışır. Muhtemelen her dil için bu mantıktadır. Örneğin jQuery’de bir örnek vermem gerekirse, basit bir eklenti hazırlayalım.

$.fn.Text = function(text){
  $(this).html(text);
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });

Bu şekilde bir zincirleme kullanımda çalışmayacaktır. Çünkü bir this objesi döndürmedik eklentimizde geriye. Eğer geriye this’i döndürürsek geriye kalan jQuery metodlarını da zincirleme olarak kullanabilirsiniz. O halde buna göre düzelttiğimizde son kod parçamız şöyle olacak;

$.fn.Text = function(text){
  $(this).html(text);
  return this;
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });

JavaScript Object Length Kullanımı

Bir dizinin boyutunu öğrenmek için length özelliğini kullanabilirsiniz. Örneğin;

var arr= ['Tayfun', 'Murat'];

alert(arr.length); // Output: 2

Ancak bunu bir object için yapmak istediğimizde biraz daha farklı şekilde kullanıyoruz;

var obj = new Object();
obj['name'] = 'Tayfun';
obj['surname'] = 'Erbilen';

alert(Object.keys(obj).length); // Output: 2

Kaynak: http://stackoverflow.com/a/6700

PHP timeAgo Fonksiyonu

Daha önce şurada paylaştığım halini unutup yeni halini kullanabilirsiniz ????

<?php

/**
 * @param $date
 * @return mixed
 */
function timeAgo($date)
{
    $timestamp = strtotime($date);
    $currentDate = new DateTime('@' . $timestamp);
    $nowDate = new DateTime('@' . time());
    return $currentDate
        ->diff($nowDate)
        ->format(' %y yıl %m ay %d gün %h saat %i dakika %s saniye önce');
}

$date = '2015-03-12 14:05:14';
echo timeAgo($date);

WordPress Html Admin Teması

WordPress kullananlar ve sevenler bilirler ki panel teması çok hoş.
Bazen insan kendi projelerinde de bu tarz bir tema kullanmak istiyor ????
Mesela bugün benim istediğim gibi.
Hiç üşenmedim kısmi benzerlikte html sayfalarını oluşturdum.
İhtiyaç oldukça github’da güncellemelerini yapacağım.
Şimdilik alıp projelerinizde kullanabilir ve sizde geliştirip katkı sağlayabilirsiniz.

Github: https://github.com/tayfunerbilen/wp-admin-html-template

Demo;
Index
Posts
New Post
Settings
Login
Lost Password

Benim için 2015 nasıl geçti?

Artık her yıl gelenekselleşmiş yıl nasıl geçti yazımı yazmadan rahat edemiyorum ????
2015 yılının bende nasıl izler bıraktığından kısa kısa bahsederek notlarıma eklemek istiyorum.
Çünkü daha sonra dönüp dönüp bu notları okuyarak duygulanıyorum ^^

Bu sene hayatımdaki en büyük olay darkod ofisini kurmaktı.
2011’de diğer ekip arkadaşlarımla birlikte freelance olarak devam ettirdiğimiz darkod ekibini, 2015’de Eskişehir merkezli olarak ofis ortamına dönüştürdük ve artık darkod freelance ekibi olarak değil, darkod interaktif ajans olarak hayatımıza devam ediyoruz ????

Eskişehir Darkod Ofisi – 2015 Sonu

Ayrıca Ankara’dan tolga, Konya’dan kuzenim Murat ve Antalya’dan Mert abim darkod ekibi için Eskişehir’e yerleştiler. Artık kocaman bir aile olduk diyebilirim ????

1 senedir oturduğumuz merkezdeki evimizden yakın zamanda daha sakin mustakil bir eve taşındık.

Yazın ofise gidip gelmelerim kolay olsun diye bisiklet almıştım, şimdi kuzu kuzu evde beni bekliyor ????

Soğuk bir gecede yürürken ufak yavru bir kedi buldum. Daha gözleri yeni açılmış, bana bakıyordu öyle ???? Onu sahiplenerek ofisimize getirdim, artık bizim bir gecemiz var.

Uzman Cevap bir kaza sonucu tüm yedekleriyle birlikte silinmişti. Ona yeniden hayat vererek daha güzel daha stabil çalışan bir sistem ile yayına soktum.
http://www.uzmancevap.org

Şuan hali hazırda birkaç farklı projem daha var. Daha da fazlalaştırmayı düşünüyorum ????

Ayrıca 2016’da ekip olarak hazırlayacağımız ilk 2 projemiz.
1- Prototürk
2- Psd2Html projesidir.
Onların detaylarını da yakında sizlerle paylaşırım ????

2 aylığına bir proje için kıbrısa gittim, girne’de 2 ay geçirdim. Güzel eğlenceli günlerdi ????

Bu yıl 200+ bin TL üzeri kazanç sağlamışım. Bunu paylaşmak istiyorum çünkü belki beni takip eden arkadaşlarıma ilham olur. Çok çalışan çok kazanır, bu hayatın altın kuralıdır ????

Şuan hızlıca bu yazıyı yazmak zorunda kaldığım için çok detaylandıramadım. Daha sonra aklıma geldikçe eklemeler yaparım.

Hepinize güzel bir yıl diliyorum. Umarım 2016 hepimiz için daha iyi bir yıl olur.

Son olarak kendi yılbaşı şarkım ile yazımı sonlandırıyorum ????

Ayrıca bkz:
Benim için 2014 nasıl geçti?
Benim için 2013 nasıl geçti?
Benim için 2012 nasıl geçti?

Windows Komut Satırında SSH Çalıştırma

Screenshot_9


Merhaba arkadaşlar,
Bugün bir sebepten dolayı SSH lazım oldu. Windows’un Komut Satırında doğrudan SSH çalışmadığını gördüm.
PuTTy’de kurmak istemedim açıkçası. Ne yapsam diye düşünürken ufak bir araştırma sonucu şöyle bir opensource (açık kaynak) proje keşfettim.
http://sshwindows.sourceforge.net/

Öncelikle şu linkten ilgili proje’yi indirin.
http://sourceforge.net/projects/sshwindows/files/OpenSSH%20for%20Windows%20-%20Release/3.8p1-1%2020040709%20Build/setupssh381-20040709.zip/download

İndirdiğinizi zip’ten çıkarıp kurun.
Artık windows komut satırında ssh kullanabilirsiniz. Kolay gelsin ????

ssh [email protected]

jQuery Autocomplete Kullanımı

Merhaba arkadaşlar, bu videoda sizlere jquery autocomplete (otomatik tamamlama) eklentisinin kullanımını gösterdim.

Video içinde bazı linklere giriş yaptım, bunları aşağıda sizlere vereyim hemen;

jQuery CDN Servisi: https://code.jquery.com/
jQuery UI Autocomplete Demo: https://jqueryui.com/autocomplete/
jQuery UI Autocomplete Api Sayfası: http://api.jqueryui.com/autocomplete/

Video içinde hazırladığım kodların örnekleri aşağıdadır;

api.php

try {
    $db = new PDO('mysql:host=localhost;dbname=demo;charset=utf8', 'root', '');
} catch (PDOException $e ){
    die($e->getMessage());
}

$term = $_GET['term'];

$query = $db->query('SELECT * FROM uye
WHERE uye_adi LIKE "%' . $term . '%"', PDO::FETCH_ASSOC);

if ( $query->rowCount() ){

    $data = array();

    foreach ( $query as $row ){
        $data[] = array(
            'value' => $row['uye_adi'],
            'uye_id' => $row['uye_id'],
            'uye_adi' => $row['uye_adi'],
            'uye_eposta' => $row['uye_eposta'],
            'uye_avatar' => $row['uye_avatar']
        );
    }

    echo json_encode($data);

}

index.html 

<!doctype html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Document</title>
    
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css"/>
    <script>
        $(function(){

            var $search = $('#search');

            $search.autocomplete({
                source: 'api.php',
                focus: function(event, ui){
                    $search.val(ui.item.uye_eposta);
                },
                select: function(event, ui){
//                    window.location.href = 'https://www.google.com/#q=' + ui.item.uye_adi;
                    $search.val(ui.item.uye_eposta);
                }
            });

            $search.data('ui-autocomplete')._renderItem = function( ul, item ){

                var $li = $('
  • ');

                $li.html('<a href="#">' +
                        '<img src="' + item.uye_avatar + '" />' +
                        '<span class="username">' + item.uye_adi + '</span>' +
                        '<span class="email">' + item.uye_eposta + '</span>' +
                        '</a>');

                return $li.appendTo(ul);

            };

        });
    </script>

    <style>
        #search {
            width: 500px;
        }
        .ui-autocomplete li a {
            overflow: hidden;
            display: block;
        }
        .ui-autocomplete li a img {
            float: left;
            margin-right: 10px;
            height: 40px;
        }
        .ui-autocomplete li a .username {
            display: block;
            font-size: 16px;
            line-height: 17px;
        }
        .ui-autocomplete li a .email {
            display: block;
            font-size: 12px;
            color: #999;
        }
    </style>

</head>
<body>

<input id="search" type="text"/>

</body>
</html>

    • mysql: demo

    -- phpMyAdmin SQL Dump
-- version 4.1.12
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: May 01, 2015 at 11:43 PM
-- Server version: 5.6.16
-- PHP Version: 5.5.11

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `demo`
--

-- --------------------------------------------------------

--
-- Table structure for table `uye`
--

CREATE TABLE IF NOT EXISTS `uye` (
  `uye_id` int(11) NOT NULL AUTO_INCREMENT,
  `uye_adi` varchar(255) NOT NULL,
  `uye_eposta` varchar(255) NOT NULL,
  `uye_avatar` varchar(255) NOT NULL,
  PRIMARY KEY (`uye_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;

--
-- Dumping data for table `uye`
--

INSERT INTO `uye` (`uye_id`, `uye_adi`, `uye_eposta`, `uye_avatar`) VALUES
(1, 'Tayfun Erbilen', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpt1/v/t1.0-1/p40x40/11150571_931151590276660_1648829158305262977_n.jpg?oh=4069d5e773b3d14b97ad52573aec18d6&oe=55E30655&__gda__=1440015885_52a5a0b45451bc87bad8e780c41e8f35'),
(2, 'Mert Osman Başol', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/p50x50/1964950_10206688116828423_6583006539395380068_n.jpg?oh=a7364b334a368f825451c814b7677eda&oe=55D607BF&__gda__=1439900624_dfaef636f9ea1c6076c155eb71781c8d'),
(3, 'Murat Miregil', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpa1/v/t1.0-1/p50x50/11052443_10205415379451129_1842162222714031022_n.jpg?oh=e7c98bc33a241cb00a27f032e3314cbd&oe=55D5BFCE&__gda__=1439485299_413a895407dfa5889a18c2bed7e3c683'),
(4, 'Batuhan Aydın', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xap1/v/t1.0-1/p50x50/10898165_641650965964699_1189819791888549590_n.jpg?oh=d4101d34b89c0bafd5f138fe41eb2329&oe=55D32566&__gda__=1440316752_ab45034618b777f1202a446b41e51e70'),
(5, 'Tolga Çatalahmetoğlu', '[email protected]', 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/c0.1.50.50/p50x50/10154428_10202845905101633_105216030809094613_n.jpg?oh=6cd6cc5970d17f5070b1edc51117ef17&oe=55A20088&__gda__=1440413345_f47c2827f982db88ecd76c3849067949');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

    Ekstralar

    input’a bir şeyler yazıp json servisinden verileri alırken geçen sürede bir loader eklemek isterseniz .ui-autocomplete-loading classını kullanacaksınız css’de.
    yani;

    .ui-autocomplete-loading {
	background: #fff url(ajax-loader.gif) no-repeat 97%;
}

    gibi..

    Responsive Tablo Yapımı

    Başlık biraz aldatıcı olabilir ama teknik olarak responsive tablo yapımı evet ????
    Uzun bir tablonuzu tablet ya da telefon boyutlarında nasıl düzgün şekilde gösterebileceğinizden kısaca bahsettim.

    Video

    Demo

    http://www.erbilen.net/demo/responsive-tablo/

    Not: Telefon ve tabletlerde gerçek boyutta gözükmesi için aşağıdaki meta etiketini eklemeyi unutmayın!

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">