Hoʻomohala FrontEnd: CodePen a i ʻole Text Sublime?

CodePen a i ʻole kahakaha kiʻekiʻe?
CodePen a i ʻole Kekuhi Kiʻi? Inā mākou e kamaʻilio e pili ana i ka hoʻolālā pūnaewele, hiki koke mai ka inoa o HTML, CSS a me JavaScript iā mākou. Nui a hewahewa nā ala e hiki ai i laila. ʻOiai, inā wehe mākou i kahi leka hoʻomaopopo hiki iā mākou ke hana i ke kākau ʻana i ka "html". He ʻoiaʻiʻo e ʻike i ka hopena o kāu e hoʻolālā nei mai kahi pad, pono ʻoe i kahi kaʻina hana e ʻike i ka holomua.

ʻO kēia mau pūnaewele nā ​​kahua pāʻani nui no nā mea hoʻomohala o nā noi no nā mea hoʻohana o ka lā. E aʻo hou aʻe e pili ana i nā maikaʻi a me nā maikaʻi ʻole o kēia mau papahana, e nānā hohonu mākou iā lākou i kēia ʻatikala (ma ka liʻiliʻi, nā mea āpau a mākou e ʻike ai). E like me kaʻu e ʻōlelo mau nei, ʻoiaʻiʻo ua ʻike hou kekahi o ʻoukou i ke kumuhana. Inā pēlā, e ʻōlelo i nā mea āpau e pakele ai iā mākou ma aneʻi. E hauʻoli mākou e kūkākūkā!

I kēia lā e kālailai mākou iā CodePen, JSBin, Plunkr, sublime, CSSDeck, Dabblet, a me LiveWeave. ʻO nā mea i kaulana a me nā pono hana e hoʻohana ʻia i kēia kaiapuni. Nui aʻe nā mea, ʻoiaʻiʻo.

Akā no ʻoukou āpau e ʻike ʻole i ka FrontEnd a i ʻole BackEnd e pili ana, e wehewehe iki kākou. ʻO ka Front-End a i ʻole ke kikowaena ka ʻāpana ʻike i hiki i ka mea hoʻohana hoʻokele ke ʻike ma ka pūnaewele. ʻO ka BackEnd kahi ʻāpana a ka luna hoʻomalu pūnaewele e kaohi ai. I ka hoʻolālā ʻana, inā ʻoe e hoʻokomo i ke code ma o kahi mea hana e hōʻike i ka hopena i ka manawa like, e kapa ʻia kēia ma mua-hopena.

CodePen

No nā mea hana ʻoi loa loa o nā mea a pau a mākou e kamaʻilio ai. Hoʻohana ʻia ma ke ʻano he pono hana pūnaewele ʻo ia ka mea kokoke loa i kahi kaiāulu e hōʻike i kāu hana. ʻAno o Youtube mai ka programmer. I kēia, hiki iā ʻoe ke ʻike i nā hana o nā programmer e pili nei me ka pūnaewele a hoʻopili iā lākou inā he hoihoi kāu, e ʻike i kā lākou pili, e ukali iā lākou ma nā pūnaewele a e kau inoa i kā lākou kahawai e ʻike i kā lākou papahana e hiki mai ana.

Hōʻike o ka ʻike, kākoʻo a me nā pōkole pōkole keyboard

ʻO ka hōʻike CodePen ka mea hoihoi loaNo ka mea me kahi mau kaomi wale, hiki iā ʻoe ke hana ma o ke kaʻina hana koke. Me nā laina kaawale loa o ka html, css a me ka javascript. Ma waho aʻe o ka ʻaoʻao ʻike, hiki iā ʻoe ke komo i luna a i lalo e ʻike maopopo ai i kou holomua. Pēlā e kōkua nei e hoʻokaʻawale maikaʻi i kēlā me kēia ʻōlelo. Kekahi mea i hele mai i mākaukau no nā polokalamu hou.

Kou kākoʻo pūnaewele, hanau hou i ka wā āu e makemake ai e hoʻomaka e hoʻohana i kahi mea a mākou i ʻike maopopo ʻole ai. ʻAʻole ia he manaʻo he ʻoi aku ka maikaʻi iā ʻoe, pili ia i nā makemake a mākou e loaʻa ai. Akā, ʻae, e ʻike i ke kaiapuni ma mua iki o ka hoʻohiki ʻana e hoʻouka i kekahi mea ma ka kamepiula o ke kumu "ʻike ʻole".

Inā ʻo ʻoe kekahi o ka poʻe maʻa i ka hoʻohana casi loa keyboard oe ke hana, CodePen e kupanaha nou. Pono nā pono hana ʻē aʻe plugins hiki ke hoʻohana i nā pōkole pōkole e hoʻopiha i ke kaiapuni. ʻO kēia ka mea e hōʻoluʻolu iki ai i ka hana (ʻoiai e like me ka hopena o ka hoʻouka ʻana). CP. hoʻohui i ke ʻano he ʻōnaehana e hoʻopiha ai iā ʻoe i nā lālani like o ke code i hana hou ʻia, no ka mea hiki i kahi papa inoa. Kākau ʻoe pehea ʻoe e makemake ai e hōʻike i ka papa inoa a kaomi iā Tab.

Hāʻawi ka mana Pro i nā koho he nui aku no ke kumukūʻai o € 9,00 no ka pūʻolo maʻamau i € 29,25 no ka pūʻulu "Super". Hiki ke hoʻohou i nā hāmeʻa like i ka mea a mākou e hana ai i hoʻokahi. Eia kekahi ʻano hana kōkua, kahi "ʻano kumu", etc. Pono inā makemake ʻoe ma aneʻi.

JSBin

ʻO JSBin kahi mea hana i hiki iā mākou ke kūpono ma ke ʻano pololei. ʻOiai hele ʻoe i kāu pūnaewele, e mākaukau ia e hoʻomaka i ke kiʻi ʻana i kāu papahana aʻe, me ka hoʻokaʻulua ʻole. A ʻoiai ʻaʻole maikaʻi loa kāna hoʻokū mua ʻana, ʻoluʻolu ia.

Maʻalahi ʻo JSBin, me ka hanana kumu i haku ʻia i ka html i mea e hoʻonele ʻole ai i ka manawa, e komo waena ʻoe ma waena o nā ʻōlelo ʻokoʻa e hoʻopau i ka hana. ʻO ka mea mua he HTML, a laila CSS, Javascript a ʻo ka hope kāu hana ʻike. A ʻoiai he mea ʻoi aku ka paʻakikī, e loaʻa iā ʻoe nā ʻano pōkole me ke kau ʻole ʻana i kekahi mea. Pono mai ka polokalamu kele pūnaewele.

Eia naʻe, ua loaʻa iaʻu he mea hōʻoluʻolu ʻole ke ʻike pololei ʻana i ke code, ke hūnā ʻia ia ma muli o nā kolamu o hope. ʻOiai, me ka pona, pono ʻoe e hāʻawi a i ʻole iho me ka trackpad a ʻaʻole kahe loa.

ʻElua wale nō ʻāpana ona, manuahi a uku ʻia paha. ʻOi aku ka pipiʻi o kēia ma mua o CodePen, ʻoiai inā ʻoe e uku iā ia i kēlā me kēia makahiki, ʻoi aku ka maikaʻi, inā hiki iā ʻoe ke uku iā 120 €.

CSSDeck

CSSDeck
Ke ʻano hana o CSSDeck ʻokoʻa ia mai ka mea i ʻike ʻia ma luna. Māhele ʻia i ʻelua mau kolamu wale nō, kiʻina ʻike-code, hana ʻo CSSDeck me nā lālani 3 i lalo e hoʻokaʻawale ai i nā ʻano ʻōlelo like ʻole. Me kahi hōʻike i ke ʻano o kahi pūnaewele kaiaulu a me kahi ʻoihana hoʻomaʻemaʻe i ke kala māmā. Me he mea hana maʻalahi lā. ʻOiai ʻo kekahi manawa, ʻaʻole ia he manaʻo maikaʻi ʻole.

Me ka kanaono tausani mau mea hoʻohana i hoʻopaʻa inoa ʻia a ʻoi aku ma mua o ʻelua haneli me kanalima tausani mau papahana i hana ʻia, ʻimi ʻole a paʻakikī ʻole ka mea āu e makemake ai. ʻO ka ʻōlelo e like me nā manawa mau, inā hiki ke lilo i mea hōʻeha no ka poʻe ʻike ʻole i ka ʻōlelo Pelekania, akā i kēia pili pūnaewele He mea nui ke kiʻi, no laila ʻaʻole wau i manaʻo he pilikia nui kēia.

ʻO Plunkr

ʻO Plunkr ʻo ia ka mea hana ʻoluʻolu liʻiliʻi loa aʻu i ʻike ai i kēia manawa. Hoʻopili ʻia ka hōʻike i nā leka a me ka ʻole o nā kiʻi. Lohi ka hoʻouka ʻana i nā ʻike a maikaʻi ʻole i ka nānā mua ʻana. Hoʻohui ʻia, ke hoʻonohonoho ʻana ma ka lā e hana i kekahi papahana, ʻaʻohe mea maʻalahi, hiki i ke kūlana mua. No ka ʻike ʻana i kahi mea hoihoi hou aku ʻoe e hele i ka ʻaoʻao e ʻōlelo ana: «loa Viewed«. ʻO ia, inā ʻaʻole ʻoe i unuhi ia me Google ma mua.

E ʻōlelo pū e like me ka pūnaewele, aia lākou i ka mana 1.0.0. No laila ke wehewehe iki nei kēia e pili ana i ka hoʻolālā, ka hōʻike a me nā hemahema hiki ke loaʻa iā ʻoe i ka nānā ʻana i ka pūnaewele.

Ma ke ʻano he pōmaikaʻi, inā pau kāu mau manaʻo, ʻaʻole ʻoe e haʻalele a wehe i kahi ʻaoʻao ʻē aʻe i Plunkr, ʻoiai pololei mai ka ʻaoʻao ʻaoʻao ʻākau hiki iā ʻoe ke hele wāwae me nā papahana ʻē aʻe a ʻike koke iā lākou. E maʻalahi kēia iā ʻoe e hōʻiliʻili i nā manaʻo wikiwiki a hoʻopili iā lākou i kāu papahana i ka manawa like.

ʻO Dabblet

ʻO Dabblet he mea hana maʻalahi, hele ʻoe i loko a hana. ʻOiai hiki iā ʻoe ke hoʻopaʻa inoa a loaʻa i kāu inoa inoa ma o GitHub, ʻaʻole ia he mea e kū nui i ka pūnaewele. Me ke kāʻei kua i ka gradient melemele, i ka ʻāpana ʻike a me ke kua keʻokeʻo i ka ʻāpana code (e like me ka maʻamau), hōʻike ʻia ka papahana Dabblet, ʻoiai hiki iā ʻoe ke hoʻololi iā ia mai ka CSS tab. Noʻu, ʻoi aku ka maikaʻi o ka hakahaka ʻana, ʻoiai he gradient kēlā gradient āpau ola a

Ke hoʻoponopono nei ʻoe, hiki iā ʻoe ke hoʻonohonoho i nā ʻaoʻao āu e ʻike ai maʻalahi ʻOiai makemake ʻoe e hoʻololi i nā kolamu a i nā lālani paha no ka ʻike hōʻoluʻolu e like me ke kanaka e hoʻoponopono nei. Ke hoʻololi nei i ka nui o ka momona, mālama ʻana ma ke ʻano inoa ʻole me ke kau inoa ʻole a me ka hōʻoia ʻole ʻana i ka code HTML ʻoi aku ka nui o nā manawa a Dabblet e hāʻawi ai i ka nānā mua. ʻOiai ʻaʻole ia ʻo ke koho mua aʻu e koho ai, e noʻonoʻo paha ia i nā mana e hiki mai ana inā hōʻano hou ʻia lākou.

ʻO kekahi o nā mea aʻu i makemake ai i ka mea liʻiliʻi loa, akā makemake paha kēlā mau mea programme nui, ʻo ia kēlā ʻaʻohe ou koho e tabulate i kahi lepili a e kākau iā ʻoe iho. ʻO ia, e hoʻokomo i ka HTML a kaomi i ka ʻaoʻao a kākau "html" a me "/ html" me ke koho. Kekahi mea i loko o nā noi ʻē aʻe inā hana ʻia.

LiveWeave

liveweave
LiveWeave He like loa ia me nā poʻe ʻē aʻe, ʻaʻohe mea i hiki ʻole i nā poʻe ʻē aʻe ke hāʻawi e pili ana i ka pono. ʻO ka mea a mākou e hoʻomālamalama ai e pili ana i kēia papahana ʻo ia kona hoʻolālā, kahi kala ʻeleʻele e like me CodePen akā me ka hoʻokaʻawale ʻāpana. Hiki ke hoʻololi i ka nui ʻono. Aia kekahi ʻano maopopo a me ka «mai ka laina« kahi o ka pāʻālua āu e hoʻoponopono ai ʻaʻole e hōʻike ʻia i ka ʻike, a hiki i ka hoʻoulu ʻana iā ia. ʻAʻole ia kahi hiʻohiʻona aʻu e ʻike pono ai, ma ke ʻano he mea hoʻolālā, he mea nui ia e ʻike mau i nā mea āu e hoʻoponopono ai i ka manawa maoli, akā e ʻike kekahi i kekahi hoʻohana no ka ʻoiaʻiʻo. A ʻoiai, e like me ka mau, hiki iā ʻoe ke hoʻopaʻa inoa, ʻaʻohe kuleana o ka mea hoʻohana. No ka mea, inā ʻaʻole ʻoe e hoʻopaʻa inoa, hiki iā ʻoe ke mālama i kāu papahana.

Māhele 'Ano

ʻO kēia mea hana He ʻokoʻa loa ia mai nā mea āu i ʻike ai i kēia manawa ma ke kālailai. ʻAʻole ka Sublime Text ma ke ʻano he kumuwaiwai, akā ma ke ʻano he noi. Ma ka ʻaoʻao hoʻokahi, ʻoi aku ka maikaʻi o ka loaʻa ʻana ma ka ʻoneki. ʻOi loa ma muli o ka hiki ʻana o nā pūnaewele i hāʻule a i ʻole kūpikipiki paha no ka nui a me ka nalo ʻana o ka hana. Ma ka lima ʻē aʻe, ʻaʻole ia he mea ʻike i kahi mea hana e like me nā mea ma mua. Ma waho o ka hiki ʻole o kahi kaiāulu e kaʻana like i nā papahana.

Eia mai nā mea āpau nā mea āpau. Pono ʻoe e hana i nā ʻāpana e kau i nā laina o ke code a hoʻololi hou i ka inoa e ʻike i kahi. Inā he HTML ka mea mua, ʻo ka CSS ʻelua ... a i ʻole ʻokoʻa versa. ʻAʻohe ona pōkole no ke ʻano manuale piha, koe wale no nā ʻōlelo puanaʻī.

ka hopena

Kūlike like nā papahana āpau me kekahi ʻano pilikino o kēlā me kēia hui e alakaʻi ai i ka loaʻa o nā pōmaikaʻi a me nā hōʻino ʻole i loko o lākou E koho kēlā me kēia i kahi e kūpono iā lākou, ʻO kaʻu ʻōlelo e hoʻohana ai iā CodePen a i ʻole CSSDeck no ke kaiapuni a me ka ʻoihana pūnaewele e lawelawe ai. Akā, inā makemake ʻoe i kekahi hou aʻe, waiho i kahi manaʻo a wehewehe i kāu mau kumu, pono nō lākou.


Hoʻopili ka ʻike o ka ʻatikala i kā mākou kumumanaʻo o ka hoʻoponopono hoʻoponopono. E hōʻike i kahi kaomi hemahema ʻaneʻi.

E lilo i mea mua e wehewehe

E waiho i kāu manaʻo

Kāu leka uila aae? E,ʻaʻole e paʻiʻia. i hāliu aku i koi 'ia kula *

*

*

  1. He kuleana no ka ʻikepili: Miguel Ángel Gatón
  2. Ke kumu o ka ʻikepili: kaohi SPAM, hoʻokele ʻōlelo.
  3. Legitimation: Kou ʻae
  4. Ka kamaʻilio ʻana o ka ʻikepili: ʻaʻole e hōʻike ʻia ka ʻikepili i nā ʻaoʻao ʻekolu koe ka mana o ke kānāwai.
  5. Pūnaewele mālama: Pūnaewele i mālama ʻia e Occentus Networks (EU)
  6. Nā Kuleana: I kēlā me kēia manawa hiki iā ʻoe ke palena, hoʻōla a kāpae i kāu ʻike.