ちょっとでもセキュリティに自信がないなら、 Firebase Authentication を検討しよう - mizdev

2020/08/17 1186 users Rails devise diary Note 実装

note のやらかしのあのへんについて。 認証自作、 Rails 、 Devise - Diary パーフェクト Rails 著者が解説する devise の現代的なユーザー認証のモデル構成について - joker1007’s diary 認証サーバーの実装は本質的に難しいです。セキュリティが絡むものは「簡単な実装」などなく、プロアマ個人法人問わず、個人情報を... 続きを読む

ノーコードは形を変えた現代のRPGツクールなのではないか - mizdev

2020/06/24 557 users ビジュアルプログラミング RPGツクール オーサリング 範疇

この記事について。 2030 年 「エンジニアです。コードは書けません。」｜__shinji__｜ note 自分はそもそもビジュアルプログラミングやオーサリングに興味があり、ノーコードは興味の範疇でありつつも、現状のもの、現状の「コード抜きで作れる」ような謳い文句は厳しいと思っています。それを、RPG ツクールを例に説明... 続きを読む

IE First を避ける - mizdev

2020/06/20 189 users

まず、去年の実績として、IE のシェアが 9% から 5% になっています。 Browser Market Share Japan | StatCounter Global Stats 世界だと 1.4% です。これは途上国などでは Android Chrome が支配的だからです。 https://gs.statcounter.com/browser-market-share/all 国内で「IE シェア」などでググって出るサイトは 9%... 続きを読む

大統一 Node ツールチェイン Rome の野望 現状の実装 - mizdev

2020/08/10 155 users ツールチェイン Rome 野望 beta 実装

つい先日 beta リリースされたフロントエンドのツールチェインの Rome について、その思想とコードを読んだ結果の現状について。 Rome Frontend Toolchain この記事は公式ドキュメント以外にもソースを読んで得られた undocumented な部分も含んでいるので、すぐ古くなる。その前提で読むように。 問題の認識とその解決... 続きを読む

node.js のメトリクスの計測、ベンチマークの改善、Docker イメージの絞り方を勉強した - mizdev

2020/09/19 153 users Docker メトリクス 制約 メモリ 計測

フロントエンドのパフォーマンス計測は得意なのだが、サーバーサイド node.js のメトリクスの取り方はあまり知らなくて、いつも勘でやりがちだった。最近は業務でこの周辺で困ることが増えたので、勉強しなおした。 また、最近使ってみたかった cloudflare workers の制限で、メモリ 128MB、CPU 時間 50ms という制約が... 続きを読む

コードとビジュアルの双方向編集なエディタを試作して ビジュアルプログラミングについて考えてみた - mizdev

2020/07/05 96 users ビジュアルプログラミング Scratch エディタ RPG

ノーコードは形を変えた現代の RPG ツクールなのではないか - mizdev の記事では、ノーコードのビジュアルプログラミングが発展性を欠く理由として、次の理由を挙げました。 汎用的なビジュアルプログラミング基盤(Scratch みたいなものではなくプロユースなもの) ↑ 上でのビジュアル環境でのデータベースのグラフ構造の... 続きを読む

Recoil について勉強した - mizdev

2020/05/16 95 users Recoil Props Facebook uhyo Blog

Fecebook が新しく発表した Recoil について 自分の学習手順 Getting Started | Recoil を写経して動かす Facebook 製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog で非同期周りを理解 公式ドキュメントの API Reference で理解 <RecoilRoot ...props /> | Recoil これは自分が写経しながら書... 続きを読む

Cloudflare Workers それは Frontend / Node.js が CDN Edge Side まで拡張されるもの - mizdev

2020/09/12 77 users Frontend DeepL node.js 手元 パターン

最近は Cloudflare Workers が熱くて、週末はずっとその調査しています。この記事はそのまとめです。 注意点として、手元でいろいろなパターンで動かして試してはいますが、プロダクション環境で運用したわけではないです。それを踏まえた上でお読みください。 特に断りが無い限り、引用文は DeepL で翻訳したものです。... 続きを読む

Incremental Static Regeneration で実現する次世代のサーバーアーキテクチャ - mizdev

2020/05/18 40 users 既存 サーバー 手元 Next.js Blog

next.js 9.4 に Incremental Static Regeneration という実験的な新機能があります。 Blog - Next.js 9.4 | Next.js パッと見、「段階的な静的サイト生成…？なんのことだろう…」となったのですが、手元で試してみた感じ、これが既存のサーバーの実装アプローチを変える、革命的な機能ではないかと思いました。 解説を書... 続きを読む

Hello, Deno v1.0.0 - mizdev

2020/05/17 33 users Hello

Deno 1.0.0 がリリースされて、ちょっと遊んでみたので、その感想。 圧倒的ゼロインストール感 自分は mac なので brew install deno しました。deno コマンドが入ります。セットアップはこれで終わり。 GitHub の trending に上がっていた https://github.com/oakserver/oak という web server を試してみます。 // ser... 続きを読む

省ビルドサイズ要求環境でモダンフロントエンドをやる (主に preact の話) - mizdev

2020/06/26 24 users Preact ツールチェイン モダンフロントエンド 外部 環境

モダンフロントエンド = 宣言的 UI = 仮想 DOM ターゲット npm ツールチェインが使えない環境で、パフォーマンスを悪化させずにモダンフロントエンドをやりたい人 サードパーティスクリプトを提供する人 方向性 省ビルドサイズを目指す とくに外部から読み込まれる 3rd party script は、サイズ要求が厳しい lighthouse ... 続きを読む

React Context を用いた簡易 Flux - mizdev

2020/05/27 23 users

課題 redux を引っ張り出すと大仰になる。Context 下に共有ステートを持ってそこに setState できるだけでよい。 なので、次の 2 つを用意する 現在の state を参照する const appState = useAppState() 現在の state を更新する const setAppState = useSetAppState() React.useState() と違って分割している理由は、主... 続きを読む

next.js + vercel + firebase authentication で JWT の検証を行う + Graphql - mizdev

2020/07/28 22 users GitHub mizchi Firebase ルーティング

今個人で作ってるアプリの 認証 + Graphql の部分を抜き出して GitHub に公開した。 mizchi/next-boilerplate-20200727 next.js + vercel + firebase は (パーツを良く選べば) 最高 next.js はルーティングを持つページを作るには最高で、サーバー、静的サイト、JAM スタック、AMP と必要に応じて選択できる。React ベー... 続きを読む

module bundler を作った - mizdev

2020/06/06 15 users foo bundler mizchi index 最強

このフロントエンドの魔境に生まれたからには一度は俺が考えた最強の module bundler を作りたい。みんなそう思ってると思う。作った。 mizchi/bundler: hobby bundler tldr このコードが // foo.js export default 1; // index.js import foo from "./foo.js"; console.log(foo); export const index = 1; こうなる // ... 続きを読む

tslib/import-helpers の効果を測定する - mizdev

2020/08/08 13 users await async TypeScript target

tldr target: es2017 以降なら tslib 使っても置き換えられるコードはないので、使う必要はない target: es5/es2015 で async await を多く使っている場合はファイル数に比例して削れる importHelpers / tslib とは typescript で async/await をコンパイルすると次のようなコードを生成する var __awaiter = (this && t... 続きを読む

ts-expect-error を付与しながら .js を .ts に一括で書き換える - mizdev

2020/06/23 6 users Jest 面倒 一括 ファイル コードベース

やりたいこと 巨大なコードベースに対して、 .js をとりあえず .ts に書き換えてしまいたい。 だが、素朴な拡張子の書き換えで型違反が出ると jest やその他ツールが止まりはじめて面倒。 なので、エラー行には // @ts-expect-error を自動で付与しながら書き換えたい 方法 ファイルの拡張子を .js から .ts に書き換え... 続きを読む