Skip to content

Instantly share code, notes, and snippets.

View grace-snow's full-sized avatar
🌈
Lovin learnin Vue, interested in Design Systems. Feedback always welcome

Grace Snow, CPACC grace-snow

🌈
Lovin learnin Vue, interested in Design Systems. Feedback always welcome
View GitHub Profile
@grace-snow
grace-snow / frontend-and-design-resources.md
Last active August 23, 2024 02:22
Loads of handy resources

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]]

@grace-snow
grace-snow / copyText.js
Created October 8, 2020 12:07
A jQuery snippet to copy text on button click, with the button wording briefly changing to give feedback to the user. NOTE: for modern browsers, there are simpler ways to do this. This solution needed to be jQuery and work in IE.
/**************************************
* 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) {
@grace-snow
grace-snow / resizableInputs.js
Last active October 8, 2020 12:00
A callback function to make text/number inputs resizable to their content. Remember, ch units are the width of 0 in a font, so this is not entirely accurate for small characters like decimal points or the number `1`.
/**************************************
* 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)
@grace-snow
grace-snow / outputCurrentYear.js
Created October 8, 2020 11:57
A little function to insert the current year into something like a copyright notice
// 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

@grace-snow
grace-snow / .csscomb.json
Created January 4, 2020 10:22
Css Comb config
{
"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>
@grace-snow
grace-snow / include-transactional-product-variables
Created November 28, 2017 15:17
Jekyll include for transactional emails
{% 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;">