はてなブックマーク

注意: これは公式見解ではない、ただ1メンバーの感想文です。 最近の大きなニュースとしては、webpackの主要メンバーの2人(Sokra, Alexander)は現在vercel雇われたことです。 🥳News: I have joined the awesome team at ▲ @Vercel While I'll continue to improve webpack, I'll also work on making Next.js even smoother...— Tobias Koppers (@wSokra) April 13, 2021 Good news today, I have joined @vercel🌟— Alexander Akait (@alexander_akait) December 29, 2021 これによりメンテナンスの安定度が増したことは

今回はgraphql-codegenを使い説明します。今回の例は、graphql-codegen以外でも発生する可能性がありますが自動生成系が一番顕著に影響がわかりやすいです。 graphql-codegenはよく、graphqlのスキーマからtypescriptの型定義/reactのhooks等を自動生成するのに使われますが、これはnext.jsと組み合わせた場合、少しトリッキーな部分があります。 www.graphql-code-generator.com graphql-codegenはデフォルトでは1ファイルにすべて出力されますが、それに対しnext.jsは各ページをchunksとして吐くため何も考えずに実装すると、バンドルされるファイル量が膨大になる可能性があります。next.config.jsからwebpackの設定を上書きできますが、optimazationはかなり上書きしづ

リポジトリ: github.com 今回の変更では、面倒事を減らしスライド作成に集中できるようにすることを目標にしていました。 Fusumaとは？ #0CJS MDX(Markdown + JSX(optional)) を使いスライドを作れる プレゼンターモードの提供(なぜかTwitter流せたりや落書きもできる) 音声録音とスライドの操作記録を保存できる github pagesへのデプロイがメインで、pdfでも出力可能 大きな変更 og:imageを自動生成/設定するようにしました ogp用に画像を設定するのがめんどくさいという意見があり、自動的に生成するように追加しました。現在はスライドの1ページ目を画像化しています。 ユーザー側へCSS Variablesを提供しました v1では、publicで外に出さずに自由にcssを書いてもらうようにしていましたが、0から書くのはめんどくさい部

数日前にGitHub Sponsorsの機能で企業が支援できるようになることが発表されました。 We all depend on open source every day, so it’s crucial to invest back into that infrastructure we’ve built our businesses and lives upon. So starting today, companies can sponsor projects and developers through their existing billing with GitHub!https://t.co/sF0uAdQRkX pic.twitter.com/w0l5DZHotb— GitHub (@github) 2020年12月8日 これにより、今後どのようにOSSに変化があるのかな

webpackはin-memoryのみで今まで永続的なキャッシュを実装していませんでした。理由としては、パフォーマンスよりも安全性を優先していたためです。 cache-loaderを使ったことがある人はわかるかもしれませんが、確かに速くなる一方、安全性が損なわれているのは事実です。 この機能は、webpackはデフォルトでファイルキャッシュをオンにはしませんがそれでもビルドの速度を上げたい場合に使う機能です。 以下がデフォルトの挙動となります。 mode cache development memory production false https://github.com/webpack/webpack/blob/60f7ce301df553d8ab0276ba2838ddb60ead1c94/lib/config/defaults.js#L158-L160 実際に使うときの設定 ドキュ

前回の記事 blog.hiroppy.me 変更点 機能追加 内部 その他 mdxの追加 Live Modeの追加 SidebarのUI変更 登壇者の行動をトラッキングする 音声を録音してタイムトラベルする パフォーマンス さいごに この一週間は、自分のOSSのみをやっていました。 そして、以下の機能を実装したのでまとめて紹介したいと思います。 スターが3000越しました🌟 やった！ github.com 変更点 機能追加 zero-config initして設定ファイルを生成する必要がなくなった SEOやスライドの設定するときは生成してください mdxの利用が可能に markdownの中でreact componentsを扱う Live Modeの追加 登壇中にツイートをリアルタイムで流せる SidebarのUIを変更 全体的に色を落とした スライドの動きをタイムラインとして可視化 い

www.patreon.com 3月から始めていましたが、特に自分が何も提供しない状態だったため、これを解消したくて内容を変更することにしました。 誰 JavaScriptがメインのエンジニアです。 Twitter GitHub 今現在、アイルランドのダブリンに在住しており、毎日通うような仕事を持っていません。 厳密に言うと、自分は個人事業主なのでリモートワークとして1つの会社で働かせていただいている + OSSをして生活してます。 現在の活動は、以下のOSSがスコープ対象です。 Node.js JavaScriptランタイム。 github.com メインは、ECMAScript Modulesとpathとconsoleのモジュールとなります。 webpack JavaScriptのバンドラ。 github.com スコープは、webpack(core)、webpack-dev-serv

一年前に作ったライブラリのv1.0.0リリースです。 blog.hiroppy.me リポジトリ Fusumaとは？ 大きな変更 スライドライブラリ WebSlides コンポーネント クラス マークダウンで書く 拡張 本番ビルド 発表者モード ノート サンプルリポジトリ 最後に リポジトリ github.com Fusumaとは？ 以下の機能をサポートしているCLIです。 開発環境(webpack-dev-server) 本番環境(最適化含む) GitHub Pagesへのデプロイ PDFの出力 SNS, OGP対応 発表者モード 発表者ノートやタイマー等 以下を実行するだけで、スライドが作れます。 $ npm i fusuma -D $ npx fusuma init $ mkdir slides && echo '# Hello😄' > slides/title.md $ npx

もしここに書いてないスライドがありましたら、twitterでおしえてください。 nodefest.jp キーノート NodeFest 2018 and jsconf in japan - Speaker Deck 来年、NodeFest は JSConf in japan になる予定です。 RoomA Offline-First Collaborative Data Structures by Mathias Buus Node.js: The Road to Workers by Anna Henningsen JavaScript Class Features: A case study in TC39 by Daniel Ehrenberg Who Takes Out Your Trash by Sanne Kalkman libuv: What's a Unicorn Veloci

www.apollographql.com 昨日、会社の同僚とreduxにapolloのキャッシュを乗せるかどうかって話をしたので、サンプルを書いてみました。 自分はreduxのアーキテクチャが大変好きですが、Apolloとは相性が悪いためと思っています。 (なんでApolloClient.reducer()がなくなったのかも考えるといいかも) また、ここでは話しませんがprop drillingを解決するための他の方法として、context apiの使用も考えることが可能です。 サンプルコード github.com react-apollo react-apolloではクエリを渡すことで自動にfetchを行い、コンポーネントをレンダリングすることが可能です。 // github/graphqlを叩き、hiroppyの情報を取得し表示する const GET_AUTHOR = gql` q

react-loadableをSSRで使う場合にハマった所が多かったのでまとめました。 PR 結論と注意点 loadable-components react-loadableからloadable-componentsへ 問題点 書き方 dynamic import Client Renderer Server Renderer 関連記事 PR github.com 結論と注意点 babel-pluginであるloadable-components/babelは必ずしも必要ない つまりbabelを通さなくてもTyepScriptのまま使える moduleを指定しないとcomponentIdが引けずに落ちるので必ず書く必要がある トップレベルにdynamic importしたもののファイル群(e.g. router)をimportしないといけない 起動時に読み込まないといけないため(当たり前

仕事の開発環境改善のために欲しかったので金曜日からコツコツ作っていたアプリケーションを紹介します。 github.com 目的 CIが走るとstorybookやフロントエンドの成果物などの静的ファイルを自動的にアップロードして、PRでのレビューコストを下げるのが目的です。 PRでのレビュー時にCSSの変更などローカルに落として確認するほどでもないものを落としてビルドするのは時間の無駄だと思っています。 また、特にstorybookはデザイナさんと共有することが多いので、常に見れるところにあってほしいなって思っています。 gh-pagesでもいいけどコミットが面倒なのと、複数並列でアップロードできないのが問題です。 つまりmasterのしか置けず、今自分が作業している状態を見せたい時の共有が大変です。 このツールと同じでS3にデプロイするツールは知ってますが、カスタマイズしたいのと自分のサー

できること 注意点 メンバーは同期されない 削除と更新には制約がある Garoonからの状態は反映に時間がかかる モチベーション アーキテクチャ 構成 Google Calendar APIの流れ 定期的にwebhookを動かすようにするためにgoogle calendar apiを叩くアプリ webhookを監視するためのアプリ 所感 github.com 一週間前にめっちゃやる気出たので作ってました。 できること シンプルにGaroonとGoogle Calendarでの予定の追加、更新、削除に関する同期が可能です。 注意点 メンバーは同期されない garoonとgoogle calendarではメンバーが異なるので、基本的に1人用の設計となっています。 e.g. google calendarで予定を作っても自分しかいない等 削除と更新には制約がある google calendarで

テーマ やりたかったこと デモ 手順 タスク 仕組み できること・できないこと できること できないこと 次の実装 さいごに fusuma0.0.1をリリースした。https://t.co/EpS9Wkq7DT— npx hiroppy😶 (@about_hiroppy) 2018年4月27日 今現在、0.2.1 テーマ 本質ではないwebpackとかBabelとかPostcssとかの設定ファイルを書くことなく、1コマンドでリリースまで面倒を見てくれて、マークダウンだけクールなスライドを作れるようにしたい。 サッとスライドを作れて、サッっとデプロイしたい。 やりたかったこと webpackやBabelの設定を隠蔽したい 開発・プロダクトビルド・リリースを1コマンドで終わらせたい マークダウン(or HTML)で書けるようにしたい フレームワークへの接続 bespoke.js以外にも対応さ

現在のNode.jsの安定性指標 Performance Timing API 目的 提供される変数・メソッド イメージ PerformanceEntry entryType node gc Performance timeOrigin now() nodeTiming mark() measure() timerify() getEntries() getEntriesByName() / getEntriesByType() PerformanceObserver ユーザーの手順 区間測定を行う 関数実行にかかる時間を測定する 使用例 Server Side Rendering まとめ 区間測定をしたい場合 イベントの測定をしたい場合 前回の記事とはまた別の話です。 blog.hiroppy.me 今回は、土曜日に京都で話したきたPerformance Timing APIについて話し

この記事は自分用のリンク集メモです。(色々と聞かれるときにリンク探すの大変なため) 注意: 追記・変更が頻繁に行われるでしょう 原因 Rodの違反行為一覧 参考Issues TSC投票ステータス 自主的に辞退した人 Mylesの意見・考え Bryanの意見・考え 自主辞退要求とRodの声明 Nodeの将来 Hacker News ZDNet TSC Node.js Foundationの動き 主な変更 TSCとCTCのリマージ 規約の更新 新しいModerationチームを立ち上げるための取り組み ボード Coreへの全体周知 Board 質問リスト このissueへの反応 Ayo.js フォークに関して 意見交換場所 npm 目的 Values アイコン CI さいごに 原因 Rodが複数回のNode.js Foundationの行動規範に対し違反を行っていた。 コレに関して、TSCで辞