Skip to content

Instantly share code, notes, and snippets.

View ohiosveryown's full-sized avatar
🏀

Matthew Pence ohiosveryown

🏀
View GitHub Profile
document.addEventListener("DOMContentLoaded", () => {
fetch("db/jsproject.json")
.then((response) => response.json())
.then((data) => {
button.addEventListener("click", () => {
const answers = data.answers
const index = answers[~~(Math.random() * answers.length)]
console.log(index)
answer.innerText = index
})

Twitter abuses all media file uploads, each type in its own way. If we want to upload a good looking animation loop from some low-color, high-detail generative art, we have to game their system's mechanisms.

  • don't upload a video file, they will re-encode it into absolute 💩

  • create a GIF, which they will auto-convert into a video file 😱

  • The frames of the GIF will be resized to an even-sized width using an extremely naive algorithm. Your GIF should be an even size (1000, 2000,

@ohiosveryown
ohiosveryown / font-stacks.css
Created November 29, 2021 15:04 — forked from don1138/font-stacks.css
CSS Modern Font Stacks
/* Modern Font Stacks */
/* System */
font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* A modern Georgia-based serif */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
@ohiosveryown
ohiosveryown / filter.vue
Last active June 1, 2021 15:13
Vue JS Filter
<template>
<div class="container">
<h1>Hello</h1>
<input type="text" placeholder="Filter by name or type" v-model="filter" />
<table>
<thead>
<tr>
<th>name</th>
<th>type</th>
</tr>
/** @jsx jsx */
import React, { useState } from 'react'
import { motion } from "framer-motion"
import './HelloWorld.less'
import { css, jsx, ClassNames } from '@emotion/core'
import styled from '@emotion/styled'
const Box = styled(motion.div) `
border: 4px solid pink;
width: 200px; height: 200px;
@ohiosveryown
ohiosveryown / grid-center.css
Created September 15, 2020 17:57
Vertically and Horizontal Centering with CSS Grid
.parent {
display: grid;
place-items: center;
height: 100vh;
}
.child {
width: 50vw; height: 50vh;
background: papayawhip;
}
@ohiosveryown
ohiosveryown / index.html
Last active September 10, 2019 17:59
Supersymmetry Header / Section Relationship
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
@ohiosveryown
ohiosveryown / target-multiple-elements.js
Last active February 15, 2021 17:35
Target / Get multiple elements
/*
<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')
:root {
--system-font: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
}
@ohiosveryown
ohiosveryown / random.js
Created November 5, 2018 16:20
Single Random Entry from Array
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]