Skip to content

Instantly share code, notes, and snippets.

View nuragic's full-sized avatar
🤘

Andrea Puddu nuragic

🤘
View GitHub Profile
@sindresorhus
sindresorhus / esm-package.md
Last active May 2, 2024 22:22
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.
const clone = (() => {
/*! (c) Andrea Giammarchi - WTFPL */
const toString = {}.toString;
const flags = ['global', 'ignoreCase', 'multiline', 'sticky', 'unicode'];
const prime = obj => typeof obj === 'object' ? new obj.constructor(obj.valueOf()) : obj;
const through = obj => {
const descriptors = Object.getOwnPropertyDescriptors(obj);
Reflect.ownKeys(descriptors).forEach(key => {
const descriptor = descriptors[key];
if ('value' in descriptor) {
@sebmarkbage
sebmarkbage / Infrastructure.js
Last active May 2, 2024 03:11
SynchronousAsync.js
let cache = new Map();
let pending = new Map();
function fetchTextSync(url) {
if (cache.has(url)) {
return cache.get(url);
}
if (pending.has(url)) {
throw pending.get(url);
}
@alfredringstad
alfredringstad / README.md
Created September 25, 2017 13:26
Forking a single package in a monorepo

Forking a single package in a monorepo

The trend of using monorepos makes a lot of things easier to manage. However, when you want to fork a single package inside a monorepo, you'll have to chose one of two options:

  • Fork the entire monorepo (meaning you get all those extra boilerplate you don't really care about)
  • Manually copying the package files into a new git repo (meaning you'll loose all git history and have a lot of work to do when there's a new version of your base package)

The good news: There's a solution for this! And it's actually built in to git.

git subtree

One of the lesser-known (and vaguely documented) features of git is subtree. It's intended for this purpose, working as a great alternative to the criticized submodules. There are very few resources about using this in practice, so here's a guide for this specific use case.

@developit
developit / purecomponent.js
Created April 25, 2017 11:43
PureComponent for preact
import { Component } from 'preact';
export default class PureComponent extends Component {
shouldComponentUpdate(props, state) {
return !(shallowEqual(props, this.props) && shallowEqual(state, this.state));
}
}
function shallowEqual(a, b) {
for (let key in a) if (a[key]!==b[key]) return false;

tracked npm

@tracked is a decorator for Preact that makes working with state values no different than properties on your component instance.

It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.

tracked has no dependencies and works with any component implementation that uses this.state and this.setState().

Installation

@jaydenseric
jaydenseric / zeit-now-g-suite-setup.md
Created March 20, 2017 04:46
Zeit Now G Suite setup

Run each of the following lines, replacing yourdomain.com and codehere with your details:

now dns add yourdomain.com @ TXT google-site-verification=codehere
now dns add yourdomain.com @ MX ASPMX.L.GOOGLE.COM 1
now dns add yourdomain.com @ MX ALT1.ASPMX.L.GOOGLE.COM 5
now dns add yourdomain.com @ MX ALT2.ASPMX.L.GOOGLE.COM 5
now dns add yourdomain.com @ MX ALT3.ASPMX.L.GOOGLE.COM 10
now dns add yourdomain.com @ MX ALT4.ASPMX.L.GOOGLE.COM 10
@developit
developit / unistore.js
Last active September 8, 2020 15:13
Update: the newer & better version of this is published: https://github.com/developit/unistore
import { h, Component } from 'preact';
/** Creates a new store, which is a tiny evented state container.
* @example
* let store = createStore();
* store.subscribe( state => console.log(state) );
* store.setState({ a: 'b' }); // logs { a: 'b' }
* store.setState({ c: 'd' }); // logs { c: 'd' }
*/
@nuragic
nuragic / get-duration.js
Last active February 8, 2017 00:06
Get the difference between dates in a human readable format (like "2 years, 3 months").
// Both params accept the same format as the Date object (IETF-compliant RFC 2822 timestamps and also a version of ISO8601).
// This is a basic version (supports just years and months, it assumes every month is 30 days, no pluralization, etc.) but it works.
const getDuration = (startDateString, endDateString = new Date()) => {
const totalMonths = Math.floor((new Date(endDateString) - new Date(startDateString)) / 1000 / 60 / 60 / 24 / 30);
const months = totalMonths < 12 ? totalMonths : totalMonths % 12;
const years = Math.floor(totalMonths / 12);
let duration = '¯\_(ツ)_/¯';
if (years === 0)
if (months > 0)
@smeijer
smeijer / parse-es6-template.js
Last active March 13, 2024 07:53
ES6 template string parser
function get(path, obj, fb = `$\{${path}}`) {
return path.split('.').reduce((res, key) => res[key] || fb, obj);
}
function parseTpl(template, map, fallback) {
return template.replace(/\$\{.+?}/g, (match) => {
const path = match.substr(2, match.length - 3).trim();
return get(path, map, fallback);
});
}