Skip to content

Instantly share code, notes, and snippets.

@ShogunPanda
ShogunPanda / ESM in CJS.md
Created November 16, 2021 14:09
Usage of ESM modules in CommonJS world.

Import ESM module in a CommonJS module

Do not use requires or top-level imports (if you're transpiling server side code). Replace all occurrences with await import and wrap your code in a async function.

Example

If your original code was:

@WebReflection
WebReflection / custom-elements-pattern.md
Last active May 17, 2024 23:30
Handy Custom Elements' Patterns

Handy Custom Elements' Patterns

Ricardo Gomez Angel Photo by Ricardo Gomez Angel on Unsplash

This gist is a collection of common patterns I've personally used here and there with Custom Elements.

These patterns are all basic suggestions that could be improved, enriched, readapted, accordingly with your needs.

@gskema
gskema / color-gradient.js
Last active March 2, 2024 22:14
Generate gradient color from 2 or 3 colors using JavaScript. Example: https://jsfiddle.net/e18g5f3L/
/**
* You may use this function with both 2 or 3 interval colors for your gradient.
* For example, you want to have a gradient between Bootstrap's danger-warning-success colors.
*/
function colorGradient(fadeFraction, rgbColor1, rgbColor2, rgbColor3) {
var color1 = rgbColor1;
var color2 = rgbColor2;
var fade = fadeFraction;
// Do we have 3 colors for the gradient? Need to adjust the params.
Here's how to make jQuery DataTables work with npm and webpack. DT checks for AMD compatibility first
which breaks when you're using CommonJS with webpack.
Install DT core: npm install datatables.net
Install a DT style: npm install datatables.net-bs (bootstrap)
Install the imports-loader webpack plugin: https://github.com/webpack/imports-loader#disable-amd
Create a loader "exception" just for DT in webpack.config.js:
module: {
loaders: [
@yuval-a
yuval-a / js-micro.js
Last active May 16, 2024 21:01
Javascript micro-optimizations
NOTE: This document is OLD - and most of the tips here are probably outdated, since newer versions of Javascript have been
released over the years - with newer optimizations and more emphasis on optimizing newly supported syntax.
// Array literal (= []) is faster than Array constructor (new Array())
// http://jsperf.com/new-array-vs-literal/15
var array = [];
// Object literal (={}) is faster than Object constructor (new Object())
// http://jsperf.com/new-array-vs-literal/26
@Integralist
Integralist / Strategy.js
Created June 8, 2013 20:16
Strategy Design Pattern in JavaScript
// Greeter is a class of object that can greet people.
// It can learn different ways of greeting people through
// 'Strategies.'
//
// This is the Greeter constructor.
var Greeter = function(strategy) {
this.strategy = strategy;
};
// Greeter provides a greet function that is going to
@chrisevans
chrisevans / LICENSE.txt
Created August 6, 2011 07:33 — forked from haochi/LICENSE.txt
tofu: tiny templating engine
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 Haochi Chen <http://ihaochi.com>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE