Gulp ile İşlerinizi Kolaylaştırın

Merhaba arkadaşlar, front-end çalışmalarında gulp kullandığım şu dönemde bilmeyenler için bir makale yazmaya karar verdim. Öncelikle ne nedir bundan başlayalım ve neden kullanmamız gerek anlayalım.

Gulp nedir?

Gulp, geliştirme yaparken iş akışımızı yavaşlatan işlemleri otomatik yapmamızı sağlayan bir araçtır.

Gulp hangi durumlarda kullanılır?

CSS, HTML, JavaScript ya da Resim dosyalarınızla ilgili işlemler için kullanılabilir.

Ben kısaca CSS’de SASS ve LESS dosyalarımı çalıştırdım, minify ettim, tek dosya haline getirdim. Görselleri sıkıştırarak daha küçük boyut haline getirdim. HTML’leri herhangi bir template engine sisteminde otomatik çıkarttım. Javascript’te minify edip tüm js dosyalarını tek bir js dosyasına çevirdim. Ve bunları yaparken gulp dosyamı ayarladıktann sonra hiçbir şey yapmadım 🙂

Gulp nasıl kurulur?

Gulp, çalışması için node.js ve npm’in kurulu olması gerek. Öncelikle node.js’i sisteminize kurun. Daha sonra şu komutu çalıştırın;

npm install gulp-cli -g
npm install gulp -D

Burada -D aynı zamanda –save-dev değerine eşittir.

Gulp nasıl kullanılır?

Öncelikle dizininizde gulpfile.js adında bir dosya oluşturun. Gulp ile ilgili işlemleri bu dosya içinde yapacağız. Ancak gulp’ı tek başına kullanmak yetmiyor, başka paketlerde indirmeliyiz. Örneğin;

  • sass compiler için – gulp-sass
  • css minify için – gulp-csso
  • dosyaları birleştirmek için – gulp-concat
  • css’de tarayıcı versiyonuna göre prefix ekletmek için – gulp-autoprefixer
  • resim dosyalarını sıkıştırmak için – gulp-imagemin
  • javascript dosyalarını minify etmek için – gulp-uglify
  • dosyaları silmek için – del
  • html’i sıkıştırmak için – gulp-htmlmin
  • belli bir sırayla taskları başlatmak için – run-seqeuence
  • anlık olarak değişiklikleri görmek için – browser-sync

Bu paketleri tek tek isimleriyle şu şekilde kurabilirsiniz;

npm install --save-dev paket_adi

Burada --save-dev dememizin sebebi, bu paketlere sadece geliştirirken ihtiyacımız var, production’da ihtiyacımız olmadığından bu şekilde kuruyoruz.

Şimdi paketleri kurmadan önce bir tane package.json dosyası oluşturalım. Bunun için şu komutu çalıştıralım;

npm init

Daha sonra enter – enter diyerek sonuna kadar gidelim ve dosyamız oluşmuş olacak. Dosya oluştuktan sonra şunun gibi bir şe yolacak içeriği;

{
  "name": "erbilen-test",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Şimdi bunu neden oluşturduk birazdan anlayacağız. Dilerseniz artık paketleri kurabilirsiniz. Ya da package.json dosyanızı şu şekilde değiştirip;

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {},
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-csso": "^3.0.1",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^4.1.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.1",
    "run-sequence": "^2.2.1"
  }
}

Şu komutu çalıştırırsanız otomatik paketler kurulacaktır;

npm install

Paketlerin kurulması biraz zaman alır, kurulduğunda çalıştığınız dizine node_modules diye bir klasör gelecek. Tüm paketler bunun içinde yer alıyor.

Son olarak çalıştığımız klasör içerisinde dist ve src adında 2 klasör oluşturalım. dist burada projenin son hali, src ise sizin çalıştığınız versiyon olacak. Yani production ürünümüz dist içerisinde yer alacak.

Artık gulp’ı ve diğer paketleri beraberinde kullanmaya hazırız. Öncelikle kullanacağımız paketleri sayfamıza dahil edelim. gulpfile.js dosyamız şu şekilde olacak;

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const minifyCSS = require('gulp-csso');
const minifyImg = require('gulp-imagemin');
const minifyJS = require('gulp-uglify');
const minifyHTML = require('gulp-htmlmin');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const del = require('del');
const runSequence = require('run-sequence');

Ve artık tasklarımızı yazmaya başlayalım. Gulp’ta bir task oluşturmanın yolu şudur;

gulp.task('task_adi', () => {
    // işlemler
});

Bunu baz alarak browser-sync için ilk taskımızı oluşturalım.

gulp.task('browser-sync', () => {
    browserSync.init({
        server: {
            baseDir: "dist"
        }
    });
});

Burada baseDir yolunu dist olarak belirledik. Çünkü projemizin son hali orada yer alacak. Ve browser-sync bu klasörü bize serve ederek src altında herhangi bir html’de değişiklik olduğunda sayfayı reload edecek. Burada dikkat etmemiz gereken şey src/*.html yerine src/**/*.html yazmış olmamız. Bu src altındaki .html ile biten ve src altında herhangi bir klasör içinde .html ile biten tüm html dosyaları için geçerli olsun demek.

Şimdide CSS için taskımızı oluşturalım;

gulp.task('css', () => {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sass({
            outputStyle: 'nested',
            precision: 10,
            includePaths: ['.']
        }).on('error', sass.logError))
        .pipe(minifyCSS())
        .pipe(autoprefixer())
        .pipe(concat('app.min.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
});

Bu taskta sass’ı kullandık, minify ettik, prefixleri eklettik, concat ile tek dosyada birleştirip adını app.min.css koyduk, dest kısmına dist içindeki css klasörüne eklenecek dedik ve son olarak browser-sync kullandık. Bunuda watch ile işlem yaptığımızda anlayacaksınız.

Şimdide JS için taskımızı oluşturalım;

gulp.task('js', () => {
    return gulp.src('src/js/**/*.js')
        .pipe(concat('app.min.js'))
        .pipe(minifyJS())
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.stream());
});

Bu taskta yine javascript dosyalarının yolunu belirttikten sonra concat ile tek dosya haline getirdik, uglify ile minift ettik ve dist içindeki js klasörüne çıkarttık. CSS’te olduğu gibi bunda da browser-sync işlemi yaptık.

Şimdide HTML için taskımızı oluşturalım;

gulp.task('html', () => {
    gulp.src('src/**/*.html')
        .pipe(minifyHTML({
            collapseWhitespace: true,
            removeComments: true
        }))
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.stream());
});

Bu taskta da yine html dosyalarının yolunu belirttik, minify ettik ve dist içerisine çıkarttık. HTML’i minify etmek zorunda değilsiniz tabi, ben öyle can sıkıntısına ettim o ayrı 😀

Şimdide resimler için taskımızı oluşturalım;

gulp.task('img', () => {
    gulp.src('src/img/**/*')
        .pipe(minifyImg())
        .pipe(gulp.dest('dist/img'));
});

Bu taskta da yine resimlerin yolunu belirttik, minify ettik ve dist içindeki img klasörüne çıkarttık.

Şimdi ne olacak?

Şimdi tasklarımızı oluşturduk. Son 3 taskımız kaldı, bunlardan ilki gulp çalıştığında dist altındaki ilgili dosyaları silmesi için. İkincisi watch ile dosyaları izleyip bir değişiklik olduğunda ilgili taskları yeniden çalıştırmak için, ve son olarak runSequence kullanarak tasklarımızı sırayla çalıştırmak için;

gulp.task('delete', () => del(['dist/css', 'dist/js', 'dist/img', 'dist/**/*.html']));

gulp.task('watch', () => {
    gulp.watch("src/scss/**/*.scss", ['css']);
    gulp.watch("src/js/**/*.js", ['js']);
    gulp.watch("src/img/**/*", ['img']);
    gulp.watch("src/**/*.html", ['html']);
});

gulp.task('default', () => {
    runSequence(
        'delete',
        'html',
        'css',
        'js',
        'img',
        'browser-sync',
        'watch'
    );
});

İlk taskta css, js, img ve .html dosyalarını sildik. Burada ben özellikle belirttim hangileri olacağını, bazen font dosyası vs. atıyoruz dist içine oda silinmesin diye.

İkinci taskta gulp’ın watch özelliğini kullandık. Buda ilgili dosyaları izleyip bir değişiklik olduğunda belirlediğimiz taskları çalıştırmamızı sağlıyor. Hatırlarsanız css, js tasklarında browser-sync ile ilgili bir kod yazmıştık. İşte burada watch ile izlenip değişiklik olduğunda o task çalıştığında browser-sync’de sayfayı otomatik yenileyip değişiklikleri görmemizi sağlayacak.

Son taskımızın adı default, normalde gulp’ı çalıştırırken task adı belirtilmez ise otomatik olarak default taskı çalıştırılır. Bu yüzden adını bu şekilde koyduk. Bu taskta ise sırasıyla tasklarımız çalıştırıyoruz, yani önce delete taskı çalışıp dist içindeki herşeyi silecek, sonra html taskı çalışıp dist içine html dosyalarını atacak, daha sonra css, js, img. Ondan sonra browser-sync bize bir sunucu oluşturup dosyaları canlı olarak izlememize olanacak sağlayacak. Ve son olarak watch taskıda değişiklikleri takip edecek. Artık gulp’ı çalıştırmak için şunu yazmamız yeterli;

gulp

Sonuç şöyle olacak;

MacBooks-MacBook-Pro-2:frontend tayfunerbilen$ gulp
[00:18:12] Using gulpfile /Applications/MAMP/htdocs/frontend/gulpfile.js
[00:18:12] Starting 'default'...
[00:18:12] Starting 'delete'...
[00:18:12] Finished 'default' after 7.77 ms
[00:18:12] Finished 'delete' after 37 ms
[00:18:12] Starting 'html'...
[00:18:12] Finished 'html' after 16 ms
[00:18:12] Starting 'css'...
[00:18:12] Finished 'css' after 451 ms
[00:18:12] Starting 'js'...
[00:18:13] Finished 'js' after 1.4 s
[00:18:13] Starting 'img'...
[00:18:13] Finished 'img' after 1.55 ms
[00:18:13] Starting 'browser-sync'...
[00:18:14] Finished 'browser-sync' after 41 ms
[00:18:14] Starting 'watch'...
[00:18:14] Finished 'watch' after 178 ms
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.21:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: ./dist/
[00:18:44] gulp-imagemin: Minified 65 images (saved 200 kB - 5.9%)

Şimdi gördüğünüz gibi http://localhost:3000 üzerinden artık projemize ulaşabiliriz. Hatta http://192.168.1.21:3000 üzerinden aynı wifi’ye bağlı diğer cihazlardanda ulaşabiliriz. Böylece bir değişiklik olduğunda tüm cihazlardan aynı anda görebileceğiz.

Son hali

Yazdığım kodların son halini github sayfamda paylaştım. Eğer git kurulu ise;

git clone https://github.com/tayfunerbilen/frontend-gulp.git

diyerek indirebilirsiniz. Ya da şu linkten;
https://github.com/tayfunerbilen/frontend-gulp indirebilirsiniz.

İndirdikten sonra;

npm install
gulp

şeklinde kurup çalıştırabilirsiniz. Hepsi bu kadar 🙂 Kolaylıklar dilerim.

PHP Multi Process Asenkron Dosya Çalıştırma

Şimdi bildiğiniz gibi PHP’de kodların hepsi execute olduktan sonra sayfada gösterilir. Yani hepsi bitmeden işlem sonuçlanmaz. Bazı durumlar vardır ki, bunun böyle olmasını istemezsiniz. Örnek vermek gerekirse, bir e-posta bülten listeniz olsun. Ve bir konu paylaştıktan sonra atıyorum 5000 kişilik listeye e-posta göndereceksiniz.

Eğer bunu postu paylaşır paylaşmaz yaparsanız mailler gönderilene kadar sayfada bir bekleme süresi olacak. Ancak bizim istediğimiz, bunu arkaplan’da çalıştırarak göndermek. Aslında bunun için çok basit bir şey yazacağız. Öncelikle mailleri gönderecek php dosyasını oluşturalım. Örneğin send-email.php olsun.

<?php

sleep(5); // 5 sn sonra çalış

$postId = $argv[1];
// .. mail gönderme işlemleri vs.

?>

Şimdi postu yayınladıktan sonra şu kodu çalıştırmamız yeterli olacak;

exec('php -f send-email.php -- "5" > /dev/null 2>&1 &');

Burada tabi doğru dosya yolunu vermek önemli. Bu şekilde kodumuz çalıştığında send-email.php’deki 5 saniye bekleme kısmı mevcut sayfaya yansımayacaktır. Biz konumuzu oluşturmuş ve beklemeden işlem yapmaya devam ederken arkaplanda mailler gitmeye devam edecektir. Ayrıca dikkat ettiyseniz send-email.php’ye parametre gönderdik exec() komutu içinde. Gelen parametreleri $argv değişkeninde tutuluyor. 0 indexli olan değer dosyanın adı o yüzden 1’den başlayarak kullanın.

Birden fazla parametre göndermek isterseniz;

exec('php -f send-email.php -- "5" "tayfun erbilen" "deneme" > /dev/null 2>&1 &');

şeklinde gönderebilirsiniz. send-email.php’de $argv[1] $argv[2] $argv[3]şeklinde değerlere ulaşabilirsiniz.

Not: exec() fonksiyonu genelde hostinglerde güvenlikten dolayı kapalı oluyor. Bu yüzden kendi sunucunuzu kullanmaya çalışın, zaten hosting nedir allah aşkına? Boşverin onları 🙂

Kolay gelsin.

PHP’de İfadeleri Karşılaştırmak

Bazen yönetim paneline girişleri veritabanı yerine dosyada tutuyorum. Basit bir if-else kontrolü ile giriş yaptırıyorum. Bu gibi durumlarda, kullanıcı adı ve şifre nasıl yazıldıysa aynen o şekilde yazdırmak gerekiyor. Yani büyük küçük harfe vs. duyarlı oluyor. Bu gibi durumlar için PHP’de karşılaştırma fonksiyonları var. Örneğin 2 ifadenin doğruluğunu karşılaştırıyor. Mesela;

$a = 'Tayfun';
$b = 'Tayfun';
echo strcmp($a, $b); // Çıktı: 0

Eğer sonuç 0 ise, ifadeler birbirine eşit demektir. Ancak bu örneği şöyle değiştirseydik;

$a = 'Tayfun';
$b = 'tayfun';
echo strcmp($a, $b); // Çıktı: -32

Bu durumda ifadeler birbiriyle eşleşmiyor çünkü büyük küçük harf problemi devreye giriyor. Bunu çözmek için ise strcasecmp() fonksiyonunu kullanabiliriz. Aynı örneği birde şöyle yapalım;

$a = 'Tayfun';
$b = 'tayfun';
echo strcasecmp($a, $b); // Çıktı: 0

Sonuç başarılı. Yani bu gibi durumlar için strcasecmp() fonksiyonu kullanılabilir.

strftime() Türkçe Karakter Hatası ve Çözümü [PHP]

PHP’de türkçe tarih belirlerken setlocale() ve strftime() fonksiyonlarını kullanıyoruz. Örnek vermek gerekirse;

setlocale(LC_TIME, 'tr_TR');
echo strftime('%d %B %Y'); // 28 Eyl l 2018

Ancak bu bazı sunucularda türkçe karakter hatalarına yol açıyor. Örneğin yukarıdaki çıktıda olduğu gibi.. Bu gibi durumlarda iki şey yapılabilir.

1. çözüm yolu

setlocale() fonksiyonunda 2. parametrede dil ve ülke kodu verilirken nokta ile karakter seti tanımlaması yapılabilir. Örneğin;

setlocale(LC_TIME, 'tr_TR.UTF-8');

Bu problemi ortadan kaldıracaktır.

2. çözüm yolu

srtftime() fonksiyonu utf8_encode() fonksiyonundan geçirilebilir. Örneğin;

setlocale(LC_TIME, 'tr_TR');
echo utf8_encode(strftime('%d %B %Y')); // 28 Eylül 2018

Bugün benim başıma geldi, çözümü arayıp buldum. Yarın sizinde başınıza gelirse bu şekilde halledebilirsiniz. Kolay gelsin 🙂

Mysql Aynı Tabloda Farklı Koşullara Göre Toplam Kayıt Sayısını Bulmak

Farkındayım başlık çok uzun oldu 😀 Ancak benim işime yaradığı gibi bir gün sizinde işinize yarayabilir. Şimdi örnek vermek gerekirse, yorumlar tablonuz olsun. Yorumların bazıları onaylı, bazıları onaysız olarak kayıt edilmiş. Ve siz toplam yorum sayısını, onaylı yorum sayısını ve onay bekleyen yorum sayısını bir sorguda almak istiyorsunuz. Mantıken nasıl yaparsınız? Ya subquery kullanırsınız ya da bunun yerine SUM() fonksiyonun kullanırsınız. Hemen bir örnek verelim.

Eğer count() fonksiyonunu kullanırsak;

SELECT count(yorum_id) toplam FROM yorumlar;

Sonuç;

+--------+
| toplam |
+--------+
|  2052  |
+--------+

Şimdi SUM() fonksiyonu ile birlikte şöyle bir kullanım yapacağız. Örneğin onay 1 ise onaylı yorumları, 0 ise onaysız yorumları saydıracağız.

SELECT
    count(yorum_id) toplam,
    SUM(onay = 1) onayli_yorumlar,
    SUM(onay = 0) onaysiz_yorumlar
FROM
    yorumlar

Sonuç;

+--------+-----------------+------------------+
| toplam | onayli_yorumlar | onaysiz_yorumlar |
+--------+-----------------+------------------+
|   2052 |               1 |             2051 |
+--------+-----------------+------------------+

Son olarak, eğer birden fazla tabloyu join ile bağladıktan sonra count işlemi yaptığınızda rakamlar saçmalıyorsa DISTINCT ile benzersizleri toplamak gerekir. Ama onun kullanımı biraz daha karışık, şöyle bir kullanım gerektiriyor;

SELECT
    count(yorum_id) toplam,
    REPLACE(SUM(onay = 1) * count(DISTINCT yorum_id) / count(*), '.0000', '') onayli_yorumlar,
    REPLACE(SUM(onay = 0) * count(DISTINCT yorum_id) / count(*), '.0000', '') onaysiz_yorumlar
FROM
    yorumlar
INNER JOIN
    ...

Bu yazım bu kadardı, bir gün böyle birşeye ihtiyaç olursa zaten takıldığınız noktada yorum yazarsınız. Kolay gelsin 🙂

MySQL’de Trigger Kullanımı

Bu makalede sizlerle MySQL’de trigger’ların nasıl kullanıldığını ve amacını konuşacağız. Eğer MySQL’de neden trigger kullanmalıyım sorusuna cevap arıyorsanız kendinize şu soruyu sormanız gerek. Herhangi bir insert, update ya da delete işleminden sonra bir işlem yaptırmak ister miydiniz? Benim anlatacağım senaryoda, posts adında bir tablom olsun. Bu tabloda makalelerimi tutuyorum. Ve makaleyi güncellediğimde, eski versiyonunu revisions tablosuna post id’si ile birlikte kaydetmek istiyorum.

İşte tam olarak bu aşamada bir trigger yazmamız gerek tabi eğer bu işlemi mysql’de çözmek istiyorsak. Yok arkadaş ben PHP’de if ($insert) ise o zaman şuraya $db->query() yazarım diyorsan o senin ameleliğin olur, bir şey diyemem 🙂

Şimdi gelelim bu trigger’ları oluşturmak nasıl oluyor. Temel anlamda bir trigger’ın ihtiyacı olan syntax şudur;

DELIMITER $$
CREATE TRIGGER [trigger_adi] [BEFORE|AFTER] [INSERT|UPDATE|DELETE] ON [tablo_adi]
    FOR EACH ROW 
        BEGIN
            -- işlemler
        END$$
DELIMITER ;

Burada DELIMITER $$ ve kısımları, mevcut delimiter’ı $$ ile değiştirmemizi yarıyor. Çünkü defualt olarak ; (noktalı virgül) olduğundan biz trigger içinde herhangi bir noktalı virgül kullanınca kodlar patlıyor. Bu yüzdendir ki bir bütün olarak yorumlanması için delimiter’ı değiştirip $$ yapıyoruz ve END kısmının bitişine noktalı virgül yerine $$ koyuyoruz.

Şimdi gelelim bizim senaryoya. Tablomuz posts tablosuydu ve kolonlarımız id, title ve content olsun. Birde revisions diye bir tablom vardı aynı şekilde id, post_id, title, content, created_at kolonlarına sahip olsun. Şimdi ben posts tablosunda bir veri güncellendiğinde, eski halini revisions tablosuna kaydedecek bir trigger yazmak istiyorum. Nasıl yazarım?

DELIMITER $$
CREATE TRIGGER after_post_update AFTER UPDATE ON posts
    FOR EACH ROW 
        BEGIN
            IF NEW.title != OLD.title OR NEW.content != OLD.content THEN
                INSERT INTO revisions SET post_id = OLD.id, title = OLD.title, content = OLD.content;
            END IF;
        END$$
DELIMITER ;

Burada OLD ve NEW diye anahtarlar gördünüz. Eğer INSERT için trigger yazıyorsak sadece NEWUPDATE için yazıyorsak OLD ve NEWDELETE için yazıyorsak sadece OLD anahtarlarını kullanarak eski ve yeni değerlere ulaşabiliyoruz. Yani trigger’daki OLD.title, update olmadan önceki title değerini, NEW.title update olduktan sonraki title değerini temsil ediyor. Dolayısı ile biz trigger’da şunu yaptık, eğer eski başlık yeni başlıktan farklı ise ya da eski içerik yeni içerikten farklı ise o zaman revisions tablosuna bunu kaydet.

Mevcut trigger’ları görmek isterseniz şu komutu kullanabilirsiniz;

SHOW TRIGGERS;

Oluşturduğunuz trigger’ı kaldırmak için ise;

DROP TRIGGER [trigger_adi]

CSS ile Kayan Label Yapımı vs jQuery Plugini

Bugün gezinirken şöyle bir jquery plugini gördüm;
https://www.jqueryscript.net/demo/jQuery-Floating-Placeholder-Text-Plugin-Placeholder-Label/

Amaç basit, input’un içine bir label yerleştiriyor, tıklayınca animasyonlu olarak onu yukarıya kaydırıyor. Eğer input’a yazı yazılırsa label yukarıda kalmaya devam ediyor ve label’ın texti değiştiriyor. Ve bunun için bir sürü kod yazması gerekmiş eklentiyi yazan arkadaşın.

Bende bu örneği sadece CSS ile nasıl yapacağımı göstermek istedim.

Kısaca şöyle bir HTML yapımız olsun;

<div class="field">
    <input type="text" required autocomplete="off" id="username" value="tayfunerbilen">
    <label for="username" title="Kullanıcı adınızı girin" data-title="Kullanıcı adı">
</div>

Ve CSS kodlarımız;

.field {
    position: relative;
    margin-bottom: 15px;
}

.field label::before {
    content: attr(title);
    position: absolute;
    top: 0;
    left: 15px;
    line-height: 40px;
    font-size: 14px;
    color: #777;
    transition: 300ms all;
}

.field input {
    width: 100%;
    line-height: 40px;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 14px;
    color: #222;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.field input:focus {
    outline: 0;
    border-color: blue;
}

.field input:valid + label::before {
    line-height: 20px;
    font-size: 12px;
    top: -10px;
    background: #fff;
    padding: 0 6px;
    left: 9px;
    content: attr(data-title);
}

.field input:focus + label::before {
    line-height: 20px;
    font-size: 12px;
    top: -10px;
    background: #fff;
    color: blue;
    padding: 0 6px;
    left: 9px;
}

Daha fazla detay için dersi izlemeniz yeterli

Demo

Node.js, Vue.js, React ve Redux Eğitim Setleri

Merhaba dostlar, yıllar önce prototürk’ü ilk açtığımda eğitmenler arasında sevgili dostum Mehmet Seven’de vardı. O zaman sizlere jQuery dersleriyle eşlik ediyordu ve bir çok kişiye ileri seviye jquery bilgisi kazandırdı. Son yıllarda ise Mehmet, Javascript konusunda uzmanlaştı ve Javascript ile birlikte yeni teknolojileride bilgisine katarak yoluna devam etti.

Çoğu kişi benden Javascript ve framework’leri hakkında eğitim seti istiyor ancak benden çok daha iyi bilgisi olan Mehmet Seven, bu konuda 2 yararlı eğitim seti çıkardı. Bende ilk alanlardanım. Ve setleri javascript ve React, Redux, Node.js’i öğrenmek isteyenlere mutlaka tavsiye ederim.

Node.js’e meraklı olanlar mutlaka aşağıdaki linkten gözatsın;

SIFIRDAN HER YÖNÜYLE JAVASCRİPT & NODE.JS

React ve Redux’a ilgi duyanlar ise şu eğitime gözatsın;

SIFIRDAN HER YÖNÜYLE REACT VE REDUX

Ayrıca kablosuzkedi youtube kanalının sahibi, Codeigniter kitabının yazarı Gökhan Kandemir’in ise, vue.js ile ilgili harika bir eğitim serisi var. Bunuda şiddetle öneririm. Bu tür içeriklerin türkçe olarak kaynaklandırılması çok önemli, öğrenmek isteyenlerede çok büyük bir kolaylık.

SIFIRDAN İLERİ SEVİYE VUE.JS EĞİTİMİ VE UYGULAMA GELİŞTİRME

Hala ingilizceyi bahane mi ediyorsunuz?

İşimizin gereği mutlaka ingilizceyi öğrenmemiz gerekiyor. Eğer hala bir adım atmadıysanız, aşağıdaki eğitim setlerine de bir bakın.

Sıfırdan İleri Seviyeye İngilizce Eğitim Seti (50.5 Saat)

Özel Ders Formatında Sıfırdan Zirveye İngilizce Eğitim Seti (24 saat)

Baştan Sona İngilizce Eğitimi – Sıfırdan Başlayanlar İçin (20.5 Saat)

Udemy’de En Çok Satılan 5 Yabancı PHP Kursu

Merhaba arkadaşlar, bildiğiniz gibi ben Udemy’de eğitmenlik yapıyorum. Ancak aynı zamanda bir öğrenciyimde. Çok fazla eğitim seti satın alıp inceliyorum ve bilgilerimi taze tutmaya çalışıyorum.

Bu yazıda sizlere, benimde satın alıp bakma şansımın olduğu udemy’nin en çok satan 5 php kursunu tanıtmak istiyorum.

PHP FOR BEGİNNERS – BECOME A PHP MASTER – CMS PROJECT

Bu kurs sizlere sıfırdan başlayıp bir PHP ustası olmayı öğretmeyi hedefleyen bir eğitim serisi. Ve dünya çapında en çok satanlar listesinde yer alıyor. Toplamda 36 saat sürüyor.

KURSU İNCELEMEK İÇİN TIKLAYIN

PHP WİTH LARAVEL FOR BEGİNNERS – BECOME A MASTER İN LARAVEL

Bu kurs ile bir php framework’ü olan Laravel’in temellerini öğreneceksiniz. Hiç bilmeyenler için gerçekten açıklayıcı bir eğitim serisi. Ve dünya çapında en çok satanlar listesinde yer alıyor.  Toplamda 31.5 saat sürüyor.

KURSU İNCELEMEK İÇİN TIKLAYIN

PHP OOP: OBJECT ORİENTED PROGRAMMİNG FOR BEGİNNERS + PROJECT

Bu kurs OOP konusuna yeni başlamış kişileri hedefliyor. Eğer sizde ciddi anlamda OOP konusuna merak sarıpta bir şeyler yapmayı başaramadıysanız bu kursun faydasını göreceksiniz. Toplamda 18.5 saat sürüyor.

KURSU İNCELEMEK İÇİN TIKLAYIN

CREATE A SPOTİFY CLONE FROM SCRATCH – JAVASCRİPT, PHP, MYSQL

Bu kurs benim en sevdiğim kurslardan bir tanesi. Spotify’ı bilmeyen yoktur, müzik dinleme uygulaması. Bu kursta PHP, Javascript ve MySQL kullanılarak Spotify benzeri bir sistem geliştiriliyor. Yani proje yaparak PHP öğrenmiş oluyorsunuz. Aynı zamanda javascript ile de bir çok şeyin inceliklerini öğrenebilirsiniz.

KURSU İNCELEMEK İÇİN TIKLAYIN

CREATE A REAL SOCİAL NETWORK LİKE FACEBOOK İN PHP + MYSQL

Bir başka sevdiğim kurs ise, PHP ile Facebook benzeri bir sosyal ağ projesinin oluşturulduğu bu seri. Elbette bu seride sadece PHP değil, MySQL sorgularının derinliklerini, Javascript ipuçlarını da öğrenmiş olacaksınız.

KURSU İNCELEMEK İÇİN TIKLAYIN

ÖNEMLİ NOT!!

Arkadaşlar ingilizce anlatılan eğitim setlerini alıp incelemek ve bir şeyler öğrenmek için ingilizce’yi çok iyi bilmenize gerek yok. Başlangıç düzeyinde bile olsanız, sadece işiniz gereği belli terimlere bile hakim olsanız, yazılan kodlar ortak olduğu için mutlaka anlayıp ders çıkaracağınız konular olacaktır. Ben bu şekilde merak ettiğim konulara daha hızlı ulaşabiliyorum, o yüzden hala ingilizce bilmiyorum diye bahaneleriniz var ise onlar içinde birkaç udemy kursu önereyim, zira bu işi yapacaksınız ingilizce şart! Lütfen artık bahanelerin ardına sığınmayın ve kendiniz için bir şey yapmaya başlayın.

Sıfırdan İleri Seviyeye İngilizce Eğitim Seti (50.5 Saat)

Özel Ders Formatında Sıfırdan Zirveye İngilizce Eğitim Seti (24 saat)

Baştan Sona İngilizce Eğitimi – Sıfırdan Başlayanlar İçin (20.5 Saat)