第18期 - 雲窓月戸

第 18 期 - 云窗月户#

封面来源于网络。

記録した毎週の接地気のフロントエンドやテクノロジー関連の内容、そしていくつかの個人的な生活。選別後、2 週間ごとに更新します。良いと思ったらこのコラムをフォローして、更新通知を受け取るのが便利です。

🛠️ 技術関連#

ユーザー体験：イライラするネストメニュー！
https://ift.tt/3pmDdVJ
この記事では、ユーザーがサブメニューにマウスを移動しようとしたときに直面する可能性のある問題を含む、ネストメニューのユーザー体験に関する課題について議論しています。記事では、「セーフトライアングル」という概念を紹介しており、これが問題を効果的に解決し、よりスムーズなインタラクション体験を提供します。この概念は、マウスの移動パスを検出することで、サブメニューのオープン状態を維持するかどうかを決定します。

効率を高めるための 20 の JS ショートカットテクニック、クソ山にさよなら！
https://www.instapaper.com/read/1639264775
この記事では、20 の JS ショートカットテクニックを紹介しており、これらを多く使用することで、私たちのコードをより優雅にすることができます。

CSS 公式が後悔するいくつかの決定
https://www.instapaper.com/read/1639067948
この記事では、CSS 公式が認めたデザインミスのいくつかを紹介しており、これらのデザインミスは技術的な問題だけでなく、デザイン思考、ユーザー体験、社会文化などの複数の次元の複雑性を反映しています。

CSS：インライン要素の深堀り
https://sadose.github.io/2022/02/09/frontend-css-008/
この記事では、CSS におけるインライン要素のさまざまな側面を深く探求しており、文字のベースライン、x-height からベストプラクティスや属性値までを扱っています。記事は、文字「x」の構造を通じて、インライン要素のサイズ、行高、フォントサイズなどの概念を説明し、インライン要素の垂直中央揃えを実現する方法など、さまざまな実践方法を提供しています。また、ベースラインや余白に関連する問題についても議論し、フロントエンドプログラマーがより優雅に CSS を書く手助けをすることを目的としています。

【フロントエンドエンジニアリング】verdaccio を使用して会社の npm プライベートライブラリを構築する完全なプロセスと失敗の記録
https://juejin.cn/post/7096701542408912933
この記事では、verdaccio プライベート npm リポジトリの構築と使用方法について詳しく説明しており、会社内部のフロントエンドビジネスコンポーネントやロジックをより効果的に管理・使用するための方法を提供しています。記事は、プライベート npm ライブラリの構築の利点を強調しており、ビジネスコードの保護、ダウンロード速度の向上、キャッシュ機能を含んでいます。この方法により、会社は開発効率を向上させながら、コア技術とコードを保護できます。記事は、プライベート npm パッケージのインストール、公開、使用の手順、および構築中に遭遇する可能性のある問題の解決策を提供しています。

🧰 人気ツール#

Free for Developers
https://free-for.dev/
開発者が無料で使用できるツールを整理するためのサイトで、無料で利用できるのは本当に素晴らしいです😂

Box123
https://box123.io/
インターフェースが比較的クリーンで、内容が豊富なナビゲーションサイトで、多くの面白いサイトを発見しました。

tgState
https://github.com/csznet/tgState
Telegram をストレージとして使用するファイル外部リンクシステムで、Telegram の画像ホスティングや Telegram のクラウドストレージとしても使用できます。

open-interpreter
https://github.com/KillianLucas/open-interpreter
Open Interpreter は、ローカルで実行されるオープンソースのコードインタープリターで、言語モデルがあなたのコンピュータ上でコードを実行できるようにします。このツールは、Python、JavaScript、Shell などのさまざまなプログラミング言語をサポートしています。

idify
https://github.com/zhbhun/idify
証明写真作成ツールで、コードはオープンソースで、完全にフロントエンドで実装されています。

plane
https://github.com/makeplane/plane
オープンソースのプロジェクト管理ツールで、UI 機能は Linear に似ており、代替バージョンと言えます。

I Miss My Bar
http://imissmybar.com/
バーの音を提供するホワイトノイズサイトで、興味がある方は試してみてください。

ポッドキャストタウン
https://podtown.xyz/
中国語のブログを収集し、視覚化して山の中の小さな町に配置するサイトで、非常に面白いです。

🔍 一部のインデックス#

Shader Gradient
- フロントエンドで実現されたクールなグラデーション効果を展示するサイト
Poor Charlie’s Almanack: The Essential Wit and Wisdom of Charles T. Munger (stripe.press)
- 『Poor Charlie's Almanack』という本を展示するための非常にスタイリッシュなウェブページ
(t,i,x,y) => "creative code golfing" (tixy.land)
- Tixy Land は、ユーザーが短い JavaScript コードを書くことで視覚効果を作成できる環境です。この環境では、16x16 のグリッドが表示され、各グリッドの色と動きは、あなたが書いたコードによって制御されます。
Loaders | UI Ball
- このウェブページは、次のプロジェクトに適した無料のローダーとスピナーを提供しています。これらのローダーは HTML、CSS、いくつかの SVG で構築されており、React やコピーペーストにも使用でき、選択したパッケージマネージャーを通じて追加し、軽量の ESM モジュールをインポートしてカスタマイズできます。

随便看看#

💭 正しさと立場のどちらを優先すべきか？#

事実と論理に基づく正しさの判断:
- 正しさは通常、事実と論理に基づく判断です。問題を解決したり決定を下したりする際に、理性的な分析と事実に基づく判断は非常に重要です。たとえば、科学研究、法律判断、日常の問題解決において、事実の正確な理解と論理的推論が不可欠です。
立場の重要性:
- 立場は通常、個人または集団の価値観、信念、利益を反映します。政治や道徳的な議論などの特定の状況では、立場が正しさの判断よりも優先されることがあります。立場は、個人または集団が事実をどのように見て解釈し、どのように決定を下すかに影響を与える可能性があります。
正しさと立場のバランス:
- 多くの場合、理想的な状況は、正しさを認識した上で立場を明確にすることです。しかし、実際の状況はより複雑であり、時には正しさと立場の間でバランスを見つける必要があるかもしれません。たとえば、チームワークや社交的な相互作用において、自分の正しさの判断に固執しすぎると、人間関係やチームの協力に影響を与える可能性がありますが、適切な妥協や異なる立場の理解が共通点を見つけ、問題を解決するのに役立つことがあります。
状況の影響:
- 異なる状況や背景は、人々が正しさと立場の間でどのように選択するかに影響を与える可能性があります。たとえば、チームワークや合意を重視する環境では、異なる立場を考慮し、妥協を見つける傾向が強くなるかもしれません。一方、事実と論理を重視する環境では、正しさに基づく判断で決定を下す傾向が強くなるかもしれません。

もちろん、この問題には絶対的な答えはなく、具体的な状況や背景に基づいて考慮する必要があります。人々はこのような問題に対処する際に異なる見解やアプローチを持つ可能性があり、重要なのは必要に応じてオープンで理解を持ち、異なる状況で自分の思考や行動を調整する意欲を持つことです。

💎 製品をお金で買わないなら、あなたは売られている製品です#

この言葉は、現在のデジタル時代の重要な現実を明らかにしています。つまり、多くの無料のインターネットサービスにおいて、ユーザーの注意とデータが貴重な資源と見なされているということです。

注意経済:
- ソーシャルメディアや短編動画プラットフォームは、ユーザーの高頻度の使用と持続的な関心に依存して広告主を引き付け、利益を上げています。これらのプラットフォームは、魅力的なコンテンツとインタラクション体験を提供することでユーザーの注意を奪い、広告表示やユーザーデータ分析を通じて商業的価値を実現します。
ユーザーデータの価値:
- ユーザーの行動データは、ソーシャルメディアや短編動画プラットフォームにとって非常に貴重です。ユーザーの閲覧、いいね、シェアの行動を分析することで、プラットフォームはユーザーの好みやニーズをよりよく理解し、コンテンツ推薦アルゴリズムや広告投放戦略を最適化できます。
個人情報の交換:
- ユーザーは無料サービスを享受する一方で、自分の個人情報やプライバシーを無意識のうちに交換しています。この交換はユーザーに便利さや娯楽を提供しますが、潜在的なプライバシーリスクや情報セキュリティの問題が存在する可能性もあります。
ユーザーの選択:
- ユーザーは、これらの無料のソーシャルメディアや短編動画プラットフォームを使用するかどうかを選択する権利があります。一部のユーザーは、より良いサービスや体験を得るために支払うことを望むかもしれませんが、広告の干渉やデータ収集を避けるために。しかし、多くのユーザーは、一定のプライバシーの交換を代償にしてでも、無料サービスを受け入れる傾向があるかもしれません。
倫理と法律の考慮:
- ソーシャルメディアや短編動画プラットフォームは、商業的利益を追求する一方で、倫理的および法的責任も考慮する必要があります。たとえば、ユーザーデータを透明に処理する方法、ユーザープライバシーを保護する方法、過度の依存や情報過多を避ける方法などの問題があります。

現代のデジタル経済において、無料は必ずしも代償がないことを意味しません。ユーザーは無料サービスを享受する一方で、プライバシーや情報セキュリティのリスク、商業化された注意の現象に気づく必要があります。同時に、政府や社会もこれらの新しいビジネスモデルや技術の発展に対して適切な規制と指導を行い、ユーザーの権利と社会の健全な発展を保護する必要があります。

🎞️ 観賞#

国慶節の映画観賞リスト
- 《オンラインで幻覚剤を売る方法 1/2/3 シーズン》
  - 青春キャンパスでの麻薬取引を描いたドイツのドラマで、青春版のソーシャルネットワークのようで、自意識過剰でありながらも自信がない主人公とその麻薬取引の動機の組み合わせが非常に興味深いです。
- 《ダークウェブの若き麻薬王》
  - 《オンラインで幻覚剤を売る方法 1/2/3 シーズン》のインスピレーション源で、マックス・シュミットが子供の頃の寝室を拠点に麻薬帝国を築く様子を描いたドキュメンタリーです。
- 《監視資本主義：インテリジェントトラップ》
  - アルゴリズムやさまざまなデザインがどのように人々の注意を電子製品に引きつけ続けるかを描いた非常に良いドキュメンタリーです。人々は情報の茧に閉じ込められています。
  - "アルゴリズムは善に向かう"
- 《堅如磐石》
  - 中国の反腐敗映画で、特に言うことはありませんが、周冬雨はとても可愛いです。
- 《オッペンハイマー》
  - 伝記映画としてこのレベルの緊迫感を持っているのは本当に素晴らしいです。

📚 読書#

最近『偉大さは計画できない理由』を読んでおり、いくつかの見解が現在の私の行動態度に非常に合致しています。たとえば、日常生活にランダム性や不確実性を増やすことは、生物進化の際の遺伝子変異に似ており、思いがけない成果が得られるかもしれません。

🎮 ゲーム#

《ボードの扉》
- 国慶節に @niracler と一緒に数時間遊びました。最初は何もわからずに始めましたが、最初にデータ削除事件を経験しましたが、幸いにも数時間のデータだけでした😅。それでも非常に面白い冒険の経験でした。後で時間があれば続けて遊びます。
《APEX》
- 一人で暇なときに突撃して数回プレイします。しばらくプレイしないと、装甲が破壊される感覚が恋しくなります😄。
《原神》
- 約 5 ヶ月間プレイしていなかったので、最近ダウンロードして更新されたフォンタンの地下水城を見に行きました。PC で風景を見るのは実際にかなり良いです。おそらく毎日少し時間をかけてプレイし、リラックスゲームとして楽しむかもしれません。
《崩壊：星穹鉄道》
- miHoYo の新しいゲームを体験しました。ターン制の戦略ゲームで、キャラクターは非常に魅力的で、ターン制のゲームの中ではかなり強いです。この種のゲームに興味がある方は試してみてください。

🎉 終わり#

私の最新の動向を知りたい方は、
私の個人チャンネルをフォローしてください： https://t.me/barrybase と Twitter： https://twitter.com/BarryYangi
🍻素晴らしい週を祝福します！