Modern web uygulamalar\u0131nda kullan\u0131c\u0131lar\u0131 g\u00fcncel tutmak hayati \u00f6nem ta\u015f\u0131r. Yeni \u00f6zellikler, hata d\u00fczeltmeleri ve iyile\u015ftirmeler hakk\u0131nda bilgi vermek i\u00e7in de\u011fi\u015fiklik g\u00fcnl\u00fckleri (changelog) olmazsa olmazd\u0131r. Ancak, bu t\u00fcr bir i\u015flevselli\u011fi sitenize entegre ederken genellikle b\u00fcy\u00fck JavaScript k\u00fct\u00fcphanelerine ve karma\u015f\u0131k ba\u011f\u0131ml\u0131l\u0131klara ba\u015fvurmak zorunda kal\u0131r\u0131z. Bu makalede, web performans\u0131n\u0131 ve geli\u015ftirici esnekli\u011fini \u00f6n planda tutarak, a\u011f\u0131r scriptlere olan nefretimizden do\u011fan, tamamen hafif ve ba\u011f\u0131ms\u0131z bir de\u011fi\u015fiklik g\u00fcnl\u00fc\u011f\u00fc widget’\u0131n\u0131n nas\u0131l geli\u015ftirilece\u011fini ke\u015ffedece\u011fiz.<\/p>\n
Web d\u00fcnyas\u0131nda h\u0131z ve verimlilik, kullan\u0131c\u0131 deneyiminin temel ta\u015flar\u0131d\u0131r. Mevcut \u00e7\u00f6z\u00fcmlerin \u00e7o\u011fu, basit bir i\u015flevi yerine getirmek i\u00e7in gereksiz yere b\u00fcy\u00fck ve karma\u015f\u0131k k\u00fct\u00fcphaneler kullan\u0131r. Bu durum, \u00f6zellikle k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projelerde ciddi performans sorunlar\u0131na yol a\u00e7abilir.<\/p>\n
Sayfa y\u00fckleme h\u0131zlar\u0131, hem kullan\u0131c\u0131 memnuniyeti hem de arama motoru s\u0131ralamalar\u0131 i\u00e7in kritik bir fakt\u00f6rd\u00fcr. A\u011f\u0131r JavaScript dosyalar\u0131, sayfa y\u00fckleme s\u00fcrelerini uzatarak kullan\u0131c\u0131lar\u0131n sitenizden ayr\u0131lmas\u0131na neden olabilir. Hafif bir \u00e7\u00f6z\u00fcm, bu s\u00fcreyi minimumda tutarak daha iyi bir ba\u015flang\u0131\u00e7 sa\u011flar.<\/p>\n
Yava\u015f y\u00fcklenen bir web sitesi, kullan\u0131c\u0131da hayal k\u0131r\u0131kl\u0131\u011f\u0131 yarat\u0131r. Bir de\u011fi\u015fiklik g\u00fcnl\u00fc\u011f\u00fc gibi ikincil bir \u00f6zelli\u011fin, ana i\u00e7eri\u011fin y\u00fcklenmesini geciktirmesi kabul edilemez. Hafif bir widget, ana i\u00e7eri\u011fin h\u0131zl\u0131ca g\u00f6r\u00fcnmesini sa\u011flayarak kullan\u0131c\u0131 deneyimini olumlu y\u00f6nde etkiler.<\/p>\n
B\u00fcy\u00fck k\u00fct\u00fcphanelere ba\u011f\u0131ml\u0131 olmak, geli\u015ftiricileri belirli ekosistemlere kilitler. Bu durum, gelecekteki g\u00fcncellemelerde veya farkl\u0131 projelerde esnekli\u011fi k\u0131s\u0131tlayabilir. Saf JavaScript ve minimal CSS ile olu\u015fturulan bir widget, herhangi bir \u00e7er\u00e7eve veya k\u00fct\u00fcphaneden ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015f\u0131r ve geli\u015ftiriciye tam kontrol sa\u011flar.<\/p>\n
Piyasada bir\u00e7ok haz\u0131r de\u011fi\u015fiklik g\u00fcnl\u00fc\u011f\u00fc \u00e7\u00f6z\u00fcm\u00fc bulunsa da, bunlar\u0131n \u00e7o\u011fu belirli dezavantajlar\u0131 beraberinde getirir. Bu dezavantajlar, kendi hafif \u00e7\u00f6z\u00fcm\u00fcm\u00fcz\u00fc geli\u015ftirme motivasyonumuzu g\u00fc\u00e7lendirdi.<\/p>\n
React, Vue veya Angular gibi modern JavaScript \u00e7er\u00e7eveleri, karma\u015f\u0131k uygulamalar i\u00e7in harika ara\u00e7lard\u0131r. Ancak, sadece bir de\u011fi\u015fiklik g\u00fcnl\u00fc\u011f\u00fc g\u00f6stermek i\u00e7in bu \u00e7er\u00e7evelerin tamam\u0131n\u0131 veya b\u00fcy\u00fck par\u00e7alar\u0131n\u0131 y\u00fcklemek, gereksiz bir y\u00fck olu\u015fturur. Bu durum, “bir f\u0131nd\u0131\u011f\u0131 k\u0131rmak i\u00e7in balyoz kullanmak” gibidir.<\/p>\n
\u00c7o\u011fu haz\u0131r \u00e7\u00f6z\u00fcm, karma\u015f\u0131k yap\u0131land\u0131rma dosyalar\u0131, paket y\u00f6neticileri ve birden fazla ba\u011f\u0131ml\u0131l\u0131k gerektirir. Bu durum, kurulumu ve bak\u0131m\u0131 zorla\u015ft\u0131r\u0131r, ayn\u0131 zamanda potansiyel g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 da beraberinde getirebilir.<\/p>\n
Haz\u0131r widget’lar genellikle ihtiyac\u0131n\u0131z olmayan bir\u00e7ok ekstra \u00f6zellikle birlikte gelir. Animasyonlar, geli\u015fmi\u015f filtreleme se\u00e7enekleri veya farkl\u0131 tema se\u00e7enekleri gibi \u00f6zellikler, kod boyutunu art\u0131r\u0131r ve performans \u00fczerinde olumsuz etki yarat\u0131r. Bizim amac\u0131m\u0131z, sadece temel i\u015flevi en verimli \u015fekilde sunmakt\u0131.<\/p>\n
Yukar\u0131da bahsedilen t\u00fcm fakt\u00f6rler bir araya geldi\u011finde, sonu\u00e7 genellikle yava\u015f y\u00fckleme s\u00fcreleri olur. \u00d6zellikle mobil cihazlarda veya d\u00fc\u015f\u00fck bant geni\u015fli\u011fine sahip ba\u011flant\u0131larda bu durum daha da belirginle\u015fir ve kullan\u0131c\u0131lar\u0131n sitenizden h\u0131zla uzakla\u015fmas\u0131na neden olabilir.<\/p>\n
A\u011f\u0131r scriptlerin getirdi\u011fi sorunlardan ka\u00e7\u0131nmak i\u00e7in, widget’\u0131m\u0131z\u0131 tasarlarken belirli prensiplere ba\u011fl\u0131 kald\u0131k. Bu prensipler, performans, basitlik ve esnekli\u011fi merkeze al\u0131yordu.<\/p>\n
Herhangi bir harici k\u00fct\u00fcphane veya \u00e7er\u00e7eve kullanmadan, saf (vanilla) JavaScript ile \u00e7al\u0131\u015fmak temel prensibimizdi. Bu yakla\u015f\u0131m, en k\u00fc\u00e7\u00fck dosya boyutunu ve en h\u0131zl\u0131 \u00e7al\u0131\u015fma zaman\u0131n\u0131 garanti eder. Ayr\u0131ca, kodun ne yapt\u0131\u011f\u0131n\u0131 tam olarak anlamam\u0131z\u0131 ve \u00fczerinde tam kontrol sahibi olmam\u0131z\u0131 sa\u011flar.<\/p>\n
G\u00f6rsel tasar\u0131m i\u00e7in sadece temel CSS kurallar\u0131 kullan\u0131ld\u0131. Karma\u015f\u0131k animasyonlar veya g\u00f6lgeler yerine, okunabilirli\u011fi ve basitli\u011fi \u00f6n planda tutan bir tasar\u0131m dili benimsedik. Bu, CSS dosyas\u0131n\u0131n boyutunu minimumda tutar ve sayfa y\u00fcklemesini h\u0131zland\u0131r\u0131r.<\/p>\n
Projenin tek ba\u015f\u0131na \u00e7al\u0131\u015fabilmesi i\u00e7in harici hi\u00e7bir JavaScript veya CSS k\u00fct\u00fcphanesine ba\u011f\u0131ml\u0131 olmamak kritikti. Bu, gelecekteki bak\u0131m s\u00fcre\u00e7lerini basitle\u015ftirir ve olas\u0131 uyumluluk sorunlar\u0131n\u0131 ortadan kald\u0131r\u0131r.<\/p>\n
Kodun kolayca okunabilir, anla\u015f\u0131labilir ve geni\u015fletilebilir olmas\u0131 hedeflendi. Karma\u015f\u0131k algoritmalar veya soyutlamalar yerine, do\u011frudan ve i\u015flevsel bir yakla\u015f\u0131m benimsenerek, herkesin kolayca katk\u0131da bulunabilece\u011fi bir yap\u0131 olu\u015fturuldu.<\/p>\n
Widget’\u0131m\u0131z\u0131n temelini, modern web standartlar\u0131n\u0131n \u00fc\u00e7 ana bile\u015feni olu\u015fturur: HTML iskeleti, CSS ile stilizasyon ve saf JavaScript ile dinamik i\u015flevsellik.<\/p>\n
Widget’\u0131n HTML yap\u0131s\u0131 m\u00fcmk\u00fcn oldu\u011funca basit tutuldu. Bir ana kapsay\u0131c\u0131 (div<\/code>) i\u00e7inde, her de\u011fi\u015fiklik g\u00fcnl\u00fc\u011f\u00fc \u00f6\u011fesi i\u00e7in ayr\u0131 div<\/code>‘ler veya li<\/code>‘ler kullan\u0131ld\u0131. Bu yap\u0131, semantik olarak do\u011fru ve eri\u015filebilir bir temel sa\u011flar.<\/p>\nYenilikler ve G\u00fcncellemeler<\/h3>\n
\n \n <\/ul>\n