AI prompts
base on Browser extension to view and debug the DOM in 3D space. <div align="center">
<img width="60" height="60" src="https://github.com/OrionReed/dom3d/assets/16704290/126a738c-1a22-43ac-a209-b465afe73b17"/>
<h3 style="margin-top: 0;">dom3d: a tiny spatial DOM viewer</h3>
<img src="https://img.shields.io/badge/Chrome-Supported-brightgreen">
<img src="https://img.shields.io/badge/Firefox-Supported-brightgreen">
<img src="https://img.shields.io/badge/Microsoft%20Edge-Supported-brightgreen">
<img src="https://img.shields.io/badge/Opera-Supported-brightgreen">
<img src="https://img.shields.io/badge/Brave-Supported-brightgreen">
<img src="https://img.shields.io/badge/Safari-Unsupported-red">
</div>
### Installation
You can install this extension from the [Firefox](https://addons.mozilla.org/en-US/firefox/addon/dom3d/) and [Chrome](https://chromewebstore.google.com/detail/dom3d/lhdhfmkagpnfjjdgbionncpiolioknpj) extension stores or download the latest [release](https://github.com/OrionReed/dom3d/releases) and follow the instructions for your browser below.
<details>
<summary><b>Universal bookmarklet version</b></summary>
Simply prefix this code with `javascript:` and save it as a bookmark on Chrome or Firefox. This is a 1-1 equivalent to the full extension with the default configuration.
```js
(()=>{let e=t=>[...t.children].reduce((t,n)=>Math.max(t,e(n)),0)+1,t=e(document.body),n=(e,n=0,o=0)=>`hsl(${n}, 75%, ${Math.min(10+e*(1+60/t),90)+o}%)`,o=document.body;o.style.overflow="visible",o.style.transformStyle="preserve-3d",o.style.perspective=1e4;let r=window.innerWidth/2,i=window.innerHeight/2;o.style.perspectiveOrigin=o.style.transformOrigin=`${r}px ${i}px`,function e(t,o,r,i){for(let l=t.childNodes,s=l.length,d=0;d<s;d++){let s=l[d];if(1!==s.nodeType)continue;let f=n(o,190,-5);Object.assign(s.style,{transform:"translateZ(20px)",overflow:"visible",transformStyle:"preserve-3d",backgroundColor:f});let a=r,c=i;s.offsetParent===t&&(a+=t.offsetLeft,c+=t.offsetTop),e(s,o+1,a,c)}}(o,0,0,0),document.addEventListener("mousemove",e=>{let t=180*(1-e.clientY/window.innerHeight)-90,n=180*e.clientX/window.innerWidth-90;o.style.transform=`rotateX(${t}deg) rotateY(${n}deg)`})})();
```
</details>
<details>
<summary><b>In Firefox</b></summary>
1. Go to `about:debugging#/runtime/this-firefox`
2. Click "Load Temporary Addon"
3. Select `manifest.json` in the downloaded folder
4. Extension should now be installed, you can find it in the top right extensions menu (puzzle piece icon) and pin it if desired
</details>
<details>
<summary><b>In Chrome/Chromium browsers</b></summary>
1. Go to `chrome://extensions`
2. Enable "Developer Mode" in the top right
3. Click "Load Unpacked"
4. Select the downloaded folder
5. Extension should now be installed, you can find it in the top right extensions menu (puzzle piece icon) and pin it if desired
**Specific Chromium browsers may have additional steps.**
- In Opera, enable "Allow access to search page results"
</details>
<details>
<summary><b>In Microsoft Edge</b></summary>
1. Go to `edge://extensions`
2. Click "Load Unpacked"
3. Select the downloaded folder. Please use the Chrome version of the extension.
4. Extension should now be installed, you can find it in the top right extensions menu (puzzle piece icon) and pin it if desired
</details>
## Usage
Click the extension icon to enable 3D DOM view or right-click it for options.
| Option | Description |
|-----------------------|--------------------------------------------------------|
| Show Surfaces | Toggle visibility of element surfaces |
| Show Sides | Toggle visibility of element sides |
| Require Drag | Only rotate when dragging |
| Require Alt | Only rotate when Alt key is pressed |
| Randomize Color | Apply random colors to elements |
| CSS Selectors | Set CSS selectors to selectively color elements |
## Development
1. Run `yarn install`
2. Run `yarn watch` to watch for changes and automatically rebuild the extension.
3. Load the extension from `dist/{browser}` following the steps above.
For Safari, you can run `xcrun safari-web-extension-converter dist/safari` and try to go from there. No success so far.
## Known Issues
All help in diagnosing and fixing these key issues is welcome! I've linked to an Issue for each of them.
- [The z-ordering of DOM elements from the 'cameras' perspective is incorrect in some cases.](https://github.com/OrionReed/dom3d/issues/9)
- [Some websites (like GitHub) appear flat when their DOM clearly isn't.](https://github.com/OrionReed/dom3d/issues/10)
- [Some elements don't increase stack height, such as `<a>` and `<i>` tags.](https://github.com/OrionReed/dom3d/issues/11)
", Assign "at most 3 tags" to the expected json: {"id":"8940","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"