タグ

2021年6月30日のブックマーク (6件)

  • 使い続けてもらえるアプリUX開発で気を付けた8つのユーザー心理【個人開発】

    この記事は先日リリースした個人開発アプリ『3 Good Things!』を作る中でUI/UXについて考え、 講師もやっているWebデザイナーさんを含む周囲の意見を聞いてそれを改善していった過程についてをまとめた記事です この記事で紹介するユーザー心理はこちら👇 基スクロールとタップしかしたくない 開いて即何をすれば良いか分からないとサヨナラ 少しでも「難しそう/面倒くさそう」と思わせたら負け 信用できないアプリに個人情報は渡せない 「徒労感」は絶対にNG 期待した通りの動作で動かないとストレス 「使ってて」嬉しい・キモチイイが欲しい 他者のとの繋がりで持続するモチベーション 最終イメージ 👇アプリの紹介/使用技術等についてはこちら⚛️ このアプリはポジティブ心理学の創設者セリグマン教授が提唱し、長年の実験で効果が実証されている “Three Good Things”メソッドを使い、毎

    使い続けてもらえるアプリUX開発で気を付けた8つのユーザー心理【個人開発】
    shibu_t
    shibu_t 2021/06/30
  • gapの余白指定が便利! gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA

    CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ

    gapの余白指定が便利! gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
  • eslint-plugin-import-accessではじめるディレクトリ単位カプセル化

    こんにちは。この記事は筆者が製作した ESLint 向けプラグイン eslint-plugin-import-accessを紹介する記事です。 このプラグインにより TypeScript プログラムに擬似的なpackage-private exportの概念が生まれます。JSDoc で@packageとアノテートされたexport宣言は、そのファイルが属するディレクトリの外からインポートすることができなくなります。 従来、TypeScript で可能なカプセル化の最大の単位は「ファイル」であり、ファイルからエクスポートしない変数はそのファイル(モジュール)の中に閉じている一方で、一旦エクスポートしたものはプロジェクトのどこからでもインポート可能になります。これでは不都合な場合がありました。 最近の具体的な例としてはRecoilが挙げられます。筆者の以前の記事では、Atom や Select

    eslint-plugin-import-accessではじめるディレクトリ単位カプセル化
  • 知識0からRaspberryPi4で録画機を作る!

    はじめに みなさんV6とSexyZoneをご存知ですか? そうです! 今年26年目にして解散してしまう至高のレジェンドアイドルV6と,今年10周年を迎える人生を共に歩む系アイドルSexyZoneです!彼らが出演した番組全部見逃すわけにはいかない!録画しなきゃ! ...しまった!!!!録画機がない!!!!作ろう!!!! このような訳で録画機を作りました. ラズパイを使って録画機を作る記事はたくさんあるのですが,ほぼ無知の状態から始めると躓いたところが多かったので,こちらの記事をベースとして補完する形で書いていきたいと思います. 正直自分自身あまり理解しきれていないところもあるので,詳しいことが知りたかったら元記事を参照することをおすすめします. 環境や用意するものなど 作業環境:macOS BigSur RaspberryPi4体 自分は丁度8GBモデルのものを頂いたのでこれを使いましたが

    知識0からRaspberryPi4で録画機を作る!
  • a11y を強化する ReactComponent の型推論

    次の Button は tag の指定により、HTML 要素を出し分ける Component です。出力結果は下段のとおりです。この Component を通し a11y を強化する型注釈を考察したので、メモとして投稿します。 <Button tag="button">+1</Button> <Button tag="a" role="button">+1</Button> <Button tag="input" type="button" value="+1" />

    a11y を強化する ReactComponent の型推論
    shibu_t
    shibu_t 2021/06/30
  • 入門 GitHub Actions - メドピア開発者ブログ

    CTO室SREの @sinsoku です。 社内のGitHub ActionsのYAMLが複雑になってきたので、私が参考にしてる情報や注意点、イディオムなどをまとめておきます。 頻繁に参照するページ 新しい機能の説明が日語ページに反映されていないため、基的に英語ページを読むことを推奨。 ワークフロー構文 YAMLの基構文の確認 コンテキストおよび式の構文 github オブジェクトの情報、関数の確認 ワークフローをトリガーするイベント 各イベントの GITHUB_SHA と GITHUB_REF が記載されている About GitHub-hosted runners インストールされているSoftwareのバージョンなどが記載されている GitHub REST API APIを使うときに参照する よく使うaction actions/checkout イベントによってはデフォルトブ

    入門 GitHub Actions - メドピア開発者ブログ