├── .DS_Store ├── .gitignore ├── README.md ├── _config.yml ├── _includes ├── data.html ├── footer.html ├── header.html ├── htmlheader.html ├── taglist.html ├── whathowwho.html └── youtube.html ├── _layouts ├── default.html ├── index.html └── text.html ├── _scripts ├── copy-alt-on-click.md ├── current-doc-as-markdown.md ├── enable-all-elements.md ├── get-all-external-links.md ├── get-localstorage-size.md ├── get-url-data.md ├── headings-indented.md ├── headings.md ├── image-names.md ├── images-alt-text.md ├── images-as-markdown.md ├── links-images.md ├── list-thirdparty-fonts.md ├── list-thirdparty-scripts.md ├── make-document-editable.md ├── outline-all-elements.md ├── outline-fake-links.md ├── render-blocking-resources.md ├── show-element-at-cursor.md ├── take-screenshot.md └── template.md ├── assets ├── .DS_Store ├── dark-theme.css ├── light-theme.css ├── scripts.js └── styles.css ├── contribute.md └── index.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codepo8/dearconsole/5d78447deec9b28b3c2c48a64ce7b47d2641d3d2/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dear Console, … 2 | 3 | A repository of small scripts to be used in the browser developer tools console or as snippets to use the web more efficiently. 4 | 5 | See it in action at https://codepo8.github.io/dearconsole/ 6 | 7 | Pull requests and issues welcome! 8 | 9 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | markdown: kramdown 2 | highlighter: rouge 3 | collections: 4 | scripts: 5 | output: true -------------------------------------------------------------------------------- /_includes/data.html: -------------------------------------------------------------------------------- 1 | 22 | 41 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 |

Written by Christian Heilmann, @codepo8, available on GitHub

2 | 3 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codepo8/dearconsole/5d78447deec9b28b3c2c48a64ce7b47d2641d3d2/_includes/header.html -------------------------------------------------------------------------------- /_includes/htmlheader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ page.title }} 4 | 5 | 6 | 7 | 8 | {% if page.summary %} 9 | 10 | {% endif %} 11 | {% if page.heroimage %} 12 | 13 | {% endif %} 14 | 15 | 16 | 17 | {% if page.summary %} 18 | 19 | {% endif %} 20 | {% if page.heroimage %} 21 | 22 | {% endif %} 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /_includes/taglist.html: -------------------------------------------------------------------------------- 1 |
2 | {% assign taglist = '' %} 3 | {% for s in site.scripts %} 4 | {% if s.name != 'Say hello world' %} 5 | {% assign i = s.tags | join: ',' | append: ',' %} 6 | {% assign taglist = taglist | append: i %} 7 | {% endif %} 8 | {% endfor %} 9 | {% assign taglist = taglist | split: ',' | sort | uniq %} 10 | 11 | {% for tag in taglist %} 12 | {% if tag == '' %} {% continue %} {% endif %} 13 | 14 | {% endfor %} 15 |
-------------------------------------------------------------------------------- /_includes/whathowwho.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

What?

4 |

This is a repository of little scripts you can use in the browser console to achieve the described task. Hence, "Dear Console,…".

5 |
6 |
7 |

How?

8 |

To use the scripts shown here, you need to open the browser developer tools (pressing F12), open the Console tool, paste them in and hit `Enter`. If you use a Chromium based browser (Chrome, Edge, Brave, Opera, Vivaldi…) you can also use them in Snippets.

9 |
10 |
11 |

Who?

12 |

This collection is written and maintained by Chris Heilmann and you can contribute to it or request features on GitHub.

13 |
14 |
-------------------------------------------------------------------------------- /_includes/youtube.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include htmlheader.html %} 5 | 6 | 7 |
8 |

{{ page.title }}

9 |
10 | 11 | {{ content }} 12 |
13 | 14 | {% if page.author %} 15 | {% if page.authorlink %} 16 |

by {{ page.author }} 🎉

17 | {% else %} 18 |

by {{ page.author }} 🎉

19 | {% endif %} 20 | {% endif %} 21 | 22 |

Topics: {{ page.tags | join: ", " }}

23 | 24 |

Show all {{ site.scripts.size }} "Dear Console" snippets

25 | 26 | 27 | {% include whathowwho.html %} 28 |
29 | 30 | 31 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /_layouts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include htmlheader.html %} 5 | 6 | 7 |
8 | {% include header.html %} 9 |
10 |
11 |

Dear Console…

12 | 13 | {{ content }} 14 | 15 | {% include taglist.html %} 16 | 17 | {% include whathowwho.html %} 18 |
19 | 20 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /_layouts/text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include htmlheader.html %} 5 | 6 | 7 |
8 | {{ content }} 9 | 10 | 11 |

Show all "Dear Console" snippets

12 | 13 | 14 |
15 | 16 | 17 | 20 | 21 | -------------------------------------------------------------------------------- /_scripts/copy-alt-on-click.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, allow me to copy the alternative text of images by clicking them 3 | name: Allow me to copy the alternative text of images by clicking them 4 | codeexample: '$(±body±).addEventListener(±click±,e => { let alt = e.target.alt; if (alt) { navigator.clipboard.writeText(alt); console.log(±Copied:\n± + alt); e.preventDefault() } })' 5 | tags: accessibility, images, alternativetext 6 | layout: default 7 | --- 8 | 9 | {% highlight javascript %} 10 | $('body').addEventListener('click',e => { 11 | let alt = e.target.alt; 12 | if (alt) { 13 | navigator.clipboard.writeText(alt); 14 | console.log("Copied:\n" + alt); 15 | e.preventDefault() 16 | } 17 | }) 18 | {% endhighlight %} -------------------------------------------------------------------------------- /_scripts/current-doc-as-markdown.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, give me the current page as a markdown list link item 3 | name: Give me the current page as a markdown list link item 4 | layout: default 5 | codeexample: 'copy(`* [${$(±title±).innerText.trim()}](${document.location.href})`)' 6 | tags: document url markdown 7 | --- 8 | 9 | {% highlight javascript %} 10 | copy ( 11 | `* [${$('title').innerText.trim()}] 12 | (${document.location.href})` 13 | ) 14 | {% endhighlight %} -------------------------------------------------------------------------------- /_scripts/enable-all-elements.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, turn on all the disabled elements in the page 3 | name: Turn on all disabled elements in the page 4 | layout: default 5 | codeexample: '$$(±[disabled]±).forEach(e => e.disabled = false)' 6 | tags: disabledelements forms 7 | --- 8 | 9 | {% highlight javascript %} 10 | $$('[disabled]').forEach(e => e.disabled = false) 11 | {% endhighlight %} 12 | -------------------------------------------------------------------------------- /_scripts/get-all-external-links.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, give me a list of all the external links with their text as markdown 3 | name: Give me a list of all the external links with their text as markdown 4 | layout: default 5 | codeexample: 'copy($$(`a[href^=http]`).map(l => `[${l.innerText}](${l.href})`).join(`\n`))' 6 | tags: links markdown 7 | --- 8 | 9 | {% highlight javascript %} 10 | copy($$(`a[href^=http]`).map(l => 11 | `[${l.innerText}](${l.href})` 12 | ).join(`\n`)) 13 | {% endhighlight %} 14 | 15 | -------------------------------------------------------------------------------- /_scripts/get-localstorage-size.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, give me the current size of localstorage 3 | name: Give me the current size of localstorage 4 | codeexample: 'Object.entries(localStorage).reduce( (total, [key, value]) => total + (value.length*2 / 1024), 0 ).toFixed(2)' 5 | tags: localstorage 6 | layout: default 7 | author: Pankaj Parashar 8 | authorlink: https://pankajparashar.com 9 | --- 10 | 11 | {% highlight javascript %} 12 | Object.entries(localStorage) 13 | .reduce( (total, [key, value]) => total + (value.length*2 / 1024), 0 ) 14 | .toFixed(2) 15 | {% endhighlight %} 16 | -------------------------------------------------------------------------------- /_scripts/get-url-data.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, give me a list of all data from a GET URL 3 | name: Give me a list of all data from a GET URL 4 | layout: default 5 | codeexample: 'copy(Array.from(new URLSearchParams(window.location.search)).map(([key,val]) => `${key}: ${val}`).join(±\n±))' 6 | tags: url scraping 7 | author: Pankaj Parashar 8 | authorlink: https://pankajparashar.com 9 | --- 10 | 11 | {% highlight javascript %} 12 | copy( 13 | Array.from(new URLSearchParams(window.location.search)) 14 | .map(([key,val]) => `${key}: ${val}`) 15 | .join("\n") 16 | ) 17 | {% endhighlight %} 18 | -------------------------------------------------------------------------------- /_scripts/headings-indented.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, give me a table of contents of the document indented by heading level 3 | name: Give me a table of contents of the document indented by heading level 4 | layout: default 5 | codeexample: 'copy($$(±h1,h2,h3,h4,h5,h6±).map(h=>±\t±.repeat(h.tagName.slice(-1)-1)+±-±+h.innerText.trim()).join(±\n±))' 6 | tags: structure accessibility scraping 7 | --- 8 | 9 | {% highlight javascript %} 10 | copy($$('h1,h2,h3,h4,h5,h6') 11 | .map(h => '\t'.repeat(h.tagName.slice(-1)-1) + 12 | '- ' + h.innerText.trim()) 13 | .join('\n')) 14 | {% endhighlight %} -------------------------------------------------------------------------------- /_scripts/headings.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, give me a list of all headings and their level 3 | name: Give me a list of all headings and their level 4 | layout: default 5 | codeexample: '$$(±h1,h2,h3,h4,h5,h6±).map(h=>`${h.tagName.toLowerCase()}: ${h.innerText.trim()}`).join(±\n±)' 6 | tags: accessibility structure 7 | --- 8 | 9 | {% highlight javascript %} 10 | copy($$('h1,h2,h3,h4,h5,h6').map( 11 | h => `${h.tagName}: ${h.innerText.trim()}` 12 | ).join('\n')) 13 | {% endhighlight %} 14 | 15 | -------------------------------------------------------------------------------- /_scripts/image-names.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear console, give me the file names of images of the document without the rest of the URL 3 | name: Give me the file names of images of the document without the rest of the URL 4 | layout: default 5 | codeexample: 'copy($$(±img±).map(i=>i.src.split(±/±).pop()).join(±\n±))' 6 | tags: images media scraping 7 | --- 8 | 9 | {% highlight javascript %} 10 | copy($$('img').map( 11 | i=>i.src.split('/').pop()). 12 | join('\n')) 13 | {% endhighlight %} 14 | 15 | 16 | -------------------------------------------------------------------------------- /_scripts/images-alt-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, give me a list of all the images in the document with their alternative text 3 | name: Give me a list of all the images in the document with their alternative text 4 | layout: default 5 | codeexample: 'copy($$(±img±).map(i => `${i.alt}: ${i.src}`).join(±\n±))' 6 | tags: accessibility images 7 | --- 8 | 9 | {% highlight javascript %} 10 | copy($$('img').map( 11 | i => `${i.alt}: ${i.src}` 12 | ).join('\n')) 13 | {% endhighlight %} 14 | 15 | -------------------------------------------------------------------------------- /_scripts/images-as-markdown.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, give me all the images as markdown including their alternative text. 3 | name: Give me all the images as markdown including their alternative text. 4 | layout: default 5 | codeexample: 'copy($$(±section img±).map(i=>`![${i.alt}](${i.src})`).join(±\n±))' 6 | tags: markdown images scraping 7 | --- 8 | 9 | {% highlight javascript %} 10 | copy($$('section img').map( 11 | i => `![${i.alt}](${i.src})`).join('\n') 12 | ) 13 | {% endhighlight %} 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /_scripts/links-images.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, give me the URLs of all the image links in the document 3 | name: Give me the URLs of all the image links in the document 4 | layout: default 5 | codeexample: 'copy($$(±a±).filter(a => a.href.match(/\.(jpe?g|gif|png|webp)$/i)).map(i=>i.href).join(±\n±))' 6 | tags: images media scraping 7 | --- 8 | 9 | {% highlight javascript %} 10 | copy($$('a').filter( 11 | a => a.href.match( 12 | /\.(jpe?g|gif|png|webp)$/i 13 | )).map(i=>i.href).join('\n') 14 | ) 15 | {% endhighlight %} -------------------------------------------------------------------------------- /_scripts/list-thirdparty-fonts.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, give me a list of all third party fonts 3 | name: Give me a list of all third party fonts 4 | codeexample: 'copy(Array.from(document.fonts.keys()).map(font => font.family+±-±+font.weight))' 5 | tags: fonts 6 | layout: default 7 | author: Pankaj Parashar 8 | authorlink: https://pankajparashar.com 9 | --- 10 | 11 | {% highlight javascript %} 12 | copy( 13 | Array.from(document.fonts.keys()) 14 | .map(font => font.family + '-' + font.weight) 15 | ) 16 | {% endhighlight %} 17 | -------------------------------------------------------------------------------- /_scripts/list-thirdparty-scripts.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, give me a list of all third party scripts 3 | name: Give me a list of all third party scripts 4 | codeexample: 'copy(Array.from(document.scripts).map(script => script.src).filter(src => src && src.startsWith(window.location.origin)).join(±\n±))' 5 | tags: scripts 6 | layout: default 7 | author: Pankaj Parashar 8 | authorlink: https://pankajparashar.com 9 | --- 10 | 11 | {% highlight javascript %} 12 | copy( 13 | Array.from(document.scripts) 14 | .map(script => script.src) 15 | .filter(src => src && 16 | !src.startsWith(window.location.origin)) 17 | .join('\n') 18 | ) 19 | {% endhighlight %} 20 | -------------------------------------------------------------------------------- /_scripts/make-document-editable.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, make the current document editable 3 | name: Make the current document editable 4 | layout: default 5 | codeexample: 'document.designMode = ±on±' 6 | tags: editing scraping webdevelopment 7 | --- 8 | 9 | {% highlight javascript %} 10 | document.designMode = 'on' 11 | {% endhighlight %} -------------------------------------------------------------------------------- /_scripts/outline-all-elements.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, outline all elements on the page with a unique color per tag 3 | name: Outline all elements on the page with a unique color per tag 4 | layout: default 5 | codeexample: '$$(±*±).forEach(el => el.style.outline=`1px solid hsl(${ el.tagName.split(±±).reduce((sum, c)=> sum+=c.charCodeAt(0), 0) % 360 },99%,50%)`)' 6 | tags: css debugging 7 | author: Pankaj Parashar 8 | authorlink: https://pankajparashar.com 9 | --- 10 | 11 | {% highlight javascript %} 12 | $$('*').forEach(el => { 13 | let col = el.tagName.split(''). 14 | reduce( (sum, c) => sum+=c.charCodeAt(0), 0) % 360; 15 | el.style.outline = `1px solid hsl(${col}, 99%, 50%)` 16 | }) 17 | {% endhighlight %} 18 | -------------------------------------------------------------------------------- /_scripts/outline-fake-links.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear console, show a red outline around all links that aren't going anywhere 3 | name: Show a red outline around all links that aren't going anywhere 4 | layout: default 5 | codeexample: '$$(±a±).filter(l => l.href.match(/^#$|^javascript:/)).forEach((l)=>{l.style=±outline:10px solid firebrick±;})' 6 | tags: links accessibility javascript 7 | --- 8 | 9 | {% highlight javascript %} 10 | $$('a').filter( 11 | l => l.href.match(/^#$|^javascript:/)).forEach( 12 | l => {l.style='outline:10px solid firebrick';} 13 | ) 14 | {% endhighlight %} 15 | 16 | 17 | -------------------------------------------------------------------------------- /_scripts/render-blocking-resources.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, give me a list of all render blocking resources 3 | name: Give me a list of all render blocking resources 4 | layout: default 5 | codeexample: 'copy(window.performance.getEntriesByType(±resource±).filter(entry => entry.renderBlockingStatus === ±blocking± ).map(({name}) => name).join(±\n±))' 6 | tags: rendering 7 | author: Pankaj Parashar 8 | authorlink: https://pankajparashar.com 9 | --- 10 | 11 | {% highlight javascript %} 12 | copy( 13 | window.performance 14 | .getEntriesByType('resource') 15 | .filter(entry => entry.renderBlockingStatus === 'blocking' ) 16 | .map(({name}) => name) 17 | .join('\n') 18 | ) 19 | {% endhighlight %} 20 | -------------------------------------------------------------------------------- /_scripts/show-element-at-cursor.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, show me the element at the current cursor position 3 | name: Show me the element at the current cursor position 4 | layout: default 5 | codeexample: 'document.addEventListener(±mousemove±,e=>{console.log(document.elementFromPoint(e.x,e.y))})' 6 | tags: html debugging 7 | --- 8 | 9 | {% highlight javascript %} 10 | document.addEventListener('mousemove', e => { 11 | console.log( 12 | document.elementFromPoint(e.x,e.y) 13 | ) 14 | }) 15 | {% endhighlight %} 16 | -------------------------------------------------------------------------------- /_scripts/take-screenshot.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console, give me a screenshot of the page 3 | name: Give me a screenshot of the page 4 | layout: default 5 | codeexample: 'console.screenshot()' 6 | tags: screenshot 7 | author: Pankaj Parashar 8 | authorlink: https://pankajparashar.com 9 | --- 10 | 11 | Firefox: 12 | {% highlight javascript %} 13 | :screenshot // viewport 14 | :screenshot --clipboard // copy to clipboard 15 | :screenshot --fullpage // full page 16 | :screenshot --selector .header // node screenshot 17 | {% endhighlight %} 18 | 19 | Safari: 20 | {% highlight javascript %} 21 | console.screenshot() // viewport 22 | console.screenshot($('html')) // full page 23 | console.screenshot($('.header')) // node screenshot 24 | {% endhighlight %} 25 | -------------------------------------------------------------------------------- /_scripts/template.md: -------------------------------------------------------------------------------- 1 | --- 2 | # This is the title 3 | title: Dear Console, say hello world 4 | # This is what the link will display on the idex page 5 | name: Say hello world 6 | # This is the code example that will be added to the copy buttons 7 | # Every instance of ' needs to be replaced with ± and double 8 | # quotes should not be used 9 | codeexample: 'console.log(±hello world±)' 10 | # tags for the example 11 | tags: logging hello console 12 | # choose the default layout to render an HTML document 13 | layout: default 14 | author: Your name 15 | authorlink: your url 16 | --- 17 | 18 | {% highlight javascript %} 19 | console.log('hello world') 20 | {% endhighlight %} -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codepo8/dearconsole/5d78447deec9b28b3c2c48a64ce7b47d2641d3d2/assets/.DS_Store -------------------------------------------------------------------------------- /assets/dark-theme.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --codetext: #fff; 3 | --codebackground: #272822; 4 | --codeborder: #ccc; 5 | --background: #111; 6 | --text: #ccc; 7 | --line: #ccc; 8 | 9 | --link: skyblue; 10 | --innerlink: #329ac3; 11 | --deepestlink: #68838e; 12 | 13 | --headerbackground: #000; 14 | --headertext: #ffc107; 15 | --headershadow: #666; 16 | 17 | --h1colour: #4caf50; 18 | --h2colour: #2196f3; 19 | --h3colour: #cddc3c; 20 | --h4colour: #ccc; 21 | 22 | --stronglist: #4caf50; 23 | --pagetoclink: #ccc; 24 | 25 | --footercolour: #666; 26 | --footerlink: #959595; 27 | --footerbackground: #000; 28 | --footershadow: #666; 29 | 30 | --blocknamecolour: orange; 31 | --blockbackground: #000; 32 | --blocktopline: #666; 33 | --blockbottomline: transparent; 34 | --infoboxtext: #111; 35 | --infoboxbackground: #2196f3; 36 | --infoboxborder: #f8f8f8; 37 | --infoboxlink: #000; 38 | 39 | --tagbackground: #333; 40 | --tagbutton: #ccc; 41 | --tagborder: #666; 42 | 43 | 44 | } 45 | 46 | .highlight pre { background-color: #272822; } 47 | .highlight .hll { background-color: #272822; } 48 | .highlight .c { color: #75715e } /* Comment */ 49 | .highlight .err { color: #960050; background-color: #1e0010 } /* Error */ 50 | .highlight .k { color: #66d9ef } /* Keyword */ 51 | .highlight .l { color: #ae81ff } /* Literal */ 52 | .highlight .n { color: #f8f8f2 } /* Name */ 53 | .highlight .o { color: #f92672 } /* Operator */ 54 | .highlight .p { color: #f8f8f2 } /* Punctuation */ 55 | .highlight .cm { color: #75715e } /* Comment.Multiline */ 56 | .highlight .cp { color: #75715e } /* Comment.Preproc */ 57 | .highlight .c1 { color: #75715e } /* Comment.Single */ 58 | .highlight .cs { color: #75715e } /* Comment.Special */ 59 | .highlight .ge { font-style: italic } /* Generic.Emph */ 60 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 61 | .highlight .kc { color: #66d9ef } /* Keyword.Constant */ 62 | .highlight .kd { color: #66d9ef } /* Keyword.Declaration */ 63 | .highlight .kn { color: #f92672 } /* Keyword.Namespace */ 64 | .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */ 65 | .highlight .kr { color: #66d9ef } /* Keyword.Reserved */ 66 | .highlight .kt { color: #66d9ef } /* Keyword.Type */ 67 | .highlight .ld { color: #e6db74 } /* Literal.Date */ 68 | .highlight .m { color: #ae81ff } /* Literal.Number */ 69 | .highlight .s { color: #e6db74 } /* Literal.String */ 70 | .highlight .na { color: #a6e22e } /* Name.Attribute */ 71 | .highlight .nb { color: #f8f8f2 } /* Name.Builtin */ 72 | .highlight .nc { color: #a6e22e } /* Name.Class */ 73 | .highlight .no { color: #66d9ef } /* Name.Constant */ 74 | .highlight .nd { color: #a6e22e } /* Name.Decorator */ 75 | .highlight .ni { color: #f8f8f2 } /* Name.Entity */ 76 | .highlight .ne { color: #a6e22e } /* Name.Exception */ 77 | .highlight .nf { color: #a6e22e } /* Name.Function */ 78 | .highlight .nl { color: #f8f8f2 } /* Name.Label */ 79 | .highlight .nn { color: #f8f8f2 } /* Name.Namespace */ 80 | .highlight .nx { color: #a6e22e } /* Name.Other */ 81 | .highlight .py { color: #f8f8f2 } /* Name.Property */ 82 | .highlight .nt { color: #f92672 } /* Name.Tag */ 83 | .highlight .nv { color: #f8f8f2 } /* Name.Variable */ 84 | .highlight .ow { color: #f92672 } /* Operator.Word */ 85 | .highlight .w { color: #f8f8f2 } /* Text.Whitespace */ 86 | .highlight .mf { color: #ae81ff } /* Literal.Number.Float */ 87 | .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */ 88 | .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */ 89 | .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ 90 | .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ 91 | .highlight .sc { color: #e6db74 } /* Literal.String.Char */ 92 | .highlight .sd { color: #e6db74 } /* Literal.String.Doc */ 93 | .highlight .s2 { color: #e6db74 } /* Literal.String.Double */ 94 | .highlight .se { color: #ae81ff } /* Literal.String.Escape */ 95 | .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ 96 | .highlight .si { color: #e6db74 } /* Literal.String.Interpol */ 97 | .highlight .sx { color: #e6db74 } /* Literal.String.Other */ 98 | .highlight .sr { color: #e6db74 } /* Literal.String.Regex */ 99 | .highlight .s1 { color: #e6db74 } /* Literal.String.Single */ 100 | .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ 101 | .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ 102 | .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ 103 | .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ 104 | .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ 105 | .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ 106 | 107 | .highlight .gh { } /* Generic Heading & Diff Header */ 108 | .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ 109 | .highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */ 110 | .highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */ -------------------------------------------------------------------------------- /assets/light-theme.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background: #f8f8f8; 3 | --text: #333; 4 | --line: #111; 5 | 6 | --codetext: #111; 7 | --codebackground: #fcfcfc; 8 | --codeborder: #ccc; 9 | 10 | --link: #355e37; 11 | --innerlink: #1e5b74; 12 | --deepestlink: #46585f; 13 | 14 | --headerbackground: #eee; 15 | --headershadow: #ccc; 16 | --headertext: #369; 17 | 18 | --h1colour: #08790d; 19 | --h2colour: #04467b; 20 | --h3colour: #942a4e; 21 | --h4colour: #333; 22 | 23 | --stronglist: #355e37; 24 | --pagetoclink: #555; 25 | 26 | --footercolour: #555; 27 | --footerlink: #333; 28 | --footerbackground: #eee; 29 | --footershadow: #ccc; 30 | 31 | --blocknamecolour: #333; 32 | --blockbackground: #eee; 33 | --blocktopline: #ccc; 34 | --blockbottomline: transparent; 35 | 36 | --infoboxtext: #111; 37 | --infoboxbackground: skyblue; 38 | --infoboxborder:#369; 39 | --infoboxtext: #036; 40 | 41 | --tagbackground: #eee; 42 | --tagbutton: #666; 43 | --tagborder: #999; 44 | 45 | } 46 | 47 | .highlight .hll { background-color: #ffffcc } 48 | .highlight .c { color: #60a0b0; font-style: italic } /* Comment */ 49 | .highlight .err { border: 1px solid #FF0000 } /* Error */ 50 | .highlight .k { color: #007020; font-weight: bold } /* Keyword */ 51 | .highlight .o { color: #666666 } /* Operator */ 52 | .highlight .cm { color: #60a0b0; font-style: italic } /* Comment.Multiline */ 53 | .highlight .cp { color: #007020 } /* Comment.Preproc */ 54 | .highlight .c1 { color: #60a0b0; font-style: italic } /* Comment.Single */ 55 | .highlight .cs { color: #60a0b0; background-color: #fff0f0 } /* Comment.Special */ 56 | .highlight .gd { color: #A00000 } /* Generic.Deleted */ 57 | .highlight .ge { font-style: italic } /* Generic.Emph */ 58 | .highlight .gr { color: #FF0000 } /* Generic.Error */ 59 | .highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */ 60 | .highlight .gi { color: #00A000 } /* Generic.Inserted */ 61 | .highlight .go { color: #808080 } /* Generic.Output */ 62 | .highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */ 63 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 64 | .highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ 65 | .highlight .gt { color: #0040D0 } /* Generic.Traceback */ 66 | .highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */ 67 | .highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */ 68 | .highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */ 69 | .highlight .kp { color: #007020 } /* Keyword.Pseudo */ 70 | .highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */ 71 | .highlight .kt { color: #902000 } /* Keyword.Type */ 72 | .highlight .m { color: #40a070 } /* Literal.Number */ 73 | .highlight .s { color: #4070a0 } /* Literal.String */ 74 | .highlight .na { color: #4070a0 } /* Name.Attribute */ 75 | .highlight .nb { color: #007020 } /* Name.Builtin */ 76 | .highlight .nc { color: #0e84b5; font-weight: bold } /* Name.Class */ 77 | .highlight .no { color: #60add5 } /* Name.Constant */ 78 | .highlight .nd { color: #555555; font-weight: bold } /* Name.Decorator */ 79 | .highlight .ni { color: #d55537; font-weight: bold } /* Name.Entity */ 80 | .highlight .ne { color: #007020 } /* Name.Exception */ 81 | .highlight .nf { color: #06287e } /* Name.Function */ 82 | .highlight .nl { color: #002070; font-weight: bold } /* Name.Label */ 83 | .highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */ 84 | .highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */ 85 | .highlight .nv { color: #bb60d5 } /* Name.Variable */ 86 | .highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */ 87 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */ 88 | .highlight .mf { color: #40a070 } /* Literal.Number.Float */ 89 | .highlight .mh { color: #40a070 } /* Literal.Number.Hex */ 90 | .highlight .mi { color: #40a070 } /* Literal.Number.Integer */ 91 | .highlight .mo { color: #40a070 } /* Literal.Number.Oct */ 92 | .highlight .sb { color: #4070a0 } /* Literal.String.Backtick */ 93 | .highlight .sc { color: #4070a0 } /* Literal.String.Char */ 94 | .highlight .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */ 95 | .highlight .s2 { color: #4070a0 } /* Literal.String.Double */ 96 | .highlight .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */ 97 | .highlight .sh { color: #4070a0 } /* Literal.String.Heredoc */ 98 | .highlight .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */ 99 | .highlight .sx { color: #c65d09 } /* Literal.String.Other */ 100 | .highlight .sr { color: #235388 } /* Literal.String.Regex */ 101 | .highlight .s1 { color: #4070a0 } /* Literal.String.Single */ 102 | .highlight .ss { color: #517918 } /* Literal.String.Symbol */ 103 | .highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */ 104 | .highlight .vc { color: #bb60d5 } /* Name.Variable.Class */ 105 | .highlight .vg { color: #bb60d5 } /* Name.Variable.Global */ 106 | .highlight .vi { color: #bb60d5 } /* Name.Variable.Instance */ 107 | .highlight .il { color: #40a070 } /* Literal.Number.Integer.Long */ -------------------------------------------------------------------------------- /assets/scripts.js: -------------------------------------------------------------------------------- 1 | let copypopup = document.createElement('output'); 2 | copypopup.classList.add('popup'); 3 | copypopup.textContent = '☑️ Copied!'; 4 | document.body.appendChild(copypopup); 5 | 6 | const showcopied = snippet => { 7 | snippet = snippet.replaceAll('±',"'"); 8 | navigator.clipboard.writeText(snippet); 9 | console.log('Welcome to Console, paste away!'); 10 | document.body.classList.add('copied'); 11 | setTimeout(() => document.body.classList.remove('copied'), 1500); 12 | }; 13 | document.querySelector('#snippets')?.addEventListener('click', e => { 14 | let y = e.target.getBoundingClientRect().bottom; 15 | document.documentElement.style.setProperty('--mouse-y', y); 16 | if (e.target.tagName === 'svg') { 17 | showcopied(e.target.parentNode.dataset.snippet); 18 | } 19 | if (e.target.tagName === 'BUTTON') { 20 | showcopied(e.target.dataset.snippet); 21 | } 22 | }); 23 | const filterlist = tag => { 24 | let all = 0; 25 | let parent = document.querySelector('#snippets'); 26 | document.querySelectorAll('#snippets li').forEach(li => { 27 | if (li.classList.contains(tag) || tag === 'all') { 28 | li.classList.remove('hidden'); 29 | all++; 30 | } else { 31 | li.classList.add('hidden'); 32 | } 33 | }); 34 | if (all > 1) { 35 | parent.classList.add('multicolumn'); 36 | } else { 37 | parent.classList.remove('multicolumn'); 38 | } 39 | }; 40 | 41 | document.querySelector('#tags')?.addEventListener('click', e => { 42 | if (e.target.tagName === 'BUTTON') { 43 | e.preventDefault(); 44 | filterlist(e.target.dataset.tag); 45 | } 46 | }); -------------------------------------------------------------------------------- /assets/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --mouse-y: 0; 3 | } 4 | body { 5 | background:var(--background); 6 | color: var(--text); 7 | font-family: "Open Sans", "segoe ui", helvetica, arial, sans-serif; 8 | font-size: calc(.5em + 1vw); 9 | margin: 0; 10 | } 11 | article { 12 | padding: 0 2em; 13 | max-width: 40em; 14 | margin: 0 auto; 15 | } 16 | 17 | h1 { 18 | font-size: 3vmax; 19 | font-family: Pacifico,sans-serif; 20 | font-weight: normal; 21 | color: var(--h1colour); 22 | } 23 | .index h1 { 24 | font-family: "Pacifico", sans-serif; 25 | font-size: max(5vmax, 14px); 26 | margin: 0; 27 | padding: 0; 28 | font-weight: normal; 29 | color: var(--h1colour); 30 | } 31 | h2 { 32 | font-size: 1.2em; 33 | font-weight: normal; 34 | color: var(--h2colour); 35 | margin: 0 0 0.5em 0; 36 | } 37 | .back { 38 | text-align: right; 39 | } 40 | .back a { 41 | color: var(--link); 42 | text-decoration: none; 43 | padding: .2em .5em; 44 | border: 1px solid var(--link); 45 | display: inline-block; 46 | font-size: 1.2em; 47 | background-image: linear-gradient(to right,var(--tagbackground),var(--headershadow)); 48 | background-size: 0 100%; 49 | background-repeat: no-repeat; 50 | transition: background-size 400ms; 51 | } 52 | .back a:hover { 53 | background-size: 100% 100%; 54 | transition: background-size 400ms; 55 | } 56 | 57 | footer { 58 | font-size: .8em; 59 | padding: 1em 2em; 60 | margin-top: 5em; 61 | color: var(--footercolour); 62 | background: var(--footerbackground); 63 | border-top: 1px solid var(--footershadow); 64 | } 65 | footer a { 66 | color: var(--footerlink); 67 | } 68 | 69 | .embed-container { 70 | position: relative; 71 | padding-bottom: 56.25%; 72 | height: 0; 73 | overflow: hidden; 74 | max-width: 100%; 75 | } 76 | .embed-container iframe, 77 | .embed-container object, 78 | .embed-container embed { 79 | position: absolute; 80 | top: 0; 81 | left: 0; 82 | width: 100%; 83 | height: 100%; 84 | } 85 | div#snippets { 86 | display:flex; 87 | flex-direction: column; 88 | } 89 | #snippets li { 90 | display: flex; 91 | padding: .2em 0; 92 | } 93 | #snippets li.hidden { 94 | display: none; 95 | } 96 | ul#snippets { 97 | margin: 1em 0; 98 | padding: 0; 99 | } 100 | @media (min-width:30em) { 101 | .multicolumn { 102 | column-count: 2; 103 | } 104 | } 105 | #snippets li > a { 106 | display:block; 107 | padding: .2em .5em; 108 | line-height: 1.1; 109 | flex: 7; 110 | color: var(--link); 111 | text-decoration: none; 112 | font-size: .9em; 113 | } 114 | #snippets li:hover,#snippets li:focus-within { 115 | background: var(--link); 116 | transition: 400ms; 117 | } 118 | #snippets li:focus-within a, #snippets li:focus-within svg, 119 | #snippets li:hover a, #snippets li:hover svg { 120 | color: var(--background); 121 | stroke: var(--background); 122 | } 123 | button.copy { 124 | flex: 1; 125 | font-family: inherit; 126 | background: transparent; 127 | border: none; 128 | text-align: center; 129 | color: var(--text); 130 | font-size: 0.9em; 131 | flex-grow: 0; 132 | cursor: pointer; 133 | } 134 | div#snippets { 135 | position: relative; 136 | } 137 | div#snippets button.copy { 138 | position: absolute; 139 | top: 1em; 140 | right: .5em; 141 | } 142 | button.copytext { 143 | padding: .2em .5em; 144 | align-self: self-end; 145 | font-family: inherit; 146 | background: transparent; 147 | border: none; 148 | text-align: center; 149 | color: var(--text); 150 | font-size: 0.9em; 151 | cursor: pointer; 152 | border-top-left-radius: 5px; 153 | border-top-right-radius: 5px; 154 | border: 1px solid var(--codeborder); 155 | border: 1px 1px 0 1px; 156 | } 157 | button.copy svg { 158 | width: 1.5em; 159 | height: 1.5em; 160 | stroke: var(--link); 161 | } 162 | figure { 163 | margin: 0; 164 | padding: 0; 165 | } 166 | .highlight { 167 | color: var(--codetext); 168 | background: var(--codebackground);; 169 | border: 1px var(--codeborder) solid; 170 | border-radius: 3px; 171 | padding: .5em; 172 | } 173 | .highlight .highlight { 174 | border: none; 175 | padding: 0; 176 | } 177 | div.highlight { 178 | padding: 0 .5em; 179 | overflow: scroll; 180 | } 181 | ol li code { 182 | color: var(--codetext); 183 | display: inline-block; 184 | background: var(--codebackground);; 185 | border: 1px var(--codeborder) solid; 186 | border-radius: 3px; 187 | padding: 2px; 188 | } 189 | p a { 190 | color: var(--link); 191 | } 192 | output.popup { 193 | position: fixed; 194 | top: -20em; 195 | left: 50%; 196 | transform: translateX(-50%); 197 | padding: .5em 1em; 198 | background: #000; 199 | color: #fff; 200 | border: 2px solid #fff; 201 | transition: 400ms; 202 | border-radius: .5em; 203 | } 204 | .copied output.popup { 205 | top: calc(calc(var(--mouse-y) * 1px) - 2em) 206 | } 207 | .threecol { 208 | display: flex; 209 | gap: 1em; 210 | margin: 2em 0; 211 | flex-wrap: wrap; 212 | } 213 | .threecol > div { 214 | flex: 1; 215 | min-width: 10em; 216 | background: var(--infoboxbackground); 217 | color: var(--infoboxtext); 218 | } 219 | .threecol h2 { 220 | font-family: pacifico, cursive; 221 | margin: 0 0 .2em 0; 222 | background: var(--background); 223 | padding: .2em; 224 | border-bottom: 2px solid var(--infoboxborder); 225 | } 226 | .threecol > div:hover h2 { 227 | margin-top: -.2em; 228 | transition: 400ms; 229 | padding-bottom: .4em; 230 | } 231 | 232 | 233 | .threecol a { 234 | color: var(--infoboxlink); 235 | } 236 | .threecol p { 237 | padding:.2em .5em; 238 | line-height: 1.3; 239 | margin-top: 0; 240 | } 241 | #tags { 242 | margin: 1em 0; 243 | } 244 | #tags button { 245 | display: inline-block; 246 | margin: 0 .5em .5em 0; 247 | background:var(--tagbackground); 248 | color: var(--tagbutton); 249 | font-size: 1em; 250 | cursor: pointer; 251 | border: 1px solid var(--tagborder); 252 | padding: 2px 5px; 253 | border-radius: 5px; 254 | } -------------------------------------------------------------------------------- /contribute.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Contributing to Dear Console… 3 | name: Give me a list of all headings and their level 4 | layout: text 5 | --- 6 | 7 | # So you got something you want to tell the Console? 8 | 9 | Excellent, we'd love to add it here for all to benefit. The best way would be to go to the [GitHub Repo](https://github.com/codepo8/dearconsole) and add it yourself. If you're not familiar with GitHub, you can also [contact me on Twitter me about your snippet](https://twitter.com/codepo8) and I'll add it for you. 10 | 11 | ## How to contribute 12 | 13 | 1. Fork the repo 14 | 1. Add your snippet to the `_scripts` folder 15 | 1. Snippets are Markdown files with a YAML front matter. 16 | 1. You can take a look at the existing snippets or take the `template.md` file and alter it. 17 | 1. Once you have your snippet, create a pull request and we're off to the races 18 | 19 | Here is what the template looks like with comments to explain what each thing means. 20 | 21 | {% raw %} 22 | 23 | --- 24 | # This is the title 25 | title: Dear Console, say hello world 26 | # This is what the link will display on the idex page 27 | name: Say hello world 28 | # This is the code example that will be added to the copy buttons 29 | # Every instance of ' needs to be replaced with ± and double 30 | # quotes should not be used 31 | codeexample: 'console.log(±hello world±)' 32 | # tags for the example 33 | tags: logging hello console 34 | # choose the default layout to render an HTML document 35 | layout: default 36 | author: Your name 37 | authorlink: your url 38 | --- 39 | 40 | {% highlight javascript %} 41 | console.log('hello world') 42 | {% endhighlight %} 43 | 44 | {% endraw %} 45 | 46 | Thanks for contributing! -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dear Console,… - a collection of code snippets to use in the browser console 3 | layout: index 4 | --- 5 | 6 | --------------------------------------------------------------------------------