Twitterがページ表示時間を5分の1に高速化。どのようなテクニックを使ったのか？
Twitterがフロントエンドのアーキテクチャを見直し、Webページの読み込み速度を改善したことをブログで明らかにしています。 新しいアーキテクチャでは、これまでWebブラウザ上でJavaScriptの処理によって行ってきたWebページのレンダリングを見直し、サーバ側でレンダリング済みのHTMLページを送信し表示することにしています。これによってWebページの読み込みから最初のツイートの表示までの時間が大幅に短縮されることになりました。 When we shipped #NewTwitter in September 2010, we built it around a web application architecture that pushed all of the UI rendering and logic to JavaScript running on our users’
Webサイトの品質をアップさせる便利ツール＆機能のまとめ | ベイジの社長ブログ
成熟市場においては、品質の高さでは優位性を築けなくなると言われます。しかし、だから品質にこだわらなくても大丈夫、と考えるのは早計です。裏を返せば、品質の高さが当たり前になっているため、少し品質が低いだけでブランドを大きく傷付けやすい環境になっているとも言えます。 そういった考えもあって、今年行っている当社のブランド再構築活動の中では、高い品質を担保するためのレギュレーションの整備に力を入れてきました。あわせて、当社として利用する品質を維持するためのツールや機能も改めて洗い出してみました。今日はこの内容を公開させていただきます。 JavaScriptエラーを無くす JavaScriptのエラーは、大きな問題が起こっていないように見えても、大事な機能が動かなくなったり、スペックの低いマシンで極端に挙動が遅くなったりすることがあります。各ブラウザのデフォルト機能で簡単にチェックできますので、エラ
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
条件付コメント(Conditional Comments)実験ページ
IE5.5については「if gte IE 5.5」は通るのに「if IE 5.5」が通らないようです。 「if IE 5.5000」などとピリオド以下4桁全て書くと通ります。
HTMLとJSだけで何か作るときの - hitode909の日記
HTMLとJSだけで何か作ることが多くて，開発環境をどう作るかとか，ノウハウみたいなのがたまってきたと思う． ローカルのHTMLファイルをブラウザで開くと，いろんな制約がある．たとえば，ファイルAPIを使えないとか，YouTubeのプレイヤー貼り付けできないとか，/js/みたいに絶対パスで指定することもできない．ページ1枚なら他のページにリンクとかいらないけど，ウェブサイトを作ってるときとかは，/help/でヘルプページを表示するとか書いたときに，ローカルのファイルを見てリンクが切れてるということになる．開発中はリンク切れだけど本番サーバーに置くと見れるはずとか言って開発するのは怖い． サーバーでRubyとかPerlが動いてるみたいなときはローカルでサーバーを立てて開発してると思う．HTMLとJSだけ使うときでもローカルでサーバーを立てて開発したほうがいいと思う． 開発中は，nginxでフ
javascriptとphpの目的の違いについて教えてください。どういった目的ごとに使い分けたりするのでしょうか？ - Jav... - Yahoo!知恵袋
JavaScriptとPHPは実行の主体が違います。JavaScriptはクライアントサイドのスクリプト言語で、Webの世界ではWebブラウザが実行します。一方のPHPはサーバーサイドのスクリプト言語で、サーバーで動作します。これが一番大きな違いで、ここからいくつかの違いへと繋がっていきます。 －－－－－－－－－－－－ （１）JavaScriptについて Webブラウザには色々な種類がありますよね。Internet Explorer、Firefox、Opera、Safari、Google Chromeなどなど。同じ名前のブラウザでもバージョンが違うとまたそれは違うブラウザで、例えばInternet Exploreのバージョン6と7と8ではそれぞれ違います。 JavaScriptは上記のとおりWebブラウザが実行しますが、ブラウザによって実行の仕方、実行できる命令の種類など、細かい点で多くの
「Meteor」は、JavaScript/HTMLで開発するリアルタイムWebアプリケーション基盤。何が起きているのかすぐに分からないほどすごい
「Meteor」は、JavaScript/HTMLで開発するリアルタイムWebアプリケーション基盤。何が起きているのかすぐに分からないほどすごい 「Meteor」は、Webアプリケーションを開発するためのフレームワークと実行環境を提供しています。アプリケーションはすべてJavaScript、HTML、CSSで記述できるため、サーバ側でRubyやPerlやJavaなどのプログラミングをする必要はありません。 TechCrunchの記事では、JavaScript/HTML/CSSだけでWebアプリケーションが開発できる点にフォーカスが当たり話題になりましたが、公開されたデモンストレーションのスクリーンキャストを見たところ、Meteorにはそれ以上に新しい仕掛けが盛り込まれていました（スクリーンキャストはこの記事の末尾に埋め込んであります）。 それは「リアルタイムなWebアプリケーションを構築す
ブラウザ上で実際にコードを入力しながら学べるプログラミング言語学習サイト「CodeStudy」【増田(@maskin)真樹】 | TechWave（テックウェーブ）
[読了時間: 1分] 学生エンジニア・デザイナーを対象とした求人情報サービス「JEEK」を展開するTechouseは4月5日、サイト内にプログラミング言語を習得できる新コーナー「JEEK CodeStudy」を開設した。 プログラミング言語学習というと、テキストか動画のインプット型が大半で、“よし、やるぞ” と始めるまでが億劫。ところがCode Studyは、実際のプログラミングと同じようにコードを入力しながら、インタラクティブに学習することができるため、集中しやすく習得しやすくなっている。 解らないことがあったらTwitterやFacebookで質問するという割り切りも、実は現実に則しているわけでいい感じだ。 あたかも本当にプログラミングをしている感覚で学べる 解答を入力するエリアは、プログラミングで使用するエディタさながらのふるまいをするため、初めてプログラミングをするという人にも感覚
Yahoo!がJavaScriptのフレームワーク「Mojito」をオープンソースで公開。同一のJavaScriptコードが、サーバ、ブラウザどちらでも実行可能
Yahoo!がJavaScriptのフレームワーク「Mojito」をオープンソースで公開。同一のJavaScriptコードが、サーバ、ブラウザどちらでも実行可能 Webアプリケーションのためのコードを1つだけ書けば、それがPC上でそのままローカルアプリケーションとなり、Node.jsのサーバへ持っていけばWebブラウザからWebアプリケーションとして利用でき、さらにモバイルデバイスからアクセスすれば、そのデバイスに最適な表示が行われる。米Yahoo!が4月1日にオープンソースとして公開した「Mojito」（モヒート）は、JavaScriptで書かれたアプリケーションフレームワークです。 Mojitoは昨年11月にYahoo!が開発中であることを明らかにし、今年の第1四半期にオープンソースとして公開予定としていました。 米Yahoo!がJavaScriptフレームワーク「Mojito」と、N
[JS]jQueryのプラグイン33+1選 -2012年2・3月
Camera 表示サイズに合わせて最適なレイアウトを提供するResponsive Design対応のスライドショー。
ブラウザで正規表現のお勉強ができる『Scriptular』 | 100SHIKI
よくあるツールではあるが、最近正規表現を勉強しなおしたのでご紹介。 Scriptularでは、インタラクティブに正規表現を試すことができるようだ。 エンジンとして使っているのはJavaScriptのようだ。クライアントサイドだけで試せるのでさくさく動いていい感じだ。 また右横にはリファレンス的に説明もあるのでいちいちどこかを検索する必要もない。 そろそろ正規表現を・・・という方は試してみてはいかがすかね。
グーグル、新言語「Dart」を発表。JavaScriptのようなWebプログラミングを想定
DartはWebアプリケーションの開発を想定したプログラミング言語。実行方法として、JavaScriptに変換してWebブラウザ上で実行する方法と、専用の仮想マシンを搭載したWebブラウザで実行する方法が予定されています。グーグルはChromeにDartの仮想マシンを搭載する計画を検討中であることを明らかにしています。 Dartの設計方針は次のように説明されています。 Create a structured yet flexible language for web programming. Webプログラミングのための、構造的だが柔軟性のある言語を作る Make Dart feel familiar and natural to programmers and thus easy to learn. Dartを、プログラマにとって親しみのある自然で、学びやすいものとする Ensure t
画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションを適用する
CSS3を使って、画像に美しい角丸やボックスシャドウ、グラデーション、アニメーションなどを適用するさまざまなテクニックを紹介します。 また、Chrome, Safari, Firefoxなど、最近のブラウザで期待通りに表示されないのを回避する方法もあわせて紹介します。 CSS3 Image Styles [ad#ad-2] 最近のブラウザで生じる問題点 画像に角丸やドロップシャドウを適用すると期待通りにならないことがあります。これはChrome, Safari, Firefoxなど、最近のブラウザでも生じます。 Chromeでの表示 デモでは「border-radius」と内側に「box-shadow」を適用していますが、Chrome, Safariではキャプチャのように欠けて表示されてしまいます。 また、Firefoxでは「border-radius」は期待通りですが、「box-shad
[JS]さまざまな要素をダイナミックなアニメーションでズームさせるスクリプト -Zoomooz
画像だけでなく、ページ内のさまざまな要素をダイナミックなアニメーションでズームイン・アウト、回転させるjQueryのプラグインを紹介します。
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
WebKit サーバーというものを作ってみた - IT戦記
みなさん お久しぶりですヽ(´ー｀)ノ夏休みの宿題終わりました？ 毎日が夏休みの最終日みたいな生活してるあまちゃんです！ さてさて 今日は WebKit サーバーというものを作ってみたので、紹介してみます。 WebKit って何？ WebKit っていうのは Chrome や Safari の中に入ってるブラウザのエンジンのことです！ 実はブラウザっていうのは、エンジン部分と見た目の部分（タブとかボタンとかね）に別れていて、意外と違うブラウザでもエンジン部分は同じものを使ってるってことも多いんですよ(*´ー｀) ブラウザのサーバーってどういうこと？ 要は、サーバーサイドでブラウザを起動して JavaScript を実行したり、 JavaScript が実行されないと読めないページから値を持ってくるのに使ったりしようという魂胆です。 今まではそういうのなかったの？ 実は、今までは JavaS
[CSS]CSS3非対応も配慮、通知パネルをブラウザの上部に配置するチュートリアル
アニメーションでスライドする通知パネルをブラウザの上部に配置するスタイルシートを紹介します。 実装では、CSS3アニメーション対応ブラウザと非対応ブラウザへの配慮もされています。 Pop From Top Notification [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ デモページでは、CSS3アニメーションをサポートするブラウザと非サポートブラウザでの挙動の違いを確認できます。 デモページ ※上部のイエローのパネルです。 CSS3アニメーション サポート アニメーションでパネルがスライド表示され、アニメーションで隠れます。 CSS3アニメーション 非サポート スタティックにパネルが表示され、クローズボタンのクリックで隠れます。 実装：パネルをブラウザ上部に配置 まずは、パネルをブラウザの上部に配置します。 HTML パネルはdiv要素で実装します。 <div id
情弱なはてブ民にも判りやすく HTML5 vs Flash のこと教えてやる
(ここで言うHTML5はcss3とJavascriptも含めた技術全体の事、逆にFlashはAir等の派生技術は含めないブラウザ上のFlashPlayerの技術のみを指します。） ウェブに携わる人間には常識だけど、HTML5は何でも出来るスーパーヒーローではない。 どちらかというと、中日の高木とか、ヤクルトの宮本とか、巨人の川相とかの方が近い。知らないやつはググれgoogle:いぶし銀。 HTML5の真骨頂は、昨今のリッチなインターネットコンテンツを、非常に簡潔にスマートに記述できるところにある。複雑な事をすれば凝った事もある程度できるけど、得意分野じゃない（標準APIが機能不足だし、JavaScriptの言語仕様が複雑な処理に向いていない）。 ブラウザだけでここまで出来る、とか、 Flashはもういらない、とか、 ってのは、川相だって筋肉付ければホームラン打てるようになるし清原はもういら
JavaScriptの文字列を反転する１０の方法とそのパフォーマンス - 風と宇宙とプログラム
はじめに JavaScriptで文字列を反転する１０の方法を（無理矢理？）思いついたので、ちょっと簡単に紹介したい。また、それぞれについて、各ブラウザでパフォーマンスを測定してみたので、その結果も合わせて載せる。 文字列のStringオブジェクトには、部分切り出し(substring, slice)や置換(replace)、連結(concat)など豊富な機能があるのに、反転(reverse)機能はない。Arrayのreverseはあるのに、Stringのreverseがないのはどうしてなのだろうか。 各ブラウザとそのバージョンは以下の通り： Chrome Firefox Opera Safari IE 13.0.782.112 m 6.0 11.50 5.1(7534.50) 8.0.7600.16335 rev01: C言語的発想 空の配列を作って、そこに元の文字列の後ろから１文字つづ入
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
株式会社Techouse
