CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif
【個人開発】世の「家事やれよ論争」を撲滅するスマホアプリをリリースしました - Qiita
なぜ家事は紛争を呼ぶのか 私の周りも結婚・出産をする友人が増えました。 そこで必ずと言っていいほど上がる議題がこれ。 「夫（妻）がぜんっぜん家事をやらない」 日本で婚姻制度が発足してから早100年。 これだけ長い年月「夫婦」という形が取られているのに、なぜこんなにも初歩的な不満が世に蔓延するのでしょう。 私も妻と結婚して5年経ちます。 知人からの愚痴なども収集した結果、いくつかの原因が考えられました。 その１． 人は「自分が一番やってる」と思う生き物である これは私がサラリーマンとして働いてて出した結論です。 殆どの人が「自分は結構仕事してる」と思いがちです。（これはマジ） 少なくとも同等の仕事量だとまず間違いなく「自分のほうが仕事してる」と勘違いします。 そのため、仮に夫婦が全く同じ量の家事を分担してたとしても、 それが正確に見える化されない限り、必ず「俺(私)のほうが家事をやってる」と
なぜエンジニアはマネージャーになるのに不安を覚えるのか - asken テックブログ
こんにちは。askenでエンジニアリング戦略や組織づくりを担当しているやすにしです。 マネジメントを中心にしておりまして、せっかくなのでブログでもマネジメントについて書いてみますね。 私はこれまでVPoEとしてエンジニア組織のマネジメントや、様々な会社でマネージャー向けにコーチング 1 をやってきました。そこで接してきたエンジニアリングマネージャーに共通しているのは「キャリアに悩んでいる」ということです。 例えばこのようなことです。 コーディングをしなくなり、技術的に取り残されて、エンジニアとしてやっていけなくなる感じがする 自分でやらないから成果が見えない。やっている感じがしない。 マネジメントをどうやればいいか、どう学べばいいかわからない。 マネージャーのキャリアで自分は定年（？）まで生きていけるのか？ 共通点は、色々理由を言葉にしているものの、どれもしっくりきている感じではなく、「な
GoogleCloudPlatform/fourkeys を使って Four Keys を計測する｜Showcase Gig Product Team Blog
こんにちは。 Showcase Gig の EM dai です。 本エントリは、 Showcase Gig Advent Calendar 2022 並びに、 Engineering Manager Advent Calendar 2022 の10日目の記事です。 本エントリでは、 Showcase Gig のエンジニアリング組織でも利用している GoogleCloudPlatform/fourkeys を使用して、 Four Keys を計測する方法を紹介します。 Four Keys とはFour Keys とは、 DevOps Research and Assessment (DORA) が提唱したソフトウェア開発チームのパフォーマンスを計測する4つの指標です。 Four Keys 指標を用いることで、ソフトウェアデリバリの「スピード」と「安定性」を測定できます。 デプロイの頻度: 本
GraphQLが解決する問題とその先のユースケース
サーバーサイドからみたGraphQL Serverlss Meetup#19 2021/03/31 に行われた Serverlss Meetup#19 で上記のタイトルで登壇してきました。サーバーサイドの話をしようと思ったけどGraphQLの解決している話をしようと思ったらクライアントの事もかなりはいってしまったので記事のタイトルは変えました。 以下内容です。記事の最後に資料を書くにあたって参考になった資料のリンクを置いてます。 GraphQL and me この1年書いたQiita記事 GraphQLの特徴を分解する ~API インターフェース・Universal BFF・API Gateway~ GraphQLはサーバーサイド実装のベストプラクティスとなるか GraphQLの全体像とWebApp開発のこれから 今回話す事 そもそもGraphQLはなんで作られたのか、何を解決しようとして
「成果を出せば評価される」という考えが不幸の始まり 人事評価制度に不満の声が出る、必然の理由
人気シリーズ『図解 人材マネジメント入門』や『図解 組織開発入門』の著者であり、企業の人材マネジメントを支援する株式会社壺中天の坪谷邦生氏が、MBO（目標管理）をテーマとした新刊の発行にあたり、各界のエキスパートと対談を行います。第3回の後編は『最高の結果を出すKPIマネジメント』の著者である中尾隆一郎氏と、人事評価制度に不満が出やすい理由や、ハイパフォーマーを育てるマネジメント手法について語りました。 「成果を出せば評価される」という考えが不幸の始まり 坪谷邦生氏（以下、坪谷）：私はもともと人事制度のコンサルタントなので、KPIマネジメントと評価・報酬との紐づけが気になるんです。メールで「密結合ではなく、疎結合にしたほうがうまくいく」と教えていただいたのですが、もう少し詳しく聞かせていただけますか？ 中尾隆一郎氏（以下、中尾）：普通の人は、成果を出したら評価をされて、給料が上がって、昇進
ITエンジニア採用入門
今、IT関連の技術は様々な企業の競争力の源泉です。一方で、実際に企業が必要とするよりもITエンジニアの数は少ないため、採用競争は激化するばかりです。そこで、元ウェブエンジニアでITエンジニアの採用担当を経験した私の視点で、ITエンジニア採用に関する情報をまとめることにしました。 なお、ここでいうITエンジニアはアプリケーションエンジニア、インフラエンジニア、機械学習エンジニア、QAエンジニアなどIT関連エンジニア全般を指します。 # 更新情報 * 2022/05/17 - 公開 * 2022/05/17 - 中途採用前提であることを Chapter 1 に追記 * 2022/05/18 - 誤字の修正 Chapter 15 「行進」 -> 「更新」 ※はてなブックマークでの指摘ありがとうございます * 2022/05/19 - 活用事例の Chapter を追加 * 2022/05/20
SPA開発とセキュリティ - DOM based XSSを引き起こすインジェクションのVue, React, Angularにおける解説と対策 - Flatt Security Blog
Vue.js logo: ©︎ Evan You (CC BY-NC-SA 4.0 with extra conditions(It’s OK to use logo in technical articles for educational purposes)) / React logo: ©︎ Meta Platforms, Inc. (CC BY 4.0) / Angular logo: ©︎ Google (CC BY 4.0) はじめに こんにちは。株式会社Flatt Securityセキュリティエンジニアの森(@ei01241)です。 最近のJavaScriptフレームワークの進化は著しく、VueやReactやAngularは様々なWebサービスに採用されています。そのため、多くのWebサービスがSPAを実装するようになりました。JavaScriptフレームワークは便利な一方で
Webフロントエンドの開発効率を高く保つための考え方
これまでいろんな現場でWebフロントエンド開発をしてきて、メンテナンスしやすく効率の高いWebフロントエンド開発をする上で重要になる考えが自分なりにまとまってきたので記事にしてみます。 Worse is Betterという考え方 自分が見てきた中でWebフロントエンドの開発効率が落ちてしまう一番の要因は、きれいで理論的には優れているアーキテクチャを構築しようとしてそれ自体がもたらす複雑性を支えきれないというパターンです。 少し前にフロントエンドにClean Architecture（以下CA、あの同心円の図を指すのは誤用に近いですがここではそれに乗ります）を導入する記事が流行ったと思いますがあんな感じです。ああいったクラスベースでDIが重要となる設計手法はサーバーサイドのJavaでSpringを使うのとは違ってReactがサポートしているものではないため、CAの実現自体に高い設計スキルが必
Next.jsにStorybook(CSF3.0)を導入してSnapshot TestやUnit Testを実行する | ZUMA Lab
Next.js と Typescript のプロジェクトに Storybook を導入して Snapshot Test や Unit Test を試してみます。 この記事では現時点で prerelease 版の Component Story Format 3.0 (以後 CSF3.0) を使用した Story を作成します。 CSF3.0 については以下公式の記事を参考にしました。 CSF3.0 で 新たに追加される play 関数についても試してみます。 play 関数はフォームの値入力や button のクリックなどユーザーインタラクションを Story で表現できる便利な関数です。 play 関数のおかげで Storybook の表現の幅が広がり、Storybook の導入で Snapshot Test と併せて Unit Test が書きやすくなります。 個人的には Storyb
UI Testing Handbook
OverviewUI testing is integral to delivering high-quality experiences. But there are so many ways to test that it can be overwhelming to figure out what's right for your project. This guide distills learnings from leading teams such as Target, Adobe, O'Reilly and Shopify into a pragmatic testing strategy that offers comprehensive coverage, easy setup, and low maintenance. We'll walk through the pr
useEffect完全ガイド
あなたは Hooks を使って複数のコンポーネントを書きました。ちょっとしたアプリも作ったことがあるでしょう。満足もしている。API にも慣れて、その過程でコツも掴んできました。しかも重複したロジックを転用できるよう Custom Hooks を作り、同僚に自慢して見たり。 でも useEffect を使う度、いまいちピンときません。class のライフサイクルとは似ているけど、何かが違う。そしていろんな疑問を抱き始めます。 🤔 componentDidMount を useEffect で再現する方法は？ 🤔 useEffect 内で正確に非同期処理を行う方法とは？ []ってなに？ 🤔 関数をエフェクトの依存関係として記すべき？ 🤔 非同期処理の無限ループがたまに起こるのはなぜ？ 🤔 古い state か props がエフェクト内にたまに入るのはなぜ？ 私も Hooks を使
データ変換処理をモダンな手法で開発できる「dbt」を使ってみた | DevelopersIO
奈良県でリモートワーク中の玉井です。 日本では全くと言っていいほど知名度がありませんが、国外（アメリカ？）のデータ分析界隈では既にメジャーな存在になりつつある「dbt」（data build tool）について、ご紹介します。 dbtとは？ 公式情報など 公式はこちら（ググラビリティが低い名前なので検索しづらい）。 （死ぬほどざっくりいうと）データ変換を効率よく実施できるツールです。SaaSとしての提供になっているので（最初からあったわけではなく、後から登場したようです）、Webブラウザさえあれば、すぐに利用することができます。 主な特徴 ELTの「T」を担当するツール データの前処理における作業をELT（Extract、Load、Transform）と呼称することがありますが、それの「T（変換）」を担当します。E（抽出）やL（ロード）はやりません。 そして、その変換処理をどうやって設定す
React Hook Form ライブラリの使い方！フォームのバリデーションを実装しよう【TypeScript】 | ノマドクリエイターの執務室
ショウヘイ どうも、ノマドクリエイターのショウヘイ（@shohei_creator）です。 ふーちゃん ブログアシスタントのふーちゃんです。 HTML で構成されるフォームに細かなバリデーションをかけるには、 JavaScript による DOM 操作が必須になります。バリデーション処理を実装する作業は手間が多いので、バリデーション用のライブラリを使う方法が現実的です。 React には、フォームにバリデーションを簡単に実装できる React Hook Form というライブラリが用意されています。 React Hook Form は、 Yup や Zod といったバリデーション特化ライブラリと連携できるため、とても拡張性が高いです。 この記事では、 React Hook Form の使い方について説明します。 ショウヘイ この記事では、 React Hook Form の Version
クラスが増えても大丈夫！成長するソフトウェアを支えるリファクタリングの技術 - BIGLOBE Style ｜ BIGLOBEの「はたらく人」と「トガッた技術」
開発部門（基盤本部）でエンジニアの育成を担当している高玉です。 基盤本部ではさまざまな勉強会を開催しています。先日も、BIGLOBE Styleでその様子をご紹介しました。 style.biglobe.co.jp 「クラスを増やすの、怖くないですか？」 オブジェクト指向プログラミング（OOP）を学んでいた時に聞かれたことです。業務ではJavaやドメイン駆動設計を活用しているので、クラスベースのOOPが題材になることが多いのです。OOPに慣れていない人からすると、クラスの数が増えることで全体を把握しづらくなったり、適切なクラスを見つけるのが大変になりそう、と感じるそうです。 「大丈夫！クラスを増やしたほうが楽になることがあるよ！」 と伝えたくて、この記事を書かせていただきました。何が楽になるのでしょう？それは、ソースコードを読むこと、です。「クラスを増やすと、ソースコードを読むのが楽になる？
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ECS Service Connectによるサービスの新しいつなぎ方 / A new way to connect services with ECS Service Connect
https://www.asyncapi.com/
Freebies – Slidequest
GitHub - Yelp/graphql-guidelines: GraphQL @ Yelp Schema Guidelines
Illustrations | unDraw
