Skip to content

Instantly share code, notes, and snippets.

Avatar
👷‍♂️
looking for a job

Rinat Valiullov RinatValiullov

👷‍♂️
looking for a job
View GitHub Profile
@mjackson
mjackson / composing-route-in-react-router-v6.md
Last active Oct 22, 2021
Notes on route composition in React Router v6, along with a suggested improvement you can make today to start upgrading
View composing-route-in-react-router-v6.md

Composing <Route> in React Router v6

Composition of <Route> elements in React Router is changing in v6 from how it worked in v4/5 and in Reach Router. React Router v6 is the successor of both React Router v5 and Reach Router.

This document explains our rationale for making the change as well as a pattern you will want to avoid in v6 and a note on how you can start preparing your v5 app for v6 today.

Background

In React Router v5, we had an example of how you could create a <PrivateRoute> element to restrict access to certain routes on the page. This element was a simple wrapper around an actual <Route> element that made a simple decision: is the user authenticated or not? If so, ren

View gist-toc.mjs
#!/usr/bin/env node
// Usage:
// cat my-file.md | ./gist-toc.mjs
// pbpaste | ./gist-toc.mjs | pbcopy # clipboard -> clipboard (macOS)
function createSlug(str) {
str = str.replace(/[?%:`]/g, '');
str = str.replace(/ +/g, '-');
return str.toLowerCase();
@w3collective
w3collective / save-data-localstorage.html
Created May 31, 2021
Save data in localStorage using JavaScript
View save-data-localstorage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Save data in localStorage using JavaScript</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form id="note-form">
View array-cheat-sheet.md

Cheat sheet: JavaScript Array methods

Deriving a new Array from an existing Array:

['■','●','▲'].slice(1, 3)           ['●','▲']
['■','●','■'].filter(x => x==='■')  ['■','■']
    ['▲','●'].map(x => x+x)         ['▲▲','●●']
    ['▲','●'].flatMap(x => [x,x])   ['▲','▲','●','●']
View logux-state-desc.md

Краткая характеристика:

  1. У него много сторов и сторы могут зависеть друг от друга, а не один большой стор и селекторы. То есть он ближе к Эфектору, чем в Редаксу/MobX. Всё ради tree shaking.
  2. Он ближе к стору прямых измений. В публичном API нет экшенов. Но всё-таки value = 1 на манер MobX запрещены — значения можно менять только через спец. методы. И в синхронизации состояния с сервером экшены есть (просто скрыты из публичного API).

Плюсы:

  1. Может работать без Логакса, чисто как стейт-менеджер.
  2. API специально создан, чтобы хранить в сторах бизнес-логику, чем разгружать компоненты и упрощать переносимость приложения между фреймворками.
  3. От 157 байт (!) в вашем JS-бандле.
  4. Расчитан на агрессивный tree shaking, чтобы в JS-бандле был только код того состояния, которые используются в текущих страницах.
  5. Очень ленивый — сторы на которых никто не подписан выгружаются из памяти, а их бизнес-логика останавливается.
View esm-package.md

Pure ESM package

The package linked to from 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.
@kentcdodds
kentcdodds / README.md
Last active Jun 11, 2021
Function syntaxes supported by TypeScript
View README.md

The blog post has been written: https://kentcdodds.com/blog/typescript-function-syntaxes

TypeScript Function Syntaxes

I'm trying to create examples of all the different ways to write functions and function type definitions in TypeScript.

One requirement is these examples must work with strict mode (noImplicitAny, etc) enabled.

If I'm missing anything, please add comments below with examples. I'll eventually put this into a blog post.

View storybook-webpack5-experimental.md

⚠️ Warning: this document is out of date.

For the most recent webpack5 instructions see MIGRATION.md.

Storybook experimental Webpack 5 support

Storybook 6.2 includes experimental Webpack 5 support. Webpack 5 brings a variety of performance improvements, as well as exciting new features like module federation. Here's a quick guide to get you going.

Intro

@prologic
prologic / LearnGoIn5mins.md
Last active Oct 21, 2021
Learn Go in ~5mins
View LearnGoIn5mins.md
@ityonemo
ityonemo / test.md
Last active Oct 22, 2021
Zig in 30 minutes
View test.md

A half-hour to learn Zig

This is inspired by https://fasterthanli.me/blog/2020/a-half-hour-to-learn-rust/

Basics

the command zig run my_code.zig will compile and immediately run your Zig program. Each of these cells contains a zig program that you can try to run (some of them contain compile-time errors that you can comment out to play with)