Skip to content

Instantly share code, notes, and snippets.

View timc1's full-sized avatar
🖊️

Tim timc1

🖊️
View GitHub Profile
@timc1
timc1 / .vimrc
Last active February 15, 2019 17:27
set nocompatible
set encoding=utf-8 nobomb
filetype off
" set the runtime path to include Vundle and initialize
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" Vundle manages Vundle 😀
Plugin 'VundleVim/Vundle.vim'
@timc1
timc1 / recursive-remove-attributes.js
Created January 26, 2019 21:55
removes all attributes from a dom node and its children
// recursively remove all attributes from a node and all its children
const recursiveRemove = node => {
removeAttributes(node)
while (node.childNodes.length > 0) {
for (let child of node.childNodes) {
node = child
if (node.nodeName !== 'IMG') {
recursiveRemove(child)
}
}
@timc1
timc1 / animate-letters.js
Created January 27, 2019 18:12
Converts text node to an array of animated spans
const animate = (el, delay = 0) => {
const node = el.childNodes[0]
// Check first if this node is a text node
if (node.nodeType === 3) {
const text = node.data.split('')
const html = text.reduce((acc, curr, index) => {
if (curr !== ' ') {
const wait = delay * index + delay
return (acc += `<span class="animate" style="animation-delay: ${wait}ms">${curr}</span>`)
}
@timc1
timc1 / use-scroll-animation.tsx
Created January 28, 2019 17:41
A React hook to trigger callback function once a DOM element is in view.
import { useEffect, useRef } from 'react'
const isElementInView = (el: HTMLElement) => {
const { top, bottom } = el.getBoundingClientRect()
// Add an offset so item doesn't load the moment a tiny part of the element is showing.
if (top < window.innerHeight - 125 && bottom > 125) {
return true
}
return false
@timc1
timc1 / currently-focused-element.js
Last active February 13, 2019 06:04
Using IntersectionObserver to track current and previously focused DOM elements. Demo: https://codesandbox.io/s/o599joo75z
// polyfill
import 'intersection-observer'
const setupIntersectionObserver = elements => {
// keep track of the current focused section as well as the previous.
// when the user scrolls up/reverse, we trigger the previous
let current, previous
const observer = new IntersectionObserver(
entries => {
@timc1
timc1 / parallax.js
Last active February 15, 2019 01:37
Parallax scrolling using requestAnimationFrame & transforms
function Parallax({ className }) {
let elements = []
let screenHeight, animationId
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(f) {
@timc1
timc1 / renew-certbot.txt
Last active January 19, 2024 19:11
Renew certbot certificate on an nginx server
// Turn off server
sudo service nginx stop
// Renew certbot
certbot-auto renew —debug
// If failed, run this, then rerun renew command
sudo /opt/eff.org/certbot/venv/local/bin/pip install cryptography interface
// If failed
@timc1
timc1 / media-hoc.js
Last active March 19, 2019 01:17
Debounced media query HOC to allow users to render components based on screen width
import React from 'react'
import { debounce } from '../../utils'
const withMedia = Component => props => {
const [width, setWidth] = React.useState(window.innerWidth)
const toggleMedia = debounce(() => {
setWidth(window.innerWidth)
}, 250)
@timc1
timc1 / toggler-confirmation.js
Last active March 23, 2019 20:51
Wrap a button/link component with multi confirmation
import React from 'react'
export function WithConfirmation({ children }) {
const [hasConfirmed, setConfirm] = React.useState(false)
return children({
hasConfirmed,
setConfirm,
})
}
@timc1
timc1 / freeze-window.js
Created April 24, 2019 02:15
Prevent overflow scrolling — nice to use when displaying a modal
const capturePosition = () => {
const cachedPosition = window.pageYOffset
return {
freeze: () => {
document.body.style =
`position: fixed;
top: ${cachedPosition * -1}px;
width: 100%;`
},
unfreeze: () => {