ちまたで阿部寛のサイトが早いと話題になってます。 dev.toと阿部寛のホームページどっちが速いですか？ dev.toと阿部寛のホームページについてちゃんと計測させてくれ 阿部寛のサイトはベストを尽くしてるのか？ それを調べるために、阿部寛のサイトを高速化させてみたいと思います。 目指すべきスピード 最速はローカルのファイルへのアクセスだと思うのでこれを目指したいと思います。 file:///C:/abe_hiroshi/index.html ChromeのDeveloper Toolでレンダリング完了が「173ms」でした。 まぁここまでは無理だな… 阿部寛のサイトはどんなもん？ 速度はwebpagetest.orgで測ってみます。 レンダリング完了時間は「359ms」です。はえーな S3でホスティングしてみる サーバーを立てるほどでもないので、S3でWebホスティングしてそこにhtml

HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d

エイプリルフールで大幅なリニューアルを遂げたKMCのウェブサイトでしたが、これを作るのにたくさんの知見が得られたので紹介します！！ ちなみにエイプリルフールのサイトは下のリンクで見ることができます。（音がなります） http://www.kmc.gr.jp/2015April GitHubのリポジトリはこちらです！ github.com 知見 タグのネストは100個程度に抑える divタグを256個囲うことによって、中央揃えを実現しようとしてこの制限を発見しました。 hitkey.nekokan.dyndns.info blinkタグはもう動作しない marqueeは動作します。これからはCSSAnimationをつかいましょう。 marqueeを置き過ぎるとfirefoxで落ちる chromeでは快適です。marqueeを眺めるならchromeがオススメ！ ブラウザ落ちたという報告もfi

追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative

こんにちは。PR TIMESフロント・エンジニアの山田です。 弊社ではAjaxを使ったサイトやサービスも多く運営しています。 さて、そのAjaxですがページ遷移なしにコンテンツを切り替える場合、当然ながらそのままではブラウザのURLも変わりません。これではユーザーが直接読み込み先にアクセスしたり、ブラウザのBACKボタンで前に戻ったりできないので不便です。そんな時に使えるのが、Hisotry API。これはブラウザの履歴をJavascriptから管理、操作できる便利なAPIです。 まず以下の4つは以前からあり、古いブラウザでも動作します。 history.back();//表示した履歴の1つ前のページにもどる history.go(4);//表示した履歴の4つ前のページにもどる history.go(2);//表示した履歴の2つ先のページに進む history.forward();//表示

How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot

Coqでプログラムや証明を書いたら、そのソースコードを人に見せたりしたくなるときがある。 そのときに便利なcoqdocという機能がある。coqdocはcoqtopやcoqcなどと一緒のところにある。 使いかたは以下。 $ coqdoc [Coqファイル.v] ここで、(** コメント *)のように星二つで作ったコメントはドキュメントに青く出力される。特に大きい見出しとして出力したい場合は(** * 見出し *)というコメントにしよう。 コメント内でリンクタグなどのHTMLを書きたい場合は#で囲ったら大丈夫。 さらにスタンダードライブラリなど、どの関数や定理を使ったかリンクがたどれるドキュメントを作ることもできる。それには次のようなオプションつきで、コンパイルしなおしてからcoqdocするとできる。 $ coqc -dump-glob [新たに生成されるglobファイル] [Coqファイル.

一度に複数のプログラムのソースコードを見やすく色付けして、HTML・XHTML・RTF・TeX・LaTeX・SVG・BBCode・XML形式に変換でき、さまざまな設定も可能なソフトが「Highlight」です。インストールと操作方法は以下から。 Andre Simon - Startseite http://www.andre-simon.de/zip/download.html ◆インストール 上記サイトの「highlight-setup-3.9.exe」をクリック。 「highlight-setup-3.9.exe」をクリック。 「Next」をクリック。 「I accept the agreement」にチェックを入れて「Next」をクリック。 「Next」をクリック。 「Next」をクリック。 「Next」をクリック。 「Next」をクリック。 「Install」をクリック。 20秒

つまりhtml, head, bodyなどの使い慣れたお決まりのタグは今更書くまでもないということ。 参考: どのようなタグが省略可能か http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission P.S. STORYS.JP、 coincheck などのサービスを運営、開発しています。興味のある方はぜひ 和田まで連絡を！ Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can

ちょうどいくつかプレゼン用の資料を作らなきゃと思っていてなんかいいテンプレートないかな〜って探していたらのでreveal.jsが超絶に良かったのでメモ reveal.js htmlで綺麗でカッコいいプレゼンテーションを作れるフレームワークです。 3Dでグィングィン動きます デモ画面見ればどんな風にグィングィン動くかわかります（開いたら右スクロールボタンを押してみてください） Escキー押すとプレゼンテーションのドキュメント一覧が見れます それがまたカッコよく3Dでみれます。 PDFへのエキスポートが楽チンです 書いたドキュメントをプリントしてメンバーに配布とかってシーンがあるとおもいますが reveal.jsなら綺麗にできます。 使い方 zipパッケージで落としてくる hakimel/reveal.jsにいって 「Download ZIP」をポチッと押します。 書きたい内容をindex.h

Daniel Lemire's blog Daniel Lemire is a computer science professor at the Data Science Laboratory of the Université du Québec (TÉLUQ) in Montreal. His research is focused on software performance. Menu and widgets

1. Firefox OS Slides @ html5j.org 35th by Tomoya Asai (dynamis) Last Update: 2013/01/22 3. about:dynamis Tomoya Asai @ Mozilla Japan http://dynamis.jp @dynamitter facebook.com/ dynamis レッサーパンダが好き。 mailto: Tomoya ASAI <dynamis@mozilla-japan.org>

2. 自己紹介 • @shiwano • HTML版ロードオブナイツのプロジェ クトには、6月中旬からアサイン • ゲーム開発への本格的な参加は、今回 が初めて • それまでは普通の Web 製作で、マー クアップとかやってた

2012年 10月 9日 出ましたよ！新しくhtmlに特化したEmacsのメジャーモード。 web-mode.el htmlにごちゃごちゃ書き過ぎるのはあれですが、html中のCSS,PHP,JavaScript,Java/JSP,ASPXを色分け出来きて、インデントを統一できるのは便利です。 PHPフレームワークのテンプレートなどに有用ですね。 良いなと思った機能 web-mode-toggle-folding "C-c C-f" HTMLタグを折り畳む機能です。カーソルの位置のタグ内が省略されアンダーラインでマークされます。戻すときも"C-c C-f"です。 web-mode-rename-element "C-c C-r" タグの開始タグと終了タグの名前を変えてくれます。 web-mode-match-tag "C-c C-n" タグの開始タグと終了タグにカーソルを持っていってくれま

1. 大規模 JavaScript その設計と実装と現実 株式会社Aiming ソフトウェアエンジニア 竹馬光太郎 2012/10/24@AimingStudy#6 12年10月24日水曜日 2. @mizchi / Koutaro Chikuba 2012/3/1- Aiming/Software Engineer * github https://github.com/mizchi * blog http://d.hatena.ne.jp/mizchi 12年10月24日水曜日