Skip to content

Instantly share code, notes, and snippets.

View claus's full-sized avatar
🎅

Claus Wahlers claus

🎅
439 followers · 38 following
View GitHub Profile
@claus
claus / _app.js
Created May 14, 2020 05:35
Restore scroll position after navigating via browser back/forward buttons in Next.js
import useScrollRestoration from "utils/hooks/useScrollRestoration";
const App = ({ Component, pageProps, router }) => {
useScrollRestoration(router);
return <Component {...pageProps} />;
};
export default App;
@claus
claus / iOSViewport.md
Last active January 16, 2024 17:37

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

@claus
claus / ipfs-server-setup.md
Last active May 9, 2023 03:51
Host Your Site Under Your Domain on IPFS

Host Your Site Under Your Domain on IPFS

This is a step-by-step tutorial for hosting your website under your domain on IPFS, from zero, on a DigitalOcean Ubuntu 16.04.3 x64 Droplet (i am using the $10 variant with 2GB RAM).

Install IPFS

Log in as root.

First, make sure the system is up to date, and install tar and wget:

@claus
claus / custom.css
Last active February 19, 2023 22:18
Mastodon: Add red border to images without description
/* Fix image gallery styles */
/* Add red border-bottom to media without description */
/* Left image */
.media-gallery__item[style^="inset: auto 2px auto auto"] {
margin-right: 2px;
}
/* Top left image */
.media-gallery__item[style^="inset: auto 2px 2px auto"] {
@claus
claus / gist:594367
Created September 23, 2010 21:09
<?xml version="1.0" encoding="utf-8"?>
<!--
Show the compile date of a SWF.
See http://wahlers.com.br/claus/blog/undocumented-swf-tags-written-by-mxmlc/
-->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="600" minHeight="400"
@claus
claus / data-prefetching-in-next-js.md
Last active October 20, 2022 06:23
Data Prefetching in Next.js

Data Prefetching in Next.js

@claus
claus / BitStream.js
Created May 29, 2012 17:37
A simple Uint8Array based bitstream JavaScript class
// Usage:
// var buf = new Uint8Array(128);
// var bitstream = new BitStream(buf);
// bitstream.writeBits(12, 0xffff);
// bitstream.seekTo(0);
// bitstream.readBits(6); // 111111
// bitstream.readBits(10); // 1111110000
window.BitStream = function(uint8Array) {
@claus
claus / ProtonMailUnreadMessageCount.js
Last active June 6, 2022 07:17 — forked from TChilderhose/ProtonMailUnreadMessageCount.js
ProtonMail Unread Message Count in Favicon
// ==UserScript==
// @name ProtonMail Unread Message Count in Favicon
// @description Shows the number of unread ProtonMail messages in the FavIcon
// @version 1.2
// @author Tyler Childerhose, Claus Wahlers
// @homepageURL https://gist.github.com/claus/e92b3b4a3ac6c0ddb4cdb71ad6797fcf
// @match https://mail.proton.me/*
// @grant none
// ==/UserScript==
@claus
claus / html-to-contentful.js
Last active April 4, 2022 16:40
Convert HTML to Contentful Rich Text Document object structure
import { parse as parseHtml } from 'node-html-parser';
import { MARKS, BLOCKS, INLINES } from '@contentful/rich-text-types';
const tagMap = new Map([
['p', { type: 'block', nodeType: BLOCKS.PARAGRAPH }],
['h1', { type: 'block', nodeType: BLOCKS.HEADING_1 }],
['h2', { type: 'block', nodeType: BLOCKS.HEADING_2 }],
['h3', { type: 'block', nodeType: BLOCKS.HEADING_3 }],
['h4', { type: 'block', nodeType: BLOCKS.HEADING_4 }],
['h5', { type: 'block', nodeType: BLOCKS.HEADING_5 }],
@claus
claus / gist:1396250
Created November 26, 2011 20:22
Resolution independent rendering of Bezier curves in WebGL
<!doctype html>
<html>
<head>
<title>Resolution independent rendering of Bezier curves in WebGL</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="glMatrix-0.9.6.min.js"></script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aBezierCoord;