Web Development Blog by Serdar AKARCA » Web Development

Simple javascript string substitution method

Serdar — Fri, 27 Apr 2012 00:33:46 +0000

My simple and powerful string substitution method like python’s %s and django’s template language.

var mystring = "Hello {{ name }} {{ surname }}";

mystring.render({
  "name": "John",
  "surname": "Doe",
});
// "Hello John Doe"

To use this method add underscore.js and this short code:

String.prototype.render = function(obj) {
  return _.reduce(_.keys(obj),function(t,k){return t.replace(new RegExp("\{\{(\ *)"+k+"(\ *)\}\}","g"),obj[k])},this.toString());
};

You don’t need to use ugly string concatenation anymore

Ubuntu 11.10 Oneiric Ocelot Gedit 3 Indent Lines Plugin

Serdar — Wed, 12 Oct 2011 10:02:35 +0000

Here is the “Indent Lines Plugin” that I wrote for gedit3:

https://bitbucket.org/serdarakarca/gedit3-plugins

How to use

Extract files and move into ~/.local/share/gedit/plugins or /usr/lib/gedit/plugins/
Activate plugin from Edit > Preferences > Plugins > Indent Lines
Try Ctrl+t and Ctrl+Shift+t

Lucid Lynx and Gedit “Indent Lines” Plugin

Serdar — Sat, 22 May 2010 00:57:43 +0000

My favourite text editor is gedit. I use gedit because it’s light and very powerful. Unfortunately by lucid upgrade, the indent feature has been removed. Maybe developers thought that tab was enough to indent lines but it is not. So, I want my “Indent Lines” plugin again. And if you want your indent feature back, here is the plugin:

64 bit:
http://yuix.org/wp-content/uploads/2010/05/indent_lines.zip

Native Multiple File Upload Support by Firefox 3.6

Serdar — Mon, 22 Mar 2010 19:32:29 +0000

I fed up with Flash Uploaders like Uplodify, YUI Uploader etc. Because any of them works… It doesn’t work and you can’t debug it. Flash plugin is absolutely very painful thing.

At the end, by Firefox 3.6 native multiple file upload suppport has came. I implemented it at Markafoni.com admin panel. Here is an example:

We use Django at backend. Here is Django code to get files:

images = request.FILES.getlist("file[]")
for i in images:
    filename = i.name
    raw_data = i.read()
    ... write raw_data to path/filename ...

If you like php:

foreach ($_FILES['file']['name'] as $filename) {
    echo $filename;
    ... maybe you want to move it anywhere ...
}

Can’t decide to doctype? It’s easy!

Serdar — Fri, 19 Mar 2010 03:23:19 +0000

If you think doctype declerations are very long and ugly just use html5 doctype.

When I saw this doctype I thought IE would switch to quirks mode. Surprisingly, all major browsers switch to standarts mode with Html5 doctype. All you need is

YUI’ye Baslangic: YUI Nasil Kullanilir?

Serdar — Fri, 13 Nov 2009 00:30:34 +0000

YUI, YAHOO tarafından geliştirilen içerisinde javascript ve css kodları bulunduran gelişmiş bir arayüz kütüphanesidir. Arayüz geliştiricilerinin tüm ihtiyaçlarını karşılayacak kadar zengindir. YUI’nin nasıl kullanıldığını adım adım öğreneceğiz.

Devamını okumak için lütfen tıklayınız…

1. YUI’yi sayfamıza eklemek

YUI’yi sayfamıza eklememizin en kolay yolu YUI depency configurator sayfasındaki aracı kullanmaktır. Bu araç sayesinde istediğimiz YUI modullerini kolayca ekleyebiliriz. Resimde göründüğü gibi seçimlerimi başlangıç olarak şöyle yapıyorum:

Filter sekmesinden YUI dosyalarının nerede host edileceğini seçtim. YUI’yi kendi bilgisayarıma indirmeden ya da host alanıma koymadan kullanacağız. Hızlı başlangıç yapmak için bu şimdilik en iyi yöntem.

YUI CSS Packages sekmesinden sayfamız için gerekli ve yararlı CSS kütüphanelerini seçtim. Bu kütüphanelerin ne işe yaradığını bir sonraki adımda açıklayacağız.

YUI JavaScript Utilities sekmesinden Selector Utility ve son olarak utilities.js yi seçtim.

Seçimleri yaptıktan sonra YUI Depency Configurator’un benim için hazırladığı ‘Loading Script and CSS Directly’ sekmesinin altındaki kodu kopyalıyorum.

Kopyaladığımız kodu sayfamızın tag’i içine yapıştırarak YUI’yi sayfamıza eklemiş oluyoruz.

Eklediğimiz dosyalar ne işe yarıyor?

Sayfamıza şu kütüphaneleri yükledik:

YUI Fonts, Grids, Reset CSS: Bu CSS kütüphaneleri web tarayıcıları(browser) arasındaki farkları ortadan kaldırıyor. Hazırladığımız sayfaların her browserda aynı görünmesi için Reset CSS’i eklememiz gerekmektedir. Ayrıca Font’ların düzgün render edilmesi için de YUI Fonts kütüphanesi gereklidir. Grids CSS ise layout oluşturmamız için yardımcı bir kütüphanedir. Layout oluşturmak için ayrıca yardımcı bir aracımız var: YUI Grid Builder
utilities.js: Utilities.js dosyası çok kullanılan kütüphanelerin toplamıdır. Utilities.js’yi ekleyerek yui, dom, event, animation, connection, drag&drop, element ve get kütüphanelerini yüklemiş oluyoruz.

2. Hello World: YUI’yle ilk javascript kodunu yazmak

YUI’nin javascript kütüphaneleri sayesinde html elementleri seçmek, seçtiğimiz elementlere listener eklemek ve bu elementlerin özelliklerini değiştirmek çok kolay.

Kolay bir örnekle başlayabiliriz. Hazırladığımız html form’ları javascript’le kontrol edelim. Doldurulması zorunlu alanlar varsa kullanıcıyı uyaran form validation kodunu yazalım.

Aşağıdaki formda tüm alanları doldurmak zorunludur.

Formu şu şekilde oluşturduk:


  
  
    Adınız*
    
    adınızı giriniz
  
  
    Doğum yılınız*
    
    sadece 4 haneli sayı giriniz

Form’a kolayca erişebilmek için “id” tanımladık(id=”form1″). Adınız alanı için “zorunlu” class’ını ekledik. “zorunlu” class’ına sahip olan input’ların yazılmasını zorulu yapacağız. Doğum yılı için de hem “zorunlu” hem de “yil” class’ını ekledik. Her birini ayrı ayrı kontrol edeceğiz. İlk adım form’a listener eklemek. Yani form gönderilirken(submit edilirken) kontrolleri yapacak fonksiyonu atamak. Ama ondan önce birkaç kısayol tanımlayacağız.

 var $D = YAHOO.util.Dom;       // elementlerin DOM objesine erişmek için gerekli class
 var $E = YAHOO.util.Event;     // elementlere listener eklemek için gerekli class
 var select = YAHOO.util.Selector.query; // elementleri seçmek için gerekli class

$E.on('form1', 'submit', function(e) {
  formu_dogrula(e);
}); // 'form1' formuna listener ekledik

“form1″ id’li element ‘submit’ edilirken formu_dogrula. Şimdi formu_dogrula fonksiyonunu yazalım.

function formu_dogrula(e) {

  // CSS3 Selector'leri kullanarak istediğimiz elementleri Selector class'ı sayesinde seçebiliyoruz. Detaylar için: http://developer.yahoo.com/yui/selector/
  var zorunlu_alanlar = select('input.zorunlu');  // zorunlu class'ına sahip tüm input elemanlarını -array olarak- seçtik. YAHOO.util.Selector.query fonksiyonu elementleri seçip array olarak döndürür. Seçilen elementlerin tüm DOM özelliklerine erişmek mümkündür. ör: select('input.zorunlu')[0].style.display
  var yil_alanlari = select('input.yil');         // yil class'ına sahip tüm input elemanlarını -array olarak- seçtik.

  // Seçtiğimiz zorunlu_alanlar'ı kontrol etmek için hepsini teker teker for döngüsüyle gezeceğiz.
  for(var i=0;i < zorunlu_alanlar.length;i++) {

    if(zorunlu_alanlar[i].value == "") { // value boş ise
      $D.setStyle(zorunlu_alanlar[i], 'background', '#FF7791'); // doldurulmamış alanı kırmızıya boyuyoruz. Dom fonksiyonları için: http://developer.yahoo.com/yui/dom/
      alert('Lütfen gerekli alanları doldurunuz.');  // uyarı gösteriyoruz.
      zorunlu_alanlar[i].focus(); // Doldurulmamış alana focus ettik.
      $E.preventDefault(e); // formun submit edilmesini engelliyoruz. Tüm Event fonksiyonları için: http://developer.yahoo.com/yui/event/
      return false;
    }
    else {
      $D.setStyle(zorunlu_alanlar[i], 'background', '#97F297'); // Herhangi bir CSS kuralını setStyle fonksiyonuyla elementlere atayabiliriz.
    }

  }

  // Zorunlu alanlar için kontrolleri yaptık şimdi de yil_alanlari'ni kontrol edeceğiz. Bu kez for döngüsü yerine YUI'nin batch fonksiyonunu kullanacağız. batch, fonksiyonel dillerdeki map'in karşılığır. For döngüsünden daha hızlı ve verimli çalışır. Ayrıca anlaşılması da daha kolaydır.

  $D.batch(yil_alanlari, function(el) {

    if(!YAHOO.lang.isNumber(el.value*1)) { // YAHOO.lang class'ı javascript yazarken sıkça kullanılan yardımcı fonksiyonları barındırıyor. Detaylar için:XXXXXXXXX
      $D.setStyle(el, 'background', '#FF7791'); // yanlış doldurulmuş alanı kırmızıya boyuyoruz.
      alert('Yıl alanına yalnızca rakam giriniz.');  // uyarı gösteriyoruz.
      $E.preventDefault(e); // formun submit edilmesini engelliyoruz.
      return false;
    }
    else {
      $D.setStyle(el, 'background', '#97F297');
    }

  });

  return true; // Burada tüm doğrulamalardan geçmiş olan formumuzun post edilmesi için true değerini döndürüyoruz.
}

Yaptığımız örneği ayrı bir sayfada görmek için buraya tıklayınız.

IE7 Bug: On window resize relative positioned elements disappear

Serdar — Tue, 10 Nov 2009 20:52:41 +0000

If you have relative positioned or floating elements on your page, try to resize your page in IE7, you will see some elements disappear. I also know that sometimes hovering block displayed anchors causes this bug.

Problem is causeing from haslayout property of these elements. If we change haslayout property, the problem is going to be solved. An easy hack of haslayout property is applying “zoom:1″ to elements:

relative_elements_selector {
  zoom:1;
}

YUI Selector IE8 Bug and Solution

Serdar — Mon, 09 Nov 2009 12:26:37 +0000

We used YUI 2.5.2 version for a long time on markafoni.com. With the new face of markafoni I decided to update YUI version. I updated YUI to 2.8rc version, but surprisingly I saw javascript errors in all IE8 pages. After googling I found the solution. The problem is was here in selector.js (or selector-min.js):

if(YAHOO.env.ua.ie && YAHOO.env.ua.ie<8)

Change to:

if(YAHOO.env.ua.ie && ((!document.documentMode && YAHOO.env.ua.ie<8) || document.documentMode < 8))

Easy way of mounting remote media/folders with sshfs

Serdar — Fri, 06 Nov 2009 00:34:31 +0000

Using ssh’s power it is very easy to mount remote folders. All you need to install sshfs package. It exist in the repository of Ubuntu. Don’t forget to add your user to Fuse group.

Step 1.

Install sshfs:

sudo apt-get install sshfs

Step 2.

Go to Ubuntu’s System -> Administrator -> Users and Groups

Add your user to fuse group.

Now you’re ready to mount remote folders. For example:

sshfs root@remoteip:/remote_path /home/user/Desktop/mnt

ProcessingJs ve HTML5 Canvas

Serdar — Mon, 19 Oct 2009 23:09:47 +0000

Web’de animasyon yapmak hiç bu kadar kolay olmamıştı. HTML5 bir gün tüm browserlar tarafından desteklenir olduğunda, basit animasyonlar yaratmak için herhangi bir araca gerek duymayacağız. Processing ve Processingjs sayesinde, HTML5 canvas üzerinde animasyon oluşturmak için bir kaç satır kod yazmak yeterli oluyor.

Okul projemi processing’de yazdıktan sonra örnek olarak bloguma da yazmaya karar verdim. Bu animasyon Internet Explorer haricindeki browserlarda görünecektir.

Adınız*		adınızı giriniz
Doğum yılınız*		sadece 4 haneli sayı giriniz