+Etiketle rehber bulun: css
+Etiketle rehber bulun: discord
+Etiketle rehber bulun: html
+Etiketle rehber bulun: linux
+Etiketle rehber bulun: ses
+Etiketle rehber bulun: web-development
++Linux'a yeni geçen arkdaşların sorduğu sorulardan birisi, arkadaşlarımla oyunumun, videomun sesini Discord üzerinden paylaşamıyorum! Nasıl yapabilirim? +
++Bugüne kadar bildiğim çözümler sesi yansıttığınızda sizin konuşanızı engelliyordu. Soundux adlı bir program keşfettim ve bu program sayesinde istediğiniz sesi istediğiniz uygulamaya yansıtabiliyor aynı zamanda mikrofonunuz ile konuşmaya devam edebiliyorsunuz! +
+ ++Soundux açık kaynak ve özgür bir yazılım. Windows için de paketleri var. Paket yöneticinizde yoksa Websitesinden veya Github sayfasından indirebilirsiniz. +
++İndirdikten sonra karşınıza şöyle bir ekran çıkacak. +
+
+
+
+Sağ üst tarafta yazan output application kısmından sesi aktarmak istediğimiz programı seçiyoruz. Discord'a ses aktaracaksanız Discord'u seçeceksiniz ama uygulamanın output application kısmında gözükmesi için sesliye katılmanız gerekiyor. +
++Daha sonrasında aşağıda yazan passthrough butonuna tıklayacaksınız. Tıkladığınız anda sol tarafta bir menü belirecek. +
+
+
+
+Sesini aktarmak istediğiniz programı buradan seçebilirsiniz. Örnek resimde Firefox'u görüyorsunuz. +
++Ve bu kadar! Artık seçtiğiniz uygulamanın sesi karşı tarafa gidiyor ve aynı zamanda mikrofonunuzdan konuşabiliyorsunuz. Artık karaoke yapabilir veya arkadaşlarınızla film izleyebilirsiniz. Soundux üzerinden ses düzeyini de ayarlayabiliyorsunuz. +
+ ++Yusuf İpek website, youtube +
+Yazının paylaşıldığı tarih: 09-07-2021 18:43:21, son düzenleme tarihi: 09-07-2021 18:43:21, yazar: Yusuf İpek
+ + diff --git a/blog/index.html b/blog/index.html new file mode 100644 index 0000000..0989d76 --- /dev/null +++ b/blog/index.html @@ -0,0 +1,46 @@ + + + + + + + +Teknoloji rehberleri. Reklam ve izleyici yok!
+Etiketler: +css, discord, html, linux, ses, web-development
+
+
+Karanlık temalara bayılıyorum. Kullandığım her websitesinde ve uygulamada karanlık tema tercih ediyorum. Peki tema seçeneklerini sitemize nasıl koyarız? Birden fazla temayı sitemizde nasıl yapabiliriz bu rehberde bunu anlatacağım. +
+ ++Örnek olarak projelerimden birisini kullanacağım. Geçtiğimiz haftalarda 3 tane teması olan bir hesap makinesi yaptım. +
++kod | canlı demo +
+
+
+
+Gördüğünüz gibi düğmemiz var ve bu düğmeyle 3 tema arasında seçim yapabiliyoruz. +
+ ++Düğmeyi oluşturmak için checkbox, radio veya button elementlerini kullanabiliriz. Burada ben radio elementini kullanacağım. +
+ +
+<div class="radio">
+ <input type="radio" id="theme1" name="theme1" />
+ <input type="radio" id="theme2" name="theme2" />
+ <input type="radio" id="theme3" name="theme3" />
+</div>
++Renk düzenlerini CSS değişkenlerini kullanarak oluşturacağız. SASS değişkenlerinin derlenmesi gerektiğinden SASS değişkenleri kullanamazsınız! Bu uygulamada ben üç tane tema yapıyorum dolayısıyla üç tane renk düzeni oluşturacağım. İlki; +
+
+ :root {
+ --color-main: #3b4664;
+ --color-white: #ffffff;
+ --bg-main: #181f32;
+ --bg-buttons: rgba(37, 45, 68, 0.6);
+ --num: #eae3db;
+ --number-color: #484b5a;
+ --number-border: #b3a599;
+ --button-secondary: #647299;
+ --border-secondary: #404d70;
+ --button-tertiary: #d13f30;
+ --border-tertiary: #922417;
+ --radio-color: #cf3f34;
+}
++Bu varsayılan temam olacak dolayısıyla herhangi bir attribute eklememe gerek yok. İkinci temam; +
+
+body[data-theme="light"] {
+ --color-main: #e6e6e6;
+ --color-white: #3a3a32;
+ --bg-main: #eeeeee;
+ --bg-buttons: #d3cdcd;
+ --num: #e5e4e0;
+ --number-color: #3a3a32;
+ --number-border: #a69c93;
+ --button-secondary: #388187;
+ --border-secondary: #1a5d66;
+ --button-tertiary: #c85401;
+ --border-tertiary: #873a02;
+}
++Bu aydınlık temamız olacak. data-theme yazarak bunu belirtmemiz gerekli. Data özel bir attribute. Data hakkında daha fazla bilgi almak istiyorsanız buraya bakın. +
++Son temamızsa; +
+
+body[data-theme="purple"] {
+ --color-main: #17062a;
+ --color-white: #ffe43b;
+ --bg-main: #1e0836;
+ --bg-buttons: #1e0836;
+ --num: #331b4d;
+ --number-color: #ffe537;
+ --number-border: #85219b;
+ --button-secondary: #56077c;
+ --border-secondary: #bf15f4;
+ --button-tertiary: #00decf;
+ --border-tertiary: #6dfaf1;
+ --radio-color: #00e8d8;
+}
++Bu kurulumla birlikte değişkenlerimizi kodumuzda kullanıp istediğimiz temayı dinamik olarak sayfamızda değiştirebileceğiz. +
+ ++İlk olarak radio elementlerimizi Javascript ile seçmemiz gerekli. +
+
+const theme1 = document.getElementById("theme1");
+const theme2 = document.getElementById("theme2");
+const theme3 = document.getElementById("theme3");
+
+Şimdi changeTheme() fonksiyonunu oluşturacağız. Bu fonksiyon body attribute değerini değiştirmemizi sağlayacak ve böylece istediğimiz temayı sitede kullanabileceğiz.
+
+function changeTheme() {
+ if (theme1.checked) {
+ document.body.setAttribute("data-theme", "");
+ } else if (theme2.checked) {
+ document.body.setAttribute("data-theme", "light");
+ } else if (theme3.checked) {
+ document.body.setAttribute("data-theme", "purple");
+ } else return;
+}
++Şimdi de eventListener eklememiz lazım, yapmasını istediğimiz iki şey var; +
+ +
+ theme1.addEventListener("click", () => {
+ theme2.checked = false;
+ theme3.checked = false;
+ changeTheme();
+});
+theme2.addEventListener("click", () => {
+ theme1.checked = false;
+ theme3.checked = false;
+ changeTheme();
+});
+theme3.addEventListener("click", () => {
+ theme1.checked =false;
+ theme2.checked = false;
+ changeTheme();
+});
++Bununla birlikte bütün temalarımız işlevesel bir şekilde çalışıyor! Kullanıcı hangi temaya tıklarsa site ona göre değişecek. +
+ ++İki sorunumuz var: +
+ ++Bu sorunu localStorage kullanarak aşacağız. +
++İlk olarak varsayılan tema oluştralım. +
+ +
+// Varsayılan temam "theme1" olacak
+if (localStorage.getItem("theme") === null) {
+ localStorage.setItem("theme", "theme1");
+}
++Switch kullanarak her sayfayı yenilediğimizde seçilen temayı tekrar seçeceğiz. +
+ +
+switch (localStorage.getItem("theme")) {
+ case "theme1":
+ theme1.checked = true;
+ break;
+ case "theme2":
+ theme2.checked = true;
+ break;
+ case "theme3":
+ theme3.checked = true;
+ break;
+ default:
+ break;
+}
++Daha sonrasında localStorage.setItem() kullanarak eventListener'larının kullanıcının seçtiği temayı localStorage'a kaydetmesini sağlayacağız. +
+ +
+theme1.addEventListener("click", () => {
+ theme2.checked = false;
+ theme3.checked = false;
+ // New Code
+ localStorage.setItem("theme", "theme1");
+ changeTheme();
+});
+theme2.addEventListener("click", () => {
+ theme1.checked = false;
+ theme3.checked = false;
+ // New Code
+ localStorage.setItem("theme", "theme2");
+ changeTheme();
+});
+theme3.addEventListener("click", () => {
+ theme1.checked = false;
+ theme2.checked = false;
+ // New Code
+ localStorage.setItem("theme", "theme3");
+ changeTheme();
+});
+
+Son olarak kodun sonunda changeTheme() fonksiyonunu çağırmamız gerekli ki her sayfayı yenilediğimizde rengimiz değişebilsin.
+
+Bu kadar! Websitemizde kullanıcının seçebileceği 3 tane temamız var ve localStrage kullanarak temayı kaydediyoruz. Sitenize bu yöntemle istediğiniz kadar tema ekleyebilirsiniz. +
+ ++Kullanıcının tema tercihini de göz önünde bulundurmak istiyorsanız CSS'te olan prefers-color-scheme media query'sini kullanarak varsayılan temayı karanlık/aydınlık olarak ayarlayabilirsiniz. Kolay bir işlem olduğundan bu rehberi daha fazla uzatmak istemiyorum. +
++Benim ilk kodlama rehberimdi ve herhangi bir geri bildiriminiz varsa lütfen bana ulaşın! Okuduğunuz için teşekkürler ve umarım bu rehber size faydalı olmuştur. +
+ ++Yusuf İpek website, youtube +
+Yazının paylaşıldığı tarih: 01-07-2021 01:24:40, son düzenleme tarihi: 01-07-2021 01:29:57, yazar: Yusuf İpek
+ + diff --git a/data/pictures/bir-programın-sesini-yansıtma-01.webp b/data/pictures/bir-programın-sesini-yansıtma-01.webp new file mode 100644 index 0000000..5b950cb Binary files /dev/null and b/data/pictures/bir-programın-sesini-yansıtma-01.webp differ diff --git a/data/pictures/bir-programın-sesini-yansıtma.webp b/data/pictures/bir-programın-sesini-yansıtma.webp new file mode 100644 index 0000000..807bc66 Binary files /dev/null and b/data/pictures/bir-programın-sesini-yansıtma.webp differ diff --git a/tags/bir-programin-sesini-yansitma b/tags/bir-programin-sesini-yansitma new file mode 100644 index 0000000..e534fa0 --- /dev/null +++ b/tags/bir-programin-sesini-yansitma @@ -0,0 +1,3 @@ +discord +linux +ses diff --git a/tags/websitenize-tema-ekleme b/tags/websitenize-tema-ekleme new file mode 100644 index 0000000..cd7f9d9 --- /dev/null +++ b/tags/websitenize-tema-ekleme @@ -0,0 +1,3 @@ +css +html +web-development