DreamShaded

// Place your key bindings in this file to override the defaults
[
    {
        "key": "ctrl+k ctrl+e",
        "command": "workbench.view.explorer"
    },
    {
        "key": "ctrl+k ctrl+g",
        "command": "workbench.view.scm"
    },

DreamShaded

Полезные материалы:

1. Бенчмарк фреймворков от Krauset
2. Declarative Shadow DOM
3. Цикл статей о веб-компонентах на CSS-Tricks

Демо

Здесь

ЛС:

Телега

DreamShaded

1. Рендер HTML в изображение, затем в Canvas: https://reference.codeproject.com/dom/canvas_api/drawing_dom_objects_into_a_canvas
2. Google и canvas: https://thenewstack.io/google-docs-switches-to-canvas-rendering-sidelining-the-dom/
3. Google и canvas: https://workspace.google.com/blog/productivity-collaboration/more-flow-less-work-smart-canvas

Как сделать:

1. Выделение текста: https://codepen.io/rochastuff/pen/yJdOMJ

Контакты

1. https://t.me/dreamshaded
2. https://t.me/vzhyx_exp

DreamShaded

Общее

https://github.com/DreamShaded/Chamomile-UI - пример UI-кита

https://github.com/DreamShaded/Chamomile-app - пример использования пакета

https://docs.google.com/presentation/d/1eAHG6JU1k2V3AG1J3VG2C_5Tx0pfsglKpccwBgTj_v8/edit?usp=sharing - презентация доклада

https://blog.logrocket.com/using-npm-to-create-javascript-icon-libraries/ - упаковка иконок в npm-пакет

https://jivancic.com/posts/build-a-component-library.html - минималистичный билд пошагово

DreamShaded

/**
 * Returns a Promise which resolves with a value in form of a tuple.
 * @param promiseFn A Promise to resolve as a tuple.
 * @returns Promise A Promise which resolves to a tuple of [error, ...results]
 */
export function tuple (promise) {
  return promise
    .then((...results) => [null, ...results])
    .catch(error => [error])
}

DreamShaded

// Файл "tsconfig.json":
// - устанавливает корневой каталог проекта TypeScript;
// - выполняет настройку параметров компиляции;
// - устанавливает файлы проекта.
// Присутствие файла "tsconfig.json" в папке указывает TypeScript, что это корневая папка проекта.
// Внутри "tsconfig.json" указываются настройки компилятора TypeScript и корневые файлы проекта.
// Программа компилятора "tsc" ищет файл "tsconfig.json" сначала в папке, где она расположена, затем поднимается выше и ищет в родительских папках согласно их вложенности друг в друга.
// Команда "tsc --project C:\path\to\my\project\folder" берет файл "tsconfig.json" из папки, расположенной по данному пути.
// Файл "tsconfig.json" может быть полностью пустым, тогда компилятор скомпилирует все файлы с настройками заданными по умолчанию.
// Опции компилятора, перечисленные в командной строке перезаписывают собой опции, заданные в файле "tsconfig.json".

DreamShaded

# Using edge-git ensures we're always pulling the latest
# You can lock into a specific version using the *-git tags
# on https://hub.docker.com/_/docker/
image: docker:edge-git
services:
- docker:dind

# If you only need compose in a specific step definitely put this
# only in that step so it's not executed unnecessarily
before_script:

DreamShaded

Traefik, как обратный прокси в Docker (пример с 2 react проектами)

В результате будет 2 react проекта на 1 сервере доступных по разным ссылкам

Цели

• Запустить traefik в одном контейнере
• Запустить другие проекты в других контейнерах
• Соединить все контейнеры в одну docker cеть
• Настроить контейнеры с проектами так, что-бы они объясняли traefik'у, какие url ведут на конкретный проект

DreamShaded

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

DreamShaded

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

Last major update: 25.08.2020

• Что такое авторизация/аутентификация
• Где хранить токены
• Как ставить куки ?
• Процесс логина
• Процесс рефреш токенов
• Кража токенов/Механизм контроля токенов