Ses taskoj por Front-End-programisto

1. Kreditkarta formo

Moŝta kreditkarta formo kun glataj kaj ĝuaj mikro-interagoj. Inkluzivas nombroformatadon, konfirmon kaj aŭtomatan kartspecan detekton. Ĝi estas konstruita sur Vue.js kaj ankaŭ estas plene respondema. (Vi povas vidi tie.)

kreditkarto-formo

Kion vi lernos:

• Procesi kaj validigi formojn
• Pritraktu eventojn (ekzemple kiam kampoj ŝanĝiĝas)
• Komprenu kiel montri kaj meti elementojn sur la paĝon, precipe la kreditkartajn informojn, kiuj aperas supre de la formularo

La artikolo estis tradukita kun la subteno de EDISON Software, kiu prizorgas la sanon de programistoj kaj ilian matenmanĝonKaj disvolvas laŭmendan programaron.

2. Histogramo

Histogramo estas diagramo aŭ grafeo, kiu reprezentas kategoriajn datumojn per rektangulaj stangoj kun altecoj aŭ longoj proporciaj al la valoroj, kiujn ili reprezentas.

Ili povas esti aplikataj vertikale aŭ horizontale. Vertikala bardiagramo foje estas nomita linia diagramo.

Kion vi lernos:

• Montru datumojn en strukturita kaj komprenebla maniero
• Aldone: Lernu kiel uzi la elementon canvas kaj kiel desegni elementojn per ĝi

estas vi povas trovi mondloĝantajn datumojn. Ili estas ordigitaj laŭ jaro.

3. Twitter Kora Animacio

Reen en 2016, Twitter enkondukis ĉi tiun mirindan animacion por siaj tweets. Ekde 2019, ĝi ankoraŭ aspektas, do kial ne krei unu mem?

Kion vi lernos:

• Laboru kun CSS-atributo keyframes
• Manipulu kaj animu HTML-elementojn
• Kombinu JavaScript, HTML kaj CSS

4. GitHub-deponejoj kun serĉfunkcio

Estas nenio fantazia ĉi tie—GitHub-deponejoj estas nur glorata listo.
La celo estas montri la deponejojn kaj permesi al la uzanto filtri ilin. Uzu oficiala GitHub API por akiri deponejojn por ĉiu uzanto.

GitHub profilpaĝo - github.com/indreklasn

Kion vi lernos:

• Ricevu datumojn de API
• Montru datumojn de API
• Filtru kaj montru koncernajn datumojn por ĉiu serĉo
• Laŭvola: Se vi pretas defion, uzu API v4, konstruita uzante GraphQL. Se vi volas lerni GraphQL, iru al unu el miaj antaŭaj artikoloj.

5. Reddit-stilaj babilejoj

Babilejoj estas populara maniero de komunikado pro sia simpleco kaj facileco de uzo. Sed kio vere nutras modernajn babilejojn? WebSockets!

Kion vi lernos:

• Uzu WebSockets, realtempan komunikadon kaj datumajn ĝisdatigojn
• Laboru kun uzantaj alirniveloj (ekzemple, la posedanto de babilkanalo havas la rolon admin, kaj aliaj en la ĉambro - user)
• Prilaboru kaj validigu formularojn - memoru, la babilfenestro por sendi mesaĝon estas input
• Kreu kaj aliĝu al malsamaj babilejoj
• Laboru kun personaj mesaĝoj. Uzantoj povas private babili kun aliaj uzantoj. Esence, vi establos WebSocket-konekton inter du uzantoj.

6. Strio-stila navigado

Kio faras ĉi tiun navigadon unika estas, ke la popover-ujo transformiĝas por konveni al la enhavo. Estas eleganteco al ĉi tiu transiro kompare kun la tradicia konduto malfermi kaj fermi novan popover.

Kion vi lernos:

• Kombinu CSS-animaciojn kun transiroj
• Malfortigu enhavon kaj apliku aktivan klason al flosita elemento

Provu unue fari ĝin mem, sed se vi bezonas helpon, kontrolu ĉi tion paŝo post paŝo gvidilo.

fonto: www.habr.com