Skip to content

Instantly share code, notes, and snippets.

View oscarmarcelo's full-sized avatar

Oscar Marcelo oscarmarcelo

10 followers · 14 following
View GitHub Profile
@alexreardon
alexreardon / entering-and-leaving-the-window.ts
Last active April 11, 2024 11:26
Detecting when entering or leaving a window
import { bindAll } from 'bind-event-listener';
// *Usually* to detect if you are entering / leaving a window you can
// use the `event.relatedTarget` property:
// "dragenter":
// - `event.relatedTarget` should point to the element that you are coming from
// - Scenario: A -> B
// - `event.target`: `B` (entering B)
// - `event.relatedTarget`: `A`: (leaving A - where you are coming from)
@sindresorhus
sindresorhus / esm-package.md
Last active July 23, 2024 10:30
Pure ESM package

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

  1. Use ESM yourself. (preferred)
    Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
  2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
  3. Stay on the existing version of the package until you can move to ESM.
@allangarcia
allangarcia / aseprite-build-and-install-on-macos.sh
Last active July 16, 2024 20:40
#!/bin/bash
# README: A more updated version is on the comments by (ashmna)[https://gist.github.com/ashmna]
# See at: https://gist.github.com/allangarcia/938b052a7d55d1652052e4259364260b?permalink_comment_id=4265898#gistcomment-4265898
# this is for tools required
brew update
brew install ninja
brew install cmake
@bradtraversy
bradtraversy / docker-help.md
Last active July 9, 2024 10:18
Docker Commands, Help & Tips

Docker Commands, Help & Tips

Show commands & management commands

$ docker

Docker version info

@samthor
samthor / dialog-focus-restore.js
Last active December 1, 2023 14:39
Restore focus after a HTML dialog is shown modally
/**
* Updates the passed dialog to retain focus and restore it when the dialog is closed. Won't
* upgrade a dialog more than once. Supports IE11+ and is a no-op otherwise.
* @param {!HTMLDialogElement} dialog to upgrade
*/
var registerFocusRestoreDialog = (function() {
if (!window.WeakMap || !window.MutationObserver) {
return function() {};
}
var registered = new WeakMap();
@StickyCube
StickyCube / index.html
Created June 27, 2016 22:52
Electron click through transparency example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test App</title>
</head>
<style>
html, body {
height: 100%;
@ayamflow
ayamflow / gist:b602ab436ac9f05660d9c15190f4fd7b
Created May 9, 2016 19:10
Safari border-radius + overflow: hidden + CSS transform fix
// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);
@paulirish
paulirish / what-forces-layout.md
Last active July 23, 2024 15:12
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@olmokramer
olmokramer / css-color-regex
Last active December 9, 2023 12:52
Regex for CSS colors: hex, rgb(a), hsl(a)
/(#([0-9a-f]{3}){1,2}|(rgba|hsla)\(\d{1,3}%?(,\s?\d{1,3}%?){2},\s?(1|0?\.\d+)\)|(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?\)){2})/i
@p3t3r67x0
p3t3r67x0 / pseudo_elements.md
Last active January 16, 2024 01:17
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {