fedeveloper logo

Front-End Developer Çalışma Notları

HTML

Hiper Metin İşaretleme Dili (İngilizce Hypertext Markup Language, ks. HTML) web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Dilin son sürümü HTML5'tir.

Language Details

HTML5 www.html5rocks.com
HTML5, internetin çekirdek teknolojilerinden HTML işaretleme standardının beşinci sürümüdür. Internet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen... Devamı
PUG (JADE) www.pugjs.org
PUG (eski adıyla JADE) kolay html yazımını sağlayan ve tag sonlarını kapatmayı unutma ya da hata yapma payını en aza indirgeyen bir node.js eklentisidir. Aynı zamanda html yazım hızınızı da... Devamı

CSS

Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları, bilinen kısa adıyla CSS), HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir.

Details

CSS3
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
SCSS / SASS
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
LESS
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.

CSS Tools

Modernizr
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
Normalizer
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
Materialize
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
Reset CSS
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.

JS

JavaScript, yaygın olarak web tarayıcılarında kullanılmakta olan dinamik bir programlama dilidir. JavaScript ile yazılan istemci tarafı betikler sayesinde tarayıcının kullanıcıyla etkileşimde bulunması, tarayıcının kontrol edilmesi, asenkron bir şekilde sunucu ile iletişime geçilmesi ve web sayfası içeriğinin değiştirilmesi gibi işlevler sağlanır.

Details

JavaScript
İçerik hazırlanıyor. JavaScript temellerini öğrenmek isteyenler buraya tıklasın.
ES2015
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: ecma-international.org.
ES16/17
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: es6-features.org.
TypeScript
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: typescriptlang.org.
CoffeeScript
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: coffeescript.org.
JSON
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: json.org.
AJAX
İçerik hazırlanıyor. Ajax hakkında bilgi edinmek isteyenler buraya tıklasın.

Client Side JS Frameworks

Angular2
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: angular.io.
Aurelia
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: #.
Backbone.js
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: backbonejs.org.
Ember.js
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: emberjs.com.
React
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: #.
Vue.js
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: vuejs.org.

Server Side JS Frameworks

Node.js
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: nodejs.org.
Express.js
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: expressjs.com.

JS Libraries

Jquery
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: jquery.com.
Dojo Toolkit
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: dojotoolkit.org.
Prototype JavaScript Framework
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: prototypejs.org.
React
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: facebook.github.io/react.
YUI Library
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: yuilibrary.com.

JavaScript Task Runners

Gulp.js
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: gulpjs.com.
Grunt.js
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: gruntjs.com.

Unit Testing

Jasmine
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: jasmine.github.io.
Karma Test Runner
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: karma-runner.github.io.

UX/UI

Kullanıcı Deneyimi, kullanıcının bir ürünü/sistemi/hizmeti kullanırkenki davranış, tutum ve duygularıyla alakalıdır. Kişinin bir sistemin “faydalı olma”, “kullanım kolaylığı” ve “verimlilik” gibi yönleriyle ilgili algılarını içerir.

Details

User Experience (UX)
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
User Interface Design (UI / UID)
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
FONTs
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.

Frameworks

Bootstrap
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
960 Grid
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: #.
Flexible Grid System
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: flexible.gs.
Material Design
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: #.
GoodUI
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: #.
Kendo UI
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: #.
Metronic
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: #.

Full Stack

Full-stack terimi, hem back-end hem de front-end teknolojileri ile rahat çalışabilen geliştiriciler anlamına gelir. Daha spesifik olmak gerekirse; Photoshop tasarımlarını front-end koduna dönüştürmesinin yanı sıra geliştiricinin veritabanları, PHP, HTML, CSS, JavaScript ve aradaki diğer tüm dil ve programlarla beraber rahatlıkla çalışabilmesi anlamına geliyor.

Full-stack Çözümler

MEAN Stack
MongoDB, Express.js, AngularJS ve Node.js teknolojileri ile hazırlanan çözümlerdir.
WAMP Stack
Windows, Apache, MySQL ve PHP/Python/Perl teknolojileri ile hazırlanan çözümlerdir.
LAMP Stack
Linux, Apache, MySQL ve PHP/Python/Perl teknolojileri ile hazırlanan çözümlerdir.
LEMP Stack
Linux, Nginx, MySQL ve PHP/Python/Perl teknolojileri ile hazırlanan çözümlerdir.

Front-End Çözümler

JAM Stack
JavaScript, APIs ve Markup teknolojileri ile hazırlanan çözümlerdir.

Google

Dünya teknoloji devi, hergün kapısını çaldığımız biri, kısacası bildiğimiz Google.

Google Ürünleri

Google Drive
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
Webmaster Tools
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
Google Tag Manager
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
Google Analytics
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
Google Maps
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
Gmail
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
GO (Google Optimization)
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.

GIT

Lorem ipssum.

DATABASE

Verileri saklamak istediğinizde...

Details

MongoDB
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.
MySQL
İçerik hazırlanıyor. Orjinal sitesini ziyaret etmek isteyenlere: proident minim.

Programlar

Kullandığım bazı masaüstü programları.

Grafik Programları

Adobe Photoshop
Fotoğraf düzenleme programı.
Maya
3D modelleme programı.

IDE'ler

Visual Studio (for Windows)
Ofiste .NET projelerinde çalışırken kullandığım IDE.
WebStorm (for Mac & Windows)
Ücretli olarak tek kullandığım ve en popüler IDE'lerden biri.
Sketch (for Mac)
Mac üzerinde oldukça hızlı çalışan ve oldukça verimli bir IDE.
Xcode (for Mac)
Xcode is an integrated development environment (IDE) containing a suite of software development tools developed by Apple for developing software for macOS, iOS, WatchOS and tvOS.

Text Editor'ler

Notepad++ (for Windows)
Windows üzerinde oldukça hızlı çalışan ve oldukça verimli bir IDE. ZenCoding Cheat Sheet
Visual Studio Code (for Mac)
Mac üzerinde oldukça hızlı çalışan ve oldukça verimli bir text editor.
Sublime Text (for Mac)
Mac üzerinde oldukça hızlı çalışan ve oldukça verimli bir IDE.

WebTool

İşinize yarayabilecek, benimde oldukça fazla kullandığım web araçları ;)

Hayat Kurtaran WebTool'lar

Trellotrello.com
Kullanımı kolay, hem web üzerinden hem de mobil uygulamalardan düzenleme yapabileceğiniz bir proje yönetim sistemi.
DigitalOceandigitalocean.com
Güvenilir ve sorunsuz cloud hosting firması.
Tinypng tinypng.com
İmajlarınızın boyutunu küçülterek yüklenme süresini düşürmek için kesinlikle tavsiye ederim.
Icomoon icomoon.io
Kendi font setinizi yapmak yada varolan bir fontsetinizi düzenlemek için mükemmel bir araç.
Pixlr pixlr.com
Photoshop'tan hallice online fotograf düzenleme sitesi.
Kelime Analizi (by r10.net)tıkla
Sitenizde geçen kelimelere bir göz atın ;)
ACSII Tablolarıalt-codes.net
Çok sık kullandığınız ama klavyede bir türlü yerini bulamadığınız karakterler mi var? Bu tabloyu çok seveceksiniz. Alt tuşuna basılı tutarken istediğiniz karakterin numarasını numpad'den tuşlayın.
PlaceKittenplacekitten.com
Dummy bir sayfa hazırlarken belirli ölçülerde imajlara hiç ihtiyaç duydunuz mu? Onları aramak yada düzenlemek yerine bu siteden hızlıca kullanabilirsiniz. Aynı zamanda çok sevimliler.
F.luxjustgetflux.com
Günün yaklaşık 10 saati sürekli ekrana bakıyoruz. Hem verimli çalışma süremizi uzatmak hemde göz sağlığımız için ekran ışığını oda ışığı ile dengeleyen F.lux'ı tavsiye ederim.
F.luxss64.com/bash
Linux komutlarına ihtiyaç duyarsanız diye listeyi buraya bırakıyorum.