Skip to content

Instantly share code, notes, and snippets.

@kiding
kiding / NoScrollOnInputFocusiOSSafari.html
Last active May 17, 2024 20:14
Preventing iOS Safari scrolling when focusing on input elements
<!--
When an input element gets focused, iOS Safari tries to put it in the center by scrolling (and zooming.)
Zooming can be easily disabled using a meta tag, but the scrolling hasn't been quite easy.
The main quirk (I think) is that iOS Safari changes viewport when scrolling; i.e., toolbars shrink.
Since the viewport _should_ change, it thinks the input _will_ move, so it _should_ scroll, always.
Even times when it doesn't need to scroll—the input is fixed, all we need is the keyboard—
the window always scrolls _up and down_ resulting in some janky animation.
However, iOS Safari doesn't scroll when the input **has opacity of 0 or is completely clipped.**
@Venryx
Venryx / Example.tsx
Last active February 9, 2023 22:36
Using "useImperativeHandle" in a React functional component, with automatic TypeScript typing
import {forwardRef, useImperativeHandle, ForwardRefExoticComponent, RefAttributes, Ref} from "react";
export type Handle<T> = T extends ForwardRefExoticComponent<RefAttributes<infer T2>> ? T2 : never;
export const Parent = (props: {})=> {
let childHandle: Handle<typeof Child>;
return (
<div onClick={()=>childHandle.SayHi()}>
<Child name="Bob" ref={c=>childHandle = c}/>
</div>
@andreiglingeanu
andreiglingeanu / nullify-transforms.js
Last active January 30, 2024 22:17
A nice way to nullify CSS transforms and get original positions of the un-modified rect
// Nullify the transforms of the element
//
// This is all behaving just like getBoundingClientRect() but it nullifies all the transforms
// and kinds _reverts_ the element onto its original position.
// This will work even with complex translations, rotations.
// The beauty is in the way it applies matrix inverse onto the transformation
// matrix and mutates the getboundingclientrect along the way.
//
// Usage:
// let { top, left } = nullifyTransforms(el);
@unbug
unbug / Middleware.js
Last active January 6, 2024 04:17
Powerful Javascript Middleware Pattern Implementation, apply middleweares to any object. https://unbug.github.io/js-middleware/
'use strict';
/* eslint-disable consistent-this */
let middlewareManagerHash = [];
/**
* Composes single-argument functions from right to left. The rightmost
* function can take multiple arguments as it provides the signature for
* the resulting composite function.
*
@Lukas238
Lukas238 / Pure JavaScript dynamic scripts loader and callback function.md
Last active December 22, 2021 17:12
Pure JavaScript dynamic scripts loader + callback function

This pure javascript function allows to dynamically include a script and then execute any function by using a callback.

  
/**********************************
*	FUNCTIONS
***********************************/

function loadScript(url, callback){
	var script = document.createElement("script"); 
@pepsin
pepsin / y.js
Created December 12, 2015 12:29
Y = function(lep) {
return (function (f) {
return f(f);
})(function(f){
return lep(function(x){
return f(f)(x);
});
});
}
@oliyh
oliyh / image-url-to-data-uri.js
Created November 7, 2015 22:17
Convert an image url to a data URI without canvas
// hard won knowledge from http://stackoverflow.com/questions/20035615/using-raw-image-data-from-ajax-request-for-data-uri
var xmlHTTP = xhr.XMLHttpRequest();
xmlHTTP.open('GET', url, true);
xmlHTTP.responseType = 'arraybuffer';
xmlHTTP.onload = function(e) {
var arr = new Uint8Array(this.response);
var raw = String.fromCharCode.apply(null,arr);
var b64 = base64.encode(raw);
var dataURL="data:image/png;base64," + b64;
};
@robatron
robatron / fallout-1-high-res-patch-mac-osx.md
Last active May 6, 2024 12:55
How to get the Fallout 1 (and Fallout 2) high-resolution patch working for Mac OS X

Fallout 1 (and Fallout 2) Hi-Res Patch for Mac OS X

Fallout 1 was originally designed to run at 640x480 resolution. I wanted to run the Mac OS X version of Fallout on my MacBook 11", which has a 1366x768 display. There is a [high resolution patch][hi-res], but it only supports the Windows version of Fallout.

Turns out that the OS X version of Fallout runs through Wine, so we can get this patch working with just a few configuration changes:

Note for Fallout 2 users: The process for Fallout 2 is essentially the same, with a different patch, and some minor pathing differences. Other than that, the process is exactly the same!

Install Wine

@tyler-johnson
tyler-johnson / transitionEndEventName.js
Created October 20, 2014 22:51
Determine the correct CSS3 transition end event name.
var transitionEndEventName = (function() {
var i,
undefined,
el = document.createElement('div'),
transitions = {
'transition':'transitionend',
'OTransition':'otransitionend', // oTransitionEnd in very old Opera
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
@jcouyang
jcouyang / why-curry-helps.md
Last active February 20, 2023 21:09
为什么要柯里化(why-curry-helps)slide http://git.io/why-curry-helps 📈

还记得 Haskell Curry吗,

多巧啊, 人家姓 Curry 名 Haskell, 难怪 Haskell 语言会自动柯里化, 呵呵. 但是不奇怪吗, 为什么要柯里化呢. 为什么如此重要导致 Haskell 会默认自动柯里化所有函数, 不就是返回一个部分配置好的函数吗.

我们来看一个 Haskell 的代码.

max 3 4
(max 3) 4