Page 2 of 30

Front-End Nedir ? Back-End Nedir ?

Merhaba arkadaşlar, bu yazımda sizlere Front-End ve Back-end olarak adlandırdığımız 2 terimin ne olduğunu açıklayacağım.

Front-End Nedir ?

Front-end, Türkçe haliyle Ön Yüz olarak çevirdiğimiz bir terimdir. Geliştirdiğimiz herhangi bir uygulamanın tasarımsal kısmını oluşturduğumuz alandır yani kullanıcıların gördüğü ve etkileşime geçtiği yer bir projenin Front-end kısmıdır. Bu kısımları geliştirmekle uğraşan kişilere ise Front-End Developer olarak adlandırırız.

Web Geliştiricileri üzerinden konuşacak olursak bir Front-End Web Developer, HTML, CSS ve Javascript gibi teknolojilere hakim olması gerekmektedir. Bunların haricinde Angular, React, Vue.js gibi teknolojiler ise yakın zaman içerisinde Front-End Developerlar tarafından fazlaca kullanılır.

Peki iyi bir Front-End Developer’ın yapması gereken şeyler nelerdir ? diye soracak olursanız. UI(User Interface) ve UX(User Experience) gibi alanlara hakim olmalısınız yani tasarladığınız bir uygulamayı kullanıcı girdiği anda ekstra bir yönergeye ihtiyacı olmadan rahatça kullanabilmeli ve anlayabilmelidir.

Back-End Nedir ?

Back-end, Türkçe haliyle Arka Yüz olarak çevirdiğimiz bir terimdir. Geliştirdiğimiz herhangi bir uygulamanın veritabanı bağlantıları, API’ları çalışmasını sağlayan alandır yani bir uygulamada kayıt ol veya giriş yap tuşuna bastıktan sonra kullanıcıya bir hata mesajı, başarılı bir şekilde kayıt oldunuz mesajı veya giriş yaptıktan sonra karşısına çıkacak içerikleri görmesini sağlayan alan Back-end’dir. Kendini Back-end Developer olarak tanımlayan kişiler ise herhangi bir uygulamanın arka planında yapılan işlemleri, güvenlik önlemleri, kontrolleri kodlayıp sistemin düzgün bir şekilde çalışmasını sağlayacak kişilerdir yani Front-End Developerlar bizim gözümüze hoş olacak tasarımlar yapmakla uğraşırken Back-End Developerlar ise uygulamanın görünmeyen yüzünü hazırlamakla uğraşırlar.

Back-End Web Developerlar, PHP, ASP.NET, Django, Node.JS, Ruby, JSP gibi teknolojiler üzerinde yoğunlaşabilirler. Ayrıca PHP, Ruby ve JSP programlama dillerini ile geliştirilmiş Frameworkleri öğrenerek daha rahat bir şekilde uygulama geliştirebilirler.

Özet,

Front-End, bir uygulamanın kullanıcının gördüğü yüzünü hazırlarken. Back-End ise uygulamanın görünmeyen yüzünü hazırlarlar. Tabi ki bu iki alandada kendinizi geliştirerek kendinizi Full Stack Developer olarak da tanımlayabilirsiniz. Bu yazımı beğendiyseniz ve bu tarz da yazdığım diğer yazılarımıda merak ediyorsanız buraya tıklayabilirsiniz.

Bilgisayar Mühendisliğine Başlamadan Önce Neler Yapmalıyız ?

Merhaba arkadaşlar bu yazımda sizlere “Bilgisayar Mühendisliğine başlamadan önce neler yapmalıyız ?” sorusunu cevap vermeye çalışacağım ve bu cevabı 5 farklı başlık altında inceleyeceğim. Bu başlıklar,

  • Programlamaya Nasıl Başlanmalı
  • Alan Seçme
  • Hangi Kaynaklardan Yararlanabiliriz
  • Öğrenirken Proje Geliştirme
  • Öğrendikten Sonra Proje Geliştirme

Programlamaya Nasıl Başlanmalı ?

Programlamaya başlarken, hangi alanda kendinizi geliştirmek istediğinizi düşünün yani ileride bir Web Geliştiricisi, Mobil Uygulama Geliştiricisi, … vb. alanlardan hangisini tercih etmek istediğinizi düşünün ama hemen bu işlerde kullanabileceğimiz bir programlama dilini öğrenmeden önce temel bilgileri başka bir yazılım dili aracılığı ile öğrenmeniz sizin için faydalı olabilir. “Nasıl yani ?” diye sorabilirsiniz. Öncesinde Python, PHP gibi ilk kez kod yazacaklar için temel oluşturmada yardımcı olacak programlama dillerini tercih edin. Peki bu dilleri nasıl bulabilirim diye sorarsanız çok basit ilk kez bir proje oluşturduğunuz zaman kafanızı karıştıracak hazır olarak gömülmüş bir kod dizini var mı ? Varsa ne kadar karışık bunlara bakın. Okullarda genel olarak C ile başlanır. C aslında temel işlemler için basit ama ilerisinde çok karmaşıklaşan her şeyi size yazdıran hazır kütüphaneleri sınırlı sayılabilecek bir dildir fakat bazı şeyleri anlama konusundada size yardımcı olacaktır.

Alan Seçme

Hangi alana yöneleceğiniz önemli bir konudur çünkü hangi alana yöneleceğiniz ileride hangi dilleri öğrenmeniz gerektiğini bize söyler. Alan Seçme durumu çok değişkenlik gösterebiliyor. Genel olarak kendimden fark ettiğim durumlar şunlar bir alana yönelmeye karar veriyorum bir kaç Tutorial izliyorum daha sonra yapmak istediğim şeyi yapamıyorum veya zorlanıyorum ve hemen bırakıyordum aslında bu çok yanlış kendimizi gerçekten geliştirmek istiyorsak karşılaştığımız hatalara kendimiz çözüm üretmeliyiz. Eğer kendimiz bir çözüm bulamazsakta Stackoverflow gibi ortamlardan araştırma yapıp bir çözüm bulmalıyız. Genel olarak benim aklıma gelen alanlardan bahsedecek olursak.

  • Web Geliştiricisi
  • Mobil Uygulama Geliştiricisi
  • Masaüstü Uygulama Geliştiricisi
  • Oyun Geliştiricisi
  • Yapay Zeka ile uğraşabilirsiniz
  • IoT (Nesnelerin İnterneti) Teknolojisi
  • Akademik Kariyer

Hangi Kaynaklardan Yararlanabiliriz ?

Bir bilgisayar mühendisi öğrencisi olarak tabi ki yararlanabileceğiniz en büyük kaynak internettir. İnternet, elimizin altında her yerden ulaşabileceğimiz bir teknolojidir. Bunun haricinde W3Schools, Udemy, Stackoverflow, Youtube, Mozilla Developers ve Blog siteleri bizim araştırmak istediğimiz alanlarda bize en çok yardımcı olabilecek kaynaklardandır. Udemy, Youtube ve Blog siteleri bize neredeyse her konuda bilgi verebilecekken. W3Schools ve Mozilla Developers ise daha çok web teknolojileri konusunda bilgi verir. Stackoverflow ise bir hata ile karşılaştığımızda bu hataya çözüm ararken kullanacağımız en önemli site olarak kabul edebiliriz.

Öğrenirken Proje Geliştirme

Ben öğrenirken proje geliştirmeyi dünya için küçük geleceğim için büyük bir adım olarak görüyorum. Bir yazılım dilini veya framework gibi bir teknolojiyi öğrenirken. Öğrendiğimiz kısımlara uygun küçük çaplı projeler geliştirmek aslında bize öğrendiklerimizi tekrar etme ve uygulama konusunda çok yardımcı olur. İleride yapacağınız büyük çaplı projelerde karşılaştığınız hataları belki de o zamanında yaptığınız küçük çaplı projelerde karşılaşmış olabiliriz veya küçük çaplı yaptığınız bir hata aklınıza gelir ve büyük çaplı geliştirdiğiniz projede o hatayı yapmadan önce fark etmiş olabilirsiniz. Burada bahsettiğim durumlardan kurtulmak için öğrenirken de proje geliştirmenizi tavsiye ederim.

Öğrendikten Sonra Proje Geliştirme

Öğrendikten proje geliştirme ise artık öğrendiğiniz her şeyi birlikte kullanarak GitHub, GitLab gibi platformlarda açık kaynaklı bir şekilde paylaşabileceğiniz bir proje olabilir veya gerçekten hayata geçirmek istediğiniz projeleri yayınlayabilirsiniz. Büyük çaplı geliştireceğiniz projeler ise ileride başvuru yapmış olduğunuz bir şirketin sizi ciddiye almasında yardımcı olur ve evet bu kişi gerçekten bu teknolojiyi biliyormuş demesine sebep olur. Tabi ki bir teknoloji ile 1 proje geliştirmek tam olarak bu izlenimi vermeye bilir. Birden fazla proje geliştirerek “evet bu kişi gerçekten bu teknolojiye hakim” izlenimini de başvuru yaptığınız şirkete veya mülakata girdiğiniz kişiye kanıtlayabilirsiniz.

Umarım bu yazım tüm Bilgisayar Mühendisliğini kazanan arkadaşlara veya ileride yazılım sektöründe çalışmayı düşünen arkadaşlara yardımcı olmuştur. Kendi fikirlerimi veya fikirlerini beğendiğim insanların çevirdiğim yazılarını okumak isterseniz buraya tıklayınız.

Programlama Öğrencisinin Zaman Yönetimi

Zaman en çok istediğimiz ama en kötü kullandığımız şeydir.

William Penn

Başarılı insanların nasıl paradan daha çok zamana değer vermeye başlaması ilginçtir.

Üniversitede zaman, büyük önem verdiğimiz bir şeydir. Bir ödev verilene kadar veya sınav zamanları gelene kadar her öğrenicinin sürekli olarak bir döngü sürdürdüğü ve onlara yapması gereken bir sonraki şeyi hatırlatan bir iç zamanlaması vardır.

Programlama öğrencileri bu duruma daha çok dikkat eder. Çoğu zaman dersten derse girmek imrenilecek bir şirket veya kuruluşta staj yapmamıza yeterli olmaz veya aldıkları dersler bilmeleri gereken güncel framework ve programlama dillerinden bahsetmezler.

Öğrenciler boş zamanlarında kendi projelerini geliştirmek, online programala dillerini öğrenmek zorunda kalmaktadır bu durum da öğrencilerin hayatından büyük bir zamanın kayıp olmasına sebep olmaktadır ama bu sorunuda çözmek için biraz hayatımızı yönetmeyi öğrenmemiz gerekir.

Yarının Sabahı Bugün Başlar

Günün hangi saatinde uyandığın önemli değil, uyumadan önce bir sonraki gününü planla.

Bir sonraki gün için bir kaç dakikanızı çantanızı hazırlamak, çıktısını almanız gereken belgelerin o anda hazırlamak ve diğer gün için yapılacaklar listenizi kontrol edin ve tam olduğundan emin olun.

Benim için genel olarak bu süreç şu şekilde geçiyor:

  • 2 dakikamı maillerimi kontrol etmek ve yapılacak listemi kontrol etmek için harcıyorum
  • 2 dakikamı bir sonraki günde kesin olarak bitirebileceğim bir liste hazırlıyorum
  • 1 dakikamı da işlerimden ve bilgisayarımdan uzaklaşıyorum

ve hepsi aslında bu. Sadece yatmadan önce 5 dakika harcayarak bir sonraki gün panik olarak ne yapacağımı hatırlamak zorunda kalmıyorum. Bu tarz küçük işlemler zamanımızı yönetme konusunda bize bir kontrol sağlamaktadır.

Kendi Çalışma Düzeninizi Bulun

“Başarılı insanlar sabah 4 de uyanır.”

“Erken uyanmak üretken olmak için bir yoldur.”

Aa, hayır teşekkür ederim. Ben böyle iyiyim

İnsanların etrafta bu tarz şeyleri kanıtlanmış gerçekler gibi veya erkenci kuşların üretkenliklerinin sebebini bu olmasını bahsederek böbürlenmesini duymaktan sıkıldım.

Herkes farklıdır ve herkesin kendi iç saati ve vücut ritimleri vardır.

Belki sabah 4 de çalışmaya başlamak senin için iyidir ya da gece çalışmalarına daha iyi odaklanıyorsundur. Yapmanız gereken tek şey çalışmalarınıza ve planlarınıza uyan zamanı bulun.

Ben kişisel olarak gece çalışmayı tercih ederim fakat öğleden sonra çok daha rahat çalışabildiğimi farkettim. Bu sayede derslerimi biraz daha geç olucak şekilde ayarladım ve erken uyanmak zorunda kalmadım.

Eğer sabah 6 da veya öncesinden üretken hissetmiyorsunuz neden hala erken uyanmak için kendinizi zorluyorsunuz ?

Durun ve düşünün ben bunu üretken olmak için mi yapıyorum yoksa ne kadar üretken olduğumla hava atmak için mi yapıyorum ?

Eğer sabah erken uyanmak, geç uyanmaktan daha iyi değilse bunu yapmadığın zaman bir suçluluk çekmemelisin.

Diğer bir taraftan baktığımız zaman ise kendinizi olabildiğince geç saatlere kadar ayakta kalmaya zorlamakta uzun sürede size bir fayda sağlamayacaktır.

Öğrenmeyi Uyandıktan Sonraki Önceliğiniz Haline Getirin

Sürekli öğrenmek, herhangi bir alanda başarı için en az gereksinimidir.

Brian Tracy

İzin gününüzün ilk 30 dakikasını online bir kursta veya öğrenmeye çalıştığınız yeni programlama diline harcayın.

Bu bilginin sizin öncelik olmasında yardımcı olacaktır. Bu da yetenekli genç bir yazılımcı olmanın önemli bölümüdür.

Eğer bunu başaramazsınız, kendinizi bir ödevin veya bir projenin başında bulursunuz ve aslında asıl yapmak istediğiniz şeyi hiç bir zaman öğrenemeyebilirsiniz. Bunu başarmak ise size her gün öğrenmeye iten bir rutine sokar ve her zaman yapmak istediğiniz şeye zaman olmasını sağlar.

Bu zamanla ne yapacağınız tamamen size özel. Benim özelimde kullandığım yöntem şu

Sahip olduğum zamanda öğrenebileceğim gerçekçi 1 – 2 şey seçerim.

Bu öğrenmek istediğin yeni bir yazılım dili hakkında izleyebileceğin bir youtube videosu olabilir veya aldığınız Udemy kursundan 2 bölüm bitirmek olabilir.

Ben normalde günümün ilk 20 dakikasında Udemy derslerimi izler ve kalan 10 dakikada öğrendiklerimi gözden geçirir veya pratik yaparım. Eğer daha fazla zamana sahipsem, ders izleme süremi ve gözden geçirme / pratik yapma zamanımı artırırım.

Bu düzen kodlama yapmak için çok fazla zamana sahip olan kişiler tarafından değil daha çok kodlama & okul ikilisi arasındaki zamanlama dengesini iyi ayarlamak isteyen ve günlük hayatında kodlama yapan kişilerin yapması gereken bir düzendir.

Öğren, Üret, Tekrarla

Herhangi birinin kodlamasını izleyerek veya kodlarını gözden geçirerek programlama yeteneklerinizi mükemmel hale getirebilecek bir büyü yoktur. (Olsa efsane olurdu.)

Çoğu genç yazılımcı, takip ettiği bir derste takıldığı zaman hayal kırıklığına kapılabilir veya cesareti kırılabilir ve aldığı kursun onlara düzgün bir şekilde “Nasıl spesifik problemlerle başa çıkabileceğini” öğretmediğini düşünmeye başlar. Benim tahminim bu öğrencilerin çoğu öğrendiği şeyleri kendi kodlarına nasıl entegre edilebileceği konusunda fazla zaman harcamıyor.

Ne kadar çok ders videosu izlediyseniz, kod kopyaladıysanız veya bir profesörden ders aldıysanız bile bu sizi çok az ileriye taşır.

ve aldığınız ders bittiğinde farkedeceksiniz ki başladığınız yerden çokta ileriye gidememişsiniz.

Bu yüzden zamanınızı ne kadar küçük olsa bile projeler geliştirmek çok önemli. Küçük veya büyük çaplı projeler geliştirmek size öğrendiklerinizi pratiğe dökmenizi ve anlayışınız somutlaşmasını sağlar.

Ben genel olarak aldığım kurs sırasın 3 – 4 adet küçük proje yapıp kurs bitince ise büyük bir proje geliştiriyorum.

Bunun önemini yeterince anlatamadığımı düşünüyorum. Bir kaç yıl önce bir CSS kursu tamamlamıştım ve farkettim ki CSS kullanarak bir proje yapmadan kendimi CSS kullanırken rahat hissetmiyorum. Bu da şunu kanıtlarki, hiçbir şey problemle kendiniz uğraşmadığınız sürece kodlamayı size öğretmez.

Bu tam olarak bir zaman yönetimi sorunu çözümü olmayabilir ama gerçekten farkettim ki zamanımın çoğunu bir şeyler geliştirmek gerekirken, sırtımı yaslayıp kodlama videosunu izleyerek geçiriyordum. Bir şeyler geliştirmek varken sırtınızı yaslayıp daha fazla zaman kaybetmeyin. Düşündüğünden daha fazla şey öğrendin.

Kodlama Aşamalarını Organize Etmeyi Öğrenin

Kodlama yaparken zaman yönetiminin büyük zorluklarından biri de biribirinden farklı işlemleri projenizde birleştirmektir.

Genellikle kendimi back-end kodlamasında çok odaklanmışken. Bir bölüme eklemem gereken uygun bir fotoğraf bulmam gerektiğini farkediyorum ve tüm konsantremi kaybedip uygun fotoğraf arayışında buluyorum. Fotoğrafı bulduktan sonra ise uygun CSS kodlarını yazmak zorunda kalıyorum. Bu durum kodlama aşamasında çok fazla zaman kaybettiren bir durum çünkü zamanında yapmanız gereken bir işi daha sonra farkedip geri dönüp düzeltip tekrar devam etmeye çalışıyoruz.

Diyelim ki bir web sitesi kodluyorsunuz ve kullanıcının satın alımlarını listelemek istiyoruz. <table> elementini veritabanı ile bağlıyoruz ve CSS kodlaramızı yazarak devam ediyoruz.

Küçük çaplı projelerde bu çok büyük bir problem olmaz ama büyük çaplı bir projede çalışıyorsunuz sürekli olarak geriye dönüp bir şeyler eklemek ilerlemeyi yavaşlatıcak ve olması gerekenden daha fazla zaman harcamanıza sebebiyet verecektir.

Bu süreç nasıl ilerlemeli

  • Yapıcağınız projenin taslak bir görüntüsünü oluşturun. Böylece neyin gerekli olduğunu görün ve ona göre ilerlemenizi yapın. Bu bir kaç dakikanızı alacak fakat gerçekten çok kritik bir adımdır.
  • Fotoğrafları hazırlayın ve dışarıdan yapılacak tüm bağlantıları yapın böylece her şey web sitenize bağlanmak veya eklenmek için hazır olsun. Eğer hali hazırda bir veri veya fotoğraf elinizde yoksa, oradaki boşlukları doldurabilecek sahte veri veya fotoğraflar ile web sitenizde boş bir tablo veya beyaz boşluklar görmeyin.
  • Basit bir başlangıç kodu yazın (bu konuda bir tablo oluşturun) ve onun hazır da olan basit sitilleri ile bırakın.
  • Şimdi back-end kodlarınız düzgün çalıştığından, veritabanı bağlantılarınızın düzgün bir şekilde çalıştığından emin olun
  • Son olarak ise CSS ile sitilleme işlemlerinizi yapın.

Bu sıra sizi aşırı zaman harcamanızı engelleyecektir.

Ne Zaman Yardım İsteyeceğimizi Bilmeliyiz

Önce Google’da aradın mı ?

Her Yazılımcı

Kodlama yapıyorsun, mükemmel bir şey, projen mükemmel gözüküyor ve bir yerde sıkıştın. Bu hepimizin başına geliyor, fakat bu yeni yazılımcıları hayal kırıklığına uğrayıp projeyi yarıda bırakmaya itebilir. Bir yerde takılı kalmak tam bir zaman kaybıdır. Bu yüzden bu önerileri bu yazıya ekledim

Peki ne zaman problemi çözmeye çalışacağımız ve ne zaman çalışmayacağımızı nasıl bileceğiz ?

Şimdi size başlangıç olarak biraz daha Web Geliştiricilerinin işine yarıyacak ve onların sorunu çözmede deneyebilecekleri veya sorunun çözümüne ulaşabilecekleri 3 öneride bulunacağım

Echo Echo Echo

PHP & SQL öğrenirken “echo” benim en iyi arkadaşımdı. Back-end kodlamasın da projenin nerede sorun yaşadığını anlamak zordur. Eğer echo gibi ekrana çıktı veren bir komut kullanmıyorsanız kör bir şekilde kodlama yaptığınızı ve bu durumun sorununu çözmede büyük bir problemi olacağını söyleyebiliriz.

echolamanın bir çok kez bir döngümdeki veya bir kodumdaki bir işlemin sonucunu ekrana yansıttığını ve hayal kırıklığına uğramaktan kurtardığını söyleyebilirim.

Yorum Satırı Ekleyin

Yorum satırları, kodunun nerede hata verdiğini bulmak için güzel bir yoldur. İnsanların yorum satırı kullanarak hatalı kodu silmeyip hataya çözüm olacak şekilde yeni bir kod yazdıklarını bir çok kez görmüşümdür.

Eğer VSCode kullanarak kodlama yapıyorsanız seçili olan kodu Maclerde CMD + K + C kombinasyonu ve Windows bilgisayarlarda ise Control + K + C komutu ile yorum satırı içine alabilirsiniz.

Google’da Arayın

Çok fazla açıklamaya gerek yok. Eğer bir yerde takıldıysanız ve kolay bir çözümü olacağına inanıyorsanız sadece araştırın. Online kaynaklarda araştırma yapın ve problemleri kendi problemleriniz ile karşılaştırın ve başkalarının yaptığı hataların yapıp yapmadığınızı kontrol edin.

Genellikle sizin takıldığınız yerde takılan insanlarla karşılaşmanız yüksek. Bu yüzden kendinizi yıpratacağınıza biraz araştırma yapın.

Diyelim ki kodun çıktısını aldınız ve Google’da aradınız ve mümkün olmasa bile bir çözüm bulamadınız. En az 25 dakika boyunca oradan uzaklaşın veya başka bir şey ile uğraşın.

Bir çok kez çözülemeyecek gibi gözüken bir kodlama hatasıyla karşılaştım ve daha sonra tekrar bununla uğraşmaya karar verdiğimde bana mantıklı gelen en kolay çözümler aklıma gelmeye başladı. Bu kodlamayı sevmeme sebeb olan şaşırtıcı duygulardan bir tanesi.

Hiçbir şey sizi bir hata ile mücadele edip kendi çözümünüzü bulduğunuz zamanlarda ki gibi gerçek bir programcı gibi hissettirmeyecek.

Eğer geri döndüyseniz ve hala bir çözüm bulamadıysanız ki başıma bir çok kez geldi. Tüm işlemleri tekrar deneyin önce kodlarınızın çıktılarını alın , kodunuzu gözden geçirin ki emin olun basit bir hata olmadığından ve hala bir çözümünüz yoksa başkalarına danışın.

Bu yazı Amerikalı bir geliştirici olan Julia Johnson’un Medium platformu üzerinde yazmış olduğu “Managing Your Time as a Programming College Student” adlı yazısından çevrilmiştir. Bazı yerlerinde ise kendi yorumlarımı katmış bulunmaktayım. Ayrıca kendi yazdığım veya çeviri olan diğer yazılarımı incelemek için buraya tıklayınız.

Az Bilinen ama Çok İşlevi Olan HTML Etiketleri

Merhaba arkadaşlar kısa bir süre önce keşfetmiş olduğum 3 adet HTML etiketinden ve bu HTML etiketlerinin ne işe yaradıklarından bahsetmek istiyorum.

Bahsedeceğim HTML etiketleri,

  • datalist
  • details
  • inputmode

Datalist Nedir ?

Datalist ile arama yapılabilinen inputlar oluşturabiliriz. Kullanımı şu şekildedir.

<form>
    <label for="dataList">Arama Yapınız:</label>
    <input list="deneme" name="dataList" />
    <datalist id="deneme">
      <option value="Deneme 1">
      <option value="Deneme 2">
      <option value="Deneme 3">
      <option value="Deneme 4">
      <option value="Deneme 5">
      <option value="Deneme 6">
      <option value="Deneme 7">
      <option value="Deneme 8">
   </datalist>
</form>

şeklinde kullanabilirsiniz bu bize görüntü olarak şöyle bir çıktı verecektir.

Bu şekilde dropdown aranabilen aramalar yapabiliriz. Bu HTML özelliğine şu tarayıcılar destek vermektedir.

Details Nedir ?

Details, elementi ayrıca içinde 2 adet alt element barındırması zorunlu olan bir elementtir bu elemenlerden ilki summary ikincisi ise p elementidir. Bu element aslında Javascript ile yapabileceğimiz akordiyon uygulamasının Javascript kullanmadan bu işlemi yapmamızı sağlıyor. Kullanımına bir örnek olarak

<details open>
   <summary>Deneme 1</summary>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>
            
<details>
   <summary>Deneme 2</summary>
   <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>
            
<details>
   <summary>Deneme 3</summary>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>
            
<details>
   <summary>Deneme 4</summary>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>

Bunun çıktısı şu şekilde olacaktır

Bu elementin tarayıcı desteği ise şu şekilde olacaktır.

Inputmode Nedir ?

inputmode bir HTML element değil ve aslında masaüstü için herhangi bir şey ifade etmiyor fakat mobil cihazlar için inputmode’a girilen değere göre açılan klavye değişmektedir.

Genel olarak şöyle bir kullanımı vardır

<input inputmode="value">

burada value yerine yazabileceğimiz işinize yarayacak 4 tanesinden bahsedeceğim.

  • numeric -> Numaradan oluşan klavyeyi açar
  • email -> Klavyeyi e-posta adresi girmeye uygun klavye açar
  • tel -> Telefon numarası girmeye uygun için klavye açar
  • url -> URL girmeye uygun klavye açar.

Bu özellik sadece Android için Chrome da ve iOS için Safari ile desteklemektedir. Inputmode’un diğer değerleri hakkında detaylı bilgi almak için buraya tıklayınız.

Özet,

Bu yazımda sizlere genel olarak az bilinen fakat işlevi çok olan 2 adet HTML elementi ve 1 HTML özelliği olan datalist, details ve inputmode’dan bahsettim. Datalist ile dropdown menülü bir arama kutusu yapabilirken. Details ile Javascript ile akordiyon uygulamalarının yaptığı işi yapıyor. inputmode ise mobil cihazlarda o inputun alması gereken değerlere göre farklı klavyeler çıkarmamızı sağlıyor.

Bu yazımı beğendiyseniz ve HTML / CSS hakkında yazmış olduğum diğer yazılarıda merak ediyorsanız buraya tıklayabilirsiniz.