Skip to content

Instantly share code, notes, and snippets.

View arthurmchr's full-sized avatar

Arthur arthurmchr

View GitHub Profile
@Samsy
Samsy / gist:096fb2916dae6c9f6c4ebaa062e89983
Created April 12, 2016 10:49
CSS 3D RENDERER IE FIX
import THREE from 'three'
import Config from 'config'
let config = Config.instance
var isLow = false
@dmitriz
dmitriz / _baseline.scss
Last active October 8, 2020 22:01 — forked from razwan/_baseline.scss
Aligning type to baseline the right way with SASS
// font-size of the regular font used
$base-font-size: 16px;
// it is convenient to declare a fixed base-line-height,
// so every other line-height is a simple multiple of base-line-height
$base-line-height: 21px; // 1.5 * base-font-size
// allow fractional line-height as integer multiple of base-line-height / line-height-scale
$line-height-scale: 1;
@ayamflow
ayamflow / gist:b602ab436ac9f05660d9c15190f4fd7b
Created May 9, 2016 19:10
Safari border-radius + overflow: hidden + CSS transform fix
// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);
@fivethreeo
fivethreeo / export_bezier_threejs.py
Last active January 15, 2024 04:47
Script to export bezier curves from blender to three.js
import bpy
myCurve = bpy.data.curves[0] # here your curve
spline= myCurve.splines[0] # maybe you need a loop if more than 1 spline
scale = 200
curvepath_template = """
var curves = new THREE.CurvePath();
%s
@tmaiaroto
tmaiaroto / Dockerfile
Last active June 30, 2022 08:48
WordPress on Amazon ECS
FROM alpine:3.3
MAINTAINER Tom Maiaroto <[email protected]>
# Install packages
RUN apk --update --repository http://dl-3.alpinelinux.org/alpine/edge/main add \
freetype-dev \
libjpeg-turbo-dev \
libpng-dev \
libwebp-dev \
php7 \
@mattdesl
mattdesl / modular-three.md
Last active December 9, 2021 03:20
quick/easy ThreeJS hacking with npm

This isn't bullet-proof but here's how I've doing things lately:

modular ThreeJS quickie

  • npm install three --save
  • Include this in your browserify/webpack root script, typically your index.js:
global.THREE = require('three')
  • Add the "THREE" global to your linter (e.g. semistandard/eslintrc)

Mobile Safari's 100% Height Dilemma

Whether you're developing a web application with native-ish UI, or just a simple modal popup overlay that covers the viewport, when it comes to making things work on iDevices in Mobile Safari, you're in for a decent amount of pain and suffering. Making something "100% height" is not as easy as it seems.

This post is a collection of Mobile Safari's gotchas and quirks on that topic, some with solutions and fixes, some without, in good parts pulled from various sources across the internets, to have it all in one place. Things discussed here apply to iOS8, iOS9 and iOS10.

The Disappearing Browser Chrome

Screen real estate on smartphones is limited, so Mobile Safari collapses the browser chrome (address bar and optional tab bar at the top, and tool bar at the bottom) when the user scrolls down. When you want to make something span exactly the height of the viewport, or pin something to the bottom of the screen, this can get tricky because the viewport changes size (or

@mattdesl
mattdesl / MeshCustomMaterial.js
Last active June 4, 2024 08:51
Custom mesh standard material with glslify + ThreeJS r83dev
const glslify = require('glslify');
const path = require('path');
// This is the original source, we will copy + paste it for our own GLSL
// const vertexShader = THREE.ShaderChunk.meshphysical_vert;
// const fragmentShader = THREE.ShaderChunk.meshphysical_frag;
// Our custom shaders
const fragmentShader = glslify(path.resolve(__dirname, 'standard.frag'));
const vertexShader = glslify(path.resolve(__dirname, 'standard.vert'));
@ayamflow
ayamflow / gist:96a1f554c3f88eef2f9d0024fc42940f
Last active April 3, 2025 22:26
Threejs Fit plane to screen
var cameraZ = camera.position.z;
var planeZ = 5;
var distance = cameraZ - planeZ;
var aspect = viewWidth / viewHeight;
var vFov = camera.fov * Math.PI / 180;
var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
var planeWidthAtDistance = planeHeightAtDistance * aspect;
// or
@evantahler
evantahler / buildSitemap.js
Last active December 17, 2020 16:35
35 lines to build a sitemap for next.js projects
#! /usr/bin/env node
// I am ./bin/buildSitemap.js
const path = require('path')
const glob = require('glob')
const fs = require('fs')
const SITE_ROOT = process.env.SITE_ROOT || 'https://www.actionherojs.com'
const SOURCE = process.env.SOURCE || path.join(__dirname, '..', 'pages', '/**/*.js')
const DESTINATION = process.env.DESTINATION || path.join(__dirname, '..', 'static', 'sitemap.xml')