If you want to upskill and stay up to date on new tech, it's worth keeping an eye on some of these resources. Check out the links, sign up to email lists that iterest you or follow the authors on social media.
Please feel free to suggest more if I've missed something mega! :)
[[TOC]]
| /************************************** | |
| * Copy text (jQuery) | |
| */ | |
| /* | |
| * HOW TO USE: | |
| * 1. Select text: <span id="[unique id of text to be copied]">[text to copy]</span> | |
| * 2. Run script on next button: <button type="button" class="button button--link-style" onClick="copyToClipboard($('#[id of text to be copied]'))" aria-label="Copy [text or description of text to be copied] to your clipboard">Copy</button> | |
| */ | |
| function copyToClipboard(element) { |
| /************************************** | |
| * Make any inputs resizable to their content | |
| */ | |
| function resizeInput() { | |
| this.style.width = this.value.length + "ch"; | |
| this.style.minWidth = "1ch"; | |
| } | |
| function makeInputsResizeble(){ | |
| var resizableInputs = document.querySelectorAll('.js-input-resize'); // get all resizable inputs (nodelist) |
| // Insert year into footer | |
| function outputCurrentYear() { | |
| const today = new Date(); | |
| const currentYear = today.getFullYear(); | |
| const el = document.querySelector('#copyright-year'); | |
| el.innerHTML = currentYear; | |
| } | |
| outputCurrentYear(); |
Highlighting
2gua.rainbow-brackets - bracket highlights
cobaltblu27.rainbow-highlighter - highlight multiple variables you select
SirTori.indenticator - highlights indent level
vincaslt.highlight-matching-tag
luqimin.velocity - velocity syntax highlighting used in HSV / L2S theme portals
letrieu.expand-region - Expand selected text out from current selection
Comments
| { | |
| "remove-empty-rulesets": true, | |
| "always-semicolon": true, | |
| "color-case": "upper", | |
| "block-indent": " ", | |
| "color-shorthand": true, | |
| "element-case": "lower", | |
| "eof-newline": true, | |
| "leading-zero": true, | |
| "quotes": "single", |
| --- | |
| layout: transactional/transactional-main | |
| product: "Nexus / Perspective / Perspective Lite / Balance" | |
| category: | |
| - triggers | |
| - transactional | |
| - nexus | |
| - psp--all | |
| - psp--full |
| <!-- 1 Column Text : BEGIN --> | |
| <tr> | |
| <td bgcolor="#ffffff"> | |
| <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> | |
| <tr> | |
| <td style="padding: 40px; font-family: 'Open Sans',Arial,Helvetica,sans-serif; font-size: 18px; line-height: 140%; color: {{color-body}};"> | |
| <p style="margin: 0;"> | |
| text | |
| </p> | |
| </td> |
| {% include transactional/vars-{{page.product | replace: " ", "-"}}.html %} |
| <!-- 2 Even Columns, Img + Text : BEGIN --> | |
| <tr> | |
| <td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%" style="padding-bottom: 40px"> | |
| <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:560px;"> | |
| <tr> | |
| <td align="center" valign="top" width="50%"> | |
| <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;"> | |
| <tr> | |
| <td style="text-align: center; padding: 0 10px;"> | |
| <img src="[TO-DO]" width="200" height="[TO-DO]" alt="[TO-DO]" border="0" align="center" style="width: 100%; max-width: 200px; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 140%; color: #555555;"> |