Skip to content

Instantly share code, notes, and snippets.

View jasontcrabtree's full-sized avatar

Jason jasontcrabtree

1 follower · 16 following
View GitHub Profile
@jasontcrabtree
jasontcrabtree / printObject.js
Created May 17, 2021 23:46
Display a JS object on the page (in JSX/React) for quick debugging
<div>{JSON.stringify(objectVariable, null, 4)}</div>
@jasontcrabtree
jasontcrabtree / prisma-notes.prisma
Last active April 29, 2021 11:23
Prisma Schema Notes based on https://www.prisma.io/docs/concepts/components/prisma-schema/data-model
// Because Prisma Client is tailored to your own schema, you need to update it every time your Prisma schema file is changing by running the following command:
// npx prisma generate
// schema.prisma file is comprised of some admin setup, generator and datasource, and data model definitions
// Data model definition includes:
// - Models: Defines fields and relationships between models
// - Enum: Blocks of type-definitions
// - Attributes and functions that change fields and models: e.g. unique, primary_key, autoincrement, etc.
@jasontcrabtree
jasontcrabtree / prisma.bash
Created April 27, 2021 01:25
Prisma magic commands
# Last Udpated: 27th April 2021
# https://www.prisma.io/docs/reference/api-reference/command-reference/
# To actually create the tables in your database, you now can use the following command of the Prisma CLI:
npx prisma db push --preview-feature
# Because Prisma Client is tailored to your own schema, you need to update it every time your Prisma schema file is changing by running the following command:
npx prisma generate
@jasontcrabtree
jasontcrabtree / file-link.liquid
Created May 27, 2020 20:09
Scaffold Liquid Blog Link Structure
@jasontcrabtree
jasontcrabtree / vertical-center.css
Created April 14, 2020 22:58
Vertical Center on a fully fluid height (taken from Create-React-App)
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
@jasontcrabtree
jasontcrabtree / variables-layout-article.css
Last active June 1, 2019 17:59
Creating Size Utility Variables
:root {
/* An 8px variable */
--utility-8: 8px;
/* An 24px variable */
--utility-24: 24px;
/* Creating an 'auto' size variable */
--utility-auto: auto;
@jasontcrabtree
jasontcrabtree / variables-article.css
Last active June 1, 2019 17:48
A beginners introduction to using CSS Variables
/*------ Step One: ------*/
/* Setting a blue hex-code as our variable */
--favourite-blue: #464794;
/*------ Step Two: ------*/
/* Making the border of our website blue */
border-color: var(--favourite-blue);
@jasontcrabtree
jasontcrabtree / seed-typography
Created May 10, 2019 20:19
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
h1 {
font-size: 28px;
}
h2 {
font-size: 26px;
@jasontcrabtree
jasontcrabtree / fcc-footer-card.html
Created May 3, 2019 16:52
@jasontcrabtree
jasontcrabtree / gist:a236f469789ae6325f9a0bc64f56c200
Created September 26, 2018 10:13
Ajax.js file to pull data from GitHub API using XML / HTTP Request (GET)
var a = new XMLHttpRequest();
a.addEventListener('readystatechange', function(r) {
if (r.target.status === 200) {
console.log(r.target.response);
}
});
a.open('GET', 'https://api.github.com/users/jasontcrabtree', true);
a.send();