1/5くらい欠けた円を回す
新しいApple Storeアプリで使われてるローディング・アイコンをCSSで模したもの。たまにこういうものを作ると、自分が新たなCSSテクニックを学ぶことに貪欲でないことを再認識させられる。 Demo: Apple Store App Loading Icon .loading { border: 1px solid #797673; border-radius: 51%; position: relative; width: 2rem; height: 2rem; background-color: #fff; animation-duration: 1s linear infinite spin; } .loading::before { display: block; position: absolute; width: 50%; height: 50%; content: "";
Flexbox、おもしろいですよ？
Translation of: Learn You a Flexbox for Great Good! | The Haystack. written by Stephen Hay Flexboxについて知っていますか？ 多分、名前は聞いたことがあるでしょう。もしかしたらチュートリアルくらいは読んだことがあるかもしれません。既に試していたりしますか？ Flexboxという代物についてあまり聞いたことがなかったり、前に試してから随分と経つなら、そのFlexboxに関する知識のことは一旦全て忘れてしまいましょう！ 現時点での最新版である2011年11月29日にリリースされた仕様では完全に別物になっています。 訳注 2012年3月22日に新しく公開されたWorking Draftでもまた大きな変更が加わり、この文書の一部はそのWDにそぐわないものになっています。大筋は変わりませんし、2012年3
Twitterのテキストのリンク張り
Twitterではツイートの表示にいくつか規制がある。例えばTwitterの鳥さんを表示しなければならないとかユーザーのプロフィールへのリンクでは#!/のアレはダメだったりとかかなり細かい。ということでユーザー名やURL、ハッシュタグにまとめてリンクを張るJavaScriptをjQueryで普通に書いてみた。 まず正規表現の定義。 var url = "https?://\\S+"; var mention = "@[0-9a-zA-Z_]{1,15}"; var hashtag = "#[0-9a-zA-Z]+"; var re_url = new RegExp("^" + url); var re_mention = new RegExp("^" + mention); var re_hashtag = new RegExp("^" + hashtag); var re_token =
Sass - チュートリアル
この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
HTTPエラーページに意味を持たせよう
Translation of: Adding meaning to your HTTP error pages! by Stuart Colville This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license はじめに ウェブ上で何かを検索しようとすると、既に存在しないページしか検索結果になく、それらへのリンクをクリックすることはよくあるだろう。その開いたページにデフォルトのエラー・メッセージの他に何も情報が載っていなかった場合、多くの人々は戻るボタンを押し次の検索結果を開こうとするだろう。 サイト製作者である我々はもっと訪問者に意味のあるエラーページを作成することができる。そうすればたとえエラーページであっても訪問者をサイトに留まらせ、彼ら
既に起動しているgVimの新しいタブでdiffを行う
Vimのdiffがすごく楽なので使いまくり始めた。単にgVimを新たに起動してdiffを行うだけならば、-dオプションとファイルを2つ渡してやれば良い。が、既に起動しているgVimの新しいタブでdiffを行う方法がわからない。--remote-tab-silentオプションを追加するだけではうまくいかないようだ。色々調べたところ、公式MLのアーカイブにあったスレッドで、--remote系のオプションではExコマンドを1つ指定して実行することができるので、それを利用してvertical diffsplitを実行してやれば良いことがわかった。 つまり、foo.txtからbar.txtとの差分を既に起動しているgVimで開く場合は、 $ gvim --remote-tab-silent +"vertical diffsplit bar.txt" foo.txt とする。foo.txtを既に起動し
Git Cheat Sheets JP
設定 基本 ブランチ リモート・リポジトリ git-stash git-svn 参考 修正履歴 設定 Git には様々なオプション設定がある。中には挙動を大きく変えるものもあるので注意が必要である。 設定をすべて表示する $ git config --list システム (/etc/gitconfig) の設定 $ git config --system --list や、ユーザーごと (~/.gitconfig) の設定 $ git config --global --list など表示する対象を絞ることもできる。 ユーザ名とメール・アドレスを設定する $ git config --global user.name "John Doe" $ git config --global user.email "john.doe@example.com" コミットする時に記録されるユーザー名とメ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
