Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offers Tech Blog

2023/12/18 80 users ディレクトリ構成 フロントエンド コードベース web 暖冬

Offers を運営している株式会社 overflow の あほむ でございます。暖冬と言われつつもすっかり寒い季節ですね。おかげさまで割と走っているほうの師です。（師走） n 年ぶり n 回目の Web フロントエンド 最後にメイン開発者の立場でコードをスクラッチしたのいつだったっけ？と遡ると 2018年ごろのブログ記事 がでてき... 続きを読む

定量評価疲弊しませんか？～Well-beingと生産性指標を組み合わせた エンジニアリングメトリクスプログラムについて～

2023/02/10 248 users offers オファーズ 定量評価 生産性指標 副業

Developers Summit 2013 登壇資料 https://event.shoeisha.jp/devsumi/20230209/session/4171/ overflowは、副業・転職サービス「Offers(オファーズ)」の開発、運用を行っています。 サービスの提供を開始してから3年。サービスの拡大に合わせ、組織も比例して成長してきました。 その中で、組織の成長に伴い、どのよう... 続きを読む

コードレビューの生産性を上げるためのTips | Offers Tech Blog

2023/01/10 154 users Tips Offers Tech Blog コードレビュー

はじめに こんにちは。 プロダクト開発人材の副業転職プラットフォーム Offers を運営する株式会社 overflow のエンジニアの藤井です。 エンジニアであれば誰しも日頃からコードレビューをしたり、されたりしていることと思います。 健全な開発組織を育む意味でもレビューの文化を根付かせることはとても大切ですが、小... 続きを読む

【GAS (Google App Script) 】コードの書き方・テクニック編｜Offers Tech Blog

2022/06/16 150 users GAS shun offers 知見 テクニック編

概要 こんにちは、Offers を運営している株式会社 overflow のバックエンドエンジニアの shun です。今回は、GAS（Google App Script）のコードの書き方と、ゴリゴリに GAS を書きまくってきた知見から少しのテクニックを紹介できればと思います。 今の時代、エンジニアリングを利用した業務自動化を実装するのは必ずし... 続きを読む

【React/Vue.js】コンポーネント設計の（個人的）ベストプラクティス | Offers Tech Blog

2022/05/23 167 users React ベストプラクティス Kazuya offers

概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、React や Vue.js などの SPA フレームワークにおけるコンポーネント設計について紹介します。 昨今のフロントエンド開発では、コンポーネント指向での開発がスタンダート化しつつあり... 続きを読む

IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する | かちびと.net

2019/07/24 56 users 文末 Edge CSS WebKit result

Result よくある、テキストの文末を省略するやつです。 1行に限らず、3行目、5行目など、n行で省略可能でWebkitやFirefoxはもちろん、IE11やEdgeもサポートしたコードです ↑ IE11で確認したスクショです。Penは非対応だったのでjsfiddleで確認しています css p { line-height: 1.4; max-height: 4.2em; overflow: hidden... 続きを読む

[CSS]背景は固定、美しいブラーがかかった半透明のパネルやサイドバーやボタンを実装するスタイルシート | コリス

2017/02/13 149 users コリス 半透明 CSS Hidden ＢＧ

背景画像は固定表示で、美しいブラーがかかった半透明のパネルやサイドバーやボタンがスクロールするコンテンツを実装するスタイルシートのアイデアを紹介します。 例えばパネルをクリアにして、背景をブラーにするなど、反転させてみるのも美しい見た目になります。 .blur-container.blur-8 { --bg: url(background.jpg); overflow: hidden; backg... 続きを読む

今夜わかる「スタック・オーバーフロー」の世界 - give IT a try

2015/10/03 446 users スタック stack 今夜 オーバーフロー プログラミング

2015-10-04 今夜わかる「スタック・オーバーフロー」の世界 Webサービス Tips一般 はじめに プログラミングをやっている人であれば、スタック・オーバーフロー（Stack Overflow）を知らない人はいないと思います。 エラーメッセージをコピペしてググるとトップによく出てくる、このページのことです↓Stack Overflow また、ご存知の方も多いかもしれませんが、去年の12月か... 続きを読む

日本語版Stack Overflow、今日からパブリックベータへ － Publickey

2014/12/15 112 users パブリックベータ プライベートベータ Publickey

2週間前からプライベートベータとして限定ユーザーでの利用が始まっていた「日本語版Stack Overflow」が、本日よりパブリックベータへ移行します。Stack Exchange日本担当のJoshua 'jmac' Maciel（メシエル）氏がPublickeyに明らかにしました。 Stack Overflow日本語版の画面 Stack Overflow運営元であるStack Exchangeの... 続きを読む

日本語版Stack Overflow、今日からプライベートベータ開始。担当者のコメント － Publickey

2014/12/02 258 users Publickey プライベートベータ コミュニティ 担当者

コンピュータエンジニアのコミュニティとして最も有名なWebサイトの1つ「Stack Overflow」は、今年に入って日本語版スタッフを募集するなど、日本語版開設の準備を進めていました。 その「日本語版Stack Overflow」のプライベートベータが本日、スタートしたことが明らかになりました。ただしプライベートベータのため、まだ招待メールを受け取らないと参加できません。 Stack Excha... 続きを読む

CSSで2カラムを作ってみる｜Web Design KOJIKA17

2014/07/03 362 users CSS 2カラム Web Design KOJIKA17

CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基本的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要が... 続きを読む

[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック | コリス

2012/05/20 304 users コリス relative CSS Hidden height

Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。 デモページ CSS: 動画コンテンツの配置 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video ifram... 続きを読む

[CSS]画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック | コリス

2011/11/28 102 users コリス wrapper CSS Hidden 天地

デモページ：幅480pxで表示 実装 実装のイメージ 画像のサイズは100%で設定し、高さ・幅の上限は画像を内包するdiv要素で設定します。 また、垂直方向の中央に配置するために、「overflow: hidden;」を使って余剰分を隠します。 HTML 画像はimg要素で配置し、div要素で内包します。 <div class="image-wrap" id="wrapper"> <img src... 続きを読む

[CSS]overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス

2011/03/10 712 users Demo コリス float フロート ラッパー

下記は各ポイントを意訳してものです。はじめにDemo 1: overflow:auto;Demo 2: overflow:hidden;overflowを使って生じる問題点と解決方法はじめにフロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。デモ：１ フロートをクリアする要素を配置して解消した例しかし、この問題を... 続きを読む

たった一行でclearfixを使わずにfloatを解除するテクニック : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～

2010/11/30 174 users clearfix XHTML float Hidden 一行

.sampleBox { overflow: hidden ; } .boxLeft { float: left; width: 150px; } .boxRight { float: right; width: 150px; } サンプルページ ポイントとしては、floatする要素をdivで囲み、そのdivにoverflow: hiddenを適用させることです。たったこれだけで、floatによる... 続きを読む

[JS]滑らかにスライドするナビゲーションを実装するチュートリアル | コリス

2009/07/29 190 users コリス チュートリアル Hidden ナビゲーション デモ

滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマ... 続きを読む

CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル:phpspot開発日誌

2008/02/19 343 users リサイズ CSS phpspot開発日誌 サンプル 画像

Create Resizing Thumbnails Using Overflow Property | Css Globe This tutorial is aimed at controlling the size of the thumbnails appearing on your page. CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル。 次のように、CSSで画... 続きを読む

tfoot は tbody の前に書いた方がいいよ | WWW WATCH

2007/03/18 70 users tbody auto CSS スクロール WWW WATCH

404 Blog Not Found さんにて、「CSS - スクロール可能なテーブル w/o JavaScript」 というエントリーが上がっていて、これ見た時にその HTML ソースはないなぁ、、と思ったのと同時に、tbody に CSS を適用して overflow:auto とかすれば終わる話じゃないのとか思ってそれについてエントリーを書こうかなと思った瞬間、hxxk.jp さんにて 「C... 続きを読む