Page 2 of 3

CSS Başlangıç – #6.Gün

Geçtiğimiz hafta HTML ile güzel bir başlangıç yaptık. Fakat CSS olmadan en azından site yalın halde kalacaktı. Bu yüzden Blockchain,Frontend veya Backend developer olmak için CSS ide öğrenmemiz gerekmektedir.

İlk gün sizi zorlayabilir. Örnekler geliştirerek hız kazanabilirsiniz. Bilgiyi kalıcı olarak öğrenmek adına sürekli kod yazmanız sizin yararınıza olacaktır.

CSS Nedir?

Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları, bilinen kısa adıyla CSS), HTML‘e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir işaretleme dilidir.

İnternet sayfaları için genelgeçer şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak harflerin stilini, yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliktir.

Devamını oku

HTML Kalan Konular ve Hafta sonu Yapılacaklar – #5.Gün

Dün genel olarak HTML ile ilgili ana konuları tamamlamış olduk. Bugün tek videoda/kitapta tüm 1 haftanın özetini işleyeceğiz.

Tek oturuşta 3 saatlik videoyu izlemek tabii kolay bir şey değil. Benim tavsiyem 1.25x veya 1.5x hıza alarak örneklerde kodların tamamlandığı kısımda kendi kodlarınızı yazmanız olacaktır. Sürekli kendi kodlarınızı yazın deme sebebim pratikliği sağlamak içindir. Sadece okumak ve izlemekle maalesef yazılım öğrenilmiyor. Hem beyninizin hem ellerinizin bu yazılım için biraz eğitilmesi gerekiyor.

YouTube video
Devamını oku

HTML Formlar ve Semantic Elemanlar – #4.Gün

Bir önceki gün HTML de temel kodları yazacak kıvama geldik sayılır. Bugün sadece 2 konu üzerinde çalışacağız yarın ise kalan konulara değinecek ve haftayı HTML ile tamamlamış olacağız. Hafta sonu ise çeşitli çalışma sayfaları oluşturmak için kaynaklar ve çıktısını almanız için kopya kağıdı paylaşacağım.

1. Gün - 180 Günde Full Stack Blockchain/Web3 Yazılımcısı Olunur mu?
2. Gün - HTML’e Giriş
3. Gün - HTML

4.Gün Konuları

1 – Formlar ve Form Etiketleri

Video:

YouTube video

Döküman: https://www.w3schools.com/html/html_forms.asp
HTML FORMS bölümü altındaki tüm bölümleri okuyun.

Devamını oku

HTML – #3.Gün

İlk gün temel internet/web ortamı ile ilgili bilgileri paylaştıktan sonra 2. gün ise HTML e giriş yaptık. İlk 2 günü başarılı şekilde ilerlettiyseniz eğer şuan HTML kod yazabiliyor ve bunun neticesinde tarayıcınızda görüntüleyebiliyor olmanız gerekmektedir. Bugün ise HTML ile ilgili konuların bir bölümünü daha paylaşacağım. Hedefim 5 günde HTML in tüm konularını tamamlamaktı. Bakalım kadem kademe ilerleyeceğimiz bu süreçte ne kadar başarılı olacağız.

1. Gün - 180 Günde Full Stack Blockchain/Web3 Yazılımcısı Olunur mu?
2. Gün - HTML’e Giriş

3. Gün Konuları

1- HTML de Linkler <a>

Video: https://www.youtube.com/watch?v=AwbFsG0gi1g

Döküman: https://www.w3schools.com/html/html_links.asp

2 – Görseller <img>

Video: https://www.youtube.com/watch?v=TRT_YRekGDU

Döküman: https://www.w3schools.com/html/html_images.asp

3 – Tablolar <table>

Video: https://www.youtube.com/watch?v=2Jc1F2vLjfI

Döküman: https://www.w3schools.com/html/html_tables.asp

4 – Listeler <ul> <ol>

Video: https://www.youtube.com/watch?v=QOF8bS6WFPU

Döküman: https://www.w3schools.com/html/html_lists.asp

5 – Video <video>

Video: https://www.youtube.com/watch?v=-BYOHFEZPy4

Döküman: https://www.w3schools.com/html/html5_video.asp

6 – Audio <audio>

Video: https://www.youtube.com/watch?v=K26uN8q4IIc

Döküman: https://www.w3schools.com/html/html5_audio.asp

7 – Block-level ve Inline Elementler

Video: https://www.youtube.com/watch?v=fz_VJym0rl0

Döküman: https://www.w3schools.com/html/html_blocks.asp

8 – Div ve Span Farkı

Video: https://www.youtube.com/watch?v=j1UXecpVK8Y

Döküman: Bir önceki maddenin dökümanında yer alıyor.

9 – Id ve Class Nedir?

Video: https://www.youtube.com/watch?v=pXMg_CjpRK4

Class Döküman: https://www.w3schools.com/html/html_classes.asp
Id Döküman: https://www.w3schools.com/html/html_id.asp

10 – Sayfa İşaretleri

Video: https://www.youtube.com/watch?v=EYNL_r7-Xwo

Döküman: https://www.w3schools.com/html/html_links_bookmarks.asp

3.gün konularının sonuna geldik. Takribi videoların tamamını izlemeniz için ayırmanız gereken süre 50dk, dökümanları okumanız için gereken süre yaklaşık 1 saat. Bugün bir de önceki günün konuları ile birleştirerek bir örnek HTML dökümanı oluşturmanız faydalı olacaktır. Aşağıdaki tüm etiketleri içeren tek sayfa bir örnek yazabilirsiniz.

<html>
<p>
<h1>
<b>,<strong>,<i>
<a href=""> <a href="#bla">
<img>
<video>
<audio>
<p class="blabla">
<div id="bla bla">
<span>
<table>
<ul> <ol>

Tebrikler! 🎉  HTML’de tablo, link, resim, video ve ses barındıran düz bir html sayfası oluşturabilecek duruma geldiniz.

HTML’e Giriş #2.Gün

Merhaba,

Dün güzel bir başlangıç yaptığımızı düşünüyorum. 180 güne tüm konular sığacak mı çok merak ediyorum. 2.gün HTML e giriş yapalım. Bugün genelde videolu anlatımlar ileteceğim.

1. Gün - 180 Günde Full Stack Blockchain/Web3 Yazılımcısı Olunur mu?

HTML Nedir?

Hiper Metin İşaretleme Dili (İngilizce Hypertext Markup Language, ks. HTML) web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir. Dilin son sürümü HTML5‘tir.

HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir.

Devamını linkten okuyunuz: https://tr.wikipedia.org/wiki/HTML

2. Günün Konuları

Tüm kod yazımlarını doğrudan https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default bu adresten canlı olarak deneyebilirsiniz. Hem windows hem mac için visual studio code u kullanmanızı tavsiye ederim. İlk izlediğiniz zaman bazı terimler yer etmiyor olabilir. Önce tamamını izleyip sonra tekrar izlerken durdur-başlat yaparak tüm kodları deneyimleyin. W3schools linklerini translate yardımı ile okuyabilirsiniz.

1 – Web Sitesi Nasıl Çalışır : https://youtu.be/IFpcsu78Y7Q

2- HTML Giriş

Video: https://youtu.be/HXdcvrTQq80

Okuma : https://www.w3schools.com/html/html_intro.asp

3- HTML Temelleri : https://www.w3schools.com/html/html_basic.asp

4- HTML Elementleri:

Video: https://www.w3schools.com/html/html_elements.asp

Okuma: https://www.w3schools.com/html/html_elements.asp

5- HTML Etiketleri: https://youtu.be/SnwnZFyA_G4

6- Meta Etiketleri ve Yorum Bölümleri: https://youtu.be/hcE9FZ0nDKQ

7- Heading ve P Etiketi:

Video: https://youtu.be/NX_LrVxdPaw

Okuma:

https://www.w3schools.com/html/html_headings.asp

https://www.w3schools.com/html/html_paragraphs.asp

8- HTML de Stiller: https://youtu.be/onu4e5nmC6Y

9- Formatlama Etiketleri:

Video: https://youtu.be/9wVy2GC2Uk0

Okuma: https://www.w3schools.com/html/html_formatting.asp

Tebrikler! 🎉  HTML’e hızlı ve güzel bir başlangıç yaptınız!

3. Gün - HTML

Yarın görüşmek üzere 🙋‍♂️

180 Günde Full Stack Blockchain/Web3 Yazılımcısı Olunur mu? #1.Gün

Merhaba twitter dan paylaştığım şu içerikten sonra paylaştığım kaynaklardan etkilenip bu yola baş koymaya karar vermiş arkadaşlarımız olduğu kadar eleştirel olarak mümkün değil gözüyle bakanlar oldu.

Her iki tarafı da gözlemleyen ve uygun cevapları bulmaya çalışan biri olarak “ne olur” ve “ne olmaz” kısmına biraz daha derinden inmek gerektiğine kanaat getirdim. İlk gün için Türkçe kaynakları paylaşıp hafta içi 5 gün olacak şekilde her gün devam ettireceğim. Bakalım 180. gün sonunda kimler bu yolda devam edecek kimler yarıda pes edecek göreceğiz. 180 günde süreç gerçekten tamamlanacak mı bunu da öğrenmiş olacağız. Bana takıldığınız yerler olursa yorumlar bölümü aracılığı ile mutlaka yazın. Sorular gelen bölümler ile ilgili haftalık cevap videosu çekmeyi düşünüyorum. Blogumda hafta içi 1 yazı paylaşacak olup ertesi haftanın ilk günü 1 haftalık dökümanların ve yazdığımız kodların üzerinden youtube kanalımda geçmeyi düşünüyorum.

Öncelikle Web2 kısmını backend-frontend olarak çözmemiz gerekiyor. Yol haritamız bu doğrultuda şekillenmiş durumda. İlk olarak temel edinmemiz gereken html, css ve javascript ile haşır neşir olacağız. Ardından Frontend teknolojilere eğilecek sonra Backend ve en son Blockchain ile sonlandıracağız. Bunun şu an ne kadarını başarabiliriz hiç bir fikrim yok. Sadece 180 günlük yolculuk bittiğinde bunu öğrenebileceğiz.

Full Stack Web3/Blockchain yazılımcısı terimi ile bahsetmek istediğim aslında tam olarak bir dApp (merkeziyetsiz app) geliştirmek için ihtiyaç olan tüm bileşenlere sahip olmaktır. Biri kalkıp blokzincirde full stack olmaz derse eğer bunun uçtan uca bir yazılım geliştirme sürecine verilen ad olduğunu belirtebilirsiniz. Web3 dediğimizin ise merkeziyetsiz web projelerinin tamamını kapsayan bir yapı olduğunu söyleyebilirsiniz. Web3 teriminin, Web3.js ile alakasız olduğunu da burada belirtmem gerekiyor. Web3.js, Web3 projelerinizin geliştirme esnasında kullanacağımız ethereum javascript api sidir. (Flood un başındaki terimler ile ilgili bir kaç düşünce olmuştu. Onlara cevap olması için bu paragrafı yazdım.)

İlk gün için en temel konulardan başlamanın doğru olacağını düşündüm. Aşağıdaki yazılara sanırım 2-3 saat bir zaman dilimi yetecektir.

İlk günün okuma konuları:

İnternet nedir? :https://tr.wikipedia.org/wiki/%C4%B0nternet

HTTP nedir? : https://tr.wikipedia.org/wiki/HTTP

HTTPS nedir? : https://tr.wikipedia.org/wiki/HTTPS

Tarayıcılar nasıl çalışırlar? : https://onurdayibasi.com/chrome-nasil-calisir/

DNS nedir ve nasıl çalışır? : https://www.webtekno.com/dns-nedir-h97501.html

Hosting Nedir? : https://tr.wikipedia.org/wiki/Bar%C4%B1nd%C4%B1rma_hizmeti

Host, Hosting, Ip, Domain, DNS ile ilgili videolu anlatım :

https://www.youtube.com/watch?v=QfGEKgs7VYE

Tebrikler! 🎉  Temel olarak tarayıcının, internetin, webin ve DNS gibi sistemlerin nasıl çalıştığına dair fikir sahibi oldunuz!

Yazıları 180 Günde Devriâlem isimli kategoride biriktirmeye çalışacağım. İlk günün konularını tamamlamış olduğunuzda temel web tabanlı projelerin aşağı yukarı nelere sahip olduğunu anlamış olacaksınız.

Twit serisi sonunda belirttiğim gibi 180 gün bu kadar teknolojiyi sindirmek için gerçekten az bir süre. Bu yüzden ben olabildiğince bir kaç gün teorik bilgilere kalan tüm zamanı ise test projeler yapmaya ayırmaya çalışacağım.

Kalıcı öğrenme için mümkün olduğunca öğrendiklerinizi çevrenize anlatmanız veya kendiniz için blog yazmanız en doğrusu olacaktır. Web tabanlı blog açmanıza gerek yok word veya herhangi bir text editör kullanarak yazılarınızı oluşturmaya başlayabilirsiniz. Zaten süreçte kendi blogunuzu kendiniz oluşturacaksınız.

1. Gün - 180 Günde Full Stack Blockchain/Web3 Yazılımcısı Olunur mu?
2. Gün - HTML’e Giriş
3. Gün - HTML

Yarın görüşmek üzere 🙋‍♂️

Hardhat Nedir? Nasıl Kullanılır?

Hardhat | Ethereum development environment for professionals by Nomic Labs

Esnek. Genişletilebilir. Hızlı.
Profesyoneller için Ethereum geliştirme ortamı

Hardhat Sitesi

Hardhat, Ethereum yazılımınızı derlemek, dağıtmak, test etmek ve hatalarını ayıklamak için bir geliştirme ortamıdır. Geliştiricilerin, akıllı sözleşmeler ve dApp’ler oluşturma sürecinin doğasında bulunan yinelenen görevleri yönetmelerine ve otomatikleştirmelerine yardımcı olurken, bu iş akışı etrafında daha fazla işlevsellik kolayca tanıtıyor. Bu, akıllı sözleşmelerin özünde derlenmesi, çalıştırılması ve test edilmesi anlamına gelir.

Hardhat, geliştirme için tasarlanmış yerel bir Ethereum ağı olan Hardhat Network ile yerleşik olarak gelir. İşlevselliği, yığın izleri, console.log() ve işlemler başarısız olduğunda açık hata mesajları içeren Solidity hata ayıklamasına odaklanır.

Hardhat ile etkileşim için CLI komutu olan Hardhat Runner, genişletilebilir bir görev çalıştırıcıdır. Görevler ve eklentiler kavramları etrafında tasarlanmıştır. CLI’den Hardhat’ı her çalıştırdığınızda, bir görev çalıştırıyorsunuz. Örneğin. npx hardhat compile, yerleşik derleme görevini çalıştırıyor. Görevler, diğer görevleri çağırarak karmaşık iş akışlarının tanımlanmasına olanak tanır. Kullanıcılar ve eklentiler, mevcut görevleri geçersiz kılarak bu iş akışlarını özelleştirilebilir ve genişletilebilir hale getirebilir.

Hardhat’ın pek çok işlevi eklentilerden gelir ve bir geliştirici olarak hangilerini kullanmak istediğinizi seçmekte özgürsünüz. Hardhat, hangi araçları kullanacağınız konusunda fikirsizdir, ancak bazı yerleşik varsayılanlarla birlikte gelir. Bunların tümü geçersiz kılınabilir.

En basit projeye hardhat yükleme komutu bu şekildedir. Aşağıda genel kullanım şeklimize dair detay var.

npm install --save-dev hardhat

Ethereum ile etkileşim kurmak için bir JavaScript kitaplığı olan Ethers.js’yi ve bunun üzerine kurulmuş basit bir akıllı sözleşme test kitaplığı olan Waffle’ı genellikle ön tanımlı gibi yükleme komutu ile kullanıyoruz. Bu, test için Hardhat’in önerdiği bir seçenektir. Bu yüzden projeye hardhat yükleme komutunu şu şekilde kullanırız. Bu komutu çalıştırın.

npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers

Yeni bir proje oluşturmak için projenin olduğu klasöre gidin ve npx hardhat komutunu verin.

$ npx hardhat
888    888                      888 888               888
888    888                      888 888               888
888    888                      888 888               888
8888888888  8888b.  888d888 .d88888 88888b.   8888b.  888888
888    888     "88b 888P"  d88" 888 888 "88b     "88b 888
888    888 .d888888 888    888  888 888  888 .d888888 888
888    888 888  888 888    Y88b 888 888  888 888  888 Y88b.
888    888 "Y888888 888     "Y88888 888  888 "Y888888  "Y888

Welcome to Hardhat v2.0.8

? What do you want to do? …
❯ Create a sample project
  Create an advanced sample project
  Create an advanced sample project that uses TypeScript
  Create an empty hardhat.config.js
  Quit

Create a sample project ile hızlı başlangıç yapabilirsin. Devamını kendi dökümanından okuyabilirsin.

Şimdi genellikle kullandığımız ayarlardan ve komutlardan bahsedelim.

Kodu compile etmek için:

npx hardhat compile

Test çalıştırmak için:

 npx hardhat test

Local node u çalıştırmak için:

npx hardhat node

Local ağa kontratımızı deploy etmek için:

npx hardhat run scripts/sample-script.js --network localhost

Örnek bir test ağına deploy etmek için:

npx hardhat run scripts/sample-script.js --network ropsten

Komutlarını kullanabilirsin.

Hardhat.config.js dosyası tüm tanımlamaları ve eklemeleri yapacağın bir dosyadır. Komut verildiğinde config dosyası kendiliğinden oluşur daha sonra düzeltme yapabilirsin.

require("@nomiclabs/hardhat-waffle");
const privateKey = "ağlar için kullandığım Metamask privat key";
// This is a sample Hardhat task. To learn how to create your own go to
// https://hardhat.org/guides/create-task.html
task("accounts", "Prints the list of accounts", async (taskArgs, hre) => {
  const accounts = await hre.ethers.getSigners();

  for (const account of accounts) {
    console.log(account.address);
  }
});

// You need to export an object to set up your config
// Go to https://hardhat.org/config/ to learn more

/**
 * @type import('hardhat/config').HardhatUserConfig
 */
 module.exports = {
  solidity: "0.8.3",
  networks: {
// local ağ için 1337 metamask ın bir bugı
    hardhat: {
      chainId: 1337
    },
// infura apisi için kullandığım örnek url
     mumbai: {
      url: "https://polygon-mumbai.infura.io/v3/XXXXXXX",
      accounts: [privateKey]
    },
// alchemy için kullandığım örnek url
    ropsten: {
      url: "https://eth-ropsten.alchemyapi.io/v2/xxxxxxx",
      accounts: [privateKey]
    },
// binance ın kendi verdiği api url si
    binance: {
      url: "https://data-seed-prebsc-1-s1.binance.org:8545",
      chainId: 97,
      gasPrice: 20000000000,
      accounts: [privateKey]
    },
  }
};

Infura Nedir? Nasıl Kullanılır?

Yüksek kullanılabilirlikli API’ler ve Geliştirici Araçları paketimiz, Ethereum ve IPFS ağlarına hızlı ve güvenilir erişim sağlar, böylece yeni nesil yazılım oluşturmaya ve ölçeklendirmeye odaklanabilirsiniz.

Infura Sitesi

Kendi sitelerinde böyle tanımlamışlar. Bir önceki yazıda bahsettiğimiz Alchemy nin alternatifi olarak kullanılmaktadır. Temelde Infura ‘da bize blockchain geliştirme sürecinde test veya main ağlarına tokenları göndermemiz için API sağlar.

Sitesine gidip Register butonundan kayıt olun ve giriş yapın

Giriş yaptıktan sonra Create New Project ile yeni proje oluşturun.

Projenizin ne olduğunu ve ismini belirleyip Create e tıklayın

Oluşan projeden api url sini kopyaladıktan sonra artık servisi kullanmaya hazırsın.

Tebrikler🎉 Hardhat config dosyasını değiştirerek artık seçtiğin ağa kontratlarını gönderebilirsin.

Ek not: Hardhat config dosyanda API ye ulaşabilmek için Metamask cüzdan private keyinizi girmen gerekir.

Alchemy Nedir? Nasıl Kullanılır?

Alchemy, blockchain geliştirmeyi kolaylaştırmaya odaklanan bir blockchain geliştirici platformudur. Blok zinciri uygulamaları oluşturmayı ve çalıştırmayı sorunsuz hale getirmek için bir dizi geliştirici araçları, gelişmiş API’ler ve süper node altyapıları sağlar.

Daha detaylı bilgi için dökümantasyon sayfasını inceleyebilirsin.


Platform, dünyanın en iyi blok zinciri şirketleri de dahil olmak üzere en iyi Ethereum uygulamalarının %70’ini destekler:

Alchemy, local ortamdan test veya main network lere kontratları göndermek için kullanılır.

Alchemy e kayıt olun: https://dashboard.alchemyapi.io/ ve giriş yapın.

App oluşturun

App için gerekli bilgileri girin

Polygon Mumbai için örnek app oluşturma ekranı

Oluşan App inizde key i kopyalayın

App oluşturduktan sonra herhangi bir düzenleme ihtiyacın olması durumunda geri dönüp Edit App diyerek düzeltebilirsin.

Tebrikler!  🎉 kopyaladığın url yi Hardhat config dosyana ekleyerek Alchemy ‘i kullanmaya hazırsın.

Hardhat config dosyası örnek düzenleme

Ek not: Hardhat config dosyanda API ye ulaşabilmek için Metamask cüzdan private keyinizi girmen gerekir.

VirtualBox NS_ERROR_FAILURE (0x80004005) Hatası Çözümü

Bugün Macbook otomatik güncelledikten sonra vagrant aşağıdaki hatayı verdi.

Vagrant up komutu sonrası aldığım hata

Sonra VirtualBox dan box ı elle çalıştırdığımda NS_ERROR_FAILURE (0x80004005) hatasını aldım.

Box çalıştırdığımda aldığım hata

Daha sonra araştırdığımda bu hatanın sadece macos a özel olmadığını ve linux sistemlerde de aynı sorunu yaşattığını okudum. Aslında silip yeniden yüklendiğinde çözülüyor. Fakat daha önce bu konuda acı tecrübeler yaşadığım için çalışma ortamımı riske atamazdım. En sonunda aşağıdaki şekilde sorunum çözüldü;

Devamını oku