Skip to content

Instantly share code, notes, and snippets.

View basarat's full-sized avatar
🌹
youtube.com/basaratali

Basarat Ali Syed basarat

🌹
youtube.com/basaratali
View GitHub Profile
@sindresorhus
sindresorhus / esm-package.md
Last active April 19, 2024 10:56
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.
@mikeal
mikeal / gist:1840641
Created February 16, 2012 01:33
get a new/clean port with node.js
var portrange = 45032
function getPort (cb) {
var port = portrange
portrange += 1
var server = net.createServer()
server.listen(port, function (err) {
server.once('close', function () {
cb(port)
@jimfb
jimfb / gist:0eb6e61f300a8c1b2ce7
Last active January 22, 2022 01:52
Parent vs. Owner Context

If you've reached this page, it's probably because your "parent-based and owner-based contexts differ".

As we've been iterating on React's "context" feature, we've discovered that the parent-based relationship is more useful than the owner-based relationship, so we're migrating to use a parent-based hierarchy.

In short, the owner of a component is whomever creates the component, while the parent of a component is whomever would be the containing ancestor in the DOM hierarchy. To learn more about the owner relationship, see the docs here: http://facebook.github.io/react/docs/multiple-components.html

In many cases, the owner and the parent are the same node, in which case, no further action is necessary.

Pattern Matching

This is a strawman proposal for adding pattern matching to ECMAScript. Pattern matching is useful for matching a value to some structure in a similar way to destructuring. The primary difference between destructuring and pattern matching are the use cases involved - destructuring is useful for binding pieces out of larger structures whereas pattern matching is useful for mapping a value's structure to data or a set of behaviors. In practice this means that destructuring tends to allow many shapes of data and will do its best to bind something out of it, whereas pattern matching will tend to be more conservative.

Additionally, the power of pattern matching is increased substantially when values are allowed to participate in the pattern matching semantics as a matcher as well as a matchee. This proposal includes the notion of a pattern matching protocol - a symbol method that can be implemented by objects that enables developers to use those values in pattern matching. A common scenario w

@basarat
basarat / styles.less
Last active December 13, 2017 16:49
Atom Styles.less
// Style the find results
atom-text-editor::shadow .highlight.find-result .region {
background: rgb(163,163,0);
transition: background-color 0.2s, border-color 0.2s;
}
atom-text-editor::shadow .highlight.current-result .region,
atom-text-editor::shadow .highlight.current-result ~ .highlight.selection .region {
background: orange;
border-color: red;
}
@mik01aj
mik01aj / README.md
Last active April 21, 2017 13:02
How to use Tether with React

Tether is a great library for positioning stuff (tooltips, modals, hints, etc) in your web app.

But, as I use React, it was pretty problematic for me, as Tether mutates the DOM and React breaks miserably when it sees mutated DOM. The solution is to have the tethered element outside the part of the DOM tree which is controlled by React (in this case, I use document.body).

That's why I created 2 helpers to use Tether with React.

The first one, TetheredElement is a plain JS helper to create a new element, attach it to some other one via Tether, and populate it with some React component.

The second one, TetherTarget is a React component and it uses TetheredElement to integrate it further with React, so that you can attach components to each other with Tether, without leaving the cozy React/JSX world and worrying about manual DOM operations. Just write:

@Ciantic
Ciantic / MyElement.ts
Last active January 28, 2016 18:25
CustomElement inheritance in TypeScript (before it's fixed)
import customelement = require('./customelement');
export class MyElement extends customelement.CustomHTMLElement {
public myTest() {
// "this" is fully qualified, includes all methods e.g. addEventListener, dispatchEvent
console.log("this", this);
console.dir(this);
}
}
@alexeagle
alexeagle / angular2.d.ts
Last active August 29, 2015 14:22
angular2.d.ts
// Type definitions for Angular v2.0.0-alpha.26
// Project: http://angular.io/
// Definitions by: angular team <https://github.com/angular/>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
// ***********************************************************
// This file is generated by the Angular build process.
// Please do not create manual edits or send pull requests
// modifying this file.
// ***********************************************************