2014年7月13日のブラウザエンジン先端観測会での発表内容です。 http://atnd.org/events/52121
アクセシビリティオブジェクトについて
2014年7月13日のブラウザエンジン先端観測会での発表内容です。 http://atnd.org/events/52121
とほほのAngularJS入門 - とほほのWWW入門
AngularJS と Angular は別物です。バージョン 1.x を AngularJS、2.0 以降を Angular と呼びますが、根本から作り直しているので互換性はありません。AngularJS は 1.8.x で開発を停止しており、2021年12月31日にサポートも停止されました。現在は拡張LTS (XLTS) のフェーズにはいっています。(2022/1/2追記) AngularJS は、下記の様な特徴を持つ JavaScript フレームワークのひとつです。 Google社とコミュニティが開発するJavaScriptフレームワーク ライセンスはMIT License。オープンソース。商用利用可能。 今現在(2015年8月15日)の最新版は 1.4.4。 JavaScriptでクライアントサイドのMVC(Model-View-Controller)モデルを実現します。 これま
DEFGHI1977のWEB技術まとめ・ツール等
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
javascript DOMの基本操作まとめ
javascriptのDOM操作の基本をおさらいしておこうと思います。jQueryは少し触ったことがあるのですが、javascript自体はほとんど使ったことがないのでこれを機会に勉強していこうと思います。 ここではDOMの操作とイベント処理をまとめてみます。これが出来るようになると、Web上でインタラクティブな要素を盛り込むことができるようになります。 javascriptの基本 DOM操作 まずはiavascriptのDOM操作から。ここで使うHTMLはこちらです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascriptの練習</title> </head> <body> <div id="main" style="border:1px solid #555;width:400px
Web開発者に革命をもたらす！「Web Components」超入門 | 株式会社LIG
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
CSS vs. JS Animation: Which is Faster?
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point walkthrough of how JavaScript-based DOM animation libraries, such as Velocity.js and GSAP, are more perfor
Web Componentsに関するパネル、WebとDOMとの関係性、ARIAのWeb標準化など海外WEBテク20本を一挙公開
Web Componentsに関するパネル、WebとDOMとの関係性、ARIAのWeb標準化など海外WEBテク20本を一挙公開 斉藤 祐也（株式会社リッチメディア） 斉藤祐也の海外WEBテク定点観測＜Issue.12: 2014/03/01-2014/03/31＞ 今月の定点観測はWeb Componentsに関するパネル、WebとDOMとの関係性、ARIAのWeb標準化などを紹介します。 注目ニュースピックアップ Web Componentsに関するパネルディスカッション 原題: EdgeConf 3: Components 3月21日にロンドンにて開催されたEDGE Conferenceにて議論されたWeb Components。このカンファレンスでの議論そのものも非常に興味深いものですが、このカンファレンスをきっかけに多くの議論がブログなどで展開されました。Web開発の未来を担うとす
Intro to Shadow DOM | Envato Tuts+
Take any modern web page and you will notice that it invariably contains content stitched together from a variety of different sources; it may include the social sharing widgets from Twitter or Facebook or a Youtube video playing widget, it may serve a personalized advertisement from some ad-server or it may include some utility scripts or styles from a third party library hosted over CDN and so o
モバイルブラウザでもサクサクに動作する最適化6つのノウハウ
「Webサイト・アプリ高速化テクニック徹底解説」第8回は、モバイルブラウザに向けた最適化について紹介します。 モバイル端末はPCに比べ、CPUやネットワークなどの性能面で劣ることからボトルネックの影響が出やすく、またゲーム開発など突き詰めたチューニングを行う場面では、特殊なノウハウも必要になります。 しかしきちんと最適化を行えば、その効果もその分著しく、比較的低スペックな端末や3G回線であっても、サクサク軽量なサービス提供が可能です。今回の記事では、その勘所をお伝えしたいと思います。 1. ボトルネックを取り除く まずはやってしまいがちなボトルネックの事例について、挙げていきたいと思います。前述のようにモバイル端末では、その性能からPCよりも顕著に、未最適化箇所が体感に影響を及ぼします。 仕事がらそこそこの数のアプリケーションを見てきましたが、モバイル向けに特化したチューニングができていな
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
JavaScriptでgreasemonkeyを作成する方法 - flandlescarlet's diary【情報工学生の備忘録】
サイトの表示や動作を自己流にアレンジできる JavaScriptが使えるようになると、greasemonkeyも使えるようになると言われていますが、個人的にはDOMの概念について理解しておかないと使えないと言っても良いかもしれません。 JavaScriptには大きく分けると ナビゲータオブジェクト(ブラウザの判別やハンドラ等) ビルトインオブジェクト(newで始まる予め用意されたオブジェクト) DOM(Document Model Object いわばDHTML) 基本的にはこの3つです。 ではgreasemonkeyはDOMを理解していないとできないのか!?と言われればそうではありません。主にgreasemonkeyでやっている事は内容の書き換えですのでDOMを用いる場面が多いというのが結論となってきます。DOMを用いなくてもgreasemonkeyは製作出来ますが、基本的にナビゲーター
CSS Sprite画像はDataURI画像にすべきか？ - MOL
最近、スプライト画像はDataURIにすべきですか？という質問が多くて、調べてみました。てか、前のもそんな話題があったような。DataURIってなんぞって方は下記を見てほしい。 データURIスキーム | MOL CSSファイルがパースされなければレンダリングが始まらないのでCSSファイルの肥大化は絶対に避けなければならない。画像の1KBとCSSファイルの1KBを同じように考えてはいけない。 ― ぼくのかんがえたさいきょうのしーえしゅえしゅ あ、ホントそうだっけーなーと思いつつ、どこぞの資料見たんだっけなーと探してたらあった。 Optimizing the Critical Rendering Path for Instant Mobile Websites - Velocity SC 2013 このセッションはすごく分かりやすいのでオススメです（該当の箇所は12分位から）。というかIlya
ビギナー向けデバッグツールで効率的に開発しよう
主要なブラウザ「Chrome・Safari・Firefox・Internet Explorer」のビギナー向けデバッグツールが紹介された勉強会のエッセンスをお届けする。 2013年3月21日、新宿で行われたhtml5j.org主催の第37回HTML5とか勉強会に参加してきました。 今回のテーマはビギナー向けデバッグツール特集ということで主要なブラウザ「Chrome・Safari・Firefox・Internet Explorer」のデバッグツールに加え「Adobe Edge Inspect・Edge Reflow」の紹介が行われました。 筆者もそうですが、普段何となくデバッグツールを使っている方が多いと思います。しかしデバッグツールは、上手に活用することでWebサイト・アプリケーションの効率的な開発を行ったり、パフォーマンスチューニングの際に問題となる部分を素早く特定できたりする便利なツー
『JavaScriptの開発効率を高める7つのライブラリ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
DOMInspectorとuserChrome.cssでFirefoxの外観を変更する方法 - 巡回ログ
上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。 No Tag スポンサードリンク ツイート RSSリーダーで購読する @jyunkailogさんをフォロー -------- │ スポンサー広告 │ Edit DOMInspectorとuserChrome.cssでFirefoxの外観を変更する方法 ツイート 「DOMInspector」と「userChrome.css」を使ってFirefoxの外観を変更する方法を紹介します。 DOMInspectorとuserChrome.cssって何？ DOMInspectorはwebページ及びFirefoxの外観を解析するもので、userChrome.cssはFirefoxの外観を変更するために使用するものです。 DOMInspectorでwebページを変更する方法は以下のリンクで紹介しています
smarter svg overview · svg · WPD · WebPlatform.org
WebPlatform Docs welcomes all comments. If you want to comment, please register or log in. It is free. This tool helps to make and review comments inline. How to Use insert instructions, with images, here By Mike Sierra Summary This guide shows you how to build a pair of animating eyeballs, providing a comprehensive tour of SVG features detailed in other tutorials. It shows how to maintain a set
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
ブラウザレンダリング 最適化テクニック
https://developers.google.com/web/tools/setup/workspace/setup-devtools