Skip to content

Instantly share code, notes, and snippets.

@sindresorhus
sindresorhus / esm-package.md
Last active May 4, 2024 13: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.
@viclafouch
viclafouch / clipboard.js
Last active December 7, 2023 23:10
How to copy an image or a text to clipboard in Javascript (new way !) See https://copy-to-clipboard.now.sh/
// @return Promise<boolean>
async function askWritePermission() {
try {
// The clipboard-write permission is granted automatically to pages
// when they are the active tab. So it's not required, but it's more safe.
const { state } = await navigator.permissions.query({ name: 'clipboard-write' })
return state === 'granted'
} catch (error) {
// Browser compatibility / Security error (ONLY HTTPS) ...
return false
@bradtraversy
bradtraversy / node_nginx_ssl.md
Last active April 30, 2024 08:44
Node app deploy with nginx & SSL

Node.js Deployment

Steps to deploy a Node.js app to DigitalOcean using PM2, NGINX as a reverse proxy and an SSL from LetsEncrypt

1. Sign up for Digital Ocean

If you use the referal link below, you get $10 free (1 or 2 months) https://m.do.co/c/5424d440c63a

2. Create a droplet and log in via ssh

I will be using the root user, but would suggest creating a new user

const express = require('express');
const multer = require('multer');
const app = express();
const router = express.Router();
const path = require('path');
const Storage = multer.diskStorage({
destination: './public/images',
filename: (req, file, cb) => {
const fileName =
@bradtraversy
bradtraversy / webdev_online_resources.md
Last active May 3, 2024 12:56
Online Resources For Web Developers (No Downloading)
@cvan
cvan / webgl-detect-gpu.js
Last active January 19, 2024 02:54
use JavaScript to detect GPU used from within your browser
var canvas = document.createElement('canvas');
var gl;
var debugInfo;
var vendor;
var renderer;
try {
gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
} catch (e) {
}
@sindresorhus
sindresorhus / writing-eslint-rule.md
Last active February 26, 2023 03:01
Gettings started writing a ESLint rule

Gettings started writing a ESLint rule

First, take a look at the ESLint rule documentation. Just skim it for now. It's very long and boring. You can come back to it later.

ESLint rules works on the AST (Abstract Syntax Tree) representation of the code. In short, this is a tree structure that describes the code in a very verbose form. ESLint walks this tree and rules can subscribe to be notified when it hits a specific node type, like a Literal type, which could be the "hello" part of const welcome = "hello";.

Go ahead and play around with some code in AST Explorer (Make sure the parser is espree). It's a great tool!

Here are some good articles on the subject (ignore the scaffolding parts):

@IceCreamYou
IceCreamYou / force-scrollbars-visible.css
Last active March 6, 2024 01:00
Mac OS X hides scrollbars by default. This is annoying for UI design because it means users might not realize that certain areas are scrollable. This public domain Gist forces the scrollbar to always be visible with native behavior in Webkit-based browsers (Chrome and Opera) on Macs.
.force-show-scrollbars ::-webkit-scrollbar-track:vertical {
border-left: 1px solid #E7E7E7;
box-shadow: 1px 0 1px 0 #F6F6F6 inset, -1px 0 1px 0 #F6F6F6 inset;
}
.force-show-scrollbars ::-webkit-scrollbar-track:horizontal {
border-top: 1px solid #E7E7E7;
box-shadow: 0 1px 1px 0 #F6F6F6 inset, 0 -1px 1px 0 #F6F6F6 inset;
}
@anvaka
anvaka / 00.Intro.md
Last active April 30, 2024 03:36
npm rank

npm rank

This gist is updated daily via cron job and lists stats for npm packages:

  1. Top 1,000 most depended-upon packages
  2. Top 1,000 packages with largest number of dependencies
  3. Top 1,000 packages with highest PageRank score
@PurpleBooth
PurpleBooth / README-Template.md
Last active May 3, 2024 18:53
A template to make good README.md

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites