Sadržaj
- 01. Tlocrtno zemljište
- 02. basicScroll
- 03. Xray
- 04. Laboratorij za skladatelje
- 05. PWABuilder
- 06. Ljepše
- 07. Googleov indeks brzine indeksa
- 08. Gatsby
- 09. CSS gradijent
- 10. Preljev
Ako se osjećate svladani količinom učenja koja je potrebna da biste danas išli u korak s novim web tehnologijama, dobra vijest je da postoji mnogo ljudi koji grade nevjerojatne alate koji će vam pomoći. Ovaj mjesec u našem najboljem alati za web dizajn ukratko pregledamo resurse za izgradnju i održavanje progresivnih web aplikacija, statičkih web stranica, sustava dizajna i još mnogo toga.
01. Tlocrtno zemljište
Ovaj fantastični YouTube kanal dizajnerice i zagovornice programera Mozilla Jen Simmons podučava vas vrlo pametnim i zanimljivim stvarima koje možete učiniti s izgledom na webu. Ovi vodiči dat će vam čvrstu osnovu za upotrebu Flexboxa, mreže, CSS oblika i putanje isječka u svojim dizajnom, vodeći vas korisnim primjerima izgleda.
Naučit ćete o osnovnim konceptima, kao što su kada koristiti Grid i kada odabrati Flexbox, kako postići da stvari funkcioniraju s Internet Explorerom i kako napisati elastični CSS za koji je manja vjerojatnost da će vas u budućnosti spotaknuti. Da biste saznali što možete očekivati, pogledajte Simmonsov članak o razrešenim mitovima o web rasporedu.
02. basicScroll
Nedostatak varijabli u CSS-u već je dugo vremena frustrira za programere, ali napokon su stigli i pomoću njih možete puno olakšati svoj život i raditi cool stvari! basicScroll je pametan alat koji koristi CSS varijable kako bi vam omogućio pokretanje animacija na temelju položaja pomicanja.
Kao i prilagođena svojstva CSS-a, basicScroll zahtijeva requestAnimationFrame raditi, ali osim toga, neovisan je o okviru i ima jednostavan JavaScript API. Svu animaciju možete raditi s CSS-om, ali ako želite još veću kontrolu možete koristiti JavaScript. Djeluje i na stolnim i na mobilnim uređajima i obećava "sulude" performanse.
03. Xray
Obožavatelji Atoma možda žele pripaziti na ovaj projekt, koji je eksperimentalni uređivač teksta zasnovan na onome što je naučeno od Atoma od njegovog pokretanja. U osnovi je to način eksperimentiranja s nekim radikalnim idejama bez destabilizacije Atoma. Cilj projekta je razviti brzi uređivač koda koji korisnicima olakšava zajedničko kodiranje i dodavanje vlastite funkcionalnosti programu putem moćnih API-ja. Web kompatibilnost je također prioritet, pa će uređivanje u Xrayu biti slično uređivanju u GitHubu.
04. Laboratorij za skladatelje
Sada kada mnoge organizacije koriste sustave dizajna kao sredstvo za koherentan razvoj svojih proizvoda, logično je da se pojavljuju alati koji će vam pomoći da radite u tom okviru. Compositor Lab jedan je od takvih alata: služi za izgradnju i održavanje sustava dizajna.
Lab vam omogućuje stvaranje React komponenata spremnih za proizvodnju bez pisanja koda, ubrzavanje radnog procesa i olakšavanje predaje posla između dizajnera i programera. Svoj rad možete izvesti u razne formate i jednim klikom objaviti svoj vodič za stil.
05. PWABuilder
Progresivne web aplikacije odgovor su weba na izvorne mobilne aplikacije - one pokušavaju preslikati iskustvo izvorne aplikacije, ali na webu. To znači da su prvi na mreži, pouzdani, brzi i jednostavni za upotrebu kao izvorna aplikacija. Ako želite izraditi Progresivnu web aplikaciju koristeći podatke sa postojeće web stranice, imate sreće: PWABuilder znatno olakšava postupak.
Unesite URL i to će vam pomoći da generirate manifest, izgradite uslužnog radnika i objavite gotovu aplikaciju. Ako ne znate puno o progresivnim web aplikacijama, ovaj je članak dobar priručnik.
06. Ljepše
Održavanje stvari urednim može se činiti dodatnim teretom, ali buduće će vam se zahvaliti što ste napisali dobro oblikovan kôd koji je lakši za navigaciju i održavanje - kao i vaše kolege! Prettier je zamišljeni program za oblikovanje koda koji se integrira s mnogim urednicima, uključujući Atom i Sublime Text, te mnogim jezicima.
Prednost korištenja alata za to je u tome što je automatiziran, pa vam je puno jednostavniji, a također i što se radi na standardiziran način, tako da ima manje mjesta za dosadne rasprave o načinu oblikovanja stvari. Samo pritisnite Spremi i to će formatirati vaš kôd.
07. Googleov indeks brzine indeksa
Svi znamo da spora web lokacija za mobilne uređaje znači manje konverzija, ali ovaj kalkulator pomaže vam da na nju stavite broj. Unesite svoj URL i tablica rezultata brzine utvrđuje kako se vaša web lokacija uspoređuje s učinkom konkurencije, a zatim vam kalkulator učinka prihoda govori koliko vas košta vaša spora web lokacija.
Ti brojevi mogu biti korisni u pridavanju težine vašim argumentima kada namećete davanje prioriteta izvedbi web mjesta. Na ovoj se stranici nalaze i izvrsne upute o mogućnostima ubrzavanja.
08. Gatsby
Gatsby je statički generator web stranica za React koji vam pomaže u izgradnji brzih, sigurnih web stranica pomoću moderne web tehnologije. Statičke datoteke puno je jednostavnije za instaliranje, pa je puno lakše prilagoditi web lokaciju - a i puno je brže. Unos podataka na vašu web lokaciju jednostavan je zahvaljujući sjajnom ekosustavu dodataka koji vam omogućuje da povlačite podatke iz CMS-a, API-ja, baza podataka i još više pomoću GraphQL-a. Gatsby web stranice su progresivne web aplikacije, što znači da se učitavaju samo kritični podaci kako bi vaša web stranica bila što brže ispred vaših korisnika.
09. CSS gradijent
Zašto koristiti kôd za izgradnju CSS gradijenata kada to ne morate? Nema smisla ponovno otkrivati kotač; za obavljanje posla možete koristiti i alat zasnovan na webu. CSS Gradient je jednostavna aplikacija koja pruža lijepo sučelje za stvaranje CSS gradijenata - odaberite jedan od pet stilova gradijenta i prilagodite klizače dok ne dobijete ono što vam treba. Kôd se pojavljuje ispod, spreman za kopiranje i lijepljenje na vaše web mjesto.
10. Preljev
Preljev su stvorili ljudi koji stoje iza Proto.io-a jer su željeli napraviti nešto kako bi pomogli u procesu kritike dizajna. Otkrili su da je uobičajena metoda prezentacije dizajnerskog rada izostavljala važan element; priča o dizajnu i obrazloženje dizajnera iza odluka koje su donijeli.
Otkrili su da su korisnički tokovi: dijagrami tokova koji pokazuju kako će se korisnik kretati oko sučelja.Ali do sada nije postojao alat dizajniran posebno za stvaranje korisničkih tokova, pa ih je bilo teško uključiti u tijek rada. Preljev je namijenjen zadovoljenju te potrebe. Izgleda uzbudljivo i sada se možete prijaviti za rani pristup. Ovaj post na blogu detaljnije objašnjava kako vam protoci korisnika mogu pomoći.
