Skip to content

Instantly share code, notes, and snippets.

View ThatGuySam's full-sized avatar
🍉
Discovering the wonders of JAMStack

Sam Carlton ThatGuySam

🍉
Discovering the wonders of JAMStack
176 followers · 289 following
View GitHub Profile
@ThatGuySam
ThatGuySam / vimeo-playerjs-methods.txt
Last active January 22, 2019 15:12
A list of methods for the player instance from Vimeo's Player.js as of January 2019
Example: player._addCard(options)
_addCard
_fireEvent
_hideOutro
_overrideControlbarBehavior
_removeCard
_setControlbarVisibility
_setEmailCapture
_setEmbedEditor
@ThatGuySam
ThatGuySam / una-full-width.css
Last active January 7, 2019 15:36
Una Kravet's Formula for breaking out of a parent container to fill the page's full width https://twitter.com/Una/status/951519740840873984
// Una Kravet's Formula for breaking out of a parent container to fill the page's full width
/*
This can be used to make an element the full-width of the page is *most* cases
Original Idea: https://twitter.com/Una/status/951519740840873984
*/
.una-full-width {
width: 100vw;
@ThatGuySam
ThatGuySam / getContrastYIQ.js
Created November 1, 2018 21:04
Gets a contrasting color based on YIQ equation - Source: https://24ways.org/2010/calculating-color-contrast/
function getContrastYIQ(hexcolor){
var r = parseInt(hexcolor.substr(0,2),16);
var g = parseInt(hexcolor.substr(2,2),16);
var b = parseInt(hexcolor.substr(4,2),16);
var yiq = ((r*299)+(g*587)+(b*114))/1000;
return (yiq >= 128) ? 'black' : 'white';
}
@ThatGuySam
ThatGuySam / dev-switcher.js
Created November 1, 2018 20:33
Switches between dev and production resources - Designed to work with Laravel Mix + Valet + Zeit's Now
var sectionId = '';
var isDev;
var assetDomain = 'https://production.now.sh';
if(window.localStorage) {
isDev = localStorage.getItem("isDev");
}
if (isDev) {
@ThatGuySam
ThatGuySam / classGroups.html
Created September 5, 2018 16:46
Class groups for default styles built classes
<!-- Blade -->
<div class="{{ $classList }} {{ $spacingClasses ?? 'm-3' }} {{ $colorClasses ?? 'text-light' }}">
</div>
<!-- Vue -->
<div :class="`${ classList } ${ spacingClasses || 'm-3' } ${ colorClasses || 'text-light' }`">
</div>
@ThatGuySam
ThatGuySam / vc_reverse-rows.css
Last active August 6, 2018 18:36
Reverse Rows in Visual Composer
/*
* Just add vc_reverse-rows to the classes of what you want to reverse
*/
.vc_reverse-rows .col {
flex-direction: row-reverse;
}
@ThatGuySam
ThatGuySam / facebook.js
Last active December 3, 2018 20:34
Promise-based Facebook Javascript SDK for ES6 - React, Vue, etc...
/*
This a helper for adding Facebook's Javascript SDK in a modern development environment with build tools.
Runs as a promise so you can run:
await const FB = facebook()
OR
facebook().then((FB) => {
})
and then know that your facebook SDK is initialized
It also should work with fullstack frameworks like Next.js and Nuxt.js
@ThatGuySam
ThatGuySam / crops-toward-focal-point.scss
Last active September 15, 2018 23:21
Crops toward focal point instead of center of image
// Cropping towards a focal point
/*
This controls where the image is cropped toward as
the design flows around it responsively.
This would be the same as a focal point in photography.
Original Idea: https://designshack.net/articles/mobile/focal-point-intelligent-cropping-of-responsive-images/
*/
@ThatGuySam
ThatGuySam / fullNameToFirstName.php
Created February 13, 2018 21:05 — forked from stilliard/fullNameToFirstName.php
PHP - Get a users first name from the full name
<?php
/**
* Get a users first name from the full name
* or return the full name if first name cannot be found
* e.g.
* James Smith -> James
* James C. Smith -> James
* Mr James Smith -> James
* Mr Smith -> Mr Smith
@ThatGuySam
ThatGuySam / hide-fbccp.css
Last active January 24, 2018 18:05
Hide Facebook Customer Chat Plugin
.fb_dialog,
.fb_dialog.fb_dialog_advanced.fb_shrink_active,
.fb_iframe_widget iframe,
.fb_dialog_content iframe {
display: none;
}