Classy Scratch Notes

Log MobX Store in Brick

console.log(block, '🧱') // eslint-disable-line no-console
console.log(campaignTemplate, '💅') // eslint-disable-line no-console

console.log(JSON.parse(JSON.stringify(block)), '🧱') // eslint-disable-line no-console
console.log(JSON.parse(JSON.stringify(campaignTemplate)), '💅') // eslint-disable-line no-console

ClassyQL Usage example => For setting up classy node, use stripe payout reconciliation: src/helpers/initialize.ts => packages/apps/server/src/config/routes/classyql.js

{
  "name": "@classy/react-classyql",
  "version": "2.0.5",
  "description": "Functions and React Components for ClassyQL",
  "main": "module/index.js",
  "license": "SEE LICENSE IN LICENSE",
  "sideEffects": false,
  "classy": {
    "publishable": true
  },
  "scripts": {
    "build": "yarn generate &&  yarn transpile && yarn flow-copy",
    "generate": "yarn clean && BABEL_ENV=es5 babel --root-mode upward src --ignore src/index,src/__mocks__ -d lib && yarn copy-index && node lib/script",
    "transpile": "yarn babelify && yarn flow-copy",
    "babelify": "rimraf module && babel --root-mode upward lib -d module",
    "flow-copy": "flow-copy-source -v lib module",
    "babel-node": "BABEL_ENV=es5 babel --root-mode upward src -d lib",
    "copy-index": "mkdir -p lib && cp src/index.js lib/",
    "clean": "rimraf src/debug && rimraf lib && rimraf module"
  },
  "devDependencies": {
    "babel-polyfill": "^6.26.0",
    "concurrently": "^3.5.1",
    "graphql": "^15.5.0",
    "lodash": "^4.17.10"
  }
}

FRS API Research

xp.getCampaign.js # retrieveTheme => classy-node GET url/version/campaigns/campaignID/themes

AngularJS Stuff

Highlight an Angular DOM element and then execute angular.element($0).scope()

Raw

Classy_Prod_Routes.md

Classy Production Routes

/admin
/admin/*
/api-updates*
/api/*
/blog*
/c/*
/callback
/campaign/*
/careers*
/charge
/charge/
/charity/*
/checkout/*
/classy-100*
/classy-account*
/classy-admin/*
/classy-api*
/classy-awards*
/classy/*
/collaborative*
/community-guidelines*
/company/*
/contacts/*
/contactus*
/crowdfunding-campaigns*
/css/*
/customers*
/disaster-relief-fundraising*
/dist/*
/donation-*
/donation/*
/event/*
/events/*
/frs-api/*
/fundraise
/fundraise/*
/fundraiser/*
/fundraising-*
/fundraising-benchmark-assessment*
/getting-started-with-classy*
/give/*
/giving-tuesday
/giving-tuesday/*
/giving-tuesday/*
/givingtuesdaynow
/givingtuesdaynow/*
/holiday-fundraising-ideas*
/hubspot-migration*
/images/*
/integrations
/integrations/*
/js/*
/login
/manage/*
/member/*
/npo/*
/oauth2/*
/online-fundraising-company*
/oops
/org-api*
/our-impact*
/our-story*
/passport-international-fundraising*
/peer-to-peer-fundraising*
/pricing*
/products*
/profile
/profile/*
/questionaire/*
/recurring-giving-campaigns*
/recurring/*
/reports/*
/rest_order/*
/rest_reports/*
/robots.txt
/salesforce-integration*
/scripts/*
/search/*
/sf-versions*
/simple-url/*
/sitemap.xml
/sso
/sso/*
/ssobuild/*
/start/*
/static/*
/studio
/studio/*
/stylesheets/*
/support/*
/supporter-management*
/team/*
/terms*
/tour/*
/trident*
/vendor/marketo-error-handling.js
/why-classy/*

Raw

interview-qa.md

CSS Grid Solution

// Add styles here
const FeedUL = styled.ul`
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 20px;

  @media (min-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
  }

  li > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: rgb(67, 205, 253);
  }
`;

Flexbox Solution

// Add styles here
const FeedUL = styled.ul`
  display: flex;
  flex-wrap: wrap;

  li {
    width: 100%;
    flex: 1;

    @media (min-width: 1024px) {
      width: 50%;
    }
  }

  li > span:first-child {
    --dims: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--dims);
    width: var(--dims);
    border-radius: 50%;
    background-color: rgb(67, 205, 253);
  }
`;

// Only add styles here, make use of selectors if styling any children.
const FeedUL = styled.ul`
    // mobile first one column
    column-count: 1;

    @media (min-width: 1024px) {
      column-count: 2;
    }
`;

Raw

Svelte_Demo.md

🏃‍♂️🏋️‍♂️ Get Svelte in the New Year 🏃‍♀️🏋️‍♀️

The Elevator Pitch: Svelte is a way to build Web UIs that is fast, small, and intuitive because it utilizes the native web platform.

What is Svelte?

Svelte, currently in its third revision, is a front end framework in the same vein as React, Vue.js, or Angular. It’s similar in that it helps you paint pixels on a web page. It’s different in a lot of other ways. It is more of a Domain Specific Language (DSL) that gets transpiled down to browser native JS. Svelte is more of a transpiler like TypeScript than a traditional Front-End library or framework. It is often referred to as the disappearing framework.

The execution time is fast because Svelte surgically updates only the parts of the DOM that change. In contrast to React, Vue.js, and other Virtual DOM frameworks, Svelte doesn’t use a virtual DOM.

While VDOM frameworks are spending time rendering your components into an invisible tree before they commit changes to the real DOM, Svelte skips that middle step and goes straight for the update. Even though updating the DOM might be slow, Svelte can do it quickly because it knows exactly which elements changed.

Background on Svelte

Svelte was created by Rich Harris while working at the New York Times as a graphics editor. Before Svelte, he also created Ractive.js and Rollup.js
Rich Harris now works for Vercel as the full time maintainer of Svelte and SvelteKit.
Version 3 of Svelte is written in TypeScript and was released on 21 April 2019.
The SvelteKit web framework was announced in October 2020 and entered beta in March 2021.

Classy Demo App

Other UI Component Frameworks

Additional Resources

Supporting Tools and Libraries

Tailwind CSS
Storybook
WebPack
Vite
Any libraries made for vanilla JS environments

ggrumbley/Classy.md