Ön uç geliştirici için gereken minimum değer. Ön Uç geliştirme için modern araçlar

Geçen gün bir proje için, diğer geliştiriciler için ilginç ve öğretici olacağını umduğum bir BENİOKU hazırladım. Böylece, onu yazarken, birkaç yıl önce, Node'a ve onun paket yöneticisine, Homebrew ve Git sistemlerine, her türlü testler, testler ve son yapılar.

Bir zamanlar, bir ön uç geliştiricinin iş akışının büyük bir kısmı dosyaları düzenlemekten, yerel olarak test etmekten (elimizden gelen en iyi şekilde) ve FTP aracılığıyla bir sunucuya yüklemekten oluşuyordu. IE6'yı kendi irademize göre yenerek veya farklı tarayıcılarda mükemmel piksel elde ederek mükemmelliğimizi ölçtük. Topluluğumuzun pek çok üyesi - ve ben de - geleneksel programlama deneyiminden yoksundu. HTML, CSS ve JavaScript - genellikle jQuery biçiminde - kendi başlarına ustalaştı.

Son birkaç yılda bazı şeyler değişti. Belki de bunun nedeni, insanların ön uç geliştirmeyi ciddiye almaya başlamasıydı; belki de tarayıcı geliştiricilerinin çoğunun sonunda yarattıklarında işleri düzene koyduğu gerçeği; ya da belki sadece ön uç geliştiriciler, yine ben dahil, sonunda yazılım geliştirme sürecinin özünü kavradılar.

Her ne olursa olsun, çeşitli küçük şeylerin değerinden aletlerin değerine doğru bir vurgunun değiştiğine tanık olduğumuzu düşünüyorum. Şimdi, başarılı bir ön uç geliştirici olmak için, bir dizi temel beceriye sahip olmanız gerekir ve bu gereksinimleri karşılamayan geliştiriciler, bilgi kaynakları başladıkça, çok geçmeden ne kadar geride olduklarını hissetmeye başlayacaklar. verilmiş için biraz bilgi almak. ...

İşte herkesin aşina olmasını isteyeceğiniz bazı şeyler ve becerilerinizi geliştirmek için kullanabileceğiniz bazı kaynaklar. (Katkıları için Paul Irish, Mike Taylor, Angus Croll ve Vlad Filippov'a teşekkürler.)

JavaScript

Belki bu kelimeler olmadan anlaşılabilir, ancak JavaScript kitaplığı hakkında basit bilgi artık yeterli değildir. Basit JavaScript kullanarak kitaplığın tüm özelliklerini uygulayabilmeniz gerektiğini söylemiyorum, ancak kitaplığın ne zaman gerçekten uygun olduğunu anlamanız ve gerekirse eski güzel JavaScript ile çalışabilmeniz gerekir.

Bu, JavaScript: Strengths'i tercihen birden fazla kez okuduğunuz anlamına gelir. Nesneler ve diziler gibi veri yapılarının nasıl çalıştığını anladığınızı; nasıl ve neden ihtiyaç duyduğunuz dahil olmak üzere işlevler telefon etmek ve kullanım; prototipler aracılığıyla kalıtımla nasıl çalışılacağını bilir; ve eşzamansızlıkla başa çıkabilirsiniz.

Temel JavaScript becerileriniz arzulanan çok şey bırakıyorsa, işte size yardımcı olacak bazı kaynaklar:

• Eloquent JavaScript: JavaScript ile ilgili temel bilgiler üzerine mükemmel bir kitap (basılı olarak da mevcuttur)
• JS yeterlilik testi: JavaScript'teki çeşitli konularda hatalar içeren bir testler koleksiyonu; Çalışması için test kodunu yeniden yazabilir misin?
• - Başka birinin kodunu okuyarak neler öğrenebileceğinizi gösteren, Paul Irish'den eski ama güçlü bir parça.

Git sürüm kontrol sistemi (ve GitHub'daki profil)

GitHub'da değilseniz, genel olarak ön uç geliştirme teknolojileri etrafında büyüyen büyük açık kaynak topluluğuna katılamazsınız. Yeteneklerini denemek için bir havuzun klonlanması size aşina olmalı ve ortak projelerde şubeleri nasıl kullanacağınızı anlamalısınız.

Git becerilerinizi geliştirmek mi istiyorsunuz?

Modüler organizasyon, bağımlılık yönetimi ve test yapıları

Bağımlılık yönetiminin bir sayfaya fazladan bir komut dosyası veya stil etiketi eklemekle sınırlı olduğu günler çoktan geride kaldı. RequireJS gibi harika araçları işteki geliştirme sürecinize dahil etme fırsatınız olmasa bile, bunları kendi projenizde veya Backbone Boilerplate gibi bir projede keşfetmeye zaman ayırmalısınız çünkü sundukları faydaları abartmak zor. . Özellikle RequireJS, küçük modüler JS ve CSS dosyalarıyla geliştirmeyi mümkün kılar ve daha sonra bunları daha sonra kullanmak üzere optimizasyon aracıyla birleştirir ve küçültür.

Modül tabanlı geliştirme konusunda şüpheci misiniz? Bu hiçbir şey yapmamak için bir sebep değil. En azından, kodunuzu akıllıca sıkıştıran ve çıktıyı oluşturmadan önce bu sıkıştırılmış dosyaları birleştiren UglifyJS veya Closure Compiler gibi araçlara aşina olmanız gerekir.

Saf CSS ile yazıyorsanız - yani, Sass veya Stylus gibi bir ön işlemci kullanmıyorsanız - RequireJS, CSS dosyalarınızı modüler bir şekilde düzenlemenize de yardımcı olacaktır. Geliştirme bağımlılıklarını yüklemek için ana dosyadaki @import ifadelerini kullanın ve ardından kullanıma hazır bir dosya oluşturmak için ana dosyada RequireJS iyileştiriciyi çalıştırın.

Tarayıcıya yerleşik geliştirici araçları

Tarayıcı yerleşik geliştirici araçları son birkaç yılda önemli ölçüde gelişti ve artık bunları doğru kullanmayı öğrenirseniz geliştirme deneyiminizi önemli ölçüde artırabilir. (İpucu: Hala uyarı kullanarak kodda hata ayıklıyorsanız, zaman kaybedersiniz.)

Muhtemelen geliştirici araçlarını sürekli olarak kullanacağınız bir tarayıcı seçmelisiniz - şimdilik Google Chrome'daki geliştirici araçlarına eğiliyorum - ancak diğer tarayıcılardaki araçlardan, ara sıra temel aldıkları için tamamen vazgeçmeyin. geliştirici geri bildirimi. yeni kullanışlı özellikler eklendi. Özellikle Opera'nın Dragonfly, geliştirici araçlarını diğerlerinden ayıran bazı özellikler ekledi: (deneysel) CSS profil oluşturucu, özelleştirilebilir kısayol tuşları, USB bağlantısına ihtiyaç duymadan uzaktan hata ayıklama ve özel rengi kaydetme ve kullanma yeteneği palet.

Tarayıcı geliştirici araçlarına çok aşina değilseniz, jQuery Kodunu Düzeltme sunumu, adım adım hata ayıklama sürecini içeren harika (ve çok jQuery odaklı olmayan) bir hata ayıklama özeti olarak hizmet eder - bu, hayatınızı değiştirecek bir şeydir. sunuş henüz tanıdık gelmedi.

Komut satırı

Komut satırı hakkında konuşursak, güvenle kullanmak zaten bir zorunluluktur - hemen bir terminal penceresine girip işe dalmaya hazır değilseniz çok şey kaçırıyorsunuz. Ne yapman gerektiğini söylemiyorum herşey terminal aracılığıyla - Git GUI'yi kullanmaya devam edebilirsiniz, ancak sonunda onu terk ederseniz daha iyi olacağını düşünüyorum - ancak elbette, üzerinde çalıştığınız proje için terminal penceresi her zaman açık olmalıdır. Komut satırında tereddüt etmeden yapmanız gereken birkaç görev vardır:

• başka bir makineye veya sunucuya bağlanmak için ssh
• dosyaları başka bir makineye veya sunucuya kopyalamak için scp
• bir projedeki dosyaları dizeye veya desene göre bulmak için ack veya grep
• verilen kalıpla isimleri eşleşen dosyaları bul
• git, add, commit, status ve pull gibi en azından temel eylemleri gerçekleştirmek için
• paketleri yüklemek için Homebrew kullanmak için demleyin
• düğüm paketlerini yüklemek için npm
• ruby paketlerini kurmak için mücevher

Bazı komutları özellikle sık kullanıyorsanız, .bashrc, .profile veya .zshrc dosyanızı (veya orada ne varsa) düzenleyin ve komutları her seferinde elle yazmamak için onlar için alternatif adlar oluşturun. ~ / .Gitconfig dosyasına alternatif adlar da eklenebilir. Gianni Chiappetta'nın nokta dosyaları harika bir ilham kaynağı olabilir.

Not: Windows kullanıyorsanız, Cygwin dışında size nasıl yardımcı olacağımı bilmiyorum. Yanılıyor olabilirim, ancak bir Windows makinesinde açık kaynak ön uç geliştirici topluluğuna dahil olmak çok daha zor. Her şeye iyimser bakarsanız, MacBook Air dizüstü bilgisayarlar çok pahalı, güçlü ve şaşırtıcı derecede taşınabilir değildir ve ayrıca Ubuntu veya Unix de vardır.

İstemci tarafı şablon oluşturma

Kısa bir süre önce, sunucuların bir XHR isteğine bir HTML parçacığı ile yanıt vermesi yaygındı, ancak son 12-18 ay içinde, ön uç geliştirici topluluğu ışığı görmeye başladı ve sunucu. Bu tür verileri daha sonra belge ağacına eklenebilecek HTML'ye dönüştürmek, doğrudan kodla uğraşırken zaman alıcı ve elverişsiz olabilir. Bu, istemci tarafı şablonlama kitaplıklarının devreye girdiği yerdir: veri ekledikten sonra bir HTML dizesine dönüşen şablonları kullanmanıza izin verir. Şablon oluşturma aracı bulma konusunda yardıma mı ihtiyacınız var? Garann \u200b\u200bMeans'ın şablon seçim kılavuzu, doğru olanı bulmanıza yardımcı olacaktır.

CSS ön işlemcileri

Orijinal makale: Ön Uç Geliştiriciler için Temel Bir Makale okundu:

Netology'nin editörü Svetlana Shapovalova, bir front-end geliştiricinin kim olduğunu, neyi yapabilmesi (veya yapmaması gerektiğini) ve kendisine mükemmel bir maaş (veya çok fazla) ödenmediğini anlıyor.

Ön uç geliştirici kimdir

StackOverflow'un yıllık araştırmasına göre, 2017'de hizmet kullanıcıları arasında en popüler meslek Web geliştiricisidir. Tüm ön uç geliştiriciler bu kategoriye girer.

StackOverflow verileri

Karşılaştığınız ilk iş arama sitesine, örneğin hh.ru'ya giderseniz, bunun bir bukalemun uzmanı olduğu izlenimini edinirsiniz.

Her şey, boş yerlerin adlarındaki kafa karışıklığıyla başlar: Hem "ön uç geliştirici" hem "ön uç geliştirici" ve "ön uç geliştirici" ve "ön uç geliştirici" ile "ön uç geliştirici" ve "ön uç geliştirici" ve "ön uç geliştirici" -son geliştirici ". Bazen tam yığın geliştirici için gereksinimleri olan bir tür "web kodlayıcı" bile görebilirsiniz. Buna tepki şudur: WTF?!

Sorun şu ki, bazı işverenler bir düzen tasarımcısını bir ön uç geliştiriciden ayırmıyor (veya ayırt etmek istemiyor) - bu, iş tanımlarından anlaşılıyor. Ön uç geliştiriciyi "çalışma tezgahından" hangi becerilerin ayırdığını bulalım (düzen tasarımcıları, alınmayın, siz de iyisiniz).

Yerleşim tasarımcısı, dar bir cephenin savaşçısıdır. Görevi, tasarımcıdan alınan düzeni HTML + CSS kullanarak dizmek. JavaScript konusunda biraz iyi olabilir, ancak çoğu zaman bir tür jQuery eklentisi ekleme yeteneği ile sınırlıdır.

Bir ön uç geliştirici yalnızca düzenler oluşturmaz. JavaScript'i iyi biliyor, çerçeveleri ve kitaplıkları anlıyor (ve bazılarını aktif olarak kullanıyor), sunucu tarafında "kaputun altında" ne olduğunu anlıyor. Önişlemcilerden ve toplayıcılardan LESS, SASS, GRUNT, GULP korkmaz, DOM, API, SVG nesneleri, AJAX ve CORS ile nasıl çalışılacağını bilir, SQL sorguları oluşturabilir ve verileri araştırabilir. UI / UX tasarımı, uyarlanabilir ve duyarlı düzen, çapraz tarayıcı ve platformlar arası ve bazen de mobil geliştirme becerilerinin ilkelerinin bir araya getirildiği birleşik bir beceriler yığını olduğu ortaya çıkıyor.

Ön uç sürüm kontrolü (Git, GitHub, CVS, vb.) İle çalışabilmeli, grafik düzenleyicileri kullanabilmeli, çeşitli CMS şablonlarıyla "oynayabilmelidir".

Ayrıca, Google çevirmeninde spesifikasyonu çevirmemek, bazen çok dilli bir ekipte çalışabilmek, web yazı tiplerini anlamak ve test edicileri ve test sürecinin kendisini anlamak için İngilizce bilmek de son derece arzu edilir.

Öyleyse, bir front-end geliştirici hangi teknolojilerde uzmanlaşmalıdır:

• HTML ve CSS (ızgaralar ve CSS çerçeveleri, W3C ve WHATWG özellikleri, HTML5 / CSS3 Polyfills dahil)
• CSS ön işlemcileri (Sass, Less, Stylus, vb.)
• JavaScript
• Popüler çerçeveler ve kitaplıklar: jQuery, Angular.JS, React.JS, Backbone.js, vb.)
• OOCSS / BEM / SMACSS
• HTML5 API
• ECMAScript 6
• Popüler CMS (WordPress, Drupal, Joomla, vb.)
• Sunucu tarafı teknolojilerini anlayın ve anlayın (Node.js, PHP, Ruby, .NET, vb.)
• Hata ayıklama araçları (Chrome Geliştirme Araçları, Firebug ve diğerleri)
• JavaScript aktarıcıları (Babel)
• Sürüm kontrol araçları (Git, GitHub, CVS, vb.)
• Veritabanları ve Sorgu Dilleri (SQL, MySql, NoSQL, MongoDB, vb.)
• Grafik düzenleyiciler (Photoshop, Illustrator vb.)

Ne anlamalısın:

• tarayıcılar arası ve platformlar arası geliştirme;
• aşamalı gelişme ve zarif bozulma;
• mobil geliştirme;
• duyarlı ve duyarlı düzen;
• web yazı tipleri;
• sEO optimizasyonunun ilkeleri.

Tabii ki, bunların hepsi ideal. Her zaman beğeninize göre bir beceri yığını seçebilir ve daha dar bir yönde geliştirebilirsiniz.

İstatistikler ne diyor

Ön uç geliştiriciler en sık hangi teknolojileri ve araçları kullanıyor? Öncelikle, JavaScript bilmeyen bir front-end geliştirici hayal etmek zor. Bu anketler tarafından onaylandı:

• stackOverflow'a göre JavaScript, ön uç araçları listesinde büyük bir farkla (% 90,5) başı çekiyor
• o "Reilly'nin 2016 sonunda Avrupalı \u200b\u200bprogramcılar üzerine yaptığı çalışma da JavaScript'i ilk sıraya koyuyor.

Sırada, en popülerleri Angular, Node.js, React olan çeşitli çerçeveler ve kitaplıklar var. Ön uç geliştiriciler, zorunlu JavaScript'e ek olarak, daha az sıklıkta da olsa diğer dilleri de kullanır. Java ve C # önde. Ve elbette, bir ön uç geliştirici CMS becerileri olmadan yapamaz. En popüler seçenek WordPress'tir.

StackOverflow verileri

En popüler enstrümanları yığınlar halinde gruplandırırsak, aşağıdaki durumu elde ederiz:

StackOverflow verileri

Tüm geliştiricilerin en popüler çerçevelerinden ve kitaplıklarından oluşan bir set aşağıdaki gibidir (resme bakın). Bu listede ön uç araçlarını görmek güzel:

StackOverflow verileri

Ön uç geliştirici kariyer yolu ve maaşı

Bir ön uç geliştiricinin kariyer yolu genellikle bir düzen tasarımcısıyla başlar - bu en mantıklı ve genel olarak kabul edilen seçenektir. Önce paket incelenir, ardından bilgi, kitaplıklar ve çerçeveler üzerinde "katmanlanır". Geleceğin uzmanı aynı zamanda sunucu tarafını oluşturmanın temel kavramlarını da inceler, seçilen uzmanlık için gerekli araçları buraya ekler. Daha sonra tüm bunlar, sürüm kontrolü, grafik editörleri ve ilkelerin anlaşılması ile çalışma yeteneği ile parlatılır.

Başka seçenekler de var. Acemi bir programcı başlangıçta hangi alanda geliştirmeyi planladığını bilirse, hiçbir şey onu parçalar halinde değil, aynı anda temel teknoloji yığınını incelemekten alıkoyamaz. Her şey, gelecekteki front-end geliştiricinin hedeflerine ve zamanlamasına bağlıdır. Çıktı akıllı bir uzman olduğu sürece herhangi bir seçenek kabul edilebilir.

Genel olarak, hazır bir ön uç geliştiricinin üç ana geliştirme seçeneği vardır:

• yatay (bir uzman olarak gelişmek, böylece işgücü piyasasındaki değerini sürekli artırmak için);
• dikey (kariyer basamaklarını büyütmek için);
• çeşitlendirme (ilgili uzmanlık alanlarında uzmanlaşmak, tam bir yığın haline gelmek ve yeniden eğitim).

PayScale hizmeti, bir ön uç geliştirici için olası tüm kariyer yollarını açıkça gösterdi:

Hangisinin seçileceği yalnızca uzmanın kendisine ve onun isteklerine / becerilerine bağlıdır.

Ön uç geliştiricilerin maaşlarıyla ilgili olarak: burada, tüm BT endüstrisinde olduğu gibi, tek bir ödeme standardı yoktur. Her şey kendini gösterme becerisine ve yeteneğine bağlıdır. Bazen şanstan :)

Rusya'da bir ön uç uzmanın ortalama maaşı, ruble / ay

Moskova'da bir ön uç uzmanın ortalama maaşı, ruble / ay

"Çevrem" e göre

Geleneksel olarak, Amerika Birleşik Devletleri'ndeki front-end geliştiricilerin yıllık maaşı, Rusya'dakinden biraz daha yüksektir. Ancak, yabancı bir şirketin şubesinde çalışıyorsanız, büyük olasılıkla böyle bir boşluk sizin için korkunç değildir.


PayScale'e göre

Nasıl front-end geliştirici olunur

Önce gül renkli gözlüğünüzü çıkarın. Öğrenme iş ve öz disiplindir. BT'ye yeni başlayanların çoğu, "Bir programcı olmak ve dolar olarak para kazanmak istiyorum, ancak bu kadar çok çalışmam gerektiğini düşünmemiştim." Programlamanın benzersizliği ve genel olarak, sürekli kendi kendine çalışmadaki herhangi bir BT uzmanlığı. Bu, BT alanının hem karmaşıklığı hem de güzelliğidir. Seni korkutmuyorsa - harika! Mükemmel bir uzman olma şansınız var.

Gelecekteki bir uzmanın ana kuralı, öğrenme sürecinde gerçekçi hedefler belirlemektir. Planlama buna yardımcı olacaktır. Öğrenmeyi planladığınız araçların bir listesini yapın ve gözünüzün önünde bulundurun.

Sıfırdan başlayanların, mükemmel PSD düzenleri düzeyinde başlamaları ve bunlarda ustalaşmaları gerekir. Bu aşamada ayrıca metin ve grafik editörleriyle nasıl çalışılacağını öğrenmeniz ve tasarımın temel ilkelerini (artı olarak) bilmeniz gerekir. Ardından JavaScript'i ele alın: sözdizimi, mimari ve dil yetenekleri. Popüler çerçeveler ve kitaplıklarda ustalaşmak, aynı zamanda sürüm kontrol sistemlerine ve bazı popüler görev çalıştırıcılara aşık olmak. CSS ön işlemcileri ve çerçeveleri ekleyin, sunucu tarafı teknolojileri anlayın. Ve sonra Bali'de bir smoothie içebilir ve edindiğiniz bilgileri süresiz olarak cilalayabilirsiniz.

Yeni başlayan bir ön uç geliştirici için zorlu bir yol.
Kendine ait olacaksın.

Bu şekilde hem tek başınıza hem de mentorlarla (üniversiteler, kurslar) gidebilirsiniz. StackOverflow'a göre en popüler geliştirici eğitim formatları şunlardır:


StackOverflow verileri

İlk sırada çevrimiçi kurslar var, ankete katılan geliştiricilerin% 64,7'si onlara oy verdi, ardından kitaplarla kendi kendine çalışma, çevrimdışı kurslar, açık kaynak geliştirme ve programlama kampları izledi. Yüksek öğrenimin (Master derecesi) neredeyse son sırada olması ilginçtir.

Çıktı

evrensel bir askerdir. Düzeni düzenleyecek, web uygulamasını oluşturacak ve gerekirse sunucu kısmına hakim olacaktır. Çok şey bilmeniz gerekir: HTML, CSS, JavaScript, JS kitaplıkları ve çerçeveleri, CSS ön işlemcileri ve çerçeveleri, sürüm kontrol sistemleri ve görev çalıştırıcıları, arka uç teknolojileri, birim testi ve çok daha fazlası.

Ek olarak, yumuşak beceriler yararlı olacaktır: insanlarla etkileşim ve ekip çalışması, etkili bir iş akışı oluşturma ve görevleri en uygun şekilde çözme yeteneği. Kendinden emin İngilizce bilgisi olmadan yapamazsın.

Bir ön uç uzmanın maaşı oldukça iyi ve daha fazla beceri - "şişman" bir maaş alma şansı o kadar yüksek.

Kendi kendine çalışmaya boyun eğmeyen herkes bir front-end geliştirici olabilir: öğrendiğimiz gibi, üniversite eğitimine güvenmek zordur. İdeal seçenek, çeşitli çevrimiçi ve çevrimdışı kurslar + konuyla ilgili literatür, uygulama ve harika Google'dır.

Netology, ön uç uzmanları için tam teşekküllü bir eğitim programı başlatıyor -. Bu, temel ön uç geliştirme teknolojilerine odaklanan 6 aylık bir kurstur: HTML ve CSS, JavaScript, Web API, AJAX, Web Soketleri, React Kitaplığı.

Kursun sonunda öğrenciler kendi tek sayfalık web uygulamalarını oluşturacaklar. Eğitim, 10 uygulamalı ön uç uzmanı tarafından yürütülür - bu, ön uç geliştirmenin araçları ve görevleri hakkında kapsamlı bir anlayışa sahip olmanızı sağlar. Tüm eğitim boyunca, öğrenciler "savaşmaya" mümkün olduğunca yakın en az 100 pratik görev alacaklar ve 3 orta ölçekli proje ve 1 tam teşekküllü projeyi tez olarak uygulayacaklar.

Kursu başarıyla tamamlayan tüm öğrenciler, yerleşik örnek için ileri eğitim sertifikası ve "Netoloji" şirket diploması alır.

Not: Bir front-end geliştirici için hangi bilgilerin hayati önem taşıdığını düşünüyorsunuz ve gerektiğinde ne öğrenilebilir?

Bu materyalde, uygulama olan sitenin istemci tarafını geliştirmeme yardımcı olacak araçların bir listesini sunmak istiyorum. Ön Uç geliştirme ile ilgili.

Ön Uç Geliştirici nedir?

Gerekli şablon oluşturulduktan sonra, stil sayfası dizgi ve çalışma zamanı gelmiştir.

CSS ile çalışmak.

CSS ile çalışmak için birçok araç, üretici vardır. Bunlardan bazıları "CSS Oluşturucuların Seçimi" bu makalede toplanmıştır.

Web sitesi: http://habrahabr.ru/post/118056

Çalışmamda sadece bir jeneratör kullanıyorum, bu Mozilla Firefox tarayıcısı için CSSsir uzantısı. Birkaç tıklamayla temel CSS özellikleri için tarayıcılar arası kod oluşturmanıza olanak tanıyan basit ve kullanımı kolay bir araç. Bu CSS3 oluşturucu yalnızca web yöneticileri ve tasarımcılar için değil, aynı zamanda sıradan kullanıcılar için de faydalı olacaktır.

Web sitesi: https://addons.mozilla.org/ru/firefox/addon/csssir

CSS Referansı

Site dinamikleri JavaScript ve jQuery ile çalışma

JQuery API ile çalışmaya yönelik hizmetler.

jQuery Kopya Kağıdı - Oscar Otero

Orijinal API belgelerine bağlantılar içeren HTML'de JQuery Hile Sayfası. Her şey bir mset içinde toplandığı için kullanışlıdır, jQuery kitaplığının sürümünü seçebilir ve hangi sürümü desteklediğini görebilirsiniz. Fonksiyonların açıklaması orijinal dokümantasyonu yeni bir pencerede açar.

Ön Uç web sayfalarının geliştiricileri, sayfanın tasarımcının düzenini tam olarak tekrar etmesini ve tüm tarayıcılarda aynı şekilde görüntülemesini sağlamaktan sorumludur. Zamanla, daha gelişmiş tarayıcıların ve daha fazla geliştirme aracının ortaya çıkmasıyla bu daha kolay hale geldi.

Herkes HTML ve CSS hakkında bilgi sahibi olsa da, daha az insan Sass ve Haml hakkında bilgi sahibidir. Ön uç geliştirme her yıl ilerlemeye devam ediyor. Bir geliştiricinin ana görevlerinden biri, her zaman en son yenilikleri takip etmektir.

Ön uç becerilerinizden biraz emin değilseniz veya sadece yeni yöntemler hakkında bilgi edinmek istiyorsanız, bu kısa makaleyi sizin için okumanızı tavsiye ederim. Her Front End geliştiricisinin kullanması veya en azından bilmesi gereken bazı popüler araçlar ve kaynaklar aşağıda verilmiştir.

CSS ön işlemcileri

Belki de en ünlü CSS ön işlemcisi: SASS, biraz da LESS'e benziyor. Bu iki kitaplık ile daha dinamik kod oluşturabilirsiniz.

"SASS" terimi hem teknolojiye hem de sözdizimine uygulanabilir. SASS dosyaları da SCSS dosyaları olabilir, aralarında özel bir fark yoktur, SCSS'nin tanıdık CSS'ye daha çok benzediği yerlerde. LESS, farklı sözdizimiyle aynı şeydir.

SASS ve LESS kendi başına diller değil, CSS'nin küçük uzantılarıdır. SASS / LESS kodu normal CSS'ye derlenir.

Sözdizimi dışında SASS ve LESS arasındaki en büyük fark, nasıl çalıştıklarıdır. SASS, Ruby kullanılarak derlenirken, LESS JavaScript (veya Node.js) kullanıyor.

CSS ön işlemesinin Terminal / CLI komutları hakkında biraz bilgi gerektirdiğini lütfen unutmayın. Uzman olmanıza gerek yok, ancak en azından temel komut satırı bilgisine sahip olmalısınız. Örneğin, SASS dosyalarını derlemenin en hızlı yolu, bir terminalde şuna benzer bir şey kullanmaktır:

sass input.scss output.css

Ancak biraz pratik yaptıktan sonra, CSS yazmanın ikinci yolu haline gelir.

CSS ön işlemcileri hakkında daha fazla bilgi edinmek için bazı kaynaklar şunlardır:

GIT (Dağıtılmış Sürüm Kontrol Sistemi)

Proje ve sürüm kontrolü için kontrol, büyük web projeleri için çok önemlidir. GitHub gibi bir topluluk, "GIT" i teknolojinin düzenli bir parçası haline getirdi.

Ama nasıl çalışıyor ve neden kullanmalısınız?

GIT, geliştiricilerin önceki çalışmaları yeniden yazmadan kod yazmalarına izin veren bir sürüm kontrol sistemidir. Bu, projenin farklı bölümlerinin arşiv olarak kaydedilebildiği bir geçişle mümkündür. GIT ile mevcut projenizi çatallamak, yeni bir seçenek eklemeyi denemek ve beğenirseniz kaydetmek veya çalışmayan şubeyi silmek mümkündür.

GIT kurulumu tüm işletim sistemlerinde oldukça esnektir. Her şeyin nasıl iletildiğini, dallandığını ve kontrol edildiğini öğreneceğiniz, yeterince kolay ayrıntılı eğitim.

Ancak bir giriş kılavuzu ve çok sayıda uygulama ile GIT yavaş yavaş Ön Uç iş akışınızın bir parçası haline gelecektir.

Olabilecek en büyük engellerden biri GIT'i komut satırı üzerinden kullanmaktır. Bu, CLI'yi zaten günlük olarak kullanan çoğu programcının tercih ettiği yöntemdir. Ancak, nasıl kullanılacağını öğrenemediyseniz, o zaman GitHub'dan bir uygulama yardımınıza gelir ve şu anda ücretsizdir.

Hala GIT öğrenmeye karar verirseniz tavsiyem, onu aceleyle değil, aşamalar halinde öğrenmenizdir. Sürüm kontrolü tamamen alışılmadık bir kavramsa cesaretiniz kırılabilir. Bu yüzden kendi hızınızda öğrenin ve pes etmeyin!

İşte temel GIT özelliklerini keşfetmek için bazı mükemmel web siteleri:

JavaScript kitaplıkları

Ön Uç geliştirme, şüphesiz tam JavaScript desteğine doğru ilerledi. Dinamik sayfa öğelerinden animasyona kadar JavaScript, her web projesinin temel araçlarından biridir.

Ancak son zamanlarda, giderek daha fazla geliştiricinin JavaScript kitaplıklarını seçtiği görülüyordu, bu da kod yazma sürecini oldukça basitleştiriyor. Bu harika çünkü kitaplıklar bazen AJAX gibi yöntemlerle etkileşimi kolaylaştıran basitleştirilmiş kavramlar içerir. Bu fenomenin olumsuz tarafında, bu kadar çok farklı kütüphaneyle nereden başlayacağınızı bilmek zor olacaktır.

İyi bir pratik kural, yalnızca neye ihtiyacınız olduğunu ve ne zaman ihtiyacınız olduğunu öğrenmektir. Eğer sadece eğlence için kod yazmayı seven biriyseniz, en iyisi sadece birkaç kitaplıkta ustalaşmaktır. jQuery, en çok kullanılan ilk beş JavaScript kitaplığından biri olduğu için muhtemelen başlamak için en iyi yerdir.

Ancak Backbone.js veya Angular.js gibi daha modern araçları da düşünmelisiniz. Her ikisi de web uygulamalarının temel JS'sini yapılandırmak için yazılmış açık kaynaklı kitaplıklardır. İnanılmaz derecede güçlüler, ancak basit bir WordPress bloguna küçük bir ek olarak hizmet edebilirler.

Bir problem arayan geliştiriciler, araçlardan birini CoffeeScript, TypeScript veya LiveScript gibi bir ön işleme dili öğrenmeyi düşünebilirler. Her üç dil de JavaScript'te bir araya getirilmiştir, ancak orijinal sözdiziminde küçük farklılıklar sunar.

JavaScript'in gerçek gücü daha yeni keşfediliyor. Node.js gibi bir araçla, sunucuya kurmak mümkün hale gelir. Ham JavaScript'in tarayıcı konsolunda çalıştırılabileceği ve Front End geliştiricilerine daha da fazla seçenek sunabileceği hatırlatılmalıdır.

İster yeni başlayan ister deneyimli bir geliştirici olun, web geliştirme konusunda tutkuluysanız her zaman JavaScript'ten öğrenecek bir şeyler vardır. Aşağıdaki kaynaklar son derece yardımcı olabilir:

HTML ön işlemcileri

CSS ön işlemcilerinin popülaritesi, HTML Ön Uç ön işlemcilerinin ortaya çıkmasına da olanak sağlamıştır. Bu, kodu yazdığınız ve normal HTML alırsanız derlediğiniz SASS / LESS ile tamamen aynı şekilde çalışır.

HTML ön işlemcileri sizi aynı kod satırlarını defalarca tekrarlamaktan ve etiketleri kapatmaktan kurtarabilir. Bu açıkça faydalı olsa da, bazen biraz ayarlama gerektirir.

Haml ve Jade, çok farklı sözdizimi stillerine sahip en popüler iki ön işlemcidir. Slim üçüncü seçenektir. Her üçü de kamu malı ve halkın desteği sayesinde her zaman gelişiyor.

Haml ve Slim Ruby'de çalışır, Haml ERB şablonlarına bir alternatiftir. Haml artık Rails geliştiricileri için harika bir araçtır. Back End kodu yazıp yazmasanız da Front End kullanıcıları için aynı derecede yararlı olabilir.

Jade, Node.js üzerinde çalışan bir şablon oluşturma motorudur. Düğüm uygulamaları için kullanmak daha iyidir veya Jade sözdizimini seven Ön Uç geliştiricileri için bağımsız bir çözüm olarak da kullanılabilir.

İkisi de birbirine oldukça benzediğinden herhangi bir yasak veya yanlış seçim yoktur. Ruby meraklıları arasındaki genel fikir birliği, Haml gelişimine bağlı kalmaktır. Ancak birçok Ön Uç geliştiricisi Jade'e yöneliyor çünkü Node.js web geliştirmede sıcak bir trend haline geldi.

Doğru, birkaç geliştirici HTML ön işlemesini bir zorunluluk olarak görmektedir. Statik HTML yazmayı tercih edebilirsiniz, ancak bazı geliştiriciler Haml / Slim / Jade'i tercih ediyor. Yani en azından sözdizimini anlayabilirseniz, size büyük bir avantaj sağlayacaktır.

Daha derine inmek için bu ayrıntılı eğitimlere göz atmanızı tavsiye ederim:

JS görev yöneticisi

Otomatik görev yöneticileri, en yeni Ön Uç araçlarıdır. Kavram ilk başta genellikle kafa karıştırıcıdır, ancak görev yöneticileri iş akışınızı önemli ölçüde geliştirebilir ve muazzam bir potansiyel sağlayabilir.

İki büyük görev yöneticisi Gulp ve Grunt'tur. Her ikisinin de JavaScript'te çalıştığını fark edeceksiniz, ancak aynı zamanda bir terminal gerektiriyorlar. Peki nasıl çalışıyor?

Gulp ve Grunt, komut satırında Node Package Manager (NPM) aracılığıyla yüklenir. Kitaplıkların kendileri, sırasıyla ayrı dosyalardan, gulpfile.js ve gruntfile.js'den JS komutları tarafından çalıştırılabilir.

Bu dosyalar, kaç görevi otomatikleştirmek istediğinize bağlı olarak çok küçük veya çok büyük olabilir. Bunun neye benzeyebileceğini görmek için bu standart Gulpfile.js'ye bir göz atın.

Bu sefer daha önce hiç böyle bir şey yapmadıysanız, muhtemelen biraz kafanız karışmıştır. Şimdilik sözdizimi için endişelenmeyin, bunun yerine bu .js dosyalarının sağladığı kavramlara ve özelliklere odaklanabilirsiniz.

Biri CoffeeScript olan SASS dosyaları, Haml, hatta JS dilleri gibi bazı görevleri otomatikleştiren JS kodu ekleyebilirsiniz. Bu bağlantıların her birinin Gulp için önceden yazılmış bir NPM paketine işaret ettiğini fark edeceksiniz. Bu, kendi SASS otomatik derleyicilerinizle aynı şeyi yazmak zorunda olmadığınız anlamına gelir, çünkü hepsi zaten yazılmıştır!

Görev yöneticisini kullanmayı öğrenmek, adım adım bir çalışma gerektirir. Kavramlar alışılmadık görünebilir ve SASS'yi öğrenmek gibi, yeni başlayanların anlaması zordur. Bununla birlikte, temelleri anladıktan ve genel olarak gelişiminizi nasıl etkilediğini gördükten sonra, eski yöntemlere geri dönmeyi düşünmezsiniz bile.

Başlamak için Gulp veya Grunt'u seçip kendinizi pratik yapmaya zorlayın.

İşte başlamanın bazı yolları:

En sonunda

Tüm bu araçlar oldukça yenidir veya son birkaç yılda çok gelişmiştir. Front End'in geliştirme dünyası, kod yazmayı kolaylaştırmak için pek çok etkileyici araç sunuyor ve umarım bu makale size bir başlangıç \u200b\u200bnoktası verir.

Web geliştirme yolculuğuma video eğitimlerini kullanarak başladım. Bununla birlikte, videolar en önemli şeyden mahrum bırakıldı - tam teşekküllü pratik. Size web geliştirmeyi öğrenmeniz için ilham vermek istiyorum ve bunun için yeni başlayan ön uç geliştiriciler için becerilerini geliştirmelerine yardımcı olacak birkaç proje oluşturdum. Umarım bu kılavuz, yeni başlayanların ön uç geliştirme hakkında bilgi edinmesine yardımcı olur.

Proje 1 - Bir Sayfa Duyarlı Düzen

Amacı: piksel mükemmel tasarımı yeniden oluşturun ve duyarlı düzen sorunlarını çözün

Web geliştirmeye hızlı bir başlangıç \u200b\u200biçin, projeye göz atın: Web Geliştirmede Hızlı Başlangıç

Proje 3 - JavaScript ile Yazılmış Küçük Bir Bilgi Yarışması Oyunu

Amacı: Basit bir JavaScript ve jQuery oyunu oluşturun.

Acemi ön uç geliştiriciler için JavaScript öğrenmenin özelliği, gücünüze göre bir proje seçmenin zor olabilmesidir. Yeni başlayan bir web programcısı için harika bir seçenek, bir sınavın geliştirilmesi olabilir. Bu, Belge Nesne Modelini anlamanıza yardımcı olacaktır. Testin zorluk seviyesi yalnızca size bağlı olacaktır. Birden çok seçilebilir soru içeren basit bir oyun oluşturarak başlayın. Verilerle çalışma hakkında çok şey öğreneceksiniz. Bu sefer yarattığınız şeyi tasarlamak için çok fazla zaman harcamayın. Oyununuzu hızlıca şekillendirmek için Bootstrap gibi bir CSS çerçevesi kullanmanızı tavsiye ederim.

Proje 4 - Açık API Kullanarak Giphy Analog Yapın

Amacı: Giphy'nin API'sini kullanan bir web uygulaması oluşturun

DOM ve JavaScript ile biraz deneyim kazandıktan sonra, veri şablonu oluşturma ve DOM eşleme hakkında bilgi edinmenizi öneririm. Hevesli ön uç geliştiriciler için harika bir hedef, Giphy API'yi kullanarak bir giphy web sitesinin bir analogunu oluşturmaktır. API'lerini öneriyorum çünkü anahtarı almakta sorun yaşamıyorlar ve istek-yanıt biçimleri orada oldukça basit. API'lerini kullanarak, aşağıdakileri yapacak küçük bir web uygulaması oluşturun:

• Bir uygulamayı yüklerken popüler gifleri görüntüleyin
• Belirli gifleri aramaya izin ver
• Daha Fazla Yükle Düğmesi Oluştur

Bu projeyi geliştirme sürecinde çok şey öğreneceksiniz. Anahtar şeylerden biri, eşzamansız isteklerle çalışmaktır. Bunun için JavaScript veya jQuery kullanabilirsiniz. Amacınız eşzamansız kod kullanmaya başlamaktır. Uygulamanız büyüdükçe ve daha karmaşık hale geldikçe, kodunuzu nasıl düzenleyeceğinizi düşünmeniz gerekir. Bunun için ad aralığı modelini kullanmanızı öneririm.

Proje 5 - Punk Bira Web Uygulaması

Amacı: Sayfadaki verileri görüntülemek için şablon oluşturmayı kullanan bir proje oluşturmak için Punk Beer API'sini kullanın. React gibi bir ön uç çerçevesi kullanmayı deneyin.

Bu projede, API ile de çalışacaksınız. Punk API, kullanmak için bir anahtar gerektirmez ve cevaplarında çok fazla bilgi sağlar.

Bu projenin düzeni birçok açıdan bir öncekinin düzenine benzer olacaktır. Yeni: "alışveriş sepeti" veya "favori ürün" işlevleri. Seçilen bir ürün listesini görüntüleme yeteneği ekleyin. Başlangıç \u200b\u200bseviyesindeki ön uç geliştiricilere çerçeveleri daha derinlemesine incelemelerini tavsiye ederim - bu, yeteneklerinizi genişletmenize ve modern web geliştirme hakkında genel bir anlayış kazanmanıza yardımcı olacaktır. Facebook'tan React ile aktif olarak çalıştığım için onunla başlamanızı tavsiye ederim. Bu ilk başta göz korkutucu bir görev gibi görünebilir, bu nedenle web uygulamanızı aşamalı olarak oluşturmaya odaklanın:

• Bir API isteğinden sayfaya veri yerleştirin
• Bir arama çubuğu ekleyin (ayrı bir API isteği aracılığıyla)
• Favori Ürün Özelliğini Ekleyin
• React yönlendiricisini bağlayın ve "favori ürünleri" görüntüleme işlevini ekleyin

Bu sorunları çözmek, web geliştirmede ciddi ilerlemeye izin verecektir. Burada da bir CSS çerçevesi kullanmanızı tavsiye ederim. Bu örnek için Bulma kullanmaya karar verdim.

İyileştirin ve yaratın

Web geliştirmede yeni başlayan biriyseniz ve kendi müfredatınızı oluşturmak istiyorsanız, bu beş proje oraya ulaşmanıza yardımcı olacaktır.

Deneyimlerime dayanarak, geliştirmeye başladığım en hızlı yolun gerçek bir projeyle karşılaştığım zaman olduğunu söyleyeceğim. Bu nedenle, bilginizi olabildiğince sık pratikte uygulamaya çalışın!

————————————————————————————————————————