BLOG

  • Angular 5 Create New Pipe

    14.04.2018

    Hi there friends, let me show you an example of how to create new pipes (Filters) in Angular. 

    In this example we create a new pipe which removes last desired number of characters from a string.

    1.) run angular-cli command to create a new pipe:

    ng g pipe common/pipes/removeLastChars --skip-import

    2.) Register this new pipe to AppModule.

    3.) Codes:


    import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
    name: 'removeLastChars'
    })
    export class RemoveLastCharsPipe implements PipeTransform {

    transform(value: any, args?: any): any {
    let removed = value.substr(0, value.length - args);
    return removed;
    }

    }

    Value parameter references the value to be filtered,

    args parameter references the character number to be removed.

    HTML:

    {{valueToBeFiltered | removeLastChars:'3'}}

    That's all, have nice coding :)

  • Custom Checkbox With Only Fontawesome

    03.04.2018

    Hi there friends, I've made a custom style checkbox only using with fontawesome, here the codes;

    HTML:

    <div class="custom-checkbox">
      <label for="custom-cb">
       <input type="checkbox" class="" id="custom-cb">
      </label>
    </div>

    SCSS:

    .custom-checkbox{
    label{
    position: relative;
    input {
    visibility: hidden;
    &:before, &:after{
    visibility: visible;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #444;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: -3px;
    left: 0;
    }
    &:before{
    display: none;
    }

    &:after {
    display: block;
    content: "\f0c8";
    }
    }

    input:checked{
    &:before{
    display: block;
    content: "\f14a";
    }

    &:after{
    display: none;
    }
    }
    }
    }

  • Css Flexbox

    27.03.2018

    Hi there firends, I'm gonna quick tell about what is css flex box and why we should switch from previous float-position relative etc. layout style to it.

    First of all flex is a new display property of an element and it makes that element "flex" which is wide to it's parent container, and makes inside childs "flex item" elements which you will see saves us a lot of things.

    1.) Flex container

    Contains flex-items which are aligned horizontally or vertically , and wides to it's parent,

    2.) Flex-item 

    Positioned inside flex container. Aligned side by side or vertically with other flex-items, grow to is parent with desired size without causing ang overflows ;) 

    Here is a very basic example to understand flex boxes from my codepen:

    https://codepen.io/tmrdurgun/pen/EEboPj?editors=1100#0 

    I loooved this new featured and strongly suggest you to switch from old layout tricks to flex layout. Have nice coding :) 

  • ES6 Arrow Function Key Point

    13.03.2018

    It's a new feature that es6 provide us to write more sufficent and short anonymus function called "Arrow Function". There are lots of tutorial and blogs about it so i only speak of it's most beautiful feature for me is it's SCOPE .

    I will show an example of it's benefit when used in a class as below;

    let assume we have a class involves arrow function version and old function typed version:

    HTML:

    <button id="countUpBtn">Count Up</button>
    <button id="getCountBtn">Get Count</button>
    <div id="result"></div> 

    JS:


    class Counter {
    constructor(){
    this.count = 0;
    }

    countIt(){
    return this.count++;
    }

    displayCount(container){
    resultDiv.innerHTML = 'Loading...';

    setTimeout(function(){
    container.innerHTML = this.count;
    },1000);

    }
    }

    let counter = new Counter();


    countUpBtn.onclick = () => console.log(counter.countIt());
    getCountBtn.onclick = () => console.log(counter.displayCount(resultDiv));


    Look at the setTimeout function, it looks at window Object to reach scope and class properties will be "undefined" inside it, but if we use;

     


    displayCount(container){
    resultDiv.innerHTML = 'Loading...';

    setTimeout(() => {
    container.innerHTML = this.count;
    },1000);

    }

    Scope is now starts from my class which is the way i wanted. Have nice coding ;)

  • Angular 4 Routing Ve Navigasyon

    03.01.2018

    Selam arkadaşlar, Angular 4 projemizde routing ve navigasyon nasıl yapılır kısaca anlatacağım:

    Routing

    1.) Hangi componentin hangi url' de görüntüleneceğini app.module dosyamızda ayarlıyoruz.

    import { RouterModule, Routes} from '@angular/router';
    const routes: Routes = [
    {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
    },
    {
    path: 'login',
    component: LoginComponent
    },
    { path: 'profile/:userid',
    component: UserComponent
    }
    ];

    @NgModule({
    imports: [
    RouterModule.forRoot(routes)
    ]
    })

    2. Url Parametrelerini de component'imizde şu şekilde alıyoruz;

    import { ActivatedRoute} from '@angular/router';
    userid:any;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
    this.getData();

    this.route.paramMap.subscribe(params => {
    this.userid = params.get('userid');

    console.log(this.userid);
    });

    }

    Navigasyon

    1.) routerLink özelliği ile yönlendirme yapıyoruz. href kullanırsak tarayıcı js css image vs. kaynakları tekrar yükleyerek render yapacaktır ancak routerLink ile yönlendirme yaptığımızda sadece ilgili sayfa render olacaktır, kullanımı;

    Statik:

    <a routerLink="/profile/1">Login</a>

    Dinamik:

    <a [routerLink]="['/profile', user.id]">Profil</a>

    Hepsi bu kadar, sevgiler.

  • Yılbaşı Çekiliş Scripti

    31.12.2017

    Herkese merhaba, şirketler ve kurumlar için hazırladığım yılbaşı çekiliş scriptini paylaşıyorum, birbirine hediye alacak şirket çalışanlarını ikili gruplar şeklinde oluşturup excel dosyası olarak kaydedebilirsiniz, buradan clone download butonuna tıklayarak indirebilirsiniz, iyi seneler :) 

  • Angular 4 Redux ile State Yönetimi

    30.12.2017

    Herkese merhaba, Angular uygulamamız içerisinde State yönetimini sağlayan redux kütüphanesini anlatacağım, reactjs ile çok kullanılan bu kütüphanenin angular için hazırlanmış olanını projemize dahil edip, konfigürasyonunu yapıp, uygulamamızda kullanabiliriz.

    Öncelikle redux orta ve büyük çaplı uygulamalarda kullanıma uygundur, küçük çaplı uygulamalarda redux kullanmamıza gerek yok.

    Redux nedir? ne işe yarar? 

    Reduxjs uygulamamız içerisinde state (durum) yönetimini sağlayan, yapı olarak bir js objesi (mevcut state'lerin saklandığı) ve custom event oluşturan (event dispatch) bir kütüphanedir. 

    Birbiriyle senkronize çalışmasını istediğimiz componentlerin eş zamanlı olarak bazı durumlardan haberdar olmasını ve buna göre davranmasını sağlar.

    Nasıl kullanılır?

    1.) Öncelikle npm üzerinden kurulumunu yapıyoruz

    npm install --save redux ng2-redux

    2.) AppModule 'üne import edip konfigürasyonunu yapıyoruz. Konfigürasyonda kullanılan değişkenler:

    - ngRdux: redux modülü

    - IAppState: redux a tanıtacağımız state şablonu (interface) 

    - rootReducer: state yönetimi işlemini yapan , event dispatch ve yeni state döndüren metod

    - INITIAL_STATE: state objesinin varsayılan değerleri

    import { NgRedux, NgReduxModule} from 'ng2-redux';
    export class AppModule {
    constructor(ngRedux: NgRedux<IAppState>){
    ngRedux.configureStore(rootReducer, INITIAL_STATE);
    }
    }

    3.) Oluşturacağımız state 'lerin, event lerini oluştururken kullanacağımız event isimlerini export eden bir actions dosyasını app dizinine "actions.ts" adında yeni bit ts dosyası olarak oluşturuyoruz.

    app/actions.ts

    export class AppActions{
    readonly INCREMENT = 'INCREMENT';
    readonly USER_SET = 'USER_SET';
    }

    4.) Statelerin oluşturulup , yönetildiği asıl önemli olan dosyayı "store.ts" dosyasını oluşturuyoruz. Buradaki actions event oluşturulması için kullanılır , state ise bu evente bağlı olan state in döndüreceği değerdir. Return kısmındaki "...state" var olan mevcut diğer store objesindeki state'lerin aynı kalmasını sağlar ve bundan sonra store içerisinde istediğimiz state objesini değiştirdiğimiz kısım gelir (counter:state.counter+1 gibi)

    import { AppActions } from './actions';

    export interface IAppState{
    counter: number;

    user: {
    agency:string;
    username:string;
    };

    }

    export const INITIAL_STATE:IAppState = {
    counter: 0,

    user: {
    agency: "",
    username: ""
    }

    };

    export function rootReducer(state: IAppState, action): IAppState{
    const appActions = new AppActions();

    switch (action.type){
    case appActions.INCREMENT:
    return {
    ...state,
    counter : state.counter + 1

    };

    case appActions.USER_SET:
    return {
    ...state,
    user: action.body
    };
    }
    return state;
    }

    5.) Compoenent kısmında kullanışı da şu şekildedir;

    - Asenkron data kullanımını ve reaktif programlamayı sağlayan "Observable" class'ını, redux'u, state interface'i ve actions'ı component'e dahil ediyoruz.

    import { NgRedux, select } from "ng2-redux";
    import { IAppState} from '../../store';
    import { AppActions } from '../../actions';
    import { Observable} from "rxjs/Observable";

    - Component'imizde kullanacağımız Observable tipinde değişkenlerimizi oluşturuyoruz

    counter$:Observable;
    userAgency$:Observable;

    - Redux'u ve hangi şablona göre kullanacağımızı constructor metodunda belirtip, Asenkron olarak state 'e bağlayacağımız değişkenlerin değerlerini store içersinde bulup seçerek veriyoruz.

    counter$:Observable;
    userAgency$:Observable;

    constructor(private httpService: HttpService, private ngRedux: NgRedux<IAppState>) {

    this.counter$ = ngRedux.select(state => state.counter);
    this.userAgency$ = ngRedux.select(state => state.user.agency);
    }

    - Hangi durumda state oluşturacaksak , yeni bir event dispatch edip , state 'i değiştiriyoruz. Type: actions 'da belirlediğimiz event ismidir, body: state 'e vereceğimiz yeni değerdir.

    doLogin($event){
    this.params = $event;

    this.ngRedux.dispatch({
    type: this.appActions.USER_SET,
    body: {
    agency: "test agency",
    username: "Gradar"
    }
    });
    }

    increment(){
    this.ngRedux.dispatch({
    type: this.appActions.INCREMENT
    });
    }

    - Component.html 'de de async pipe 'ı kullanarak state 'e bağlanan değişkeni yazıyoruz;

    <h4>{{ userAgency$ | async }}</h4>
    <app-loginform [validateForm]="validateForm" (outputLoginForm)="doLogin($event)"></app-loginform>

    <p>Counter: {{counter$ | async}}</p>
    <button (click)="increment()">Increment</button>

    Hepsi bu kadar , sevgiler :) 

  • Angular 4 Filtre Geliştirme

    27.12.2017

    Malesef Angular 4 'te Angularjs 'deki filter ve orderby bulunmamakta , performansı düşürüyor diye çıkartmışlar ama bence güzeldi neyse Angular 4 'te nasıl arama filtresi yapılır bunu göstereceğim,

    1.) Öncelikle bir pipe oluşturuyoruz, ben bunu angular-cli kullanarak yapıyorum, component,service vs. komut satırından yapılması daha pratik ve doğru kodlarla oluşturuluyor.

    komut satırına : ng g pipe pipes/searchtext yazıp "searchtext" adında yeni bir pipe oluşturuyoruz.

    Arama Pipe 'ımızı şu şekilde oluşturuyoruz:

    import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
    name: 'searchtext'
    })
    export class SearchtextPipe implements PipeTransform {

    transform(items: any, term: any): any {
    if (term === undefined) return items;

    return items.filter(function(item) {
    for(const property in item){
    if (item[property] === null){
    continue;
    }
    if(item[property].toString().toLowerCase().includes(term.toLowerCase())){
    return true;
    }
    }
    return false;
    });
    }

    }

    2.) view kısmında bu pipe ı kullanarak istediğimiz input modelini filtreleme yapcağımız kısıma yazıyoruz. Angularjs'deki custom filtre kullanımı gibi.

    <div class="form-group">
    <label>Search</label>
    <input type="text" name="" id="" class="form-control" [(ngModel)]="searchTitleInput">
    </div>

    <ul>
    <li *ngFor="let item of posts | searchtext:searchTitleInput">{{item.title}}</li>
    </ul>

    Hepsi bu kadar , sevgiler.

  • Typescript Loops

    26.12.2017

    Selam arkadaşlar, Typescript'te kullanılan döngüleri kısaca açıklayıp örnek kod paylaşacağım;

    1.) for

    Bildiğimiz for döngüsü,

    let provinces = [
    {
    name:"İstanbul",
    latitude: "34.25",
    longitude: "11231548.45"
    },
    {
    name:"Ankara",
    latitude: "324.25",
    longitude: "116231548.42"
    },
    {
    name:"İzmir",
    latitude: "314.25",
    longitude: "112331548.43"
    },
    {
    name:"Aydın",
    latitude: "354.25",
    longitude: "112131548.47"
    },
    {
    name:"Bursa",
    latitude: "364.25",
    longitude: "112321548.55"
    }
    ];

    function doFor(){
    for(let i = 0; i < provinces.length; i++){
    console.log(provinces[i]);
    }
    }

    2.) for in

    iterasyondaki array elemanının anahtar özelliğini döndürür.

    function doForIn(){
    for(let item in provinces){
    console.log(item);
    }
    }

    3.) for of

    For in den daha çok sevdiğim döngüdür, iterasyondaki elemanın değer özelliğini döndürür.

    function doForOf(){
    for(let item of provinces){
    console.log(item);
    }
    }

    4.) forEach

    Bu Ecmascript 6 döngüsüdür, Typescript'te de olduğu şekliyle kullanıyoruz. İster anahtar ister değer özelliğini kullanabileceğimiz en sevdiğim döngüdür.

    function doForeach(){
    provinces.forEach(function (value,key){
    console.log(value);
    })
    }

    5.) While

    Bunu kullanana pek rastlamadım kendim hiç kullanmam ama buna da ihtiyaç olunan zamanlar olabilir.

    function doWhile(){
    let i = 0;
    let limit = 5;

    while(i < limit){
    console.log(i);
    i++;
    }
    }

    İyi kodlamalar, babalar :)

  • Angular 4 Component Data Paylaşımı

    26.12.2017

    Merhaba arkadaşlar, sizlere angular 4 'te parent component'den child'a nasıl data aktarırız bunu bir örnekle göstereceğim,

    Parent: LoginComponent

    Child: LoginformComponent

    Parent -> Child

    1.) Input interface ini child component'e dahil ediyoruz

    import { Component, OnInit, Input } from '@angular/core';

    2.) Child component'te alınacak data için bir değişken oluşuruyoruz

     @Input() validateForm:boolean;

    3.) View kısmında child component neredeyse orada bu değişkeni parametre olarak yazıyoruz ve parent'taki değerine bağlıyoruz

    <app-loginform [validateForm]="validateForm"></app-loginform>

    4.) Son olarak parent component'inde bir değer atıyoruz ve child component'te bu değere erişebiliyoruz.

    // pass validateForm value to child component
    this.validateForm = false;
    // get validate or not value from parent
    if(this.validateForm){
    console.log(this.validateForm);
    }

     

    Child->Parent

    1.) Output ve EventEmitter interface lerini child component'e dahil ediyoruz

    import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

    2.) parent'a gönderilecek datayı yeni bir custom event olarak atıyoruz

    @Output() outputLoginForm:any = new EventEmitter();

    3.) Child component'de data gönderimi için bir fonksiyon oluşturuyoruz ve göndermek istediğimiz datayı event objesine giriyoruz

    sendLoginData(): void {

    this.fields.agency = this.agency;
    this.fields.username = this.username;
    this.fields.password = this.password;

    // console.log(this.agency);
    this.outputLoginForm.emit(this.fields);
    }

    4.) Yine parent'ın ulaşabilmesi için child component html template'inde nerede kullanıldıysa oraya bu eventi ve parent'ın bu event'e üye olabileceği fonksiyonu yazıyoruz

    <app-loginform [validateForm]="validateForm" (outputLoginForm)="doLogin($event)"></app-loginform>

    Parent metodu

    doLogin($event){
    this.params = $event;
    console.log(this.params);
    }

    Şimdilik bu kadar, sevgiler :)

  • Typescript let var const farkı

    25.12.2017

    Merhaba arkadaşlar, Typescript 'te ecmasript 6 ile gelen var , let ve const değişken tanımlamaları ne zaman ve nasıl kullanılır kısaca bundan bahsedeceğim;

    const:

    Ben şahsen kodumun temiz ve basit olmasına özen gösteririm ve kullanacağım değeri tek bir değişkene atarım, bu sebeple const ile tanımlamaya öncelik veririm. Const ile tanımlanan değişkenler tekrardan değiştirilemezler ve temiz kod yazmamıza yardımcı olur. 

    Değiştirilebilir olmasını istiyorsak o zaman let kullanmak uygun olur. Scope faydasından dolayı let öncelikli var en son olarak kullanımı tavsiye ediyorum.

     

    Var vs let:

    Öncelikle aralarındaki SCOPE farkı çok önemli , var ile tanımlanan değişken fonksiyon scope una dahil olurken let ile tanımlanan değişken fonksiyon içerisinde tanımlandığı blok scope una ait olmaktadır. Bir örnekle açıklamak gerekirse;

     

    function letFunc() {

    //i değişkeni burada görünmez

    for( let i= 0; i < 5; i++ ) {

    //i değişkeni sadece burada görünür ve for() içersinde görünür

    //ve i değişkeni döngüdeki her bir artış için ayrı seçilir

    }

    //i değişkeni burada görünmez

    }



    function varFunc() {

    // z değişkeni burada görünür

    for( let i= 0; i < 5; i++ ) {

    // z değişkeni bütün fonksiyonda görünür

    }

    //z değişkeni burada görünür

    }

     

    ikinci fark 'strict' modunda ortaya çıkıyor, let ile tanımlanan değişken yeniden oluşturulamıyor

    'use strict';

    let name = 'Tamer';

    let name = 'Cafer'; // SyntaxError: Identifier 'name' has already been declared

     

    Üçüncü farkı ise let ile tanımlanan değişken window objesine özellik olarak eklenmez;

    window.name // özellik erişilemez

     

  • Typescript Data tipleri

    25.12.2017

    Typescript'in bizlere sunduğu en güzel özelliklerinden birisi de data tipi belirleyebilmemizdir. Bu da uygulamamızda istenmeyen hataların henüz derleme aşamasında farkedilip önlenmesini ve daha doğru kod yazmamızı sağlayacaktır ve performansın optimize kullanılmasına yardımcı olacaktır.

    Typescript temel data tipleri şu şekildedir;

    const flag:boolean = true; // bloean type decleration
    const name:string = "Tamer"; // string type decleration
    const age:number = 31; // number type decleration
    const hobbies:Array = ["guitar", "basketball", "games"]; // Array type decleration Array

    function test():string{ // function return value type decleration use "void" if allow to any type
    return "str";
    }

  • Typescript Interface (arayüz)

    25.12.2017

    Merhaba arkadaşlar, Typescript bize object oriented dillerin özelliği olan interface kullanımını sağlıyor. Interface ne işe yarar ve nasıl kullanılır bunu bir örnekle göstereceğim, öncesinde faydasından biraz bahsedeyim;

    Interface bir rehberdir.

    Interface bize fonksiyon ve class'larımız için bir şablon oluşturma imkanı sağlar. Bu ne işe yarar, yazdığımız kodun tam da istenilen biçimde yazılmasını sağlar.Yani eğer rehber edindiğimiz interface'de yer almayan bir özellik veya metod kullanırsak typescript derleme sırasında bize hata döndürecektir ve daha düzgün bir kod yazmamızı sağlayacaktır.

    Nerede kullanılmalı?

    Belirli bir yapıya sahip olmasını istediğimiz class'lar ve fonksiyonlarda kullanmalıyız, her yerde kullanmamıza gerek yok.

    Örnek:

    interface userInterface{
    username:string;
    email:any;
    password:any;
    age:number;

    uploadAvatar():void;
    }

    function registerNewUser(user):userInterface {
    const item = {
    username: user.username,
    email: user.email,
    password: user.password,
    age: user.age,
    uploadAvatar: () => {
    console.log("upload avatar: "+ user.avatar);
    }
    };

    item.uploadAvatar();

    return item;
    }

    registerNewUser({
    username: "Gradar",
    email: "tmr.durgun@gmail.com",
    password: "123465",
    age: 31,
    avatar: "avatar1.jpg"

    }); 

    Sevgiler.

     

  • Angular 4 Tutorial Road Map

    23.12.2017

    Hi friends today i'm gonna share my angular 4 tutorial road map for who wants to create his/her first angular 4 project, master each step before start your first angular 4 project, here is the road map steps;

     

    Ng 4 Tutorial:

    TypeScript Tutorials:

    • Data Types

    • Interfaces & Classes

    • Functions & Methods

    • Getters

    • Setters

    • Loops

    Component Relations:

    • Send data from parent to child 

    • Send data from child to parent

    • Get/send data from/to input via [(ngModel)]

    • TypeScript Interface usage when retrieving data 

     

    Services

    • Observables

    States

    • Use Reduxjs for state management

    • Route states change

    • Component state change

     

    Login:

    1.) HttpService

    • post() – with Header Options

    • postJson()

    • get()

    • Interceptor() – check for 403

     

    2.) AuthService

    • logIn()

    • logOut()

    • isLoggedIn()

    • hasAccess()

    Build:

    • Bundle libraries

    • Configure Paths

     

     

     

  • Angular 4 kütüphane ekleme

    08.12.2017

    Selam arkadaşlar angular 4 porjemize bir kütüphane ekleyelim ve bunu angular-cli.json dosyasından yaparak , webpack ile bundle edilmesini sağlayalım;

    Örneğin twitter bootstrap kütüphanesini projemize eklemek istiyoruz, şu adımları takip ederek uygulamamıza dahil edelim,

    1.) komut satırına "npm install bootstrap@3" ile node_modules klasörüne indiriyoruz,

    2.) angular-cli.json dosyamızı açıyoruz, css kütüphanelerini "styles" kısmına , javascript kütüphanelerini "scripts" kısmına yazıp konfigürasyonumuzu yapıyoruz, son olarak komut satırına "ng serve" diyoruz, gerisini angular webpack ile hallediyor, sevgiler :)

     "apps": [

      {
    "root": "src", // app root klasörü yolu
    "outDir": "dist",
    "assets": [
    "assets",
    "favicon.ico"
    ],
    "index": "index.html",
    "main": "main.ts",
    "polyfills": "polyfills.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.app.json",
    "testTsconfig": "tsconfig.spec.json",
    "prefix": "app",
    "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css" // eklediğimiz kütüphanenin root'a göre yolu
    ],
    "scripts": [],
    "environmentSource": "environments/environment.ts",
    "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
    }
    }
    ]

  • Angular 2 http service

    04.12.2017

    Merhaba arkadaşlar, Angular 2 ile rest api'lere get ve post request nasıl atıyoruz bunu anlatacağım,

     

    Öncelikle bir servis oluşturup bunu app module kaydediyoruz , bu kısmı bildiğinizi varsayarak hemen servis kısmına geçiyorum, kodlar;

     

    import { Injectable } from '@angular/core';

    import { Http, Response , Headers, Request, RequestOptions} from '@angular/http';

    import 'rxjs/add/operator/map';

     

    @Injectable()

    export class HttpService {

     

    constructor(private http: Http) { }

     

    get(url) {

    return this.http.get(url)

    .map((res:Response) => res.json());

    }

     

    post(url,data) {

    var headers = new Headers();

    headers.append('Content-Type', 'application/json');

     

    var requestoptions = new RequestOptions({

    url: url,

    method: "POST",

    headers: headers,

    body: JSON.stringify(data)

    })

     

    return this.http.request(new Request(requestoptions))

    .map((res: Response) => {

    if (res) {

    return { status: res.status, json: res.json() }

    }

    });

     

    }

    }

     

    Component içerisinde kullanımı;

     

    this.httpService.get("https://conduit.productionready.io/api/profiles/eric").subscribe(data => console.log(data));

     

    this.httpService.post("https://jsonplaceholder.typicode.com/posts",{title: "tmrdurgun"}).subscribe(data => {

     

      console.log(data)

    });

  • JS ve CSS Kütüphanelerini tek dosyada toplamak

    10.02.2017

    Merhaba arkadaşlar, bu yazımda sizlere .js ve .css dosylararımız tek bir js ve tek bir css olarak birleştirmemizin faydalarından kısaca bahsedeceğim,

    Öncelikle bu işlemi yapabilmek için kullanılan 2 başarılı js kütüphanesi var, gruntjs ve gulpjs , ikisi de js ve css eklentilerimizi, kütüphanelerimizi yönetmemizi sağlıyor, ben şuanda projelerimi geliştirirken grunt kullanıyorum, gulpjs in kullanımı biraz daha basittir anacak grunt işimi görüyor.

    Şimdi neden js ve css lerimizi tek dosya yapıyoruz ondan bahsedelim, bunun başlıca iki nedeni var;

    1. Hızlı sayfa yüklenmesi (performans),
    2. Geliştirme kolaylığı

    Projelerimizi geliştirirken bazen 10 veya daha fazla eklenti, kütüphane vs. kullanıyoruz ve tarayıcının bunların her birini ayrı ayrı yüklemesi yerine ve birden falza GET request'i yerine tek bir  lokal dosyadan yüklemesi sayfamızın yüklenme hızını arttırıyor, 

    Ve geliştirme sürecine de sadece tek bir script etiketi ve link etiketi kullanarak işimizi daha da kolaylaştırıyor,

    İncelemek için gruntjs : http://gruntjs.com/

    gulpjs: http://gulpjs.com/

    Kaynak: 

    https://blog.cloudflare.com/combining-javascript-css-a-better-

    way/

    http://www.metacdn.com/speed-up-magento/combine-and-minify-js-css

    http://developer.att.com/application-resource-optimizer/docs/best-practices/combine-java-script-and-css-requests

     

    Sevgiler :) 

  • İDEAL WEB SAYFASI BOYUTU NEDİR ?

    23.03.2016

    Web sayfası boyutunu o web sayfasında yüklenen  herşeyin (scriptler, css, html, resimler, videolar vs) boyutu belirlemektedir. Sayfamıza dahil ettiğimiz bütün dosyalar sayfamızın boyutunu arttırmakta ve dolayısıyla yüklenme hızını yavaşlatabilmektedir.  

    Kısaca söylemek gerekirse hedefleyeceğiniz sayfa boyutu toplam 200kb civarında olmalıdır. Bir başka önemli unsurda sayfada bulunan toplam nesne sayısı ve http istekleridir. 100kb lık bir dosyanız var fakat 95 tane http isteği yapılması durumu daha da kötü hale getirecektir.

    Projelerinizde oluşturduğunuz web sayfalarının hızını test etmek için bu ve benzeri siteleri kullanabilirsiniz.