Skip to content

Instantly share code, notes, and snippets.

@domske
domske / safari-fix-overflow-border-radius.md
Last active May 22, 2024 17:19
Bugfix (Workaround) for Safari (iOS): Border radius with overflow hidden does not work as expected.

There is a bug in Safari when using border-radius and overflow: hidden. Especially when applying transform to a child. In this case, overflow: hidden does not always work. The child ignores the border radius and overflows. It's a very old bug. And sadly it seems that it will never be fixed. Anyway, we can't wait for it.

There are some workaround. We need to place the element with the overflow attribute into a stacking context. I've tested the following workarounds on the latest version of iOS (14.4). You can choose what you want. But you should search the web for the particular attribute. (e.g. will-change should be rarely used. See docs)

Use this on the element with overflow: hidden and border-radius:

import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import { useCanvas } from 'utils/hooks'
import debounce from 'lodash/debounce'
export default function Glow() {
const [ref, setRef] = useState<HTMLCanvasElement | null>(null)
const [boxes, setBoxes] = useState<Box[]>([])
const [ctx, width, height] = useCanvas(ref)
const moving = useMouseMoving()
@meesterdude
meesterdude / gist:403319a079828497bff7c4f52e7451d3
Last active April 30, 2021 09:38
installing handlebars-helpers in ghost
// installing handlebars-helpers for V3 of ghost platform (current as of version 3.37)
// in your ghost install directory, run `yarn add handlebars-helpers` to install the package
// in your project directory of versions/YOUR_VERSION/core/frontend/helpers/index.js
// change L4 to be
// const helpers = require('handlebars-helpers')();
// on production server, edit versions/YOUR_VERSION/node_modules/gscan/lib/spec.js
// remove the method body but keep the theme return value; without this change, themes using custom helpers will fail gscan
@fatso83
fatso83 / srcset-debug-util.js
Last active October 30, 2023 10:53
SrcSet debug utility to print info on the currently loaded image
/**
* Use this to help determine which images are being used
* at which breakpoint. Will print lots of useful information
* on shown resolution, actual resolution, DPR and more
* Usage:
* var elems = document.querySelectorAll('.c-hero-banner__background img')
* responsiveImageDebugOutput(elems);
*
* Author: Carl-Erik Kopseng
* Source: https://gist.github.com/fatso83/55fc446df3f3965ecd66e8307a5dc0e6
@ipbastola
ipbastola / clean-up-boot-partition-ubuntu.md
Last active May 22, 2024 19:07
Safest way to clean up boot partition - Ubuntu 14.04LTS-x64, Ubuntu 16.04LTS-x64

Safest way to clean up boot partition - Ubuntu 14.04LTS-x64, Ubuntu 16.04LTS-x64

Reference

Case I: if /boot is not 100% full and apt is working

1. Check the current kernel version

$ uname -r 
@bahmutov
bahmutov / Docker shell commands.sh
Last active February 9, 2024 07:55
A personal cheat sheet for running local Node project in a Docker container
# See list of docker virtual machines on the local box
$ docker-machine ls
NAME ACTIVE URL STATE URL SWARM DOCKER ERRORS
default * virtualbox Running tcp://192.168.99.100:2376 v1.9.1
# Note the host URL 192.168.99.100 - it will be used later!
# Build an image from current folder under given image name
$ docker build -t gleb/demo-app .
@rrag
rrag / README.md
Last active March 19, 2024 16:11
Yet another tutorial and Cheat sheet to Functional programming

There are many tutorials and articles available online which explain functional programming. Examples show small functions, which are composed into others which again get composed. It is hard to imagine how it would all work, then come the analogies and then the math. While the math is necessary to understand it can be difficult to grasp initially. The analogies on the other hand, (at least for me) are not relatable. Some articles assume the reader knows the different terminologies of FP. Over all I felt it is not inviting to learn.

This introduction is for those who have had a tough time understanding those analogies, taken the plunge to functional programming but still have not been able to swim. This is yet another tutorial on functional programming

Terminology

Functions as first class citizens

Functions are first class means they are just like anyone else, or rather they are not special, they behave the same as say primitives or strings or objects.

@marcanuy
marcanuy / gist:06cb00bc36033cd12875
Created July 11, 2015 13:35
The 5,000 Most Frequently Used Domain Name Prefixes and Suffixes
1. my+ 1001. se+ 2001. thedaily+ 3001. empire+ 4001. herb+
2. +online 1002. test+ 2002. giant+ 3002. +cook 4002. +teen
3. the+ 1003. fish+ 2003. survey+ 3003. +deluxe 4003. affordable+
4. +web 1004. hk+ 2004. +conference 3004. +crunch 4004. proto+
5. +media 1005. florida+ 2005. twit+ 3005. michigan+ 4005. +ity
6. web+ 1006. fine+ 2006. pick+ 3006. cars+ 4006. myhome+
7. +world 1007. loan+ 2007. +dvd 3007. +forest 4007. plastic+
8. +net 1008. page+ 2008. cinema+ 3008. yacht+ 4008. +kc
9. go+ 1009. fox+ 2009. desi+ 3009. +wallet 4009. +foot
10. +group 1010. +gift 2010. act+ 3010. +contest 4010. +sup
@anandsunderraman
anandsunderraman / setChromeOptions.js
Last active May 10, 2024 15:17
Selenium Web Driver Set Chrome Options
//import the selenium web driver
var webdriver = require('selenium-webdriver');
var chromeCapabilities = webdriver.Capabilities.chrome();
//setting chrome options to start the browser fully maximized
var chromeOptions = {
'args': ['--test-type', '--start-maximized']
};
chromeCapabilities.set('chromeOptions', chromeOptions);
var driver = new webdriver.Builder().withCapabilities(chromeCapabilities).build();
@jpnelson
jpnelson / split.css
Last active June 14, 2022 16:51
Responsive, resizable panel layout with flexbox
.container {
height: 500px;
border: 2px solid grey;
position:relative;
}
.split {
display: flex;
height: 100%;
border: 1px solid black;