Skip to content

Instantly share code, notes, and snippets.

View csandman's full-sized avatar

Chris Sandvik csandman

View GitHub Profile
@csandman
csandman / parse-emojis.js
Created September 24, 2019 02:48
A JS function to pull all emojis from a string into a new array (From lodash)
function parseEmojis(str) {
return str.match(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/);
}
@csandman
csandman / Contributing.md
Created September 20, 2019 14:51
Contributing to open source on github
  1. Fork the repo
  2. Clone the repo
  3. git checkout -b NEW_BRANCH
  4. git remote add upstream ORIGINAL_REPO_URL
  5. Make changes
  6. Commit and push changes
  7. Open your repo on Github
  8. Click Compare & pull request
  9. Enter description
  10. Click Create pull request
@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": {
@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 / react-scripts-env-priorities.md
Last active December 6, 2024 15:09
The priorities of different .env files used in different React scripts

What other .env files can be used?

Note: this feature is available with [email protected] 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 / 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 / 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 / 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 / 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 / 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;