世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ - mizchi's blog
2chまとめみたいなタイトルにしてみた。(してみたかった) HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は本当に出来てない。 とくにソシャゲをウェブビューに貼ってスマホ対応しました系。本当にダメ。 じゃあどうするか？基本的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提 シングルページアプリケーション セマンティクスやSEOは考慮しない 基本哲学 共通モデルの初期化を徹底的に行う サーバーにリクエストを投げるのは最小限 クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない 理由 いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。 プログラマとし
wri.peで学ぶ、イマドキのWebアプリの作りかた（前編）
エキスパートが手がけたプロダクトを題材に技術的な解説を行っていくシリーズ連載、今回は wri.peです。 難しい機能の実装や、先進的なAPIの利用を通じて、執筆者が得たノウハウを余すところなく紹介していきます。 HTML5を活用したメモ帳アプリ [wri.pe] 最近、仕事で作っているミイルが忙しかったり、趣味で作っているMobiRubyがなかなか進まなかったりして、個人でWebサービス的なモノを作っていない事が自分としてちょっと気になっていました。 そこで息抜きとして、ゴールデンウイークに集中してWebサービスを一つ作ろう！と思い立ち、wri.peというWebサービスの開発に着手しました。 wri.peは自分が使いたいと思えるメモ帳を作ったので、下記の様な特徴を持っています。 Markdownフォーマットをサポート Gmailの様なアーカイブ機能 全文検索 カレンダーへのマッピング iP
HTML5でサイトを高速化─wri.peで学ぶ、イマドキのWebアプリの作りかた（後編）
HTML5でサイトを高速化─wri.peで学ぶ、イマドキのWebアプリの作りかた（後編） 増井 雄一郎（FrogApps, Inc.） 前回の記事では、 wri.peの紹介と、HTML5のApplication Cacheを使ったHTMLや画像などの読み込み高速化の話をしました。今回は、Web StorageのlocalStorage/sessionStorageを使い、Ajax通信部分と表示の高速化を行う手法を説明しましょう。 localStorageを用いた通信と表示の高速化 前回のApplication Cacheで、HTMLの読み込みが高速化されました。これでも十分速くはなったのですが、画面に全ての情報が表示されるまでには、ちょっと時間がかかります。 wri.peではメモの一覧や、メモ本体の読み込み・保存はXHR(XMLHttpRequestの略。Ajax通信で使うモジュール名)を
意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ | ゆっくりと…
前の記事「HTML5でモダンブラウザのCSS3バグを回避するためのハック方法」に関連して、jQuery で HTML5 データ属性にユーザーエジェント文字列を格納する方法を調べていました。その結果、ちょっと整理をしておいた方が良いかなと思う点を共有したいと思います。 ご存知の方も多いと思いますが、jQuery には .data() や jQuery.data() という、DOM 要素に データ を紐付けて記憶しておく仕組みが元々ありました。jQuery 1.4.3 からは、 API レベルでの 親和性 が考慮された形で HTML5 data-* 属性を取り込む仕様が導入されました。 HTML5 時代では、クライアント・サイドで実行されるコード量も増え、データ属性を扱う機会もちょくちょく出てくるのではないでしょうか。そこで今回は、 HTML5 data-* 属性のおさらい jQuery Da
HTML5日本語化 - Opera Wiki
（管理人さんがここを使っていいと言うんで。） HTML5仕様が通しで日本語で読めたらいいな、って。 RCへの目途をつけて、HTML5.1とか作ろうぜとかわけのわかんないこと言っているW3C HTML5ですが、HTML5タグリファレンス - HTML5.JPに要素とその周辺の一部が確認できるぐらいで、その他の日本語訳は（少なくとも私の知る限りでは）ありません。 願うだけでは何も起きませんが、みんなでちょっとずつ翻訳すればいつかできあがると信じてます。協力してくださる方はぜひ。 [編集] 目的 HTML5: Edition for Web Authors （この記事が書かれたときに一番新しい）草案をつぎはぎしてでも日本語訳で読めるようにする。 フルなHTML5ではなくて、web制作者版のものを選択。ちっちゃい方が作業量が減る…はず。 [編集] 翻訳分担 以下に翻訳したい箇所を記述. 原則は早い
HTML 5 / A vocabulary and associated APIs for HTML and XHTML / W3C Working Draft 22 January 2008
Table of contents 1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Microdata6 User interaction7 Loading web pages8 Web application APIs9 Communication10 Web workers11 Worklets12 Web storage13 The HTML syntax14 The XML syntax15 Rendering16 Obsolete features17 IANA considerationsIndexReferencesAcknowledgmentsIntellectual property rights F
iio Engine: JavaScript Game Engine for HTML5 Canvas
iio.js is a framework for HTML5 Canvas
特定の範囲内にのみスタイルを適用できる scoped 属性
HTML5 で追加された scoped 属性は特に目新しい属性ではありませんが、ここまで正式に対応したブラウザが存在しなかったため、使う機会がありませんでした。ところが、ここにきて Firefox Nightly が対応したそうなので、ちょこっと試してみます。 HTML5 で style 要素に追加された scoped 属性は特に目新しい属性ではありませんが、ここまで正式に対応したブラウザが存在しなかったため、使う機会がありませんでした。ところが、ここにきて Firefox Nightly Builds が対応したそうなので、ちょこっと試してみます。 Firefox Development Highlights - Windows での H.264 & MP3 サポート、スコープが設定されたスタイルシート など ： Mozilla Developer Street (modest) sco
HTML5 Bones: The template that goes back to basics
Back to basics About HTML5 Bones is a template that goes back to basics and provides you with the bare minimum required to get going with HTML5. Inline comments explain how and when to use some of the most common HTML5 elements. Can also be used as a guide when building your own pages from scratch. No JavaScript libraries such as jQuery or Modernizr are included, as they may be completely unnecess
Case-study - JAM with Chrome | web.dev
Case-study - JAM with Chrome Stay organized with collections Save and categorize content based on your preferences. Introduction JAM with Chrome is a web based musical project created by Google. JAM with Chrome lets people from all over the world form a band and jam in real time inside the browser. We at DinahMoe had the great pleasure to be a part of this project. Our role was to produce music fo
Adobeアカデミックストア
Get 20+ {{creative-cloud}} for less than the price of 3 apps. The All Apps plan includes 20+ apps and services plus 20,000 fonts, storage, templates, and tutorials for less than the price of {{acrobat}}, {{photoshop}}, and {{premiere-pro}} sold separately. https://main--cc--adobecom.hlx.page/cc-shared/fragments/merch/products/catalog/marquee/includes {{free-trial}} {{buy-now}}
HTML関連英文書の日本語訳 - HTML5.JP
W3Cなどが公開するHTML5に関連した文書を日本語訳しました。HTML5の理解にお役立て下さい。 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 W3C - The WebSocket API WebSocket は、JavaScriptからサーバーとの双方向通信を行いメッセージ交換を実現する API です。XHR では実現できなかったようなリアルタイムの対話が
Web標準仕様 日本語訳一覧
CSS メディアクエリー 画面サイズなど、媒体の持つ特徴を利用し、スタイルシートを適用するための仕組みを提供します。 原文: “Media Queries” (W3C Recommendation 19 June 2012) セレクタ Level 3 :nth-child()や:not()など、新しいセレクタを定義するモジュールです。 原文: “Selectors Level 3” (W3C Recommendation 29 September 2011) CSS 名前空間モジュール CSSで名前空間を扱う@namespace規則を定義しています。 原文: “CSS Namespaces Module” (W3C Recommendation 29 September 2011) CSS カラーモジュール Level 3 opacityやrgba()など、色に関する値やプロパティを定義す
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
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
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
HTML Standard 日本語訳
4.8.4 画像4.8.4.1 導入4.8.4.1.1 アダプティブ画像4.8.4.2 source、imgおよびlink 要素の共通属性4.8.4.2.1 srcset共通属性4.8.4.2.2 size属性4.8.4.3 Processing model4.8.4.3.1 When to obtain images4.8.4.3.2 Reacting to DOM mutations4.8.4.3.3 The list of available images4.8.4.3.4 Decoding images4.8.4.3.5 Updating the image data4.8.4.3.6 Preparing an image for presentation4.8.4.3.7 Selecting an image source4.8.4.3.8 Creating a source s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
What : Web Hypertext Application Technology Working Group
W3 Watch Reference
Validator.nu
短期間＋大規模ゲーム開発でも破綻しないHTML・SCSS
