Skip to content

Instantly share code, notes, and snippets.

@zlwaterfield
zlwaterfield / convert-figma-variables-to-tailwind-config.py
Created February 19, 2024 16:22
Convert Figma variable export to Tailwind color config
# Export from https://www.figma.com/community/plugin/1256972111705530093/export-import-variables
import json
app_name = "{fill_in}" # Make sure to replace this.
def rgba_to_string(rgba):
"""Convert RGBA color values to an RGBA string."""
r = int(rgba['r'] * 255)
g = int(rgba['g'] * 255)
try {
let sig = req.headers['stripe-signature'];
let ev = stripe.webhooks.constructEvent(req.body, sig, env.endpointSecret);
if (ev) done(null, ev);
} catch (e) {
return res.sendStatus(401);
}
// Stripe Webhooks
app.post('/api/v1/webhooks', bodyParser.raw({ type: '*/*' }), webhooks.index);
// Parse body to into JSON
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
// All other routes
app.use('/', routes);
// Get signed_key
const msgKey = getSignedKey(req.body.text);
// Verify key
const keyContents = verifyKey(msgKey);
// Get the message that is being responded too
const prevMessage = await db.message.findById(keyContents.id);
// Validate the sender is in this conversation / allowed to respond
const verifiedSender = await verifySender(keyContents, prevMessage);
// Parse message data
const emailMessage = parseEmail(req.body.text);
import multer from 'multer';
// SendGrid inbound emails
app.post(/api/inbound_emails’, multer().any(), inbound.index);
//Other routes and body parsing
...
$timeline-num-line-items: 10;
$timeline-item-transition-delay: 0.5s;
.timeline.is-visible {
animation: draw ($timeline-num-line-items * $timeline-item-transition-delay - $timeline-item-transition-delay) $timeline-item-transition-delay * 3 1 linear forwards;
}
@keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
scrollReveal(elem) {
const className = 'is-visible';
const ratio = .9;
const isElementInViewport = (el) => {
let rect = el.getBoundingClientRect();
return (
rect.top > 0 &&
rect.top <= window.innerHeight * ratio
);
};
.timeline {
position: absolute;
width: 100%;
height: auto;
top: 64px;
left: -5px;
stroke-width: 3px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 4250;
scale() {
// At 350px screen width the pathHeight coefficient should be 1
const startPathHeight = 1;
const startScreenWidth = 350;
// At 450px screen width the pathHeight coefficient should be .69
const midPathHeight = .69;
const midScreenWidth = 450;
// At 600px screen width the pathHeight coefficient should be .48
const endPathHeight = .48;
const endScreenWidth = 600;
<svg class="timeline" scale scroll-reveal viewBox="0 0 100 600" preserveAspectRatio="none">
<path class="hide-gt-xs" d={`M 70 1 h 18 a 10 10 0 0 1 10 10 v ${pathHeight} a 10 10 0 0 1 -10 10 h -20 h -57 a 10 10 0 0 0 -10 10 v ${pathHeight} a 10 10 0 0 0 10 10 h 78 a 10 10 0 0 1 10 10`} />
<path class="hide-xs hide-gt-sm" d="M 70 1 h 18 a 10 10 0 0 1 10 10 v 59 a 10 10 0 0 1 -10 10 h -20 h -57 a 10 10 0 0 0 -10 10 v 68 a 10 10 0 0 0 10 10 h 78 a 10 10 0 0 1 10 10" />
<path class="hide-xs hide-sm" d={`M 50 1 h 20 a 10 10 0 0 1 10 10 v ${pathHeight} a 10 10 0 0 1 -10 10 h -20 h -30 a 10 10 0 0 0 -10 10 v ${pathHeight} a 10 10 0 0 0 10 10 h 60 a 10 10 0 0 1 10 10`} />
</svg>