省ビルドサイズ要求環境でモダンフロントエンドをやる (主に preact の話)
モダンフロントエンド = 宣言的 UI = 仮想 DOM ターゲット npm ツールチェインが使えない環境で、パフォーマンスを悪化させずにモダンフロントエンドをやりたい人 サードパーティスクリプトを提供する人 方向性 省ビルドサイズを目指す とくに外部から読み込まれる 3rd party script は、サイズ要求が厳しい lighthouse で 100 点の環境の点数を落とさないためには、おそらく 3rd は 20~30kb 未満を目指す必要がある 今後パフォーマンスが SEO に関わってくるので、このへんは重要 Google、ウェブサイトの UX 健全性を示す Web Vitals を導入。3 つの重要指標は LCP/FID/CLS | 海外 SEO 情報ブログ 実行時パフォーマンス要求 よほど複雑なアルゴリズムを実行するので無い限り、省ビルドサイズ制限を満たせば十分 モバイルで重
ドメインオブジェクトの設計ガイドライン
ドメイン駆動設計の内輪の勉強会用に作ったドメインオブジェクトの設計ガイドラインを公開します。Read less
TypeScriptの（tuple値じゃなくて）tuple型を操作する - Qiita
TypeScriptのtuple型（「値」 [4, "hello", true]じゃなくて「型」[number, string, boolean]）を操作する。 もちろん型を計算しているだけなので、runtime時の負荷は0。 snippetを上からコピーしてVSCodeに貼り付けていけばOK、型計算だけなのでコンパイル不要です。 Length (tuple型の要素数を取得） [string, number, boolean]から要素数の3を得る type Length<T extends any[]> = T['length'] type Target1 = Length<[string, number, boolean]> // => 3 declare const None: unique symbol type None = typeof None // Pushする型が'None
styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしました。 今回は styled-components の採用を決定するまでの過程や、既存の Scss ファイルの扱いについて検討した内容などを紹介します。 スタイル定義方法の検討 kintone にはユーザーが JavaScript でカスタマイズできる機能があり、ユーザーが行っているカスタマイズの中には、DOM 構造や CSS のクラス名に依存しているものもあります。このようなカスタマイズはサポートの対象外ではありますが、ユーザーにでき
気持ちよくUnitTestを書くために(jest) - Qiita
UnitTest を書くモチベーションがなかなか上がらない。それはなぜかを日々悶々と考えていました。 なぜこうもUnitTestをめんどくさく感じるのだろう。。。 Testが重要なことは十分理解しているし、品質を保つために必然であることもわかっているのに。 そして、今回のPostはこの日々の悶々とした感情に終止符を打つための私からのひとつの提案です。 テストフレームワークは jest、言語は node.js、 AWSのlambda、APIGatewayがベースとなるコードを使っていますが、「考えかた」の提案なので、他の言語にも応用できると思います。 なぜモチベーションが上がらないのか? 以下のコードを見てください。 describe('some component', () => { beforeEach(() => { ModoleA.func = mock.fn().mockImple
メルカリ社内Slack利用ガイドラインを一挙公開しました〜！！#メルカリな日々 | mercan (メルカン)
こんにちは！メルカン編集部のnatukifmです。 2020年6月23日、メルカリでは、全社的なコミュニケーションツールとして導入しているSlackの社内利用ガイドラインをGitHubにて公開しました〜！ Slack上での情報共有や連絡を円滑にするため、2016年につくられた本ガイドライン。細かな改定を重ねられてきたものの、2016年当時からほぼ変わっていなかったりします。 そこで本日の#メルカリな日々では、社外公開したばかりのメルカリ社内Slack利用ガイドラインをちらっとご紹介します！ Slackを使ううえでの前提 1：オープンであることを意識する ・ プライベートメッセージやプライベートチャンネルの利用は禁止しないが、人事・インサイダー情報以外は、コミュニケーションコストの低減と、風通しが良くオープンである社風を維持するために基本的にオープンにする ・ チャンネルへのinvite/l
Reactのレンダリングに関する完全ガイド - Qiita
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co
とほほのRust入門 - とほほのWWW入門
「ラスト」と読みます。 Mozilla に従事するグレイドン・ホアレが個人的に開発していましたが、のちに Mozilla の公式プロジェクトとなりました。 2021年には、AWS, Google, Huawei, Microsoft, Mozilla がメンバーとなる Rust Foundation に権利が委譲されました。 Rust は「錆(さび)」を意味します。開発チームに自転車乗りが多く、ロゴも自転車のさび付きチェーリングを元にしています。 C言語やC++に変わる言語として開発されました。 Stack Overflow で2016～2019年の間「最も愛されているプログラミング言語」として1位を獲得しています。 Firefox の Servo(HTMLレンダリングエンジン)も Rust で開発されています。 if ... や while ... なども式として評価することができます。
6/27 Open Source Conference 2020 Online/Hokkaido (2020/06/27 10:00〜)
北海道飯・酒を取り寄せよう せっかくの北海道開催ですから、北海道飯・酒を取り寄せて楽しみましょう。お取り寄せ可能な北海道グルメリストを作成しましたので、ご活用ください。 食事編 https://docs.google.com/document/d/1sgKCiHtkjP50NQhXHfXi3kigltgwGUub5hdbi8ZFcKY/edit?usp=sharing お酒編 https://docs.google.com/document/d/11Lp6CTe7Py6KN26KTlH3lj7aMeHugj7dlazHJ6dccS4/edit?usp=sharing ご参加の方へ：注意事項のご案内 connpassアカウントのメールアドレスが最新のアドレスになっているかどうかご確認ください。 古いメールアドレスなどでご登録されていますと、参加用URLのお知らせが届けられません。 当日の参加
JavaScriptで3 > a > 1と書いてしまった話 - sasurau4のブログ
はじめに 仕事でチームメンバーみんなでTypeScriptを書いているのだが、たまにmarkdownの中のJavaScriptをいじることがある。 ある日、ある数字aが3より小さく1より大きいという条件を書く必要があった。 そのときに書いたコードがこれ if (3 > a > 1) { // 省略 } プログラミングをやっていると、こういうときは 論理演算子で2つの式を結合して3 > a && a > 1 と書くように手癖がつくものだが、小学生のときから習ってきた数学的な記法はふとしたときに顔を出す。 特に、現代のエディターによる便利な補完に慣れきってしまっている状態で一切の補完が効かない状態で油断してJSを書くと上記のようなコードが爆誕する。 今回はこれのお話。 3 > a > 1の返り値 ところで、3 > a > 1の式、実はJSのSyntaxErrorにならないのを知っていただろうか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Kubernetes by Keytar - Jan Kleinert, Red Hat
Project Lightning Talk: jQuery - Michał Gołębiowski Owczarek
webpack 5 Miniseries - Tobias Koppers, webpack
Rui Ueyama on Twitter: "コンピュータサイエンスに興味があるネコ https://t.co/mtclf8BYf7"
ARM入門勉強会 (2020/08/08 13:30〜)
ミニマムなwebpack loader
Amazon.co.jp: スーパーコンピューターを20万円で創る (集英社新書): 伊藤智義: 本
How to unpack the return type of a Promise in TypeScript
HowSearchEnginesWork2020June.mp4 | Powered by Box
openapi-generator/modules/openapi-generator/src/main/resources/typescript-axios at master · OpenAPITools/openapi-generator