Skip to content

Instantly share code, notes, and snippets.

🌴
On vacation

Matthew Pence ohiosveryown

Block or report user

Report or block ohiosveryown

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@ohiosveryown
ohiosveryown / target-multiple-elements.js
Last active May 6, 2019
Target / Get multiple elements
View target-multiple-elements.js
/*
<ul class="parent">
<li class="children"></li>
<li class="children"></li>
<li class="children"></li>
</ul>
*/
const parent = document.querySelector('.parent')
const children = document.querySelectorAll('.children')
View reset.scss
:root {
--system-font: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
}
@ohiosveryown
ohiosveryown / random.js
Created Nov 5, 2018
Single Random Entry from Array
View random.js
const h1 = document.querySelector('h1')
const pages = [
'<a target="_blank" href="http://google.com">Google</a>',
'<a target="_blank" href="http://apple.com">Apple</a>',
'<a target="_blank" href="http://nike.com">Nike</a>',
'<a target="_blank" href="http://adidas.com">Adidas</a>',
]
const page = pages[~~(Math.random() * pages.length)]
// const page = pages[pages.length * Math.random() | 0]
View arrow-function-shorthand.js
const trigger = document.querySelector('button')
trigger.addEventListener('click', () => {
document.querySelector('h1').classList.add('blue')
})
trigger.addEventListener('mouseenter', () => {
document.querySelector('h1').classList.add('blue')
})
@ohiosveryown
ohiosveryown / array.vue
Last active Nov 5, 2018
Object Array for Vue
View array.vue
<template>
<main>
<h1>{{ object.first }} {{ object.last }}</h1>
<p>{{ object.age }}</p>
</main>
</template>
<script>
@ohiosveryown
ohiosveryown / states.md
Last active Jan 30, 2018 — forked from alishalisha/states.md
Checking state on product design patterns
View states.md

Checking the State of Your States

If applicable, make sure your design component accounts for all these states. This is basically copied from the Nine States of Design Medium article. 😛

  • Initial state: What happens before your component does anything? Maybe it’s the first time a user sees it. Maybe it’s not activated yet. Essentially, the component exists but hasn’t started.
  • Loading state: Have you accounted for when a user will be waiting for something to happen? What does that look like?
  • Empty/Zero state: Your component has initialized, but it’s empty. No data. No Items. Now may be a good time to get the user to act (“Do this thing!”), or to reward them (“Good job, everything is taken care of”).
  • One state: You have some data. On an input, this may be after the first keystroke. In a list, it might be when you have one item (or one left).
  • Some data state: This is usually what you
@ohiosveryown
ohiosveryown / click.vue
Last active Nov 5, 2018
vue click bind
View click.vue
<!-- layout -->
<template>
<router-link to="/">
<div class="mw-grid debug">
test
<img v-bind:class="{ triggerActive: move }" @click="move = !move" class="debug center" src="http://i.imgur.com/JQaaf8q.jpg" alt="">
</div>
@ohiosveryown
ohiosveryown / easing.css
Created Jun 20, 2017
CSS Easing Variables
View easing.css
/* https://gist.github.com/bendc/ac03faac0bf2aee25b49e5fd260a727d */
:root {
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
View reset.css
*,*:before,*:after{box-sizing:inherit}html{box-sizing:border-box;overflow-x:hidden;font-size:62.5%;-webkit-font-smoothing:antialiased !important;text-rendering:optimizeLegibility !important}body{background:#fff;color:rgba(0,0,0,0.8);font:400 1.6rem/1.4 -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;overflow-x:hidden;margin:0;padding:0}a{color:inherit;text-decoration:none}h1,h2,h3,h4,h5,h6,img,ul,li,section,article,figure,main{margin:0;padding:0}button{border:none;background:black;cursor:pointer;margin:0}img{max-width:100%}ul{list-style-type:none}li{display:inline-block}.debug{outline:2px solid pink}.mb-0{margin-bottom:.809rem}.mb-1{margin-bottom:1.618rem}.mb-2{margin-bottom:3.236rem}.mb-3{margin-bottom:4.854rem}.mb-4{margin-bottom:6.472rem}.mb-5{margin-bottom:8.09rem}.mb-6{margin-bottom:9.708rem}.mb-7{margin-bottom:11.326rem}.mb-8{margin-bottom:12.944rem}.mb-9{margin-bottom:14.562rem}@media (min-width: 700px){.mt-6-ns{
You can’t perform that action at this time.