LoginSignup
3
2

More than 1 year has passed since last update.

@suzzzkiin株式会社サザビーリーグHR 横浜業務サポートセンター

ウェブサイト作成用備忘録・総集編：１号から２２号までのふりかえり【コピペでプレビュー】

Posted at

2020年7月31日にウェブサイト作成用備忘録・１号を投稿してから、あっという間に2022年…

成長した様な気もするし、あまり変わっていないような気もする心情ですが、今回は１号から２２号までの総集編として、各記事の内容の紹介や、記事投稿を続けてきた事で感じたことなどをまとめていこうと思います。

ウェブサイト作成用備忘録

「この機能使ってみたい」という理由で個人的に学習した内容については、
普段の業務で取り扱う事がない分、いざ業務で使う機会があった際に
「だいぶ前に学習で使ったことあるけど、それっきりだったから全部調べ直し…」
といった事が容易に想像できたので、キータ記事作成にあたり

「普段の業務や自主学習で作成した課題から、技術や経験を小分けにして、備忘録として記録する」

というテーマで投稿を続けています。

コピペでプレビュー形式を採用した理由

2020年当時の自分は、プログラミングの学習をゼロから始めた際に利用していた動画教材の内容が、

  • HTML + CSS（フレームワーク無し）
  • JavaScript（JQuery）

という内容だった為、JQueryが無いとJavaScriptが書けない状態でした。
なので、記事内にサンプルコードを載せる際はhtmlタグから書き始めて…

<html>
<head>
<!-- JQueryのcdn読み込み -->
</head>
<style>
/* CSS色々 */
</style>
<body>
<!-- HTML色々 -->
</body>
<script>
// JavaScript色々
</script>
</html>

↑の様に、ソース全文をコピぺする事で誰でもプレビュー出来るようにしつつ、
エディタ上でサンプルコードの動作確認を兼ねた書き方をしていました。

記事を書いていくうちに、JQuery無しのjavaScriptでもコードが書けるようになり、
そのうち簡単な内容ならCSSの書き方を工夫する事でjavaScript無しでもコードを書けるようになりました。

それでも「コピペでプレビュー」形式を維持したまま、１号から２２号までコツコツ記事投稿を続けてきました。
（codepenに会員登録して記事内にコードを埋め込めば、もう一段階見やすい記事になるかもしれませんが…それは今後の課題にしておきます）

１号～２２号までのふりかえり

１号：background-image の疑似アニメーション制御その１

↑の記事は初投稿の記事で、記事の内容を要約すると、

  • CSSは背景画像のアニメーションに対応していない。
  • javascriptでCSSアニメーションで画面を暗転させ、暗転中に背景画像を切り替えてから暗転を解除することで、疑似的にアニメーションしている様に見せる

という処理を紹介しています。

読み返してみると、最初の頃は「コピペでプレビュー」ですらなかった事を思い出しました…（笑）

せっかくなので、コピペでプレビュー形式に形を整えたソースコードをここに残しておこうと思います。

サンプルコード１号

↓コピーしたらここでペースト
https://codepen.io/pen/


<html>
  <style>
    body {
      margin: 0;
    }
    #hide_screen {
      min-height: 100%;
      min-width: 100%;
      background-color: #000;
      position: fixed;
      z-index: 2;
      transition: all .5s;
      -webkit-transition: all .5s;
    }
    #hide_screen.none {
      opacity: 0;
      pointer-events: none;
    }
    #background {
      background-image: url(https://placehold.jp/3d4070/ffffff/500x500.png?text=%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%EF%BC%91)
    }
    #background.change {
      background-image: url(https://placehold.jp/70403D/ffffff/500x500.png?text=%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%EF%BC%92)
    }
    #change_screen {
      width: 200px;
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
  <body id="background" class="">
    <div id="hide_screen" class="none"></div>
    <button id="change_screen" class="" type="button">背景変更</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
      jQuery(document).ready(function(){
        $("#change_screen").click(function(){
          $("#hide_screen").removeClass("none");
          setTimeout(function(){
            $("#background").toggleClass("change");  
          },1000);
          setTimeout(function(){
            $("#hide_screen").addClass("none");
          },1000);
        });
      });
    </script>
  </body>
</html>

２号：background-image の疑似アニメーション制御その２

ほとんど１号と同じ内容ですが、１号が暗転中の背景切り替えに対し、２号では

  • 背景画像とメインコンテンツの要素を分離させ、背景画像を表示する要素は二つ用意しておく
  • 背景画像切り替え時は、二つの要素のopacityの値を同時に入れ替える事で疑似的なクロスフェードしている様に見せる

という処理の紹介をしています。

せっかくなので、２号のサンプルコードも残しておこうと思います。

サンプルコード２号

↓コピーしたらここでペースト
https://codepen.io/pen/


<html>
  <style>
    body {
      margin: 0;
    }
    #background1,
    #background2 {
      min-height: 100%;
      min-width: 100%;
      opacity: 1;
      position: fixed;
      transition: all 1s;
    }
    #background1 {
      background-image: url(https://placehold.jp/3d4070/ffffff/500x500.png?text=%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%EF%BC%91)
    }
    #background2 {
      background-image: url(https://placehold.jp/70403D/ffffff/500x500.png?text=%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%EF%BC%92)
    }
    #background1.none,
    #background2.none {
      opacity: 0;
    }
    #change_screen {
      width: 200px;
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
  <body>
    <div id="background1" class=""></div>
    <div id="background2" class="none"></div>
    <button id="change_screen" class="" type="button">背景変更</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
      jQuery(document).ready(function(){
        $("#change_screen").click(function(){
          $("#background1").toggleClass("none");
          $("#background2").toggleClass("none");
        });
      });
    </script>
  </body>
</html>

３号：video タグを活用した疑似アニメーション背景

３号では、背景画像の活用から一歩進んで、動画を丸ごと背景に使用すればサイトの演出が豪華になるのでは…？
というテーマで学習を行い、videoタグの取り扱いについてを記事にまとめました。

  • 要素の背景には動画を設定できない
  • videoタグの各種設定について
  • 使用する動画のサイズの注意点
  • videoタグの動画を背景として使用する際のCSSの設定

等が主な内容です。

１～３号を作成していた当時は、「誰でもweb上から参照できるサンプル用の背景画像や動画が無いからコピペでプレビューしても意味がない」と思っていましたが、実はWEB上のダミー画像やダミー素材を参照可能なサイトがいくつか存在していて、今回の記事では普段自分が利用している

↑のサイトや

↑の記事で紹介されている

こちらのサイト等からダミー素材を参照する事でサンプルコードを「コピペでプレビュー形式」を実現しています。

せっかくなので、３号のサンプルコードも残しておきます。

サンプルコード３号

↓コピーしたらここでペースト
https://codepen.io/pen/


<html>
  <style>
    body {
      margin: 0;
    }
    div {
      position: relative;
      z-index: 1;
    }
    h1 {
      margin: 0;
      color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%,-50%);
    }
    .background_video {
      min-width: 100%;
      min-height: 100%;
      position: fixed;
      z-index: 0;
    }
  </style>
  <body>
    <video class="background_video" src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" autoplay loop muted poster="https://samplelib.com/lib/preview/mp4/sample-5s.jpg"></video>
    <h1>hello world</h1>
  </body>
</html>

４号：chrome デベロッパーツールでは分からない background-image の落とし穴

４号についての紹介は、せっかくなのでこの言葉を残しておきます。

「自分が作成したウェブページを実機のスマートフォンでチェックした際に見つけたデベロッパーツールでは分からないbackground-imageの不具合と対策について、備忘録として残しておきます」

５号：１カラムＷＥＢデザインの自作サンプルその１【コピペでプレビュー】

「その１」と書いてある割に、その後「その２」が投稿されることはありませんでした…（笑）
（後でバージョンアップ版が出せそうな内容にはとりあえず「その１」を付ける癖、あると思います）

自主学習でのウェブサイト作成時、３号で紹介したの動画背景を使用する場合、コンテンツを表示するには動画背景とコンテンツとの間にウィンドウを挟まないとコンテンツ自体の視認性が落ちてしまい、逆にウィンドウが大きいと今度はせっかくの動画背景が見えなくなってしまう為、一度に表示するコンテンツ量を絞り、ウィンドウサイズをなるべく小さくする事でバランスを取ろうとしていました。

そして、そのウィンドウの構造だけを大雑把に切り出して紹介したのが５号の記事になります。

改めて見返してみると、色々拙い所だらけなのですが、「コピペでプレビュー」形式は当時書いたコードがそのまま記録されているので、良くも悪くも自分の学習段階を見返す機会になったと思います。

せっかくなので、元々のコードはそのままに、ダミー動画を追加した本来目指していた状態のサンプルコードをここに残しておきます。

サンプルコード５号

↓コピーしたらここでペースト
https://codepen.io/pen/


<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
  <style>

    * {
      margin: 0;
    }

    #screen {
      background-color: rgba(15,15,15,0.9);
      border-radius: 20px;
      min-height: 95%;
      max-width: 750px;
      position: fixed;
      top: 50%;
      right: 50%;
      z-index: 0;
      transform: translate(50%, -50%);
      -webkit-transform: translate(50%, -50%);
      animation: start 1s ease 1s 1 normal forwards running;
      -webkit-animation: start 1s ease 1s 1 normal forwards running;
    }

    @keyframes start {
      0% {
        width: 0;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.4);
      }
      100% {
        width: 90%;
        box-shadow: 25px 50px 20px 10px rgba(0,0,0,0.4);
      }
    }

    @-webkit-keyframes start {
      0% {
        width: 0;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.4);
      }
      100% {
        width: 90%;
        box-shadow: 25px 50px 20px 10px rgba(0,0,0,0.4);
      }
    }

    #hide_start {
      color: #fff;
      pointer-events: none;
      margin: auto;
      opacity: 0;
      width: 90%;
      max-width: 750px;
      position: relative;
      top: 40px;
      animation: show 1s 2s forwards;
      -webkit-animation: show 1s 2s forwards;
    }

    @keyframes show {
      100% {
        opacity: 1;
        pointer-events: unset;
      }
    }

    @-webkit-keyframes show {
      100% {
        opacity: 1;
        pointer-events: unset;
      }
    }

    #button_1 {
      cursor: pointer;
      position: fixed;
      right: calc(5% + 20px);
      z-index: 2;
      border-radius: 10px;
      transition: all 1s 0s ease;
      -webkit-transition: all 1s 0s ease;
    }

    #button_1.menu {
      right: calc(2% + 20px);
    }

    #screen.open {
      box-shadow: 25px 50px 20px 10px rgba(0,0,0,0.4);
      animation: menu_o 1s ease 0s 1 normal forwards running;
      -webkit-animation: menu_o 1s ease 0s 1 normal forwards running;
    }

    #screen.close {
      box-shadow: 25px 50px 20px 10px rgba(0,0,0,0.4);
      animation: menu_c 1s ease 0s 1 normal forwards running;
      -webkit-animation: menu_c 1s ease 0s 1 normal forwards running;
    }

    .background_video {
      min-width: 100%;
      min-height: 100%;
      position: fixed;
      z-index: 0;
    }

    @keyframes menu_o {
      0% {
        width: 90%;
      }    
      100% {
        width: 60%;
        right: 20px;
        transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
      }
    }

    @-webkit-keyframes menu_o {
      0% {
        width: 90%;
      }    
      100% {
        width: 60%;
        right: 20px;
        transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
      }
    }

    @keyframes menu_c {
      0% {
        width: 60%;
        right: 20px;
        transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%);
      }
      100% {
        width: 90%;
        right: 50%;
        transform: translate(50%, -50%);
        -webkit-transform: translate(50%, -50%);
      }
    }

    @-webkit-keyframes menu_c {
      0% {
        width: 60%;
        right: 20px;
        transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%);
      }
      100% {
        width: 90%;
        right: 50%;
        transform: translate(50%, -50%);
        -webkit-transform: translate(50%, -50%);
      }
    }

    #menu {
      box-sizing: border-box;
      opacity: 1;
      padding-left: 1em;
      position: fixed;
      right: 20px;
      width: 60%;
      max-width: 750px;
      transition: all .5s;
      -webkit-transition: all .5s;
    }

    #menu.none {
      opacity: 0;
      pointer-events: none;
    }

    #content {
      box-sizing: border-box;
      padding: 0 1em;
      margin: auto;
      position: relative;
      transition: all .5s;
      -webkit-transition: all .5s;
    }

    #content.none {
      opacity: 0;
      pointer-events: none;
    }

  @media(min-width: 850px) {
  /* PC設定 */

    #screen {
      animation: start 1.5s ease 1s 1 normal forwards running;
      -webkit-animation: start 1.5s ease 1s 1 normal forwards running;    
    }

    #button_1 {
      right: calc(50% - 360px);
    } 

  }
  </style>
  <body id="" class="">
    <video class="background_video" src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" autoplay loop muted poster="https://samplelib.com/lib/preview/mp4/sample-5s.jpg"></video>
    <div id="screen" class=""></div>
    <div id="hide_start">
      <button type="button" id="button_1" class="">〇</button>
      <nav id="menu" class="none">
        <h2>MENU</h2>
      </nav>
      <main id="content">
        <h1>CONTENTS</h1>
      </main>
    </div>
  </body>
  <script type="text/javascript">
    jQuery(document).ready(function(){

      $("#button_1").click(function() {
        if($("#menu").hasClass("none")) {
          $("#screen").removeClass("close");
          $("#screen").addClass("open");
        } else {
          $("#screen").removeClass("open");
          $("#screen").addClass("close");
        }
        $("#button_1").toggleClass("menu");
        $("#menu").toggleClass("none");
        $("#content").toggleClass("none");
      });

    });
  </script>
</html>

６号：３Ｄアニメーションディスプレイの自作サンプル【コピペでプレビュー】

この辺りの記事から、自主学習のテーマが「普段の業務で使う内容のレベルアップ」から、「個人的に使ってみたい機能を片っ端から試していく」に移行していたと思います。

６号はCSSの transform-style:preserve-3d という機能を使って、「webGLを使用せずに、ウェブサイト上で立体的な構造を表現する」というテーマの記事です。

記事を投稿してから今日に至るまで、実際の業務では一度も上記の機能を使用する機会はなかったので、これから preserve-3d を取り扱う際は、改めて６号を読み返さないと使いこなせなさそうなので、備忘録の重要性を実感する記事でもあります。

この記事のサンプルコードは６号の内容で十分なので、プレビュー時のスクリーンショットだけ残しておきます。

キャプチャ.JPG

７号：JavaScript 無しでアニメーションの切り替えを行う【コピペでプレビュー】

７号の記事は、実質５号「その２」とも言える内容です。

いままでは、ボタンなどのクリックでjavascriptを発火させ、
クラスの付け替えを行う事でstyleの変更を行っていましたが、７号ではHTMLの上から

  1. ボタンとして扱うチェックボックス形式のinputタグ
  2. inputタグをクリック時にCSSを切り替えたい要素

の順で並ぶように書き込み、CSSではinputタグからstyleを切り替えたい要素までセレクタを繋げる書き方で

  1. 通常時のstyle
  2. checkedの疑似要素が適応された状態のstyle

の2通りを用意する事で、ボタンクリックで疑似的にstyleの変更を行っています。

今改めて見返してみると…

やむおえない事情でjavascriptが使用禁止かつ、CSSが使用可能な状態以外では、
普通にjavascriptでクラスの付け替えをした方が楽です

ただ、この技術自体はinputタグのchecked以外にもオンオフが可能な疑似クラスに応用する事で色々な表現が可能になると思うので、学習自体は有意義だったと思います。

例：ある要素がhover状態の時に、その要素からセレクタを繋げて離れた要素のstyleを変更する等

８号・９号：クロスブラウザコーディングとの戦い…その１・その２

８号・９号は業務中にウェブサイトの表示を各ブラウザ間で統一する調整の際に悪戦苦闘した記録を備忘録として投稿した記事です。

2022年6月16日にIEのサポートが終了し、IEを開いても強制的にedgeが開かれるようになります。

嬉しい…！！！！

１０号：二重発火防止メモ【コピペでプレビュー】

１０号は、一ヶ所のボタンでオンオフの切り替えアニメーションを実装してプレビューした際に、Javascritp側の処理とCSSアニメーションの処理が完了するまでの時間差の関係で、アニメーション終了前に次のアニメーションを開始出来てしまう不具合を自分なりに解決した際の方法を記録した記事です。

１１号：「とりあえず動けばヨシ！」からの卒業…コード短縮編【コピペでプレビュー】

１１号は、記事の本題はjavascriptのコードの短縮ですが、記事作成時はSVGデータの取り扱いとSVGアニメーションの学習も行っていて、サンプルコードは元々の自主学習用の課題から、記事の本題となる部分を切り出したコードを使用しています。

SVGの扱いは、普段の業務ではあまり機会がないものの、画像作成の手間を省いたり、SVGデータを変形させるアニメーションを実装でき、表現の幅が広がるのでこの記事も後々学習内容を思い出す際に役立ってくれると考えています。

１２号：ページ読み込み時にcanvasアニメーションを実行【コピペでプレビュー＋α】

１２号は、createJSでのcanvasアニメーションの学習内容のまとめとして投稿した記事です。

例によってcanvasもcreateJSによるcanvasアニメーションも、今日まで普段の業務中にしようする機会はありませんでしたが…
その分、いざという時にこの記事はきっと役立つと思っています。

ちなみに、この辺りから記事作成の為に学習内容を活かしたサンプルコードをゼロから書けるようになってきました。

１３号：ローカルストレージを活用したダークモード持続設定【コピペでプレビュー】

１３号は、「javascriptのローカルストレージ機能を活用する」というテーマでウェブページを作成した学習内容のまとめとして、「ライトモード・ダークモードの設定をブラウザ側で記憶する機能」を紹介しています。

１４号：無料レンタルサーバ（PHP使用不可）でogpタグの疑似動的制御を行う

１４号は、ウェブページの内容をSNSにシェアした際に表示を整える為のOGPタグの学習と、PHP等のサーバーサイド言語が使用できない環境で疑似的にOGPタグを書き換えている様に見せかける方法を自分なりに実装してみた内容をまとめた記事です。

限定的な内容なので、自主学習以外では使う機会がないと思っていた内容だったのですが、最近cookieの取り扱いが厳しくなったことで、外部ページに遷移する際にクッションページを挟むウェブサイトが増えた事で、学習ページ作成の際に初めて使用したアクセス元のURLを取得するdocument.referrerや、Google検索にページが表示されないようにする為のメタタグnoindex等、間接的に業務で役に立つことがあったので、意味のある学習だったと思います。

１５号：three.jsの学習に挑戦【コピペでプレビュー】

１５号では、three.jsでのwebGLの学習内容をまとめた記事です。
webGLの学習はかなり苦戦していた為、学習した内容をまとめたサンプルコードだけではなく、

  • どのような流れで学習を進めたか
  • 学習の際に参考になったサイト

など、学習過程についてもまとめた記事になっています。

サンプルコードは元記事にあるので、ここではプレビューのスクリーンショットを載せておきます。

キャプチャ1.JPG

１６号：スマホのソフトウェアキーボードとOrbitControls.jsの不具合の解消

１６号は引き続きthree.jsに関連する内容で、OrbitControls.jsプラグインを読み込む事でwebGLのカメラをマウスドラッグで操作できるようになるのですが、背面にwebGLのオブジェクトを背景として表示し、手前のHTML部分でinputタグに文章を入力する際、上下左右の矢印ボタンがOrbitControls.jsのカメラコントロールに割り当てられてしまう不具合が発生しました。
この問題を解決した際の方法を紹介しています。

１７号：three.jsとHTMLの連動に挑戦【コピペでプレビュー】

１７号は１５号の発展版として、背面に表示したwebGLのオブジェクトを、前面のHTMLの矢印ボタンを通して移動させるという処理を紹介しています。

ついでに、webGLをcanvasで作成した画像で塗装してみたりと、今までの学習内容を全体的に盛り込んだ内容です。

１８号：three.jsで似たようなオブジェクトをまとめて生成し、後で個別にアニメーションさせたい【コピペでプレビュー】

１８号は１７号のさらなる発展版として、背面に同じ形状の柱のオブジェクトを配列の中に９本表示し、生成後は前面のHTML部分で柱を個別に選択できるようにして、それぞれの柱の長さを個別に変化させる。
という内容のサンプルコードを紹介しています。

元記事ではプレビューのスクリーンショットがないので、こちらに載せておきます。

キャプチャ2.JPG

１９号：ブックマークレットの学習【サンプル有り】

１９号では、実務で使用するブックマークレットを作成した記念に、作成までの学習内容をまとめて記事にしています。

元記事にはブックマークレットを使用したサイトの全ての画像・SVGデータ・iframe要素を対象にブラー効果を載せる「スクリーンショット用著作権バリアー」というサンプルブックマークレットを紹介しています。
※実際に著作権を守れるかどうかについては正直何とも言えない所ですが…

２０号：動画素材の取り扱いについて

２０号は、動画背景の為に使用する動画ファイルをどうやって調達するのかについて自分なりにまとめています。

この頃は、ある程度HTML、CSS、Javascriptの基本的な内容やcanvas、SVG、webGL等の表現方法も色々学習してきて、今度はadobeツールを活用してウェブサイトで使用する素材を自分で用意するにはどうすれば良いのか？
という事も課題として考えられるようになってきました。

２１号：javascriptのuse strictの適用範囲の疑問点について

２１号の作成時は、既に公開されている他所のサイトの構造やjavascriptの内容を読み取ったりする事で自分の知らない部分を一つずつ調べていく学習を行っていたのですが、その中で uss strict という機能を初めて知り、詳細を調べる中で疑問に思った事や、最終的に疑問が解決するまでの過程をまとめた内容になっています。

２２号：ローディングアニメーションの疑問点について

２２号は、２１号から継続して既に公開されている他所のサイトの構造やjavascriptの内容を読み取ったりする学習の中で、ローディングアニメーションを実行（または解除）する内容のコードを調べていた時に感じた疑問点や、そもそも何故ローディングアニメーションが必要なのかについても調べたことをまとめた内容となっています。

まとめ

学習内容をキータ記事に投稿して良かった点

  • 反応が返ってくると嬉しい（特に、記事の内容の補足やさらなる改善点を教えてもらえる事があり、とても参考になる）
  • 普段の業務で使用しない学習内容を記事にまとめておくことで、後で記事を見返す事で学習した時の感覚を取り戻せる
  • 定期的に記事を投稿するにはネタを探し続ける必要があるため、自然と色々な事に気付きやすくなる

学習内容をキータ記事に投稿する際に大変な事

  • 基本的に記事を書くのは大変
  • 記事のネタを探すのも大変
  • マークダウン形式に慣れるのが大変（量をこなすうちに、すこーしずつキレイに書けるようになってきました）

じわじわネタ切れに悩んできてはいますが、引き続き記事投稿を続けていくつもりです。

かなり長い記事になりましたが、今回は以上になります。
記事の内容自体は独立している為、ページ右側に目次から気になった所の記事だけでも誰かの参考になれば幸いです。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2