✨ [New Demo Request]: CSS Painting API Demo
atapas opened this issue · 25 comments
Please include the request by answering these questions.
What is the Example and Demo Topic?
CSS Painting API
Please explain why do you need it?
The CSS Painting API — allows developers to write JavaScript functions that can draw directly into an element's background, border, or content.
Concepts and usage
Essentially, the CSS Painting API contains functionality allowing developers to create custom values for paint(), a CSS function. You can then apply these values to properties like background-image to set complex custom backgrounds on an element.
Any Links, Reads?
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API
If you are picking up this request to implement, PLEASE READ THIS
So what we have to do ??
Do we need to add a project by using it??
So what we have to do ??
Do we need to add a project by using it??
As described in the issue, you need to read the guide first on how to add a demo. Then prepare a quality example using it and add.
Please let me know, if you are picking it up.
Ok sir I will make and tell you
Should I assign it to you so that no one else pick it up?
Ok
There are wide range of paint() uses would you suggest what should be included in example ??
Every time dynamic colour baground colour ??
Every time dynamic colour baground colour ??
I like this Idea
Every time dynamic colour baground colour ??
I like this Idea
May be on multiple divs/boxes.. Go as innovative as possible.. let's make it a great demo.
Your project is not working on my computer
`(node:5001) [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] DeprecationWarning: SingleEntryPlugin was renamed to EntryPlugin
[PWA] Compile client (static)
[PWA] Build in develop mode, cache and precache are mostly disabled. This means offline support is disabled, but you can continue developing other functions in service worker.
[PWA] Auto register service worker with: /home/pi/webapis-playground/node_modules/next-pwa/register.js
[PWA] Service worker: /home/pi/webapis-playground/public/sw.js
[PWA] url: /sw.js
[PWA] scope: /
[PWA] Compile server
{ Error: Cannot find module 'tailwindcss'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.mod._resolveFilename (/home/pi/webapis-playground/node_modules/next/dist/build/webpack/require-hook.js:96:28)
at Function.resolve (internal/modules/cjs/helpers.js:33:19)
at loadPlugin (/home/pi/webapis-playground/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:50:32)
at Promise.all.parsed.map (/home/pi/webapis-playground/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:171:56)
at Array.map ()
at Object.getPostCssPlugins (/home/pi/webapis-playground/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:171:47) code: 'MODULE_NOT_FOUND' }`
@atapas sir ??
@atapas sir ??
Send me the steps you are following.
What's your node version?
Did yarn install go through?
Did yarn install go through?
No I didn't use yarn
Send me the steps you are following.
Git clone.
cd ________
Npm run dev
Send me the steps you are following.
Git clone.
cd ________
Npm run dev
You need to first install dependencies using npm install before you do npm run dev
You need to first install dependencies using npm install before you do npm run dev
Sorry I didn't type here but I have done it I think problem is in my node version
You need to first install dependencies using npm install before you do npm run dev
Sorry I didn't type here but I have done it I think problem is in my node version
possibly. Use NVM to install and switch to another version. Preferred > 12.7.0
Do you want to say npm ??
Do you want to say npm ??
No NVM: https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows
Do you want to say npm ??
No NVM: https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows
I use Linux sir. (Raspberry pi).wait I will try to update
@atapas sir see my terminal log:-
log.txt
and my frontend:-
`
Failed to compile
./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[3].oneOf[6].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[3].oneOf[6].use[2]!./styles/globals.css
/home/pi/webapis-playground/node_modules/color/index.js:257
lum[i] = (chan <= 0.039_28) ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
^^^^^
SyntaxError: Invalid or unexpected token
`
i dosen't work in my comp.
assign it to some one other