なぜ初心者は「UIコンポーネントにマージンをつけるのか」初心者が解説します
Twitterなどで、よく「UIコンポーネントにマージンをつけるな」という言及をよく目にします。 以下の記事など、とても分かりやすく参考になるかと思います。 しかし、私はそれらの言及・記事などを見た上で(おそらく)UIコンポーネントにマージンを持たせる実装を行なってしまっていました。 熟練者から見ると、「UIコンポーネントにマージンをつけるな」というのは、これらの記事を見ていない(つまり知識としてない)ということが原因として起きると思われているのではないでしょうか？ そのようなケースも多々あると思いますが、今回は知識として持っているにも関わらず「UIコンポーネントにマージンをつけてしまっていた(現在進行形かもしれない)」私の話をしようかと思います。 なお、この記事を書くにあたって「Every Layout」という書籍から着想を得ました。 気になる方はチェックしてみてください。 なぜコンポー
React コンポーネントの書き方をチームで統一する
次の記事を見てなるほどと思ったものの、コンポーネント集作成の視点で書かれている。我々はアプリを作る機会が多いので、その際はどういう書き方が楽なのか、チームで共有するために類型を洗い出し、比較した。 TL;DR 関数での書き方を覚えれば良いと判断した。 function MyComponent(props: React.PropsWithChildren<Props>) { if (props.title.length % 2 === 0) { return null; } return <div>{props.children}</div>; } ここからやりたいことによって不要なものを削除していく。例えば props が必要ない場合、シグネチャーから props 定義を削除する。子要素の指定が必要ない場合は React.PropsWithChildren の使用をやめる。 null を返
CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ
Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数
薄い財布に紐を付ける為に、自分で穴を開けてハトメを付けたぞ！ - むねさだブログ
500円ちょいで購入できる、ハトメを自分で付けれるキットです。 中身はこんな感じ。 ハトメのパーツが複数（12穴分）入っていて、穴あけ用のポンチと、ハトメを締める道具（カシメ打具）のセットになります。 これ＋ハンマーがあれば大丈夫。 裏面に詳しい使い方が書いてあったのでこれをみながら行うことに。 穴をあける作業 まずは場所のあたりを付けます。 財布のどこにハトメを付けると一番良いのかを探します。私は色々と考えた末、薄い財布のここに穴を開けることに。 薄さを邪魔せず、バランスも良く、内容物の出し入れに支障が無いという判断。 ということで、穴あけします！ 穴あけポンチを財布に押し当て、財布の裏側には鉄の板を敷きます。（これも付属でついてきました） 金槌でガンガンとたたくと、見事に穴をあけることができました。 綺麗な丸い穴！これでもう、元には戻せません！ ちなみに、金槌は100円均一のお店で昔購
React Hook Form(v7)を使ったコンポーネント設計案
本記事ではReact Hook Form(v7)を使ったコンポーネント設計のアイデアについて話します。 React Hook Formはその名の通り、Hooksをベースにフォームのバリデーション設定を記述できるライブラリで、特にv7で大きな変更が入りました。そのため、本記事ではv7前提であることをタイトルで明記しています。 Hooksにフォームのロジックが切り離されることにより、理論的には、TSXで記述されたView層と、バリデーションを司るロジック層を切り離して実装することができるはずです。 オンライン家庭教師マナリンクで提供しているオンライン指導の機能にてこちらの設計を実践してみたので、どなたかの参考になれば幸いです。 前提条件 React v17 React Hook Form v7 Material UI v5 ※View層、ロジック層という命名は適当に考えたものなので、もっと適切
ReactベースのあたらしいフレームワークRemixをためしてみた | DevelopersIO
OSSとしてリリースされたばかりのReactベースのフルスタックWebフレームワークであるRemixをためしてみました。 はじめに こんにちは、CX事業本部MAD事業部の森茂です。 re:Inventを前にAWSの情報も気になるところですが、フロントエンド界隈もReact Conf 2021を前にReact v18 betaをはじめ、Next.js v12やReact Router v6、新しいRoutingライブラリReact Locationのリリースなどなど注目のリリースラッシュが続いているようです。そんな中Reactをベースにした新しいフレームワークであるRemixが本日（2021/11/23日本時間）リリースされました。 Remixとは RemixはReactRouterの作者でもあるMichael Jackson氏（@mjackson）とRyan Florence氏（@ryan
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
curl で host 指定する - Qiita
host 指定したい 冗長構成のサーバーを IP 指定したいなー、という時は DNS サーバー(仮) の hosts ファイルでルーティングの設定入れると思います。 $ cat /etc/hosts ## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 172.16.1.1 example.qiita.com # example.qiita.com にアクセスしたらこの IP ですよという設定
ecspresso handbook v1対応版
Amazon ECS デプロイツール ecspresso の作者による解説本です。 チュートリアル、基本的な使いかた、応用的な使いかた、設計思想と実装、全コマンドのリファレンスを掲載しています。 ecspresso advent calendar 2020 に掲載した内容を再編集、2021年以降にリリースされたv1.3以降の機能追加への記述を追加したものです。 https://adventar.org/calendars/5916 [2022-12-23] 本書は v1.x 対応版です。ecspresso v2 がリリースされました。v2対応版は https://zenn.dev/fujiwara/books/ecspresso-handbook-v2 をご利用ください。 [2021-05-15] v1.5.4 に対応して改訂を行いました。 - ECS Exec の章を追加しました - コ
【Tips】オススメ！Figma Communityのリソース5選｜PLAY THE DESIGNER
こんにちは！PLAY THE DESIGNERメンター兼SNS担当おかちゃん ( @okbchyk ) です🐧Twitterで紹介したTipsをnoteでもご紹介💁 今回は「オススメ！Figma Communityのリソース5選」です👀 Communityは便利なリソース共有の場！FigmaにあるCommunity機能はご存知ですか？ すでにFigmaを使っている方は見たことがあるかもしれません🤔 メニューを開いてみると、中には様々な人が作ったFigmaファイルが公開されています😲 Figma Communityは「Figmaユーザーがリソースを共有し合う場」です✨ 今回は、Communityにあるリソースの中でもオススメを5つご紹介💁 📕オススメ1📕 (Variants) iOS & iPadOS 14 UI Kit for Figma iOS標準パーツがたくさん揃ってい
転置インデックスの仕組みについて - 検索編 - LIFULL Creators Blog
検索エンジンチームの宮崎です。 今日は、Solr内部でも使用されている全文検索アルゴリズムの転置インデックスについて話をしようと思います。 転置インデックスの仕組みについてざっくり理解したい人の手助けになれば幸いです。 全文検索アルゴリズム 全文検索の方法として大まかに 「grep型」と「インデックス型」があります。 多くの検索エンジンや全文検索ライブラリでは、インデックス型が使われています。 これはgrep型が都度すべての文書を検索するのに対して、インデックス型はその名の通り索引を用いて効率的に検索を行うことができるためです。 インデックスのアルゴリズムもいくつもありますが、今回は apache/solr・apache/luceneでも使用されている転置インデックスについて、簡単な例を用いて解説しようと思います。 今回は転置インデックスを使用した簡単な例として、「google/codes
SOLID原則で考えるReact設計
こんにちは、株式会社スタメンでオンラインサロンFANTSのフロントエンドエンジニアをしている@0906kokiです。 今回はSOLID原則の5つの設計原則を、Reactのコードをベースにして解説できればと思います。 SOLID原則とは？ SOLID原則とは、ソフトウェアを柔軟に、メンテナンス性を高く設計するための5つの原則となります。 Robert C. Martinによって、5つの原則の頭文字をとってSOLIDという名前が付けられました。5つの原則とは以下の通りです。 SRP: 単一責任の原則 OCP: 開放閉鎖の原則 LSP: リスコフの置換原則 ISP: インタフェース分離の原則 DIP: 依存性逆転の原則 元々、SOLID原則はJavaなどのオブジェクト指向プログラミングに対して、メンテナンス性の向上や分かりやすいプログラムを担保するために提唱された原則ありますが、オブジェクト指向
Webサイトの常時SSL化はどこまで暗号化されるのか？ | work.log
Webブラウザの Google Chromeが2017年10月より、通信が暗号化されないHTTP接続を使ったWebサイトに対する警告をURLバーに表示するよう仕様変更されました。 これまでは個人情報を送信するフォームへだけが対象でしたが、今後はどんどん対象が広まっていくという事で、Web運営者の間ではちょっとした騒ぎになりました。 ところで、Webサイトの常時SSL化はどこまで暗号化されるのでしょうか？ もし、完全に暗号化されるのであれば通信内容を覗き見出来なくなるので、職場で仕事に関係のないサイトを見ていてもシステム管理者（＝会社）にバレない！という事になりそうですが、少し気になったので調べてみました。 スポンサーリンク 職場からHTTPサイトを見た場合 まずは職場から暗号化されていないHTTPサイトを見た場合の通信を傍受してみます。 クライアント（192.168.0.1）からHTTPサ
HTTPS通信時のURLは暗号化されるか - うまいぼうぶろぐ
2018/06 追記 古い記事ですがちょこちょこアクセスいただいているので更新。 最近は常時SSL、IPv4枯渇、CDN導入などの理由でSNIが良く使われるようになってきていますが この場合、ホスト名(URL全体ではない)は平文で送信されます。 client 側でキャプチャしたパケット curl -k https://sni.example.com/hogehoge $ sudo ngrep -d en3 -q -W byline port 443 and host 192.0.2.1 interface: en3 (192.168.6.0/255.255.255.0) filter: (ip or ip6) and ( port 443 and host 192.0.2.1 ) T 192.168.6.108:55460 -> 192.0.2.1:443 [AP] ...........
図解！Jupyter Labを徹底解説！(インストール・使い方・拡張機能) - ビジPy
Jupyter Lab（ジュピター・ラボ）とはJupyter Lab（ジュピター・ラボ）とはJupyter Notebook（ジュピター・ノートブック）の進化版で、次世代のブラウザ上で動作するプログラムの対話型実行環境です。データ分析には欠かせないツールの１つです。 ノートブックと呼ばれるファイルにpythonなどのプログラムを記述し、実行結果を逐次確認しながら、データ分析を進めることができます。 Jupyter Lab上では、様々なライブラリを使うことができ、TensorFlow（テンソルフロー）などの機械学習やディープラーニング用のライブラリも動作させることができます。 またJupyter Labでは、入力したプログラムの実行結果が、プログラムの直後に表示されるので、結果が分かりやすく、すぐに確認することができます。 このような3Dのグラフも表示することができ、複雑なデータ分析の結果も
折りたたみ機能 (folding) を使用する | まくまくVimノート
Vim の折りたたみ (folding) 機能を使用すると、特定の行を折りたたんで表示する（一時的に非表示にする）ことができます。 指定した範囲を折り畳む 折りたたみ機能によって、どのような範囲を折りたたむかは、foldmethod というオプションで制御されています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - vn7n24fzkq/github-profile-summary-cards: A tool to generate your github summary card for profile README
https://kaigi-on-rails-2021-mf-maintain-graphql-types-over-repositories.netlify.app/1
NetflixによるgRPCを使った実用的なAPIデザイン
SSSSLIDE
