Skip to content

Instantly share code, notes, and snippets.

View EvanBacon's full-sized avatar
🥓
Markdown developer

Evan Bacon EvanBacon

🥓
Markdown developer
5.1k followers · 91 following
View GitHub Profile
@EvanBacon
EvanBacon / headers.md
Created April 7, 2020 17:50

h1

h2

h3

h4

h5
@EvanBacon
EvanBacon / 🧽.gif
Last active June 19, 2024 15:43
🥓
🧽.gif
@EvanBacon
EvanBacon / A-look-at-Hooks.md
Created June 18, 2019 22:46
A look at some different approaches to using hooks for pseudo classes.

Many ways to useHooks

When I try to learn something, I search around for the optimal approach. In the case of hooks I found two reasonable approaches and one approach that only makes sense in some use-cases. Below I've documented all of them.

Use Case (useCase 😘)

I want to change the style of a text element when the user is clicking down on it. Because this is React Native for web, there are no CSS pseudo classes, so I need to manage all of the state myself. Because classes like active, focus, hover, and visited could be commonly used the API must be very self-contained. ... and I want people to like me, so I'm using hooks (the old implementation used render props).

Spread props

@EvanBacon
EvanBacon / apple-touch-startup-image.html
Created April 17, 2019 07:10
An example of full iOS PWA startup image (splash screen) support.
<html>
<head>
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-title" content="Expo" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<link
rel="apple-touch-icon"
sizes="180x180"
@EvanBacon
EvanBacon / audioFormData.js
Created February 17, 2019 06:54
Upload audio data from React Native
async function uploadAudioAsync(uri) {
console.log("Uploading " + uri);
let apiUrl = 'http://YOUR_SERVER_HERE/upload';
let uriParts = uri.split('.');
let fileType = uriParts[uriParts.length - 1];
let formData = new FormData();
formData.append('file', {
uri,
name: `recording.${fileType}`,
@EvanBacon
EvanBacon / ReactNativeSimpleStyledMap.jsx
Created February 17, 2019 02:09
A custom map renderer to spice things up 🍕
import React from 'react';
// import
import { MapView } from 'expo';
export default BaseMap = ({ children, ...props }) => (
<MapView
{...props}
>
<MapView.UrlTile
/**
@EvanBacon
EvanBacon / output.sh
Created January 8, 2019 21:07
When expo build:ios works
GoogleAuthDemo $ exp build:ios -c
We've built a brand new CLI for Expo!
Expo CLI is a drop in replacement for exp.
Install: npm install -g expo-cli
Use: expo --help
Read more: https://blog.expo.io/expo-cli-2-0-released-a7a9c250e99c
[13:05:12] Making sure project is set up correctly...
[13:05:13] Your project looks good!
[13:05:13] Checking if current build exists...
@EvanBacon
EvanBacon / Instagram_App.js
Created July 6, 2018 00:29
Instagram Expo Clone Navigation
// Import React Navigation
import {
createBottomTabNavigator,
createStackNavigator,
} from 'react-navigation';
import tabBarIcon from './utils/tabBarIcon';
// Import the screens
import FeedScreen from './screens/FeedScreen';
import NewPostScreen from './screens/NewPostScreen';
@EvanBacon
EvanBacon / App.js
Created February 6, 2018 08:36 — forked from giautm/App.js
Sketch App
import Expo from 'expo';
import * as ExpoPixi from 'expo-pixi';
import React, { Component } from 'react';
import { Image, StyleSheet, View } from 'react-native';
export default class App extends Component {
state = {
strokeColor: Math.random() * 0xffffff,
strokeWidth: Math.random() * 30 + 10,
};
@EvanBacon
EvanBacon / scaleLongestSideToSize.js
Last active October 18, 2017 18:31
Three.js helper function for scaling the longest side of a mesh to a certain size. This is a debug method for AR development.
const scaleLongestSideToSize = (mesh, size) => {
const { x: width, y: height, z: depth } = new THREE.Box3().setFromObject(mesh).getSize();
const longest = Math.max(width, Math.max(height, depth));
const scale = size / longest;
mesh.scale.set(scale, scale, scale);
}
export default scaleLongestSideToSize;