Skip to content

Instantly share code, notes, and snippets.

View alectrocute's full-sized avatar
🐱

Alec Armbruster alectrocute

🐱
72 followers · 119 following
View GitHub Profile
@avesus
avesus / September 2017 iOS WebKit input focus position: fixed.md
Created September 4, 2017 23:24
September 2017 iOS WebKit input focus position: fixed

Mobile Safari does not support position: fixed when an input focused and virtual keyboard displayed.

To force it work the same way as Mobile Chrome, you have to use position: absolute, height: 100% for the whole page or a container for your pseudo-fixed elements, intercept scroll, touchend, focus, and blur events.

The trick is to put the tapped input control to the bottom of screen before it activates focus. In that case iOS Safari always scrolls viewport predictably and window.innerHeight becomes exactly visible height.

Open https://avesus.github.io/docs/ios-keep-fixed-on-input-focus.html in Mobile Safari to see how it works.

Please avoid forms where you have several focusable elements because more tricks to fix position will be necessary, those were added just for demonstration purposes.

@lukebussey
lukebussey / FFMPEG MP4 to HLS Conversion.md
Created January 3, 2017 21:43

Direct copy of pre-encoded file:

$ ffmpeg -i filename.mp4 -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls filename.m3u8

@sindresorhus
sindresorhus / esm-package.md
Last active May 1, 2024 07:18
Pure ESM package

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

  1. Use ESM yourself. (preferred)
    Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
  2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
  3. Stay on the existing version of the package until you can move to ESM.
@cecilemuller
cecilemuller / letsencrypt_2020.md
Last active April 15, 2024 02:19
How to setup Let's Encrypt for Nginx on Ubuntu 18.04 (including IPv6, HTTP/2 and A+ SSL rating)

How to setup Let's Encrypt for Nginx on Ubuntu 18.04 (including IPv6, HTTP/2 and A+ SLL rating)

Virtual hosts

Let's say you want to host domains first.com and second.com.

Create folders for their files:

@danharper
danharper / background.js
Last active March 30, 2024 18:25
Bare minimum Chrome extension to inject a JS file into the given page when you click on the browser action icon. The script then inserts a new div into the DOM.
// this is the background code...
// listen for our browerAction to be clicked
chrome.browserAction.onClicked.addListener(function (tab) {
// for the current tab, inject the "inject.js" file & execute it
chrome.tabs.executeScript(tab.ib, {
file: 'inject.js'
});
});
@flpvsk
flpvsk / recorderWorkletProcessor.js
Last active March 22, 2024 06:28
An example of a recorder based on AudioWorklet API.
/*
A worklet for recording in sync with AudioContext.currentTime.
More info about the API:
https://developers.google.com/web/updates/2017/12/audio-worklet
How to use:
1. Serve this file from your server (e.g. put it in the "public" folder) as is.
@alectrocute
alectrocute / NGINXNodejsLinode.md
Last active February 24, 2024 08:16
Quick n' easy NGINX & Node.js VPS setup!

Quick n' easy NGINX & Node.js VPS setup!

N|SolidN|Solid N|Solid

Here's the quickest and easiest guide to setting up a little test enviorment. This guide likely applies to any VPS provider or VPS, not just Linode... it's just what I prefer to use. Assuming you know the basics of Linode's VPS system and SSH commands, let's get started!

Configure your Linode

  • Install your favorite flavor of Linux. I prefer Ubuntu.
@leostratus
leostratus / webkit-pseudo-elements.md
Created September 21, 2012 01:44
Webkit Pseudo-Element Selectors (Shadow DOM Elements)

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:

-webkit-appearance:none;

@also
also / wave.js
Created April 2, 2011 23:50
Generate WAVE file headers in JavaScript
// https://ccrma.stanford.edu/courses/422/projects/WaveFormat/
function buildWaveHeader(opts) {
var numFrames = opts.numFrames;
var numChannels = opts.numChannels || 2;
var sampleRate = opts.sampleRate || 44100;
var bytesPerSample = opts.bytesPerSample || 2;
var blockAlign = numChannels * bytesPerSample;
var byteRate = sampleRate * blockAlign;
var dataSize = numFrames * blockAlign;
@jarlg
jarlg / sing.html
Created October 3, 2015 15:48
js example using webaudio to analyse mic input to control an oscillator
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type=text/javascript>
navigator.getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia;