Kategori: Web

Div Nasıl Ortalanır? 5 Farklı Yolla Div Ortalama

Teknokodi
div nasıl ortalanır

Div nasıl ortalanır? En iyi yazılımcıların bile yapamayıp google da arattığı bu ortalama olayı nasıl yapılır? İşte bu yazımızda 5 farklı yolla div ortalamayı göreceğiz. Ayrıca bu yöntemleri başka elemanları ortalamak için de kullanabilirsiniz. 1. Flexbox ile Ortalama Flexbox, içeriği hem dikey hem de yatay olarak ortalamanın modern bir yoludur: .container { display: flex; justify-content: center; align-items: center; height: 100vh; } Teknokodi 2. Grid İle Ortalama CSS Grid ile ayrıca içeriği ortalayabilir: .container { display: grid; place-items: center; height: 100vh; } Teknokodit 3. Mutlak Konumlandırma ile Ortalama Mutlak konumlandırmayı kullanarak…

Okumaya Devam Et

Client-side Rendering – CSR Nedir – Nasıl Çalışır?

Teknokodi
clientSideRendering csr

Hiç bir web sitesini ziyaret ettiğinizde, sayfa yüklenirken yalnızca bir milisaniyeliğine boş bir sayfa gördüğünüz oldu mu? Öyleyse büyük olasılıkla istemcide (client) oluşturulan bir web sitesini ziyaret ettiniz. Peki client-side rendering csr nedir, nasıl çalışır ve web sitelerimizde nasıl bir fark yaratır? İstemci tarafı oluşturma, geliştiricilerin içeriği hedef kitlelere sunma biçimini değiştiren, web tarafından geliştirilmiş bir tekniktir. Oluşturma sürecini sunucudan kullanıcının tarayıcısına kaydırır ve dinamik, etkileşimli ve sürükleyici web deneyimleri oluşturmak için JavaScript’ten yararlanır. Bu makalede client-side rendering ne olduğunu, nasıl çalıştığını, artılarını ve eksilerini inceleyeceğiz. Ayrıca istemci tarafı işlemenin…

Okumaya Devam Et

Sass vs Native CSS – Hangisi Tercih Edilmeli?

Teknokodi
sass-vs-css

CSS ve SASS Merhaba. Bu yazımızda sizlere CSS ve SASS dan bahsedeceğiz. CSS nedir? SASS nedir? CSS ve SASS arasındaki fark nelerdir? Bu yazımızda detaylıca göreceğiz. CSS (Cascading Style Sheets), HTML’e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir işaretleme dilidir. Yada basit bir tabir ile sitelerimizi görselleştirmek, renklendirmek ve stillendirmek için kullandığımıız bir araçtır. SASS (Syntactically Awesome Stylesheets) ise CSS formatına derlenebilen dinamik bir biçim şablon dilidir. İlk olarak Hampton Catlin tarafından tasarlanmış ve Natalie Weizenbaum tarafından programlanmıştır. CSS, 1996’daki tanıtımından bu yana çok yol kat…

Okumaya Devam Et

Emoji ile Etkileşimli Reaksiyon Oluşturma

Teknokodi
teknokodi emoji reaksiyon

Sosyal mesyanın da etkisi ile kullanıcılar içeriklere duygusal tepki vermeye başladı. Artık bir resim, video, blog yazısı yada başka birşeyde bile kullanıcılar sevip sevmediklerini emoji ile reaksiyon göstererek belli ediyor. Bu yazımızda bizlerde basit ama eğlenceli bir emoji ile tepki veren butonlar yapacağız. HTML İlk önce kuullanıcılara göstereceğimiz emojilerin görsellerini HTML ile hazırlıyoruz. CSS HTML ile hazırladığımız içeriği CSS ile ekranımıza yerleştireceğiz. Burada sayfanın en altına ve ortasına container ımızı yerleştireceğiz ki üst kısımda sanki bir içerik var ve ona reaksiyon gösteriyoruz gibi dursun 🙂 CSS kısımlarını siz kendi projenize…

Okumaya Devam Et

Javascript te Async ve Defer Nedir? Neden Kullanılır?

Teknokodi
javascript async defer

Merhaba. Bu yazımızda başka bir Javascript koonusunu ele alacağız. async ve defer, harici JavaScript dosyalarını HTML belgelerine eklerken kullanılan niteliklerdir. Tarayıcının betiği nasıl yüklediğini ve çalıştırdığını etkilerler. Hepimiz HTML’mize harici JavaScript dosyalarını yüklemek için script etiketini kullanmaya alışkınız. Geleneksel olarak, HTML yüklendikten sonra komut dosyalarının yüklenmesini sağlamanın tek geçici çözümü, komut dosyası etiketlerini gövdenin sonuna doğru taşımaktı. Ancak JavaScript o zamandan bu yana çok yol kat etti. ES2015’teki spesifikasyona, JavaScript’in nasıl yükleneceği konusunda daha ayrıntılı kontrole izin veren erteleme ve zaman uyumsuzluk gibi özellikler eklenmiştir. Erteleme ve eşzamansız niteliklerin ne…

Okumaya Devam Et

REST API den dönen JSON İçerik Türleri nelerdir?

Teknokodi
json content type mime rest api json içerik türleri

Merhabalar, bu yazımızda JSON dan,  JSON içerik türleri nden ve çok kullanılan bir api olan REST API den  bahsedeceğiz. Hangi türleri çok kullanılıyor, hangi türü kullanmalıyız ve kaldırılan türleri göreceğiz. Hello, in this article we will talk about JSON, JSON content types and REST API, which is a widely used api. We will see which types are most used, which type we should use, and the types that have been removed. JSON (JavaScript Object Notation), verileri kolayca okunabilir formatta temsil etmek için kullanılan bir veri biçimidir. Postman, RESTful API’ler(geliştiricilerin yazdığı…

Okumaya Devam Et

SOLID İlkelerini TypeScript’e Uygulama

Teknokodi
typescript solid

Uzun zaman önce tanımlanan SOLID ilkeleri, nesne yönelimli tasarımların okunabilirliğini, uyarlanabilirliğini, genişletilebilirliğini ve sürdürülebilirliğini iyileştirmeyi amaçlar. Nesne yönelimli sınıf tasarımının beş SOLID ilkesi, birçok geliştiricinin her zaman ve her yerde kullanabileceği anlaşılır, test edilmiş yazılımların geliştirilmesini kolaylaştırır. Bu yazıda typescript için geçerli olabilecek prensiplerden bahsedeceğiz. S: Single-responsibility prensibi O: Open-closed prensibi L: Liskov substitution prensibi I: Interface segregation prensibi D: Dependency inversion prensibi S: Single-responsibility principle (Tek sorumluluk ilkesi) Tek sorumluluk ilkesine göre, bir sınıf yalnızca bir etkinlikten sorumlu olmalı ve yalnızca bir değişiklik nedeni olmalıdır. Bu kural ayrıca modülleri…

Okumaya Devam Et

NPM ve NPX Nedir? Aralarındaki Fark Nelerdir?

Teknokodi
npm ve npx

İnsanların npx ve npm ‘i karıştırmasının birkaç nedeni vardır. npx, npm ‘in içerdiği bir araç olduğu için, genellikle birlikte kullanılırlar ve bazı durumlarda, belirli komutları çalıştırmak için npm yerine npx ‘i kullanabilirsiniz. Bu, özellikle npx ‘e aşina değilseniz, ikisini karıştırmayı kolaylaştırabilir. Bu ikisi arasındaki karışıklığı önlemek için ikisi arasındaki temel farkları anlamak faydalı olabilir. NPM vs NPX npm, Node.js JavaScript çalışma zamanı için paket yöneticisidir. npm kayıt defterinde yayınlanan paketleri (yani kitaplıklar, çerçeveler, araçlar vb.) kurmak ve yönetmek için kullanılır. npx, npm ile birlikte gelen bir araçtır. Projenizde yerel veya…

Okumaya Devam Et

HTML Etiketleri – HTML DOCTYPE Bildirimi

Teknokodi
HTML Doctype

Tanım ve Kullanım Tüm HTML belgeleri bir <!DOCTYPE> bildirimi ile başlamalıdır. Bildirim bir HTML etiketi değildir. HTML Doctype, tarayıcıya hangi belge türünün bekleneceği hakkında bir “bilgi” dir. HTML 5’te bildirim basittir: İpucu ve Notlar İpucu: <!DOCTYPE> bildirimi büyük/küçük harf duyarlı DEĞİLDİR. Tarayıcı Desteği Eleman Chrome Edge Firefox Safari Opera <!DOCTYPE> Evet Evet Evet Evet Evet Nitelikler – Global Nitelikler – Olay Nitelikleri – Örnekler HTML Eğitimine Devam Et HTML Nedir? HTML Etiketleri HTML Olay Nitelikleri HTML Nitelikleri Paylaş Takip Et Twitter Youtube Linkedin Instagram Google-play Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ

Okumaya Devam Et

HTML Etiketleri – HTML HTML Etiketi (HTML Tag)

Teknokodi
html etiketleri, html tags

Tanım ve Kullanım <html> etiketi, bir HTML belgesinin kökünü temsil eder. <html> etiketi, diğer tüm HTML öğelerinin kapsayıcısıdır (<!DOCTYPE> bildirimi hariç). Not: Web sayfasının dilini belirtmek için her zaman <html> etiketinin içine lang özniteliğini eklemelisiniz. Bu, arama motorlarına ve tarayıcılara yardımcı olmak içindir. İpucu ve Notlar – Tarayıcı Desteği Eleman Chrome Edge Firefox Safari Opera <html> Evet Evet Evet Evet Evet Nitelikler Nitelik Değer Açıklama xmlns http://www.w3.org/1999/xhtml XML ad alanı özniteliğini belirtir (İçeriğinizin XHTML’ye uyması gerekiyorsa) Global Nitelikler <html> etiketleri ayrıca HTML’deki Global Nitelikleri destekler. Olay Nitelikleri – Örnekler HTML…

Okumaya Devam Et