ホットな新しいWeb機能 – Codepen

邪悪な火星人のユーリ・ミキンとトラビス・ターナーが私たちを懇願します： 待ってはいけません、ブラウザの連絡先ピッカーAPIを今すぐ使用しましょう。私が書いているように、それは基本的にAndroidのChromeでのみ利用可能です。しかし、スペックは存在し、iOSには実験フラグもあります。私はiOSの男なので、それをめくっていました。私は実際にあなたがそれをすることができるとさえ知りませんでした！ （設定> Safari> Advanced>実験機能）。

今、あなたがそれをサポートするブラウザにいるなら…

select メソッドは、ユーザーに連絡先を選択するモーダルUIを表示すると、 Promise。約束が解決した場合、それは（1つの連絡先だけが選択された場合でも）配列を返します ContactInfo インターフェイス。

想像できると確信しています。ボタンか何かをタップすると、コンタクトピッカーが起動します。デバイスの連絡先から連絡先を選択します。名前、電子メール、電話番号などの連絡先からデータを返します。

すべてのアプリがそれを必要とするわけではありませんが、私はそれを多く使用できると思います（特にプログレッシブエンハンスメントスタイルで）。あなたのアプリは何らかの招待または共有UIを持っていますか？そこで使用できます。私はフィグマの共有モーダルのようなものを考えています：

私は自分で、そこにメールアドレスを書くために私自身です。これがGoogleドキュメントの場合、Gmailを使用し、何らかの形の連絡先を保持する可能性のおかげで、彼らはすでにあなたのための連絡先リストを持っているという明確な利点があります。しかし、Googleはほとんどいません。コンタクトピッカーAPIレベルの競技場！

私はそれを与えました 邪悪な火星人のデモ スピン、そしてそれはうまく機能します。

このような新しいAPIで実際にプレイして簡単に再生し、それらを感じて後で参照するために保存するのを非常に簡単にするために、使いやすいWebアプリしかなかった場合。コード用のある種のプレイペン。

私は愚痴を言っていたと思います text-wrap: balance; 先日。私と同じように、ウェブ全体で見出しの見た目を良くし、それについて好きではないものを見つけるのに役立つそのような輝かしい新しいプロパティを与えられるようになります。 balance Valueはマルチラインテキストを使用し、それらすべての行をできる限りおおよそします。一般的に、見出しにはかなり良いように見えると思います。キッカーは、「バランス」が常に人々が達成しようとしているものではなく、彼らが本当に望んでいることは、厄介な孤児の単一の単語が次のラインに包まれるのを避けることです。

アダム・アーガイルは私に言った：あなたは見たことがありますか text-wrap: pretty;？

1. いいえ、私は持っていません。
2. awww、 pretty CSSの素晴らしいキーワード値です。

私はそれをグーグルで検索して見つけました アミットマーチャントのクイックカバレッジ。それから私は言いました デモを作成します 試してみることができます（Chrome Canaryでは、117隻が安定しているまで機能します）。

私が意味することを見てください balance その上？私が本当にやりたかったのは、単語の孤児を防ぐことだけだったとき、あまりにも多くのスペースが残っています。今 pretty それを防ぐことができます。

それはとても一般的に便利で、私はようなことをするように誘惑されるかもしれません…

p, li, dt, dd, blockquote, .no-orphan {
  text-wrap: pretty;
}

…「リセット」スタイルシート。

人生の形成的な瞬間を反映する人々は、通常、良い物語を作ります。そして、特に彼らが「…そしてそれが私がオタクになった方法です。」それは、アレクサンダー・ミラーのお父さんが彼にいくつかの紙を与えたときに起こったことです：

私が子供の頃、父は私にグリッドが印刷された紙をくれました。サイズは約1インチの標準グラフペーパーよりも大きな正方形で構成されていました。基本的に空白のチェスボードでした。

グリッドの世界

私はアレクサンダーのような信じられないほどのコードアーティストにはなりませんでしたが、それでも関連することができます。私の最初の「成功した」プログラムはグリッドベースでした。第一に、コンウェイズの人生のゲーム（私はまだ少し夢中になっている）、そして戦艦（アレクサンダーの父親のような）。これらは私にとって絶対に形成的な瞬間でした。

主要なJavaScriptフレームワークの1つが別のJavaScriptフレームワークの1つを知っていますか？私はあなたがそうするに違いないよね？あなたは非常に優れたグループです、私は言うことができます。

コンポーネントパーティーはウェブサイトです それは、各主要なフレームワーク（React、Svelte、Vue2/3、Angular、Lit、Emberなど）で基本的で重要なことを行う方法を示しています。とても賢いと思います！フレームワークの1つを知っていると、そこでそれがどのように行われたかを確認し、別のフレームワークでどのように機能するかを確認できます。 Reactでデータをループする必要がある場合のように、おそらくあなたは .map() 物事ですが、Svelteにはあります #each、vueではaです v-for 属性。私は、ここで有用な参照をするために、私からこのすべてを覚えておくのに十分な異なるフレームワークを越えて作業していません。

「今年の秋（2023）」は、Macos Sonomaのリリース日に知っているすべてです。通常、オペレーティングシステムのリリースは、ブラウザーバージョンのリリースにもっと関心のあるWebデザインや開発者にとってそれほど大したことではありません。しかし、ソノマにはトリックがあります。

MacOSソノマと一緒に Appleはインストール可能なWebアプリのコンセプトにオールインします。彼らは全体的なMacOSエクスペリエンスに非常に統合されており、Safari UIをまったく見せないことで、Webルーツを配りません。

トーマス・シュタイナー、 Macos Sonoma 14ベータのWebアプリ

インストール可能なWebアプリ、あなたは言いますか？ように…pwas？ （プログレッシブWebアプリ）。少なくとも私の心の中では、PWAのポイントは、それらがネイティブアプリの本当の競合他社になることを意図しているということです。インストール後、それらは他のアプリの隣にあるクリック可能なアイコンです。平等な競技場。しかし、インストール可能になるためには、要件の最小チェックリストがありました。 manifest.json。

Appleの言葉は、これには文字通りゼロの要件があるということです。任意のWebサイトを「ドックに追加」することができ、機能します。それは、完全にオフラインで動作しないドッキングアプリを用意することが可能であることを意味すると思いますが、🤷‍♀️です。

このようにインストールされたサイトは、期待するようなすべてのPWAメカニズムを尊重します！サイト と マニフェストはサファリUIをまったく表示しません。インストールプロンプトがまだ提供されているとは思わないので、ユーザーはこれについて知り、メニュー項目を見つける必要があります。ユーザーが既にインストールされているウェブサイトに移動する場合、通常のSafariにはプロンプトがあります（「アプリ」を「開く」ため）。

全体として、この方法でインストールされたアプリは、OSに非常にうまく統合されているように見えます。しかし、私はトーマスにも同意します ウィッシュリスト、それらはすべて、物事をさらに良くするように思われます。