Front-End'cilerin işini kolaylaştıracak güzel şeyler

Merhaba, uzun zaman sonra yazdığım blog yazımda "aslında ilk gerçek blog yazısı", web işinde front-end yani Türkçesi önyüz ile ilgilenen ve öğrenen kişiler için bir kaç faydalı link vereceğim. Vereceğim linklerdeki eklentiler, bilgiler ve diğer her şey, bu işi yaparken daha iyi işler yapmanızı sağlayacak veya işinizi kolaylaştıracak şeyleri içeriyor. Şimdi çıkıpta "günaydın, bunları bilmeyen mi kaldı" filan demeyin. Amaç zaten bilen kişiler okusun diye boş boş yazı yazmak değil, bilmeyen ya da sektöre yeni giren arkadaşlara yardımcı olmak. Müsaadeniz ile "tüm yüzeyselliğimle yazımı yazmaya" başlıyorum, hem yazmayıp ta ne yapacağım, site boş mu kalsın :)

 

 

 

1 - Bootstrap

ÇOK ÖNEMLİ: Çağımızda bilgisayarların tahtını sallayan mobil cihazları hep esgeçiyoruz. Yıl olmuş 2015, hâla mobil uyumu olmayan siteler piyasada geziyor. Bootstrap'in tek özelliği tabikide mobil değil ancak benim için en önemli özelliği mobil cihazlara uyumlu site yapmayı bayağı kolaylaştırıyor olması. 4 farklı çözünürlük aralığı için farklı farklı grid'ler atayabilmemizi sağlaması çok büyük kolaylık. Bu 4 farklı çözünürlük aralığı; çok küçük cihazlar(telefon), küçük cihazlar(tablet), küçük ekranlı masaüstü bilgisayarlar, büyük ekranlı masaüstü bilgisayarlar olarak sıralanabilir. Basit bir şekilde özetleyecek olursak; bir ürün listesi düşünelim, bu ürün listesinde Bootstrap ile çok kolay bir şekilde küçük cihazlarda tek satırda 1 adet ürün görünürken, orta ve büyük boyutta ekranı olan cihazlarda ise tek satırda 3-4 ürün görünmesini sağlayabiliriz.  Mobil uyumluluk ve grid yapısı haricinde içerisinde bir çok CSS kodunun hazır gelmesi, sitenize hoş bir görünüm kazandırmasının yanı sıra sitedeki sayfalara bir uyumluluk ve standart kazandıracaktır. Ayrıca içerisindeki iconlar, hazır kompanentler ve diğer özellikler ile sitenizin çok hoş bir görünüme kavuşacağından emin olabilirsiniz.

Daha fazla bilgi almak ve edinmek için: http://getbootstrap.com/

 

2 - CSS3 Generator

Benim gibi üşengeç bir insansanız, bir çok CSS3 özelliğini kendiniz kod yazmadan oluşturabileceğiniz güzel bir site. Ancak size tavsiyem, siz yinede önce CSS3 özelliklerini öğrenin, sonra vakit kaybetmemek için bunu kullanırsınız :)

http://www.css3generator.com/

 

3 - CSS Border Radius Generator

Bir önceki sitede bulunan bir CSS3 özelliği olan Border Radius için özel yapılmış bir site. Bunu da bookmark'ınıza ekleyin, işinize yarayacaktır.

http://border-radius.com/

 

4 - Stripe Generator

Sitenizde veya farklı grafiksel işlerde stripe, yani birbirini tekrar eden çizgilerden oluşacak grafikleri basitçe oluşturabileceğiniz bir site. 8 farklı stripe çeşidi için bir çok ayarlama yapmanızı sağlıyor.

http://www.stripegenerator.com/

 

5 - Javascript Beautifier

Yazdığınız javascript kodlarını daha derli toplu bir hale getiriyor.

http://jsbeautifier.org/

 

6 - Webpage Browser Resolution Preview


Web sitelerinin farklı çözünürlüklerde nasıl göründüğüne bakmak için kullanabileceğiniz bir site. VGA'den 4K'ya kadar bir çok farklı çözünürlük seçeneği barındırıyor.

http://webpagesize.net/

 

7 - CSS Sticky Footer


Web sitenizin footer(taban) kısmını, içerik bölümünüz kısa olsa bile en alta sabitlemek için kullanabileceğiniz bir CSS örneği. Özellikle sağdan sola tüm sayfayı kaplayan bir footer'ınız varsa altında boşluk görünmesini istemezsiniz değil mi?

http://www.cssstickyfooter.com/

 

8 - Convert Ico

Sitelerinizin favicon kısmında kullanılmak üzere yaptığınız logo-iconları .ico formatına çevirmenize yarayan bir site.

http://convertico.com/

 

9 - Subtle Patterns

Sitenize hoş bir görünüm katacak arkaplan resmine ihtiyacınız varsa bu siteden beğendiğiniz arkaplan resmini indirip kullanabilirsiniz. Ayrıca önizleme seçeneği sayesinde site arkaplanında nasıl göründüğüne de bakabilirsiniz.

http://subtlepatterns.com/

 

10 - Font2Web


Elinizde bulunan fontları web sitenizde kullanabilmeniz için gerekli formatlara dönüştüren ve bununla da kalmayıp fontları kullanabilmeniz için hazırladığı CSS kodlarını indirmenizi sağlayan müthiş yararlı bir site.

http://www.font2web.com/

 

11 - Google Fonts

Ben font yükle et bilmem ne uğraşamam derseniz Google amca bizlere hazırlarını sunmuş. Sitelerinizde kullanılmak üzere sunulmuş olan bu gayet güzel olan fontları hiç bir indirme vs. işlemi yapmadan, sadece ufak bir kod ekleme işlemiyle sitenizde kullanabilirsiniz.

https://www.google.com/fonts

 

12 - Adobe Color


Web sitesi tasarlayacaksınız ve renkler konusunda kararsız mı kaldınız? Adobe color imdadınıza yetişecektir. Birbirine uyan-yakışan renkleri bir arada sunan Adobe Color, renk konusundaki kararsızlığımı giderme konusunda gayet başarılı bir araç.

https://color.adobe.com/tr/explore/newest/
 

Tanıtacağım araçlar şimdilik bu kadar, belki ikinci seriyi de yayınlayabilirim.

Sağlıcakla kalın, Serhat...



Yorumlar

Twitter'da Ben!

Yükleniyor...