Webパフォーマンス ベストプラクティス - Make the Web Faster
Webパフォーマンス ベストプラクティス Last updated: 02 October 2012 翻訳：@t32k WebページをPage Speedで調べるとルールに準拠していないものが提示される。このルールというのは、一般的にあなたが開発段階において取り入れるべきフロントエンドのベストプラクティスだ。あなたがPage Speedを使用しようとしまいと、私たちはこの各ルールについてのドキュメントを提供する（たぶんちょうど新しいサイトを開発中でテストする準備が整ってないだろう）。もちろん、これらのページはいつでも参照することができる。私たちはあなたの開発プロセスに取り入れてもらうために、このベストプラクティスを実装するための明確なティップスと提案を提供する。 パフォーマンス ベストプラクティスについて Page Speedはクライアント側からの観点でパフォーマンスを評価し、一般的にペー
Google: HTML, CSS, and Javascript from the Ground Up - Google Code University - Google Code
Google: HTML, CSS, and Javascript from the Ground Up Are you looking for a basic understanding of how UIs are created on the web or who wants to brush up outdated UI development knowledge? Or maybe you'd like to learn more about the medium you're designing for and gain basic tools for prototyping designs? Do you want a better understanding of the web and how Google makes the pages that are its fac
HTML5 / CSS3 / JavaScriptのデモサイト「Circlu」を作りました – creamu
無性にアニメーションが作りたくなって、HTML5 / CSS3 / JavaScriptのデモサイト「Circlu」を作りました。 @daiskipさんからペパボの新サービス「ギフポ」のドメインをプレゼントしてもらったので、よっしゃ何かささっと作ってUPしてみようかなっと思い、テンションが上がって作ったんですが、circlu.comが空いていなかったので（プレゼントされたのは.comドメインでした）、、仕方なく自分のサブドメインで作ることに。 Webの技術が大変革を起こしている時期だと思うので、少しでもinputしたものをoutputしていけるようなサイトにしたいと思っています（今後メニューを追加してページを増やすつもりですたぶん）。 Webフォントもテスト時に使ってみたんですが、結構楽で楽しいですねー！ 一度見てみてください。 Circlu – making a experiment w
SassやLESSを導入するメリット | Good thinking
SassやLESSといったCSSを拡張するメタ言語がいろんなブログ記事などで取り上げられ、すでに導入しはじめている人も多いかもしれませんが、まだ導入していない人のために、本記事ではそのメリットを一部紹介します。 SassやLESSはCSSを拡張するためのメタ言語です。メタ言語というと小難しいような気もしますが、かなり大雑把に言ってしまえば、Ruby（Sass）、JavaScript（LESS）によって、CSSをより便利にする技術というところでしょうか。.sass,.scss (Sass)、.less（LESS）という拡張子のファイル上でスタイルを書き、それらをCSSにRuby,JavaScriptでコンパイル（変換）します。 いずれもプログラミング言語の要することで、普段HTML/CSS、JavaScriptはjQueryで、という人には「なんか便利そうだけど難しそう、導入が大変そう」と思
JavaScript最新動向 〜WebSocket編〜
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
The evolution of the web
The web today is a growing universe of interlinked web pages and web apps, teeming with videos, photos, and interactive content. What the average user doesn't see is the interplay of web technologies and browsers that makes all this possible.� Over time web technologies have evolved to give web developers the ability to create new generations of useful and immersive web experiences. Today's web is
いろんなHTML5 canvasのフレームワークを試してみた
TFujinami codes (jsdo.it) 珍しくというか初めてニュースクリップではなくオリジナルで書きます。 EaselJSやGuryなど幾つかのHTML5 canvasのフレームワークを試してみました。 ランダムで線、四角（長方形）、丸（楕円）を描画します。画面をクリックするとローテーションします。 コード共有サイトのjsdo.itですべて公開してあります。 - EaselJS (記事) - Gury (記事) - oCanvas (記事) jsdo.it上では動作しないのでダウンロードしてください - jCanvaScript (記事) - CasualJS (記事) 4/27追加 パフォーマンス低し、使い方が間違っている？ - jCanvas (記事) 5/20追加 - Processing.js (記事) 5/24追加 - LibCanvas (記事) 6/8追加 Ell
HTML5花火大会をみんなで作ろう！ - jsdo.it - Share JavaScript, HTML5 and CSS
集まった花火のコードをもとに、jsdo.it上で花火大会を開催します！ 色や形をアレンジしたり、個性的な演出はあなた次第。 ひと夏の思い出をあなたの花火で彩ってみませんか？ 花火職人のみなさんへ 「hanabi」のタグがついたコードが会場で打ち上がります。 各コードはiframeで表示され、徐々にフェードアウトしつつ約3秒間表示されます。 他の花火と重なることはありません。背景は黒(#000)もしくは透過で作成してください。 画像から花火を作ってみよう！ 1. THE花火職人 / Fireworks Generatorに画像をドラッグ＆ドロップして配列を生成します。 2. 以下のコードをフォークして、htmlのscriptタグの中に生成した配列を貼り付けます。 → やらない花 注目の花火 これらの花火をあなたらしくアレンジ（＝フォーク）してみましょう！ 「Fork」ボタンをクリックすると編
OSC 2011 HokkaidoにてjQuery入門の話をしてきました
先週末の6月11日、札幌で開催されたオープンソースカンファレンス2011 Hokkaidoにて、スピーカーとして参加してきました。 よさこいソーラン祭りも札幌で開催されていた日にもかかわらず、600人以上の参加者がOSCにきていたとか。その参加者のうちの120人程の前でjQueryの入門的な話をしてきました。 その際のスライド自体は、都合により公開しませんが、その内容のうち、一部をここで書いておきます。 6割の未経験者 今回のjQuery入門の話をする前に、簡単に挙手にてjQueryの利用状況を聞いてみたのですが、参加した人の6割程はjQueryを今まで使ったことの無い方でした。残りはプラグインなどを使ったことのある位な方が多いようでした。これはちょっとびっくりした位で、もっと使われているものかと思っていたのです。しかし実際の参加者層としては、使ったことの無い方が多いという。 JavaSc
Search by Drawing - jsdo.it - Share JavaScript, HTML5 and CSS
類似画像検索エンジン GazoPa がコンシューマ向けサービスを停止したと思ったら、 Google Images で "Search by Image" できるように なった。 しかし、GazoPa にあった「その場で絵を書いて検索」機能がなかったのでつくった。 （ただし http://images.google.com/support/bin/answer.py?answer=1325808 に 「『画像で検索』機能は、ウェブ上に一定の情報があるコンテンツに対応できるように最適化されています。そのため、個人的な画像（たとえば子どもが描いた絵）よりも、有名なランドマークや芸術作品の画像のほうが適切な結果を得ることができます。」 と書いてあるとおり、あまり精度いい結果がでてくるわけではありません。） 絵を書くところのコードは いろんなサイトに落書きするブックマークレット - 素人がプログラミ
プログラミング言語？ 「ほむほむっ」 - jsdo.it - Share JavaScript, HTML5 and CSS
Homu = {}; Homu.convertTable = { ".-": "a", "-...": "b", "-.-.": "c", "-..": "d", ".": "e", "..-.": "f", "--.": "g", "....": "h", "..": "i", ".---": "j", "-.-": "k", ".-..": "l", "--": "m", "-.": "n", "---": "o", ".--.": "p", "--.-": "q", ".-.": "r", "...": "s", "-": "t", "..-": "u", "...-": "v", ".--": "w", "-..-": "x", "-.--": "y", "--..": "z", ".-.-.-": ";", // original is '.' "--..--": ",", ".
CSS3 OF THE DEAD - jsdo.it - Share JavaScript, HTML5 and CSS
http://d.hatena.ne.jp/ndruger/20110428/1304021590 「javascriptを使わず、html + cssだけでクリックシューティングゲームを作ってみた」に触発されて。 クリックしてゾンビをやっつけろ･･･！ ポリスマンのような見た目にだまされるな！ 全部倒すとゲームクリアだ･･･！ 注意事項 * Chromeでしか動きません * Windows7 Chrome 13 dev でしか確認していません。 メモ * アニメーションの中でrotateX(10deg)とかするとクリックできなかった。 * 画像は全てdataURI * クリア画面を出すのは工夫した DATA URI Playground2 重宝してます！ http://jsdo.it/tsmallfield/datauriplayground2 m9( ﾟдﾟ)第二弾 CSS PANIC
M3Script Sample Project - jsdo.it - Share JavaScript, HTML5 and CSS
enchant.js プラグイン "M3Script" にてノベルゲームを作成するためのテンプレートとしてお使いください。 /* * 『タイトル』 * @author (作者名) */ try { enchant('m3'); } catch(e) { alert('M3Script need "enchant.js" ! \n[' + e.toString() + ']'); } var s = new Scenario(); var miku = new Character('初音ミク', common_definition); // 以上のコードは、いわばお約束 /* * [ キャラクター定義 ] * …は"miku.js"(http://jsdo.it/fullkawa/miku) にて定義されています。 * しかし、下記のようにシナリオごとに追加することも可能です。 * 詳細は"
Code Tweaking Contest - jsdo.it - Share JavaScript, HTML5 and CSS
お題その1 SVG 大喜利 投稿者1名にamazonギフト券 5,000円が当たる! SVG女子のコードを改変して、オチをつけてみよう！ 抽選で投稿者（1名）に、amazonギフト券5000円分をプレゼント！ お題その2 SVG 神モード 優秀作品投稿者1名にXbox 360+ Kinectが当たる! JavaScriptによるSVG要素を改変。あなただけの『SVG女子』を作成ください。優秀作品者（1名）に、Xbox 360 4GB+Kinectをプレゼント！ 応募方法とスケジュール イベント規約 この規約は、株式会社カヤック（以下「弊社」とします）が企画・運営する、JavaScript,HTML5,CSS jsdo.it –Share JavaScript,HTML5 and CSS -」（http://jsdo.it/）（以下「本サービス」とします）が主催するイベント「SVG女子」（以
jQuery.exFixed.js を機能拡張しました - Cyokodog :: Diary
以前、exFixed という jQuery プラグインを作成しました。IE6 で position:fixed を実現するプラグインで、特徴として IE6 でもガタつかない position:fixed が可能 クロスブラウザで fixed 要素に対し、位置移動、リサイズ等の動的な変更が可能（素のanimate メソッド等も併用可） といった事が挙げられます。 IE6 position:fixed の諸問題を解決する jQuery.exFixed.js IE6 position:fixed / exFixed.js を動的な位置移動やリサイズ処理に対応させてみた 今回、このプラグインをご利用下さった方々からのフィードバックを元に、機能拡張と不具合修正を行いました。 機能拡張 これまでは IE6 でもモダンブラウザの position:fixed と同レベルの扱いが出来ることを目指してました
JavaScript, HTML, CSS Q&A - jsdo.it - Share JavaScript, HTML5 and CSS
質問を投稿するJavaScript,HTML,CSS、それぞれのコードを使用して具体的に質問・回答することができます。 質問してみよう！ 1.上にある"質問を投稿する"をクリック 2.質問内容、コードを入力して"Add Question"ボタンをクリック 3.コードと共に質問が表示されます 回答してみよう！ 1.質問を選択する 2.回答内容、コードを入力して"Add Answer"ボタンをクリック 3.コードと共に回答が表示されます Tag
第4回 jQueryでアニメーション（お題編） | gihyo.jp
はじめに jQueryの機能を大きく分けると、DOM操作、アニメーション、イベント処理、Ajax、その他のユーティリティ関数といった分類ができます。DOM操作は前回の記事で解説したような、HTMLの要素を追加したり書き換えたりといった操作です。今回はその中の1つ、アニメーションについて解説します。アニメーションも正確にはDOM操作に分類されますが、アニメーションだけでかなり大きな比重を占めるので今回は通常のDOM操作とわけて考えます。イベント処理やAjax、ユーティリティ関数についても連載の後のほうで解説する予定です。 JavaScriptでアニメーションの基本 まず始めに、jQueryを使わないでアニメーションをする方法を紹介します。jQueryのアニメーションが実際に内部でどのような処理が行われているかを知ることでその後の理解度が増すと思います。JavaScriptでアニメーションは基
CSSでキュウべえ(FULL)を描いてみた - jsdo.it - Share JavaScript, HTML5 and CSS
/* * CSSでキュウべえ(FULL)を描いてみた * ※Google Chrome, FireFox, Safari, Operaに対応しています。 */ <div class="qb"> <!-- tail --> <div class="tail"> <div class="parts-1"></div> <div class="parts-2"></div> <div class="parts-3"></div> <div class="parts-4"></div> <div class="parts-5"></div> <div class="parts-6"></div> <div class="parts-7"></div> <div class="parts-8"></div> <div class="parts-9"></div> </div> <!-- ear --
3DSが当たる！お手本コードをフォークして面白○○診断を作ってみよう！ - jsdo.it - Share JavaScript, HTML5 and CSS
jsdo.itって？ jsdo.itはHTML5・CSS・javascriptを書いて 投稿・共有ができるサービスです。 書いたコードをその場で実行確認できるから、 WebサイトやWebコンテンツを作って そのまま公開できるのが特徴です！ 初心者でもカンタンです！ 初めての方もカンタンに始めることができます。 2種類のお手本コードを用意しました！ お手本コードをあなたらしくアレンジ(=Fork)するだけで、 とっても簡単に○○診断が作れます！ 今ならNINTENDO 3DSが当たるキャンペーンを実施中です！ みんなが作った診断で遊んでみよう！ 新着の診断 forked: あなたに足りない成分26view forked: 本当のモテ期診断638view forked: 本当のモテ期診断671view forked: 本当のモテ期診断558view forked: 本当のモテ期診断556vie
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blurjs.com/