タグ

ブックマーク / blog.ojisan.io (8)

  • 無限スクロールは考慮することが多い

    毎年無限スクロールの実装をしているのだが正直なところ実装したくないので依頼されたときの反論材料として実装したくない理由を言語化しておこうと思う。 無限スクロールとは 無限スクロールが何を指すかを知らない人のために解説すると、ページにコンテンツを足す方式でページネーションする UI を指している。例えば Twitter のように下にどんどんコンテンツが伸びていく UI が良い例だろう。そのような UI を無限スクロールと呼ぶことが正式なのかは知らないが、このような体験の実現を支援するライブラリに infinite-scroll というものがあり、少しは普及している呼び方なのだと思い無限スクロールという言葉を使う。一方で WEB フロントエンド文脈で無限スクロールと言うと複雑 GUI やドローイングツール実装における "無限平面" のようなニュアンスもあるが、今は無限平面のことを指しているわけ

    無限スクロールは考慮することが多い
    syug
    syug 2022/05/20
  • 不正なリクエストに一泡吹かせたい

    この記事は sadnessOjisan Advent Calendar 2021 25 日目の記事です。 ついに最終日ですね!今日は 02/04 なのですが・・・ 12/25 に Qiita のクソアプリカレンダーに マッチした人の年収を知れるマッチングアプリを作った と言うのを書いたのですが、あまりにも攻撃的なリクエストが飛んできたので閉じました。 で、閉じさせられることに腹が立ってきたので何か仕返しできないかなと思ってこの記事を書いています。 何を作っていたか 年収マッチ と言う、マッチングアプリ です。 マッチング(出会い)した相手とマッチ(対戦)できるというコンセプトです。 「年収を教えてくれる人には自分の年収を教えてもいいよね〜」と個人的に思っていて、それをしやすくするサービスとして作りました。 最終的には 50 人くらいの人が登録してくれていたのですが、一方でリクエストを見てい

    不正なリクエストに一泡吹かせたい
    syug
    syug 2022/02/03
  • 実質無料で使える Hosting Service の比較や使い分けの紹介 2021 (Firebase Hosting, Cloudflare Pages, Vercel, Netlify, GitHub Pages, Amplify, CloudRun)

    実質無料で使える Hosting Service の比較や使い分けの紹介 2021 (Firebase Hosting, Cloudflare Pages, Vercel, Netlify, GitHub Pages, Amplify, CloudRun)2021-10-04 ホスティングサービスに何を使えばいいのか分からないという話はよく目にしますし、僕もたまに思います。 そこでこれまで自分が使ったサービスの特徴や for me, not for me な点を紹介します。 静的ページ、および NextJS を前提としたサービス選定で、Firebase Hosting, Cloudflare Pages, Vercel, Netlify, GitHub Pages, Amplify, CloudRun を紹介します。 また、それらはフリープラン前提の話であり、not for me な点は課

    実質無料で使える Hosting Service の比較や使い分けの紹介 2021 (Firebase Hosting, Cloudflare Pages, Vercel, Netlify, GitHub Pages, Amplify, CloudRun)
    syug
    syug 2021/10/04
  • Storybook First な開発のススメ

    Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。 そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。 つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ

    Storybook First な開発のススメ
    syug
    syug 2021/03/05
  • preact コードリーディング

    preact なんとなく理解した記念ブログです。 もともと React を読むつもりが挫折したので慣れるために preact を読みました。 おかげで仮想 DOM の悲鳴が聞こえるようになりました。 preact とは React の軽量版・サブセットです。 公式では Fast 3kB React alternative with the same modern API. Components & Virtual DOM. と説明されています。 (p)react には、 状態を持て、書き換えも可能である 状態を書き換えるとそれに対応して HTML が書き換わる という特徴があります。 それがどのようにして実現されているのかを見ていきましょう。 前提となる知識 preact のコードリーディングを進める上では VNode というオブジェクトに慣れる必要があります。 これは JSX を仮想 D

    preact コードリーディング
    syug
    syug 2020/11/02
  • Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった

    前に書いた ESLint と Prettier の共存設定とその根拠について が公式推奨が変わったことにより一部間違った情報になっているのでその訂正記事です。 該当記事に書いた内容は Prettier と ESLint の関係を読み解く上で役立つ情報だと思うので、警告とこのページへのリンクを書いた上でそのまま残しておきます。 (追記) この記事の内容も間違った内容を書いていました。なので一度大幅な訂正をしています。prettier-eslint も推奨ではありません。 変更点の要約 Prettier と ESLint の組み合わせについて公式 の推奨方法が変わりました。 きっといつかこの情報も古くなるので直リンクではなく、ドキュメントの GitHub のリンクを貼っておきます。 ドキュメント自体のリンクはこちらです。 新しいドキュメントを要約すると、 LinterFormatter

    Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった
    syug
    syug 2020/09/24
  • Preactの環境構築 of 2020

    所用で先週preactを初めて触っていたのですが、環境構築をしているときに「この情報ドキュメントにないよね?」「情報が間違ってそう?」っていうのを節々で感じた部分があって難航したので、これから環境構築する人がググった時の助けになるようメモを残しておきます。 とはいえ自分が preact 初心者で自分が間違っている可能性も大いにあるので、そういうのがありましたら指摘していただけると助かります。 React をある程度書いたことある人が preact に挑戦することを想定して書いています。 主に「React でやるときのあれは preact でどうするんだっけ」という情報です。 目指すゴール 環境構築のゴールが何かというと一つには Hello World があるとは思いますが、それよりかはもっと踏み込んでアプリケーションとして欲しくなる機能をとりあえず全部実装していこうと思います。 それが何か

    Preactの環境構築 of 2020
    syug
    syug 2020/09/21
  • はてブのネガティブなコメントからreact-helmetで守る

    はてブにおけるネガティブなコメントやそれが引き起こす炎上から自分を守るための、そのプロテクト機能をこのブログに実装した話です。 燃えたくないけど読まれたい 私はこのブログを運用する上で 「燃えたくないけど読まれたい」という気持ちを持っています。 ブログを書くからにはやっぱり反応は欲しいし、たくさんの人に見られたいというのが率直な感想です。 そのため、燃えるのを防ぐためにも誰かを煽ったり傷つけたりせずに、健全に運営して行こうというのを意識して運営しており、特にその投稿が誰かを傷つけないか・誤った情報を断定的に発信していないかといった自浄的なチェックをしています。 ただ、どうしても燃えやすい話題もあったり、意図せずに燃えるパターンも見たりはしているので、それについてどう言及して行こうかと言うのを悩んでいました。 そこで炎上プロテクト機能をブログに組み込んでみることにしました。 はてブのコメント

    はてブのネガティブなコメントからreact-helmetで守る
    syug
    syug 2020/08/05
  • 1