Skip to content

Instantly share code, notes, and snippets.

View yano3nora's full-sized avatar

y3n yano3nora

10 followers · 3 following
View GitHub Profile
@yano3nora
yano3nora / mathjs.md
Last active November 8, 2023 16:49
math.js
@yano3nora
yano3nora / svg.md
Last active March 23, 2024 09:53
SVG Libraries - react-svg / svg.js / plotly.js #js

react-svg

https://github.com/tanem/react-svg

  • svg ファイルを react component として使えるやつ
  • afterInjection から描画後の node 操作が可能
  • src の svg ファイルから width, height を読み取って viewBox 指定までやってくれるので、中に svg やら html (foreign object) やら nest してやれば resize 時に全体がよき感じに縮尺される
$ npm i react-svg
@yano3nora
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
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
@yano3nora
yano3nora / react-new-window.md
Last active July 15, 2023 04:31
react-new-window #react #js
@yano3nora
yano3nora / fix-aspect.jsx
Last active June 6, 2023 10:30
Fix Aspect on Loading Image by native Width & Height Attributes. #css
/**
* @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'}
@yano3nora
yano3nora / rye.md
Last active June 5, 2023 08:32
Rye - Experimental Python Package Manager. #python

Overview

rye-up.com
mitsuhiko/rye - github.com

  • flask 作者の all in one な python の package manager
  • pyenv 的な python 自体の version 管理も機能として含んでる
  • まだ実験的なリリースだが、かなり使用感はよく、本番利用も全然イケそうに見える
  • venv + pip-tools を裏手で動かして、project ごとの python 仮想環境を透過的に管理するイメージ

Getting Started

@yano3nora
yano3nora / pipx.md
Last active May 24, 2023 06:58
pipx - Python CLI Tool for Install and Run Script. #python

Overview

github.com/pypa/pipx
pypa.github.io

npx みたいな package 実行のための python cli ツール。

local の python 環境を汚さずに、各 package (コマンド) ごとの venv を裏手で作成して、その venv 内 script の symlink をいい感じに作成することで、あたかも pip install したかのように以降 shell で実行可能にしてくれる。

プロジェクト開発というより、手元でうにょうにょ cli で動かしたいときのやつっぽいな。

@yano3nora
yano3nora / pdm.md
Last active January 21, 2024 03:39
PDM - A modern Python package and dependency manager supporting the latest PEP standards. #python
@yano3nora
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
/**
* 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)
@yano3nora
yano3nora / watchdog-watchmedo.md
Last active May 17, 2023 09:37
watchdog/watchmedo - Python file watcher like nodemon for Hot Reload. #python