Hat feladat egy Front-End fejlesztő számára

1. Hitelkártya űrlap

Menő hitelkártya-forma sima és élvezetes mikro-interakciókkal. Tartalmazza a számformázást, az ellenőrzést és az automatikus kártyatípus felismerést. A Vue.js-re épül, és teljesen reszponzív. (Láthatod itt.)

hitelkártya-űrlap

Amit meg fogsz tanulni:

• Űrlapok feldolgozása és érvényesítése
• Események kezelése (például amikor a mezők megváltoznak)
• Ismerje meg, hogyan jeleníthet meg és helyezhet el elemeket az oldalon, különösen az űrlap tetején megjelenő hitelkártyaadatokat

A cikk az EDISON Software támogatásával készült, amely gondoskodik a programozók egészségéről és a reggelijükrőlÉs egyedi szoftvereket fejleszt.

2. Hisztogram

A hisztogram egy diagram vagy grafikon, amely kategorikus adatokat ábrázol téglalap alakú oszlopokkal, amelyek magassága vagy hossza arányos az általuk képviselt értékekkel.

Alkalmazhatók függőlegesen vagy vízszintesen. A függőleges oszlopdiagramot néha vonaldiagramnak is nevezik.

Amit meg fogsz tanulni:

• Az adatokat strukturáltan és érthetően jelenítse meg
• Ezenkívül: Ismerje meg az elem használatát canvas és hogyan rajzoljunk vele elemeket

Itt megtalálhatja a világ népességének adatait. Évek szerint vannak rendezve.

3. Twitter szív animáció

Még 2016-ban a Twitter bemutatta ezt a csodálatos animációt a tweetjeihez. 2019-ben még mindig úgy néz ki, mint az alkatrész, miért ne készíthetne egyet saját maga?

Amit meg fogsz tanulni:

• CSS attribútum használata keyframes
• HTML-elemek manipulálása és animálása
• Kombinálja a JavaScriptet, a HTML-t és a CSS-t

4. GitHub adattárak keresési funkcióval

Nincs itt semmi különös – a GitHub adattárak csak egy megdicsőült lista.
A cél az, hogy megjelenítse a tárolókat, és lehetővé tegye a felhasználó számára a szűrést. Használat hivatalos GitHub API hogy minden felhasználó számára tárolókat kapjon.

GitHub profiloldal - github.com/indreklasn

Amit meg fogsz tanulni:

• Adatok fogadása az API-tól
• Adatok megjelenítése az API-ból
• Szűrje és jelenítse meg a releváns adatokat minden kereséshez
• Választható: Ha készen áll egy kihívásra, használja API v4, GraphQL használatával készült. Ha meg akarja tanulni a GraphQL-t, lépjen az egyik korábbi cikkemre.

5. Reddit stílusú csevegés

A csevegés egyszerűségük és könnyű használatuk miatt népszerű kommunikációs mód. De valójában mi táplálja a modern chatszobákat? WebSockets!

Amit meg fogsz tanulni:

• Használja a WebSocketeket, a valós idejű kommunikációt és az adatfrissítéseket
• Dolgozzon felhasználói hozzáférési szintekkel (például egy csevegési csatorna tulajdonosának van szerepe adminés mások a szobában - user)
• Űrlapok feldolgozása és érvényesítése – ne feledje, hogy az üzenet küldésére szolgáló chat ablak az input
• Hozzon létre és csatlakozzon különböző csevegésekhez
• Dolgozzon személyes üzenetekkel. A felhasználók privát csevegést folytathatnak más felhasználókkal. Lényegében WebSocket kapcsolatot hoz létre két felhasználó között.

6. Csíkos navigáció

Ami ezt a navigációt egyedivé teszi, az az, hogy a felugró tároló átalakul a tartalomhoz. Van egy eleganciája ennek az átmenetnek az új popover megnyitásának és bezárásának hagyományos viselkedéséhez képest.

Amit meg fogsz tanulni:

• Kombinálja a CSS-animációkat átmenetekkel
• A tartalom halványítása és az aktív osztály alkalmazása a lebegtetett elemre

Először próbálja meg saját maga, de ha segítségre van szüksége, nézze meg ezt lépésről lépésre útmutató.

Forrás: will.com