30.07.2024

Javascript, Beylik Mülakat Soruları 3

Merhaba,

Bu konuyla ilgili üçüncü yazıyı yazdığıma göre artık bir seriden bahsedebiliriz :)

Serinin ilk iki yazısına aşağıdaki linklerden ulaşabilirsiniz:

Yeni sorumuz ise şöyle:

Bir fibonacci serisinde verilen sıradaki sayıyı dönen fonksiyonu yazınız.

Fibonacci serisi ya da sekansı, ilk iki elemanı hariç bir sayı dizisinde her elemanın kendisinden önceki iki elemanın toplamından oluştuğu seriyi ifade eder. Serinin ilk iki elemanı 0 ve 1 'dir.

İlk akla gelen çözüm bir for döngüsü kullanmak olabilir:

function fib(n) {
  const fibonacci = [0, 1];

  for (let i = 2; i <= n; i++) {
    fibonacci[i] = fibonacci[i - 1] + fibonacci[i - 2];
  }

  return fibonacci[n];
}

Bu çözümde fibonacci serisinin ilk iki elemanını 0 ve 1 olarak yazıp; istenen elemana kadar serinin tüm elemanlarını teker teker oluşturuyoruz. Bu nedenle de for döngüsü serinin 3. elemanına denk gelecek şekilde 2'den başlayıp n'de yani istenen elemanda bitiyor. Döngünün içinde her bir elemanı kendisinden önceki iki elemanı toplayarak bulup seriye ekliyoruz. döngüden çıktıktan sonra da istenen sıradaki elemanı dönerek (return) fonksiyonu tamamlıyoruz.

22.07.2024

HTTP(S)

Tarayıcınızı kullanırken her adres satırının başında, farkında olmasanız da o web sitesi ile aranızdaki iletişimin hangi protokol ile yapılacağını http:// ya da https:// ibaresi ile belirtiyorsunuz.

 

Yeri gelmiş de tarayıcımızın adres satırına yazdıklarımızdan bahsederken… URL nedir? Ondan da bahsedelim. URL kısaltmasının açılımı Uniform Resource Locator şeklinde. URL'ye basitçe adres diyebiliriz. Her geçerli URL bir kaynağı işaret eder ve benzersiz biçimde tanımlar. Örneğin, web sitemiz içinde kullandığımız bir CSS dosyasının ya da bir resmin tüm internet içinde bir kopyası daha bulunmayan (tekil, benzersiz) bir adresi vardır.

 

URL ve link (hyperlink), birbirinin yerine kullanılan terimler olsa da teknik olarak tam anlamıyla birbirlerini karşılamazlar. Bir web sayfasında herhangi bir dosyayı/kaynağı yüklemek için kullandığımız link içinde bir URL barındırır. Bu URL olmadan link anlamsızdır. Örneğin, aşağıdaki a HTML etiketi (tag) href özelliği (attribute) ile bir URL'e işaret eder ve kullanıcı bu linke tıkladığında tarayıcı tarafından, href ile belirtilen URL'ye yönlendirilir.

 

<a href="https://blog.alperguclu.com/">Blog</a>

 

Bir URL'nin önceden belirli şekil şartlarını sağlaması gerekir. Aşağıda opsiyonel kısımlar dahil tam bir URL'in parçalarını görebilirsiniz. (Kaynak: https://developer.mozilla.org/)


15.07.2024

NestJS: Modüller

 

Bir NestJS modülü @Module() dekoratörü (decorator) ile işaretlenmiş bir sınıftır. Bu dekoratör ile Nest, uygulama yapısını organize etmek için kullanacağı metadata'ya erişim sağlamış olur. 

Her NestJS uygulaması 'root module' ile başlar. Bu başlangıç noktasından hareketle diğer modüller arasındaki ilişkiler belirlenir. Uygulamamızın bileşenlerini organize etmek için modülleri kullanmak oldukça kullanışlı ancak çok küçük uygulamalar için sadece root modül de kullanılabilir. @Module() dekoratörünün parametre olarak aldığı objenin alanlarını (property) inceleyelim:


providers: Nest'in dependency injector'ı tarafından bu arraydeki sınıflardan birer obje ilklendirilerek modül içinde erişime açılır.

controllers: Modül içinde yer alan controller'lar bu array içinde yer almalıdır.

imports: Import edilecek olamn modüller bu array içinde yer alır.

exports: Diğer modüller tarafından kullanılacak provider'lar bu liste içinde export edilmelidir.

A modülü içinde, B modülü içinde yer alan bir provider'ın kullanılabilmesi için: 

  • B modülü A modülünün import array'inde yer almalı
  • İlgili provider B modülünün hem providers hem de exports array'inde yer almalı

10.07.2024

İnternet Nedir?

Hepimiz “internet”in ne olduğunu, nasıl çalıştığını biliyoruz, değil mi? Ben yine de bilgilerimizi tazelemek için kısaca bahsedeceğim.

Bir network (ağ) olmadan internetten bahsetmek de mümkün değil. Birbirine bağlı bir grup bilgisayar ya da cihaz bir network oluşturur. Aslında iki ucu aktif olan (iki ucunda birbirine veri ileten birer cihaz bulunan) bir kabloya bile network demek mümkün. Örneğin, evinizde aynı Wİ-Fİ'a bağlı cihazlar bir network oluşturuyor. İş yerinizde aynı switch'e bağlı cihazlar da aynı şekilde. Çok basitçe ifade etmek gerekirse interneti birbirine bağlı networklerden oluşan daha büyük bir network olarak tarif etmek mümkün.

 

İnternet altmışların sonunda ABD'nin savunma bakanlığı tarafından oluşturuldu. Nükleer saldırı esnasında çalışmaya devam edebilecek merkezi olmayan bir iletişim ağı oluşturma hedefi ile yola çıktılar. Zaman geçtikçe internet bütün dünyaya yayılıp şu anki halini aldı ve hayatımızın vazgeçilmez bir parçası haline geldi.

 

DataReportal'ın 2023 başında, 16-64 yaş arası internet kullanıcıları arasında yaptığı bir araştırmaya göre kullanıcıların % 57,8'i interneti asıl kullanım amaçlarının "aradıkları bilgiye ulaşmak" olduğunu belirtiyor. Aynı kullanıcıların % 53,7'si aile ve arkadaşları ile iletişimi koparmamak için, % 49,7'si ise film, televizyon şovları ve video izlemek amacıyla internet kullandığını belirtmiş. Görüldüğü gibi internet, iletişimden eğlenceye hayatımızın her alanında yer alıyor.

14.06.2024

Javascript, Beylik Mülakat Soruları 2

Merhaba, 

Bir başka mülakat sorusu ile karşınızdayım. Açıkçası sıkça sorulup sorulmadığından emin değilim ama her problemi çözmeye çalışmanın yazılım geliştiriciye mutlaka bir şeyler kattığını düşünüyorum. Üstelik eğlenceli bile bulabilirsiniz kim bilir! :) 

Bu konu ile ilgili yazdığım önceki yazıya buradan ulaşabilirsiniz.

Sorumuz şöyle:

Parametre olarak pozitif bir sayı (N) kabul eden bir fonksiyon yazın. Bu fonksiyon console.log ile '#' karakterlerini kullanarak N seviyeden oluşan bir piramit şekli oluşturmalı. Piramit şeklinin hem sağ hem sol tarafında boşluklar olmasına dikkat edin. Örnek: N=3 için; 

Aslında çok karmaşık bir problem değil. Öncelikle yandaki örnek görsele baktığımızda 3 seviyeli bir piramit için boşluklar dahil 3x5'lik bir dörtgen ile uğraştığımızı görebiliriz. Oluşacak piramidin en üst seviyesinde her zaman bir '#' karakteri olacak ve tam ortada yer alacak. N seviyelik piramidin içinde her satır (seviye) için sırasıyla hangi karakterin gelmesi gerektiğine karar verip satırı tek seferde yazdıracağız. İki farklı çözüm yazacağım. Biri döngülerle ikincisi ise recursive bir fonksiyonla olacak.

İlk çözüm şöyle  olabilir:

9.06.2024

NestJS: Hello World!

NestJS, server side Node.js uygulamaları geliştirmek için TypeScript ile Kamil Mysliwiec tarafından geliştirilmiş bir framework'tür. NestJS projeleri oluşturduğunuzda varsayılan olarak Express ile çalışır şekilde gelir ancak isterseniz Fastify kullanacak şekilde de ayarlayabilirsiniz.

NestJS geliştiriciler tarafından kolayca bakımı yapılabilen ve test edilebilen, ölçeklenebilir bir uygulama mimarisi sunar.

Kurulum için NodeJS'in kurulu olduğu bir ortamda Nest CLI (Nest Command Line Interface) ile boş bir proje oluşturarak başlayabiliriz. Bunun için öncelikle Nest CLI'ı kuralım.

npm i -g @nestjs/cli

Daha sonra aşağıdaki komutu kullanarak yeni projemizi oluşturalım:

nest new hello-world

Yeni Nest projesi oluşturulurken hangi paket yöneticisini kullanacağınızı seçin ve enter'a basın. Projeniz hazır olduğunda konsolda aşağıdaki gibi bir görüntü ile karşılaşacaksınız:


27.05.2024

Javascript, Beylik Mülakat Soruları 1

 İş görüşmesi sırasında çok sık sorulan bazı küçük problemler var. Bir kere çözünce bu muymuş dedirten basitlikte olan bu sorular, özellikle stres de yapılmışsa başa dert olabilir. İnternette aradığınızda ya da bir online eğitim aldığınızda bu sorularla mutlaka karşılaşırsınız. Düşünürseniz çözümünü bulmanız işten bile olmayan bu sorulardan bazılarına aşağıda değinmek istiyorum. Hem pratik yapmış oluruz hem de belli mi olur karşınıza çıkarsa o saniyede çözüverirsiniz. :)

Öncelikle şunu da söyleyelim ki internet trolleri üşüşmesin (Okuyan da yok aslında. 2 senedir yazı yazmamışım :D) Burada vereceğim çözümler ne tek çözüm ne de en iyi çözümdür. Sadece bir çözümdür. 

Soru: Verilen metni ters çeviren bir fonksiyon yazınız ya da verilen string'in karakterlerini tersten sıralayınız.

Tek satırlık basit bir çözüm var. Önce kodu verelim sonra aşağıda açıklayalım.

return str.split('').reverse().join('');

Verilen string, str değişkeninde olsun.:

  • String'in split metoduna boş bir string'i (boşluk karakteri içeren bir string'i değil.) parametre geçerek her bir karakterin ayrı bir eleman olduğu bir array oluşturuyoruz. 
  • Oluşturduğumuz array üzerinde reverse metodunu kullanarak array'in elmanlarının sırasını tersine çeviriyoruz.
  • Array'in join metoduna yine boş bir string'i parametre olarak geçerek array elemanlarını birleştirip yeni bir string oluşturuyoruz.
Methodları chain etmek okumanızı zorlaştırıyorsa çözümü aşağıdaki şekilde de düşünebilirsiniz.

const arr = str.split('');
const reversedArray = arr.reverse();
const reversedString = reversedArray.join('');
return reversedString;

24.06.2022

Trigger, Notify, Listen

 

PostgreSQL Veri Tabanı Yönetim Sistemi (VTYS ya da İngilizce kısaltmasıyla RDBMS) kullanırken bir tabloya yeni kayıt eklendiğinde ya da bir kayıt güncellendiğinde uzaktaki bir kaynağa erişmek, bir API metodu çağırmak gibi işlemler yapmak isterseniz PostgreSQL'in notification sistemini kullanabilirsiniz.

NOTIFY ve LISTEN ile ilgili detaylı bilgiye linklerden ulaşabilirsiniz. Özetle NOTIFY bir notification gönderilmesini, LISTEN ise gönderilen notificationların alınmasını sağlıyor.

Nasıl kullanılacağını örnek bir Javascript uygulaması ile göstermeye çalışacağım ama öncelikle bir veri tabanı ve bir tabloya ihtiyacımız var. Tablonun ne olduğu aslında önemli değil ama aşağıdaki gibi bir tablo oluşturabilirsiniz.

DROP SEQUENCE IF EXISTS "public"."post_id_seq";
CREATE SEQUENCE "public"."post_id_seq" 
INCREMENT 1
MINVALUE  1
MAXVALUE 9223372036854775807
START 1
CACHE 1;

DROP TABLE IF EXISTS "public"."post";
CREATE TABLE "public"."post" (
  "id" int8 NOT NULL DEFAULT nextval('post_id_seq'::regclass),
  "title" varchar(255) COLLATE "pg_catalog"."default",
  "content" text COLLATE "pg_catalog"."default",
  "create_date" date DEFAULT now()
);

ALTER TABLE "public"."post" ADD CONSTRAINT "post_pkey" PRIMARY KEY ("id");

Ayrıca notification'ı gönderecek bir fonksiyona ve bu fonksiyonu istenen INSERT işlemi sonrasında çağıracak olan bir trigger'a ihtiyacımız olacak.

DROP FUNCTION IF EXISTS "public"."notify_new_post"();
CREATE OR REPLACE FUNCTION "public"."notify_new_post"()
  RETURNS "pg_catalog"."trigger" AS $BODY$
begin
  PERFORM pg_notify('new_post_event', row_to_json(NEW)::text);
  RETURN NULL;
end;
$BODY$
  LANGUAGE plpgsql VOLATILE
  COST 100;

CREATE TRIGGER "notify_new_post_trigger" AFTER INSERT ON "public"."post"
FOR EACH ROW
EXECUTE PROCEDURE "public"."notify_new_post"();

notify_new_post_trigger isimli trigger, post tablosuna yeni bir kayıt insert edildikten sonra notify_new_post fonksiyonunu çağırıyor. Bu fonksiyon pg_notify fonksiyonunu kullanarak yeni bir notification oluşturuyor.

Sıra dinlemeye geldi. Basit bir Javascript kodu yazarak gönderilen notificationları dinleyip insert edilen kayıtları konsola yazalım. Aşağıdaki kodu `index.js` dosyasına kaydedip `npm init -y` ve `npm install pg` komutları ile veri tabanı bağlantısı için gerekli paketi kurabilir, `node .\index.js` komutu ile çalıştırabilirsiniz. Elbette sisteminizde node kurulu olmalı ve config nesnesi içindeki bağlantı bilgilerini de kendinize uygun şekilde değiştirmelisiniz.

const pg = require('pg');

const config = {
    user: 'user',
    password: 'password',
    host: 'localhost',
    db: 'db',
};

const connectionString = `postgres://${config.user}:${config.password}@${config.host}/${config.db}`;

const pgClient = new pg.Client(connectionString);

pgClient.connect();

const query = pgClient.query('LISTEN new_post_event');

pgClient.on('notification', async (data) => {
    const payload = JSON.parse(data.payload);
    console.log('New Post!', payload);
});

yukarıdaki kod çalışır haldeyken post tablosuna yeni bir kayıt eklediğinizdeki aşağıdaki gibi konsola eklenen kaydın bilgilerinin yazıldığını göreceksiniz.









Çok farklı şekillerde kullanılabilir. Örneğin: yeni eklenen kayıt ile ilgili bir Tweet atmak için API'a request gönderebilir,  önceden belirlenmiş kullanıcılara bildirim gönderebilirsiniz.

Esen kalın.

29.04.2022

Zaman akıp gidiyor...

Bir gün varsın, bir gün yoksun...

Geride bıraktıkların konuşulacak hep ta ki anılar solana, her şey unutulana kadar.

Sonra yine bir gün bir dost diyecek ki; "Hatırlar mısın?" Öyle bahsedeceğiz hatırladığımız kadar. Nostalji olacak bir zamanın gerçeklerinden kalan izler.

Bir kısmı doğru olacak hatırlananların. Kalanı hikayeleşecek. Kapılardan sığmayan cüsseler, akıl almaz bir zeka. Çok iyiydi diyeceğiz. Pek iyiydi. Kimse hatırlayacak mı ne istediğini? Ne düşündüğünü? Nasıl hissettiğini?

Söz uçar, yazı kalır. Tek umut kalan parçaların yazılanların arasına karışmış olması.

22.07.2020

Java Timer Sınıfı Hakkında...

Geliştirdiğimiz uygulamalar içerisinde belirli aralıklarla sürekli çalışmasını istediğimiz işler olabiliyor. Bu durumda genellikle Quartz ya da aynı işi kullanan bir başka yazılım/kütüphane kullanıyoruz. Çoğu zaman da etkin bir şekilde görev yerine getiriliyor.

Java'nın Timer ve TimerTask sınıflarını kullanarak da bu işi gerçekleştirmek mümkün. Elbette Quartz ve benzeri yazılımlar bu konuda çok ilerlemiş durumda ve muhtemelen işinizi halletmek için bu yazılımlardan birini kullanmalısınız. Bu örnek tamamen öğrenme amaçlı. :)

24.06.2020

Sinerji

Sinerji derken, Gora'da Engin Günaydın'ın bahsettiği sinerjiden bahsetmiyorum. Klavye ve farenizi birden fazla bilgisayarda kullanmanızı sağlayan Synergy'den bahsediyorum. Symless tarafından geliştirilen yazılım klavye ve farenizi paylaştırmak istediğiniz iki bilgisayara da kuruluyor.Yazılımı bir bilgisayarda server (sunucu) diğerinde client (istemci) olarak ayarlıyorsunuz. Ekranlarınızı masanızın üzerinde durdukları şekliyle yerleştiriyorsunuz ve klavyenizle fareniz iki bilgisayarda da çalışıyor. Üstelik clipboard da paylaşabiliyorsunuz. Bundan kopyalayayım. Hop! Öbürüne yapıştırayım. Prayslıs.


Geçtiğimiz aylarda, kullandığım PC'nin bana ayar vermesini de göz önüne alarak bazı işlerimi Canavar'a taşıdım. Aldığım cihazın tek bir monitör çıkışı var. Ben ise masamın her yeri monitör dolu olsun istiyorum. Öyle seviyorum. Beni yargılamayın. Şimdi hem tüm monitörlerimi kullanabiliyorum hem de iki bilgisayar arasında geçiş inanılmaz kolaylaşmış durumda.

24.05.2020

Express, Passport, Oauth, Google

Herkese merhaba, size bayram şekeri tadında bir yazı hazırlamaya çalıştım. :) Birlikte Express ile Passport kullanarak Google OAuth örneği yapacağız.



Genelde akış aşağı yukarı şöyle olmalı:

  • Kullanıcı login linkine tıklar
  • Kullanıcı kimliğini doğrulamak üzere Google'a yönlendirilir
  • Google doğrulanan kullanıcı bilgisi ile verdiğimiz URL'e yönlendirme yapar.
  • Uygulamada kullanıcı kayıt ya da giriş işlemleri tamamlanır.
Biz işi basitleştirmek için kullanıcının login linkine tıkladığını varsayacak ve doğrudan http://localhost:3000/auth adresine gideceğiz. Kullanıcı kayıt/giriş işlemi yapmak yerine de Google'dan aldığımız e-posta ve isim bilgisini ekranda göstereceğiz. 

30.04.2020

Bazı Yakışıklı JavaScript Array Metodları

Javascript çok yaygın kullanılmakla beraber yazılımcıların çokça şikayet ettiği bir dil. Bu sıralar bir proje ile ilgili kod gözden geçirir ve doküman yazarken karşılaştığım / hatırladığım ufak tefek şeyler ile ilgili olarak buraya kısa yazılar bırakacağım. Bir seri gibi olmayacak. Aklıma geldikçe düştüğüm notlar olarak düşünebilirsiniz. Çoğu Javascript, Java, SQL ile ilgili olur diye düşünüyorum. İlgilenenlere şimdiden iyi okumalar.

Javascript'in Array işlemleri için kullanılan metodları oldukça kullanışlı. Bazılarının isimleri biraz kafa karıştırıcı gelebilir ancak alışınca insan çok mutlu oluyor.

Pushpop ve shift'ten bahsedelim istiyorum. Tabi shift'ten bahsederken "Stack" ve "Queue" veri yapılarından bahsetmek enqueue, dequeue kavramlarını hatırlamak lazım.

Stack: son giren ilk çıkar, Queue ise ilk giren ilk çıkar prensibine göre hareket edilen veri yapıları. Enqueue ve Dequeue kavramları da tahmin edebileceğiniz gibi Queue yapısına veri ekleyip çıkarmak için kullanılan kavramlar. C++, Java gibi dillerde native desteklenen bu veri yapılarının Javascript içinde built-in implementasyonları yok.

Array'inize bir eleman push ettiğiniz de array'in sonuna eklemiş; pop ettiğinizde ise son elemanı Array'den çıkarmış olur ve Array'inizi bir Stack olarak kullanmış olursunuz.

Array'inize bir eleman push ettiğiniz de array'in sonuna eklemiş; shift ettiğinizde ise ilk elemanı Array'den çıkarmış olur ve Array'inizi bir Queue olarak kullanmış olursunuz.

Şöyle Örnekleyelim:


Bir de unshift metodu var. Bu metodla da Array'inizin başına eleman ekleyebilirsiniz.

Esen kalın.

29.04.2020

FRP&MAGIC

Yıl 1999. Hayat çok farklı. İnsanlar çok farklı. Benim hayatımda FRP diye bir şey var. Bir grup aklı başında olduğu şüpheli yaşıtımla gece demeden gündüz demeden bir masanın başına toplanıp; kağıt, kalem, zar filan oturup rol yapma oyunu oynuyoruz. Öyle günlerdi işte.

AD&D meşhurdu. Başka şeyler de oynanırdı ama biz AD&D oynardık. Gecenin bir vakti o masanın üstünü konuyu bilmeyen birisi görse oyun oynadığınıza çok zor inandırırsınız. :D Düşünsenize tütsüler yakılmış. Garip biçimli mumluklarda mumlar yanıyor. Üzerinde yaratık resimleri olan kitaplar, kağıtlar. Gözleri kan çanağı bir grup genç sigara dumanı içinde oturuyor.

Kapalı alanlarda sigara içiliyordu o zaman. Hava soğuksa pencere filan da açılmazdı. Dağılırken kapıyı açınca, insanlardan önce blok halinde duman terkederdi binayı. :)

FRP&Magic dergisi o zaman çıkmıştı işte. Kapağı da şöyleydi:

28.04.2020

ES6 ile Destructuring


2015 yılında çıkan EcmaScript 2015 çeşitli isimlerle anılıyor. EcmaScript 6 ya da Javascript 6 diyen de var ES6 kısaltması ile yetinen de. Hepsi güzel hepsi iyi. :)

ES6 ile gelen bir çok özellik var. Bunlardan eğlenceli bir tanesi de Destructuring. Nedir bu Destructuring derseniz: Budur.

Aşağıdaki kod parçacığında da görebileceğiniz gibi array işlemlerinde oldukça kolaylık sağlıyor.


Array içindeki elemanların yerini değiştirmek için iki farklı kod parçacığı görüyorsunuz. Sizce de ikincisi daha temiz değil mi?

Kullanalım. Kullandıralım.

Esen kalın.

Yine Dutluk Olmuş Buralar

Üç Buçuk yıl nedir yahu! Nasıl ihmal etmişim buraları. Okuyan varsa bile terk edeli çok olmuştur diye düşünüyorum. :)

Bugün bakmak aklıma geldi. Daha doğrusu bir blogum olduğu aklıma geldi. :) Kısa ve içeriği çok parlak olmayan yazılarla yeni bir başlangıç deneyeyim dedim.

Tabi ölü linkleri ayıklamakla başlamak gerekti. Hepsini ayıklayamadıysam karşılaştıklarınızı yazın bana lütfen.

Sonra HTTPS'i etkinleştirmek gerekti. Eski tabi burası ilgilenmeyince öyle kalıyor. Google bu işleri çok kolaylaştırmış. İki tık tık bir şık şık, hoop SSL hazır. Sevinmedim diyemem. :)

Etrafı biraz topladık postunu burada bitiriyorum. Birazdan ufak bir JavaScript postu da atayım. Ortalık kalabalık görünsün.

Esen kalın.


6.11.2016

Kişisel bir VPN sunucunuz olsun mu? Bence olsun!

Merhaba,

Malum ülkemizde internet erişiminin ne kadar süreyle hangi adresler için kesileceği pek belli olmuyor. Bu erişim engelleme işlemi sırasında kurunun yanında yaşta yanıyor tabi. Örneğin geçenlerde gitub ve dropbox'a erişimin engellenmesi bir çok meslektaşımı zor durumda bırakmış ancak VPN hizmetleri ile sorun derinleşmeden ilgili kaynaklara yeniden erişebilir hale gelmiştik. Şimdi yayınlanan bazı haberler tanınmış VPN hizmetleri ile ilgili olarakda erişim engelleme yapıldığı yönünde. Şu anda kontrol ettiğimde ben de ZenMate üzerinden erişim sağlayamıyorum mesela.

Bu durum için ise alternatif bir çözüm kendi OpenVPN sunucunuzu kurup, onun üzerinden erişim sağlamak. Bunun için yurt dışındaki hizmet sağlayıcılardan birinden bir vps kiralayabilir trafiğinizi bu openVpn sunucusu üzerinden yönlendirebilirsiniz. Örneğin Digital Ocean tarafından sağlanan portletler işinizi görecektir. Şu linke tıklayarak ayda 5 dolarlık bir portlet oluşturup kişisel openVpn sunucunuzu kurabilirsiniz. Bu sadece bir seçenek tabi pek çok fiyat ve özellikte barındırma hizmeti dünyanın her tarafından sağlanıyor isteğinizi seçip aynı yolu izleyerek sonuca ulaşabilirsiniz. Bu linki kullanırsanız referral olarak ben credit kazanmış olacağım :).  Ayrıca sizde 10 doarlık bir credit kazanmış olacaksınız.

Ben bundan sonrasını digital Ocean üzerinden anlatıyorum ama kurduğunuz işletim sistemi Ubuntu 16.04 olduğu sürece adımların pek değişeceğini sanmıyorum.

Öncelikle Ubuntu 16.04 yüklü bir portlet oluşturun. Digital Ocean sanal sunucunuz için pek çok lokasyon sağlıyor. Ben Amerika yerine avrupada bir lokasyon seçmenizi öneririm.

Portletinizi oluşturduktan sonra size sunucunuzun root kullanıcısının şifresi eposta ile gelecek. İster dashboarddaki web consolunu kullanarak isterseniz putty gibi bir SSH client kullanarak sanal sunucunuzda oturum açın. İlk giriş sırasında şifrenizi değiştirmeniz istenecek. Daha sonra aşağıdaki adımları takip edin. Ayrıca bu yazıya örnek olan orjinal tutoriala da isterseniz bu linkten ulaşabilirsiniz.

28.12.2014

Canvas Input

Uzun bir aradan sonra merhaba :)

HTML5 Canvas üzerinde oyun geliştirmeye çalışırken karşılaştığım bir soruna Gold Fire Stüdyoları oldukça güzel bir çözüm bulmuş. Oyunun akışı içerisinde kullanıcıdan girdi almak istediğinizde canvasın dışına çıkmak istemiyorsanız biraz uğraşmanız gerekebiliyor. Gold Fire Stüdyoları da aynı sorunla karşılaşmış ve CanvasInput'u üretmişler.

Öncelikle linkleri vereyim. CanvasInput Github,

Web sayfasında ve githubdaki açıklamalarda da görebileceğiniz gibi HTML Input tagi ile aynı işlevi görecek ama tamamen canvas içinde kullanılacak bir kullanıcı girişi deneyimi sağlamak.

Kullanımı çok basit. CanvasInput.min.js include edildikten sonra aşağıdaki kod bloğu ile en basit haliyle bir input oluşturulabiliyor.
<canvas id="canvas" width="200" height="50"></canvas>
var input = new CanvasInput({
  canvas: document.getElementById('canvas')
});
Oluşturduğunuz inputun stilini ve davranışını değiştirmek için pek çok özellik de sağlanmış. Bu özelliklerin listesine de yine CanvasInput'un tanıtıldığı sayfadan erişebilirsiniz.

12.03.2013

Yandexle canım Yandexle

Yandex pek çok başarılı hizmetle karşımızda bir taraftan da bir reklam çılgınlığıdır sürüyor. Hele son kampanya on numara Lamborghini (Markayı yazmak bile yorucu arkadaş...) veriyormuş Yandex. Neyse versinler tabi mesele o değil. Şimdi bu Yandex browser denen dalga bildiğin webkit işte ortada "Ay ne güzel!", "Herkez Yandex kullansın süfeeer" gibi bir durum yok hoşuna giden güzel güzel kullansın. Ben logosunu sevmiyorum plaj topu gibi başka bir şey bulamamışlar mı arkadaş. Bak yine uzattım lafı.

Şimdi bu Lamborghini kampanyasına katılma şartı olarak yandex browser indirilecek, kurulacak, kampanya sayfasına gidilecek onunla kayıt olunacak ya. Hiç gerek yok. Chrome ya da firefox kullanıyorsanız eklenti olarak bir user agent switcher indiriyorsunuz şu  linkten user agent stringini alıp eklentinin ayarlar sayfasından yeni agent stringi ekliyorsunuz. Hayırlı olsun Yandex browser görünümlü chrome ya da firefox tarayıcınız hazır. Onunla girip yapabilirsiniz kayıt işleminizi. Ha illa bir yandex e-posta hesabı açacaksınız o ayrı.

Niye mi? Hiç eğlence olsun. :)


6.12.2012

measureText()

Bugün bir proje için canvas ile sürüklenebilir kutular oluşturmaya çalışıyordum. Her kutunun da bir başlığı olması gerekiyor. Kutuları gösterdik. Kullanıcıların kutuları seçmesine olanak sağladık. Kullanıcılar kutuları sürükleyebildiler hepsi süper!

Kutunun başlığı parametrik, yani kutuyu çizerken metni biliyoruz ama metnin uzunluğunun kaç piksel olduğundan haberimiz yok yani kutunun genişliğinden uzun bir metin kutunun ve yanındaki her şeyin başlığı olmaya aday :)

İşte bu durumda kutumuzu oluşturmadan önce  başlık metninin kaç piksel genişliğinde yer kaplayacağını bulmamız lazım. Burada canvas contextinin  measureText() metodu imdadımıza yetişiyor. parametre olarak başlık metnimizi verip dönen objenin width değerini aldığımızda; artık kutumuzun genişliğinin ne olması gerektiğini biliyoruz.