High Performance Web Frontend 2013 秋第15回リクリセミナー「Frontrend in Osaka」 - Re:Creator's Kansai http://recreators.doorkeeper.jp/events/5240 で利用したスライドです。本編60分でした。 同年の7月に行ったWCAN Summer 2013の講演とは…
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
斉藤祐也の海外WEBテク定点観測＜Issue.6: 2013/09/14-2013/09/28＞
斉藤祐也の海外WEBテク定点観測＜Issue.6: 2013/09/14-2013/09/28＞ 斉藤 祐也（株式会社リッチメディア） Colt McAnlis氏による画像圧縮にまつわる詳細な解説、Peter-Paul Koch氏のmodern.IEレビュー、Alla Kholmatova氏によるUIアイコンの認知速度の最適化、Chris Coyier氏のいまさら聞けないTableタグの使い方など、14日間のWeb開発最新ニュース合計20件を紹介します！ 注目ニュースピックアップ Webデベロッパのための画像圧縮 – HTML5 Rocks 原題: Image Compression for Web Developers CSSやJavaScriptのファイルサイズをいかに減らす事ができるか。それにともなう自動化処理などのセットアップ。それらの努力を無駄だとは思わないが、ウェブページ内の画
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
Webアニメーションを高速化するために知っておくべき10のこと（後編）
Webアニメーションを高速化するために知っておくべき10のこと（後編） 斉藤 祐也（株式会社リッチメディア） 前編から引き続き、後編でも最適化のために知っておきたいレンダリングプロセス、計測方法、そして最適化を妨げるよくあるアクシデントとその回避方法について紹介していきます。 アニメーションを高速化するために知っておきたいレンダリングプロセス ブラウザがどのようにウェブサイトを表示しているのかを知ることは、アニメーションだけに限らず、Webのパフォーマンス全体の高速化を行うために大切なステップです。 イスラエルの開発者であるTali Garsiel氏が公開した『How Browsers Work』は、HTML5 Rocksに転載され、複数の日本語訳も提供されている、ブラウザの内部動作を学ぶために読んでおきたいリソースの1つです。 そのリソースを参考に、レンダリングエンジンのメインフローにつ
Webアニメーションを高速化するために知っておくべき10のこと（前編）
Webアニメーションを高速化するために知っておくべき10のこと（前編） 斉藤 祐也（株式会社リッチメディア） アニメーション／トランジションは身の回りに当たり前にあるものです。 むしろ普段の生活では「0」が「1」に変化するものの方が珍しいでしょう。 アニメーション／トランジションはデジタルなWebに対して自然な変化を提供する大切なツールです。 今回はそんなアニメーション／トランジションをより自然にスムーズに動作させるために知っておきたいことを前・後編の2回に分けて紹介していきます。 アニメーションを高速化する理由 アニメーションは先ほど書いたように普段の生活にも存在しています。だからこそ、我々はスムーズではないアニメーションを見つけるのが得意です。 アニメーションに限定した話ではありませんが、FacebookのShane O’Sullivan氏が、ページロード後のレンダリングパフォーマンス
Creative Loading Effects
YouTube Fill from left Fill from down Expanding box 3D Bar Bottom Pie Timer Centered Expanding Line Fill Sides Surrounding Borders Corner indicator Big Counter Filling Title Flat Top Bar Loading animations don't have to be restricted to a tiny indicator. Here is some inspiration for some creative loading effects.* *Note that not all browsers support animated pseudo-elements (last four effects).
Addressing The Responsive Images Performance Problem: A Case Study — Smashing Magazine
Responsive design for images is about optimizing the process of serving images to users. In this article, Anders Andersen & Tobias Järlund will share their responsive image technique, the “padding-bottom” technique, which they researched and implemented on the mobile version of the Swedish news website Aftonbladet (Sweden’s largest website). The technique presented here applies to all types of res
モバイルブラウザでもサクサクに動作する最適化6つのノウハウ
「Webサイト・アプリ高速化テクニック徹底解説」第8回は、モバイルブラウザに向けた最適化について紹介します。 モバイル端末はPCに比べ、CPUやネットワークなどの性能面で劣ることからボトルネックの影響が出やすく、またゲーム開発など突き詰めたチューニングを行う場面では、特殊なノウハウも必要になります。 しかしきちんと最適化を行えば、その効果もその分著しく、比較的低スペックな端末や3G回線であっても、サクサク軽量なサービス提供が可能です。今回の記事では、その勘所をお伝えしたいと思います。 1. ボトルネックを取り除く まずはやってしまいがちなボトルネックの事例について、挙げていきたいと思います。前述のようにモバイル端末では、その性能からPCよりも顕著に、未最適化箇所が体感に影響を及ぼします。 仕事がらそこそこの数のアプリケーションを見てきましたが、モバイル向けに特化したチューニングができていな
html5j.org
html5jについて html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わるすべての人々を応援する、非営利・中立のコミュニティです。私たちは、日本のWebクリエイター・エンジニアのスキル向上をお手伝いして、日本が世界のWebシーンをリードするような存在になることを心より願っています。 html5jの活動 html5jはWebクリエイター・エンジニアの皆さんに対し、「つながる」「学べる」「盛り上がる」を合言葉とし、以下の活動を行なっています。 html5jメーリングリスト Web開発に関する話題について質問したり、共有したりするためのメーリングリストです。また、勉強会の告知なども行なっています。 html5jメーリングリストに参加する （Googleグループに移動） 投稿ルール HTML5などの技術やWeb開発に関する話題であれば、どんな内容でも構いません。
斉藤祐也の海外WEBテク定点観測＜Issue.5: 2013/08/31-2013/09/13＞
斉藤祐也の海外WEBテク定点観測＜Issue.5: 2013/08/31-2013/09/13＞ 斉藤 祐也（株式会社リッチメディア） プログレッシブ・エンハンスメントに対する熱い議論、Steve Losh氏による技術文書の正しい書き方、JavaScript本の名著であるEloquent JavaScript2版のクラウドファンディングなど、14日間（8/31～9/13）のWeb開発最新ニュース合計18件を紹介します！ 注目ニュースピックアップ プログレッシブ・エンハンスメントはもう過去の話なのか? この14日間はプログレッシブ・エンハンスメントについて多くの議論が行われた。 事の発端はDaniel Mall氏が始めたSigh, JavaScriptという様々なWebサイトで、JavaScriptをオフにした際の状態をキャプチャしてリストするというTumblr。 それに対して、Ember.
50行で作る、HTML5+JavaScriptで『ラングトンのアリ』の簡単プログラミング！ - あのねノート。
2013-09-16 50行で作る、HTML5+JavaScriptで『ラングトンのアリ』の簡単プログラミング！ やり方 適当プログラミング解説シリーズ はじめに。 ラングトンのアリ(Langton's ant)を知っていますか？ラングトンのアリはWikipediaのラングトンのアリによると、以下のように記述されています。 ラングトンのアリ（英: Langton's ant）は、クリストファー・ラングトンが発明した単純な規則で記述される2次元チューリングマシンである。 実際の3匹のラングトンのアリの早送りされた動きです。 一見複雑そうに見えますが、ルールはたったこれだけです。(上のgifでは色のあるマスが白のマスとしています。) 黒いマスにアリがいた場合、90°右に方向転換し、そのマスの色を反転させ、1マス前進する。 白いマスにアリがいた場合、90°左に方向転換し、そのマスの色を反転させ、
HTML5Experts.jp
米国の大学を卒業後、大規模なインターネットメディア運営会社に編集者として入社するもウェブデザイナ兼フロントエンドデベロッパとして従事、その後株式会社サイバーエージェントにてモバイルウェブアプリの開発をメインとした部署にて専業フロントエンドデベロッパに転向。株式会社リッチメディアにUXエンジニアとなるべく転職し、現在にいたる。 個人ではブログ「CSS Radar」をはじめ、不定期更新ながら4つほどブログを運営し、オープンソースソフトウェアのソーシャルドキュメント翻訳をGitHub上で行う「en.ja OSS」を主催。html5j英語部の部長としても日・英の壁を無くすべく活動中。 時々「HTML5とか勉強会」をはじめ、様々な勉強会にて様々なトピックでスピーカとして登壇することも。
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
斉藤祐也の海外WEBテク定点観測＜Issue.4-2013/08/17-2013/08/30＞
斉藤祐也の海外WEBテク定点観測＜Issue.4-2013/08/17-2013/08/30＞ 斉藤 祐也（株式会社リッチメディア） Steven Wittens氏によるAcko.netのヘッダーアニメーション実装の解説、Node.jsをこれから始める人必見のチュートリアル、そしてPromises/A+の仕様を実装を通じて学べるチュートリアルなど、14日間のWeb開発最新ニュース合計18件を紹介します！ 注目ニュースピックアップ WebGL、CSS 3Dで最大のパフォーマンスと表現力を実現 — Acko.net 原題: Zero to Sixty in One Second Acko.netのSteven Wittens氏がWebにおける技術と表現力を最大限に発揮してくれた。 昨年1月にCSS3を使った3Dの表現の限界にチャレンジしたSteven。今年、Acko.netの13周年にあたって
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
stack3.com is for sale | HugeDomains
URL変更のお知らせ - 士業JOB
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える！ @M_Ishikawa #yapcasia
IBM Developer
HTML5Experts.jp