この記事は クソアプリ Advent Calendar 2023 の15日目の記事です。 作ったもの 各サービスの解約情報がまとまっている 解約.com を作りました。 解約.com: https://kai8ku.com 機能紹介 一番上に出ていたDAZNのコンテンツを元に機能紹介です 一覧ページ 一覧ページでは解約の手順が載っている公式リンクが載っています。あと検索もできます。適当に文字を入れると色々引っかかってくれるようになっています(したいです) 詳細ページ(少し下にスクロールしてます) 詳細ページでは情報が増えます 解約方法: 可能な解約方法を載せてます。Web,モバイルアプリ,店舗,電話 などです サービスカテゴリ: どのようなサービスかを載せています。同じサービスでも解約方法を比較できるようにしたいです(WIP) AIによる要約: 公式リンクの情報や後述するユーザーレビューを

はじめに コード上での問題を正確に認識しておかなければ、問題を繰り返すのです。Reactを使用したプロジェクトに参画したり、OSSプロジェクトのソースコードを散見すると複雑な仕様に立ち向かったUIに出会うことがあるでしょう。 複雑な仕様に立ち向かったUIは以下の特徴があると考えています。 bundle size が肥大している 保守や維持の管理が高い 他開発者にこのUIは何をやっているのか、質問をしなければならない。 質問の回答を聞いてもそのUIが実行していることが多様で理解しづらい。 再利用性が低い そのUIを利用するために満たさなければならない条件が多く、新しく似ているUIを実装することになる。 複雑なAPI 片手の指の数では溢れる props の数が存在している ユースケースを満たすために、既存の機能を使えば実装ができるのか、判断がしづらい 上記のようなUIを見かけた場合、どのような

社内勉強会用 デザイナーとフロントエンドエンジニアの境界をなくし、UI開発を加速させるためのコンポーネント設計入門 ※フロントエンドエンジニア視点 [Keywords] - 共通認識としてのデザインシステム - 共通認識としてのコンポーネント設計

【書き起こし】Merpay Tech Talk〜Monorepo開発におけるツール選定〜 #merpay_techtalk 2022年4月21日に、メルペイ・メルコインのエンジニアたちによる「Merpay Tech Talk〜Monorepo開発におけるツール選定〜」を開催しました。 Monorepo開発を進めるにあたって、メルコインではNx、メルペイではTurborepoを利用しています。Monorepo開発を導入した背景やツール選定の理由、実際に導入した所感などをご紹介します。 アーカイブはこちら！ https://www.youtube.com/watch?v=I0Wxr1JCvhs 登壇者紹介 @tokuda109 / 株式会社メルペイ Frontend Engineer 2019年10月に入社し、クーポン機能のフロントエンド開発を担当後、パフォーマンスやテスト等のフロントエンドの

前書き Rustを書くときに便利なツールをまとめた記事が無い気がしたので作成。(ちゃんと探してないので既にあるかも) 公式ツール cargo パッケージマネージャ 基本だけどとても便利なツール 一度はThe Cargo Bookを読んでおくことを推奨。 rustfmt フォーマッター cargo fmt でもフォーマットの修正が出来る。(こっちを使うことが多い) clippy lintツール こう書いたほうが良いよという提案もしてくれるので便利。 cargo clippy --fix を使うと自動で直してくれる。 rust-analyzer Language Server rls もあるが、(最近は?) rust-analyzer の方がメジャーな気がする。 追記 : RLSは非推奨になりました。RLS Deprecation 非公式ツール cargo-watch ソースコードの変更を検知

【READYFOR】実践！フロントエンド分離戦略::発表資料 https://readyfor.connpass.com/event/198730/

2020年は新型コロナウイルスの流行、それに伴うリモートワーク（テレワーク）やワーケーション、オンライン授業での学習といった大きな社会的変化がありました。 意図せず起きた変化ではありましたが、働き方や学び方の変化は、自分次第で何かを大きく変えられるチャンスでもあります。内閣府の調査*1によると、在宅勤務などで生じた空き時間を新たな挑戦に充て、オンライン学習でプログラミングなどIT関連の学習に取り組む社会人が増えているとのこと。 めまぐるしく変わる社会へ適応するためには、自分にとって必要な情報を見極めるだけでなく、時代と共に学び続ける姿勢も必要。新しい学びはきっとあなたの強い味方になってくれることでしょう。ちょうどオンライン学習プラットフォーム「Udemy」では、2020年12月30日（水）～2021年1月7日（木）の間、対象の講座を1,200円から受講できる新春セールを開催。講座は買い切り

TailwindCSSと一緒に使える便利なサービスをブックマークしていたら、いつの間にか結構な数になっていたので共有します。 ツール系 Tailwind CSS Cheat Sheet チートシート。「このスタイルTailwindでどうやって書くんだっけ?」を解決します。 CSS TAILWIND CONVERTER 既存のCSSをTaliwindのclassに変換するツール。 Tailwind Ink | AI color palette generator for Tailwindcss Tailwindに用意されている色のカラーコード一覧です。 Tailwind CSS IntelliSense - Visual Studio Marketplace VSCodeの拡張機能。ブックマークじゃないけど便利なので共有。クラス名の補完がいい感じになります。 Playground Playg

Ramda.jsの関数を例にしてJavaScriptによる関数型プログラミングの考え方を紹介します

Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。

社会には数え切れないくらい多くの職業があります。それらは地域や時代に合わせて新しく生まれたり、消滅したり、統合されたり、分割されたりしているわけですが、それらはすべて５つのパターンに分類されます。 「０ー１」 まずはゼロからイチを作る仕事。いわゆる「ゼロイチ」などと言われますが、世の中に新しい価値や概念を創造し提供するものです。起業家や企業の新規事業担当者、商品開発担当者などがこれに当てはまります。 新しいWEBサービスをローンチしたり、新形態の飲食店を作ったり、新しいタイプのイベントを仕掛けたり、という仕事はこれまで市場になかったものを作り出すという意味で、ゼロからイチを作る仕事です。大事なのは新しいアイデアを発想し、それをカタチにする力です。 「１ー９」 次にくるのが１から９まで育てていく仕事です。順調に拡大するベンチャー企業や新しい商品の販路を開拓していく営業のような仕事です。 すで

Railsアプリにユーザ登録・認証を実装するまでの手順を書きます。ここでいうユーザ登録は、よくあるユーザ名とメールアドレスを入力して届いた認証リンクにアクセスするとアクティベートされるタイプのやつです。 環境 rails new deviseを導入する Userモデルの作成 figaroを導入 twitter認証を追加する APIトークンとシークレットを設定する OAuth用のマイグレーションを作成する callback用のコントローラを作る 参考文献 環境 Ruby 2.3.0 Rails5 (5.0.2) devise (4.2.0) omniauth, omniauth-twitter figaro rails new プロジェクトディレクトリを作ります。今回はデータベースにMySQLを使うのと、テストにはRSpecを使いたいのでデフォルトのテストは外しておきました。 rails n

自分のMBPRetinaは3年前のモデルでアップデートする度に、スリープからの復帰画面がおかしくなったりしたのでOSのクリーンインストールも兼ねました。データはほとんどクラウド化されてるので残るは設定ファイルのみ。0から設定するのだるい。 今後、0スタートするときも苦労したくない！ポチポチクリックしたくない！ということで mawatari.jp この記事にインスパイアされて、自分もやったので、ハマりどころとかプラスで対応したところをメモ。 9割はこれで行ける、残り1割はアプリにログインした時にクラウド同期してくれる系（Chromeとか）. githubにdotfilesやらshellにするよりも比較的容易にprogramaticallyにできたのでやってよかった。 github.com 対応したこと ansibleのインストール brewのインストール brewによるアプリのインストール

会社で新しいMacBookProが支給されたので、開発環境のセットアップを行いました。その際に、何を入れたらいいかなどをチェックするのが大変だし、毎度毎度手間がかかっても面倒です。やることはだいたい決まっているのに、セットアップに1日か2日費やすことになるのは勿体ないなと思いました。また、OSを更新するときにはクリーンインストールしたいと思いまして(High Sierraも出るし)、Macの環境構築の自動化に乗り出すことを決意しました。 これができたら、他のメンバーの環境構築も自動化できるし、githubに構築スクリプトをアップしといたらPull Reqがくるかもしれないしなぁという算段です。 開発環境の自動化は、Ansibleを使うことにしました。Ansibleはサーバの構築の自動化ツールとしてよく使われていますが、Macなどの環境構築でもよく使われていて実績がインターネット上にたくさん

どうも、バックエンドエンジニアのサトウリョウスケです ✌︎('ω')✌︎ 僕が所属している ソーシャルPLUS チームでは Rails の開発環境を Docker で構築しています。 自分も日々お世話になっている Docker ですが、イチから Dockerfile 書いた事が無かったので、やってみました。 こちらのチュートリアルを参考にしています。 クイックスタート・ガイド：Docker Compose と Rails — Docker-docs-ja 17.06.Beta ドキュメント やってみた✨ 早速ですがこちらが完成品の GitHub リポジトリになります。 github.com この記事は v1.0.0 時点で書いていますが、リポジトリは今後も更新されていく可能性があります。 環境 Debian Stretch Ruby 2.5.0 Rails 5.2.0.rc1 MySQL

2018年6月11日 ゲスト bagelee npmのpackage.jsonと依存関係を理解しよう！

僕は『Sketch』をUIデザインツールとして業務利用しています。 Sketchにはたくさんのショートカットが用意されていますが、「とりあえず実務上はこのあたりさえ使っておけばUIデザイン業務はそこそこ作業スピード出せるよ」というものをまとめました。 図形の挿入 左上から選択・・　とかやってると遅いです。キーボードで一文字打つだけですし、これは覚えましょう。 もし忘れてしまった時も、Insertメニューにヒントが表示されています ・四角形：R（Rectangle） ・円形：O（Oval） ・線：L（Line）※角丸四角形（U）は、普通に四角形を置いたあと corner-radius 指定すればいいので覚えなくてもいいかと。 ガイドの表示・非表示 ・ガイドの表示・非表示：Ctrl + Rこれさえ覚えておけば一瞬で表示を切り替えられます。1日に何回もこの操作をやることになるでしょう。 グループ

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up