$ npm i qrcode.reactimport { QRCodeSVG } from 'qrcode.react'
y3n yano3nora
https://github.com/josdejong/mathjs
https://mathjs.org/
$ npm i mathjsimport { mean } from 'mathjs'- svg ファイルを react component として使えるやつ
- afterInjection から描画後の node 操作が可能
- src の svg ファイルから width, height を読み取って viewBox 指定までやってくれるので、中に svg やら html (foreign object) やら nest してやれば resize 時に全体がよき感じに縮尺される
$ npm i react-svg
yano3nora
/ phaser-portal-window.tsx
Last active
July 15, 2023 09:34
phaser-portal-window - Phaser x React x window.open by createPortal. #js #react #phaser
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Phaser from 'phaser' | |
| import { ReactNode, useEffect, useRef, useState } from 'react' | |
| import { createPortal } from 'react-dom' | |
| const PHASER_CONFIG = { /* ... */ } | |
| const WIDTH = 1920 / 2 | |
| const HEIGHT = 1080 / 2 | |
| const LEFT = (screen.width - WIDTH) / 2 | |
| const TOP = (screen.height - HEIGHT) / 2 |
- react で open window するやつ
- createPortal を使っているらしい
yano3nora
/ fix-aspect.jsx
Last active
June 6, 2023 10:30
Fix Aspect on Loading Image by native Width & Height Attributes. #css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @link https://parashuto.com/rriver/development/img-size-attributes-are-back | |
| */ | |
| import { Image } from '@chakra-ui/react' | |
| export const myComponent = () => ( | |
| // chakra image には元々 max-width: 100%; height: auto があたってる | |
| <Image | |
| src={'/some-large-image.png'} |
- flask 作者の all in one な python の package manager
- pyenv 的な python 自体の version 管理も機能として含んでる
- まだ実験的なリリースだが、かなり使用感はよく、本番利用も全然イケそうに見える
- venv + pip-tools を裏手で動かして、project ごとの python 仮想環境を透過的に管理するイメージ
npx みたいな package 実行のための python cli ツール。
local の python 環境を汚さずに、各 package (コマンド) ごとの venv を裏手で作成して、その venv 内 script の symlink をいい感じに作成することで、あたかも pip install したかのように以降 shell で実行可能にしてくれる。
プロジェクト開発というより、手元でうにょうにょ cli で動かしたいときのやつっぽいな。
github.com/pdm-project/pdm
pdm.fming.dev
PDMによるPythonのプロジェクト管理
project.tomlなど PEP 最新に準拠した python の package manager- python v3.7 以上で利用可能
- poetry より依存解決速いらしい
- npm をもじってるだけあって task runner なども標準で備わってる
.venv依存だが内部で package を cache するため軽量 & install 速い
yano3nora
/ restrict-multiple-rendering-on-react-strict-mode.tsx
Last active
May 19, 2023 00:22
Restrict multiple rendering by useRef on React Strict Mode. #js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * useEffect とかで deps array が [] でも | |
| * react strict mode だと multiple rendering で 2 回走って困るので | |
| * ref でなんとかするやつ | |
| * | |
| * @link https://www.sunapro.com/react18-strict-mode/ | |
| * @link https://github.com/reactwg/react-18/discussions/18 | |
| */ | |
| const initialized = useRef<boolean>(false) |