Instantly share code, notes, and snippets.

View laravel.bash
// Add model (with all: factory, seed, migration)
php artisan make:model
View touchormouse.js
document.documentElement.addEventListener("mouseover", (el) => {
document.documentElement.classList.add("is-mouse");
});
document.documentElement.addEventListener("touchstart", (el) => {
document.documentElement.classList.add("is-touch");
});
View Contract.md

Between Johnathan Smith

And [customer name].

Summary:

We’ll always do our best to fulfill your needs and meet your expectations, but it’s important to have things written down so that we both know what’s what, who should do what and when, and what will happen if something goes wrong. In this contract you won’t find any complicated legal terms or long passages of unreadable text. We’ve no desire to trick you into signing something that you might later regret. What we do want is what’s best for both parties, now and in the future.

So in short;

View PrintLinkInCSSPrintOnly.css
@media only print {
a[href]:after {
content: " (" attr(href) ")"
}
}
View SyncMediaQueriesJavaScript.css
/** Great way to sync media queries with your javascript: https://mobile.twitter.com/selbekk/status/975145895909117952 **/
body::before {
content: ‘small’,
display: none;
}
@media all and (min-width: 1000px) {
body::before {
content: ‘medium’;
}
View CenterButtonText.css
.btn {
display: inline-flex;
align-content: center;
align-items: center;
}
View rationalize.css
/** taken from https://github.com/niksy/rationalize.css/blob/master/index.css **/
@import url('normalize.css');
@import url('opinionate.css');
/**
* =============================================================================
* Base
* =============================================================================
*/
View ResponsiveTextSize.css
body {
font-size: calc(0.95rem + 0.1vw);
}
View MaterialDesignBoxShadows.css
/** taken from https://codepen.io/sdthornton/pen/wBZdXq **/
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
View CenterItemsInFlexAndGrid.css
/** flex **/
.🦄 {
display: flex;
align-items: center;
justify-content: center;
}
/** grid **/
body {
display: grid;