Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Sunday, January 17, 2016

Multi-threading in JavaScript with ParallelJS


Parallel.js is a simple library for parallel computing in Javascript (in node.js or in the modern web browsers). Paralleljs takes advantage of Web Workers for the web, and child processes for Node.

What is web workers

Web Workers are a mechanism by which a script operation can be made to run in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down.
- https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API 


Multi-Threading in JavaScript

JavaScript is executed in a single thread by an event loop. With the Worker interface, a solution to this single-thread limitation problem has been found. With web workers Messages Api is used to communicate.

Note that, multi-threaded programming is parallel, but parallel programming is not necessarily multi-threaded. Unless the multi-threading occurs on a single core, in which case it is only concurrent.

Parallel.js

ParallelJS  provides a great easy to useAPI for web workers with many helpers. A sample usage :

var p = new Parallel([1, 2, 3, 4, 5]);console.log(p.data)


The instance p contains a set of helper methods, for example spawn, map, reduce.
Here is a simple example of map function usage. It returns a Promise with the result. This is not the right solution for multi-threading with parallel.js but only a simple example. 

p.map(function (number) {
 return number * number;
}).then(function (data) {
 console.log(data);
});

Wednesday, September 17, 2014

This Week's Open Source Projects on Github

Here my starred repositories for this week. Mostly javascript/nodejs projects


omeka / omeka-s
The Omeka S web publication system for galleries, libraries, archives, and museums. A local network of independently curated exhibits sharing a collaboratively built pool of items and their metadata.

omeka / Omeka
A flexible web publishing platform for the display of library, museum and scholarly collections, archives and exhibitions.

sindresorhus / awesome-nodejs
A curated list of delightful Node.js packages and resources.

marmelab / ng-admin
Add an AngularJS admin GUI to any RESTful API

voronianski / melchior.js
Chainable Module Definition (CMD) dependency loader for JavaScript

yatish27 / linkedin-scraper
Scrapes the public profile of the linkedin page

okulbilisim / awesome-datascience
An awesome Data Science repository to learn and apply for real world problems.

KnpLabs / Gaufrette
PHP5 library that provides a filesystem abstraction layer − will be a feast for your files!

erming / shout
A web IRC client

Friday, April 25, 2014

baudio by @substack

Eğer takip etmiyorsanız @substack takip edilecek kişilerdendir.

Javascript ile müzik yapmak için geliştirilmiş çok sevdiğim şu paketin de geliştiricisi : baudio

Yarım saatlik şu videosunu da izlerseniz bu paket hakkında daha çok fikre sahip olursunuz.



Baudio ile muzik yapmak javascript geliştiriciler için çok daha eğlenceli :)

Örnek :
var baudio = require('baudio');

var n = 0;
var b = baudio(function (t) {
    var x = Math.sin(t * 262 + Math.sin(n));
    n += Math.sin(t);
    return x;
});
b.play();

Saturday, April 19, 2014

Hroute.js

Tiny helper to catch hash changes

Demo : http://jsfiddle.net/hasantayyar/Wq7PC/2/embedded/result/

hroute({
        '': function(){
            content.innerHTML = "default page";
        },
        'about': function(){
            content.innerHTML = "about page";
        },
        '^video\/(.*)': function(params){
            content.innerHTML = '<iframe width="100%" height="315" '+
            'src="https://www.youtube.com/embed/'+params[1]+
            '" frameborder="0" allowfullscreen></iframe>';
        } 
    },{
    default: function(){
        console.log("404/notfound/default action"); 
    }, 
    beforeAction: function(){
        console.log("before action");
    }
});

Tuesday, December 3, 2013

clone js object (lazy way)

var ax = {};
var bx = jQuery.extend(true, {}, ax);

Friday, November 22, 2013

console.table

tabular veri veya benzer duzenli verileri isledigimiz uygulamarda debugging amacli console.log yerine console.table kullanmak daha mantikli azizim.
Bunu da bugun ogrenmem buyuk kayip.

Mesela verimiz

var data = [ {"name":"Bob Dylan","date":"1977-10-01"}, {"name":"Janis Joplin","date":"1978-03-01"} ];


console.log(data) su ciktiyi veriri consola :

Ama console.table(data) dersem :






Bunu da surdan okudum az evvel.

Friday, July 1, 2011

Artık Google Appscript

Çeşitli medya takip sistemlerimi artık google app script ile google docs a taşiyorum. İnanılmaz kolay. Javascript olmasi bir yana network islemlerinde cross-doamin sorunlari yaşamadan kodlayabiliyor, diger kullanicilarin scriptlerinden de faydalanabiliyorsunuz.
Online editor ve debugger'i ile pratik cozumler yaratabilirsiniz. Simdilik sadece twitter ve google dan cesitli datalari fetch ediyorum ve raporluyorum.


Konuyu irdelemek icin : http://code.google.com/googleapps/appsscript/

Bi kaç ekran görüntüsü.



Thursday, March 11, 2010

Google Visualization Api - Interactive charts ve UTF-8 Karakter Sorunu

Visualization Api içinde "Interactive charts" son derece pratik ve gelişmiş bir şekilde grafik sunum ihtiyaçlarınızı karşılıyor. "Image Charts" için herhangi bir js kütüphanesi yüklemenize gerek olmazken bunda Google jsapi ile Visualization Api yi yükletiyorsunuz sayfanıza. Detay : http://code.google.com/apis/visualization/documentation/using_overview.html

Ben de harita üzerinden ağırlık dağılımını göstermek için kullandım şu şekilde

<script type="text/javascript" charset="utf-8" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript" charset="utf-8">
    google.load('visualization', '1', {
        'packages': ['geomap']
    });
    var temp = 0;
    google.setOnLoadCallback(drawMap);


    function drawMap() {

        var data = new google.visualization.DataTable();
        data.addRows(81);
        data.addColumn('string', 'City');
        data.addColumn('number', 'Kelime Sayisi');

// ...
        data.setValue(4, 0, 'İstanbul');
        data.setValue(4, 1, 57);

        data.setValue(5, 0, 'Ankara');
        data.setValue(5, 1, 42);
// ...

var options = {};
   options['region'] = 'TR';
   options['colors'] = [0xA493FF, 0x4C51CD, 0x00065E]; // colors
   options['dataMode'] = 'regions';
   options['width'] = '540px';
   options['height'] = '348px';
 
   var container = document.getElementById('map_canvas');
   var geomap = new google.visualization.GeoMap(container); 
  
   var ikinci_sehir="";
   var ilk_sehir="";
   
  google.visualization.events.addListener(geomap, 'regionClick', function(e) {   
   sehir=e['region']; // tıklanan sehri su sekilde getirir : TR-06   : TR-PLAKA  
 });
 
 geomap.draw(data, options);
 
    };


Çok da güzel oldu aslında.



Fakat tek sorun Türkçe karakterlerde.
Tam şurada şehir adlarını eklediğim yerde :
  
        data.setValue(4, 0, 'İstanbul');
        data.setValue(4, 1, 57);
        data.setValue(5, 0, 'Ankara');
        data.setValue(5, 1, 42);

Bu grafiğin aynısı google analytics'de de var ve fakat orada Türkçe karakter sorunu yok. Yani çözümsüz bir şey değil fakat henüz çözüm bulamadım.

Mesela neler yaptığımı da yazayım, "şunu yap bunu yap öyle dene" demeyin yani :

1. Sayfanın karakter kodlaması gerçekten de UTF-8 mi diye kontrol ettim
2. header ('Content-type: text/html; charset=utf-8'); yaptım üstüne bir de
3. javascript tagına charset="utf-8" ekledim
4. google jsapi'ye karakter kodlaması parametresini utf-8 verdim bir d eöyle yüklettim
5. Gelen şehir isimleri "string" değerlerimi veritabanından doğrumu çekiyorum
6. iconv ile utf-8 gelen şehir adlarını bir de iso formatına çevirdim.
7. 6 dakininin tam tersini yaptım
8. bıktım usandm bıraktım
9. google araması yaptım
10. uykum geldi bu yazıyı yazdım


Çözüm bulur bulmaz yazacağım buraya. Fakat lurda okuyan bir bilinçli internet kullanıcısı çözümü biliyorsa yorum olarak yazsa ne güzel olur?

Saturday, March 6, 2010

Google Maps Api : Adresten haritaya

<!-- Açıklama yaz :) -->

 <script src="http://maps.google.com/maps?file=api&v=2&key=ApiKeyinizBurayaYazılacak&sensor=true"
        type="text/javascript"></script>
       
    <script type="text/javascript">
 var geocoder;
 var map; 
 function initialize() {
 var geocoder = new GClientGeocoder();
 var map = new GMap2(document.getElementById("map_canvas"));
   geocoder.getLocations("Ankara , TURKEY", function(result){
          if (result.Status.code != 200) {
            alert('Could not geocode "' + result.name + '"');
            return;
        }
          place = result.Placemark[0];
          point = new GLatLng(place.Point.coordinates[1],
                              place.Point.coordinates[0]);
          map.setMapType(G_HYBRID_MAP);
          map.setCenter(point, 8);
          marker = new GMarker(point);
         map.addOverlay(marker);
         alert("OK");
          marker.openInfoWindowHtml(place.address);
    
   });
 
 }
  
    $(document).ready(function(){
     initialize(); 
    });

    </script>


Konuyu irdeleyin:
geocoder.getLocations : 
 - http://www.google.com.tr/search?hl=tr&rlz=1C1GGLS_trTR355TR355&q=geocoder.getLocations&btnG=Ara&meta=&aq=f&oq=
http://www.developer.com/tech/article.php/3615681/Introducing-Googles-Geocoding-Service
google maps api ref. : 
http://code.google.com/apis/maps/documentation/reference.html

Friday, March 5, 2010

jquery ile akıllı liste çözümleri

<ul> veya <ol> bir listeniz vardır uzunca, belki dinamik oluşmuştur, genişliği değişkendir fakat genişliğine göre sayafda sütunlara bölünmesini istiyosunuz. Bu sadece görsel bir durumdur. İşte bu durumda şunu ve bunu kullanabilirsiniz.


Konuyu iredeleyin
http://plugins.jquery.com/project/makeacolumnlists
http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery

Saturday, September 26, 2009

server-side değil "Client-side PHP"





Yine bir gün stumble yaparken şu js kütüphanesi ile karşılaştım : http://phpjs.org/

Asıl amacı php fonksiyonlarını client-side çalışır yapabilmek. Bir de kılıfı var; diyor ki : PHP.JS kullanarak, client-side teknolojiler ile çok uğraşan PHP geliştiricilerini hızladırabilir.

Bir de özetle şöyle demişler :
"PHP.JS is an open source project in which we try to port PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side."

İlk bakışta eksik yanı mutlaka çok olacaktır, ancak meseleyi irdeleyince php.js kullanan bir kütüphane daha buldum ki o daha tatmin edici geldi : http://www.harmony-framework.com
Harmony henüz beta ve kendilerini şöyle özetliyorlar :

Harmony's goal is to bring php in the browser, thus developing on the server and on the client side using only one language. PHP, which is simple to use and known by thousands, is a perfect fit. No needs to learn javascript any more. The conversion between the two language is instantaneous! (Learn what you cannot do).



Konuyu irdelemek için
http://phpjs.org
http://www.harmony-framework.com/

Saturday, September 5, 2009

javascript kullanarak iphone, android, blackberry uygulamalar

ÖĞRENDİM
TAVSİYE EDİYORUM


Sadece javascript bilgimle iphone uygulaması geliştirmenin bir yolunu daha buldum : http://phonegap.com
Henüz denemedim. Videolarına baktım ve dökümanları inceldim. Tam aradığım bir geliştirme kiti.

Aslında bizim jquery john bundan bahsetmiş aylar evvel. Ancak ben epey geriden geliyorum anlaşılan.

Wednesday, June 3, 2009

Jquery Animasyonlarında Dikkat Edilmesi Gereken Önemli Bir Nokta

Bu sabah jquery ile yaşadığım kötü hatıra ile not etme gereği duydum

Sıradan bir menü efekti için mouse linklerin üzerine geldiğinde linklerin sağa doğru animasyonunu sağlayan kod kabaca şu şekilde olabilir.

$(document).ready(function() {    
$('ul a')        
  .hover(
  function() {$(this).animate({ left: 30 });}, 
  function() { $(this).animate({ left: 0 });});
  });
Görmek için: http://jsbin.com/oyaxe
Kodu daha yakın incelemek/düzenlemek için: http://jsbin.com/oyaxe/edit

Fakat yukarıdaki örnekde mouse hızlıca linklerin üzerinden bir kaç gez gidip geldiğinde linklerin tüm animasyonu tamamlamak için animasyonları kuyruğa koyar ve mouse artık başka yerde olsa bile önceki hareketinin tetiklediği animasyonlar bir süre devam eder. Bu önemli nokta genellikle atlanıyor. Bunun önüne geçmek için animate() fonksiyonundan hemen önce stop() fonksiyonu kullanılmalı. Şöyle ki:
$(document).ready(function() {    
$('ul a')        
  .hover(
  function() {$(this).stop().animate({ left: 30 });}, 
  function() { $(this).stop().animate({ left: 0 });});
  });
Görmek için : http://jsbin.com/ayizi/
Kodu daha yakın incelemek/düzenlemek için: http://jsbin.com/ayizi/edit


Etraflıca bakınmanız için ek bağlantılar:
http://docs.jquery.com/Effects/stop
http://docs.jquery.com/Effects/animate
http://docs.jquery.com/API/1.3/Effects

Monday, May 25, 2009

Greasemonkey ilk denemem

Greasemonkey ile herhangi bir twitter profilinden son güncellemeyi aralılarla kontrol edip herhangi bir sayfanın üzerinde tek satır olarak görüntüleyeceğim. Tabiki sadece bir prototip.
Greasemonkey ile jquery hiç kullanmamıştım bu vesileyle onu da kullanmış oldum.
Eğer kodu buradan okuyamıyorsanız :  http://pastebin.com/f6e5cbbe3

test3.user.js

// ==UserScript==
// @name           test3
// @description    tayyar test3
// @copyright      2009, Hasan Tayyar BEŞİK 
// @license        GPL version 3 or any later version (http://www.gnu.org/copyleft/gpl.html)
// @include        *
// ==/UserScript== 

// jQuery eklendi
var jq = document.createElement('script');
jq.src = 'http://jquery.com/src/jquery-latest.js';
jq.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(jq);

// jQuery yüklenme durumu kontrolü
function GM_wait() {
 if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
 else { $ = unsafeWindow.jQuery; twit_kontrol(); }
}
GM_wait();

function twit_kontrol(){

var obje = document.createElement("div");
obje.innerHTML =  '<div style="width:100%;height:25px;z-index:100; background:#7FDFF8;color:#050505;position:relative; top:0" id="twits"></div>';
document.body.insertBefore(obje, document.body.firstChild);
var siteName = 'htayyar';
$.getJSON(
'http://search.twitter.com/search.json?callback=?&rpp=50&q=from:' + siteName,
 function(data) {
 $.each(data, function(i, tweets) {
 if(tweets[0].text !== undefined)
 $('#twits').append('<span>' + tweets[0].text + '</span><br />');
 });
 }
);
var st=setTimeout("twit_kontrol()",2000); 
}

Friday, May 22, 2009

ip adresinden ülke, bölge, şehir öğrenmek için ücretsiz bir api kullanıyorum

http://iplocationtools.com "Free IP address geolocation, API and fraud detection tools"

Bu ücretsiz api ile ip adresinin konumunu bulabilirsiniz. %90-%95 doğruluk oranı verilmekte. Nadiren yakın bölgeler çıkabiliyor. Örneğin İzmir için bazen Manisa çıkabilir ki bunun nedeni de muhtemelen oradaki internet ağı ile ilgili.

Bu apinin php ile nasıl kullanılacağı bu sayfada güzelce yazılmış : http://iplocationtools.com/ip_location_api.php

Veriyi varsayılan olarak XML formatta alıyorsunuz. Ancak JSON olarak da alabilirsiniz.

# xml veya json cikti verebiliyor :
http://iplocationtools.com/ip_query.php?ip=120.120.120';
http://iplocationtools.com/ip_query.php?ip=120.120.120&output=json';


# callback fonksiyonu ekleyebilirsiniz
http://iplocationtools.com/ip_query.php?ip=120.120.120&output=json&callback=functionToCall


Güzel yanı bir kerede birden fazla sorgu yapabilirsiniz.

http://iplocationtools.com/ip_query2.php?ip=120.120.120.100,121.121.121.100&output=json

Detay bilgiler değil sadece ülke adının öğrenmek için daha temiz çıktı veren bir sayfası daha var bu apinin.


http://iplocationtools.com/ip_query_country.php?ip=120.120.120.120&output=json
Ayrıca tüm veritabanını indirebilirsiniz. Bunu sevdim çünkü çoğu yer satıyor.
http://iplocationtools.com/sql_database.php

Kullanıp memnun kalırsanız lütfen donation butonuna basıp birazcık bişeyler gönderiverin.

Guncelleme

Arayuzu daha duzgun olan bir arac daha var (cok arac var aslinda). Sunu da bir deneyin derim
https://www.vpnmentor.com/tools/ipinfo/ "100% Accuracy Free Ip Lookup Tool"

Kullanıcıya güvenme 1 - Form Submit Butonunu Etkinsizleştir

TAVSİYE EDİYORUM

Çoğu uygulamada görüp hala kendi uygulamalarımda yapmadığım bir durumdur. Bir formda "Submit" tuşuna basıldıysa kullanıcının tekrar tekrar o tuşa basmasını engellemek gerek. tembel olduğum için kısaca tüm formlara bu özelliği şu şekil ekliyorum artık


// <form> bütün form tagleri
$('form').submit(function(){// submit olduğu vakit
        $('input[type=submit]', this).attr('disabled', 'disabled');
});

Thursday, February 12, 2009

alternatif radio button

artık radio button kullanmaktan vazgeçtim.
jquery-ui ye iyice alıştım ve artık radio button yerine şu örnekteki seçilebilir şeyleri kullanmaya karar verdim.
hem tasarımı katletmiş olmam hem de kodlaması eğlenceli olur.

Monday, January 26, 2009

Ajax Library Api

jquery hergün kendini daha fazla sevdirirken ben de iyice ısındım ona. aramıza bi bağ oldu.
bu bağı kuvvetlendirecek bir metot da jquery kütüphanesini uzak bir sunucudan çağırmak. bu sayede jquery kütüphane dosyasını ordan oraya taşımak zorunda kalmıyorum. hizmeti veren de google olunca hız konusu da sorun olmuyor.

ajax library api - google code sayfası

kullanabilmek için

<script src="http://www.google.com/jsapi"></script>

Diye sayfaya yüklemek gerekiyor. Hepsi bukadar.

(ajax api library ile tanışalı oldu baya ama yeni kullanmaya başladım.)

1. örneğin jquery yüklemek için:

google.load("jquery", "1.3.1"); // ikinci parametre versiyon

farklı şekillerde de yükleyebiliriz (sıkıştırılmış, paketlenmiş gibi). google code sayfasında detaylar mevcut.

google.load("jquery", "1.3.1", {uncompressed:true});

2. jqueryui yüklemek için dahi kullanıyorum :

google.load("jqueryui", "1.5.3");

3. diğer bazı kütüphaneler bile var (mootools, dojo gibi ...) .
google.load("mootools", "1.2.1");
google.load("dojo", "1.2.3"); 
google.load("yui", "2.6.0");

benim en çok kullandığım bir diğer kütüphane de swfobject kütüphanesi... bu da bu hizmet ile yüklenebilmekte!

google.load("swfobject", "2.1");

bu dosyaları "google.load" yerine doğrudan adresleri ile de yükleyebilirsiniz tabi. Hepsi google tarafından barıdırılmakta. Hız sorunu yok yani.
google code sayfasındaki dökümantasyonunda hepsinin adresiler de mevcut!