CodePen
Web geliştirmelerinde deneme dosyaları oluşturmaktan sıkıldınız mı ? Öyleyse hadi denemelerini anında kodlayıp canlı değişimleri gözlemleyebileceğimiz codepen sitesini deneyelim !!!
Bu yazımda çoğumuzun bilmekte olduğu visual studio code , Brackets gibi popüler editörlerden değil her an ve heryerde elinizin altında olan online bir editörden CodePen den bahsedeceğim. Hazırsanız Başlayalım ;)
CodePen sitesi, oluşturulan HTML , CSS ve JavaScript kodlarını test edip kullanıcıya sunmak amacıyla Alex Vazquez ve Tim Sabat tarafından geliştirildi. Site hakkında bu kadar bilgi yeterliyse ( Az Laf Çok Kod) hadi gelin bir kaç basit kod parçasıyla kod çıktılarını anında görebilmenin zevkini yaşayalım…
codepen.io adresine girdikten sonra sağ üstte kayıt ve girişe , sol üstte gördüğünüz Start Coding ile kullanıcıların kalem adını verdiği kod yazma sayfasına yönlenebilirsiniz. Tanıtımı da geçtiysek artık her yazılımcının klasiği (Dennis Ritchie selam olsun) Hello World yazdırarak başlayalım.
Yukarıda basit bir başlık tagi açıp içerisine hello world yazdıktan sonra css bloğuna geçerek sayfanın body(gövde) kısmını background vererek sarıya boyadım. Ardından süslü parantezi (kod bloğunu) kapatarak h1 etiketinin bloğunu başlattım.( Burada dikkat etmeniz gereken ayrıntı süslü parantezlerin etiketleri kapsama alanıdır. Kod bloğunu başlattıktan sonra bir sonraki etiketin etki alanına geçmek için parantezi kapatmayı unutmayın) Başlık etiketimize renk vermek için color, yazıyı ortalamak için ise text-align niteliğini (attribute) kullandım.
Şimdi gelin siteyi biraz daha kurcalayalım. Bir editörün bana göre en önemli yanı kullanıcıya yaşattığı görsel deneyimdir ve bunu yaparken de en önemli olanı kod penceresini istediğim gibi ayarlama özgürlüğüdür. Codepen bize bu özgürlüğü ChangeWiew butonunda saklamaktadır. Settings ile editör ayarlarınızı yapıp Save ile kaydedebilirsiniz. Şimdi gelin biraz JavaScript yazalım.
JavaScript ile boş bir ekrana web programlamada yaygın olarak kullandığımız 3 farklı mesaj türünü yazdım.
Son olarak CodePen nimetlerinden daha fazla yararlanmak için kaydoldum. Bu bana ne mi katacak ? Yazdığım kodları sayfayı kapatsam dahi yedeklenmesi sayesinde tekrardan açıp istediğim cihazdan ve kaldığım yerden çalışmalarıma devam edebileceğim…
Tanıtımın sonuna geldik bir sonraki makalede görüşmek dileğiyle iyi kod yazmalar :)))
