CSS-Doodle

ʻO CSS-Doodle kahi mea punaewele ikaika e hiki ai i nā mea hoʻomohala a me nā mea hoʻolālā ke hoʻohua i nā hiʻohiʻona hiʻohiʻona kamahaʻo a me nā kiʻi generative me ka hoʻohana ʻana i ka syntax CSS maʻemaʻe i loko o kahi mea HTML maʻamau. Inā ʻoe e kūkulu nei i nā ʻaoʻao pae ʻāina noʻonoʻo, nā kāʻei hoʻohālikelike, a i ʻole nā hiʻohiʻona ʻikepili ikaika, hoʻololi ʻo CSS-Doodle i ke ala e hoʻokokoke ai nā hui i nā kahe hana hoʻolālā mua.

He aha ka CSS-Doodle a pehea e hana ai?

ʻO CSS-Doodle kahi waihona JavaScript kumu wehe i hana ʻia e Yuan Chuan e hoʻokomo ana i kahi mea HTML maʻamau — — i kāu papahana pūnaewele. I loko o kēia mea, kākau ʻoe i nā lula e like me CSS i wehewehe ʻia e ka hale waihona puke e hana i kahi mākia o nā cell, hiki ke hoʻolālikelike ʻia kēlā me kēia me ka hoʻohana ʻana i ka syntax koho kūikawā a me nā hana randomization.

Ke hana nei ka mīkini kumu ma o ka ʻōnaehana mākia DOM. Ke loaʻa ka polokalamu kele pūnaewele i kahi mea , hoʻokaʻawale ka waihona i ka wahi i koho ʻia i loko o kahi mākia hoʻonohonoho o nā cell a hoʻohana i kāu mau lula CSS ma kēlā me kēia cell i ka mākia. ʻO ka mea kupaianaha, ʻo ia ke kākoʻo i kūkulu ʻia no nā hana pseudo-random e like me @r(), @p(), a me @pick(), e ʻae ai i nā cell e loaʻa i nā waiwai kūʻokoʻa me ka laina ʻole o JavaScript mai ka ʻaoʻao o ka mea hoʻomohala.

Maikaʻi ka paipu unuhi: e hoʻokaʻawale i ka maʻiʻo CSS i loko, e hana i ke aniani DOM grid, e helu i nā ʻanoʻano maʻamau, e hoʻokomo i nā ʻano helu i kēlā me kēia cell, a pena i ka hopena hope. Hoʻomaka koke nā mea hou — e kāhea i ke ʻano update() a e hoʻololi koke ʻia kahi hoʻololi hou, e hoʻolilo iā CSS-Doodle i mea kūpono no nā ʻōnaehana hoʻolālā pāʻani a me nā animated.

He aha nā ʻāpana kumu e hana ʻokoʻa ai ka CSS-Doodle?

ʻO ka hoʻomaopopo ʻana i ka hoʻolālā ʻana o CSS-Doodle, ʻo ia hoʻi ka ʻike ʻana i ʻekolu papa i hoʻohui ʻia e hana pū ana e hana i nā mea hoʻohua:

• Pūnaewele Kikowaena: Wehewehe ʻia ma o ke ʻano grid, hoʻomalu kēia i nā lālani a me nā kolamu (e laʻa, grid="10x10"), e hoʻoholo ana i ka nui o nā cell a ka doodle e hāʻawi ai a pehea e puʻunaue ʻia ai lākou ma kahi ākea.
• Nā Koho Kūikawā: Hoʻolauna ʻo CSS-Doodle i nā mea koho e like me :nth-of-type() extensions, @nth, a me @row/@col e kuhikuhi ana i nā pūnaewele ma ke kūlana i loko o ka mākia no ke kāhili pololei a me ka lula.
• Nā Hana Hoʻokaʻawale: ʻO nā hana i kūkulu ʻia e like me @r(min, max) no nā pae helu a me @pick(a, b, c) no nā papa helu waiwai e hiki ke hoʻokō ʻia nā kumu hana hoʻohou hou ʻole i loko o kekahi mau laina code.
• Kakoʻo Animation a me Transition: No ka mea, hoʻopuka ʻo CSS-Doodle i ka CSS maoli, e hana ana nā ʻoniʻoni CSS maoli āpau, nā kīʻaha kī, nā hoʻololi, a me nā waiwai maʻamau me ka ʻole o ka hoʻololi ʻana, e hiki ai i ka wai, nā haku mele ʻike maka.
• Pūnaewele hoʻololi: ʻO nā waiwai maʻamau CSS a me ka hana @var() e ʻae i nā mea hoʻolālā e hoʻohālikelike i nā doodle, e hana ana i ka manaʻo kumuhana a i ʻole nā mea hoʻohana i hoʻonohonoho ʻia me ka hoʻoikaika liʻiliʻi.

ʻO kēia hui pū ʻana o kahi scaffold mānoanoa i hoʻomalu ʻia me ka hoʻoheheʻe ʻia ʻana o kēlā me kēia cell ka mea e hoʻokaʻawale ai i ka CSS-Doodle mai nā mea hana SVG maʻamau a i ʻole nā ​​mea paahana canvas - he haʻiʻōlelo, semantic, a me ke kaila piha ma o ka mea paahana CSS maʻamau.

Pehea ka CSS-Doodle e hoʻohālikelike ai me nā ʻano hana hoʻolālā ʻē aʻe?

Ke hilinaʻi maʻamau i ka HTML5 Canvas API a i ʻole SVG no ka hoʻohana ʻana i nā kiʻi kuʻuna ma nā polokalamu kele pūnaewele ma o ka JavaScript frameworks. ʻOiai ikaika, koi kēia mau ala i ka ʻike JavaScript koʻikoʻi, imperative rendering loops, a me ka hoʻokele mokuʻāina manual. Hoʻokaʻawale ʻo CSS-Doodle i kēlā mau mea a pau ma ka noho ʻana i loko o nā ʻōlelo hoʻohālike i ʻike mua ʻia e nā mea hoʻolālā.

Hoʻohālikelike ʻia me nā hale waihona puke ʻo Canvas e like me p5.js, ʻoi aku ka maʻalahi o CSS-Doodle no ka hoʻohana ʻana i nā hiʻohiʻona hiʻohiʻona, ʻaʻole koi i ka loop loop, a hana i nā mea DOM i hiki ke ʻike ʻia a nānā ʻia. E kūʻē i nā mea hana SVG, lanakila ʻo CSS-Doodle ma ka ʻike mea hoʻomohala no nā hui CSS ʻōiwi, ʻoiai ua lanakila ʻo SVG ma ka hoʻokuʻu ʻana i ka pono a me nā hana ala paʻakikī.

"Ke hōʻike nei ʻo CSS-Doodle ʻaʻole ʻo nā mea hana hoʻomohala ikaika loa i nā manawa a pau - i kekahi manawa ke kaohi ʻana iā ʻoe iho i kahi mea hoʻokahi a ʻo ka syntax declarative ka wehe ʻana i ka noʻonoʻo ʻoi aku ma mua o ke kāwele hāmama."

No nā hui e hana ana i loko o nā ʻōnaehana hoʻolālā, ʻo ka hoʻolikelike ʻana o CSS-Doodle me nā waiwai maʻamau CSS, ʻo ia ka mea e hoʻohui maʻemaʻe i loko o nā kaʻina hana e pili ana i nā hōʻailona, ʻoi aku ka maʻalahi o ka mālama ʻana ma mua o nā kiʻi canvas i hoʻokaʻawale ʻia e noho ana ma waho o ka papa hana.

He aha nā manaʻo hoʻokō honua maoli no CSS-Doodle?

O ka hoʻokomo ʻana i ka CSS-Doodle i nā wahi hana e pono ai ka nānā ʻana i kekahi mau mea nui. ʻO nā unahi hoʻokō pololei me ka nui o ka mānoanoa a me ka paʻakikī o ka hoʻoulu ʻana - he 30x30 grid me nā hāmeʻa CSS per-cell e hoʻohua i 900 shadow DOM element, hiki ke hoʻoikaika i ka hoʻolālā a pena i nā kaula ma nā ʻaoʻao haʻahaʻa. ʻO ka hoʻopaʻa inoa ʻana me Chrome DevTools' Performance panel ma mua o ka hoʻohana ʻana i nā mākia nui he hana ʻoluʻolu.

He maikaʻi loa ka hoʻohālikelike ʻana o ka mea nānā no nā mākaʻikaʻi ʻōmaʻomaʻo o kēia wā, no ka mea, hilinaʻi ʻo CSS-Doodle i nā Custom Elements v1 a me Shadow DOM v1, ua kākoʻo ʻia ia mau mea ʻelua. Pono ke kākoʻo hoʻoilina o ka polokalamu kele pūnaewele i nā polyfills, akā naʻe, pono e loiloi nā papahana e huli ana iā IE11 i nā mea ʻē aʻe.

Hōʻike ʻia ka ʻaoʻao-server i ke kaohi kumu hoʻolālā. No ka hoʻoholo ʻana o CSS-Doodle i loko o ka DOM shadow i ka wā holo, pono e mālama nā ʻōnaehana SSR e like me Next.js a i ʻole Nuxt i nā mea doodle ma ke ʻano he mea kūʻai wale nō. ʻO ka molowa o ka hoʻouka ʻana i ka palapala CSS-Doodle a me ka wahī ʻana i ka mea i loko o ka palena o nā mea kūʻai wale nō e hoʻoholo i kēia me ka ʻole o ka hopena nui i nā helu Core Web Vitals.

Pehea e hiki ai i nā ʻoihana ke hoʻohui i ka CSS-Doodle i loko o nā kahe hana kikohoʻe hiki ke hoʻonui ʻia?

No nā hui e hoʻokele ana i nā huahana kikohoʻe he nui, ʻo ka mālama ʻana i ka ʻike like ʻole ma waena o nā mea hana UI e pono ai i nā mea paahana hana e ʻoi aku ma mua o ka ʻāpana ponoʻī. ʻO ka hoʻololi ʻana i nā hoʻonohonoho doodle, kaʻana like ʻana i nā waiwai hua ma waena o nā lālā o ka hui, a me ka hoʻonohonoho ʻana i nā loli hoʻolālā ma nā ʻaoʻao o nā huahana e koi i kahi papa hana kikowaena.

ʻO kēia kahi kahi e hoʻololi ai kahi paepae e like me Mewayz i ka hoohalike. Me 207 mau modula pāʻoihana i hoʻohui ʻia a me nā mea hana hoʻoheheʻe hana i hoʻohana ʻia e nā mea hoʻohana ma luna o 138,000, hāʻawi ʻo Mewayz i nā huahana a me nā hui kūʻai aku i ka ʻenehana e hoʻonohonoho i nā hana hoʻolālā, nā pipeline maʻiʻo, a me nā kahe hana hoʻomohala ma kahi hoʻokahi. Ke hoʻonohonoho pū ʻia kāu mau pūʻulu noʻonoʻo a me ka ʻenehana ma kahi ʻōnaehana hana hoʻokahi, e lilo ana nā hiʻohiʻona hoʻolālā-i mua o ka hoʻouna ʻana - me nā mea UI generative e like me CSS-Doodle hoʻokō - i mea hiki ke hana hou ʻia a hiki ke hoʻokele ʻia ma mua o ka ad-hoc sprint.

Nīnau pinepine

Ua kūpono anei ka CSS-Doodle no ka hoʻohana ʻana i ka hoʻohana ʻana i nā papahana pūnaewele kalepa?

ʻAe. ʻO CSS-Doodle ka MIT-laikini a mālama pono ʻia, kūpono ia no ka hoʻohana pāʻoihana. ʻO nā mea koʻikoʻi no ka hana ʻana he palena nui o ka grid no ka hana a me nā koi ʻaoʻao o ka mea kūʻai aku no ka SSR frameworks. Nui nā hale hoʻolālā hoʻolālā e hoʻohana ia mea no nā kāʻei kua, hoʻouka ʻana i nā pale, a me nā ʻāpana hoʻonaninani kahi i ʻoi aku ka waiwai o ka ʻike ma mua o ka pixel-perfect SSR output.

Hiki ke hoʻopuka ʻia a mālama ʻia paha nā mea hoʻopuka CSS-Doodle ma ke ʻano he waiwai paʻa?

CSS-Doodle ke ola ma ka polokalamu kele pūnaewele DOM, no laila, ʻaʻole he hiʻohiʻona paʻa ka hoʻopuka pololei ʻana. Eia nō naʻe, hoʻohana maʻamau nā mea hoʻomohala i nā hale waihona puke html2canvas a i ʻole dom-to-image e kiʻi i nā doodle i hoʻoiho ʻia i loko o nā faila PNG a i ʻole SVG, a i ʻole e hoʻohana i nā DevTools o ka polokalamu kele pūnaewele e kope i nā kaila inline i helu ʻia no ka hoʻokomo ʻana. No ka hana ʻana i ka waiwai hiki ke hoʻonui ʻia, e holo ana nā kaʻina hana paʻi kiʻi i kākau ʻia ma nā kaiapuni Chromium poʻo ʻole he ala kaulana.

Pehea ka CSS-Doodle e mālama ai i ka hiki a me nā mea heluhelu maka?

No ka mea, he mea hoʻonani maʻemaʻe nā mea hoʻopuka CSS-Doodle i ka hapa nui o nā hihia, ʻo ka hoʻomaʻamaʻa maikaʻi loa ka hoʻopili ʻana i aria-hidden="true" i ka mea , e pale ana i ka poʻe heluhelu kiʻi mai ka hoʻolaha ʻana i ka maʻiʻo pūnaewele puni honua ʻole. No nā hihia kahi e hōʻike ai ka doodle i ka manaʻo maʻamau, ʻo ka wahī ʻana iā ia i loko o kahi mea kiʻi me kahi kiʻi kiʻi wehewehe wehewehe e hāʻawi i ka papa hiki ke loaʻa i nā ʻenehana kōkua.

CSS-Doodle ka mea maikaʻi loa o ka hoʻomohala pūnaewele hou — hiki ke hoʻomohala ikaika i hāʻawi ʻia ma o ka API maʻalahi loa. Inā he mea hoʻomohala hoʻokahi ʻoe e kūkulu ana i nā kōpili noʻonoʻo a i ʻole he hui huahana e hoʻouna ana i nā kikowaena hoʻolālā-i mua ma ke ʻano nui, hoʻomaopopo a hoʻohana i ka CSS-Doodle e hoʻonui i kāu pahu hana ʻike me ka hoʻonui ʻole i ka paʻakikī o kāu codebase.

Mākaukau e kūkulu ʻoi aku ka naʻauao, moku wikiwiki, a hoʻonohonoho i kāu hana huahana holoʻokoʻa ma kahi hoʻokahi? E hoʻomaka i kāu keʻena hana Mewayz i kēia lā — nā hoʻolālā mai $19/mahina e hāʻawi i kāu hui i 207 modules e hoʻopololei i kēlā me kēia papa o kāu ʻoihana, mai nā papa hana hoʻolālā a hiki i ka ulu ʻana o ka mea kūʻai aku.