Skip to content

Instantly share code, notes, and snippets.

View csandman's full-sized avatar

Chris Sandvik csandman

View GitHub Profile
@csandman
csandman / download-file.js
Created May 20, 2019 20:27
JS Download Function
function download(filename, filepath) {
let element = document.createElement('a');
element.setAttribute('href', filepath);
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
@csandman
csandman / GoogleMap.js
Last active May 28, 2019 16:20
A bare-bones React component for using the Google Maps API
// takes props:
// apiKey: string
// mapOptions: object
// mapID: string
// onMapLoad: function(mapOject)
// mapLibraries: array[string]
// Function Version
@csandman
csandman / isOpenNow.js
Created May 29, 2019 18:55
Calculate if a place is open based on the hours returned from the Google Places API
function isOpenNow(place) {
const date = new Date();
const day = date.getDay();
const hours = date.getHours();
const minutes = date.getMinutes();
const currentTime = (day * 24 + hours) * 60 + minutes;
// calculate the current number of minutes into the week
let currentlyOpen = false;
@csandman
csandman / center.css
Created June 6, 2019 18:26
Different ways to center an element with CSS
.container {
position: relative;
}
.object: {
position: absolute;
top: 50%; // moves the element 50% from the top of the container
left: 50%; // moves the element 50% from the left of the container
transform: translate(-50%, -50%); // move the element back up and to the left half of its total size
}
@csandman
csandman / grid-with-flex.scss
Last active June 10, 2019 19:22
Grid with flex-wrap, a single container, and a variable gap value
$gap: 1rem;
.grid {
display: flex;
margin: 0 calc(#{$gap} / -2) -$gap calc(#{$gap} / -2);
flex-wrap: wrap;
}
.item {
flex: 0 0 auto;
@csandman
csandman / convert-address-components.js
Last active October 30, 2019 17:12
Convert the address components from a google places api request to a readable format
// ---------------------------------------------------------------------- //
// https://developers.google.com/maps/documentation/geocoding/intro#Types //
// ---------------------------------------------------------------------- //
// returns:
// {
// address_1
// address_2
// city
@csandman
csandman / get-dad-joke.js
Created August 29, 2019 18:49
Get a random dad joke from icanhazdadjoke.com
const getDadJoke = async () => {
const dadJoke = await fetch("https://icanhazdadjoke.com/", {
headers: {
Accept: "application/json"
}
});
const dadJokeJSON = await dadJoke.json();
if (dadJokeJSON.status === 200) {
return dadJokeJSON.joke;
} else {
@csandman
csandman / react-scripts-env-priorities.md
Last active December 15, 2023 00:17
The priorities of different .env files used in different React scripts

What other .env files can be used?

Note: this feature is available with react-scripts@1.0.0 and higher.

  • .env: Default.
  • .env.local: Local overrides. This file is loaded for all environments except test.
  • .env.development, .env.test, .env.production: Environment-specific settings.
  • .env.development.local, .env.test.local, .env.production.local: Local overrides of environment-specific settings.

Files on the left have more priority than files on the right:

@csandman
csandman / minimum-contrast.js
Last active May 17, 2022 07:20
Calculate the minimum shade or tint of a color in order to get a W3C compliant contrast between them
// https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
function getMinContrastColor(rgb, isLargeFont) {
const minContrastRatio = isLargeFont ? 3.0 : 4.5;
let contrastIsDark = isContrastDark(rgb);
let i = 0.01;
let contrastRgb = [];
let contrastRatio = 0;
while (contrastRatio < minContrastRatio && i < 1) {
contrastRgb = calculateGradient(rgb, contrastIsDark, i);
@csandman
csandman / package.json
Created September 19, 2019 15:37
Eslint and Prettier package.json config with git hooks
{
"name": "eslint-prettier-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
},
"scripts": {