Tartalom
- 01. Listák
- 02. Indítópult
- 09. szebb
- 11. Húzható
- 13. Scrollama
- 14. Vivaldi
- 18. Sablon
- 19. Csomag
- 20. Bootstrap 4
Az internet rendkívül gyorsan változik, és megbocsátják, ha nem lépést tart az új webdesign eszközök és technológiák folyamatos megjelenésével. A legfrissebb fejleményekkel való feljutásnak azonban vannak előnyei, nem pedig arra várni, hogy a mainstreamgé váljanak. Valószínű, hogy ha van olyan probléma, amely frusztrált, vagy valami, amit úgy gondoltál, hogy könnyebbé teheted, akkor valaki megoldást fog találni rá. Csak a rendelkezésre álló frontend keretrendszerek számának növekedését kell szemlélnie a választási szint bizonyítékaként.
- 10 lépés egy vonzó felhasználói élmény eléréséhez
Ez a változás üteme és választási tartománya az internet minden területére érvényes. Ebben a cikkben megnézzük a legújabb tervezőeszközöket (beleértve a weboldalkészítő eszközöket), a fejlesztőeszközöket, a könyvtárakat és a keretrendszereket (itt tekintheti meg webtárhely-választásainkat). Felhasználási esettől függően előfordulhat, hogy nem akarja túl élvonalba lépni (különösen a könyvtárak és a keretrendszerek esetében, tekintettel esetenként rövid élettartamukra). De végső soron a legjobb dolog az, ha elmennek és kísérletezünk. És ne feledje, hogy a felhőalapú tárolás elengedhetetlen eszköz, bármilyen projektbe belekezd.
01. Listák
Ha oldalakat tervez, és belefáradt abba, hogy mindenhova helyezze a Lorem Ipsumot, akkor a listák éppen arra lehetnek szüksége, amire szüksége van. Jelenleg a bétaverzióban a Lists mindenféle reális adatgyűjtemény, amelyet felhasználhat a makettek feltöltésére. Szeretne egy listát az oldalon használandó brit címekről, vagy hamis hitelkártyaszámokat? Mindkét dolog elérhető. A listák a különféle adattípusok széles skáláját ölelik fel, és mindegyikhez letöltheti az adatokat JSON formátumban, valamint segíthet a felhasználóknak az oldalon belüli kontextus megértésében a prototípusok értékelésekor. A Listák mögött álló csapat meghívást küld a GitHub szolgáltatásba, ha új adattípusai vannak, amelyeket úgy gondolja, hogy hozzá kell adni.
02. Indítópult
A szolgáltató dolgozók az internet legizgalmasabb új technológiái közé tartoznak. Lehetővé teszik a modern webalkalmazások számára, hogy az erőforrásokat helyben tárolják, és offline funkciókat biztosítsanak. Ha azonban megpróbált velük dolgozni, akkor hamar rájön, hogy a gyorsítótárak megfelelő karbantartása összetett probléma. Itt jön be a Workbox.
A Workbox egy olyan összeállítási eszköz és könyvtár, amely megkönnyíti a Service Workers létrehozását, és ezáltal az offline alkalmazások készítését. Egyszerűbben megmondva, hogy mely erőforrásokat kívánja gyorsítótárba helyezni, és ez generálja az erőforrások gyorsítótárazásához és frissítéséhez szükséges szolgáltatói kódot. Amint elkezd összetettebb, offline funkciókkal rendelkező oldalakat építeni, ez az absztrakció valószínűleg sokkal könnyebbé teszi az életét.
09. szebb
Biztosítani akarja, hogy az adaptív webdesignra fordított összes erőfeszítés megtérült, igaz? A Sizzy-t úgy tervezték, hogy segítsen ebben. Web vagy böngésző beépülő modul formájában érkezik, és egymás mellett megmutatja az oldal interaktív nézetét, amelyet számos különböző eszközméreten nyújtanak.
Ezen felül megjelenítheti és elrejtheti a szimulált eszköz billentyűzetét, és átválthat álló és fekvő mód között.
A funkcionalitást helyben is használhatja a fejlesztőkiszolgálóval úgy, hogy megadja neki egy localhost URL-t, így nem kell élesben tennie webhelyét, hogy a Sizzy kipróbálja. Valószínűleg ez a leggyorsabb és legátfogóbb módja annak, hogy tesztelje oldalát számos különböző méretű képernyőn.
11. Húzható
A társalgási felületek, vagy a csevegőrobotok népszerűsége felrobbant az elmúlt években. Gondolhatja, hogy egy bot felépítése meglehetősen összetett vállalkozás egy egyoldalas alkalmazás összeállításához képest, de nem kell annak lennie.
A Bottender egy JavaScript keretrendszer a Node.js-en futó, több platformon futó botok építéséhez, és támogatja olyan népszerű üzenetküldő platformokat, mint a Facebook Messenger, a Telegram és a Slack. Tesztelés céljából megkönnyíti a bot futtatását a konzolon. A Bottender számára még nagyon korai napok vannak, de ezt szemmel kell tartani, mivel ez a fajta projekt számos lehetőséget nyit olyan interfészek felépítésére, amelyek egyébként elérhetetlenek lettek volna.
13. Scrollama
Valószínűleg látott néhány lenyűgöző példát az interaktív történetmesélés görgetésére (ha még nem ismeri ezt, akkor nézze meg a The Boat-ot). Ez egy vonzó módszer az online történet elmesélésére, a böngésző natív funkcióinak használatával.
Mégis nem feltétlenül egyszerű megvalósítani, mivel a görgetési események kezelése finoman és teljesítményproblémákat jelenthet. A Scrollama segítséget nyújt. Az IntersectionObserver alkalmazást használja, amely ugyan viszonylag új, de a korábbi megoldásoknál jobban teljesít annak felismerésére, hogy egy objektum látható-e az oldalon. A Scrollama számos példával illusztrálja, hogy mit tehet, és ha nem igazán tetszik ez a módszer, akkor a GitHub oldala alternatívákat kínál.
14. Vivaldi
A legnépszerűbb frontend keretrendszereket gyakori kritika a kód felfújása és a kezdeti oldalbetöltési teljesítménybüntetés jelenti. A Svelte hasonló absztrakciókat kínál az alkatrészvezérelt alkalmazások egyszerű elkészítéséhez, de a Java-t generálja a készítéskor, ami alacsonyabb lábnyomot és gyorsabb megjelenítést eredményez.
A Sapper ennél egy lépéssel tovább megy, és lehetővé teszi Svelte komponensekből álló univerzális webalkalmazások építését. Gondoskodni fog a szerver- és az ügyféloldali megjelenítés, az offline támogatás és még sok minden más összetettségéről.
18. Sablon
Mostanra valószínűleg már sokat hallott a webkomponensekről. A Google Polymer projektje valószínűleg a legismertebb keretrendszer a webkomponensek felépítéséhez, amely a böngésző támogatásának többszörös kitöltését és hasznos absztrakciót kínál a kezdéshez.
A Stencil ugyanakkor alternatív módot kínál a webkomponensek létrehozására. A csapat által az Ionic keretrendszer mögé épített Stencil segítségével gyorsan létrehozhat egyedi HTML elemeket, az összes szükséges funkcióval együtt. Mivel webkomponens-szabványokat használ, alkotásai nincsenek egy adott kerethez kötve. A Stencil különösen vonzó lehet azok számára, akik ismerik a React-et, mivel sok befolyást igényel tőle.
19. Csomag
A Webpack valószínűleg a vezető modulcsomagoló a JavaScript környezetben. Ha még nem ismeri, akkor lényegében az eszközeit és a modulfüggőségeket veszi fel, és statikus, telepíthető fájlokba csomagolja őket. A csomag viszonylag új, és ugyanaz a célja, de más megközelítést alkalmaz.
Konfiguráció nélkül futtatható, és megvizsgálja a kódot a függőségek azonosítása érdekében. Emellett többmagos támogatást is kínál; A Webpack nem, vagyis az építések lényegesen gyorsabban futhatnak. A csomag képes kezelni az előkezelést is, például a Babel vagy a Sass segítségével.
Egy dolog azonban az, hogy a legnépszerűbb frontend keretrendszerek online legtöbb információja feltételezi, hogy egyelőre a Webpack-ot használja. Ha a Parcel felszáll, ez a jövőben változhat.
20. Bootstrap 4
A mai napig a Bootstrap marad a legnépszerűbb frontend komponens könyvtár, és lehetővé teszi, hogy pillanatok alatt remekül kinéző, érzékeny felhasználói felületeket építsen. Maga a Bootstrap nem biztos, hogy új, de a stabil 4-es verzió januárban leesett, és számos új funkciót és változást hozott. A Bootstrap 4 magában foglalja a LASS helyett a Sass előnyben részesítését, a pixelek helyett a relatív egységeket, a rácsok számára egy új Flexbox elrendezést és még sok minden mást. Érdemes megjegyezni azt is, hogy mostanra csökkent az IE8 és az IE9 támogatása, ami a legtöbb ember számára nem okozhat problémát.
Lehet, hogy a Bootstrap-ot olyan keretrendszerrel használja, mint az Angular vagy a React, és jó hír az, hogy bár a 4-es verzió stabil kiadása meglehetősen új, már rendelkezésre állnak modulok, amelyek integrálják ezeket az ökoszisztémákat.
Webdesign eseményGenerálja Londonotvisszatér 2018. szeptember 19-21-én, csomagolt ütemtervet kínálva az iparág vezető előadóinak, egész napos műhelyfoglalkozásokkal és értékes hálózati lehetőségekkel - ne hagyja ki.Most szerezze be Generate jegyét.
Ez a cikk eredetileg a Web Designer magazinban jelent meg. Iratkozz fel most.
