Skip to content

Instantly share code, notes, and snippets.

View ogonkov's full-sized avatar

Alexey ogonkov

  • Belgrade, Serbia
View GitHub Profile
@sindresorhus
sindresorhus / esm-package.md
Last active June 1, 2024 19:35
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.
@tkadlec
tkadlec / perf-diagnostics.css
Last active June 8, 2023 17:47
CSS used to highlight potential performance issues
:root {
--violation-color: red; /* used for clear issues */
--warning-color: orange; /* used for potential issues we should look into */
}
/* IMAGES */
/*
* Lazy-Loaded Images Check
* ====
@carolynvs
carolynvs / .gitconfig
Last active October 19, 2022 14:44
git wip - Show what branches you have been working on lately
[alias]
wip = for-each-ref --sort='authordate:iso8601' --format=' %(color:green)%(authordate:relative)%09%(color:white)%(refname:short)' refs/heads
@premek
premek / mv.sh
Last active March 5, 2024 17:43
Rename files in linux / bash using mv command without typing the full name two times
# Put this function to your .bashrc file.
# Usage: mv oldfilename
# If you call mv without the second parameter it will prompt you to edit the filename on command line.
# Original mv is called when it's called with more than one argument.
# It's useful when you want to change just a few letters in a long name.
#
# Also see:
# - imv from renameutils
# - Ctrl-W Ctrl-Y Ctrl-Y (cut last word, paste, paste)
@pgilad
pgilad / Instructions.md
Last active March 27, 2024 12:59
Generate SSL Certificate for use with Webpack Dev Server (OSX)

Generate private key

$ openssl genrsa -out private.key 4096

Generate a Certificate Signing Request

openssl req -new -sha256 \
@samthor
samthor / safari-nomodule.js
Last active February 14, 2024 02:54
Safari 10.1 `nomodule` support
// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
// does not support `nomodule` is probably not being used anywhere. The code below is left
// for posterity.
/**
* Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
* load <script nomodule> anyway. This snippet solve this problem, but only for script
* tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
*
* Again: this will **not** prevent inline script, e.g.:
@bendc
bendc / randomInterval.js
Created March 9, 2017 21:55
rAF-based random interval
const randomInterval = (() => {
const random = (min, max) => Math.random() * (max - min) + min;
return (callback, min, max) => {
const time = {
start: performance.now(),
total: random(min, max)
};
const tick = now => {
if (time.total <= now - time.start) {
time.start = now;
@newyankeecodeshop
newyankeecodeshop / ServingES6.md
Last active June 19, 2021 07:36
Serving ES6 to modern browsers

Background

Recently I noticed that Safari 10 for Mac/iOS had achieved 100% support for ES6. With that in mind, I began to look at the browser landscape and see how thorough the support in the other browsers. Also, how does that compare to Babel and its core-js runtime. According to an ES6 compatability table, Chrome, Firefox, and IE Edge have all surpassed what the Babel transpiler can generate in conjunction with runtime polyfills. The Babel/core-js combination achieves 71% support for ES6, which is quite a bit lower than the latest browsers provide.

It made me ask the question, "Do we need to run the babel es2015 preset anymore?", at least if our target audience is using Chrome, Firefox, or Safari.

It's clear that, for now, we can't create a site or application that only serves ES6. That will exclude users of Internet Explorer and various older browsers running on older iOS and Android devices. For example, Safari on iOS 9 has pretty mediocre ES6 support.

@gaearon
gaearon / slim-redux.js
Last active May 5, 2024 15:14
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
function mapValues(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
result[key] = fn(obj[key], key);
return result;
}, {});
}
function pick(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
if (fn(obj[key])) {
@paulirish
paulirish / what-forces-layout.md
Last active May 31, 2024 22:37
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent