Tækjasettið fyrir vefsíðuhönnun, 2. hluti

Höfundur: Randy Alexander
Sköpunardag: 25 April. 2021
Uppfærsludagsetning: 16 Maint. 2024
Anonim
Tækjasettið fyrir vefsíðuhönnun, 2. hluti - Skapandi
Tækjasettið fyrir vefsíðuhönnun, 2. hluti - Skapandi

Efni.

Í síðasta mánuði fjölluðum við um tækjabúnað að framan frá toppi til botns - en það er ennþá nóg að læra. Stundum eru stærstu sársaukapunktar framhliðshönnuðanna á jaðri vinnuflæðisins.

Það eru litlu hlutirnir sem koma upp í gegnum líf verkefnis sem geta verið erfiðastir. Þessi grein mun kanna þessa sársaukapunkta og íhuga hvernig hægt er að nota nútíma tölvu- og framhliðatæki til að draga úr þeim.

Framleiðni

Hefur þú einhvern tíma hugsað: „Allt sem ég þyrfti er einn klukkutími í viðbót á dag og ég gæti gert svo miklu meira“? Það er freistandi að hugsa til þess að bæta við aukatímum með því að gera okkur töffari og frelsa okkur til að gera það sem við elskum. Jæja, þú ert heppinn - fella nokkrar framleiðni járnsög í vinnuflæði þitt sem framhlið verktaki, og þú gætir fengið þá auka klukkustund eftir allt saman.

Í grunninn snýst framleiðni í raun um það að vera latur ... góða laturinn. Þekkir þú skammstöfunina DRY? Það stendur fyrir Don't Repeat Yourself og það er máltæki sem þú ættir að taka til þín. Þegar þú greinir ferlin þín finnurðu líklega mörg svæði þar sem þú gætir hagrætt vinnuflæðinu þínu og eytt minni tíma í að snúa hjólunum þínum.


Taktu stjórn á stjórnlínunni

Við höfum séð mikið af kvakum nýlega um hvort framendahönnuður ætti að læra að nota skipanalínuna eða ekki. Svar okkar er: „Alveg já“. Jú, þú getur verið hæfileikaríkur vefstarfsmaður og aldrei sprungið Terminal, en við teljum að þú sért að missa af miklum framleiðniaukningu.

Byrjaðu á því að læra grunnleiðsöguskipanir: geisladiskur, ls og pwd. Þaðan geturðu byrjað að læra að vinna með skrár, setja verktakapakka og keyra uppbyggingarkerfi. Ef þú ert rétt að byrja skaltu prófa linuxcommand.org. Til að fá enn mildari byrjun líkar okkur við grein John W. Long, leiðbeiningar hönnuðar um OSX skipanaboð. Þegar þú ert tilbúinn til að fara dýpra gætirðu haft gaman af greininni okkar um Sparkbox Foundry: stjórnlínutæki fyrir Frontend verktaki.

Hættu að smella svo mikið

Notkun músarinnar getur verið þunglamaleg. Jú, stundum er það bara besta leiðin til að fletta viðmóti, en fyrir dagleg verkefni getur það virkilega hægt þig. Hér eru nokkur af uppáhaldsforritunum okkar til að fara frá músinni og í átt að lyklaborðinu:


Alfred er ókeypis Mac forrit sem gefur þér ótrúlegan kraft í lyklaborðinu til aðgerða eins og að ræsa forrit, finna skrár og jafnvel keyra sérsniðin handrit eða vinnuflæði. Besta ráðið sem við getum boðið til að auka framleiðni þína er að fara og hlaða niður Alfred núna. Eða ef þú ert á Windows vél gætirðu prófað Launchy.

Dash er annað af þessum forritum sem við getum varla ímyndað okkur að vinna án. Það veitir þér aðgang án nettengingar að kóða skjölum. Þó það hljómi kannski ekki eins mikið, þá er það hverrar krónu virði. Dash byggir að öllu leyti á lyklaborðsskipunum og það er hratt hratt. Við höfum aldrei haft svo gaman af vafrakóða.

En hér er besti hlutinn: Dash hefur yndislegt vinnuflæði fyrir Alfreð sem gerir þér kleift að leita tafarlaust í kóða skjöl hvar sem er á vélinni þinni. Leitaðu að Alfred vinnuflæðinu í Preferences> Samþættingarrúðu Dash.


Verkfæri til að meðhöndla texta

Ef þér klæjar í enn meiri framleiðni forrit eru hér nokkur af uppáhalds tækjunum okkar til að takast á við texta:

  • Markdown gerir þér kleift að skrifa fljótt merkingargögn sem hægt er að safna saman í HTML.
  • nvAlt er rispallur og geymsla fyrir skrif þín. Það felur í sér stuðning við Markdown, frábæra flýtilykla og getu til að leita hratt í öllum glósunum þínum.
  • TextExpander býr til bókasafn með stuttum leitarorðum sem stækka í lengri orð eða orðasambönd. Við notum það fyrir verkefni eins og að slá inn netfangið okkar og netföng, kóðabút og allar setningar sem við notum mikið.

Staðbundnir netþjónar

Að ýta á breytingar á ytri netþjóni oft á dag skapar mikinn sársauka. Að vinna á staðnum styttir tímabundið á milli þess að breyta kóðanum þínum og sjá breytinguna endurspeglast í vafranum þínum, þannig að þú getir endurtekið fljótt og gert tilraunir mun frjálsari.

Það eru nokkrir hugbúnaðarpakkar sem hjálpa til við að setja upp þróunarumhverfi á staðnum mun einfaldara. Eitt af persónulegu eftirlæti okkar er Anvil, Mac forrit sem situr í matseðlinum þínum. Það gefur þér staðbundinn netþjón og falleg .dev lén.

Það eru líka fullkomnari verkfæri sem veita netþjón og gagnagrunn hugbúnað til að keyra CMS og forrit. MAMP og WampServer eru tveir slíkir pakkar. Þessir pakkar eru fáanlegir fyrir Mac og Windows hver um sig og bjóða upp á fullkomið Apache, MySQL og PHP umhverfi. Ef þér líkar að hafa meiri stjórn á staðbundnum netþjónastillingum þínum, geturðu rúlla þínu eigin umhverfi með því að setja Apache, MySQL og PHP frá uppruna, sem gerir þér kleift að spegla framleiðsluumhverfi á vélinni þinni.

Frábær viðbót sem við notum í Grunt ferlinu okkar er grunt-contrib-connect. Þetta tappi spinnur upp grunn HTTP netþjóna og gerir endurhlaðningu á síðunum þínum kleift. Sætt!

Ein ný nálgun er að nota sýndarvél (VM) til að klóna stillingar framleiðsluþjónsins þíns við staðbundnu vélina þína. Þjónusta eins og Docker og Vagrant veita leiðir til að ná þessu fram. Báðir pakkarnir veita þér textaskiptar skrár sem áreiðanlega og fyrirsjáanlega spinna upp VMS-samsvörunarviðmið sem þú tilgreinir og gera þér kleift að athuga þær stillingar í útgáfustýringarkerfinu þínu. Þessar lausnir krefjast lengri uppsetningartíma en geta veitt endanlega reynslu af þróun sveitarfélaga.

Að vinna á staðnum gæti þurft skipulagsbreytingu eða tímabundið skref aftur á bak í skilvirkni meðan þú færð öll verk sett upp á staðnum, en að lokum er það þess virði.

Prófun vafra og tækja

Manstu þá daga þegar þú þurftir að prófa JavaScript með því að skrifa áminningar?

viðvörun („JavaScript er hlaðið!“);

Vonandi er þetta ekki fyrsta stoppið þitt fyrir kembiforrit JavaScript þessa dagana, en það minnir okkur á tíma þegar verkfæri til að prófa kóðann í vafra var forn og óvinveitt.

Árið 2006 kom Firebug út. Tól til að kemba vafra voru til fyrir þann tíma, en Firebug batt verkfærin saman og gerði verulegar endurbætur á þeim. Næsta ár sendi Microsoft tækjastiku forritara sem er samhæft við IE6 og IE7. Að lokum, árið 2009, sendi Microsoft IE8 með verktaki sem er innbyggt.

Eins og þú sérð höfum við í raun ekki haft framúrskarandi kembiforrit tól í svo langan tíma. Það er auðvelt að gleyma hversu gott við höfum það núna.

Vafrinn sem hönnunartól

Vafrinn þinn er hönnunartæki. Það er ekki eitthvað sem þú heyrir á hverjum degi, er það? Við erum þó farin að hugsa þannig. Nútíma vafrar okkar eru búnir með svo háþróaðri verktaki verkfæri að þeir eru ekki lengur síðasti viðkomustaður í þróunarferli okkar. Þess í stað eru þeir farnir að verða einn af þeim fyrstu.

Mörg okkar hófu sókn okkar á vefinn með hefðbundinni grafískri hönnun. Auðvitað nálguðumst við vefinn eins og við nálguðumst auglýsingar: byrjuðum á því að hanna röð af kyrrstæðum hátíðni mockups sem viðskiptavinir okkar gætu skoðað.

Með tímanum erum við hins vegar farin að átta okkur á því að vinna á þann hátt bætir bara ekki vökva, fljótt breytta eðli vefsins. Og með háþróað verkfæri sem veitir okkur fínkornaða stjórn á störfum okkar, einmitt þarna í vöfrum okkar, eigum við fáar afsakanir eftir til að byrja ekki að vinna á nýjan hátt.

Nota verktaki verkfæri

Fyrstu hlutirnir fyrst: skoðaðu uppruna vefsíðu þinnar. Við elskum DevTools Chrome og því munum við einbeita okkur að Chrome hér. Flestar þessar meginreglur eiga við um alla vafra, þó að hugtakanotkunin geti verið aðeins mismunandi. Á Mac skaltu lemja Cmd + Alt + I til að opna þróunarverkfæri vafrans og skoða uppruna. Þú getur líka hægrismellt á hvaða þátt sem er á vefsíðunni þinni og síðan valið Skoðaðu frumefni að opna eftirlitsmanninn og einbeita sér að þeim þætti.

Þegar þú hefur opnað skoðunarmanninn þinn verður þú kvaddur með vingjarnlega Element flipanum. Þetta sýnir uppbyggingu HTML síðu þinnar og gerir þér kleift að kanna og breyta DOM. Vissir þú að þú getur dregið DOM-þætti um, breytt þeim með því að hægrismella og eytt þeim með því að ýta á þinn Eyða lykill? Þetta er farið að líða eins og hönnunartæki!

Rétt undir flipanum Elements finnurðu Styles gluggan. CSS sem á við DOM-hnútinn sem þú valdir núna mun birtast í þessari rúðu. Hér er þó besti hlutinn: þú getur breytt þessum stílum í rauntíma, ekki ólíkt því sem þú myndir gera í hönnunartóli, eyða gömlum stíl eða bæta við nýjum. Í verktækjatólum Chrome er gott að vita að þú getur valið CSS gildi og notaðu síðan upp og niður örvatakkana með afbrigðum af Shift og Alt til að gera stigbreytingar á tölugildum.

Við elskum að nota skipulag þar sem eftirlitsmaðurinn situr til hægri í vafranum. Þetta gerir þér kleift að stækka og draga saman eftirlitsrúðuna, sem sveigir vefsíðuna þína til að prófa móttækilega hönnun. Flestir vafrar bjóða upp á valmyndaratriði til að skipta um þessa skoðun.

Grafa dýpra

Það er margt fleira sem þarf að skoða í þróunarverkfærum Chrome. Eyddu tíma í að fikta í Resources flipanum, Console flipanum til að kemba JavaScript og Úttektar spjaldið til að ná tökum á árangri vefsvæðisins. Við mælum með því að lesa Chrome DevTools skjölin og horfa á framúrskarandi ókeypis námskeið CodeSchool.

Sjálfvirk dreifing

Að draga og sleppa, afrita og líma handvirkt eða velja og færa skrár handvirkt er ekki frábær leið til að dreifa verkefninu þínu. Hvað ef þú gleymir einni falinni skrá sem geymir forritabreyturnar þínar? Eða ef einhver annar þarf að sinna dreifingunni? Munu þeir vita hvað þeir eiga að gera? Tólin sem við höfum rætt hingað til gera verkefni verktaki endurtekin, fyrirsjáanleg og geyma þau í heimildastýringu. Við getum og ættum að nálgast útfærslur með sömu hugsjónum.

Það eru nokkrar þjónustur, eins og Beanstalk, FTPloy og Deploy sem gera þér kleift að dreifa frá heimildarstýringargeymslu til fjarstýringar. Þetta virkar frábærlega fyrir einfaldar dreifingar. Við höfum hins vegar komist að því að við þurfum meiri stjórn og meiri virkni í dreifingunni.

Við höfum notað opna heimildarverkefnin Capistrano og Mina til að gera sjálfkrafa dreifingu okkar. Þessi verkefni eru svipuð í virkni sinni, með nokkrum léttvægum mun. Í grunninn eru verkefni þeirra skrifuð í Ruby og senda þjóninum Bash handrit sem búið er til úr Ruby verkefnunum. Þú getur litið á þá sem forvinnsluaðila fyrir Bash.

Skipulagsforrit eins og Capistrano og Mina munu dreifa forritum eins og Capistrano og Mina munu nota SSH (Secure Shell, venjuleg örugg aðferð fyrir fjarskráningar) til að fá aðgang að netþjóninum þínum og git-klóna verkefnið þitt. Þegar forritið einræktir verkefnið, heldur það áfram að framkvæma hvað sem handritaðgerðir hafa verið skrifaðar í uppsetningarskránni. Sjálfvirk dreifing útrýma sársauka sem við höfum öll fundið fyrir þegar handvirkt er dregið og sleppt skrám á FTP netþjón - láttu tölvuna vinna þetta mikla starf fyrir þig.

Við skulum pakka þessu saman

Stærsti lærdómurinn til að taka frá rannsókn okkar á framhliðartækjum er að þú ættir ekki að vera hræddur við að skoða. Það er engin þörf á að tileinka sér öll tæki í einu. Þegar þú lendir í verkjapunktum skaltu taka smá stund og reyna að útfæra tignarlegri lausn. Veistu ekki tignarlegri lausn? Gerðu nokkrar rannsóknir. Og eins og þú lærir, vertu viss um að deila niðurstöðum þínum með hinum samfélaginu.

Orð: Adam Simpson og Neil Renicker

Þessi grein birtist upphaflega í netblaði 256.

Greinar Fyrir Þig
Tryggja öryggi eigu þinnar á netinu með VPN
Lestu Meira

Tryggja öryggi eigu þinnar á netinu með VPN

em li tamaður eða hönnuður er ekkert dýrmætara fyrir þig en eigna afnið þitt á netinu. Allar upprunalegu hönnun og verkin þín tók...
Búðu til netpönkpersónu í Photoshop
Lestu Meira

Búðu til netpönkpersónu í Photoshop

Fyrir þe a vinnu tofu mun ég fara með tigin til að búa til li taverk fyrir kortaleiki - í þe u tilfelli, per ónan Noi e for Android: Netrunner, framleidd af Fan...
Hreyfiaðgerð: 42 dæmi sem þú verður að sjá
Lestu Meira

Hreyfiaðgerð: 42 dæmi sem þú verður að sjá

Kinetic leturfræði er til í mörgum myndum. köpunin er hátíð fyrir augun, hvort em það er virðing fyrir frægri kvikmyndaræðu eð...