Storybook warns when function named add is called in story file. · Issue #12208 · storybookjs/storybook
WARNING in ./src/stories/Button.stories.tsx Module build failed (from ./node_modules/@storybook/source-loader/dist/index.js): TypeError: string.toLowerCase is not a function at sanitize (/Users/alexander.guerra/sbtest/node_modules/@storybook/csf/dist/index.js:27:17) at handleADD (/Users/alexander.guerra/sbtest/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/parse-helpers.js:173:15)
javascriptでsleep的に処理をwaitさせる方法(コピペでOK) | Hirooooo’s Labo
javascriptってsleepってないの？setTimeoutってよくわかんないしどう書けばいいの？なんでもいいからjavascriptでsleepしたいんだー！ javascriptで開発していると、処理の途中でsleep(スリープ)してwait(待機)させたい時があると思います。 JS以外の言語(RubyとかPHPとか)だと、Sleep関数なるものがよく用意されていて みたいな書き方で、指定した秒数だけ遅延させることが出来るんですよね。 でもjavascriptにはそんな便利な関数がありません。 なので、javascriptでも簡単にsleep的なwait処理の書き方をお知らせします。 実際に開発でも推奨できるやり方と、デバッグの時なんかで簡易的にsleepさせる方法と2パターン紹介します。 ケースに応じて好きな方のコードをコピペして使ってもらえば、簡単にsleep処理が実装できる
Storybook Webpack 5
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 Storybook
stale-while-revalidate対応のCDNでISRのような挙動を実現する
先日、Next.jsのISR（Incremental Static Regeneration）について書きました。 ISRは非常に強力な機能なのですが、セルフホスティングでNext.jsを動かす場合には色々と使うのが難しかったりします。この記事ではその理由とCDNを使ってISRと似たような挙動を実現する方法を紹介します。 Next.jsのISRをVercel以外で動かすのは難しい Vercelは自社でメンテナンスしているNext.jsを簡単にデプロイできることを大きな強みとしています。Vercelにデプロイする場合、ソースコード上で決められた書き方さえすれば、Vercel側の追加設定なしでISRを利用できます。 しかし、Vercel以外のプラットフォームにデプロイするとなると途端に話がややこしくなります。 Next.jsのISRはキャッシュしたHTMLをファイルシステムに書き込む仕様になっ
2021年にJavaScriptやNode.jsを勉強し始めたので、読んで良かった資料をまとめる
2021年になってJavaScript、TypeScript、Node.jsの勉強を始めました。 この記事では、読んで良かった本、記事、公式ドキュメントなどをまとめていきます。 ※2021/03時点の情報です。 個人的なリンク集ですが、「これも読むと良いよ」というものがあればぜひ教えてください。 ECMAScript ECMAScriptの仕様は、EcmaのTC39で策定されている Ecma TC39 GitHub organization ep78 TC39 | mozaic.fm Node.jsの各バージョンでのECMAScriptサポート状況 JavaScript Misreading Chat - #86: JavaScript: the first 20 years JavaScript 二十年の歴史についての回 JavaScript チュートリアル | MDN JavaScri
GitHub - clauderic/dnd-kit: The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
Feature packed: customizable collision detection algorithms, multiple activators, draggable overlay, drag handles, auto-scrolling, constraints, and so much more. Built for React: exposes hooks such as useDraggable and useDroppable. and won't force you to re-architect your app or create additional wrapper DOM nodes. Supports a wide range of use cases: lists, grids, multiple containers, nested conte
Husky (v5) と lint-staged を使ってコミットする前に Prettier を実行する - 暇人じゃない
Git でコミットする前に Prettier や ESLint を動かす方法を探すと、Husky (v4) + lint-staged の組み合わせがヒットする。 2021/02/26 時点では Husky が v5 になっていて、package.json に hook を記述するのではなく、.husky ディレクトリの hook ファイル (pre-commit など) にスクリプトを定義するやり方に変わっていたのでまとめておく。 What's new in husky 5 - DEV Community それぞれのツールについて整理すると、Husky は Git の hook を管理するツール。lint-staged は Git に stage されているファイル (コミット対象のファイル) に指定したスクリプトを実行するツール。コミット対象のファイルにのみ Lint などのスクリプト
Stop mocking fetch
What's wrong with this test? // __tests__/checkout.js import * as React from 'react' import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { client } from '#app/utils/api-client' jest.mock('#app/utils/api-client') test('clicking "confirm" submits payment', async () => { const shoppingCart = buildShoppingCart() render(<Checkout shoppingCa
VRTやってますか？reg-suitですか？
2021/03/05 ANDPAD TechLive #4 ANDPAD FrontEnd NOW!!
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
WebRTC を今から学ぶ人に向けて
この資料には宣伝が含まれます ライセンス Creative Commons — 表示 - 非営利 - 改変禁止 4.0 国際 — CC BY-NC-ND 4.0 内容 これから WebRTC を学ぶ人が何を学ぶべきで、何は学ばないべきなのかを書く。定期的に更新していく。 趣味で学びたい人はターゲットに入っていません、仕事で利用する場合のみがターゲット。 まとめ 急がば回れで、W3C の資料を理解できるまで読み込む。 下手にフレームワークに依存したりして簡単な仕組みを覚えてしまうと後からツライ。 Media Capture and Streams WebRTC 1.0: Real-Time Communication Between Browsers Identifiers for WebRTC's Statistics API 作って学ぶも良いが、まずは出てくる単語などの意味を理解できるの
pullreq毎にprivateなstorybook(や静的webサイト)プレビューを作る
お、pullreqきてる。コンポーネント生やしたのかなるほど。storybookにも追加されてるな。 ...ちらっとでいいからstorybookの画面でも触りたいなぁ。 TL;DR webアクセスをIP制限したS3バケットを用意し、pullreqごとにgithub actionsでstorybookをビルド・S3にアップ・pullreqにURLをコメント、という仕組みを作った やりたいこと pullreqごとにstorybookの画面を見たい テスト環境にアップしてもらったり、checkoutしてビルドして、とかは面倒 プレビューはインターネットに公開したくない（アクセス制限したい） ちらっと見れればよいのです。pullreqにスッと置かれたリンクをおもむろに押して、軽く触ってみて、うんうん、と頷くくらいがよいのです。 なお成果物のリポジトリはこちら: https://github.com
Hotwireの感想 - laiso
Hotwire https://hotwire.dev/ Turboを中心としたウェブアプリケーションのアーキテクチャの要素技術やコンセプトをPRするための名称 Hotwireというライブラリがあるわけではない 役割としてはMicro FrontendsとかReactのlearn once, write anywhereなどに似ている アプリケーション実装言語非依存だけど現状Railsアプリケーションしか実用できる基盤がない Hotwireの思想 アプリケーション開発者の生産性を上げることを目的にしていること サーバーサイド言語でフロントエンドを実装したいアレではなかった プログレッシブ(段階的に利用可能)であること 必要な技術だけを使い無駄なことをしないことで効率化する Hotwireが列挙する技術は1つづつ有効にできる クライアントサイドでViewを差分更新する現在の主流のシングルペー
.eslintignore の配置場所は気をつけた方がいい - Qiita
ESLint v8.25.0 以降から .eslintignore は廃止されました。 今後はESLintの設定ファイルの ignores で指定することになります。 以下は ESLint v8.25.0 より古いバージョンの記事になります。 ESLintを使っていて割と細かい設定が必要なのでメモしておく. .eslintignore と .gitignore は同じ様な役割だが扱い方が全く違います. この違いを分かってないと期待した動作にはなりません. そこで具体的な違いを整理しました. TL;DR .eslintignore はプロジェクトルートに配置する. eslintrcで "root": trueを指定して同じディレクトリに配置するといい. .eslintignore はサブディレクトリには配置しない Dotファイル(.babelrc.js等)もチェック対象にするなら .esli
GitHub - ianstormtaylor/slate: A completely customizable framework for building rich text editors. (Currently in beta.)
A completely customizable framework for building rich text editors. Why? · Principles · Demo · Examples · Documentation · Contributing! Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs—which are becoming table stakes for applications on the web—without your codebase getting mired in complexity. It can do this because all of its logic is implemented wi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - chrisands/zsh-yarn-completions: Yarn completions for Z-shell that supports yarn workspaces
Pylint with pre-commit and EsLlint with husky
Hello from bangle.dev | bangle.dev
GitHub - wtetsu/mouse-dictionary: 📘Super fast browser dictionary
GitHub - nexe/nexe: 🎉 create a single executable out of your node.js apps
