search

atapas / webapis-playground

The Web APIs Playground is a project to showcase the JavaScript Web APIs with examples and demonstrations. Client-side JavaScript APIs are here to help with providing wrapper functions for many low-level tasks.
https://webapis-playground.vercel.app/
MIT License
299 stars 72 forks source link

✨ [New Demo Request]: CSS Painting API Demo #84

Open atapas opened 3 years ago

atapas commented 3 years ago

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

Padmanabh82 commented 3 years ago

So what we have to do ?? Do we need to add a project by using it??

atapas commented 3 years ago

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.

Padmanabh82 commented 3 years ago

Ok sir I will make and tell you

atapas commented 3 years ago

Should I assign it to you so that no one else pick it up?

Padmanabh82 commented 3 years ago

Ok

Padmanabh82 commented 3 years ago

There are wide range of paint() uses would you suggest what should be included in example ??

Padmanabh82 commented 3 years ago

Every time dynamic colour baground colour ??

Padmanabh82 commented 3 years ago

Every time dynamic colour baground colour ??

I like this Idea

atapas commented 3 years ago

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.

Padmanabh82 commented 3 years ago

Your project is not working on my computer

Padmanabh82 commented 3 years ago

`(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' }`

Padmanabh82 commented 3 years ago

@atapas sir ??

atapas commented 3 years ago

@atapas sir ??

Send me the steps you are following.

What's your node version?

Did yarn install go through?

Padmanabh82 commented 3 years ago

Did yarn install go through?

No I didn't use yarn

Padmanabh82 commented 3 years ago

Send me the steps you are following.

Git clone. cd ____ Npm run dev

atapas commented 3 years ago

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

Padmanabh82 commented 3 years ago

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

atapas commented 3 years ago

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

Padmanabh82 commented 3 years ago

Do you want to say npm ??

atapas commented 3 years ago

Do you want to say npm ??

No NVM: https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows

Padmanabh82 commented 3 years ago

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

Padmanabh82 commented 3 years ago

@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 `

Padmanabh82 commented 3 years ago

i dosen't work in my comp.

Padmanabh82 commented 3 years ago

assign it to some one other

develemit commented 2 years ago

@atapas Back again! I'll see if I can tackle this issue! 😄