Promise, Observable

2018 07 17 No Comments

taslak

Promise

A Promise handles a single event when an async operation completes or fails.

Note: There are Promise libraries out there that support cancellation, but ES6 Promise doesn’t so far.

  • – return a single value
  • – not cancellable
  • – more readable code with try/catch and async/await

Observable

An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each event.

Often Observable is preferred over Promise because it provides the features of Promise and more. With Observable it doesn’t matter if you want to handle 0, 1, or multiple events. You can utilize the same API in each case.

Observable also has the advantage over Promise to be cancelable. If the result of an HTTP request to a server or some other expensive async operation isn’t needed anymore, the Subscription of an Observable allows to cancel the subscription, while a Promise will eventually call the success or failed callback even when you don’t need the notification or the result it provides anymore.

Observable provides operators like map, forEach, reduce, … similar to an array

There are also powerful operators like retry(), or replay(), … that are often quite handy.

    – work with multiple values over time
  • – cancellable
  • – support map, filter, reduce and similar operators
  • – use Reactive Extensions (RxJS)
  • – an array whose items arrive asynchronously over time

React yaşam döngüsü

2018 07 17 No Comments

Bu yazı not tutma amaçlı yazılmıştır..

React’da her bileşen için belirli durumlarda kullanılabilecek “yaşam döngüsü yöntemi” vardır.

constructor()

constructor metodunda local state değişkenleri tanımlanır. Ayrıca diğer componentlerden elen props ları okumak için super(props) en başa konur.

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Event tutucu metodları da bu kısımda yazılır.

componentDidMount()

componentDidMount() bileşen oluşturulduktan hemen sonra çalışan metoddur. setState() ile state değişkenlerini burada oluşturabilirsiniz.

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() bileşen güncellendikten sonra olanki evredir.

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

componentWillUnmount()

componentWillUnmount() bileşen oluşturulmadan hemen önceki aşamadır. Bu aşamada setState() kullanılmaz.

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate() de bileşenin güncellenip güncellenmeyeceği kararı verilir. Default true.

static getDerivedStateFromProps(props, state)

static getDerivedStateFromProps(nextProps, prevState){
   if(nextProps.someValue!==prevState.someValue){
     return { someState: nextProps.someValue};
  }
  else return null;
}

What happens when you call setState?

Bileşenin içindeki state değerleri güncellenir.

What’s the difference between an Element and a Component in React?

React element: arayüzde göstermek istediğimiz herhangi bir UI etiketi
React component: bir fonksiyon veya sınıf olabilir. sonucunda yine UI elementi döndürebilir.

When would you use a Class Component over a Functional Component?

Eğer component yaşam döngüsü içeriyorsa buna Class component(stateful) denir. İçermiyorsa Functional(Stateless) component

What are refs in React and why are they important?

Ref dom elementine direkt olarak componentten erişmek için kullanılır.

What are keys in React and why are they important?

Bir listedeki elemanların değişimini, eklenmesini, ya da oluşumunu izleyebilmek için key kullanılır. Benzersizlerdir.

In which lifecycle event do you make AJAX requests and why?

AJAX istekleri componentDidMount() metodunda yapılır. AJAX isteklerinin component oluşumuna kadar bitip bitmeyeceğini bilemeyeceğimiz için, bu istekleri componentDidMount içerisinde yaparız ki, istek bittiğinde component güncellensin.

What does shouldComponentUpdate do and why is it important?

shouldComponentUpdate props ve state değerlerini karşılaştırarak o componentin güncellenip güncellenmeyeceğine karar verir.

React redux?

Aslında en büyük sebep şu: Eğer ki kapsamlı, bir çok component’i birbiri içine geçmiş şekilde projenizde kullanıyorsanız, artık component’lerin state’lerini birbirine taşımak büyük bir zorluk olmaya başlıyor. Dolayısı ile tanımlanmış, standart mimari ile bütün state bilgilerine dışardan erişilebilir, tek bir noktadan yönetilebilen, istenildiği zaman direk çağırılıp kullanılabilir bir yapı olarak redux kullanımı sistemin kompleksliğini azaltıyor. Gereksiz kod yazımını azaltıyor. link

CSS LESS ellipsis text

2018 07 05 No Comments

CSS3 gave us perfect property: text-overflow.
We have ability to cut off words.

In LESS there are many mixins I know. But I wanted to share my little mixin 😀

Use like this:

.ellipsis-text(@LineNumber);

See the Pen RJmQXG by ozer (@ozer) on CodePen.

Ubuntu touchpad problem

2018 06 16 No Comments

When I install Kubuntu to my computer, unfortunately touchpad was not working. Tried a few ways and this way worked for me. (Xiaomi notebook pro)

sudo apt remove xserver-xorg-input-synaptics xserver-xorg-input-evdev
sudo apt install xserver-xorg-input-libinput

After then sudo vim /etc/X11/xorg.conf.d/30-touchpad.conf
Type these inside vim editor:

Section "InputClass"
    Identifier "touchpad"
    Driver "libinput"
    MatchIsTouchpad "on"
    Option "Tapping" "on"
EndSection

And press ESC, then :wq

Source.

WordPress üyelere özel içerik için kısa kod

2018 06 07 No Comments

Bazen üyelik sistemi ile çalışan wordpress sitelerinde, site sahipleri sadece üye girişi yapan kullanıcılara özel içerik göstermek isteyebilir. Bunu için kısa kod kullanmak en mantıklısıdır.

Yazı içerisinde “ozel” kısa kodunu kullanarak bazı içerikleri gizleyebilirsiniz.
Mesela:

[ozel] indirme linkleri vs burada [/ozel] 

Kısa kodu aktif etmek için temanızın functions.php dosyasını açın ve

<?php

den sonra ekleyin:

function uye_ozel_shortcode($atts, $content = null) {

   if(is_user_logged_in()) {
     return $content;
   } else {
     return '<a class="giris-yap" href="'.wp_login_url( get_permalink() ).'">Bu içeriği görmek için giriş yapmalısınız..</a>';
   }
}

add_shortcode('ozel', 'uye_ozel_shortcode');

Else bloğundan sonra içeriği düzenlemek size kalmış.

CSRF token with Selmer, Ring

2018 05 29 No Comments

Firstly install Selmer and Ring. Here are my project.clj

(defproject test "0.1.0-SNAPSHOT"
  :description "FIXME: write description"
  :url "http://example.com/FIXME"
  :min-lein-version "2.0.0"
  :resource-paths ["public" "resources" "templates"]
  :dependencies [[org.clojure/clojure "1.8.0"]
                 [compojure "1.5.1"]
                 [ring/ring-defaults "0.2.1"]
                 [mysql/mysql-connector-java "5.1.32"]
                 [yesql "0.5.3"]
                 [selmer "1.11.7"]
                 [org.clojure/tools.namespace "0.2.11"]
                 [proto-repl "0.3.1"]
                 [proto-repl-charts "0.3.1"]
                 ]

  :plugins [[lein-ring "0.12.4"]]
  :ring {:handler test.handler/app}
  :profiles
  {:dev {:dependencies [[javax.servlet/servlet-api "2.5"]
                        [ring/ring-mock "0.3.0"]]}})

After that, create crsf-token as tag to use in selmer template engine.
(more…)

Using Kemal CSRF handler with Crinja

2018 05 19 No Comments

I assume that you are using kemal, kemal-session and kemal-csrf. Require them and use add_handler to handle requests.

Default input name is authenticity_token so I used it.

require "kemal"
require "kemal-session"
require "kemal-csrf"

add_handler CSRF.new(
  allowed_methods: ["GET", "HEAD", "OPTIONS", "TRACE"],
  error: ->myerrorhandler(HTTP::Server::Context)
)

def myerrorhandler(env)
  if env.request.headers["Content-Type"]? == "application/json"
    {"error" => "csrf error"}.to_json
  else
    "No token!"
  end
end

Kemal.run

Create a function to use it in templates
(more…)

Crystal seo friendly url

2018 05 19 No Comments

Maybe someone needs it.

Markdown render in template side with Crinja – Crystal

2018 05 18 No Comments

Hello
In crystal ecr templates, we can use render markdown like this: <%= Markdown.to_html("# text") %>

But with crinja we cant do it as I see.

So I created template function.

require "markdown"

c = Crinja.new
c.loader = Crinja::Loader::FileSystemLoader.new("src/views/")

c.functions << Crinja.function({:str => ""}, :Markdown) do
  Markdown.to_html(arguments[:str].to_s)
end

To use it:

{{ Markdown("# title")  | safe}}

Enjoy.

Crystal code reloading with nodemon

2018 05 14 No Comments

I saw this solution in this link.

First install nodemon globally:
npm i -g nodemon

After install, run your main cr file:
nodemon --exec "crystal run" src/{YOUR_MAIN_FILE}.cr

In my computer (macbook early 2015 8/128), it works faster than sentry.

Ps: Nodemon doesn’t works with ecr templates, sentry works.