Skip to content

Instantly share code, notes, and snippets.

View Aghassi's full-sized avatar
🎧
💻 Programming

David Aghassi

🎧
💻 Programming
View GitHub Profile
@sindresorhus
sindresorhus / esm-package.md
Last active April 26, 2024 03:53
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.

webpack-plugin-modern-npm

Automatically transpile modern packages in node_modules.

Available in 3 fun flavours: plugin, loader and loader factory.

Plugin

Add the plugin to your webpack config, and it should handle everything for you.

@htr3n
htr3n / macos-ramdisk.md
Last active April 8, 2024 21:43
Creating RAM disk in macOS

Built-in

diskutil erasevolume HFS+ 'RAM Disk' `hdiutil attach -nobrowse -nomount ram://XXXXX`

where XXXXX is the size of the RAM disk in terms of memory blocks.

Notes:

@addyosmani
addyosmani / lazyload.html
Last active November 8, 2022 11:00
Native image lazy-loading with a cross-browser fallback
<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/>
<script>
// Select all images with the class "lazyload"
const images = document.querySelectorAll("img.lazyload");
// Check if the browser supports the "loading" attribute
if ('loading' in HTMLImageElement.prototype) {
// If so, we'll update all <img src> to point to the data-src instead
images.forEach(img => {
img.src = img.dataset.src;
@sindresorhus
sindresorhus / issuehunt-bounties.md
Last active July 5, 2019 08:51
IssueHunt bounties
@stevenmirabito
stevenmirabito / userChrome.css
Last active August 13, 2022 19:32
Firefox Quantum chrome overrides for tree tabs
#TabsToolbar {
height: 32px;
}
#TabsToolbar > .toolbar-items,
#TabsToolbar > .titlebar-spacer {
visibility: hidden
}
#nav-bar {
@jkrems
jkrems / es-module-history.md
Last active November 5, 2023 19:35
History of ES modules

Modules - History & Future

History

@addyosmani
addyosmani / workbox.md
Last active January 20, 2024 16:14
Workbox recipes

Workbox runtime caching recipes

Your Service Worker script will need to import in Workbox and initialize it before calling any of the routes documented in this write-up, similar to the below:

importScripts('workbox-sw.prod.v1.3.0.js');
const workbox = new WorkboxSW();

// Placeholder array populated automatically by workboxBuild.injectManifest()
@naesheim
naesheim / buildWhenAffected.sh
Last active November 28, 2022 20:20
CircleCi - only build features that has changed
##################
### config.yml ###
##################
version: 2
jobs:
build:
docker:
- image: circleci/python:3.6
steps:
@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):