silicakes

//	a string interpolator, extending the String object,
//	returns a new string with the values in the curly braces replaced
//	with the ones provided by a passed object.

String.prototype.interpolate = function(obj) {
	var buf = this;
	for(x in obj) {
		var re = new RegExp("{"+x+"}","g");
		buf = buf.replace("{"+x+"}", obj[x]);
	}

silicakes

// sometimes it easier to select something constant rather than amorphic
// the following function allows the inversion of such regular expression
// while returning an array of the inverted matched results

//<regex> | object - the desired regular expression
//<str> | string - the string on which the manipulation will occur
//<clear> | boolean - whether should the return array be emptied out of empty cells:  ["",1,2,""] -> [1,2]

function invertRegex(str, regex, clear) {
  var arr = str.split(regex);

silicakes

/**
 * @description Returns all image/font/whatever URLs from all stylesheets present in the document
 * @param styles {object|StyleSheetList} https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList
 * @returns {array|string}
 */
function getURLsFromCSS(styles) {
    var urls = [];
    
    for (var x in styles) {
        var style = styles[x];

silicakes

<div class="switch-wrapper">
  <input type="checkbox" class="checkbox" id="checkbox"/>
  <label for="checkbox" class="switch" data-off="off" data-on="on"/>
</div>

silicakes

/*
* @description
*   ported from Clojure's own [(every-pred)](https://clojuredocs.org/clojure.core/every-pred)
*   array.everyPred(pred0, pred1...predN)
*
*   From Clojure's documentation:
*   Takes a set of predicates and returns a function f that returns true if all of its composing predicates return a logical true
*   value against all of its arguments, else it returns false. 
*   Note that f is short-circuiting in that it will stop execution on the first argument that triggers a - 
*   logical false result against the original predicates.

silicakes

import * as React from "react";
import { PropertyControls, ControlType } from "framer";

const style: React.CSSProperties = {
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    textAlign: "center",
    color: "#8855FF",

silicakes

import * as React from "react";
import { render } from "react-dom";

import "./styles.css";

function App(props) {
  return (
    <div className="App">
      <h1> {props.text}</h1>
    </div>

silicakes

import * as React from "react";
import { render } from "react-dom";

import "./styles.css";

function App(props) {
  return (
    <div className="App">
      <h1> {props.text}</h1>
    </div>

silicakes

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { data } from "./Examples";

export class ClickTrigger extends React.Component<any> {
	static propertyControls: PropertyControls = {
		number: { type: ControlType.Number, defaultValue: 0 }
	};

	onClick = () => {

silicakes

// Threading macros, also known as arrow macros, 
// convert nested function calls into a linear flow of function calls, 
// improving readability. The idea is similar to 'pipelining'

const double = str => `${str} ${str}`;
const reverse = str => str.split("").reverse().join('');
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
const pad = (maxLength, chr = ' ') => str => str.toString().padEnd(maxLength, chr);

const thread = function thread(...args) {