Skip to content

Instantly share code, notes, and snippets.

View csandman's full-sized avatar

Chris Sandvik csandman

59 followers · 73 following
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 / 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 / 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 / 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 / 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 / popup-center.md
Last active November 26, 2019 14:19
Center a popup window with 1 or 2 monitors

A somewhat niche problem is opening a centered popup window when you have multiple monitors. One you case you might encounter for this is opening a Twitter Web Intent window, which creates a tweet for a user to post. Here is their recomended code for opening a Web Intent popup:

(function() {
  if (window.__twitterIntentHandler) return;
  var intentRegex = /twitter\.com\/intent\/(\w+)/,
      windowOptions = 'scrollbars=yes,resizable=yes,toolbar=no,location=yes',
      width = 550,
      height = 420,
      winHeight = screen.height,