Front-End хөгжүүлэгчийн зургаан даалгавар

1. Зээлийн картын маягт

Гөлгөр, тааламжтай бичил харилцан үйлчлэл бүхий гайхалтай зээлийн картын хэлбэр. Дугаар форматлах, баталгаажуулах, картын төрлийг автоматаар илрүүлэх зэрэг орно. Энэ нь Vue.js дээр бүтээгдсэн бөгөөд бүрэн хариу үйлдэл үзүүлдэг. (Та харж болно энд.)

зээлийн картын маягт

Та юу сурах вэ:

• Маягтыг боловсруулж, баталгаажуулах
• Үйл явдлыг зохицуулах (жишээ нь талбар өөрчлөгдөх үед)
• Хуудасны элементүүдийг, ялангуяа маягтын дээд талд гарч буй зээлийн картын мэдээллийг хэрхэн харуулах, байрлуулах талаар ойлгох

Нийтлэлийг EDISON програм хангамжийн дэмжлэгтэйгээр орчуулсан програмистуудын эрүүл мэнд, өглөөний цайнд санаа тавьдагТэгээд захиалгат програм хангамжийг боловсруулдаг.

2. Гистограм

Гистограмм нь тэдгээрийн илэрхийлж буй утгуудтай пропорциональ өндөр эсвэл урттай тэгш өнцөгт баар бүхий категори өгөгдлийг харуулсан диаграмм эсвэл график юм.

Тэдгээрийг босоо болон хэвтээ байдлаар хэрэглэж болно. Босоо баганан диаграммыг заримдаа шугаман диаграм гэж нэрлэдэг.

Та юу сурах вэ:

• Өгөгдлийг бүтэцтэй, ойлгомжтой байдлаар харуулах
• Нэмэлт: Элементийг хэрхэн ашиглах талаар суралц canvas түүгээр хэрхэн элементүүдийг зурах вэ

энд Та дэлхийн хүн амын мэдээллийг олж болно. Тэдгээрийг жилээр нь ангилдаг.

3. Twitter Heart Animation

2016 онд Твиттер жиргээнүүддээ зориулж энэхүү гайхалтай хөдөлгөөнт дүрсийг нэвтрүүлсэн. 2019 оны байдлаар энэ хэсэг хэвээр байгаа тул яагаад өөрөө нэгийг бүтээж болохгүй гэж?

Та юу сурах вэ:

• CSS атрибуттай ажиллах keyframes
• HTML элементүүдийг удирдах, хөдөлгөөн хийх
• JavaScript, HTML болон CSS-ийг нэгтгэх

4. Хайлтын функцтэй GitHub репозиторууд

Энд ямар ч гоё зүйл байхгүй—GitHub репозиторууд бол зүгээр л алдаршуулсан жагсаалт юм.
Зорилго нь хадгалах газрыг харуулах, хэрэглэгчдэд тэдгээрийг шүүх боломжийг олгох явдал юм. Ашиглах албан ёсны GitHub API хэрэглэгч бүрт хадгалах сан авах.

GitHub профайл хуудас - github.com/indreklasn

Та юу сурах вэ:

• API-аас өгөгдөл хүлээн авах
• API-аас өгөгдлийг харуулах
• Хайлт бүрт холбогдох өгөгдлийг шүүж, харуул
• Сонголт: Хэрэв та сорилтод бэлэн байгаа бол ашиглаарай API v4, GraphQL ашиглан бүтээгдсэн. Хэрэв та GraphQL сурахыг хүсвэл миний өмнөх нийтлэлүүдийн аль нэгийг үзээрэй.

5. Reddit маягийн чат

Чат бол энгийн, хэрэглэхэд хялбар байдгаараа түгээмэл хэрэглэгддэг харилцааны арга юм. Гэхдээ орчин үеийн чат өрөөг юу дэмждэг вэ? WebSockets!

Та юу сурах вэ:

• WebSockets, бодит цагийн харилцаа холбоо, өгөгдлийн шинэчлэлтүүдийг ашиглана уу
• Хэрэглэгчийн хандалтын түвшинтэй ажиллах (жишээлбэл, чатын сувгийн эзэмшигч үүрэг гүйцэтгэдэг admin, болон өрөөнд байгаа бусад хүмүүс - user)
• Маягтыг боловсруулах, баталгаажуулах - мессеж илгээх чатын цонх гэдгийг санаарай input
• Өөр чат үүсгэж, нэгдээрэй
• Хувийн мессежтэй ажиллах. Хэрэглэгчид бусад хэрэглэгчидтэй нууцаар чатлах боломжтой. Үндсэндээ та хоёр хэрэглэгчийн хооронд WebSocket холболт үүсгэх болно.

6. Судалч хэлбэрийн навигаци

Энэ навигацийг өвөрмөц болгодог зүйл нь поповер контейнер нь агуулгад нийцүүлэн хувиргадаг явдал юм. Шинэ поповер нээх, хаах уламжлалт зан үйлтэй харьцуулахад энэ шилжилтийн дэгжин байдал бий.

Та юу сурах вэ:

• CSS хөдөлгөөнт дүрсийг шилжилттэй хослуулах
• Агуулгыг бүдгэрүүлж, хөвөгч элементэд идэвхтэй класс хэрэглээрэй

Эхлээд өөрөө хийж үзээрэй, гэхдээ танд тусламж хэрэгтэй бол үүнийг шалгаарай алхам алхмаар зааварчилгаа.

Эх сурвалж: www.habr.com