scroll-behavior: smooth;によるページ内検索時のスクロールを除外するテクニック
ページにhtml {scroll-behavior: smooth;}を加えるだけで、簡単にページ内のスクロールのすべてがスムーズになります。一昔前はJavaScriptやjQueryのプラグインで実装していますが、非常に簡単に実装できるようになりました。 「すべてがスムーズになる」弊害が1つあり、ページ内検索時にも適用されてしまいます。複数のキーワードがページ内にある場合は、時間がかかってしまいます。 このページ内検索時を除外して、ページ内にscroll-behavior: smooth;を適用するテクニックを紹介します。 仕様なのか、不具合・バグなのか、いずれにしろ簡単に対応できます。 Fixing Smooth Scrolling with Find-on-Page 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS-
Vimの:wと:rの便利Tips
始めに Vimには:wと:rコマンドがあります。コマンド自体は知っている方が多いかと思います。 ぼく的にちょっと便利な使い方ができるので、それお紹介していこうと思います。 :r :r banana.txtでファイルの中身を読み取って、現在のカーソルの次の行に挿入してくれます。 挿入できる行も指定できます。その場合は:{lnum}r banana.txtというふうに先頭に行番号を入力します。 ここからがイチオシですが、実は:r !{cmd}でコマンドの出力も挿入できます。 たとえば、APIのレスポンスをVimでちょっと編集したい場合や、コマンド実行結果を記事に挿入したい場合などに便利です。 :w :wについてVimmerのみなさんなら誰もが知っているコマンドなので説明は省きますが、 実は:w !{cmd}でバッファの内容を外部コマンドの標準入力として渡してくれます。 つまり、標準入力からコー
CSSのborder-radiusは実はすごかった！あまり知られていない機能を使用して、かっこいいレイアウトを作る方法
border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。 矩形や角丸だけのレイアウトではなく、さまざまな形を使用できるスタイルシートのテクニックを紹介します。 CSS border-radius can do that? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに border-radiusの基礎知識 流れに逆らう（わないで） はじめに 今年開催されたFrontend Conferenceにて、Rachel AndrewはCSS Gridのレイアウトについて講演しました。中でも私が注目したのは、彼女の話の終わりにあったCSSの古いプロパティについてです。 イメージはborder-radiusプロパティを使用するだけで、用
定期的にtcpdumpをある期間だけ実行したいという時 - その手の平は尻もつかめるさ
tcpdumpの提供する-Wオプションと-Gオプション，ならびにcrontabを併用するといける． tcpdumpの-Wオプションはログローテーションを行う回数で，-Gはそのローテーション期間を秒数で指定できる． 例えば $ tcpdump -w ./%Y%m%d%H%M%S.pcap -W1 -G60などとやると，ログローテーション1回，ローテーション期間は60秒となるので，つまり60秒tcpdumpを実行した後にexitする (ローテーション1回指定なので)． ちなみに-wオプションで指定するファイル書き出し先についてはstrptimeと同じフォーマットが利用できるのでこういう時に便利． あとはcrontabでこのコマンドを仕込んでやるとOK (id:hirose31さんから「crontabでは%をエスケープする必要がある」との指摘があり修正しました)． 55 * * * * tcpd
TCPサーバのテスト用に、空きポートを見つける方法 - kazuhoのメモ置き場
Perl でサーバをテストするためのモジュール Test::TCP の作者 id:tokuhirom が言ってたことだけど、テスト用に空きポートを見つけるのは、bind の port 番号に 0 を渡すのが一番簡単。Perl で書くなら、こんな感じ。 my $unused_port = do { my $l = IO::Socket::INET->new( Listen => 5, LocalHost => '127.0.0.1', LocalPort => 0, Proto => 'tcp', ReuseAddr => 1, ) or die $!; $l->sockport; }; これで確保されるのは emphemeral port なので、取得したポート番号を再び使おうとする間に他のプログラムが (outgoing TCP connection のために) 使っちゃう可能性は論理的
Chrome Developer Toolsのネットワークタブから拡張のリソースを消す - $shibayu36->blog;
ネットワークタブでパフォーマンスチェックをすると、Chrome拡張で入っているリソースもいろいろ出てきて、実際にこのサイトで使っているリソースがわかりにくかったりする。この場合、Filterを使うとChrome拡張のリソースを除外できることを知ったのでメモ。 stackoverflow.com ここで書かれている通りで、Filterに-scheme:chrome-extensionを入れると良いだけ。 ちなみにschemeのように指定できるものをFilter Typesというようで、他にもいくつかあって、以下に書かれていた。has-response-headerとか便利そう。 https://developer.chrome.com/devtools/docs/network#advanced-filtering
git commit --fixup とは何か - 詩と創作・思索のひろば
git commit --fixup というオプションの存在を最近知って調べた。 ヘルプとリリースノートより "git commit" learned the --fixup and --squash options to help later invocation of interactive rebase. Git v1.7.4 Release Notes --fixup=<commit> Construct a commit message for use with rebase --autosquash. The commit message will be the subject line from the specified commit with a prefix of "fixup! ". See git-rebase(1) for details. 1.7.4 から入って
あまり知られていないCSSの12の事実(続編) | POSTD
1年以上前に、私は最初の 12 Little-known CSS Facts（あまり知られていないCSSの12の事実） を発表しました。SitePointで最も人気の高い記事となりました。この記事を書いた後も、私はCSSのアドバイスやちょっとした情報の収集を続けました。だって、大ヒット映画も必ず続編を制作するじゃないですか。 注釈 SitePoint/ Natalia Balska によるイラスト それでは、早速今年も開発のヒントになる12の事実について話しましょう。もちろん、中にはもうすでにご存じのこともあると思いますが、この中で初めて知ったという事実がありましたら、コメントでお知らせください。 1. border-radius プロパティに”スラッシュ”シンタックスを使用できる事実 このプロパティについてはSitePointに4年以上 前に書いた のですが、この機能が存在することを、未
ファイルをrmしたがプロセスがファイルを掴んでいる場合にそのファイル内容を再度得るには - 人間とウェブの未来
ど忘れしていたのでメモです。 LinuxでApacheのログローテート時に、プロセスをgracefulしたつもりが何らかの原因によりできていなくて、その後古いログファイルを圧縮して、いらなくなったその生ログファイルをrmしたつもりが、プロセスはそのログファイルのinodeを掴みっぱなしになっていて、古いログファイルにログを吐き続けていて困ったみたいな事があると思います。 その場合に、そのまま古いログファイルに吐き出さされているログをもう一度参照したいこともあります。差分がでてしまいますからね。 これinodeは掴みっぱなしだし、ディレクトリエントリからファイル名は消えているけど、fdもわかるから簡単にファイル内容取得できるはずだけどどうやるんだったかなーと思って試していたら、非常に簡単に取得できましたというメモです。 対象のプロセスからPIDを取得して、 ls -l /proc/PID/f
セキュリティの観点での apache httpd.conf の設定ポイント - end0tknr's kipple - web写経開発
UserDir disabled ユーザ毎のウェブディレクトリ - Apache HTTP サーバ バージョン 2.2 UserDir は、各ユーザがホームディレクトリをウェブサイトとして構築できる為、控えましょう。 ( http://example.com/~username ) TraceEnable Off - HTTP TRACEメソッドを無効化 以前の↓こちらのエントリに記載している通りです apache 2.2.22のHTTP TRACEメソッドをOFFる - end0tknrのkipple - web写経開発 Options -Indexes - ディレクトリ リストを非表示 ファイルを表示されることで、穴のあるメンテナンスしていないファイルを見つけられると、都合が悪いですよね 旧) Options Indexes 新) Options -Indexes ServerSign
[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック
hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 HTMLは非常にシンプル、カラーやサイズの調整も簡単、背景画像も問題ありません。 実装のポイントは5つ。 画像は使用しない。 spanなど、余分なHTMLは使用しない。 フォントのサイズを大きくしても自動で調整される。 可変。 背景が画像でも水平ラインが綺麗に描かれる。 実際の動作は、下記ページで確認できます。 デモは全てのモダンブラウザ、IE9+でご覧ください。 Heading Side Lines HTML HTMLは非常にシンプルで、hnやp要素のみで実装できます。 classを使用すれば水平ライン有り・無しの共存も可能です。 <body> <h2>テキストの左右に</h2> <h3 class="lines-on-sides">水平のラインを描く</h3> </bo
実行中のプログラムの進捗度を手っ取り早く確認したい - その手の平は尻もつかめるさ
完了するまでに結構時間がかかるプログラムを実行している時，そのプログラムの進捗度を確認したくなることがままあると思います．ほんとに動いてんのかお前，みたいな． そうした時に考えうる最も簡単な方法は，こんな感じで進捗度を標準出力に流してしまうという方法でしょう． (1..100).each do |i| # 例えばここで何らかの重い処理をする (下のsleepはその「何らかの処理」の例) sleep 0.1 # ここで進捗を表示 (プログレスバーみたいなもっとリッチな感じでも可) puts "#{i}%" end 簡単なものだとこれで良いでしょうが，途中で端末のセッションが切れると「アッアッ」という感じになったり，そもそもプログラムの実行に際して端末が割り当てられいるとも限らないし，というか時間のかかるプログラムがその処理中ずっと端末を占領しているのはつらいので別の方法が欲しかったりします．
[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ
15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） column-width（カラム幅） circle（円形） font-size（フォントサイズ） box-shadow（ボックスシャドウ） xPos（要素の座標） vertical-align（天地の中央に配置） flexbox（フレックスボックス） flex（モダンブラウザの旧仕様にも対応したflexの指定） flex-order（表示の順番） flex-direction（表示の方向） gra
![[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/41a2e814247663ad1040b747f3c634ccd698a028/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111701.png)
[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック
フルスクリーンサイズでデザインされた縦長ページの各セクションの高さは、表示高さのいっぱいだったり、次のセクションが少し見えるように実装します。 高さがいっぱいではない時、例えば80%, 90%だと通常はスクリプトでの実装を必要としますが、IE9+対応でCSS一行で簡単に実装できるテクニックを紹介します。
![[CSS]スクリプト無しで、縦長ページの各セクションごとの高さを設定するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd5c987dfa0c56fe670b813b7f4c439c96db29a2/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014110701-01.png)
Unlimited Backgrounding on iOS
Since iOS4, developers have the ability to perform background tasks with some limitations. Background tasks must fit one of the five different categories for background supported apps. Music and streaming apps can be backgrounded as long as they play music. Newsstand apps can wake once a day to download updates. Location aware apps can wake up once in a while to update their position. VOIP apps ca
Debug.Traceで関数の引数を表示するイディオム - maoeのブログ
Haskellでよくある複数行の関数定義だったり、ガードを使っている場合、全ての場合について引数をtraceするコードが書きにくいことがある。例えば、 data A = A1 | ... data B = B1 | ... data C = C1 | ... f :: A -> B -> C -> ... f A1 b c = ... f a B1 c = ... f a b C1 = ... こんな定義でaとbとcをどの場合についてもtraceしたい場合、各行にそれぞれtraceを書く必要がありそうに見える。 f :: A -> B -> C -> ... f A1 b c = traceShow (A1, b, c) $ ... f a B1 c = traceShow (a, B1, c) $ ... f a b C1 = traceShow (a, b, C1) $ ... そうい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Type Casting to Numeric: tan(atan2()) Scalars
caneco.xyz
mysqlコンソールをpagerで便利に - Qiita
List up the device item of the iOS simulator. - latest log
