Skip to content

Instantly share code, notes, and snippets.

@artalar
artalar / example.tsx
Last active September 4, 2024 18:24
reatom-router
// in the app root
export const ROUTES = reatomRoutes({
auth: {
login: {},
registration: {},
},
goods: {
':id': {
edit: {},
},
@MaxMonteil
MaxMonteil / NetworkObserver.ts
Last active October 11, 2024 16:30
A more reliable check for network availability in the browser
const NetworkStatus = {
ONLINE: 'online',
OFFLINE: 'offline',
PENDING: 'pending',
} as const
type NetworkStatusTypeOnline = 'online'
type NetworkStatusTypeOffline = 'offline'
type NetworkStatusTypePending = 'pending'
type NetworkStatusType =
@WebReflection
WebReflection / esx.md
Last active October 6, 2024 12:35
Proposal: an ESX for JS implementation
@jakub-g
jakub-g / async-defer-module.md
Last active May 5, 2025 17:38
async scripts, defer scripts, module scripts: explainer, comparison, and gotchas

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

@JeremyRH
JeremyRH / event-delegation-performance.md
Last active February 13, 2025 07:44
Does event delegation actually improve performance?

Does event delegation actually improve performance?

Event delegation works by attaching a single event listener to a parent element to catch events bubbling up from the children. Many people believe this is more performant than attaching event listeners to each child. I am not convinced this is always true.

Let's start with a common example of event delegation. Here we have a list of elements:

<ul id="item-list">
  <li data-cost="12">Item 1</li>
  <li data-cost="18">Item 2</li>
  <li data-cost="6">Item 3</li>
 ...
@neretin-trike
neretin-trike / pug.md
Last active April 29, 2025 08:20
Туториал по HTML препроцессору Pug (Jade)
@dmnsgn
dmnsgn / WebGL-WebGPU-frameworks-libraries.md
Last active May 6, 2025 10:07
A collection of WebGL and WebGPU frameworks and libraries

A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.

Engines and libraries ⚙️

Name Stars Last Commit Description
three.js ![GitHub
@zmts
zmts / tokens.md
Last active April 27, 2025 21:01
Про токены, JSON Web Tokens (JWT), аутентификацию и авторизацию. Token-Based Authentication

Про токены, JSON Web Tokens (JWT), аутентификацию и авторизацию. Token-Based Authentication

Last major update: 25.08.2020

  • Что такое авторизация/аутентификация
  • Где хранить токены
  • Как ставить куки ?
  • Процесс логина
  • Процесс рефреш токенов
  • Кража токенов/Механизм контроля токенов
@paulirish
paulirish / what-forces-layout.md
Last active May 5, 2025 08:05
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
@thoop
thoop / nginx.conf
Last active April 14, 2025 17:11
Official prerender.io nginx.conf for nginx
# Change YOUR_TOKEN to your prerender token
# Change example.com (server_name) to your website url
# Change /path/to/your/root to the correct value
server {
listen 80;
server_name example.com;
root /path/to/your/root;
index index.html;