Bir Ön Uç geliştirici için altı görev

1. Kredi kartı formu

Sorunsuz ve keyifli mikro etkileşimlere sahip harika bir kredi kartı şekli. Numara biçimlendirme, doğrulama ve otomatik kart türü algılamayı içerir. Vue.js üzerine inşa edilmiştir ve aynı zamanda tamamen duyarlıdır. (Görebilirsin burada.)

kredi kartı formu

Ne öğreneceksiniz:

• Formları işleme ve doğrulama
• Olayları işleme (örneğin alanlar değiştiğinde)
• Sayfadaki öğelerin, özellikle de formun üstünde görünen kredi kartı bilgilerinin nasıl görüntüleneceğini ve yerleştirileceğini öğrenin

Makale EDISON Yazılımının desteğiyle çevrilmiştir. programcıların sağlığı ve kahvaltılarıyla ilgilenirVe özel yazılım geliştirir.

2. Histogram

Histogram, kategorik verileri, temsil ettikleri değerlerle orantılı yükseklik veya uzunluklara sahip dikdörtgen çubuklarla temsil eden bir grafik veya grafiktir.

Dikey veya yatay olarak uygulanabilirler. Dikey çubuk grafiğe bazen çizgi grafik de denir.

Ne öğreneceksiniz:

• Verileri yapılandırılmış ve anlaşılır bir şekilde görüntüleyin
• Ek olarak: Öğenin nasıl kullanılacağını öğrenin canvas ve onunla elementlerin nasıl çizileceği

öyle dünya nüfusu verilerini bulabilirsiniz. Yıllara göre sıralanırlar.

3. Twitter Kalp Animasyonu

2016 yılında Twitter, tweetleri için bu muhteşem animasyonu tanıttı. 2019 itibariyle hala işe yarayacak gibi görünüyor, öyleyse neden kendiniz bir tane yaratmıyorsunuz?

Ne öğreneceksiniz:

• CSS özelliğiyle çalışma keyframes
• HTML öğelerini değiştirin ve canlandırın
• JavaScript, HTML ve CSS'yi birleştirin

4. Arama fonksiyonlu GitHub depoları

Burada süslü bir şey yok; GitHub depoları yalnızca yüceltilmiş bir listedir.
Amaç, depoları görüntülemek ve kullanıcının bunları filtrelemesine izin vermektir. Kullanmak resmi GitHub API'si her kullanıcı için depolar almak için.

GitHub profil sayfası - github.com/indreklasn

Ne öğreneceksiniz:

• API'den veri al
• API'den verileri görüntüle
• Her arama için alakalı verileri filtreleyin ve gösterin
• İsteğe bağlı: Eğer bir meydan okumaya hazırsanız, şunu kullanın: API v4GraphQL kullanılarak oluşturuldu. GraphQL öğrenmek istiyorsanız önceki makalelerimden birine gidin.

5. Reddit tarzı sohbetler

Sohbetler basitliği ve kullanım kolaylığı nedeniyle popüler bir iletişim yoludur. Peki modern sohbet odalarını gerçekten besleyen şey nedir? WebSocket'ler!

Ne öğreneceksiniz:

• WebSockets'i, gerçek zamanlı iletişimi ve veri güncellemelerini kullanın
• Kullanıcı erişim düzeyleriyle çalışın (örneğin, bir sohbet kanalının sahibi şu role sahiptir: adminve odadaki diğerleri - user)
• Formları işleyin ve doğrulayın - unutmayın, mesaj göndermek için kullanılan sohbet penceresi input
• Farklı sohbetler oluşturun ve katılın
• Kişisel mesajlarla çalışın. Kullanıcılar diğer kullanıcılarla özel olarak sohbet edebilir. Temel olarak iki kullanıcı arasında bir WebSocket bağlantısı kuracaksınız.

6. Şerit tarzı gezinme

Bu gezinmeyi benzersiz kılan şey, açılır kapsayıcının içeriğe uyacak şekilde dönüşmesidir. Yeni bir açılır pencereyi açıp kapamanın geleneksel davranışıyla karşılaştırıldığında bu geçişte bir zarafet var.

Ne öğreneceksiniz:

• CSS animasyonlarını geçişlerle birleştirin
• İçeriği karartın ve kayan öğeye aktif sınıfı uygulayın

Önce kendiniz yapmayı deneyin, ancak yardıma ihtiyacınız olursa buna göz atın adım adım rehber.

Kaynak: habr.com