CSS-Doodle

Ko te CSS-Doodle he waahanga tukutuku kaha e taea ai e nga kaiwhakawhanake me nga kaihoahoa te whakaputa i nga tauira whakakitenga maia-maiti me nga mahi toi whakatipu ma te whakamahi i te wetereo CSS parakore i roto i te huānga HTML ritenga kotahi. Ahakoa kei te hanga koe i nga wharangi tauranga auaha, i nga papamuri tauwhitiwhiti, i nga tirohanga raraunga hihiri ranei, ka huri a CSS-Doodle i te huarahi e whakatata atu ai nga kapa ki nga rerengamahi hoahoa o mua.

He aha te CSS-Doodle me pehea te mahi?

Ko CSS-Doodle he puna JavaScript puna tuwhera i hangaia e Yuan Chuan e whakauru ana i tetahi huānga HTML ritenga — — ki o kaupapa tukutuku. I roto i tenei huānga, ka tuhi koe i nga ture penei i te CSS ka whakamaoritia e te whare pukapuka ki te whakaputa i te matiti o nga pūtau, ka taea te whakaingoa takitahi ma te whakamahi i te wetereo kaikowhiri motuhake me nga mahi matapōkeretia.

Ka mahi te tikanga matua ma te punaha matiti DOM atarangi. Ina tutaki te kaitirotiro ki tetahi huānga , ka wehea e te whare pukapuka te waahi kua tohua ki roto i te matiti o nga pūtau ka taea te whirihora me te whakamahi i o ture CSS puta noa i ia pūtau o te matiti. Ko te mea whakamiharo ko tana tautoko i hangaia mo nga mahi pseudo-tupurangi penei i @r(), @p(), me @pick(), e taea ai e nga pūtau takitahi te whiwhi uara ahurei kaore he raina JavaScript mai i te taha o te kaiwhakawhanake.

He maamaa te paipa whakaputa: parapara i te ihirangi CSS o roto, whakaputa i te matiti DOM atarangi, tatau nga kakano matapōkere, werohia nga momo kua oti te tatau mo ia pūtau, ka peita i te putanga whakamutunga. Ka puta nga whakahōutanga — waeahia te tikanga update() a ka puta he momo momo kakano hou, na te CSS-Doodle e pai ana mo nga punaha hoahoa tauwhitiwhiti me nga punaha whakahoahoa.

He aha nga Waahanga Matua e hanga ahurei ai te CSS-Doodle?

Ko te mohio ki te hoahoanga a CSS-Doodle ko te mohio ki nga paparanga honohono e toru e mahi tahi ana ki te whakaputa i nga putanga whakaputa:

• Pūnaha Mātiti: Kua tautuhia mā te huanga mātiti, ka whakahaere tēnei i ngā haupae me ngā tīwae (hei tauira, mātiti = "10x10"), e whakatau ana e hia ngā pūtau ka tukuna e te doodle me pehea te tohatoha mokowā.
• Kaiwhiringa Motuhake: CSS-Doodle he whakauru i nga kaiwhiriwhiri penei i te :nth-of-type() toronga, @nth, me @row/@col e whai ana i nga pūtau ma te tuunga i roto i te matiti mo te hanga tika, i runga ture.
• Ngā Taumahi Randomization: Ko nga mahi hanga-i roto penei @r(min, max) mo nga awhe tau me @pick(a, b, c) mo nga rarangi uara ka taea te whakatutuki i nga tauira whakahiato-kore i roto i etahi rarangi waehere.
• Tautoko Whakakotahitanga me te Whakawhiti: Na te CSS-Doodle e whakaputa CSS tūturu, ka mahi katoa nga pakiwaituhi CSS taketake, nga anga matua, nga whakawhitinga, me nga ahuatanga ritenga me te kore whakarereke, ka taea te wai, te whakahiato i nga titonga ataata.
• Pūnaha Taurangi: Ngā āhuatanga ritenga CSS me te mahi @var() ka taea e nga kaihoahoa te tawhā i nga doodles, ma te hanga i nga putanga e mohio ana ki te kaupapa, ki te whirihora-kaiwhakamahi ranei me te whakapau kaha.

Ko tenei huinga o te scaffold mātiti whakahaere me te hanga matapōkeretia ia-pūtau te mea e wehewehe ana i te CSS-Doodle mai i nga kaihanga SVG whānui, i nga taputapu-a-waahanga ranei — he whakaputa korero, he kupu, he tino whakaahua ma te taputapu CSS paerewa.

Me pehea te whakataurite a CSS-Doodle ki etahi atu huarahi Hoahoa Hangahanga?

Ko nga mahi toi tuku iho i roto i nga kaitirotiro e whakawhirinaki ana ki te HTML5 Canvas API, SVG ranei ma te angamahi JavaScript. Ahakoa te kaha, ko enei huarahi e kii ana i te matauranga JavaScript nui, nga kopae tuku korero, me te whakahaere a-ringa. Ko te CSS-Doodle kei te tahae i era katoa ma te noho ki roto i nga korero kua mohio nga kaihoahoa tauira.

Ka whakatauritea ki nga whare pukapuka a Canvas penei i te p5.js, he tino ngawari ake te CSS-Doodle mo nga keehi whakamahi tauira-maiti, kaore e hiahiatia he kopikopiko, me te whakaputa i nga huānga DOM ka noho waatea me te tirotiro. Ki nga kaihanga SVG, ka toa a CSS-Doodle i runga i te wheako kaiwhakawhanake mo nga roopu CSS-maori, ahakoa ka toa a SVG i runga i te pono o te kaweake me nga mahi ara uaua.

"Ko te CSS-Doodle e whakaatu ana ko nga taputapu auaha tino kaha ehara i te mea tino uaua i nga wa katoa — i etahi wa ka herea koe ki tetahi huānga me te wetereo whakapuakanga ka nui ake te mahi auaha i te waa tuwhera."

Mo nga kapa e mahi ana i roto i nga punaha hoahoa, ko te tiaroaro a CSS-Doodle ki nga ahuatanga ritenga CSS ka uru ki roto i nga rerengamahi tohu-maimai o naianei, kia pai ake ai te tiaki i nga taahoa taahoa e noho ana ki waho o te paparanga taatai.

He aha nga whakaaro mo te whakatinanatanga o te ao mo te CSS-Doodle?

Ko te tango i te CSS-Doodle i roto i nga taiao whakangao me aro ki etahi take matua. Ko nga unahi o te mahinga me te rahi o te matiti me te uaua hākoritanga - he matiti 30x30 me nga whakakoritanga CSS ia-pūtau ka whakaputa i nga huānga DOM atarangi 900, ka taea te whakapouri i te tahora me te peita miro ki nga taputapu o raro. Ko te whakakotaha me te Paewhiri Mahi a Chrome DevTools i mua i te whakatakoto i nga matiti nui he tikanga e taunaki ana.

He pai rawa atu te hototahitanga o te kaitirotiro mo nga kaitirotiro kaakaariki hou, na te mea e whakawhirinaki ana a CSS-Doodle ki nga Waahanga Ritenga v1 me te Atarangi DOM v1, e tautokohia ana enei e rua. Ko te tautoko o te kaitirotiro tuku iho e hiahia ana ki nga polyfills, ahakoa ko nga kaupapa e aro ana ki te IE11 me arotake etahi atu.

Ko te tāhuahua taha-tūmau e whakaatu ana i te herenga hoahoanga tuatahi. I te mea ka whakatau a CSS-Doodle i roto i te atarangi DOM i te wa whakahaere, ko nga anga SSR penei i a Next.js, Nuxt ranei me mahi nga waahanga doodle hei kaihoko-anake. Ma te mangere ki te uta i te tuhinga CSS-Doodle me te takai i te huānga ki roto i te rohenga-kiritaki anake ka whakatau i tenei ma te kore e pa ki nga kaute Tohu Tukutuku Matua.

Me pehea e taea ai e nga Pakihi te whakauru CSS-Doodle ki roto i nga Reremahi Mamati Whakanuia?

Mo nga kapa e whakahaere ana i nga hua matihiko maha, ko te pupuri i te riterite o te tirohanga puta noa i nga huānga UI whakaputa me whai taputapu rerengamahi kei tua atu i te waahanga. Ko te whakaputa i nga whirihoranga doodle, te tiri i nga uara kakano puta noa i nga mema o te roopu, me te whakarite i nga huringa hoahoa puta noa i nga papanga hua ka tono he paparanga whakahaere matua.

Koinei te waahi ka huri te papaa penei i a Mewayz i te wharite. Ma te 207 nga waahanga pakihi whakauru me nga taputapu rerengamahi e whakamahia ana e nga kaiwhakamahi 138,000 neke atu, ka hoatu e Mewayz nga hua me nga roopu hokohoko te hanganga ki te whakarite i nga mahi hoahoa, nga paipa ihirangi, me nga rerenga mahi whanaketanga i te waahi kotahi. Ina tukutahia o roopu auaha me te hangarau ki runga i te punaha whakahaere kotahi, ko nga waahanga hoahoa-whakamua tuku - tae atu ki nga huānga UI whakaputa penei i te whakatinana CSS-Doodle - ka waiho hei mahi tukurua, ka taea te whakahaere, kaua ki te tere tere.

Patai Auau

Kei te pai te CSS-Doodle mo te hanga i nga kaupapa tukutuku arumoni?

Ae. Ko te CSS-Doodle he raihana MIT, he kaha te tiaki, he pai mo te whakamahi arumoni. Ko nga whakaaro whakangao matua ko te rahi o te matiti mo nga mahi me nga whakaritenga whakaputa taha-kiritaki mo nga anga SSR. He maha nga taiwhanga hoahoa e whakamahi ana mo nga papamuri toa, te uta i nga mata, me nga waahanga whakapaipai he mea nui ake te whai rawa o te tirohanga ki te putanga SSR tino pai.

Ka taea te kaweake, te tiaki ranei nga putanga CSS-Doodle hei taonga pateko?

Ko te CSS-Doodle ka noho ora i roto i te tirotiro DOM, no reira ehara te kaweake tika i te waahanga whakauru. Heoi, ka whakamahia e nga kaiwhakawhanake nga whare pukapuka html2canvas, dom-to-image ranei ki te hopu i nga doodles ki roto i nga konae PNG, SVG ranei, ka whakamahi ranei i nga DevTools o te kaitirotiro ki te kape i nga momo raarangi kua oti te tatau mo te whakauru pateko. Mo te hanga rawa tauineine, he huarahi rongonui nga rerengamahi hopu whakaahua kua tuhia ki nga taiao Chromium kore upoko.

Me pehea te whakahaere a CSS-Doodle i te urunga me nga panui mata?

Na te mea he tino whakapaipai nga putanga CSS-Doodle i roto i te nuinga o nga keehi, ko te mahi pai ko te tono aria-hidden="true" ki te huānga , hei aukati i nga kaipānui mata ki te whakapuaki i nga ihirangi pūtau matiti kore tikanga. Mo nga keehi e whakaatu ana te doodle i te tikanga o te kupu, ma te takai ki tetahi huānga ahua me te tapanga whakaahua whakaahua ka whakarato i te paparanga urunga e hiahiatia ana e nga hangarau awhina.

Ko CSS-Doodle te tohu pai rawa atu o te whanaketanga paetukutuku hou — te kaha whakaputa kaha ka tukuna ma te API ngawari rawa atu. Ahakoa he kaiwhakawhanake takitahi koe e hanga ana i nga kōpaki auaha, he roopu hua ranei e tuku ana i nga hononga hoahoa-whakamua i te tauine, ma te mohio me te whakamahi i te CSS-Doodle ka whakawhānui ake i to kete taputapu ataata me te kore e whakawhanui i to uauatanga turanga waehere.

Kua reri ki te hanga maataa ake, ki te tuku tere, ki te whakarite i o mahi hua katoa ki te waahi kotahi? Tīmatahia to mokowāmahi Mewayz i tenei ra — ma nga mahere mai i te $19/marama ka hoatu ki to roopu 207 nga waahanga ki te whakamaarama i nga paparanga katoa o to pakihi, mai i nga rerenga mahi hoahoa ki te tipu o nga kaihoko.