CSS-Doodle ye

| I mana kɛ daɲɛw landingɛyɔrɔw jɔli ye wo, i kɛra kɔkankow ye minnu bɛ ɲɔgɔn sɔrɔ, walima i bɛ kunnafonidilanw jiracogo fangamaw jɔ, CSS-Doodle bɛ ekipuw gɛrɛfɛcogo caman sɛmɛntiya ɲɛfɛla dilancogo baarakɛcogo la.

CSS-Doodle ye mun ye tigitigi ani a bɛ baara kɛ cogo di ?

CSS-Doodle ye JavaScript gafemarayɔrɔ dafalen ye min dabɔra Yuan Chuan fɛ min bɛ HTML yɔrɔ ladamulen dɔ don — — i ka ɛntɛrinɛti porozɛw kɔnɔ. O fɛn in kɔnɔ, i bɛ sariyaw sɛbɛn minnu bɛ i n’a fɔ CSS, gafemarayɔrɔ bɛ minnu kɔrɔ fɔ walasa ka seliw ka jatebɔsɛbɛn dɔ dilan, minnu kelen-kelen bɛɛ bɛ se ka cogoya kɛ u yɛrɛma ni sugandili kɛrɛnkɛrɛnnenw daɲɛgafe ni danfara baarakɛcogo ye.

Kɔri fɛɛrɛ bɛ baara kɛ ni dulon DOM grid system ye . Ni navigatɔrɔ ye fɛn dɔ sɔrɔ, gafemarayɔrɔ bɛ yɔrɔ dantigɛlen tila ka kɛ seliw ka jatebɔsɛbɛn ye min bɛ se ka labɛn ani k’i ka CSS sariyaw waleya seliw bɛɛ kɔnɔ minnu bɛ jatebɔsɛbɛn kɔnɔ. Fɛn min b’a kɛ kabako ye, o ye a ka dɛmɛ jɔlen ye baarakɛcogo nkalonmaw kama i n’a fɔ @r(), @p(), ani @pick(), minnu b’a to seli kelen-kelen bɛɛ bɛ se ka nafa kɛrɛnkɛrɛnnenw sɔrɔ k’a sɔrɔ JavaScript layini kelen ma bɔ a dilannikɛla fan fɛ.

Rendering pipeline ye tilennen ye : ka CSS kɔnɔna kɔnɔkow lajɛ, ka shadow DOM grid dilan, ka kisɛw jatebɔ k’a sɔrɔ u ma kɛ cogo si la, ka jatebɔcogo pikiri kɛ seli kelen kɔnɔ, ka bɔli laban penta. Lakurayali bɛ kɛ ni wale ye — i ka update() fɛɛrɛ wele ani fɛn kura dɔ min bɛ kisɛ la, o bɛ jira o yɔrɔnin bɛɛ, o bɛ CSS-Doodle kɛ fɛn ɲuman ye dilancogo sitɛmuw kama minnu bɛ ɲɔgɔn sɔrɔ ani minnu bɛ ɲɛnamaya.

fɛn koloma jumɛnw bɛ CSS-Doodle kɛ fɛn kɛrɛnkɛrɛnnen ye ?

CSS-Doodle ka jɔcogo faamuyali kɔrɔ ye ka layini saba dɔn minnu bɛ ɲɔgɔn kan minnu bɛ baara kɛ ɲɔgɔn fɛ walasa ka bɔnɔgɔla bɔlenw bɔ :

• Grid System : A ɲɛfɔlen don grid fɛnsɛbɛn fɛ, o bɛ jirisunw ni kuluw kɔlɔsi (misali la, grid="10x10"), ka seli hakɛ dɔn doodle bɛ seli hakɛ min jira ani u tilatilali cogo min na yɔrɔ la.
• Sugandili kɛrɛnkɛrɛnnenw : CSS-Doodle bɛ sugandiliw jira i n’a fɔ :nth-of-type() farankanw, @nth, ani @row/@col minnu bɛ seliw laɲini ka kɛɲɛ ni u jɔyɔrɔ ye jatebɔyɔrɔ kɔnɔ walasa ka sɛbɛnni kɛcogo tigitigi sɔrɔ, min sinsinnen bɛ sariyaw kan.
• Randomization Functions : Baarakɛcogo minnu bɛ don a kɔnɔ i n’a fɔ @r(min, max) jatebɔyɔrɔw kama ani @pick(a, b, c) nafaw lisi kama, olu bɛ kɛ sababu ye ka fɛnɲɛnamafagalanw sɔrɔcogo minnu tɛ segin-ka-bɔ, olu bɛ se ka sɔrɔ kode sinsinni damadɔ dɔrɔn kɔnɔ.
• Animation and Transition Support : Ikomi CSS-Doodle bɛ CSS lakika bɔ, CSS animation native bɛɛ, keyframes, transitions, ani custom properties bɛ baara kɛ k’a sɔrɔ fɛn ma Changer, o bɛ kɛ sababu ye ka fluid, looping visual compositions.
• Variable System : CSS custom properties ani @var() baarakɛcogo b’a to dilanbagaw bɛ doodlew paramɛtiriw kɛ, ka bɔko minnu bɛ barokun dɔn walima minnu bɛ se ka labɛn baarakɛla fɛ ni cɛsiri fitinin ye.

Nin faralen ɲɔgɔn kan, n’o ye jatebɔlan kɔrɔsilen ye ni selilu kelen-kelen bɛɛ ka cogoya ye min bɛ kɛ k’a sɔrɔ a ma kɛ cogo si la, o de bɛ CSS-Doodle faranfasi ka bɔ SVG jɛnɛratow walima baarakɛminɛnw na minnu sinsinnen bɛ kanpaɲi kan — bɔli ye fɔli ye, kɔrɔko, ani cogoya dafalen CSS baarakɛminɛnw fɛ.

CSS-Doodle bɛ se ka suma cogo di ni dilancogo wɛrɛw ye ?

Laadalata seko ni dɔnko sɛnɛfɛnw na navigatɛriw kɔnɔ, a ka c’a la, o bɛ tali kɛ HTML5 Canvas API walima SVG sɛgɛsɛgɛli la JavaScript karamɔgɔya fɛ. Hali n’u fanga ka bon, o fɛɛrɛ ninnu bɛ JavaScript dɔnniyaba de wajibiya, rendering loops wajibiyalenw, ani bolola cogoya ɲɛnabɔli. CSS-Doodle bɛ o bɛɛ bila kɛrɛfɛ k’a to deklaratif paradigme kɔnɔ min dilanbagaw b’a dɔn kaban.

N’i y’a suma ni Canvas-based gafemarayɔrɔw ye i n’a fɔ p5.js, CSS-Doodle ka nɔgɔn kosɛbɛ grid-pattern baarakɛcogo la, a tɛ render loop wajibiya, wa a bɛ DOM fɛnw bɔ minnu bɛ to ka se ka sɔrɔ ani ka sɛgɛsɛgɛ. SVG jɛnɛratow kama, CSS-Doodle bɛ se sɔrɔ yiriwalikɛlaw ka dɔnniya kan CSS-native ekipuw kama, hali ni SVG bɛ se sɔrɔ jagokɛlaw ka kantigiya kan ani sira baara gɛlɛnw kan.

ye

"CSS-Doodle b'a jira ko daɲɛw dilanni baarakɛminɛn barikamaw tɛ fɛn gɛlɛnw ye tuma bɛɛ — tuma dɔw la, n'i y'i yɛrɛ siri fɛn kelen na ani fɔcogo kɔrɔfɔcogo la, o bɛ daɲɛw da wuli ka tɛmɛ kanpaɲi dafalen kan."

ye

Jɛkulu minnu bɛ baara kɛ dilancogo siratigɛ la, CSS-Doodle ka bɛn ni CSS ka laadalafɛnw ye, o kɔrɔ ye ko a bɛ don saniyalen na baarakɛcogo la minnu sinsinnen bɛ token kan, o b’a to a bɛ se ka ladon kosɛbɛ ka tɛmɛ kanpaɲi renders kan minnu bɛ sigi styling layer kɔkan pewu.

CSS-Doodle waleyali jateminɛw ye mun ye diɲɛ lakika kɔnɔ ?

CSS-Doodle tali baarakɛyɔrɔw la, o bɛ ɲini ka jateminɛ kɛ fɛn koloma damadɔw kan. Baarakɛcogo bɛ se ka kɛ ka ɲɛsin jatebɔ hakɛ ma ani ɲɛnamaya kɛcogo gɛlɛya ma — jatebɔsɛbɛn 30x30 min bɛ ni CSS ɲɛnamaya kɛcogo ye seli kelen-kelen bɛɛ la, o bɛna DOM fɛn 900 bɔ minnu bɛ sumaya, minnu bɛ se ka degun bila labɛncogo la ani ka jiriw penta minɛnw kan minnu bɛ duguma. Profiling ni Chrome DevTools ka Performance panel ye sanni ka grid belebelebaw bila sen kan, o ye wale ɲuman ye.

Navigatɛriw ka bɛnkan ka ɲi bi navigatɔrɔw ma minnu bɛ kɛ tuma bɛɛ, bawo CSS-Doodle bɛ a jigi da Custom Elements v1 ani Shadow DOM v1 kan, olu fila bɛɛ bɛ dɛmɛ sɔrɔ diɲɛ bɛɛ kɔnɔ. Navigatɛri kɔrɔsigi dɛmɛni bɛ polyfills de wajibiya, hali ni porozɛ minnu bɛ IE11 laɲini, olu ka kan ka fɛɛrɛ wɛrɛw jateminɛ.

Server-side rendering bɛ fɛn dilanni gɛlɛya fɔlɔ jira. Komin CSS-Doodle bɛ ɲɛnabɔ shadow DOM kɔnɔ baarakɛwaati la, SSR frameworks i n’a fɔ Next.js walima Nuxt ka kan ka doodle yɔrɔw minɛ i n’a fɔ kliyan dɔrɔn. CSS-Doodle sɛbɛnni doni lazy ani ka fɛn in siri dankan na min bɛ kɛ kiliyan dɔrɔn fɛ, o bɛ o ɲɛnabɔ saniya la k’a sɔrɔ a ma nɔ bila Core Web Vitals jatew la kosɛbɛ.

Jagokɛlaw bɛ se ka CSS-Doodle don cogo di nizɛri baarakɛcogo la min bɛ se ka sɛgɛsɛgɛ ?

Ekipu minnu bɛ nizɛri fɛn caman ɲɛnabɔ, ka yecogo bɛnkan sabati UI fɛnw kɔnɔ minnu bɛ bɔ fɛnw na, o bɛ baarakɛcogo baarakɛminɛnw de wajibiya minnu bɛ tɛmɛ yɔrɔ yɛrɛ kan. Doodle cogoyaw sɛgɛsɛgɛli, kisɛ nafaw tilatilali ekipu kɔnɔmɔgɔw cɛ, ani dilancogo caman caman cili ɲɔgɔn fɛ fɛn dilannenw sanfɛyɔrɔw la, o bɛ baarakɛcogo cɛmancɛ la.

O ye yɔrɔ ye tigitigi min na plateforme i n'a fɔ Mewayz bɛ equation Changer. Ni jago modulu 207 jɛlenw ni baarakɛcogo baarakɛminɛnw ye minnu bɛ baara kɛ ni baarakɛla 138.000 ni kɔ ye, Mewayz bɛ fɛn dilanni ni jagokɛjɛkuluw di fɛnsɔrɔsiraw ma walasa u ka se ka dilan baarakɛcogo, kɔnɔkow pibilikiw, ani yiriwali baarakɛcogo ɲɛnabɔ yɔrɔ kelen na. Ni i ka daɲɛw ni fɛɛrɛbɔ jɛkuluw bɛ ɲɔgɔn sɔrɔ baarakɛminɛn kelen kan, dilancogo-ɲɛnabɔli-minɛnw ci — UI fɛnw fana sen bɛ o la i n’a fɔ CSS-Doodle waleyaliw — o bɛ kɛ wale ye min bɛ se ka segin-ka-bɔ, min bɛ se ka ɲɛnabɔ sanni ka kɛ teliya ye min bɛ kɛ waati kelen na.

Ɲininkali minnu bɛ kɛ tuma caman na

Yala CSS-Doodle bɛnnen don ka baara kɛ ni fɛn dilanni ye jagokɛla ka ɛntɛrinɛti porozɛw kɔnɔ wa ?

Ɔwɔ. CSS-Doodle ye MIT ka lase ye, wa a bɛ ladon kosɛbɛ, o b’a to a bɛnnen don jago siratigɛ la. Sɛnɛko jateminɛ jɔnjɔnw ye grid hakɛ dantigɛliw ye baarakɛcogo la ani kiliyan fan fɛ rendering wajibiyalenw SSR frameworks kama. Dizayina studio caman bɛ baara kɛ n’a ye jatigɛwale kɔkankow kama, doni ɛkranw, ani masiri yɔrɔw kama yɔrɔ minnu na yecogo nafolo nafa ka bon ka tɛmɛ pixel-perfect SSR bɔli kan.

Yala CSS-Doodle bɔli bɛ se ka bila jamana kɔkan walima ka mara i n' a fɔ nafolo jɔlenw wa ?

CSS-Doodle bɛ ɲɛnamaya jira navigatɔrɔn DOM kɔnɔ, o la, bɔli tilennen tɛ fɛn ye min bɛ don a kɔnɔ. Nka, a ka c’a la, baarakɛlaw bɛ baara Kɛ ni html2canvas walima dom-to-image gafemarayɔrɔw ye walasa ka doodlew jiralenw ta ka Kɛ PNG walima SVG filew ye, walima ka baara Kɛ ni navigatɔrɔn ka DevTools ye walasa ka jatebɔcogo inline cogoyaw kopi Kɛ static embedding kama. Walasa ka nafolo dilancogo sɛgɛsɛgɛ, scripted snapshot baarakɛcogo minnu bɛ boli Chromium sigidaw la kunkolo tɛ minnu na, o ye fɛɛrɛ ye min ka di kosɛbɛ.

CSS-Doodle bɛ se sɔrɔli ni ekran kalanbagaw ɲɛnabɔ cogo di ?

Ikomi CSS-Doodle bɔlenw ye masiri dɔrɔn ye baarakɛcogo fanba la, fɛɛrɛ ɲuman ye ka aria-hidden="true" waleya yɔrɔ la, ka ɛkran kalanbagaw bali ka grid cell kɔnɔkow laseli minnu kɔrɔ tɛ. Ni ko minnu na doodle bɛ kɔrɔko kɔrɔ Lase, n’i y’a siri ja dɔ la ni ɲɛfɔli ja ye, o bɛ seko ni dɔnko layini di, dɛmɛn fɛɛrɛw bɛ min ɲini.

---

CSS-Doodle bɛ bi ɛntɛrinɛti yiriwali ɲuman jira — seko ni dɔnko fangama min bɛ di API nɔgɔman fɛ. I kɛra mɔgɔ kelen ye min bɛ daɲɛw dilanni portfoliow jɔ walima i kɛra fɛn dilanni jɛkulu ye min bɛ dilan-ɲɛnajɛ-yɔrɔw ci ka kɛɲɛ ni hakɛ ye, CSS-Doodle faamuyali n’a nafabɔli bɛ i ka baarakɛminɛn yetaw bonya k’a sɔrɔ i ma i ka kodebase gɛlɛya bonya.

I labɛnnen don ka jɔ ni hakilitigiya ye, ka kurun ci teliya la, ani ka i ka fɛn dilannenw baara bɛɛ labɛn yɔrɔ kelen na ? I ka Mewayz baarakɛyɔrɔ daminɛ bi — labɛn minnu bɛ daminɛ $19/kalo la, olu bɛ modulu 207 di i ka jɛkulu ma walasa k’i ka jago layini bɛɛ ɲɛ, k’a ta dilan baarakɛcogo la ka se kiliyanw ka bonya ma.