Skip to content

Instantly share code, notes, and snippets.

View dmail's full-sized avatar
🍒

Damien Maillard dmail

🍒
17 followers · 33 following
  • Datadog
  • Antibes
View GitHub Profile
@dmail
dmail / object-fit-cover-video.js
Created October 5, 2015 06:50
object-fit:cover polyfill on video element using canvas
// http://stackoverflow.com/questions/21961839/simulation-background-size-cover-in-canvas
function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {
if (arguments.length === 2) {
x = y = 0;
w = ctx.canvas.width;
h = ctx.canvas.height;
}
// default offset is center
offsetX = typeof offsetX === "number" ? offsetX : 0.5;
@dmail
dmail / url.js
Last active January 5, 2024 11:09
URL parts naming. Inspired from web browsers API (new URL(), window.location) and rfc3986.
/*
href
┌────────────────────────────────────────┴──────────────────────────────────────────────┐
origin │
┌────────────┴──────────────┐ │
│ authority │
│ ┌───────────────┴───────────────────────────┐ │
│ │ host resource
│ │ ┌──────────┴─────────────────┐ ┌────────────┴───────────┬───────┐
│ │ hostname │ pathname │ │
@dmail
dmail / magic_source.js
Created March 1, 2022 14:29
Magic source
import { urlToFileSystemPath } from "@jsenv/filesystem"
import { require } from "@jsenv/core/src/internal/require.js"
export const createMagicSource = ({ url, content, sourcemap }) => {
if (content === undefined) {
throw new Error("content missing")
}
const filename = urlToFileSystemPath(url)
const {
@dmail
dmail / bubble-iframe.js
Created June 13, 2017 14:03
Bubbling iframe events
const bubbleIframeEvents = (iframe, document) => {
const iframeWindow = iframe.contentWindow
iframeWindow.addEventListener(
'mousemove',
(event) => {
const boundingClientRect = iframe.getBoundingClientRect()
const fakeEvent = new CustomEvent(
'mousemove',
{
@dmail
dmail / animate.js
Created September 16, 2020 17:01
Animation in javascript
document.querySelector('button').onclick = () => {
const scrollStart = document.querySelector(".menu-wrapper").scrollLeft
const scrollEnd = scrollStart + menuWrapperSize
startJavaScriptAnimation({
duration: 300,
onProgress: ({ progress }) => {
document.querySelector(".menu-wrapper").scrollLeft =
scrollStart + (scrollEnd - scrollStart) * progress
},
})
@dmail
dmail / createSignal.js
Created September 14, 2020 08:16
react store stuff
export const createSignal = () => {
let listeners = []
const listen = (callback) => {
let removed = false
listeners = [...listeners, callback]
return () => {
if (removed) return
removed = true
const listenersWithoutCallback = []
@dmail
dmail / index.html
Created July 7, 2020 12:52
redux stuff
<html>
<head>
<title>Redux stuff</title>
</head>
<body>
<main>
<iframe src="./without-redux.html"></iframe>
<iframe src="./with-redux.html"></iframe>
</main>
<style>
@dmail
dmail / debounce.js
Created July 6, 2020 08:10
debounce incoming requests ensuring max X requests are handled at the same time and debouncing gradually in batches
const debounce = (
fn,
{ debounceInterval = 50, maxConcurrentRequests = 15, unstackCount = 10 } = {},
) => {
let queue = []
let pendingCount = 0
const debouncedFn = async (request) => {
let entry
const promise = new Promise((resolve, reject) => {
entry = { request, resolve, reject }
@dmail
dmail / composeProps.js
Created June 2, 2020 09:06
make props overridable by composition. In the end might be better to make this explicit otherwise it becomes hard to follow.
const composeProps = (leftProps, rightProps) => {
const composedProps = { ...rightProps }
Object.keys(leftProps).forEach((key) => {
const leftValue = leftProps[key]
if (key in rightProps) {
const rightValue = rightProps[key]
composedProps[key] = composeProp(leftValue, rightValue)
} else {
composedProps[key] = leftValue
@dmail
dmail / code+nowrap.md
Last active April 10, 2020 09:44
Table header wrapping test

File by file impact

File Diff branch-name branch-with-a-long-name Event