Apple コレクションの Web サイトを作成する方法

しばらく前に、Apple コレクションを始めました。私は 10 代の頃から Apple ハードウェア (およびその美学) に注目してきましたが、当時は Mac を所有するお金がありませんでした。

私が初めて Mac を手にしたのは 19 歳のときでした。それはブラジルの eBay のような Web サイトで入手した iBook 700 Mhz でした。この資金は Flash プロジェクトからのものです。

カナダに数年間住んだ後、趣味に使うお金がいくらか増えました。ほとんどの場合、Craigslist の人からデバイスを購入します。

いくつかのラップトップと iDevice を使用した後、iThings に関する情報を収集し始めることにしました。最初に、モデル、シリアル番号、デバイスの入手方法、最小/最大 OS などを含む Gist を作成しました。

リストはますます大きくなり続け、コンテンツは乱雑に見え始めました。このコンテンツを Web サイトに表示するのは完璧だと思ったので、開発者を雇う必要はありませんでした:D

最初に、SQL データベースでデータを整理し、情報をさまざまな列とテーブルに分散させることにしました。その後、UI に入力するために必要なデータを提供するために、graphQL API を作成します。おそらく React で記述され、Babel でコンパイルされ、Webpack でパックされています。

前の段落を声に出して読むと、多くのテクノロジがあり、SASS や styled-components などのバックエンド言語や UI の詳細を無視していることがわかります。私の究極の目標が素敵なデザインでアイテムのリストを表示することだったとき、それはすべて少し圧倒されました.

そうは言っても、このコンテンツを次の要素なしで配信するにはどうすればよいかを考えました:

• API またはバックエンド作業
• 任意の JS フレームワーク/ライブラリ
• あらゆる JS ツール (Webpack、Babel など)
• あらゆる CSS 作業

これらの制約に加えて、いくつかのストレッチ ゴールがありました。

• アクセシビリティに優れたウェブサイトを作成する
• Mac OS 9.2 を実行しているコンピュータと iOS 3 を実行している iDevice を使用しているため、古いブラウザで動作するウェブサイトを作成します

勝負を受けて立つ。 1 つの index.html、いくつかのバニラ JS ファイル、カスタム CSS なし。このサイトを構築した経験をあなたと共有したいと思います。

TL、DR:

• 最終的なウェブサイト
• ソースコード

制約について、ポイントごとに説明しましょう:

API やバックエンド作業はありません

少し前に、Stein という SaaS 製品を見ました。 Google スプレッドシート ドキュメント内にデータを作成すると、データのエンドポイントが提供されます。彼らのライブラリはハンドルバーのように機能し、私のユースケースにぴったりでした:

<div data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1" data-stein-limit="2">
  <div>
    <h1>{{title}}</h1>
    <h6>By {{author}}</h6>
 
    {{content}}
 
    Read on <a href="{{link}}">Medium</a>
  </div>
</div>

JS フレームワーク/ライブラリおよびツールなし

このユースケースではフレームワークやライブラリを必要としなかったため、このプロジェクトにフレームワークやライブラリを追加しないことにしました。このページのすべての JS インタラクションは非常に単純です (メニューの表示/非表示、モーダル画面のオープン、パーマリンクの処理)。

フレームワーク/ライブラリを使用していなかったので、Webpack と Babel を追加することを避けることができました。プリセットやローダーを掘り下げる必要はありません。

追記create-react-app または Next.js を選択して、これらの問題をすべて解決できたと主張することもできますが、そうではありません。

CSS 作業なし

SASS を使用できる場合は特に、CSS を作成するのが大好きですが、ここでは CSS を作成しないことにしました。それを避けるべきいくつかの正当な理由がありました:

• 何のデザインも考えていませんでした。見栄えの良いものを作ることができたとしても、それに時間とエネルギーを注ぎたくありませんでした
• Tailwind CSS を使いたかった

Tailwind CSS について聞いたことがなくても、「これは単なる Bootstrap の代替手段にすぎない」と考えないでください。以下は、彼らのウェブサイトからの適切で短い説明です:

<ブロック引用>

ほとんどの CSS フレームワークはやりすぎです。
…
Tailwind は、独自の設計済みコンポーネントの代わりに、低レベルのユーティリティ クラスを提供します。これにより、HTML を離れることなく完全にカスタム設計を構築できます。

これはかなり真実です。すばやく検索すると、Tailwind CSS で「再構築」された多くの Web アプリが表示されます。

• Whatsapp
• 電報
• フェイスブック
• Reddit
• ユーチューブ
• たるみ
• コインベース
• Github
• トレロ
• ツイッター
• Netlify

アクセシビリティに優れたウェブサイトを作成する

先月、Deque University でアクセシビリティ コースの受講を開始しました。彼らのコンテンツは素晴らしく、デフォルトで HTML にアクセス可能であることを思い出しました。 .セマンティックな HTML 構造を使用し、キーボード ナビゲーションや色のコントラストなどの基本的なことをテストすることで、障害を持つ人々をコンテンツから遠ざけるいくつかの障壁を取り除きます。

私はアクセシビリティの専門家ではありませんが、この Web サイトのために取り組んできたアクセシビリティ関連の事柄をいくつか紹介します。

• スタイルシートを無効にする:スタイルシートを無効にすることで、コンテンツが論理的/構造的な方法に従っていることを確認できます。
• VoiceOver:VoiceOver は macOS と iOS に含まれています。使い方はとても簡単です。試してみることで、人々がこの機能をどのように使用しているかをよりよく理解することができます。
• モーダル:モーダルは問題を引き起こす可能性があります。私はイレ・アデリノくんのアプローチに従うことにしました。
• axe:この拡張機能は、WCAG 2 およびセクション 508 アクセシビリティ ルールのアクセシビリティ チェッカーです。

完璧ではありません。メイン コンテンツへのスキップ リンクの追加など、自分のサイトで作業しなかったことがいくつかあります。興味のある方は、すべての変更を含むプル リクエストをご覧ください。

古いブラウザで動作するウェブサイトを作成する

スクリプトやスタイルを制御できなかったため、この目的を達成できませんでした。しかし、それは不可能ではないようです。私が気付いたいくつかのこと:

• Expedite (Stein クライアント) は、Safari 10 でのみ追加されたフェッチを使用します。サーバーへのリクエストは、おそらく XMLHttpRequest に置き換えることができます。
• Tailwind は多くの要素で Flexbox を使用しています。 Safari は iOS 7 で Flexbox のサポートを開始したばかりです。適切な外観を実現するために、既存の要素にいくつかのプロパティを記述できるかもしれません。
• 古いブラウザでは SSL 証明書が問題になる場合があります。

結論

このウェブサイトを作るのはとても楽しかったです。この種のお気に入りのプロジェクトがあることで、自分の仕事で使用しない技術を扱う十分な理由が得られました。将来的には、Stein や TailwindCSS が、機能のプロトタイプ作成やハッカソン プロジェクトの構築に役立つ可能性があります。

プロジェクトに「制約」を追加したことで、枠にとらわれずに考えるようになりました。すべての目的を達成したわけではありませんが、すべての要素がどのようにつながっているかについて理解を深めるのに役立ちました.

さまざまな技術で遊ぶ機会を与えるために、このようなことをすることを強くお勧めします. Apple のコレクションである必要はありません。サイトを作成して、お気に入りの本や行った最高のハイキングをリストすることができます。この場合、旅は目標よりも重要です。

好奇心から、Clockify を使用して時間を追跡し、コーディング、データの作成、テスト、およびこの投稿の作成までに 13 時間を費やしました。

私のブログにも掲載されています。 Twitter でフォローしてください